:root {
  --bg: #050505;
  --panel: #0b0b0b;
  --line: rgba(255, 255, 255, 0.07);
  --text: #ededed;
  --dim: #6f6f6f;
  --lime: #c6ff00;
  --lime-soft: rgba(198, 255, 0, 0.12);
  --orange: #ff6a1f;
  --red: #ff2e3a;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --display: "Archivo", "Arial Black", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

/* ---------- fundo ---------- */
.bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 85%);
}
#particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

.frame { position: fixed; inset: 12px; z-index: 1; pointer-events: none; }
.tick { position: absolute; width: 14px; height: 14px; border-color: var(--orange); border-style: solid; opacity: .7; }
.tick.tl { top: 0; left: 0; border-width: 1px 0 0 1px; }
.tick.tr { top: 0; right: 0; border-width: 1px 1px 0 0; }
.tick.bl { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.tick.br { bottom: 0; right: 0; border-width: 0 1px 1px 0; }

.vignette {
  position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 120px 30px var(--red);
  transition: opacity .25s;
}
.vignette.on { animation: vignette 1.4s ease-out forwards; }
@keyframes vignette { 0% { opacity: 0 } 12% { opacity: 1 } 30% { opacity: .55 } 45% { opacity: .95 } 100% { opacity: .35 } }

/* ---------- layout ---------- */
#app {
  position: relative; z-index: 2;
  min-height: 100dvh;
  width: 100%; max-width: 520px; margin: 0 auto;
  padding: 56px 24px 48px;
  display: flex; flex-direction: column;
}

.screen { display: flex; flex-direction: column; gap: 28px; flex: 1; animation: in .45s ease both; }
.screen.center { justify-content: center; }
@keyframes in { from { opacity: 0; transform: translateY(10px); filter: blur(4px) } to { opacity: 1; transform: none; filter: none } }

.label { font-size: 12px; color: var(--text); letter-spacing: .02em; }
.label.dim { color: var(--dim); }
.muted { color: var(--dim); }
.lime { color: var(--lime); }
.orange { color: var(--orange); }

.eyebrow {
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--orange);
  display: flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 6px; height: 6px; background: var(--orange); box-shadow: 0 0 10px var(--orange); }

.title {
  font-family: var(--mono); font-weight: 500; text-transform: uppercase;
  font-size: clamp(24px, 7vw, 32px); letter-spacing: .28em; line-height: 1.25;
  color: var(--orange);
}
.title.white { color: var(--text); }

.big {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(44px, 14vw, 72px); line-height: .9; letter-spacing: -.02em;
}

p.body { color: #bdbdbd; font-size: 14px; }
p.body strong { color: var(--text); font-weight: 700; }

.fit { white-space: nowrap; }

/* ---------- logo ---------- */
.logo { width: 76px; height: 76px; }
.logo svg { width: 100%; height: 100%; display: block; }

/* ---------- inputs ---------- */
.field { display: flex; flex-direction: column; gap: 10px; }
.input {
  width: 100%; background: #000; border: 1px solid #d9d9d9;
  padding: 16px 18px; font-size: 20px; outline: none;
  transition: border-color .2s, box-shadow .2s;
  border-radius: 0; -webkit-appearance: none; appearance: none;
}
.input::placeholder { color: #444; }
.input:focus { border-color: var(--lime); box-shadow: 0 0 0 1px var(--lime), 0 0 24px var(--lime-soft); }

.input-row { display: flex; gap: 0; }
.input-row .input { flex: 1; border-right: 0; }
.input-row .send {
  border: 1px solid #d9d9d9; background: var(--lime); color: #000; width: 64px;
  display: grid; place-items: center;
}
.input-row .input:focus + .send { border-color: var(--lime); }

/* ---------- botão ENTER ---------- */
.enter {
  width: 100%; background: var(--lime); color: #000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 12px 2px 14px; min-height: 92px;
  font-family: var(--display); font-weight: 900; font-size: clamp(48px, 15vw, 78px);
  letter-spacing: -.02em; line-height: 1;
  transition: transform .12s, filter .2s;
}
.enter:hover { filter: brightness(1.08); }
.enter:active { transform: scale(.985); }
.enter:disabled { background: #1c1c1c; color: #3a3a3a; cursor: not-allowed; }
.enter:disabled .px-arrow rect { fill: #3a3a3a; }
.px-arrow { width: 96px; height: 64px; flex: none; }
.px-arrow rect { fill: #fff; }
.enter:not(:disabled):hover .px-arrow { animation: nudge .6s steps(3) infinite; }
@keyframes nudge { 50% { transform: translateX(6px) } }

.legal { font-size: 12px; color: var(--lime); text-transform: uppercase; line-height: 1.6; }

/* ---------- botões [ colchete ] ---------- */
.bbtn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 30px; font-size: 20px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text); transition: color .2s, background .2s;
  min-height: 60px; text-align: center; line-height: 1.25;
}
.bbtn::before, .bbtn::after {
  content: ""; position: absolute; top: 6px; bottom: 6px; width: 7px;
  border: 2px solid currentColor; opacity: .9;
}
.bbtn::before { left: 6px; border-right: 0; }
.bbtn::after { right: 6px; border-left: 0; }
.bbtn:hover, .bbtn:focus-visible { color: var(--lime); background: rgba(255,255,255,.07); outline: none; }
.bbtn.solo { align-self: center; }

.options { display: flex; flex-direction: column; gap: 14px; }
.opt { width: 100%; font-size: 17px; letter-spacing: .06em; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }
.opt .key { color: var(--dim); margin-right: 12px; font-size: 12px; }
.options.locked .opt { pointer-events: none; }
.options.locked .opt:not(.right):not(.wrong) { opacity: .25; }
.opt.right { color: #000; background: var(--lime); }
.opt.right .key { color: #000; }
.opt.wrong { color: var(--red); background: rgba(255, 46, 58, .14); animation: shake .45s; }
.opt.wrong::before, .opt.wrong::after { border-color: var(--red); }
@keyframes shake { 20%, 60% { transform: translateX(-8px) } 40%, 80% { transform: translateX(8px) } }

/* ---------- painel ---------- */
.panel {
  position: relative; border: 1px solid rgba(255, 106, 31, .55);
  background: rgba(8, 8, 8, .85); padding: 20px;
  box-shadow: 0 0 30px rgba(255, 106, 31, .08), inset 0 0 30px rgba(255, 106, 31, .04);
}
.panel.lime { border-color: rgba(198, 255, 0, .5); box-shadow: 0 0 30px rgba(198,255,0,.08); }

.hud {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
  border-bottom: 1px solid #1d1d1d; padding-bottom: 12px;
}
.hud b { color: var(--text); font-weight: 500; }
.hud .money { color: var(--lime); }

.progress { display: flex; gap: 6px; }
.progress i { width: 22px; height: 4px; background: #2a2a2a; }
.progress i.done { background: var(--text); }
.progress i.ok { background: var(--lime); }
.progress i.bad { background: var(--red); }
.progress i.now { background: var(--orange); box-shadow: 0 0 8px var(--orange); }

/* ---------- jogo (contexto) ---------- */
.stats { display: flex; justify-content: space-between; font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: .1em; }
.stats b { color: var(--text); font-weight: 500; }

.msg { min-height: 20px; font-size: 13px; color: var(--orange); }

.guesses { display: flex; flex-direction: column; gap: 6px; }
.guess {
  position: relative; display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; background: #111; border: 1px solid #1c1c1c; overflow: hidden;
  font-size: 16px;
}
.guess .bar { position: absolute; left: 0; top: 0; bottom: 0; opacity: .22; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.guess span { position: relative; }
.guess .rank { font-weight: 700; }
.guess.hot .bar { background: var(--lime); } .guess.hot .rank { color: var(--lime); }
.guess.warm .bar { background: var(--orange); } .guess.warm .rank { color: var(--orange); }
.guess.cold .bar { background: var(--red); } .guess.cold .rank { color: var(--red); }
.guess.last { border-color: #d9d9d9; }
.guess.flash { animation: flash .8s; }
@keyframes flash { 0% { background: #2a2a2a } 100% { background: #111 } }

.divider { height: 1px; background: #1d1d1d; margin: 4px 0; }

.hint-row { display: flex; justify-content: space-between; gap: 12px; }
.link-btn { font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: var(--dim); padding: 6px 0; border-bottom: 1px dashed #333; }
.link-btn:hover { color: var(--lime); border-color: var(--lime); }

.howto { font-size: 13px; color: #a8a8a8; }
.howto summary { cursor: pointer; color: var(--text); font-size: 12px; letter-spacing: .15em; text-transform: uppercase; list-style: none; }
.howto summary::-webkit-details-marker { display: none; }
.howto summary::before { content: "+ "; color: var(--orange); }
.howto[open] summary::before { content: "− "; }
.howto p { margin-top: 10px; }

/* ---------- destravamento ---------- */
.unlock { align-items: center; text-align: center; justify-content: center; }
.lock { width: 132px; height: 170px; overflow: visible; margin-top: 24px; }
.lock .shackle { transform-origin: 98px 78px; transition: transform .7s cubic-bezier(.5,-0.4,.3,1.6); }
.lock.open .shackle { transform: translateY(-22px) rotate(24deg); }
.lock .body, .lock .shackle { stroke: var(--orange); transition: stroke .4s; }
.lock .hole { fill: var(--orange); transition: fill .4s; }
.lock.open .body, .lock.open .shackle { stroke: var(--lime); }
.lock.open .hole { fill: var(--lime); }
.lock.open { filter: drop-shadow(0 0 22px rgba(198,255,0,.45)); animation: pop .5s .1s; }
@keyframes pop { 50% { transform: scale(1.08) } }

.loader { width: 100%; }
.loader .track { height: 10px; border: 1px solid #333; padding: 2px; }
.loader .fill { height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--orange) 0 8px, transparent 8px 11px); transition: width .15s linear; }
.loader.done .fill { background: repeating-linear-gradient(90deg, var(--lime) 0 8px, transparent 8px 11px); }
.loader .pct { display: flex; justify-content: space-between; font-size: 12px; margin-top: 8px; color: var(--dim); letter-spacing: .1em; }

.log { width: 100%; text-align: left; font-size: 12px; color: #8a8a8a; min-height: 120px; }
.log div { animation: in .25s both; }
.log .ok { color: var(--lime); }

.granted { opacity: 0; transform: scale(.9); transition: all .5s; }
.granted.show { opacity: 1; transform: none; }
.glitch { position: relative; color: var(--lime); }
.glitch.run { animation: glitch 1s steps(2) 2; }
@keyframes glitch {
  0% { text-shadow: 3px 0 var(--orange), -3px 0 #0ff; transform: translate(0) }
  25% { text-shadow: -3px 0 var(--orange), 3px 0 #0ff; transform: translate(-2px, 1px) }
  50% { text-shadow: 2px 2px var(--orange), -2px -2px #0ff; transform: translate(2px, -1px) }
  100% { text-shadow: none; transform: none }
}

/* ---------- pergunta ---------- */
.question { font-size: clamp(22px, 6.4vw, 28px); font-weight: 500; line-height: 1.3; text-transform: uppercase; letter-spacing: .04em; }
.qnum { font-family: var(--display); font-weight: 900; font-size: 64px; line-height: .8; color: transparent; -webkit-text-stroke: 1px var(--orange); }

.feedback { min-height: 64px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.feedback .tag { font-size: 14px; letter-spacing: .25em; text-transform: uppercase; padding: 6px 10px; }
.feedback .tag.ok { background: var(--lime); color: #000; }
.feedback .tag.bad { background: var(--red); color: #000; }

.floater {
  position: fixed; z-index: 60; pointer-events: none;
  font-family: var(--display); font-weight: 900; font-size: 44px; color: var(--lime);
  text-shadow: 0 0 20px rgba(198,255,0,.6);
  animation: floatUp 1.4s ease-out forwards;
}
@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.6) } 20% { opacity: 1; transform: translate(-50%, -10px) scale(1.1) } 100% { opacity: 0; transform: translate(-50%, -110px) scale(1) } }

.flash-lime { position: fixed; inset: 0; z-index: 49; pointer-events: none; background: var(--lime); animation: flashL .5s ease-out forwards; }
@keyframes flashL { from { opacity: .25 } to { opacity: 0 } }

/* ---------- resultado ---------- */
.receipt { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.receipt .row { display: flex; justify-content: space-between; gap: 12px; }
.receipt .row span:first-child { color: #a8a8a8; }
.receipt .row span:last-child { white-space: nowrap; }
.receipt .ok { color: var(--lime); }
.receipt .bad { color: var(--red); }
.receipt .total { border-top: 1px dashed #333; padding-top: 12px; margin-top: 4px; font-size: 15px; }
.receipt .total span:last-child { color: var(--lime); font-weight: 700; }

.price { display: flex; align-items: baseline; gap: 10px; color: var(--lime); }
.price small { font-size: 18px; font-family: var(--mono); font-weight: 500; }

.pix { display: flex; flex-direction: column; gap: 10px; }
.pix-key { display: flex; border: 1px solid #d9d9d9; }
.pix-key code { flex: 1; padding: 14px 16px; font-size: 18px; letter-spacing: .08em; overflow-wrap: anywhere; }
.pix-key button { background: var(--lime); color: #000; padding: 0 16px; font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; min-width: 104px; }

.info-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #262626; }
.info-grid div { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.info-grid div + div { border-left: 1px solid #262626; }
.info-grid small { font-size: 10px; letter-spacing: .2em; color: var(--dim); text-transform: uppercase; }
.info-grid b { font-size: 18px; font-weight: 500; text-transform: uppercase; }

.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0 } }

/* ---------- mateusão ---------- */
.mateus-pop {
  position: fixed; z-index: 70; left: 50%; top: 50%; width: min(50vw, 180px);
  transform: translate(-50%, -50%); pointer-events: none; text-align: center;
  animation: mateusIn .5s cubic-bezier(.2,1.4,.4,1) both;
}
.mateus-pop.sai { animation: mateusOut .45s ease-in forwards; }
.mateus-pop img { width: 100%; display: block; filter: drop-shadow(0 12px 30px rgba(0,0,0,.7)); }
.mateus-pop.feliz img { animation: balanca .5s .4s ease-in-out 2; }
.mateus-valor {
  font-family: var(--display); font-weight: 900; font-size: 38px; line-height: 1; margin-top: -10px;
  text-shadow: 0 4px 0 #000, 0 0 24px currentColor;
}
.mateus-pop.triste .mateus-valor { color: var(--red); }
.mateus-pop.feliz .mateus-valor { color: var(--lime); }
.mateus-legenda {
  display: inline-block; margin-top: 8px; padding: 4px 10px; background: #000;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--text);
}
@keyframes mateusIn { from { opacity: 0; transform: translate(-50%, -40%) scale(.4) rotate(-12deg) } to { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0) } }
@keyframes mateusOut { to { opacity: 0; transform: translate(-50%, -60%) scale(.85) } }
@keyframes balanca { 25% { transform: rotate(-6deg) } 75% { transform: rotate(6deg) } }

/* ---------- placar geral ---------- */
.placar { display: flex; flex-direction: column; gap: 18px; border-top: 1px dashed #333; padding-top: 24px; }
.placar-total { display: flex; align-items: center; gap: 14px; padding: 14px; }
.placar-total img { width: 84px; flex: none; }
.placar-total small { display: block; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--dim); }
.placar-total .big { font-size: clamp(34px, 11vw, 52px); margin: 4px 0; }
.ranking { display: flex; flex-direction: column; gap: 6px; }
.ranking .label { margin-bottom: 4px; }
.rank-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #111; border: 1px solid #1c1c1c; font-size: 13px; }
.rank-row .pos { color: var(--orange); font-weight: 700; }
.rank-row .nome { flex: 1; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-row .nome em { font-style: normal; font-size: 10px; color: var(--dim); border: 1px solid #333; padding: 0 4px; margin-left: 4px; }
.rank-row .t { color: #a8a8a8; white-space: nowrap; }
.rank-row .t.lime { color: var(--lime); }
.rank-row.eu { border-color: var(--lime); }

/* ---------- password hints ---------- */
.hints { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.hint { font-size: 13px; color: var(--dim); padding: 8px 12px; border-left: 2px solid var(--orange); background: rgba(255, 106, 31, 0.05); animation: in .3s both; }
.hint.revealed { color: var(--orange); }

/* ---------- erro-diogo (fake button feedback) ---------- */
.erro-resposta {
  color: var(--red);
  font-size: 14px;
  letter-spacing: .15em;
  text-transform: uppercase;
  animation: shake .45s, in .3s both;
  text-align: center;
  padding: 8px;
}
.opt.fake-erro {
  opacity: .3;
  pointer-events: none;
}
.opt.outros-btn {
  color: var(--dim);
  font-size: 14px;
}

/* ---------- economy float ---------- */
.economy-float {
  position: fixed; z-index: 60; pointer-events: none;
  left: 50%; top: 40%;
  font-family: var(--display); font-weight: 900; font-size: 28px; color: var(--lime);
  text-shadow: 0 0 20px rgba(198,255,0,.6), 0 0 40px rgba(198,255,0,.3);
  animation: economyUp 1.8s ease-out forwards;
  white-space: nowrap;
}
@keyframes economyUp {
  0% { opacity: 0; transform: translate(-50%, 20px) scale(.7); }
  15% { opacity: 1; transform: translate(-50%, -10px) scale(1.15); }
  30% { transform: translate(-50%, -20px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -120px) scale(.9); }
}

/* ---------- money pulse ---------- */
.money-pulse {
  animation: moneyPulse .5s ease-out;
}
@keyframes moneyPulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.4); color: #fff; }
  100% { transform: scale(1); }
}

/* ---------- confetti burst ---------- */
.confetti-burst {
  position: fixed; z-index: 55; pointer-events: none;
  width: 8px; height: 8px;
  animation: confettiFall 1.2s ease-out forwards;
}
@keyframes confettiFall {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translate(var(--cx), var(--cy)) rotate(720deg) scale(0); }
}

/* ---------- streak indicator ---------- */
.streak-indicator {
  position: fixed; z-index: 58; pointer-events: none;
  left: 50%; top: 28%;
  transform: translateX(-50%);
  font-family: var(--display); font-weight: 900; font-size: 22px; color: var(--orange);
  text-shadow: 0 0 16px rgba(255,106,31,.6), 0 0 32px rgba(255,106,31,.3);
  animation: streakPop 1.6s ease-out forwards;
  white-space: nowrap;
}
@keyframes streakPop {
  0% { opacity: 0; transform: translateX(-50%) scale(.5); }
  15% { opacity: 1; transform: translateX(-50%) scale(1.2); }
  30% { transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-60px) scale(.9); }
}

/* ---------- progress bar glow ---------- */
.progress i.ok {
  background: var(--lime);
  box-shadow: 0 0 8px var(--lime), 0 0 16px rgba(198,255,0,.3);
}

/* ---------- savings bar ---------- */
.savings-bar {
  width: 100%; height: 8px; background: #1c1c1c; border: 1px solid #333; margin-top: 8px;
}
.savings-fill {
  height: 100%; background: var(--lime); transition: width 1s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 0 12px rgba(198,255,0,.4);
}

/* ---------- savings highlight ---------- */
.savings-highlight {
  font-family: var(--display); font-weight: 900; font-size: clamp(24px, 8vw, 36px);
  color: var(--lime); text-shadow: 0 0 20px rgba(198,255,0,.4);
  text-align: center; margin-top: 8px;
}

/* ---------- invite hero price ---------- */
.hero-price {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(52px, 16vw, 80px); line-height: .9;
  color: var(--lime); text-shadow: 0 0 30px rgba(198,255,0,.3);
  text-align: center; margin: 8px 0;
}
.full-price {
  font-size: 18px; color: var(--dim); text-decoration: line-through;
  font-family: var(--mono); font-weight: 500;
}

/* ---------- password celebration ---------- */
.senha-acerto {
  position: fixed; z-index: 60; pointer-events: none;
  left: 50%; top: 45%;
  transform: translateX(-50%);
  font-family: var(--display); font-weight: 900; font-size: 32px; color: var(--lime);
  text-shadow: 0 0 20px rgba(198,255,0,.6);
  animation: economyUp 2s ease-out forwards;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}