/* =========================================================
   DESAFIO DO TATO — VB Alimentos / FEIPET
   Layout fluido e responsivo (retrato, paisagem, qualquer tela)
   ---------------------------------------------------------
   Tudo é medido na unidade --u = calc(100cqmin / 1080), ou seja "1 px de
   projeto". Em um palco de 1080px de largura (totem 1080x1920) --u vale
   exatamente 1px, então o totem fica IDÊNTICO ao layout original; em
   qualquer outra tela tudo escala junto. Sem media queries: usamos unidades
   fluidas (cqmin/cqw/dvh) + container queries para adaptar a paisagem.
   ========================================================= */

/* ---------- Fontes locais ---------- */
@font-face{font-family:"Fredoka";src:url("../fonts/fredoka-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:block}
@font-face{font-family:"Fredoka";src:url("../fonts/fredoka-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:block}
@font-face{font-family:"Fredoka";src:url("../fonts/fredoka-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:block}
@font-face{font-family:"Nunito";src:url("../fonts/nunito-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Nunito";src:url("../fonts/nunito-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Nunito";src:url("../fonts/nunito-latin-800-normal.woff2") format("woff2");font-weight:800;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --red:#C8161E; --red-600:#B11219; --red-700:#9C0F16; --red-800:#7E0B11;
  --red-050:#FCEAE8; --red-100:#F6CFCC; --red-300:#EE9A95;
  --navy:#16294D; --navy-700:#0F1D38;
  --ink:#22242C; --ink-soft:#54586A;
  --paper:#FFFFFF; --cream:#FFF6F0; --sand:#F3E9E0; --sand-2:#EADDD2;
  --gold:#F4A724; --gold-deep:#E2880C;
  --ok:#1FA463; --ok-soft:#3FCB85;
  --display:"Fredoka", system-ui, sans-serif;
  --body:"Nunito", system-ui, sans-serif;
}

/* ---------- Reset / base ---------- */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;width:100%;overflow:hidden;background:#2a1416;
  font-family:var(--body);color:var(--ink);
  -webkit-user-select:none;user-select:none;touch-action:none;overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{ -webkit-user-drag:none;user-drag:none;pointer-events:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit}

/* ---------- Palco fluido (preenche a tela) ----------
   O #viewport ocupa a tela inteira com unidades dinâmicas (dvw/dvh + fallback
   vw/vh). O #stage preenche o viewport e é o "container" de consulta: todas as
   medidas internas usam --u (cqmin), então o jogo escala para qualquer tela. */
#viewport{position:fixed;inset:0;overflow:hidden;
  width:100vw;width:100dvw;height:100vh;height:100dvh;
  background:radial-gradient(120% 90% at 50% 0%, #3a1c1f 0%, #1d0e10 100%)}
#stage{position:absolute;inset:0;overflow:hidden;
  container-type:size;container-name:stage;
  --u:calc(100cqmin / 1080);
  background:linear-gradient(180deg,#FFF7F1 0%, #FBEFE6 60%, #F6E6D9 100%)}

/* ---------- Fundo decorativo ---------- */
.bg-layer{position:absolute;inset:0;overflow:hidden;z-index:0}
.bg-blob{position:absolute;border-radius:50%;filter:blur(2px);opacity:.5}
.bg-blob--1{width:calc(900*var(--u));height:calc(900*var(--u));left:calc(-340*var(--u));top:calc(-300*var(--u));
  background:radial-gradient(circle at 40% 40%, rgba(244,167,36,.30), transparent 62%)}
.bg-blob--2{width:calc(1000*var(--u));height:calc(1000*var(--u));right:calc(-420*var(--u));bottom:calc(-360*var(--u));
  background:radial-gradient(circle at 50% 50%, rgba(200,22,30,.16), transparent 64%)}
.bg-paws{position:absolute;inset:0;opacity:.05;
  background-image:radial-gradient(circle at 12px 8px, var(--red) 7px, transparent 8px),
    radial-gradient(circle at 2px 2px, var(--red) 4px, transparent 5px),
    radial-gradient(circle at 22px 2px, var(--red) 4px, transparent 5px),
    radial-gradient(circle at 7px -3px, var(--red) 4px, transparent 5px),
    radial-gradient(circle at 17px -3px, var(--red) 4px, transparent 5px);
  background-size:calc(150*var(--u)) calc(150*var(--u));background-position:0 0}

/* ---------- Telas ---------- */
.screen{position:absolute;inset:0;z-index:2;display:none;flex-direction:column}
body[data-screen="start"] .screen[data-name="start"],
body[data-screen="lead"]  .screen[data-name="lead"],
body[data-screen="intro"] .screen[data-name="intro"],
body[data-screen="play"]  .screen[data-name="play"],
body[data-screen="final"] .screen[data-name="final"]{display:flex;animation:screenIn .35s ease both}
@keyframes screenIn{from{opacity:0}to{opacity:1}}

/* ---------- Botões ---------- */
.btn{font-family:var(--display);font-weight:600;letter-spacing:calc(.5*var(--u));
  border-radius:999px;transition:transform .12s ease, box-shadow .2s ease, filter .2s ease;
  display:inline-flex;align-items:center;justify-content:center;gap:calc(14*var(--u));position:relative}
.btn:active{transform:scale(.96)}
.btn--xl{font-size:calc(54*var(--u));padding:calc(38*var(--u)) calc(70*var(--u));min-height:calc(120*var(--u))}
.btn--primary{color:#fff;background:linear-gradient(180deg,var(--red) 0%, var(--red-700) 100%);
  box-shadow:0 calc(16*var(--u)) 0 var(--red-800), 0 calc(26*var(--u)) calc(40*var(--u)) rgba(124,11,17,.4)}
.btn--primary:active{box-shadow:0 calc(6*var(--u)) 0 var(--red-800), 0 calc(12*var(--u)) calc(22*var(--u)) rgba(124,11,17,.4);transform:translateY(calc(8*var(--u))) scale(.99)}
.btn--primary[disabled]{filter:grayscale(.55) brightness(1.05);opacity:.55;
  box-shadow:0 calc(10*var(--u)) 0 #8a8a8a;pointer-events:none}
.btn--ghost{background:var(--cream);color:var(--red-700);font-size:calc(30*var(--u));padding:calc(22*var(--u)) calc(28*var(--u));
  border:calc(3*var(--u)) solid var(--red-100);font-family:var(--body);font-weight:800}
.btn--danger{background:#fff;color:#fff;background:linear-gradient(180deg,#e0473f,#c4231b);
  font-size:calc(30*var(--u));padding:calc(22*var(--u)) calc(28*var(--u));font-family:var(--body);font-weight:800}

/* =========================================================
   TELA 0 — START / ATRAÇÃO
   ========================================================= */
.start-wrap{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:calc(32*var(--u));padding:calc(24*var(--u)) calc(60*var(--u)) calc(52*var(--u));min-height:0}
.start-hero{display:flex;flex-direction:column;align-items:center;gap:calc(4*var(--u))}
.speech--start{order:-1;max-width:calc(880*var(--u));animation:popIn .5s .2s both}
.speech--start p{font-size:calc(48*var(--u))}
.start-tato{height:calc(500*var(--u));filter:drop-shadow(0 calc(26*var(--u)) calc(40*var(--u)) rgba(124,11,17,.3));
  animation:introTato .7s cubic-bezier(.2,1.4,.4,1) both, bobTato 3.4s ease-in-out 1s infinite}
.start-title{font-family:var(--display);font-weight:700;font-size:calc(116*var(--u));line-height:.92;
  text-align:center;color:var(--navy);text-shadow:0 calc(5*var(--u)) 0 rgba(22,41,77,.12)}
.start-title span{color:var(--red)}
.start-carousel{width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.start-track{display:flex;gap:calc(34*var(--u));width:max-content;align-items:center;
  animation:scrollX 30s linear infinite}
.start-track img{height:calc(210*var(--u));width:auto;display:block;pointer-events:none;
  filter:drop-shadow(0 calc(12*var(--u)) calc(18*var(--u)) rgba(124,11,17,.18))}
@keyframes scrollX{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.start-cta{animation:ctaPulse 1.8s ease-in-out infinite}
.start-cta:active{animation:none}
@keyframes ctaPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.start-hint{font-family:var(--body);font-weight:800;font-size:calc(30*var(--u));letter-spacing:calc(3*var(--u));
  text-transform:uppercase;color:var(--ink-soft);opacity:.65}
.start-insta{display:flex;align-items:center;gap:calc(34*var(--u));background:#fff;
  border:calc(4*var(--u)) solid var(--red-100);border-radius:calc(28*var(--u));
  padding:calc(24*var(--u)) calc(26*var(--u));box-shadow:0 calc(18*var(--u)) calc(40*var(--u)) rgba(124,11,17,.16), 0 calc(4*var(--u)) calc(12*var(--u)) rgba(0,0,0,.06);animation:popIn .5s .4s both}
.start-insta__copy{display:flex;flex-direction:column;gap:calc(8*var(--u));text-align:left}
.start-insta__pre{font-family:var(--body);font-weight:800;font-size:calc(26*var(--u));letter-spacing:calc(2*var(--u));
  text-transform:uppercase;color:var(--ink-soft)}
.start-insta__title{font-family:var(--display);font-weight:700;font-size:calc(50*var(--u));line-height:1.04;color:var(--red)}
.start-insta__cta{font-family:var(--body);font-weight:700;font-size:calc(28*var(--u));color:var(--navy);max-width:calc(380*var(--u))}
.start-insta__qr{flex:0 0 auto;width:calc(212*var(--u));height:calc(212*var(--u));border-radius:calc(18*var(--u));
  background:#fff;border:calc(3*var(--u)) solid var(--sand);padding:calc(8*var(--u));display:grid;place-items:center}
.start-insta__qr img{width:100%;height:100%;object-fit:contain;border-radius:calc(10*var(--u))}

/* =========================================================
   TELA 1 — LEADS
   ========================================================= */
.brand-bar{height:calc(120*var(--u));flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:0 calc(64*var(--u));background:linear-gradient(180deg,var(--red) 0%,var(--red-700) 100%);
  color:#fff;box-shadow:0 calc(8*var(--u)) calc(24*var(--u)) rgba(124,11,17,.3);z-index:3}
.brand-bar__logo{display:inline-flex;align-items:center}
.brand-bar__logo img{height:calc(104*var(--u));width:auto;display:block;pointer-events:none;
  filter:drop-shadow(0 0 calc(5*var(--u)) rgba(255,255,255,.95)) drop-shadow(0 0 calc(2*var(--u)) rgba(255,255,255,.95))
         drop-shadow(0 calc(6*var(--u)) calc(12*var(--u)) rgba(0,0,0,.3))}
.brand-bar__sub{font-family:var(--display);font-weight:700;font-size:calc(40*var(--u));letter-spacing:calc(1*var(--u));
  color:#FFE2B0;text-transform:none}

.lead-wrap{flex:1 1 auto;display:flex;flex-direction:column;padding:calc(28*var(--u)) calc(64*var(--u)) 0;min-height:0}
.lead-hero{display:flex;align-items:center;gap:calc(24*var(--u));margin-bottom:calc(20*var(--u))}
.lead-hero__tato{height:calc(250*var(--u));filter:drop-shadow(0 calc(18*var(--u)) calc(26*var(--u)) rgba(124,11,17,.28));
  animation:bobTato 3.4s ease-in-out infinite}
@keyframes bobTato{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(calc(-14*var(--u))) rotate(1.5deg)}}
.lead-title{font-family:var(--display);font-weight:700;font-size:calc(80*var(--u));line-height:.96;color:var(--navy)}
.lead-title span{color:var(--red)}
.lead-sub{font-family:var(--body);font-weight:700;font-size:calc(38*var(--u));color:var(--ink-soft);margin-top:calc(14*var(--u))}

.lead-form{display:flex;flex-direction:column;gap:calc(18*var(--u))}
.field-row{display:flex;gap:calc(22*var(--u))}
.field-row .field{flex:1}
.field{position:relative;display:flex;flex-direction:column;gap:calc(8*var(--u))}
.field__label{font-family:var(--display);font-weight:600;font-size:calc(32*var(--u));color:var(--navy);padding-left:calc(10*var(--u))}
.field input{height:calc(96*var(--u));border-radius:calc(28*var(--u));border:calc(4*var(--u)) solid var(--sand-2);
  background:#fff;font-size:calc(42*var(--u));font-weight:700;color:var(--ink);padding:0 calc(30*var(--u));
  transition:border-color .18s ease, box-shadow .18s ease;caret-color:transparent}
.field input::placeholder{color:#C7BBB0;font-weight:600}
.field.is-active input{border-color:var(--red);box-shadow:0 0 0 calc(6*var(--u)) var(--red-050)}
.field.is-error input{border-color:#E0473F;box-shadow:0 0 0 calc(6*var(--u)) #fbe1df}
.field__err{display:none;color:#C4231B;font-weight:800;font-size:calc(26*var(--u));padding-left:calc(10*var(--u))}
.field.is-error .field__err{display:block}

.consent{display:flex;align-items:flex-start;gap:calc(18*var(--u));margin-top:calc(4*var(--u));cursor:pointer}
.consent input{position:absolute;opacity:0;width:0;height:0}
.consent__box{flex:0 0 auto;width:calc(56*var(--u));height:calc(56*var(--u));border-radius:calc(14*var(--u));border:calc(4*var(--u)) solid var(--sand-2);
  background:#fff;display:grid;place-items:center;transition:.15s}
.consent__box::after{content:"";width:calc(26*var(--u));height:calc(14*var(--u));border-left:calc(6*var(--u)) solid #fff;border-bottom:calc(6*var(--u)) solid #fff;
  transform:rotate(-45deg) scale(0);transition:transform .15s ease;margin-top:calc(-4*var(--u))}
.consent input:checked + .consent__box{background:var(--ok);border-color:var(--ok)}
.consent input:checked + .consent__box::after{transform:rotate(-45deg) scale(1)}
.consent__text{font-family:var(--body);font-weight:700;font-size:calc(25*var(--u));color:var(--ink-soft);line-height:1.25;padding-top:calc(4*var(--u))}

#startBtn{margin-top:calc(14*var(--u));align-self:stretch}

/* Teclado virtual — painel FLUTUANTE e arrastável.
   Posição padrão: centralizado, perto do rodapé do palco. O arraste (JS)
   sobrescreve com left/top em px. Largura limitada à largura do palco. */
.keyboard{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(60*var(--u));
  width:min(calc(960*var(--u)), 94cqw);z-index:30;
  background:linear-gradient(180deg,#2b1416,#1c0d0f);
  padding:0 calc(18*var(--u)) calc(18*var(--u));border-radius:calc(30*var(--u));
  display:none;flex-direction:column;touch-action:none;
  box-shadow:0 calc(30*var(--u)) calc(70*var(--u)) rgba(0,0,0,.55), 0 0 0 calc(4*var(--u)) rgba(255,255,255,.06)}
/* A entrada anima por margin (não por transform) para NÃO sobrescrever o
   translateX(-50%) de centralização — animation fill "both" venceria o transform. */
.keyboard.is-open{display:flex;animation:kbUp .22s ease both}
@keyframes kbUp{from{opacity:0;margin-bottom:calc(-30*var(--u))}to{opacity:1;margin-bottom:0}}
.kb-handle{height:calc(68*var(--u));flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:0 calc(8*var(--u)) 0 calc(24*var(--u));cursor:grab;touch-action:none;user-select:none}
.kb-handle:active{cursor:grabbing}
.kb-handle__grip{font-family:var(--body);font-weight:800;font-size:calc(25*var(--u));letter-spacing:calc(2*var(--u));
  color:#FFE2B0;opacity:.85;text-transform:uppercase}
.kb-handle__close{flex:0 0 auto;width:calc(54*var(--u));height:calc(54*var(--u));border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;font-size:calc(30*var(--u));font-weight:800;display:grid;place-items:center}
.kb-handle__close:active{background:rgba(255,255,255,.26)}
.kb-keys{display:flex;flex-direction:column;gap:calc(14*var(--u))}
.kb-row{display:flex;gap:calc(14*var(--u));justify-content:center}
.kb-key{flex:1 1 0;min-width:0;height:calc(108*var(--u));border-radius:calc(20*var(--u));
  background:linear-gradient(180deg,#fff,#f0e6dd);color:var(--ink);
  font-family:var(--display);font-weight:600;font-size:calc(44*var(--u));
  box-shadow:0 calc(6*var(--u)) 0 rgba(0,0,0,.35);transition:transform .06s,box-shadow .06s}
.kb-key:active{transform:translateY(calc(4*var(--u)));box-shadow:0 calc(2*var(--u)) 0 rgba(0,0,0,.35);background:var(--red-050)}
.kb-key--wide{flex:2.4}
.kb-key--space{flex:5}
.kb-key--fn{background:linear-gradient(180deg,#5a2a2d,#3a1a1c);color:#fff;font-size:calc(32*var(--u));font-weight:500;box-shadow:0 calc(6*var(--u)) 0 #1a0c0d}
.kb-key--ok{background:linear-gradient(180deg,var(--ok-soft),var(--ok));color:#fff;box-shadow:0 calc(6*var(--u)) 0 #137a48}
.kb-key--accent{font-size:calc(38*var(--u))}

/* =========================================================
   TELA 2 — INTRO
   ========================================================= */
.intro-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(30*var(--u));padding:calc(80*var(--u))}
.intro-tato{height:calc(840*var(--u));filter:drop-shadow(0 calc(30*var(--u)) calc(40*var(--u)) rgba(124,11,17,.3));
  animation:introTato .7s cubic-bezier(.2,1.4,.4,1) both, bobTato 3.4s ease-in-out 1s infinite}
@keyframes introTato{from{transform:translateY(calc(120*var(--u))) scale(.8);opacity:0}to{transform:none;opacity:1}}
.speech{position:relative;background:#fff;border:calc(6*var(--u)) solid var(--red);border-radius:calc(48*var(--u));
  padding:calc(46*var(--u)) calc(56*var(--u));max-width:calc(820*var(--u));box-shadow:0 calc(18*var(--u)) calc(40*var(--u)) rgba(124,11,17,.16), 0 calc(4*var(--u)) calc(12*var(--u)) rgba(0,0,0,.06)}
.speech p{font-family:var(--display);font-weight:600;font-size:calc(58*var(--u));line-height:1.1;color:var(--navy);text-align:center}
.speech__tail{position:absolute;left:50%;bottom:calc(-46*var(--u));transform:translateX(-50%);
  width:0;height:0;border-left:calc(34*var(--u)) solid transparent;border-right:calc(34*var(--u)) solid transparent;border-top:calc(46*var(--u)) solid var(--red)}
.speech__tail::after{content:"";position:absolute;left:calc(-26*var(--u));top:calc(-50*var(--u));
  border-left:calc(26*var(--u)) solid transparent;border-right:calc(26*var(--u)) solid transparent;border-top:calc(38*var(--u)) solid #fff}
.speech--intro{order:-1;animation:popIn .5s .3s both}
@keyframes popIn{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
#introBtn{margin-top:calc(10*var(--u))}
.btn__ring{position:absolute;inset:calc(-10*var(--u));width:calc(100% + 20*var(--u));height:calc(100% + 20*var(--u));pointer-events:none}
.btn__ring circle{fill:none;stroke:#FFE2B0;stroke-width:6;stroke-linecap:round;opacity:.9;
  stroke-dasharray:339;stroke-dashoffset:339;transform:rotate(-90deg);transform-origin:center}
.intro-counting .btn__ring circle{animation:ringFill 3s linear forwards}
@keyframes ringFill{to{stroke-dashoffset:0}}

/* =========================================================
   TELA 3 — GAMEPLAY
   ========================================================= */
.objective{position:absolute;top:0;left:0;right:0;height:calc(200*var(--u));z-index:4;
  display:flex;align-items:center;gap:calc(30*var(--u));padding:0 calc(56*var(--u));
  background:linear-gradient(180deg,var(--red) 0%,var(--red-700) 100%);
  box-shadow:0 calc(10*var(--u)) calc(30*var(--u)) rgba(124,11,17,.35);
  transition:background .3s ease}
.objective[data-target="cat"]{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-700) 100%)}
.objective__icon{flex:0 0 auto;width:calc(120*var(--u));height:calc(120*var(--u));border-radius:calc(30*var(--u));background:rgba(255,255,255,.16);
  display:grid;place-items:center}
.objective__icon svg{width:calc(84*var(--u));height:calc(84*var(--u));fill:#fff}
.objective__text{display:flex;flex-direction:column;line-height:1}
.objective__pre{font-family:var(--body);font-weight:800;font-size:calc(34*var(--u));letter-spacing:calc(3*var(--u));color:rgba(255,255,255,.82)}
.objective__target{font-family:var(--display);font-weight:700;font-size:calc(96*var(--u));color:#fff;
  text-shadow:0 calc(4*var(--u)) 0 rgba(0,0,0,.18)}
.objective.pulse{animation:objPulse .5s ease}
@keyframes objPulse{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}

.hud{position:absolute;top:calc(226*var(--u));left:0;right:0;z-index:4;display:flex;align-items:center;
  justify-content:space-between;padding:0 calc(50*var(--u));pointer-events:none}
.hud__score{display:flex;flex-direction:column;background:#fff;border-radius:calc(26*var(--u));padding:calc(16*var(--u)) calc(34*var(--u));
  box-shadow:0 calc(18*var(--u)) calc(40*var(--u)) rgba(124,11,17,.16), 0 calc(4*var(--u)) calc(12*var(--u)) rgba(0,0,0,.06);min-width:calc(240*var(--u))}
.hud__label{font-family:var(--body);font-weight:800;font-size:calc(26*var(--u));letter-spacing:calc(2*var(--u));color:var(--ink-soft)}
.hud__value{font-family:var(--display);font-weight:700;font-size:calc(78*var(--u));color:var(--red);line-height:.9}
.hud__value.bump{animation:bump .3s ease}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}
.hud__goal{font-family:var(--body);font-weight:800;font-size:calc(24*var(--u));letter-spacing:calc(1*var(--u));
  color:var(--ink-soft);margin-top:calc(2*var(--u));transition:color .2s ease}
.hud__goal.met{color:var(--ok)}
.hud__combo{font-family:var(--display);font-weight:700;font-size:calc(46*var(--u));color:var(--gold-deep);
  opacity:0;transform:translateY(calc(8*var(--u)));transition:.2s;text-shadow:0 calc(2*var(--u)) 0 rgba(0,0,0,.08)}
.hud__combo.show{opacity:1;transform:none}
.hud__timer{position:relative;width:calc(168*var(--u));height:calc(168*var(--u));display:grid;place-items:center}
.timer-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.timer-ring__bg{fill:#fff;stroke:#F0DDD0;stroke-width:7}
.timer-ring__fg{fill:none;stroke:var(--red);stroke-width:8;stroke-linecap:round;
  stroke-dasharray:213.6;stroke-dashoffset:0;transition:stroke-dashoffset .25s linear}
.hud__time{font-family:var(--display);font-weight:700;font-size:calc(64*var(--u));color:var(--navy)}
.hud__timer.low .timer-ring__fg{stroke:#E0473F}
.hud__timer.low .hud__time{color:#C4231B;animation:blink .6s steps(2) infinite}
@keyframes blink{50%{opacity:.35}}

#gameCanvas{position:absolute;inset:0;z-index:2;width:100%;height:100%;touch-action:none}

.game-tato{position:absolute;right:calc(18*var(--u));bottom:calc(14*var(--u));height:calc(230*var(--u));z-index:3;
  filter:drop-shadow(0 calc(12*var(--u)) calc(18*var(--u)) rgba(124,11,17,.25));opacity:.96;
  animation:bobTato 3.4s ease-in-out infinite}

/* Balão de fala do Tato no rodapé — anuncia a troca SEM pausar o jogo */
.game-speech{position:absolute;right:calc(40*var(--u));bottom:calc(214*var(--u));z-index:6;max-width:calc(640*var(--u));
  --bub:var(--red);
  background:#fff;border:calc(6*var(--u)) solid var(--bub);border-radius:calc(40*var(--u));padding:calc(26*var(--u)) calc(40*var(--u));
  box-shadow:0 calc(26*var(--u)) calc(60*var(--u)) rgba(124,11,17,.28);transform-origin:82% 130%;
  opacity:0;transform:translateY(calc(24*var(--u))) scale(.86);pointer-events:none;
  transition:opacity .22s ease, transform .28s cubic-bezier(.2,1.6,.4,1)}
.game-speech[data-target="cat"]{--bub:var(--navy)}
.game-speech.show{opacity:1;transform:none}
.game-speech p{font-family:var(--display);font-weight:600;font-size:calc(46*var(--u));line-height:1.08;
  color:var(--navy);text-align:center}
.game-speech .speech__tail{left:auto;right:calc(26*var(--u));bottom:calc(-44*var(--u));transform:none;
  border-left:calc(30*var(--u)) solid transparent;border-right:calc(30*var(--u)) solid transparent;border-top:calc(44*var(--u)) solid var(--bub)}
.game-speech .speech__tail::after{left:calc(-22*var(--u));top:calc(-50*var(--u));
  border-left:calc(22*var(--u)) solid transparent;border-right:calc(22*var(--u)) solid transparent;border-top:calc(34*var(--u)) solid #fff}
.game-tato.say{animation:tatoHop .6s ease 1, bobTato 3.4s ease-in-out infinite}
@keyframes tatoHop{0%{transform:translateY(0) rotate(0)}28%{transform:translateY(calc(-46*var(--u))) rotate(-7deg)}
  58%{transform:translateY(0) rotate(4deg)}100%{transform:translateY(0) rotate(0)}}

/* Contagem inicial */
.countdown{position:absolute;inset:0;z-index:7;display:none;align-items:center;justify-content:center;
  background:rgba(255,247,240,.7)}
.countdown.show{display:flex}
.countdown span{font-family:var(--display);font-weight:700;font-size:calc(360*var(--u));color:var(--red);
  text-shadow:0 calc(10*var(--u)) 0 rgba(124,11,17,.2);animation:cd .9s ease}
@keyframes cd{0%{transform:scale(.3);opacity:0}40%{transform:scale(1);opacity:1}100%{transform:scale(1.4);opacity:0}}

/* =========================================================
   TELA FINAL
   ========================================================= */
.final-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:calc(18*var(--u));padding:calc(90*var(--u)) calc(70*var(--u));position:relative}
.final-tato{height:calc(560*var(--u));filter:drop-shadow(0 calc(26*var(--u)) calc(36*var(--u)) rgba(124,11,17,.3));
  animation:winTato .8s cubic-bezier(.2,1.5,.4,1) both}
@keyframes winTato{from{transform:scale(.4) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}
.final-title{font-family:var(--display);font-weight:700;font-size:calc(140*var(--u));color:var(--red);
  text-shadow:0 calc(6*var(--u)) 0 rgba(124,11,17,.18);animation:popIn .5s .15s both}
.final-score{display:flex;flex-direction:column;align-items:center;background:#fff;border-radius:calc(40*var(--u));
  padding:calc(30*var(--u)) calc(80*var(--u));box-shadow:0 calc(18*var(--u)) calc(40*var(--u)) rgba(124,11,17,.16), 0 calc(4*var(--u)) calc(12*var(--u)) rgba(0,0,0,.06);animation:popIn .5s .3s both}
.final-score__label{font-family:var(--body);font-weight:800;font-size:calc(34*var(--u));color:var(--ink-soft);letter-spacing:calc(2*var(--u))}
.final-score__value{font-family:var(--display);font-weight:700;font-size:calc(160*var(--u));color:var(--navy);line-height:.9}
.final-goal{font-family:var(--display);font-weight:700;font-size:calc(42*var(--u));padding:calc(16*var(--u)) calc(44*var(--u));border-radius:999px;
  animation:popIn .5s .4s both}
.final-goal.met{background:var(--ok);color:#fff;box-shadow:0 calc(10*var(--u)) 0 #137a48}
.final-goal.miss{background:var(--gold);color:#5a3a00;box-shadow:0 calc(10*var(--u)) 0 var(--gold-deep)}
.final-msg{font-family:var(--body);font-weight:700;font-size:calc(40*var(--u));color:var(--ink-soft);
  text-align:center;max-width:calc(760*var(--u));line-height:1.3;animation:popIn .5s .45s both}
#replayBtn{margin-top:calc(20*var(--u));animation:popIn .5s .6s both}
.final-auto{font-family:var(--body);font-weight:800;font-size:calc(30*var(--u));color:var(--ink-soft);opacity:.7;margin-top:calc(8*var(--u))}

.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.confetti i{position:absolute;top:calc(-40*var(--u));width:calc(22*var(--u));height:calc(32*var(--u));border-radius:calc(4*var(--u));opacity:.95;
  animation:fall linear forwards}
@keyframes fall{to{transform:translateY(120cqh) rotate(720deg)}}

/* ---------- Ranking: fase 1 — entrada do nome ---------- */
.final-rank{display:none;flex-direction:column;align-items:center;gap:calc(20*var(--u));
  width:100%;max-width:calc(760*var(--u));animation:popIn .5s .35s both}
.final-rank__label{font-family:var(--display);font-weight:600;font-size:calc(44*var(--u));color:var(--navy);text-align:center}
#rankName{width:100%;height:calc(112*var(--u));border-radius:calc(28*var(--u));border:calc(4*var(--u)) solid var(--red);
  background:#fff;font-size:calc(50*var(--u));font-weight:700;color:var(--ink);padding:0 calc(30*var(--u));
  text-align:center;box-shadow:0 0 0 calc(6*var(--u)) var(--red-050);caret-color:transparent}
#rankName::placeholder{color:#C7BBB0;font-weight:600}
.final-rank__actions{display:flex;gap:calc(22*var(--u));align-items:center;justify-content:center}
.final-rank__actions .btn--primary{font-size:calc(42*var(--u));padding:calc(24*var(--u)) calc(70*var(--u));min-height:calc(100*var(--u))}

/* ---------- Ranking: fase 2 — melhores jogadores ---------- */
.final-rank-board{display:none;flex-direction:column;gap:calc(14*var(--u));
  width:100%;max-width:calc(760*var(--u));animation:popIn .45s .2s both}
.final-rank-board__title{font-family:var(--display);font-weight:700;font-size:calc(48*var(--u));color:var(--navy);text-align:center}
.rank-list{list-style:none;display:flex;flex-direction:column;gap:calc(10*var(--u))}
.rank-row{display:flex;align-items:center;gap:calc(20*var(--u));background:#fff;border-radius:calc(22*var(--u));
  padding:calc(14*var(--u)) calc(30*var(--u));
  box-shadow:0 calc(6*var(--u)) calc(16*var(--u)) rgba(124,11,17,.10)}
.rank-row__pos{flex:0 0 calc(92*var(--u));font-family:var(--display);font-weight:700;font-size:calc(42*var(--u));
  color:var(--ink-soft);text-align:center}
.rank-row__name{flex:1;min-width:0;font-weight:800;font-size:calc(38*var(--u));color:var(--navy);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-row__score{font-family:var(--display);font-weight:700;font-size:calc(46*var(--u));color:var(--red)}
.rank-row.is-you{border:calc(4*var(--u)) solid var(--gold);background:#FFF6E3;
  box-shadow:0 calc(8*var(--u)) calc(22*var(--u)) rgba(244,167,36,.35)}
.rank-gap{text-align:center;color:var(--ink-soft);font-weight:800;font-size:calc(36*var(--u));line-height:.7}
.rank-empty{text-align:center;font-weight:700;font-size:calc(32*var(--u));color:var(--ink-soft);
  background:#fff;border-radius:calc(22*var(--u));padding:calc(26*var(--u))}

/* ---------- Fases da tela final ----------
   entry: mostra a entrada de nome, esconde msg/replay/contagem e compacta
   o topo p/ sobrar espaço pro teclado flutuante.
   board: mostra o quadro dos melhores e compacta o mascote/título. */
.screen[data-name="final"][data-phase="entry"] .final-rank{display:flex}
.screen[data-name="final"][data-phase="entry"] .final-msg,
.screen[data-name="final"][data-phase="entry"] #replayBtn,
.screen[data-name="final"][data-phase="entry"] .final-auto{display:none}
.screen[data-name="final"][data-phase="entry"] .final-stage{justify-content:flex-start;gap:calc(14*var(--u));
  padding-top:calc(40*var(--u))}
.screen[data-name="final"][data-phase="entry"] .final-tato{height:calc(300*var(--u))}
.screen[data-name="final"][data-phase="entry"] .final-title{font-size:calc(96*var(--u))}
.screen[data-name="final"][data-phase="entry"] .final-score{padding:calc(18*var(--u)) calc(60*var(--u))}
.screen[data-name="final"][data-phase="entry"] .final-score__value{font-size:calc(110*var(--u))}

.screen[data-name="final"][data-phase="board"] .final-rank-board{display:flex}
.screen[data-name="final"][data-phase="board"] .final-msg{display:none}
.screen[data-name="final"][data-phase="board"] .final-tato{height:calc(300*var(--u))}
.screen[data-name="final"][data-phase="board"] .final-title{font-size:calc(100*var(--u))}
.screen[data-name="final"][data-phase="board"] .final-score{padding:calc(18*var(--u)) calc(60*var(--u))}
.screen[data-name="final"][data-phase="board"] .final-score__value{font-size:calc(110*var(--u))}

/* Ranking com muitos nomes (Top 7+): compacta ainda mais p/ caber na tela */
.screen[data-name="final"].rank-many[data-phase="board"] .final-goal{display:none}
.screen[data-name="final"].rank-many[data-phase="board"] .final-tato{height:calc(200*var(--u))}
.screen[data-name="final"].rank-many[data-phase="board"] .rank-row{padding:calc(8*var(--u)) calc(26*var(--u))}
.screen[data-name="final"].rank-many[data-phase="board"] .rank-list{gap:calc(8*var(--u))}

/* =========================================================
   ADMIN
   ========================================================= */
.admin-hotspot{position:absolute;top:0;right:0;width:calc(160*var(--u));height:calc(160*var(--u));z-index:20;opacity:0}
.admin-panel{position:absolute;inset:0;z-index:50;display:none;align-items:center;justify-content:center;
  background:rgba(20,8,9,.7);backdrop-filter:blur(4px)}
.admin-panel.show{display:flex}
.admin-card{background:#fff;width:min(calc(760*var(--u)), 92cqw);border-radius:calc(40*var(--u));padding:calc(56*var(--u));box-shadow:0 calc(30*var(--u)) calc(80*var(--u)) rgba(0,0,0,.5);
  display:flex;flex-direction:column;gap:calc(26*var(--u))}
.admin-card h2{font-family:var(--display);font-weight:700;font-size:calc(52*var(--u));color:var(--navy);text-align:center}
.admin-gate p{font-size:calc(32*var(--u));font-weight:700;color:var(--ink-soft);text-align:center;margin-bottom:calc(18*var(--u))}
.admin-pin{width:100%;height:calc(96*var(--u));text-align:center;font-size:calc(60*var(--u));font-weight:800;letter-spacing:calc(18*var(--u));
  border-radius:calc(24*var(--u));border:calc(4*var(--u)) solid var(--sand-2);background:var(--cream);color:var(--navy)}
.admin-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(14*var(--u));margin-top:calc(20*var(--u))}
.admin-keys button{height:calc(104*var(--u));border-radius:calc(22*var(--u));background:var(--cream);font-family:var(--display);
  font-weight:600;font-size:calc(48*var(--u));color:var(--navy);box-shadow:0 calc(5*var(--u)) 0 var(--sand-2)}
.admin-keys button:active{transform:translateY(calc(3*var(--u)))}
.admin-err{color:#C4231B;font-weight:800;font-size:calc(28*var(--u));text-align:center;min-height:calc(34*var(--u))}
.admin-stats{display:flex;gap:calc(24*var(--u))}
.admin-stats div{flex:1;background:var(--cream);border-radius:calc(26*var(--u));padding:calc(28*var(--u));text-align:center}
.admin-stats b{display:block;font-family:var(--display);font-weight:700;font-size:calc(64*var(--u));color:var(--red)}
.admin-stats span{font-weight:800;font-size:calc(26*var(--u));color:var(--ink-soft)}
.admin-meta{display:flex;align-items:center;justify-content:space-between;gap:calc(20*var(--u));
  background:var(--cream);border-radius:calc(26*var(--u));padding:calc(20*var(--u)) calc(28*var(--u))}
.admin-meta__label{font-family:var(--body);font-weight:800;font-size:calc(30*var(--u));color:var(--ink-soft)}
.admin-meta__ctrl{display:flex;align-items:center;gap:calc(22*var(--u))}
.admin-meta__ctrl b{font-family:var(--display);font-weight:700;font-size:calc(54*var(--u));color:var(--red);
  min-width:calc(150*var(--u));text-align:center;line-height:1}
.admin-step{width:calc(84*var(--u));height:calc(84*var(--u));border-radius:calc(22*var(--u));background:#fff;border:calc(3*var(--u)) solid var(--red-100);
  color:var(--red-700);font-family:var(--display);font-weight:700;font-size:calc(48*var(--u));line-height:1;
  display:grid;place-items:center;box-shadow:0 calc(5*var(--u)) 0 var(--sand-2)}
.admin-step:active{transform:translateY(calc(3*var(--u)));box-shadow:0 calc(2*var(--u)) 0 var(--sand-2)}
.admin-actions{display:grid;grid-template-columns:1fr 1fr;gap:calc(16*var(--u))}
.admin-actions .btn--wide{grid-column:1 / -1}
.admin-close{align-self:center;font-family:var(--body);font-weight:800;font-size:calc(34*var(--u));color:var(--ink-soft);
  padding:calc(18*var(--u)) calc(40*var(--u));border-radius:999px;background:var(--cream)}

/* Popups de pontuação (injetados via JS) */
.score-pop{position:absolute;z-index:5;font-family:var(--display);font-weight:700;font-size:calc(64*var(--u));
  pointer-events:none;animation:scorePop .9s ease forwards;text-shadow:0 calc(3*var(--u)) 0 rgba(0,0,0,.12)}
.score-pop.plus{color:var(--ok)}
.score-pop.minus{color:#E0473F}
@keyframes scorePop{0%{transform:translateY(0) scale(.6);opacity:0}
  25%{transform:translateY(calc(-30*var(--u))) scale(1.1);opacity:1}
  100%{transform:translateY(calc(-150*var(--u))) scale(1);opacity:0}}

/* =========================================================
   ADAPTAÇÃO PARA TELAS LARGAS / PAISAGEM
   Container queries (não são media queries): quando o palco fica mais largo
   que alto, as telas em coluna passam a usar a largura disponível, evitando a
   "faixa estreita no meio" ao mostrar num notebook/monitor.
   ========================================================= */
@container stage (orientation: landscape){

  /* START — vira grade de 2 colunas: mascote à esquerda, conteúdo à direita */
  .start-wrap{display:grid;align-content:center;justify-items:center;align-items:center;
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:
      "hero title"
      "hero cta"
      "hero insta"
      "carousel carousel";
    gap:calc(16*var(--u)) calc(54*var(--u));
    padding:calc(20*var(--u)) calc(60*var(--u))}
  .start-hero{grid-area:hero}
  .start-title{grid-area:title;font-size:calc(124*var(--u))}
  .start-cta{grid-area:cta}
  .start-insta{grid-area:insta}
  .start-carousel{grid-area:carousel;align-self:end}
  .start-hint{display:none}
  .start-tato{height:calc(560*var(--u))}
  .speech--start{max-width:calc(560*var(--u))}
  .speech--start p{font-size:calc(40*var(--u))}

  /* INTRO — encolhe o mascote para caber na altura */
  .intro-stage{gap:calc(24*var(--u));padding:calc(30*var(--u)) calc(60*var(--u))}
  .intro-tato{height:calc(540*var(--u))}
  .speech--intro{max-width:calc(900*var(--u))}
  .speech p{font-size:calc(46*var(--u))}

  /* FINAL — compacta para caber na altura */
  .final-stage{gap:calc(14*var(--u));padding:calc(40*var(--u)) calc(70*var(--u))}
  .final-tato{height:calc(360*var(--u))}
  .final-title{font-size:calc(104*var(--u))}
  .final-score{padding:calc(20*var(--u)) calc(60*var(--u))}
  .final-score__value{font-size:calc(120*var(--u))}
  .final-msg{font-size:calc(34*var(--u));max-width:calc(900*var(--u))}

  /* FINAL/ranking em paisagem — pouca altura: some o mascote e compacta */
  .screen[data-name="final"][data-phase="entry"] .final-tato,
  .screen[data-name="final"][data-phase="board"] .final-tato{display:none}
  .screen[data-name="final"][data-phase="entry"] .final-stage,
  .screen[data-name="final"][data-phase="board"] .final-stage{padding-top:calc(24*var(--u))}
  .screen[data-name="final"][data-phase="entry"] .final-title,
  .screen[data-name="final"][data-phase="board"] .final-title{font-size:calc(80*var(--u))}
  .screen[data-name="final"][data-phase="board"] .final-goal{display:none}
  .screen[data-name="final"][data-phase="board"] .rank-row{padding:calc(8*var(--u)) calc(26*var(--u))}
  .screen[data-name="final"][data-phase="board"] .rank-list{gap:calc(8*var(--u))}

  /* LEAD — herói e formulário lado a lado */
  .lead-wrap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:calc(40*var(--u));
    align-content:start;padding:calc(24*var(--u)) calc(60*var(--u))}
  .lead-hero{margin-bottom:0;flex-direction:column;text-align:center}
  .lead-hero__tato{height:calc(320*var(--u))}

  /* PLAY — objetivo e HUD um pouco mais baixos para sobrar área de jogo */
  .objective{height:calc(150*var(--u))}
  .objective__icon{width:calc(96*var(--u));height:calc(96*var(--u))}
  .objective__target{font-size:calc(72*var(--u))}
  .hud{top:calc(168*var(--u))}
  .game-tato{height:calc(190*var(--u))}
}