/* ============================================================
   TypeQuake — dark cinematic arcade
   ink #0A0E14 · panel #111721 · phosphor #FFB454 · ember #FF5C57
   mist #C9D4E3 · dim #5C6773 · ice #59C2FF
   ============================================================ */

:root{
  --ink:#0A0E14;
  --panel:#111721;
  --panel-2:#161E2A;
  --line:#1F2937;
  --phosphor:#FFB454;
  --phosphor-hot:#FFE3B3;
  --ember:#FF5C57;
  --ice:#59C2FF;
  --mist:#C9D4E3;
  --dim:#5C6773;
  --faint:#39434F;          /* texto por escrever / dicas discretas */
  --keycap-base:#060A10;    /* “pé” 3D dos keycaps */
  --overlay:rgba(6,9,14,.82);
  --font-display:"Bricolage Grotesque", system-ui, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, monospace;
}

/* ============ TEMA CLARO — papel frio, âmbar-tinta ============ */
html.light{
  --ink:#EDF0F5;
  --panel:#FFFFFF;
  --panel-2:#F6F8FB;
  --line:#D8DEE8;
  --phosphor:#B8720F;
  --phosphor-hot:#8F5406;
  --ember:#D5403B;
  --ice:#1F6FBF;
  --mist:#1E2735;
  --dim:#5E6C80;
  --faint:#B4BECC;
  --keycap-base:#C3CBD8;
  --overlay:rgba(233,238,245,.88);
}
html.light .crt{opacity:.3}
html.light .title{text-shadow:none}
html.light .title-accent{text-shadow:0 0 20px rgba(184,114,15,.3)}
html.light .word{text-shadow:none}

*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  background:var(--ink);
  color:var(--mist);
  font-family:var(--font-mono);
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
}

/* fundo: canvas de partículas + vinheta CRT */
#fx{position:fixed;inset:0;z-index:0;pointer-events:none}
.crt{
  position:fixed;inset:0;z-index:50;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(4,7,12,.55) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px);
}

/* ============ HUD ============ */
.hud{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 22px;
  font-size:12px;letter-spacing:.08em;
}
.logo{
  font-family:var(--font-display);font-weight:800;font-size:15px;
  letter-spacing:.14em;color:var(--phosphor);cursor:pointer;
}
.logo-caret{animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hud-right{display:flex;align-items:center;gap:18px}
.hud-stat{color:var(--dim)}
.hud-stat b{color:var(--mist);font-weight:500}
.hud-xp #hud-xpbar{
  display:inline-block;width:90px;height:4px;border-radius:2px;
  background:var(--line);overflow:hidden;vertical-align:middle;
}
.hud-xp #hud-xpbar i{display:block;height:100%;width:0%;background:var(--phosphor);transition:width .6s cubic-bezier(.2,.9,.2,1)}
.hud-btn{
  background:none;border:1px solid var(--line);color:var(--dim);
  font:inherit;letter-spacing:.08em;padding:5px 10px;border-radius:6px;cursor:pointer;
}
.hud-btn:hover{color:var(--phosphor);border-color:var(--phosphor)}

/* botões de ícone (música, efeitos, tema) — no HUD e nas páginas */
.hud-btn.icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:30px;height:28px;padding:0}
.hud-btn .ic{width:16px;height:16px;display:block}
.theme-toggle .ic-sun{display:none}
html.light .theme-toggle .ic-sun{display:block}
html.light .theme-toggle .ic-moon{display:none}
/* estado desligado: risco diagonal + esbatido */
.hud-btn.is-off{color:var(--faint)}
.hud-btn.is-off::after{content:"";position:absolute;left:5px;right:5px;top:50%;height:1.5px;background:currentColor;transform:rotate(-18deg);border-radius:2px}

/* controlos fixos nas páginas de conteúdo (topo direito) */
.page-controls{position:fixed;top:12px;right:16px;z-index:40;display:flex;align-items:center;gap:10px}

/* HUD em ecrãs pequenos */
@media (max-width:600px){
  .hud{padding:9px 11px;font-size:11px}
  .hud .logo{font-size:13px;letter-spacing:.05em}
  .hud-right{gap:8px}
  .hud-xp{display:none}
  .hud-btn.icon-btn{width:32px;height:31px}
  .hud-btn:not(.icon-btn){padding:6px 8px}
  .page-controls{top:10px;right:10px;gap:8px}
}

/* ============ ECRÃS ============ */
.screen{
  position:fixed;inset:0;z-index:10;
  display:none;flex-direction:column;align-items:center;justify-content:center;
  padding:70px 24px 32px;
}
.screen.is-active{display:flex;animation:screen-in .45s cubic-bezier(.2,.9,.25,1) both}
@keyframes screen-in{from{opacity:0;transform:translateY(14px) scale(.99)}to{opacity:1;transform:none}}

.eyebrow{color:var(--phosphor);font-size:12px;letter-spacing:.22em;text-transform:uppercase;margin-bottom:14px}

/* ============ MENU ============ */
.screen-menu.is-active{display:block;overflow-y:auto;padding:0 24px}
.menu-viewport{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:70px 0 30px;
}
.menu-hero{text-align:center;margin-bottom:44px}
.mobile-note{
  margin:16px auto 0;max-width:420px;
  font-size:12px;line-height:1.7;color:var(--ember);
  border:1px solid rgba(255,92,87,.35);border-radius:8px;padding:10px 14px;
}
.title{
  font-family:var(--font-display);
  font-size:clamp(56px, 11vw, 128px);
  font-weight:800;line-height:.95;letter-spacing:.02em;
  color:var(--mist);
  text-shadow:0 0 60px rgba(255,180,84,.18);
}
.title-accent{color:var(--phosphor);text-shadow:0 0 34px rgba(255,180,84,.55)}
.tagline{margin-top:18px;color:var(--dim);font-size:14px;line-height:1.75}

.mode-grid{
  display:grid;grid-template-columns:repeat(3,minmax(180px,300px));gap:14px;
  width:100%;max-width:960px;justify-content:center;
}
@media (max-width:760px){.mode-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.mode-grid{grid-template-columns:1fr}}
.keycap-daily .keycap-key{background:var(--ice)}

/* keycaps — a UI é um teclado */
.keycap{
  position:relative;text-align:left;cursor:pointer;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);
  border-bottom:4px solid var(--keycap-base);
  border-radius:12px;
  padding:18px 16px 16px;
  color:var(--mist);font-family:var(--font-mono);
  transition:transform .08s ease, border-color .15s ease, box-shadow .2s ease;
  display:flex;flex-direction:column;gap:8px;
}
.keycap:hover,.keycap:focus-visible{
  border-color:var(--phosphor);outline:none;
  box-shadow:0 0 0 1px rgba(255,180,84,.25), 0 8px 40px -12px rgba(255,180,84,.25);
}
.keycap:active,.keycap.is-pressed{transform:translateY(3px);border-bottom-width:1px}
.keycap-key{
  align-self:flex-start;
  font-size:11px;font-weight:700;color:var(--ink);
  background:var(--phosphor);border-radius:5px;padding:2px 8px;
  letter-spacing:.05em;
}
.keycap-name{font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:.06em}
.keycap-desc{font-size:11.5px;line-height:1.6;color:var(--dim)}
.keycap-best{font-size:10.5px;color:var(--phosphor);letter-spacing:.08em;min-height:14px}
.keycap-nemesis .keycap-key{background:var(--ember)}
.keycap-nemesis:hover,.keycap-nemesis:focus-visible{
  border-color:var(--ember);
  box-shadow:0 0 0 1px rgba(255,92,87,.25), 0 8px 40px -12px rgba(255,92,87,.3);
}
.keycap-sm{flex-direction:row;align-items:center;padding:12px 18px;gap:12px}
.keycap-sm .keycap-name{font-size:14px}

.menu-foot{margin-top:36px;display:flex;flex-direction:column;align-items:center;gap:12px}
.ghost-btn{
  background:none;border:none;color:var(--dim);font:inherit;font-size:12.5px;
  letter-spacing:.06em;cursor:pointer;padding:6px 10px;border-radius:6px;
}
.ghost-btn b{color:var(--phosphor)}
.ghost-btn:hover{color:var(--mist)}
.menu-hint{font-size:11px;color:var(--faint);letter-spacing:.1em}

/* ============ ARTIGO SEO (abaixo da dobra no menu) ============ */
.seo-article{
  max-width:720px;margin:0 auto;padding:30px 0 90px;
  color:var(--dim);font-size:13.5px;line-height:1.9;
}
.seo-article h2{
  font-family:var(--font-display);font-weight:800;font-size:26px;
  color:var(--mist);margin-bottom:18px;letter-spacing:.01em;
}
.seo-article h3{
  font-family:var(--font-display);font-weight:700;font-size:17px;
  color:var(--phosphor);margin:28px 0 10px;
}
.seo-article p{margin-bottom:12px}
.seo-article strong{color:var(--mist);font-weight:700}
.faq{
  border:1px solid var(--line);border-radius:10px;
  padding:12px 16px;margin-bottom:8px;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
}
.faq summary{
  cursor:pointer;color:var(--mist);font-weight:500;font-size:13px;
  list-style:none;position:relative;padding-right:24px;
}
.faq summary::after{
  content:"+";position:absolute;right:0;top:0;color:var(--phosphor);font-weight:700;
}
.faq[open] summary::after{content:"–"}
.faq p{margin:10px 0 2px;font-size:12.5px}
.seo-footer{
  margin-top:36px;padding-top:20px;border-top:1px solid var(--line);
  font-size:12px;text-align:center;
}
.seo-footer a{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--line)}
.seo-footer a:hover{color:var(--phosphor);border-color:var(--phosphor)}
.seo-footer-legal{display:block;margin-top:12px;font-size:11px;color:var(--faint)}
.seo-footer-made{display:block;margin-top:14px;font-size:11px;color:var(--faint);letter-spacing:.1em;font-style:italic}
.site-v{font-style:normal;opacity:.6}

/* ============ JOGO ============ */
.screen-game{justify-content:flex-start;padding-top:64px}
.game-top{
  width:100%;max-width:1100px;
  display:flex;gap:34px;align-items:baseline;
  padding:6px 8px 14px;border-bottom:1px solid var(--line);
}
.game-stat label{display:block;font-size:10px;color:var(--dim);letter-spacing:.18em}
.game-stat b{
  font-family:var(--font-display);font-weight:700;font-size:26px;color:var(--mist);
  font-variant-numeric:tabular-nums;
}
#g-combo.hot{color:var(--phosphor);text-shadow:0 0 18px rgba(255,180,84,.6)}
#g-combo.inferno{color:var(--phosphor-hot);text-shadow:0 0 26px rgba(255,180,84,.95)}
.game-lives{margin-left:auto;display:flex;gap:7px;align-self:center}
.game-lives i{
  width:14px;height:14px;border-radius:3px;background:var(--phosphor);
  box-shadow:0 0 12px rgba(255,180,84,.5);
  transition:all .3s;
}
.game-lives i.lost{background:var(--line);box-shadow:none;transform:scale(.7)}

.arena{position:relative;width:100%;max-width:1100px;flex:1;overflow:hidden}
.floor{
  position:absolute;left:0;right:0;bottom:26px;height:1px;
  background:linear-gradient(90deg, transparent, var(--ember) 20%, var(--ember) 80%, transparent);
  opacity:.5;
}

/* palavras da Tempestade */
.word{
  position:absolute;white-space:nowrap;
  font-size:21px;font-weight:500;letter-spacing:.04em;
  color:var(--mist);
  text-shadow:0 2px 14px rgba(0,0,0,.8);
  will-change:transform;
}
.word .done{color:var(--phosphor);text-shadow:0 0 14px rgba(255,180,84,.7)}
.word.locked{color:#fff}
.word.locked::before{
  content:"";position:absolute;inset:-6px -10px;border-radius:8px;
  border:1px solid rgba(255,180,84,.4);background:rgba(255,180,84,.05);
  z-index:-1;
}
.word.boss{
  font-family:var(--font-display);font-weight:800;font-size:30px;letter-spacing:.1em;
  color:var(--ember);text-shadow:0 0 24px rgba(255,92,87,.5);
}
.word.boss .done{color:var(--phosphor-hot)}
.word.dying{transition:opacity .18s;opacity:0}

/* texto corrido (sprint/zen/nemesis) */
.flow{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:0 6vw;
}
/* janela de leitura: 3 linhas fixas, o texto desliza lá dentro */
.flow-clip{
  width:100%;max-width:900px;
  font-size:clamp(22px,2.6vw,30px);
  height:calc(2.1em * 3);
  overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image:linear-gradient(transparent 0, #000 14%, #000 86%, transparent 100%);
}
.flow-text{
  position:relative;
  font-size:inherit;line-height:2.1;letter-spacing:.02em;
  text-align:left;color:var(--faint);
  transition:transform .25s ease, opacity .3s;
}
.flow-text .ch{position:relative}
.flow-text .ch.ok{color:var(--mist)}
.flow-text .ch.bad{color:var(--ember);text-decoration:underline;text-decoration-thickness:2px}
.flow-text .ch.cur{color:var(--phosphor)}
.flow-text .ch.cur::after{
  content:"";position:absolute;left:-1px;top:12%;bottom:8%;width:2px;
  background:var(--phosphor);box-shadow:0 0 10px var(--phosphor);
  animation:blink 1s steps(1) infinite;
}
.flow-text .ch.ghosted{box-shadow:inset 0 -3px 0 rgba(89,194,255,.35)}

.countdown{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:120px;font-weight:800;color:var(--phosphor);
  text-shadow:0 0 60px rgba(255,180,84,.5);
  animation:count-pop .9s ease both;
}
@keyframes count-pop{from{transform:scale(1.6);opacity:0}30%{transform:scale(1);opacity:1}85%{opacity:1}to{opacity:0}}

.announce{
  position:absolute;top:18%;left:0;right:0;text-align:center;
  font-family:var(--font-display);font-weight:800;font-size:44px;letter-spacing:.12em;
  color:var(--phosphor);text-shadow:0 0 40px rgba(255,180,84,.5);
  animation:announce-in 1.6s cubic-bezier(.2,.9,.2,1) both;pointer-events:none;
}
.announce.danger{color:var(--ember);text-shadow:0 0 40px rgba(255,92,87,.6)}
@keyframes announce-in{
  from{opacity:0;transform:translateY(20px) scale(.9)}
  20%{opacity:1;transform:none}
  75%{opacity:1}
  to{opacity:0;transform:translateY(-12px)}
}

/* ============ TECLADO VIRTUAL (modo Clássico) ============ */
.vkbd{
  width:100%;max-width:760px;
  display:flex;flex-direction:column;gap:6px;align-items:center;
  padding:14px 0 4px;
}
.vkbd-row{display:flex;gap:6px}
.vk{
  width:56px;height:50px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-bottom:3px solid var(--keycap-base);
  font-size:15px;font-weight:700;text-transform:uppercase;color:var(--dim);
  transition:transform .06s, box-shadow .12s, color .12s, border-color .12s;
  position:relative;
}
.vk::after{
  content:"";position:absolute;left:10px;right:10px;bottom:5px;height:3px;
  border-radius:2px;background:var(--finger, transparent);opacity:.55;
}
.vk-space{width:340px}
.vk.next{
  color:var(--ink);background:var(--phosphor);border-color:var(--phosphor);
  box-shadow:0 0 22px rgba(255,180,84,.55);
  animation:vk-pulse 1s ease-in-out infinite;
}
.vk.next-2{
  color:var(--phosphor);border-color:var(--phosphor);
  box-shadow:0 0 10px rgba(255,180,84,.2);
}
.vk[data-step]::before{
  content:attr(data-step);
  position:absolute;top:2px;right:5px;
  font-size:9px;font-weight:700;opacity:.85;
}
@keyframes vk-pulse{50%{box-shadow:0 0 34px rgba(255,180,84,.85)}}
.vk.hit{transform:translateY(2px);color:var(--phosphor-hot);border-color:var(--phosphor)}
.vk.miss{transform:translateY(2px);color:#fff;background:var(--ember);border-color:var(--ember)}
/* cores por dedo — mindinho→indicador, esq/dir espelhados */
.f-lp,.f-rp{--finger:#B08CFF}
.f-lr,.f-rr{--finger:#59C2FF}
.f-lm,.f-rm{--finger:#5CDB95}
.f-li,.f-ri{--finger:#FFB454}
.f-th{--finger:#5C6773}
@media (max-width:700px){
  .vk{width:34px;height:36px;font-size:11px}
  .vk-space{width:200px}
}

.game-bottom{width:100%;max-width:1100px;padding:10px 8px;text-align:right}
.kb-input{
  position:fixed;top:0;left:0;width:1px;height:1px;
  opacity:0;border:none;padding:0;background:none;color:transparent;
  pointer-events:none;
}
.game-hint{font-size:11px;color:var(--faint);letter-spacing:.1em}

/* abanão de ecrã */
body.shake #screen-game{animation:shake .28s}
@keyframes shake{
  0%,100%{transform:none}
  20%{transform:translate(-7px,3px)}
  40%{transform:translate(6px,-4px)}
  60%{transform:translate(-4px,2px)}
  80%{transform:translate(3px,-1px)}
}
body.flash-error .arena::after{
  content:"";position:absolute;inset:0;background:rgba(255,92,87,.06);
  animation:fade-out .25s both;pointer-events:none;
}
@keyframes fade-out{to{opacity:0}}

/* ============ RESULTADOS ============ */
.r-title{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(34px,5vw,56px);margin-bottom:34px;text-align:center;
}
.r-grid{display:flex;gap:44px;flex-wrap:wrap;justify-content:center;margin-bottom:30px}
.r-stat{text-align:center;position:relative}
.r-stat label{display:block;font-size:10.5px;color:var(--dim);letter-spacing:.2em;margin-bottom:6px}
.r-stat b{
  font-family:var(--font-display);font-weight:800;font-size:52px;
  font-variant-numeric:tabular-nums;
}
.r-badge{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(-3deg);
  background:var(--phosphor);color:var(--ink);
  font-size:9.5px;font-weight:700;letter-spacing:.12em;
  padding:3px 8px;border-radius:4px;white-space:nowrap;
  animation:badge-pop .5s cubic-bezier(.2,1.6,.4,1) both;
}
@keyframes badge-pop{from{transform:translateX(-50%) rotate(-3deg) scale(0)}to{transform:translateX(-50%) rotate(-3deg) scale(1)}}
.r-nemesis{
  max-width:620px;text-align:center;font-size:13px;line-height:1.8;color:var(--dim);
  margin-bottom:34px;min-height:20px;
}
.r-nemesis .weak-key{
  display:inline-block;background:var(--panel-2);border:1px solid var(--ember);
  color:var(--ember);border-radius:5px;padding:1px 9px;margin:0 3px;
  font-weight:700;text-transform:uppercase;
}
.r-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

/* ============ PERFIL ============ */
.screen-profile{justify-content:flex-start;overflow-y:auto;padding-top:80px}
.p-sub{color:var(--dim);font-size:13px;margin-bottom:28px;text-align:center}

/* evolução — curva WPM + precisão */
.p-evo{width:100%;max-width:680px;margin-bottom:24px}
.evo-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.evo-head label{font-size:10.5px;color:var(--dim);letter-spacing:.2em}
.evo-trend{font-size:11.5px;letter-spacing:.06em;font-weight:700}
.evo-trend.up{color:var(--phosphor)}
.evo-trend.down{color:var(--ember)}
.evo-svg{
  width:100%;height:130px;display:block;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:12px;
}
.evo-legend{display:flex;gap:18px;margin-top:8px;font-size:10px;letter-spacing:.14em;color:var(--dim)}
.evo-legend span::before{content:"";display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}
.evo-legend .lg-wpm::before{background:var(--phosphor)}
.evo-legend .lg-acc::before{background:var(--ice)}
.evo-empty{
  padding:26px;text-align:center;font-size:12px;color:var(--dim);
  border:1px dashed var(--line);border-radius:12px;
}

/* atividade — últimos 14 dias */
.p-activity-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:26px}
.p-activity-label{font-size:10.5px;color:var(--dim);letter-spacing:.2em}
.p-activity{display:flex;gap:5px}
.act-cell{
  width:17px;height:17px;border-radius:4px;
  background:var(--panel-2);border:1px solid var(--line);
}
.act-cell.on{border-color:transparent;background:var(--phosphor);box-shadow:0 0 10px rgba(255,180,84,.35)}
.act-cell.today{outline:1px solid var(--phosphor);outline-offset:1px}
.kbd{display:flex;flex-direction:column;gap:7px;align-items:center;margin-bottom:30px}
.kbd-row{display:flex;gap:7px}
.kbd-key{
  width:52px;height:52px;border-radius:9px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  background:var(--panel);border:1px solid var(--line);border-bottom-width:3px;
  font-size:15px;font-weight:700;text-transform:uppercase;color:var(--mist);
  position:relative;
}
.kbd-key small{font-size:8.5px;font-weight:400;color:var(--dim);letter-spacing:0}
@media (max-width:700px){.kbd-key{width:34px;height:38px;font-size:12px}.kbd-key small{display:none}}
.p-stats{display:flex;gap:38px;flex-wrap:wrap;justify-content:center;margin-bottom:26px}
.p-stat{text-align:center}
.p-stat label{display:block;font-size:10px;color:var(--dim);letter-spacing:.18em;margin-bottom:4px}
.p-stat b{font-family:var(--font-display);font-size:26px;font-weight:700}
.p-achievements{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:760px;margin-bottom:30px}
.ach{
  font-size:11px;padding:6px 12px;border-radius:20px;
  border:1px solid var(--line);color:var(--faint);letter-spacing:.05em;
}
.ach.unlocked{border-color:var(--phosphor);color:var(--phosphor);background:rgba(255,180,84,.06)}

/* ============ AJUDA ============ */
.screen-help{justify-content:flex-start;overflow-y:auto;padding-top:80px}
.help-wrap{max-width:920px;width:100%;padding-bottom:40px}
.help-wrap .eyebrow,.help-wrap .r-title{text-align:center}
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:30px}
@media (max-width:760px){.help-grid{grid-template-columns:1fr}}
.help-card{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:12px;
  padding:20px 22px;
}
.help-card-wide{grid-column:1 / -1}
.help-card h3{
  font-family:var(--font-display);font-weight:700;font-size:16px;
  letter-spacing:.06em;color:var(--phosphor);margin-bottom:10px;
  display:flex;align-items:center;gap:8px;
}
.help-card p{font-size:12.5px;line-height:1.8;color:var(--mist)}
.help-card p + p{margin-top:8px}
.help-card b{color:var(--phosphor-hot);font-weight:700}
.help-list{list-style:none;margin:8px 0}
.help-list li{
  font-size:12.5px;line-height:1.8;color:var(--mist);
  padding-left:16px;position:relative;margin-bottom:6px;
}
.help-list li::before{
  content:"";position:absolute;left:0;top:.75em;
  width:6px;height:2px;background:var(--phosphor);
}
.help-key{
  display:inline-block;background:var(--panel-2);border:1px solid var(--line);
  border-bottom-width:2px;border-radius:5px;padding:0 7px;
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  color:var(--phosphor);letter-spacing:.05em;line-height:1.7;
  vertical-align:baseline;
}
.help-wrap .r-actions{justify-content:center}
.menu-foot-row{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}

/* ============ PAUSA ============ */
.pause{
  position:fixed;inset:0;z-index:60;
  background:var(--overlay);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
}
.pause-box{text-align:center}
.pause-box h3{font-family:var(--font-display);font-size:40px;font-weight:800;letter-spacing:.2em;margin-bottom:12px}
.pause-box p{color:var(--dim);font-size:13px}
.pause-box b{color:var(--phosphor)}

/* modal de confirmação (sem popups nativos) */
.modal{z-index:80}
.modal-box{max-width:440px;padding:0 20px}
.modal-body{color:var(--dim);font-size:13px;line-height:1.8;margin-bottom:24px}
.modal .r-actions{justify-content:center}
.keycap-danger .keycap-key{background:var(--ember)}
.keycap-danger:hover,.keycap-danger:focus-visible{
  border-color:var(--ember);
  box-shadow:0 0 0 1px rgba(255,92,87,.25), 0 8px 40px -12px rgba(255,92,87,.3);
}

/* barra de cookies (só aparece quando o GA estiver configurado) */
.cookiebar{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
  z-index:72;width:min(680px, calc(100vw - 32px));
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--phosphor);border-radius:14px;
  padding:18px 22px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  box-shadow:0 14px 60px -12px rgba(0,0,0,.5);
  animation:screen-in .4s cubic-bezier(.2,.9,.25,1) both;
}
.cookiebar p{flex:1;min-width:240px;font-size:12.5px;line-height:1.7;color:var(--mist);margin:0}
.cookiebar a{color:var(--phosphor)}
.cookiebar-actions{display:flex;gap:10px}

/* toast de conquista */
.toast{
  position:fixed;right:22px;bottom:22px;z-index:70;
  background:var(--panel-2);border:1px solid var(--phosphor);border-radius:10px;
  padding:12px 18px;font-size:12.5px;color:var(--mist);
  box-shadow:0 10px 50px -10px rgba(255,180,84,.35);
  animation:toast-in 4s cubic-bezier(.2,.9,.2,1) both;
}
.toast b{color:var(--phosphor);display:block;font-size:10px;letter-spacing:.2em;margin-bottom:3px}
@keyframes toast-in{
  from{opacity:0;transform:translateY(16px)}
  6%{opacity:1;transform:none}
  88%{opacity:1}
  to{opacity:0;transform:translateY(8px)}
}

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