/* ==========================================================================
   BLOCKCHAIN: QUANTUM WAR — TEMA ARCADE
   Camada visual carregada por último: título, seleção de agente, menus,
   pausa, GAME OVER, vitória, guia, briefing e loading.
   Tudo é medido em cqw (largura do palco 16:9) para escalar como uma
   tela de fliperama, com mínimos em px para continuar legível no celular.
   ========================================================================== */

@font-face { font-family:'Pixelify Sans'; src:url('../assets/fonts/pixelify-sans-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Pixelify Sans'; src:url('../assets/fonts/pixelify-sans-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Pixelify Sans'; src:url('../assets/fonts/pixelify-sans-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Silkscreen'; src:url('../assets/fonts/silkscreen-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Silkscreen'; src:url('../assets/fonts/silkscreen-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Press Start 2P'; src:url('../assets/fonts/press-start-2p.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Bungee'; src:url('../assets/fonts/bungee.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Chakra Petch'; src:url('../assets/fonts/chakra-petch-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Chakra Petch'; src:url('../assets/fonts/chakra-petch-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Chakra Petch'; src:url('../assets/fonts/chakra-petch-700.woff2') format('woff2'); font-weight:700; font-display:swap; }

:root {
  /* Pixelify Sans: pixel suavizado e legível para rótulos e botões.
     Press Start 2P: só letreiros grandes e placares (sem acento). */
  --px: 'Pixelify Sans', 'Silkscreen', 'Segoe UI', sans-serif;
  --px8: 'Press Start 2P', 'Silkscreen', monospace;
  --sym: 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'DejaVu Sans', sans-serif;
  --display: 'Bungee', 'Segoe UI Black', Impact, sans-serif;
  --body: 'Chakra Petch', 'Segoe UI', Arial, sans-serif;
  --a-bg: #080b12;
  --a-panel: #0e131c;
  --a-panel-2: #151b26;
  --a-line: #2f3847;
  --a-cyan: #8fb4c6;
  --a-magenta: #c9a25a;
  --a-gold: #f0c040;
  --a-gold-deep: #c98a00;
  --a-red: #d9574f;
  --a-green: #86c39a;
  --a-text: #eef1f4;
  --a-muted: #9aa4b2;
}

#app { --agent:#f0c040; --agent-rgb:240,192,64; }
#app[data-character="denny"] { --agent:#8fb4c6; --agent-rgb:143,180,198; }
#app[data-character="bitnada"] { --agent:#e0995a; --agent-rgb:224,153,90; }

/* ---------- utilitários de animação ---------- */
@keyframes arcadeBlink { 0%, 49% { opacity:1; } 50%, 100% { opacity:0; } }
@keyframes arcadeBlinkSoft { 0%, 100% { opacity:1; } 50% { opacity:.25; } }
@keyframes arcadeNudge { 0%, 100% { transform:translateX(0); } 50% { transform:translateX(.35cqw); } }
@keyframes arcadeNudgeLeft { 0%, 100% { transform:translateX(0); } 50% { transform:translateX(-.35cqw); } }
@keyframes arcadeFlicker { 0%, 100% { opacity:1; } 92% { opacity:1; } 93% { opacity:.55; } 94% { opacity:1; } 97% { opacity:.8; } }
@keyframes arcadeScan { from { background-position:0 0; } to { background-position:0 100%; } }
@keyframes arcadePop { 0% { transform:scale(.6); opacity:0; } 60% { transform:scale(1.08); opacity:1; } 100% { transform:scale(1); } }
@keyframes arcadeSlideUp { from { transform:translateY(1.2cqw); opacity:0; } to { transform:none; opacity:1; } }
@keyframes arcadeSelectFlash { 0%, 100% { box-shadow:0 0 0 .18cqw var(--agent); } 50% { box-shadow:0 0 0 .18cqw rgba(var(--agent-rgb), .45); } }
@keyframes arcadeShake { 0%, 100% { transform:translate(0, 0); } 20% { transform:translate(-.2cqw, .1cqw); } 40% { transform:translate(.2cqw, -.1cqw); } 60% { transform:translate(-.15cqw, 0); } 80% { transform:translate(.15cqw, .1cqw); } }

/* ==========================================================================
   LOADING
   ========================================================================== */
.boot-loading { background:radial-gradient(circle at 50% 45%, rgba(143,180,198,.12), transparent 34%), var(--a-bg); }
.boot-loading-kicker { font:600 clamp(11.27px, 1.12vw, 16.1px) var(--px); letter-spacing:0.0448em; color:var(--a-cyan); }
.boot-loading-title { font:400 clamp(16px, 2.2vw, 28px) var(--px8); letter-spacing:.08em; color:var(--a-gold); text-shadow:0 .2em 0 #6a3b00; animation:arcadeBlinkSoft 1.2s steps(2) infinite; }
.boot-loading-message { font:600 clamp(11px, 1vw, 14px) var(--body); letter-spacing:.04em; }
.boot-loading-percent { font:600 clamp(12.88px, 1.29vw, 17.71px) var(--px); color:var(--a-gold); }
.boot-loading-track { height:12px; border:2px solid var(--a-cyan); background:#000; padding:2px; }
.boot-loading-progress { background:repeating-linear-gradient(90deg, var(--a-gold) 0 8px, transparent 8px 10px); box-shadow:none; }

/* ==========================================================================
   TELA TÍTULO
   ========================================================================== */
#app .title-screen.arcade-title {
  padding:1.2cqw 3.4cqw 1cqw;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:0;
  font-family:var(--body);
  overflow:hidden auto;
}

#app .arcade-title .title-backdrop {
  background:
    radial-gradient(ellipse 60% 70% at 76% 55%, rgba(var(--agent-rgb), .07) 0%, transparent 62%),
    linear-gradient(90deg, rgba(5,4,15,.97) 0%, rgba(5,4,15,.9) 36%, rgba(8,6,28,.5) 62%, rgba(5,4,15,.72) 100%),
    url('../assets/scenarios/atlas-city.png') center/cover;
}

/* Grade "synthwave" no chão da tela */
#app .arcade-title .title-backdrop:before {
  content:'';
  position:absolute;
  left:-20%;
  right:-20%;
  bottom:0;
  height:34%;
  background:
    linear-gradient(180deg, rgba(5,4,15,1) 0%, transparent 40%),
    repeating-linear-gradient(90deg, rgba(160,170,185,.12) 0 2px, transparent 2px 4.6cqw),
    repeating-linear-gradient(0deg, rgba(160,170,185,.12) 0 2px, transparent 2px 2.3cqw);
  transform:perspective(24cqw) rotateX(58deg);
  transform-origin:50% 100%;
  opacity:.55;
  pointer-events:none;
}

#app .arcade-title .title-backdrop:after {
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.75) 100%);
}

/* Scanlines CRT sobre toda a tela título */
.arcade-crt {
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.1) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, transparent 0%, rgba(143,180,198,.12) 50%, transparent 100%);
  background-size:100% 100%, 100% 12cqw;
  animation:arcadeScan 7s linear infinite;
  mix-blend-mode:multiply;
}
.arcade-crt:after {
  content:'';
  position:absolute;
  inset:0;
  box-shadow:inset 0 0 6cqw rgba(0,0,0,.65);
}

/* ---------- letreiro superior (HI-SCORE) ---------- */
#app .arcade-title .arcade-marquee {
  position:relative;
  z-index:7;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:1cqw;
  padding:0 0 .9cqw;
  margin-bottom:.8cqw;
  border-bottom:2px solid rgba(160,170,185,.18);
}
.marquee-score { display:flex; align-items:baseline; gap:.8cqw; }
.marquee-label { font:400 max(8px, .78cqw) var(--px8); color:var(--a-red); letter-spacing:.06em; text-shadow:none; }
#app .marquee-score strong { font:400 max(9px, .95cqw) var(--px8); color:var(--a-text); letter-spacing:.1em; font-variant-numeric:tabular-nums; }
.marquee-center { font:600 max(11.27px, 1cqw) var(--px); color:var(--a-muted); letter-spacing:0.0448em; white-space:nowrap; }
.marquee-center b { color:var(--a-magenta); font-weight:400; }
.marquee-blink { color:var(--a-green); animation:arcadeBlink 1s steps(1) infinite; }
#app .arcade-title .header-actions { justify-self:end; gap:.6cqw; }
#app .arcade-title .icon-button {
  width:max(30px, 2.8cqw);
  height:max(30px, 2.8cqw);
  border:2px solid var(--a-line);
  border-radius:0;
  background:#0c1018;
  box-shadow:0 .25cqw 0 #000;
  color:var(--a-cyan);
}
#app .arcade-title .icon-button:hover,
#app .arcade-title .icon-button:focus-visible { border-color:var(--a-cyan); transform:translateY(-2px); box-shadow:0 .35cqw 0 #000; }
#app .arcade-title .icon-button .icon { width:52%; height:52%; }

/* ---------- coluna do menu ---------- */
#app .arcade-title .title-content {
  position:relative;
  z-index:4;
  width:41cqw;
  max-width:none;
  margin:0;
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
}

/* ---------- logotipo ---------- */
#app .arcade-title .game-title {
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.5cqw;
  font-size:inherit;
  line-height:1;
  letter-spacing:0;
  filter:none;
  animation:arcadeFlicker 6s linear infinite;
}
#app .arcade-title .title-sub {
  font:400 max(11px, 1.55cqw)/1 var(--px8);
  letter-spacing:.42em;
  color:var(--a-cyan);
  text-shadow:.2cqw .2cqw 0 #1a2229;
  padding-left:.2cqw;
}
#app .arcade-title .title-main {
  position:relative;
  z-index:0;
  display:inline-block;
  font:400 max(30px, 5.35cqw)/.95 var(--display);
  letter-spacing:.01em;
  white-space:nowrap;
  /* camada base = extrusão 3D */
  color:#4a3a1c;
  -webkit-text-fill-color:#4a3a1c;
  -webkit-text-stroke:.28cqw #120e07;
  background:none;
  text-shadow:
    .1cqw .1cqw 0 #3f3118, .2cqw .2cqw 0 #372b15, .3cqw .3cqw 0 #2f2512,
    .4cqw .4cqw 0 #271f0f, .5cqw .5cqw 0 #1f180c, .6cqw .6cqw 0 #120e07,
    .7cqw .8cqw 1.4cqw rgba(0,0,0,.8);
  filter:none;
}
/* camada frontal = gradiente dourado */
#app .arcade-title .title-main:after {
  content:attr(data-text);
  position:absolute;
  left:-.1cqw;
  top:-.1cqw;
  -webkit-text-stroke:0;
  text-shadow:none;
  background:linear-gradient(180deg, #fff6d8 0%, #f5d56a 30%, #e7b53a 55%, #c98f2a 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  filter:none;
}
#app .arcade-title .title-lede {
  margin:.7cqw 0 0;
  max-width:36cqw;
  font:600 max(11px, 1.02cqw)/1.35 var(--body);
  color:#c9d0d8;
  letter-spacing:.01em;
  text-shadow:0 2px 0 #000;
}

/* ---------- seleção de personagem (estilo jogo de luta) ---------- */
#app .arcade-title .character-picker { width:100%; margin-top:1.3cqw; }
#app .arcade-title .character-picker-head {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1cqw;
  margin:0 0 .7cqw;
}
#app .arcade-title .character-picker-head .panel-kicker {
  font:600 max(12.88px, 1.32cqw) var(--px);
  letter-spacing:0.0448em;
  color:var(--a-gold);
  text-shadow:.15cqw .15cqw 0 #6a3b00;
}
#app .arcade-title .character-picker-head .panel-kicker:before { display:none; }
.picker-arrow { font:400 max(8px, .8cqw) var(--sym); color:var(--a-magenta); animation:arcadeNudgeLeft .8s steps(2) infinite; }
.picker-arrow:last-child { animation-name:arcadeNudge; }

#app .arcade-title .character-options {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:.8cqw;
}
#app .arcade-title .character-option {
  position:relative;
  min-height:0;
  height:max(96px, 12.4cqw);
  padding:0;
  display:block;
  overflow:hidden;
  border:.18cqw solid var(--a-line);
  border-radius:0;
  background:
    linear-gradient(180deg, rgba(10,10,31,.1) 55%, rgba(5,4,15,.95) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 50% 30%, #1a2130 0%, #0e131c 70%);
  box-shadow:0 .3cqw 0 #000;
  color:var(--a-muted);
  transition:transform .12s steps(2), border-color .12s;
}
#app .arcade-title .character-option:hover,
#app .arcade-title .character-option:focus-visible {
  outline:none;
  transform:translateY(-.25cqw);
  border-color:#5b6678;
  background:
    linear-gradient(180deg, rgba(10,10,31,0) 55%, rgba(5,4,15,.95) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 50% 30%, #222b3b 0%, #0f141d 70%);
  box-shadow:0 .45cqw 0 #000;
  color:#fff;
}
#app .arcade-title .character-option.is-selected {
  border-color:var(--agent);
  color:#fff;
  background:
    linear-gradient(180deg, rgba(var(--agent-rgb), .0) 40%, rgba(5,4,15,.92) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 50% 32%, rgba(var(--agent-rgb), .22) 0%, #0f141d 72%);
  animation:arcadeSelectFlash 1.1s steps(2) infinite;
}
#app .arcade-title .character-portrait {
  position:absolute;
  inset:0 0 1.9cqw;
  width:auto;
  height:auto;
  border:0;
  background:none;
  display:block;
  overflow:hidden;
}
#app .arcade-title .character-portrait img {
  width:100%;
  height:230%;
  object-fit:contain;
  object-position:50% 0%;
  transform:none;
  margin-top:.4cqw;
  filter:grayscale(.85) brightness(.7) contrast(1.05) drop-shadow(0 .3cqw 0 rgba(0,0,0,.7));
  transition:filter .15s;
}
#app .arcade-title .character-option:hover .character-portrait img,
#app .arcade-title .character-option:focus-visible .character-portrait img { filter:grayscale(.2) brightness(.95) drop-shadow(0 .3cqw 0 rgba(0,0,0,.7)); }
#app .arcade-title .character-option.is-selected .character-portrait img { filter:none; }

#app .arcade-title .character-copy {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:max(22px, 2.3cqw);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.22cqw;
  padding:0 .3cqw;
  background:#080b12;
  border-top:.14cqw solid var(--a-line);
}
#app .arcade-title .character-option.is-selected .character-copy { background:var(--agent); border-top-color:var(--agent); }
#app .arcade-title .character-copy strong {
  font:600 max(9.66px, 0.96cqw)/1 var(--px);
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:inherit;
}
#app .arcade-title .character-copy small { font:600 max(8.05px, 0.67cqw)/1 var(--px); letter-spacing:0.0392em; color:var(--a-muted); }
#app .arcade-title .character-option.is-selected .character-copy strong,
#app .arcade-title .character-option.is-selected .character-copy small { color:#080b12; }
#app .arcade-title .character-check { display:none; }

.character-slot-tag {
  position:absolute;
  top:.35cqw;
  left:.35cqw;
  z-index:2;
  padding:.28cqw .35cqw;
  font:400 max(6px, .55cqw)/1 var(--px8);
  color:#080b12;
  background:var(--agent);
  box-shadow:.15cqw .15cqw 0 #000;
  opacity:0;
}
#app .arcade-title .character-option.is-selected .character-slot-tag { opacity:1; animation:arcadeBlink .7s steps(1) infinite; }

/* ---------- linhas de opção: FASE e NÍVEL ---------- */
#app .arcade-title .title-actions {
  width:100%;
  margin-top:1.1cqw;
  display:flex;
  flex-direction:column;
  gap:.7cqw;
}
#app .arcade-title .title-actions-group--primary { display:flex; flex-direction:column; gap:.7cqw; }
.arcade-option-row { display:flex; align-items:center; gap:.8cqw; }
.arcade-option-label {
  flex:0 0 5.2cqw;
  font:600 max(11.27px, 1.06cqw) var(--px);
  color:var(--a-cyan);
  letter-spacing:0.056em;
}
.arcade-option-label:before { content:'► '; font-family:var(--sym); font-size:.8em; color:var(--a-magenta); }
.arcade-segment { display:flex; flex:1; gap:.45cqw; min-width:0; }
#app .arcade-chip {
  flex:1 1 0;
  min-width:0;
  height:max(24px, 2.25cqw);
  padding:0 .4cqw;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4cqw;
  font:600 max(10.37px, 1.02cqw)/1 var(--px);
  letter-spacing:0.03em;
  white-space:nowrap;
  color:var(--a-muted);
  background:#0c1018;
  border:.14cqw solid var(--a-line);
  border-radius:0;
  box-shadow:0 .22cqw 0 #000;
  cursor:pointer;
  transition:transform .08s, background .12s, color .12s, border-color .12s;
}
#app .arcade-chip b { font-weight:400; color:var(--a-magenta); }
#app .arcade-chip:hover,
#app .arcade-chip:focus-visible { outline:none; color:#fff; border-color:var(--a-cyan); }
#app .arcade-chip:active { transform:translateY(.2cqw); box-shadow:0 0 0 #000; }
#app .arcade-chip.is-active { color:#080b12; background:var(--a-cyan); border-color:#c9dde6; box-shadow:0 .22cqw 0 #3d5663; }
#app .arcade-chip.is-active b { color:#080b12; }
#app .arcade-chip--ai { color:#c9b9a0; border-color:#3a3f4c; flex-grow:.8; }
#app .arcade-chip--ai.is-active { background:var(--a-magenta); border-color:#e8d3a8; color:#fff; box-shadow:0 .22cqw 0 #6b5428; }
#app .arcade-title .difficulty-picker-wrap { margin:0; }

/* ---------- botão START ---------- */
#app .arcade-title #start-operation.action-button--launch,
#app .arcade-title #continue-operation {
  position:relative;
  min-height:0;
  height:max(40px, 4.1cqw);
  margin-top:.3cqw;
  padding:0 1.4cqw;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.1cqw;
  clip-path:polygon(0 .5cqw, .5cqw .5cqw, .5cqw 0, calc(100% - .5cqw) 0, calc(100% - .5cqw) .5cqw, 100% .5cqw, 100% calc(100% - .5cqw), calc(100% - .5cqw) calc(100% - .5cqw), calc(100% - .5cqw) 100%, .5cqw 100%, .5cqw calc(100% - .5cqw), 0 calc(100% - .5cqw));
  background:linear-gradient(180deg, #ffe867 0%, #ffd21f 48%, #f5a800 52%, #e88f00 100%);
  border:0;
  color:#1a0a00;
  box-shadow:inset 0 -.35cqw 0 rgba(120,50,0,.55), inset 0 .25cqw 0 rgba(255,255,255,.55);
  font-family:var(--px);
  text-transform:uppercase;
  transform:none;
}
#app .arcade-title #start-operation .action-label,
#app .arcade-title #continue-operation .action-label {
  flex:0 1 auto;
  font:600 max(16.1px, 1.81cqw)/1 var(--px);
  letter-spacing:0.0448em;
  text-shadow:.12cqw .12cqw 0 rgba(255,255,255,.45);
}
#app .arcade-title #start-operation .action-launch-icon { font-size:max(10px, 1cqw); animation:arcadeNudge .6s steps(2) infinite; }
#app .arcade-title #start-operation kbd,
#app .arcade-title #continue-operation .action-meta {
  font:600 max(9.66px, 0.84cqw)/1 var(--px);
  padding:.35cqw .45cqw;
  color:#ffe867;
  background:#1a0a00;
  border:0;
  border-radius:0;
  letter-spacing:0.0336em;
}
#app .arcade-title #start-operation:hover:not(:disabled),
#app .arcade-title #start-operation:focus-visible:not(:disabled),
#app .arcade-title #continue-operation:hover,
#app .arcade-title #continue-operation:focus-visible {
  outline:none;
  transform:translateY(-.15cqw);
  background:linear-gradient(180deg, #fff6b0 0%, #ffe03d 48%, #ffb800 52%, #ff9a00 100%);
  filter:none;
}
#app .arcade-title #start-operation:active:not(:disabled) { transform:translateY(.2cqw); }
#app .arcade-title #start-operation:disabled { filter:grayscale(.6) brightness(.7); }
#app .arcade-title #continue-operation { background:linear-gradient(180deg, #b5cfdb 0%, #2ee6ff 50%, #6d95a8 52%, #56798a 100%); color:#0c1418; }
#app .arcade-title #continue-operation .action-bar-indicator,
#app .arcade-title #continue-operation .icon { display:none; }
#app .arcade-title #continue-operation .action-meta { color:#b5cfdb; background:#0c1418; }
#app .arcade-title:has(#continue-operation:not([hidden])) #start-operation.action-button--launch { height:max(34px, 3cqw); }
#app .arcade-title:has(#continue-operation:not([hidden])) .character-option { height:max(84px, 9cqw); }

/* ---------- multiplayer ---------- */
#app .arcade-title #online-panel { position:relative; margin:0; }
#app .arcade-title #online-panel .online-launch-button {
  min-height:0;
  height:max(30px, 2.8cqw);
  padding:0 1cqw;
  justify-content:center;
  gap:.8cqw;
  clip-path:none;
  border:.16cqw solid var(--a-cyan);
  border-radius:0;
  background:rgba(12,18,26,.88);
  box-shadow:0 .25cqw 0 #000, inset 0 0 1.2cqw rgba(143,180,198,.12);
  color:var(--a-cyan);
  font-family:var(--px);
}
#app .arcade-title #online-panel .online-launch-button .action-label { flex:0 1 auto; font:600 max(11.27px, 1.12cqw) var(--px); letter-spacing:0.0448em; text-transform:uppercase; }
#app .arcade-title #online-panel .action-launch-icon { color:var(--a-magenta); }
#app .arcade-title #online-panel .online-launch-badge { font:600 max(9.66px, 0.81cqw) var(--px); padding:.3cqw .4cqw; color:#080b12; background:var(--a-magenta); border:0; border-radius:0; }
#app .arcade-title #online-panel .online-summary-chevron { color:var(--a-cyan); }
#app .arcade-title #online-panel .online-launch-button:hover,
#app .arcade-title #online-panel .online-launch-button:focus-visible { outline:none; background:rgba(20,28,38,.95); color:#fff; }
/* sala online abre como janela ao lado do menu, sem empurrar a tela */
#app .arcade-title #online-panel details[open] .online-controls {
  position:absolute;
  left:calc(100% + 1.2cqw);
  bottom:0;
  z-index:20;
  width:max(260px, 27cqw);
  margin:0;
  padding:1.2cqw;
  background:#0c1018;
  border:.18cqw solid var(--a-cyan);
  border-radius:0;
  box-shadow:.5cqw .5cqw 0 #000;
  font-family:var(--body);
  animation:arcadePop .2s steps(4);
}
#app .arcade-title #online-panel details[open] .online-controls:before {
  content:'SALA ONLINE // 2P';
  display:block;
  margin-bottom:.9cqw;
  font:600 max(11.27px, 1cqw) var(--px);
  color:var(--a-gold);
  letter-spacing:0.056em;
}
#app .arcade-title .online-btn {
  font:600 max(11.27px, 0.94cqw)/1.2 var(--px);
  letter-spacing:0.03em;
  text-transform:uppercase;
  border-radius:0;
  box-shadow:0 .22cqw 0 #000;
}

/* ---------- ações secundárias ---------- */
#app .arcade-title .title-actions-group--secondary {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.6cqw;
  margin-top:0;
}
#app .arcade-title .title-actions .action-button--ghost {
  min-height:0;
  height:max(24px, 2.1cqw);
  padding:0 .8cqw;
  justify-content:center;
  gap:.6cqw;
  opacity:1;
  clip-path:none;
  border:.14cqw solid var(--a-line);
  border-radius:0;
  background:transparent;
  color:var(--a-muted);
  font-family:var(--px);
}
#app .arcade-title .title-actions .action-button--ghost .action-label { flex:0 1 auto; font:600 max(9.66px, 0.84cqw) var(--px); letter-spacing:0.0336em; text-transform:uppercase; }
#app .arcade-title .title-actions .action-button--ghost .action-bar-indicator { display:none; }
#app .arcade-title .title-actions .action-button--ghost .icon { width:max(10px, .9cqw); height:max(10px, .9cqw); }
#app .arcade-title .title-actions .action-button--ghost kbd { font:600 max(9.66px, 0.81cqw) var(--px); padding:.2cqw .3cqw; border-radius:0; }
#app .arcade-title .title-actions .action-button--ghost:hover,
#app .arcade-title .title-actions .action-button--ghost:focus-visible { outline:none; color:#fff; border-color:var(--a-magenta); background:rgba(160,170,185,.18); transform:none; }

/* ---------- rodapé ---------- */
#app .arcade-title .arcade-footer {
  position:relative;
  z-index:7;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:1cqw;
  margin-top:.6cqw;
  padding:.6cqw 0 0;
  border-top:2px solid rgba(160,170,185,.18);
  background:none;
  font:600 max(9.66px, 0.84cqw) var(--px);
  color:var(--a-muted);
  letter-spacing:0.056em;
}
.arcade-footer-hint { display:flex; align-items:center; gap:.4cqw; }
.arcade-footer-hint kbd { font:600 max(9.66px, 0.81cqw) var(--px); padding:.2cqw .3cqw; color:var(--a-cyan); border:1px solid var(--a-line); border-radius:0; background:#0c1018; }
.arcade-press-start { font:400 max(8px, .8cqw) var(--px8); color:var(--a-gold); text-shadow:.15cqw .15cqw 0 #6a3b00; animation:arcadeBlink 1.1s steps(1) infinite; }
.arcade-footer-credit { justify-self:end; }

/* ---------- personagem em destaque ---------- */
#app .arcade-title .hero-number {
  font:400 30cqw/1 var(--display);
  color:transparent;
  -webkit-text-stroke:.16cqw rgba(var(--agent-rgb), .16);
  letter-spacing:-.04em;
  top:14%;
}
#app .arcade-title .hero-orbit { border:.16cqw dashed rgba(var(--agent-rgb), .28); box-shadow:none; }
#app .arcade-title .hero-orbit:before,
#app .arcade-title .hero-orbit:after { border-radius:0; background:var(--agent); box-shadow:none; }
#app .arcade-title .hero-orbit-outer { border-color:rgba(160,170,185,.18); }
#app .arcade-title .hero-art img { height:84%; bottom:6%; }

#app .arcade-title .hero-caption {
  bottom:6.8%;
  right:12%;
  gap:.8cqw;
  padding:.5cqw .8cqw;
  border:.16cqw solid var(--agent);
  border-radius:0;
  background:#080b12;
  box-shadow:.3cqw .3cqw 0 #000;
  font:600 max(9.66px, 0.89cqw) var(--px);
  letter-spacing:0.0448em;
  backdrop-filter:none;
}
.hero-caption-tag { font-family:var(--px8); font-weight:400; padding:.25cqw .35cqw; background:var(--agent); color:#080b12; }
#app .arcade-title .hero-id { color:var(--agent); font:600 max(12.88px, 1.29cqw) var(--px); text-transform:uppercase; }
#app .arcade-title .hero-role { color:var(--a-muted); font:600 max(8.05px, 0.74cqw) var(--px); letter-spacing:0.0336em; }

/* Balão de PENSAMENTO em pixel art: corpo com cantos arredondados em
   degraus + três "bolinhas" pixeladas indo até a cabeça do personagem.
   O contorno preto vem de drop-shadows no próprio balão, então segue os
   degraus do desenho (inclusive das bolinhas). */
#app .arcade-title .hero-dialogue-badge {
  --bub: #fdfbff;
  --ink: #080b12;
  --st: max(2px, .26cqw);           /* tamanho de 1 "pixel" do balão */
  top:6.4cqw;
  right:35.5cqw;
  width:max(140px, 13.2cqw);
  padding:calc(var(--st) * 4) calc(var(--st) * 6) calc(var(--st) * 4.4);
  gap:.45cqw;
  background:none;
  border:0;
  border-radius:0;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
  color:var(--ink);
  filter:
    drop-shadow(var(--st) 0 0 var(--ink)) drop-shadow(calc(var(--st) * -1) 0 0 var(--ink))
    drop-shadow(0 var(--st) 0 var(--ink)) drop-shadow(0 calc(var(--st) * -1) 0 var(--ink))
    drop-shadow(calc(var(--st) * 1.6) calc(var(--st) * 1.6) 0 rgba(0,0,0,.45));
}
/* corpo do balão: cantos bem arredondados em escada (6-4-3-2-1-1 pixels) */
#app .arcade-title .hero-dialogue-badge:before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    repeating-linear-gradient(0deg, rgba(5,4,15,.035) 0 1px, transparent 1px 3px),
    var(--bub);
  --s:var(--st);
  clip-path:polygon(
    calc(100% - var(--s) * 6) 0,
    calc(100% - var(--s) * 6) calc(var(--s) * 1),
    calc(100% - var(--s) * 4) calc(var(--s) * 1),
    calc(100% - var(--s) * 4) calc(var(--s) * 2),
    calc(100% - var(--s) * 3) calc(var(--s) * 2),
    calc(100% - var(--s) * 3) calc(var(--s) * 3),
    calc(100% - var(--s) * 2) calc(var(--s) * 3),
    calc(100% - var(--s) * 2) calc(var(--s) * 4),
    calc(100% - var(--s) * 1) calc(var(--s) * 4),
    calc(100% - var(--s) * 1) calc(var(--s) * 5),
    calc(100% - var(--s) * 1) calc(var(--s) * 5),
    calc(100% - var(--s) * 1) calc(var(--s) * 6),
    calc(100% - var(--s) * 1) calc(100% - var(--s) * 6),
    calc(100% - var(--s) * 1) calc(100% - var(--s) * 5),
    calc(100% - var(--s) * 1) calc(100% - var(--s) * 5),
    calc(100% - var(--s) * 1) calc(100% - var(--s) * 4),
    calc(100% - var(--s) * 2) calc(100% - var(--s) * 4),
    calc(100% - var(--s) * 2) calc(100% - var(--s) * 3),
    calc(100% - var(--s) * 3) calc(100% - var(--s) * 3),
    calc(100% - var(--s) * 3) calc(100% - var(--s) * 2),
    calc(100% - var(--s) * 4) calc(100% - var(--s) * 2),
    calc(100% - var(--s) * 4) calc(100% - var(--s) * 1),
    calc(100% - var(--s) * 6) calc(100% - var(--s) * 1),
    calc(100% - var(--s) * 6) calc(100% - var(--s) * 0),
    calc(var(--s) * 6) calc(100% - var(--s) * 0),
    calc(var(--s) * 6) calc(100% - var(--s) * 1),
    calc(var(--s) * 4) calc(100% - var(--s) * 1),
    calc(var(--s) * 4) calc(100% - var(--s) * 2),
    calc(var(--s) * 3) calc(100% - var(--s) * 2),
    calc(var(--s) * 3) calc(100% - var(--s) * 3),
    calc(var(--s) * 2) calc(100% - var(--s) * 3),
    calc(var(--s) * 2) calc(100% - var(--s) * 4),
    calc(var(--s) * 1) calc(100% - var(--s) * 4),
    calc(var(--s) * 1) calc(100% - var(--s) * 5),
    calc(var(--s) * 1) calc(100% - var(--s) * 5),
    calc(var(--s) * 1) calc(100% - var(--s) * 6),
    calc(var(--s) * 1) calc(var(--s) * 6),
    calc(var(--s) * 1) calc(var(--s) * 5),
    calc(var(--s) * 1) calc(var(--s) * 5),
    calc(var(--s) * 1) calc(var(--s) * 4),
    calc(var(--s) * 2) calc(var(--s) * 4),
    calc(var(--s) * 2) calc(var(--s) * 3),
    calc(var(--s) * 3) calc(var(--s) * 3),
    calc(var(--s) * 3) calc(var(--s) * 2),
    calc(var(--s) * 4) calc(var(--s) * 2),
    calc(var(--s) * 4) calc(var(--s) * 1),
    calc(var(--s) * 6) calc(var(--s) * 1),
    calc(var(--s) * 6) 0
  );
}
/* entrada em "quadros" de fliperama, sem filter (o filter faz o contorno) */
#app .arcade-title .hero-dialogue-badge.is-entering { animation:arcadeBubbleIn .36s steps(4) both; }
@keyframes arcadeBubbleIn {
  0% { opacity:0; transform:translate(1.2cqw, .8cqw) scale(.5); }
  60% { opacity:1; transform:translate(-.1cqw, -.1cqw) scale(1.06); }
  100% { opacity:1; transform:none; }
}
#app .arcade-title .hero-dialogue-speaker {
  font:600 max(8.54px, 0.73cqw) var(--px);
  letter-spacing:0.0448em;
  color:var(--agent);
  background:var(--ink);
  align-self:flex-start;
  padding:.22cqw .4cqw;
  text-shadow:none;
}
#app .arcade-title .hero-dialogue-text { font:700 max(10px, .9cqw)/1.25 var(--body); color:var(--ink); text-shadow:none; margin:0; letter-spacing:0; }
#app .arcade-title .hero-dialogue-quote-mark { display:none; }
#app .arcade-title .hero-dialogue-content { padding:0; gap:0; }

/* bolinhas de pensamento: círculos pixelados (cruz + miolo) desenhados com gradientes */
#app .arcade-title .hero-dialogue-tail,
#app .arcade-title .hero-dialogue-tail:before,
#app .arcade-title .hero-dialogue-tail:after {
  display:block;
  border:0;
  border-radius:0;
  box-shadow:none;
  filter:none;
  transform:none;
  background:
    linear-gradient(var(--bub), var(--bub)) center / 100% 50% no-repeat,
    linear-gradient(var(--bub), var(--bub)) center / 50% 100% no-repeat,
    linear-gradient(var(--bub), var(--bub)) center / 76% 76% no-repeat;
  image-rendering:pixelated;
}
#app .arcade-title .hero-dialogue-tail {
  position:absolute;
  left:auto;
  bottom:auto;
  right:calc(var(--st) * -3);
  top:calc(100% + var(--st) * 2);
  width:calc(var(--st) * 3);
  height:calc(var(--st) * 3);
  clip-path:none;
  animation:arcadeThought 1.2s steps(1) infinite;
}
#app .arcade-title .hero-dialogue-tail:before,
#app .arcade-title .hero-dialogue-tail:after {
  content:'';
  position:absolute;
  animation:arcadeThought 1.2s steps(1) infinite;
}
#app .arcade-title .hero-dialogue-tail:before {
  right:calc(var(--st) * -4);
  top:calc(var(--st) * 3.5);
  width:calc(var(--st) * 2);
  height:calc(var(--st) * 2);
  animation-delay:.2s;
}
#app .arcade-title .hero-dialogue-tail:after {
  right:calc(var(--st) * -7);
  top:calc(var(--st) * 6);
  width:calc(var(--st) * 1.5);
  height:calc(var(--st) * 1.5);
  animation-delay:.4s;
}
/* as bolinhas "acendem" em sequência, como pensamento chegando */
@keyframes arcadeThought { 0%, 70% { opacity:1; } 71%, 100% { opacity:.35; } }
@media (prefers-reduced-motion: reduce) {
  #app .arcade-title .hero-dialogue-tail,
  #app .arcade-title .hero-dialogue-tail:before,
  #app .arcade-title .hero-dialogue-tail:after { animation:none; }
}

/* glitch do Alt continua funcionando por cima */
#app .arcade-title.is-glitch-step .title-main { animation:arcadeShake .18s steps(3); }

/* ==========================================================================
   COMPONENTES COMPARTILHADOS DOS MENUS
   ========================================================================== */
#app .arcade-heading {
  position:relative;
  font:600 max(45.09px, 7.41cqw)/1 var(--px);
  letter-spacing:0.03em;
  color:var(--a-gold);
  text-transform:uppercase;
  text-shadow:.3cqw .3cqw 0 #8a2b00, .6cqw .6cqw 0 #2a0a00;
}
#app .arcade-heading--sm { font-size:max(14px, 1.7cqw); text-shadow:.18cqw .18cqw 0 #8a2b00, .36cqw .36cqw 0 #2a0a00; }
#app .arcade-heading em { font-style:normal; }

#app .screen-layer .eyebrow {
  font:600 max(11.27px, 1cqw) var(--px);
  letter-spacing:0.0392em;
}
#app .screen-layer kbd { font-family:var(--px); font-weight:600; font-size:max(9.76px, 0.854cqw); border-radius:0; }

/* ==========================================================================
   PAUSA
   ========================================================================== */
#app .pause-screen { font-family:var(--body); background:rgba(8,11,18,.88); }
#app .pause-screen:before {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 3px);
  z-index:0;
}
#app .pause-screen > * { position:relative; z-index:1; }
#app .pause-topline,
#app .pause-footer { font:600 max(9.66px, 0.9cqw) var(--px); letter-spacing:0.056em; color:var(--a-muted); border-color:rgba(160,170,185,.18); }
#app .pause-topline time { color:var(--a-gold); }
#app .pause-symbol { border-color:var(--a-gold); animation:arcadeBlink 1s steps(1) infinite; }
#app .pause-screen h2#pause-heading { font:400 max(30px, 5cqw)/1 var(--px8); letter-spacing:.06em; animation:arcadePop .3s steps(5); }
#app .pause-caption { font:600 max(11px, 1cqw)/1.4 var(--body); color:#c3cad3; }
#app .pause-actions { gap:.55cqw; margin-top:2.2cqw; }
#app .pause-button {
  position:relative;
  min-height:max(32px, 3cqw);
  padding:0 1cqw 0 2.4cqw;
  font:600 max(12.88px, 1.26cqw)/1.2 var(--px);
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:#d6dbe2;
  background:#0c1018;
  border:.16cqw solid var(--a-line);
  border-radius:0;
  box-shadow:0 .25cqw 0 #000;
  transition:none;
}
#app .pause-button small { font:600 max(9.66px, 0.81cqw) var(--px); color:var(--a-red); text-transform:none; }
#app .pause-button:before {
  content:'►';
  position:absolute;
  left:.8cqw;
  top:50%;
  transform:translateY(-50%);
  font-size:.9em;
  color:var(--a-gold);
  opacity:0;
}
#app .pause-button:hover,
#app .pause-button:focus-visible,
#app .pause-button[aria-expanded="true"] { outline:none; color:#fff; border-color:var(--a-cyan); background:#141c28; }
#app .pause-button:hover:before,
#app .pause-button:focus-visible:before,
#app .pause-button[aria-expanded="true"]:before { opacity:1; animation:arcadeBlink .6s steps(1) infinite; }
#app .pause-button--resume { color:#1a0a00; background:linear-gradient(180deg, #ffe867 0%, #ffd21f 48%, #f5a800 52%, #e88f00 100%); border-color:#fff3a6; box-shadow:0 .3cqw 0 #6a3b00; }
#app .pause-button--resume .pause-play { display:none; }
#app .pause-button--resume:before { color:#1a0a00; opacity:1; animation:arcadeBlink .8s steps(1) infinite; }
#app .pause-button--resume:hover,
#app .pause-button--resume:focus-visible { color:#1a0a00; background:linear-gradient(180deg, #fff6b0 0%, #ffe03d 48%, #ffb800 52%, #ff9a00 100%); border-color:#fff; }
#app .pause-button kbd { color:inherit; border:1px solid currentColor; background:transparent; padding:.2cqw .35cqw; }
#app .pause-secondary { border-color:rgba(160,170,185,.18); }
#app .pause-secondary button { font:600 max(11.27px, 1cqw) var(--px); letter-spacing:0.0336em; text-transform:uppercase; color:var(--a-muted); }
#app .pause-secondary button:hover,
#app .pause-secondary button:focus-visible { color:var(--a-magenta); outline:none; }
#app .pause-note { font:500 max(9px, .74cqw)/1.6 var(--body); color:#8a93a0; }

#app .pause-summary,
#app .pause-settings {
  position:relative;
  background:#0c1018;
  border:.18cqw solid var(--a-line);
  border-radius:0;
  box-shadow:.5cqw .5cqw 0 #000;
}
#app .pause-summary:before,
#app .pause-settings:before {
  content:'';
  position:absolute;
  left:-.18cqw;
  right:-.18cqw;
  top:-.18cqw;
  height:.35cqw;
  background:var(--a-gold);
}
#app .pause-screen .pause-agent-copy .panel-kicker { font:600 max(12.88px, 1.21cqw) var(--px); color:var(--agent); letter-spacing:0.0336em; }
#app .pause-screen #pause-agent-phrase { font:600 max(10px, .85cqw) var(--body); font-style:italic; color:#c3cad3; }
#app .pause-label,
#app .pause-fieldset legend { font:600 max(9.66px, 0.84cqw) var(--px); color:var(--a-cyan); letter-spacing:0.056em; }
#app .pause-objective { border-color:rgba(255,255,255,.08); }
#app .pause-objective strong { font:700 max(12px, 1.1cqw) var(--body); color:#fff; }
#app .pause-screen .resource-summary > div,
#app .pause-screen .coin-breakdown > div { background:#111722; border-radius:0; font-family:var(--body); font-weight:600; }
#app .pause-screen .resource-summary strong,
#app .pause-screen .coin-breakdown strong { font-family:var(--px); font-weight:600; font-size:max(11px, 1.04cqw); color:#fff; }
#app .pause-screen .summary-wallet { font:700 max(11px, .9cqw) var(--body); }
#app .pause-screen .summary-wallet strong,
#app .pause-screen .summary-points > span:last-child strong { font-family:var(--px); color:var(--a-gold); text-shadow:.15cqw .15cqw 0 #6a3b00; }
#app .pause-screen .summary-points > span { font-weight:600; }
#app .pause-settings h3 { font:600 max(19.32px, 1.93cqw) var(--px); color:var(--a-gold); }
#app .pause-slider,
#app .pause-select,
#app .pause-check { font-family:var(--body); font-weight:600; }
#app .pause-slider output { font:600 max(11.27px, 0.96cqw) var(--px); color:var(--a-gold); }
#app .pause-slider input { accent-color:var(--a-magenta); }
#app .pause-screen .quiet-button { font:600 max(9.66px, 0.84cqw) var(--px); letter-spacing:0.03em; border-radius:0; }

/* ==========================================================================
   GAME OVER / VITÓRIA
   ========================================================================== */
#app .modal-screen { background:rgba(8,11,18,.85); }
#app .modal-screen:before {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 3px);
}
#app .modal-screen .result-content {
  font-family:var(--body);
  border:0;
  border-image:none;
  border-radius:0;
  background:
    linear-gradient(180deg, rgba(20,26,36,.96) 0%, rgba(10,13,19,.98) 100%);
  box-shadow:
    0 0 0 .2cqw #080b12, 0 0 0 .45cqw var(--frame, var(--a-cyan)), 0 0 0 .65cqw #080b12,
    .9cqw .9cqw 0 .6cqw rgba(0,0,0,.6);
  animation:arcadePop .28s steps(5);
}
#app .modal-screen--defeat .result-content { --frame:var(--a-red); --frame-rgb:255,61,74; }
#app .modal-screen--victory .result-content { --frame:var(--a-gold); --frame-rgb:255,210,31; }

#app .result-content .eyebrow {
  border-image:none;
  border:0;
  border-radius:0;
  background:var(--frame, var(--a-cyan));
  color:#080b12;
  padding:.45cqw .8cqw;
  box-shadow:.25cqw .25cqw 0 #000;
  text-shadow:none;
}
#app .result-content .eyebrow span { display:none; }
#app .result-content h2.arcade-heading {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5cqw;
  font:600 max(45.09px, 6.76cqw)/1 var(--px);
  letter-spacing:0.0336em;
  margin:1.2cqw 0 .8cqw;
}
#app .result-content h2.arcade-heading em { font-size:1em; }
#app .arcade-heading--defeat { font-family:var(--px8) !important; font-weight:400 !important; }
#app .arcade-heading--defeat span { color:#fff; text-shadow:.3cqw .3cqw 0 #6b0a12, .6cqw .6cqw 0 #1a0003; }
#app .arcade-heading--defeat em { color:var(--a-red); text-shadow:.3cqw .3cqw 0 #6b0a12, .6cqw .6cqw 0 #1a0003; animation:arcadeBlinkSoft 1.4s steps(2) infinite; }
#app .arcade-heading--victory { font-size:max(22px, 3.2cqw) !important; }
#app .arcade-heading--victory span { color:#fff; text-shadow:.25cqw .25cqw 0 #1a4a7a, .5cqw .5cqw 0 #051428; }
#app .arcade-heading--victory em { color:var(--a-gold); text-shadow:.25cqw .25cqw 0 #8a2b00, .5cqw .5cqw 0 #2a0a00; }
#app .result-content .modal-copy { font:600 max(11px, .95cqw)/1.45 var(--body); color:#c9d0d8; }
#app .result-grid > div { background:#080b12; border:.14cqw solid var(--a-line); border-radius:0; box-shadow:0 .25cqw 0 #000; }
#app .result-grid span { font:600 max(9.66px, 0.81cqw) var(--px); letter-spacing:0.056em; color:var(--a-cyan); }
#app .result-grid strong { font:400 max(12px, 1.3cqw) var(--px8); color:var(--a-gold); text-shadow:.15cqw .15cqw 0 #6a3b00; }
#app .result-coin-chip { border-radius:0; background:#080b12; font-family:var(--px); font-weight:600; font-size:max(9.76px, 0.878cqw); }
#app .result-vitals > div { border-radius:0; background:#080b12; font-family:var(--body); font-weight:600; }
#app .result-vitals strong { font-family:var(--px); font-weight:600; font-size:max(9.76px, 0.878cqw); }
#app .subtle-note.arcade-continue { font:600 max(12.88px, 1.29cqw) var(--px); color:var(--a-gold); letter-spacing:0.056em; }
#app .subtle-note.arcade-continue span { display:block; margin-top:.5cqw; font:600 max(10px, .78cqw) var(--body); color:var(--a-muted); letter-spacing:0; }
#app .subtle-note.arcade-continue:first-line { animation:arcadeBlink 1s steps(1) infinite; }
#app .chain-receipt { border-radius:0; font-family:var(--body); }
#app .chain-receipt-kicker,
#app .chain-receipt-id { font-family:var(--px); font-weight:600; font-size:max(9.76px, 0.854cqw); }

#app .result-content .modal-actions .action-button {
  min-height:max(32px, 3cqw);
  clip-path:none;
  border-radius:0;
  justify-content:center;
  gap:.8cqw;
  font:600 max(12.88px, 1.21cqw)/1 var(--px);
  letter-spacing:0.0336em;
  text-transform:uppercase;
}
#app .result-content .modal-actions .action-button span { font:inherit; }
#app .result-content .modal-actions .action-button--primary {
  color:#1a0a00;
  border:0;
  background:linear-gradient(180deg, #ffe867 0%, #ffd21f 48%, #f5a800 52%, #e88f00 100%);
  box-shadow:0 .3cqw 0 #6a3b00, inset 0 .2cqw 0 rgba(255,255,255,.5);
}
#app .result-content .modal-actions .action-button--primary:before { content:'►'; animation:arcadeBlink .8s steps(1) infinite; }
#app .result-content .modal-actions .action-button--primary kbd { background:#1a0a00; color:#ffe867; border:0; padding:.3cqw .4cqw; }
#app .result-content .modal-actions .action-button--ghost { color:#d6dbe2; background:#0c1018; border:.16cqw solid var(--a-line); box-shadow:0 .25cqw 0 #000; }
#app .result-content .modal-actions .action-button--ghost:hover,
#app .result-content .modal-actions .action-button--ghost:focus-visible { border-color:var(--a-cyan); color:#fff; outline:none; }
#app .result-content .modal-actions .action-button:hover:not(:disabled) { transform:translateY(-.15cqw); }

/* ==========================================================================
   GUIA / CONTROLES
   ========================================================================== */
#app .manual-screen {
  font-family:var(--body);
  border:0;
  border-image:none;
  border-radius:0;
  background:linear-gradient(180deg, #131924 0%, #0c1018 100%);
  box-shadow:0 0 0 .2cqw #080b12, 0 0 0 .45cqw var(--a-cyan), 0 0 0 .65cqw #080b12, .9cqw .9cqw 0 .6cqw rgba(0,0,0,.6);
}
#app .manual-head .eyebrow { border-image:none; border:0; background:var(--a-cyan); color:#080b12; padding:.4cqw .7cqw; }
#app .manual-head .eyebrow span { display:none; }
#app .manual-head h2 { margin-top:.6cqw; }
#app .guide-tabs button {
  font:600 max(9.66px, 0.9cqw) var(--px);
  letter-spacing:0.0336em;
  text-transform:uppercase;
  border-radius:0;
  box-shadow:0 .22cqw 0 #000;
}
#app .guide-tabs button[aria-selected="true"] { color:#080b12; background:var(--a-gold); border-color:#fff3a6; }
#app .manual-group { border-radius:0; background:#0c1018; }
#app .manual-group h3 { font:600 max(12.88px, 1.21cqw) var(--px); letter-spacing:0.0336em; text-transform:uppercase; color:#fff; }
#app .manual-group h3 span { font-family:var(--px); border-radius:0; }
#app .manual-line span { font-weight:700; }
#app .manual-line kbd { font:600 max(9.66px, 0.89cqw) var(--px); border-radius:0; box-shadow:0 .2cqw 0 #6a3b00; }
#app .guide-intro,
#app .group-note,
#app .guide-callout { font-weight:600; }
#app .close-button { border-radius:0; font-family:var(--body); font-weight:700; }
#app .manual-footer { font:600 max(9.66px, 0.84cqw) var(--px); letter-spacing:0.056em; }

/* ==========================================================================
   BRIEFING DA MISSÃO
   ========================================================================== */
#mission-briefing-screen { font-family:var(--body); }
#mission-briefing-screen:after {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 3px);
}
.brief-mission-no {
  display:block;
  margin-bottom:.9em;
  font:600 clamp(28.99px, 3.87vw, 54.75px)/1 var(--px);
  color:var(--a-gold);
  letter-spacing:0.0336em;
  text-shadow:.12em .12em 0 #8a2b00, .24em .24em 0 #2a0a00;
  animation:arcadePop .35s steps(5);
}
#mission-briefing-screen .brief-why { border-left-color:var(--a-magenta); background:rgba(14,19,28,.8); }
#mission-briefing-screen .brief-why-tag { font:600 clamp(12.88px, 1.21vw, 17.71px) var(--px); letter-spacing:0.0448em; color:var(--a-cyan); }
#mission-briefing-screen .brief-why-copy { font-weight:600; }
#mission-briefing-screen .brief-why-copy strong { color:var(--a-gold); }
#mission-briefing-screen .mission-operation-brief .step-num { font-family:var(--px8); font-size:clamp(20px, 2.4vw, 34px); color:var(--a-magenta); text-shadow:.12em .12em 0 #2a2213; }
#mission-briefing-screen .mission-operation-brief .step-task { font-weight:600; }
.briefing-ready {
  display:block;
  margin-bottom:12px;
  font:400 clamp(12px, 1.4vw, 20px) var(--px8);
  color:var(--a-green);
  letter-spacing:.1em;
  text-align:center;
  animation:arcadeBlink .7s steps(1) infinite;
}
#app .briefing-skip,
.briefing-skip { font-family:var(--px); border-radius:0; }
#mission-briefing-screen .briefing-skip-row { flex-direction:column; align-items:center; }
.mission-briefing-progress span { background:repeating-linear-gradient(90deg, var(--a-gold) 0 10px, transparent 10px 13px) !important; }

/* ==========================================================================
   HUD — só os rótulos ganham a fonte arcade
   ========================================================================== */
#app .game-hud .vital-card-kicker,
#app .game-hud .hud-score-kicker,
#app .game-hud .hud-combo-kicker,
#app .game-hud .mission-head .panel-kicker,
#app .run-lives-counter > span,
#app #boss-phase { font-family:var(--px); font-weight:600; letter-spacing:0.0336em; }
#app .game-hud #score-value,
#app .game-hud #combo-value,
#app .game-hud #coin-total { font-family:var(--px8); font-weight:400; }
#app .game-hud #mission-title,
#app .game-hud #mission-detail { font-family:var(--body); }
#app #boss-title { font-family:var(--display); font-weight:400; letter-spacing:.04em; }
#app .bottom-hud .quiet-button,
#app .sector-readout { font-family:var(--px); font-weight:600; letter-spacing:0.03em; }

/* Toasts */
#app .toast-region > * { font-family:var(--body); font-weight:600; border-radius:0; }

/* Aviso de girar a tela */
.rotate-notice-kicker { font-family:var(--px); letter-spacing:0.056em; }
.rotate-notice-card h1 { font-family:var(--px); font-weight:600; line-height:1.3; }

/* ==========================================================================
   ACESSIBILIDADE
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .arcade-crt,
  #app .arcade-title .game-title,
  #app .arcade-title .character-option.is-selected,
  #app .arcade-title .character-option.is-selected .character-slot-tag,
  .arcade-press-start,
  .marquee-blink,
  .picker-arrow,
  #app .arcade-title #start-operation .action-launch-icon,
  #app .pause-button:before,
  #app .pause-symbol,
  #app .arcade-heading--defeat em,
  .briefing-ready,
  .boot-loading-title { animation:none !important; }
}
#app.reduced-effects .arcade-crt { animation:none; }
#app .chip-emoji { font-family:'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif; font-weight:400; }

/* ==========================================================================
   TELAS PEQUENAS (celular na horizontal / janelas baixas)
   O palco é um container de tamanho, então medimos a própria tela do jogo.
   ========================================================================== */
.arcade-option-label { white-space:nowrap; flex-basis:max(56px, 5.2cqw); }

@container (max-height: 520px) {
  #app .arcade-title .arcade-footer { display:none; }
  #app .arcade-title .marquee-center { display:none; }
  #app .arcade-title .arcade-marquee { grid-template-columns:1fr auto; }
  #app .arcade-title .arcade-marquee { margin-bottom:6px; padding-bottom:6px; }
  #app .arcade-title .title-lede { display:none; }
  #app .arcade-title .character-picker { margin-top:8px; }
  #app .arcade-title .character-option { height:max(78px, 11cqw); }
  #app .arcade-title .character-copy small { display:none; }
  #app .arcade-title .title-actions,
  #app .arcade-title .title-actions-group--primary { gap:5px; margin-top:6px; }
  #app .arcade-title .title-actions .action-button--ghost { height:22px; }
  #app .arcade-title #online-panel .online-launch-button { height:28px; }
  #app .arcade-title #start-operation.action-button--launch { height:36px; margin-top:0; }

  #app .result-content h2.arcade-heading { font-size:24px; margin:6px 0; flex-direction:row; justify-content:center; gap:14px; }
  #app .arcade-heading--victory { font-size:18px !important; }
  #app .result-content .result-coins-breakdown,
  #app .result-content .result-vitals,
  #app .subtle-note.arcade-continue span,
  #app .result-content .chain-receipt { display:none; }
  #app .result-content .modal-copy { font-size:11px; }
  #app .pause-screen h2#pause-heading { font-size:28px; }
  #app .pause-note { display:none; }
}