:root {
  color-scheme:dark;
  --navy:#0b1723;
  --ink:#f2f4f3;
  --muted:#a5b4bf;
  --gold:#ffbf00;
  --ice:#9cc5dd;
  --line:#bdd5e52b;
  --danger:#ff856d;
  --sans:'Segoe UI',Arial,sans-serif;
  --mono:'Cascadia Mono',Consolas,monospace;
}

* {
  box-sizing:border-box;
}

html,body {
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:var(--navy);
}

body {
  font:14px var(--sans);
  color:var(--ink);
}

button {
  font:inherit;
  color:inherit;
  cursor:pointer;
  border:0;
  touch-action:manipulation;
}

button:disabled {
  cursor:wait;
  opacity:.55;
}

button:focus-visible,[tabindex]:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:4px;
}

[hidden] {
  display:none!important;
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Static boot layer: deliberately not hidden in HTML, so there is no blank
   frame while JavaScript, images, fonts and the intro movie are loading. */
.boot-loading {
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:10px;
  color:#dce9f2;
  background:
    radial-gradient(circle at 50% 45%, rgba(0,210,255,.08), transparent 30%),
    linear-gradient(135deg, #040b12 0%, #071825 55%, #03080e 100%);
  transition:opacity .45s ease, visibility .45s ease;
}

.boot-loading.is-complete {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.boot-loading-mark {
  display:flex;
  align-items:end;
  gap:5px;
  height:30px;
  margin-bottom:5px;
}

.boot-loading-mark span {
  display:block;
  width:5px;
  height:14px;
  background:var(--gold);
  box-shadow:0 0 12px rgba(255,191,0,.7);
  animation:bootPulse 1s ease-in-out infinite;
}

.boot-loading-mark span:nth-child(2) { height:24px; animation-delay:.12s; background:#00d2ff; box-shadow:0 0 12px rgba(0,210,255,.7); }
.boot-loading-mark span:nth-child(3) { height:18px; animation-delay:.24s; }

@keyframes bootPulse {
  0%,100% { opacity:.35; transform:scaleY(.7); }
  50% { opacity:1; transform:scaleY(1); }
}

.boot-loading-kicker,
.boot-loading-message,
.boot-loading-percent {
  font:700 9px var(--mono);
  letter-spacing:2px;
  color:#7390a4;
}

.boot-loading-title {
  font:800 clamp(18px, 2.6vw, 30px) var(--sans);
  letter-spacing:.1em;
  color:#f4f7f8;
}

.boot-loading-message { min-height:1.2em; letter-spacing:1px; color:#a9c0cf; }

.boot-loading-track {
  width:min(360px, 68vw);
  height:4px;
  margin-top:12px;
  overflow:hidden;
  background:#b9d4e51c;
  border:1px solid #b9d4e52e;
}

.boot-loading-progress {
  width:0%;
  height:100%;
  background:linear-gradient(90deg, #00d2ff, var(--gold));
  box-shadow:0 0 14px rgba(255,191,0,.65);
  transition:width .2s ease;
}

.boot-loading-track.is-indeterminate .boot-loading-progress {
  width:42%;
  animation:bootIndeterminate 1.2s ease-in-out infinite;
}

@keyframes bootIndeterminate {
  from { transform:translateX(-110%); }
  to { transform:translateX(250%); }
}

.boot-loading-percent { color:var(--gold); letter-spacing:1px; }

/* Full-viewport cinematic layer, intentionally above the canvas and title UI. */
.intro-screen {
  position:fixed;
  inset:0;
  z-index:900;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#02060a;
  opacity:1;
  transition:opacity .55s ease;
}

.intro-screen[hidden] { display:none; }
.intro-screen.is-ending { opacity:0; pointer-events:none; }
.intro-screen video { width:100%; height:100%; object-fit:cover; background:#02060a; }

#app .title-screen {
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1), filter .7s ease;
}

#app.is-intro .title-screen {
  opacity:0;
  transform:scale(1.025);
  filter:blur(10px);
}

.intro-vignette {
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, #02060a99 0%, transparent 22%, transparent 70%, #02060ae6 100%), radial-gradient(ellipse at center, transparent 45%, #02060acc 100%);
}

.intro-meta {
  position:absolute;
  top:clamp(18px, 4vw, 54px);
  left:clamp(18px, 4vw, 60px);
  right:clamp(18px, 4vw, 60px);
  display:flex;
  justify-content:space-between;
  color:#d9e7eeaa;
  font:700 9px var(--mono);
  letter-spacing:2px;
  pointer-events:none;
}

.intro-center-action {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  z-index:50;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
}

.intro-center-action[hidden] {
  display:none!important;
}

.intro-start-btn-center {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:22px 54px;
  font-family:var(--mono);
  font-size:26px;
  font-weight:900;
  letter-spacing:4px;
  text-transform:uppercase;
  color:#07121b;
  background:linear-gradient(135deg, #ffe885 0%, #ffb800 50%, #e67e22 100%);
  border:2px solid #fff3bf;
  border-radius:8px;
  cursor:pointer;
  user-select:none;
  box-shadow:0 0 35px rgba(255, 184, 0, .55), 0 0 70px rgba(255, 184, 0, .25), inset 0 2px 0 rgba(255, 255, 255, .9);
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease;
  animation:introPulse 2s infinite ease-in-out;
}

.intro-start-btn-center:hover,
.intro-start-btn-center:focus-visible {
  transform:scale(1.06);
  box-shadow:0 0 50px rgba(255, 184, 0, .85), 0 0 100px rgba(255, 184, 0, .45), inset 0 2px 0 rgba(255, 255, 255, 1);
  outline:none;
}

.intro-start-btn-center:active {
  transform:scale(.97);
}

.intro-btn-play-icon {
  font-size:24px;
  line-height:1;
  color:#07121b;
}

.intro-btn-label {
  line-height:1;
}

.intro-start-btn-center kbd {
  margin-left:6px;
  padding:5px 9px;
  font-size:12px;
  font-weight:800;
  color:#eff7fa;
  background:rgba(7, 21, 33, .9);
  border:1px solid rgba(255, 255, 255, .35);
  border-radius:4px;
  letter-spacing:1px;
}

@keyframes introPulse {
  0%, 100% {
    box-shadow:0 0 30px rgba(255, 184, 0, .45), 0 0 60px rgba(255, 184, 0, .2);
  }
  50% {
    box-shadow:0 0 48px rgba(255, 184, 0, .8), 0 0 95px rgba(255, 184, 0, .4);
  }
}

@media (max-width: 640px) {
  .intro-start-btn-center {
    padding:16px 36px;
    font-size:19px;
    gap:12px;
  }
  .intro-btn-play-icon {
    font-size:18px;
  }
  .intro-start-btn-center kbd {
    font-size:10px;
    padding:3px 6px;
  }
}

.intro-controls {
  position:absolute;
  right:clamp(18px, 4vw, 60px);
  bottom:clamp(18px, 4vw, 54px);
  display:flex;
  align-items:center;
  gap:14px;
  z-index:20;
}

.intro-controls button {
  display:inline-flex;
  align-items:center;
  padding:10px 14px;
  color:#eff7fa;
  background:#071521cc;
  border:1px solid #bdd5e550;
  border-radius:3px;
  font:700 10px var(--mono);
  letter-spacing:1px;
  backdrop-filter:blur(8px);
  cursor:pointer;
  user-select:none;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}

.intro-controls button:hover,
.intro-controls button:focus-visible { color:#07121b; background:var(--gold); border-color:#ffe17d; outline:none; }
.intro-start-button { color:#07121b!important; background:var(--gold)!important; border-color:#ffe17d!important; }
.intro-sound-button { border-color:#46b3e680; }
.intro-sound-button:hover,
.intro-sound-button:focus-visible { color:#07121b; background:#46b3e6; border-color:#8be0ff; }
.intro-skip-button { display:inline-flex; align-items:center; }
.intro-controls kbd { margin-left:8px; font-size:8px; }

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

.icon-library {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}

.icon {
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0;
}

h1,h2,h3,p {
  margin:0;
}

kbd {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 7px;
  border:1px solid var(--line);
  border-bottom-width:2px;
  border-radius:4px;
  font:10px var(--mono);
  white-space:nowrap;
  color:var(--ink);
  background:#b3cdde0c;
}

.app-shell,.main-frame {
  height:100vh;
  height:100dvh;
  width:100%;
  display:grid;
  place-items:center;
}

.game-shell,.game-frame {
  width:min(100vw,177.7778dvh);
  height:min(100dvh,56.25vw);
}

.game-stage {
  position:relative;
  width:100%;
  height:100%;
  container-type:size;
  isolation:isolate;
  overflow:hidden;
}

#game {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  outline:none;
}

/* A death transition and the game-over screen desaturate the underlying
   playfield and tactical HUD while keeping the result panel readable. */
#app.is-death-grayscale #game,
#app.is-death-grayscale #hud,
#app.is-death-grayscale #bottom-hud {
  filter:grayscale(1);
}

#app.is-dying #game,
#app.is-dying #hud,
#app.is-dying #bottom-hud {
  pointer-events:none;
}

#app[data-state="playing"]:not([data-help="open"]) #game,
#app[data-state="playing"]:not([data-help="open"]) .game-stage,
#app.is-playing:not([data-help="open"]) #game,
#app.is-playing:not([data-help="open"]) .game-stage {
  cursor: none;
}

#app[data-state="playing"] button,
#app.is-playing button {
  cursor: pointer;
}

.screen-layer {
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:5;
}

.screen-panel {
  position:absolute;
  inset:0;
  pointer-events:auto;
  overflow:auto;
  animation:appear .3s ease-out;
}

.title-screen {
  position:absolute;
  inset:0;
  padding:1.4cqw 4.5cqw 1cqw;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.title-backdrop {
  position:absolute;
  inset:0;
  z-index:-3;
  background:
    radial-gradient(ellipse 65% 55% at 78% 50%, rgba(255, 191, 0, 0.08) 0%, transparent 70%),
    radial-gradient(circle at 20% 25%, rgba(0, 210, 255, 0.06) 0%, transparent 60%),
    linear-gradient(90deg, #050e17fc 0%, #071522f2 35%, #081827b5 65%, #081622cc 100%),
    linear-gradient(0deg, #07121df0 0%, #07121d55 50%, #07121df0 100%),
    url('../assets/scenarios/atlas-city.png') center/cover;
}

.title-backdrop:after {
  content:'';
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.18) 2px, rgba(0, 0, 0, 0.18) 4px),
    radial-gradient(ellipse at center, transparent 40%, #03080e 98%);
  pointer-events:none;
}

/* Header tático */
.menu-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:3;
  padding-bottom:0.4cqw;
}

.brand-lockup {
  display:flex;
  align-items:center;
  gap:14px;
}

.brand-mark {
  font-size:32px;
  letter-spacing:-6px;
  padding-right:8px;
  font-weight:900;
  color:var(--gold);
  transform:skew(-10deg);
  text-shadow:0 0 20px rgba(255, 191, 0, 0.45);
  line-height:1;
}

.brand-mark span {
  color:var(--ink);
  text-shadow:none;
}

.brand-text {
  display:flex;
  flex-direction:column;
  gap:2px;
}

.brand-title {
  font:800 11px var(--mono);
  letter-spacing:3px;
  color:#f1f5f9;
  text-shadow:0 0 8px rgba(255,255,255,0.2);
}

.brand-subtitle {
  font:600 8px var(--mono);
  letter-spacing:1.5px;
  color:#708b9e;
}

.campaign-status {
  display:flex;
  align-items:center;
  gap:10px;
  padding:5px 14px;
  background:rgba(9, 22, 34, 0.75);
  border:1px solid rgba(192, 222, 245, 0.18);
  border-radius:20px;
  backdrop-filter:blur(10px);
}

.beacon-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 10px var(--gold);
  animation:beaconPulse 2s infinite ease-in-out;
}

@keyframes beaconPulse {
  0%, 100% { opacity:1; transform:scale(1); }
  50% { opacity:0.4; transform:scale(0.85); }
}

.chapter-label {
  font:700 9px var(--mono);
  letter-spacing:2px;
  color:#cbd5e1;
  display:flex;
  align-items:center;
  gap:10px;
}

.chapter-label i {
  height:4px;
  width:4px;
  background:var(--gold);
  transform:rotate(45deg);
}

.header-actions {
  display:flex;
  gap:10px;
}

.icon-button {
  position:relative;
  display:inline-grid;
  place-items:center;
  width:40px;
  height:40px;
  border:1px solid rgba(189, 213, 229, 0.22);
  border-radius:6px;
  background:rgba(8, 20, 31, 0.8);
  backdrop-filter:blur(8px);
  color:#dbe4eb;
  transition:all .2s ease;
  box-shadow:0 3px 12px rgba(0, 0, 0, 0.35);
}

.icon-button:hover {
  background:rgba(30, 52, 73, 0.9);
  border-color:rgba(0, 210, 255, 0.6);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 0 16px rgba(0, 210, 255, 0.25);
}

.icon-button[aria-pressed=true] {
  color:var(--muted);
}

.icon-button[aria-pressed=true]:after {
  content:'';
  width:26px;
  height:2px;
  position:absolute;
  background:var(--danger);
  transform:rotate(-45deg);
  box-shadow:0 0 8px var(--danger);
}

/* Conteúdo Principal do Menu */
.title-content {
  position:relative;
  margin-top:0.4cqw;
  width:52%;
  z-index:2;
}

.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:4px 12px 4px 6px;
  background:rgba(255, 191, 0, 0.08);
  border:1px solid rgba(255, 191, 0, 0.25);
  border-radius:4px;
  font:700 9px var(--mono);
  letter-spacing:2px;
  color:var(--gold);
}

.eyebrow-line {
  width:16px;
  height:2px;
  background:var(--gold);
  box-shadow:0 0 8px var(--gold);
}

.eyebrow-text {
  font-weight:700;
}

.tactical-badge {
  font-size:7.5px;
  background:rgba(255, 191, 0, 0.2);
  padding:2px 6px;
  border-radius:2px;
  color:#fff;
  letter-spacing:1px;
}

.game-title {
  margin-top:0.5cqw;
  font-size:clamp(32px, 4.4cqw, 52px);
  letter-spacing:-.04em;
  line-height:.88;
  font-weight:900;
  text-transform:uppercase;
  filter:drop-shadow(0 6px 28px rgba(0, 0, 0, 0.9));
}

.title-sub {
  display:block;
  font-weight:300;
  letter-spacing:.12em;
  font-size:.82em;
  color:#edf2f7;
  text-shadow:0 0 20px rgba(0, 210, 255, 0.4);
}

.title-main {
  display:block;
  background:linear-gradient(180deg, #fff7d6 0%, #ffc824 45%, #e69d00 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 25px rgba(255, 191, 0, 0.4));
}

.title-lede {
  margin-top:0.6cqw;
  color:#cad5de;
  font-size:clamp(10px, 0.95cqw, 13px);
  line-height:1.45;
  max-width:38cqw;
  text-shadow:0 2px 8px rgba(0, 0, 0, 0.8);
}

.character-picker {
  width:30cqw;
  margin-top:0.7cqw;
}

.character-picker-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
  color:#668297;
  font:700 7px var(--mono);
  letter-spacing:1px;
}

.character-options {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.character-option {
  position:relative;
  min-width:0;
  min-height:50px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:3px 22px 3px 5px;
  overflow:hidden;
  color:#b8c7d3;
  text-align:left;
  cursor:pointer;
  background:linear-gradient(135deg,rgba(12,28,42,.92),rgba(7,18,28,.96));
  border:1px solid rgba(189,213,229,.18);
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
  transition:border-color .18s,background .18s,transform .18s,box-shadow .18s;
}

.character-option:hover,
.character-option:focus-visible {
  color:#fff;
  border-color:rgba(102,232,245,.7);
  background:linear-gradient(135deg,rgba(17,42,59,.98),rgba(8,25,38,.98));
  box-shadow:0 0 18px rgba(0,210,255,.16);
  outline:none;
}

.character-option.is-selected {
  color:#fff7d6;
  border-color:rgba(255,191,0,.78);
  background:linear-gradient(135deg,rgba(55,43,15,.96),rgba(13,27,39,.98));
  box-shadow:inset 3px 0 0 var(--gold),0 0 20px rgba(255,191,0,.14);
}

.character-portrait {
  width:40px;
  height:44px;
  flex:0 0 40px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:radial-gradient(circle at 50% 35%,rgba(102,232,245,.12),transparent 68%);
  border:1px solid rgba(102,232,245,.14);
}

.character-portrait img {
  width:100%;
  height:100%;
  object-fit:contain;
  transform:scale(1.24);
  transform-origin:center 55%;
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.8));
}


.character-copy {
  min-width:0;
  display:grid;
  gap:4px;
}

.character-copy strong {
  overflow:hidden;
  font-size:11px;
  line-height:1.1;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.character-copy small {
  color:#708b9e;
  font:700 7px var(--mono);
  letter-spacing:1px;
}

.character-option.is-selected .character-copy small {
  color:var(--gold);
}

.character-check {
  position:absolute;
  top:8px;
  right:9px;
  display:grid;
  width:15px;
  height:15px;
  place-items:center;
  color:#07121b;
  font-size:9px;
  background:var(--gold);
  border-radius:50%;
  opacity:0;
  transform:scale(.65);
  transition:opacity .18s,transform .18s;
}

.character-option.is-selected .character-check {
  opacity:1;
  transform:scale(1);
}

/* Botões de Ação do Menu AAA */
.title-actions {
  display:grid;
  gap:8px;
  width:30cqw;
  margin-top:0.7cqw;
}

.action-button {
  position:relative;
  min-height:42px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 18px 0 14px;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.03em;
  text-align:left;
  cursor:pointer;
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition:all .22s cubic-bezier(0.16, 1, 0.3, 1);
  overflow:hidden;
}

.action-bar-indicator {
  display:inline-block;
  font-style:normal;
  width:4px;
  height:20px;
  background:currentColor;
  border-radius:2px;
  opacity:0.4;
  transition:all .22s ease;
  flex-shrink:0;
}

.action-label {
  flex:1;
  font-size:12px;
}

.action-button--primary {
  background:linear-gradient(135deg, #ffc824 0%, #ffbf00 60%, #e6a500 100%);
  color:#07121b;
  border:1px solid #ffe17d;
  box-shadow:0 4px 20px rgba(255, 191, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.action-button--primary .action-bar-indicator {
  background:#07121b;
  opacity:0.6;
}

.action-button--primary:hover:not(:disabled) {
  background:linear-gradient(135deg, #ffdc69 0%, #ffd043 60%, #ffa500 100%);
  transform:translateX(6px) scale(1.01);
  box-shadow:0 0 32px rgba(255, 191, 0, 0.55), 0 6px 20px rgba(0, 0, 0, 0.5);
}

.action-button--primary:hover .action-bar-indicator {
  opacity:1;
  height:32px;
}

.action-button--primary kbd {
  border-color:rgba(7, 18, 27, 0.3);
  background:rgba(7, 18, 27, 0.12);
  color:#07121b;
  font:700 9px var(--mono);
  padding:3px 7px;
  border-radius:3px;
}

.action-button--continue {
  background:linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
  color:#041421;
  border:1px solid #7dd3fc;
  box-shadow:0 4px 20px rgba(2, 132, 199, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.action-meta {
  font:700 8px var(--mono);
  background:rgba(4, 20, 33, 0.25);
  padding:2px 6px;
  border-radius:2px;
  letter-spacing:1px;
}

.action-button--ghost {
  background:linear-gradient(135deg, rgba(12, 27, 41, 0.88) 0%, rgba(7, 18, 28, 0.92) 100%);
  border:1px solid rgba(189, 213, 229, 0.22);
  color:#e2e8f0;
  backdrop-filter:blur(10px);
  box-shadow:0 4px 18px rgba(0, 0, 0, 0.35);
}

.action-button--ghost .action-bar-indicator {
  background:var(--ice);
}

.action-button--ghost:hover {
  background:linear-gradient(135deg, rgba(22, 46, 69, 0.95) 0%, rgba(14, 32, 49, 0.98) 100%);
  border-color:rgba(0, 210, 255, 0.6);
  color:#fff;
  transform:translateX(6px) scale(1.01);
  box-shadow:0 0 24px rgba(0, 210, 255, 0.25), 0 6px 20px rgba(0, 0, 0, 0.5);
}

.action-button--ghost:hover .action-bar-indicator {
  background:#00d2ff;
  opacity:1;
  height:32px;
  box-shadow:0 0 10px #00d2ff;
}

.action-button--ghost kbd {
  background:rgba(255, 255, 255, 0.08);
  border-color:rgba(255, 255, 255, 0.15);
  color:#94a3b8;
  font:700 9px var(--mono);
  padding:3px 7px;
  border-radius:3px;
}

.title-footnote {
  font:700 7.5px var(--mono);
  letter-spacing:1.8px;
  color:#607b8f;
  margin-top:6px;
}

/* Staging Cinematográfico do Herói */
.hero-art {
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
}

.hero-radar-grid {
  position:absolute;
  right:9%;
  top:18%;
  width:36cqw;
  height:36cqw;
  border-radius:50%;
  border:1px dashed rgba(0, 210, 255, 0.12);
  background:radial-gradient(circle, rgba(0, 210, 255, 0.03) 0%, transparent 70%);
}

.hero-art img {
  position:absolute;
  height:88%;
  width:auto;
  right:1%;
  bottom:3%;
  filter:drop-shadow(0 20px 40px rgba(3, 11, 20, 0.95));
  z-index:2;
  transition:opacity .32s ease, transform .32s cubic-bezier(.16,1,.3,1), filter .32s ease;
}

.hero-art img.is-switching {
  opacity:0.1;
  transform:scale(0.96) translateX(12px);
  filter:drop-shadow(0 0 45px rgba(0, 210, 255, 0.8)) brightness(1.6) blur(6px);
}

/* Destaque Moderno ao Lado do Personagem: Balão Tático / Citação Holográfica */
.hero-dialogue-badge {
  position:absolute;
  right:36cqw;
  top:29%;
  width:clamp(240px, 22cqw, 330px);
  z-index:5;
  pointer-events:none;
  padding:14px 18px 16px 18px;
  background:linear-gradient(135deg, rgba(8, 20, 32, 0.94) 0%, rgba(5, 13, 21, 0.97) 100%);
  border:1.5px solid rgba(255, 191, 0, 0.45);
  border-left:3.5px solid var(--gold);
  border-radius:4px;
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 12px 35px rgba(0, 0, 0, 0.75), 0 0 28px rgba(255, 191, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  display:flex;
  flex-direction:column;
  gap:8px;
  transition:border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}

.hero-dialogue-badge.is-entering {
  animation:dialogueGlitchIn .42s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes dialogueGlitchIn {
  0% {
    opacity:0;
    transform:translateX(-16px) scale(0.94);
    filter:brightness(2) blur(4px);
  }
  60% {
    opacity:1;
    transform:translateX(2px) scale(1.015);
    filter:brightness(1.2) blur(0);
  }
  100% {
    opacity:1;
    transform:translateX(0) scale(1);
    filter:none;
  }
}

.hero-dialogue-topline {
  display:flex;
  align-items:center;
  gap:9px;
  font:700 8.5px var(--mono);
  letter-spacing:1.5px;
  color:#8da4b5;
  text-transform:uppercase;
}

.hero-dialogue-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 10px var(--gold);
  animation:beaconPulse 1.8s infinite ease-in-out;
  flex-shrink:0;
}

.hero-dialogue-channel {
  flex:1;
  font-size:8px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.hero-dialogue-soundwave {
  display:inline-flex;
  align-items:center;
  gap:2.5px;
  height:12px;
  flex-shrink:0;
}

.hero-dialogue-soundwave i {
  display:block;
  width:2.5px;
  height:4px;
  background:var(--gold);
  border-radius:1px;
  animation:soundWave 1.2s ease-in-out infinite;
}

.hero-dialogue-soundwave i:nth-child(2) { animation-delay:.15s; }
.hero-dialogue-soundwave i:nth-child(3) { animation-delay:.3s; }
.hero-dialogue-soundwave i:nth-child(4) { animation-delay:.45s; }
.hero-dialogue-soundwave i:nth-child(5) { animation-delay:.2s; }

@keyframes soundWave {
  0%, 100% { height:3px; opacity:0.35; }
  50% { height:12px; opacity:1; }
}

.hero-dialogue-speaker {
  font:800 10px var(--mono);
  letter-spacing:2px;
  color:var(--gold);
  text-shadow:0 0 12px rgba(255, 191, 0, 0.4);
}

.hero-dialogue-content {
  position:relative;
  padding-left:14px;
}

.hero-dialogue-quote-mark {
  position:absolute;
  left:-4px;
  top:-6px;
  font-family:Georgia, serif;
  font-size:28px;
  line-height:1;
  color:rgba(255, 191, 0, 0.45);
  user-select:none;
}

.hero-dialogue-text {
  font-family:var(--sans);
  font-size:clamp(14px, 1.25cqw, 18px);
  font-weight:800;
  line-height:1.35;
  color:#ffffff;
  letter-spacing:0.02em;
  text-shadow:0 2px 12px rgba(0, 0, 0, 0.9), 0 0 20px rgba(255, 191, 0, 0.25);
}

.hero-dialogue-tail {
  position:absolute;
  right:-8px;
  top:48%;
  width:0;
  height:0;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  border-left:8px solid var(--gold);
  filter:drop-shadow(2px 0 6px rgba(255, 191, 0, 0.5));
}

/* Variante Denny Torres (Ciano Holográfico) */
.hero-dialogue-badge[data-character="denny"] {
  border-color:rgba(0, 210, 255, 0.5);
  border-left-color:#00d2ff;
  box-shadow:0 12px 35px rgba(0, 0, 0, 0.75), 0 0 28px rgba(0, 210, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.hero-dialogue-badge[data-character="denny"] .hero-dialogue-dot {
  background:#00d2ff;
  box-shadow:0 0 10px #00d2ff;
}

.hero-dialogue-badge[data-character="denny"] .hero-dialogue-soundwave i {
  background:#00d2ff;
}

.hero-dialogue-badge[data-character="denny"] .hero-dialogue-speaker {
  color:#00d2ff;
  text-shadow:0 0 12px rgba(0, 210, 255, 0.45);
}

.hero-dialogue-badge[data-character="denny"] .hero-dialogue-quote-mark {
  color:rgba(0, 210, 255, 0.45);
}

.hero-dialogue-badge[data-character="denny"] .hero-dialogue-text {
  text-shadow:0 2px 12px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 210, 255, 0.35);
}

.hero-dialogue-badge[data-character="denny"] .hero-dialogue-tail {
  border-left-color:#00d2ff;
  filter:drop-shadow(2px 0 6px rgba(0, 210, 255, 0.5));
}

/* Indicador de Poses no Staging do Herói */
.hero-pose-indicator {
  position:absolute;
  right:9%;
  bottom:14.5%;
  display:flex;
  align-items:center;
  gap:10px;
  font:700 8.5px var(--mono);
  letter-spacing:1.5px;
  padding:4px 12px;
  background:rgba(6, 17, 27, 0.82);
  border:1px solid rgba(189, 213, 229, 0.22);
  border-radius:4px;
  backdrop-filter:blur(8px);
  z-index:3;
  color:#8fa6b8;
}

.hero-pose-dots {
  display:flex;
  align-items:center;
  gap:5px;
}

.hero-pose-dots i {
  display:block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255, 255, 255, 0.2);
  transition:all .3s ease;
}

.hero-pose-dots i.is-active {
  background:var(--gold);
  box-shadow:0 0 8px var(--gold);
  transform:scale(1.3);
}

.hero-dialogue-badge[data-character="denny"] ~ .hero-pose-indicator .hero-pose-dots i.is-active,
#app[data-character="denny"] .hero-pose-dots i.is-active {
  background:#00d2ff;
  box-shadow:0 0 8px #00d2ff;
}

.hero-pose-indicator strong {
  color:#ffffff;
  font-weight:800;
}

/* Dinâmica de Tema Geral do Herói (Denny vs RafaTech) */
#app[data-character="denny"] .hero-radar-grid {
  border-color:rgba(0, 210, 255, 0.22);
  background:radial-gradient(circle, rgba(0, 210, 255, 0.05) 0%, transparent 70%);
}

#app[data-character="denny"] .hero-orbit {
  border-color:rgba(0, 210, 255, 0.35);
  box-shadow:0 0 100px rgba(0, 210, 255, 0.14), inset 0 0 80px rgba(0, 210, 255, 0.06);
}

#app[data-character="denny"] .hero-orbit:before,
#app[data-character="denny"] .hero-orbit:after {
  background:#00d2ff;
  box-shadow:0 0 14px #00d2ff;
}

#app[data-character="denny"] .hero-number {
  color:rgba(0, 210, 255, 0.04);
  -webkit-text-stroke:1.5px rgba(0, 210, 255, 0.2);
}

#app[data-character="denny"] .hero-id {
  color:#00d2ff;
}

#app[data-character="denny"] .hero-caption {
  border-color:rgba(0, 210, 255, 0.35);
}

#app[data-character="denny"] .hero-caption .status-dot {
  background:#00d2ff;
  box-shadow:0 0 10px #00d2ff;
}

.character-option[data-character="denny"].is-selected {
  color:#d8f8ff;
  border-color:rgba(0, 210, 255, 0.78);
  background:linear-gradient(135deg, rgba(12, 42, 58, 0.96), rgba(7, 21, 33, 0.98));
  box-shadow:inset 3px 0 0 #00d2ff, 0 0 20px rgba(0, 210, 255, 0.18);
}

.character-option[data-character="denny"].is-selected .character-copy small {
  color:#00d2ff;
}

.character-option[data-character="denny"].is-selected .character-check {
  background:#00d2ff;
  color:#041421;
}

.hero-number {
  position:absolute;
  right:5%;
  top:12%;
  font:900 32cqw var(--sans);
  line-height:1;
  color:rgba(255, 191, 0, 0.04);
  -webkit-text-stroke:1.5px rgba(255, 191, 0, 0.16);
  letter-spacing:-.08em;
  z-index:0;
}

.hero-orbit {
  position:absolute;
  right:11%;
  top:20%;
  width:32cqw;
  height:32cqw;
  border:1px solid rgba(255, 191, 0, 0.2);
  border-radius:50%;
  box-shadow:0 0 100px rgba(255, 191, 0, 0.08), inset 0 0 80px rgba(255, 191, 0, 0.04);
  animation:orbitRotate 40s linear infinite;
  z-index:1;
}

.hero-orbit-outer {
  position:absolute;
  right:7%;
  top:14%;
  width:40cqw;
  height:40cqw;
  border:1px dashed rgba(0, 210, 255, 0.15);
  border-radius:50%;
  animation:orbitRotateRev 60s linear infinite;
  z-index:0;
}

@keyframes orbitRotate {
  from { transform:rotate(0deg); }
  to { transform:rotate(360deg); }
}

@keyframes orbitRotateRev {
  from { transform:rotate(0deg); }
  to { transform:rotate(-360deg); }
}

.hero-orbit:before, .hero-orbit:after {
  content:'';
  position:absolute;
  width:6px;
  height:6px;
  background:var(--gold);
  border-radius:50%;
  top:50%;
  left:-3px;
  box-shadow:0 0 14px var(--gold);
}

.hero-orbit:after {
  left:auto;
  right:-3px;
}

.hero-caption {
  position:absolute;
  right:9%;
  bottom:10%;
  display:flex;
  align-items:center;
  gap:10px;
  font:700 9.5px var(--mono);
  letter-spacing:1.5px;
  padding:6px 14px;
  background:rgba(6, 17, 27, 0.85);
  border:1px solid rgba(255, 191, 0, 0.25);
  border-radius:4px;
  backdrop-filter:blur(8px);
  z-index:3;
}

.hero-id {
  color:var(--gold);
}

.hero-role {
  font-size:8px;
  color:#94a3b8;
  border-left:1px solid rgba(189, 213, 229, 0.2);
  padding-left:10px;
}

.hero-coords {
  position:absolute;
  right:9%;
  bottom:6.5%;
  font:600 7.5px var(--mono);
  letter-spacing:1.5px;
  color:rgba(148, 163, 184, 0.6);
  z-index:3;
}

.status-dot {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 10px var(--gold);
  flex-shrink:0;
}

/* Datapad Tático de Briefing */
.operation-brief {
  position:relative;
  z-index:2;
  width:46cqw;
  margin-top:0.4cqw;
  padding:5px 14px;
  background:
    radial-gradient(circle 2.5px at 8px 8px, #f8fafc 0%, #94a3b8 40%, #1e293b 80%, transparent 100%),
    radial-gradient(circle 2.5px at calc(100% - 8px) 8px, #f8fafc 0%, #94a3b8 40%, #1e293b 80%, transparent 100%),
    radial-gradient(circle 2.5px at 8px calc(100% - 8px), #f8fafc 0%, #94a3b8 40%, #1e293b 80%, transparent 100%),
    radial-gradient(circle 2.5px at calc(100% - 8px) calc(100% - 8px), #f8fafc 0%, #94a3b8 40%, #1e293b 80%, transparent 100%),
    linear-gradient(180deg, rgba(16, 28, 40, 0.92) 0%, rgba(8, 16, 24, 0.95) 100%);
  border:1.5px solid rgba(189, 213, 229, 0.22);
  border-top:2px solid var(--gold);
  border-radius:6px;
  backdrop-filter:blur(12px);
  box-shadow:0 8px 30px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(0, 0, 0, 0.4);
}

.brief-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:4px;
  border-bottom:1px solid rgba(189, 213, 229, 0.12);
}

.brief-kicker-box {
  display:flex;
  align-items:center;
  gap:8px;
}

.brief-tag {
  font:700 7.5px var(--mono);
  background:rgba(0, 210, 255, 0.15);
  color:#38bdf8;
  padding:2px 5px;
  border-radius:2px;
  letter-spacing:1px;
}

.brief-title {
  font:700 8.5px var(--mono);
  color:#94a3b8;
  letter-spacing:.12em;
}

.panel-kicker {
  font:700 9px var(--mono);
  letter-spacing:1.5px;
  color:#cbd5e1;
}

.brief-steps {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  margin-top:5px;
}

.brief-step {
  display:flex;
  align-items:center;
  gap:8px;
}

.step-num {
  font:300 17px var(--mono);
  color:var(--gold);
  line-height:1;
  text-shadow:0 0 10px rgba(255, 191, 0, 0.3);
}

.step-body {
  display:flex;
  flex-direction:column;
  gap:2px;
}

.step-task {
  font-size:9.5px;
  color:#e2e8f0;
}

.step-task strong {
  color:#fff;
}

.step-desc {
  font:500 7.5px var(--sans);
  color:#708b9e;
}

/* Rodapé do Menu Principal */
.menu-footer {
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid rgba(189, 213, 229, 0.15);
  padding-top:0.6cqw;
  margin-top:auto;
  font:700 8px var(--mono);
  letter-spacing:1.4px;
  color:#8da4b5;
}

.footer-status {
  display:flex;
  align-items:center;
  gap:8px;
}

.footer-record {
  display:flex;
  align-items:center;
  gap:10px;
  padding:4px 12px;
  background:rgba(9, 22, 34, 0.7);
  border:1px solid rgba(255, 191, 0, 0.2);
  border-radius:4px;
}

.record-label {
  color:#8da4b5;
}

.record-val-box {
  display:flex;
  align-items:baseline;
  gap:4px;
}

.record-val-box strong {
  font:800 13px var(--mono);
  color:var(--gold);
  text-shadow:0 0 8px rgba(255, 191, 0, 0.35);
}

.record-val-box small {
  font-size:8px;
  color:#728b9e;
}

.keyboard-note {
  display:flex;
  align-items:center;
  gap:6px;
  color:#708b9e;
}

.key-icon {
  font-size:11px;
}

/* =======================================================
   FRASE DE PODER DO AGENTE (selecao) e AGENTE NA PAUSA
   ======================================================= */
.character-phrase {
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:10px;
  padding:9px 13px 9px 11px;
  color:#cfe6ef;
  font:600 12.5px var(--sans);
  line-height:1.35;
  font-style:italic;
  background:linear-gradient(100deg, rgba(0, 210, 255, 0.10) 0%, rgba(8, 20, 30, 0.55) 55%, rgba(8, 20, 30, 0) 100%);
  border-left:2px solid var(--gold);
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  overflow:hidden;
}

/* Varredura de dados entrando por tras do texto ao trocar de agente. */
.character-phrase::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(100deg, transparent 0%, rgba(0, 210, 255, 0.35) 45%, rgba(255, 191, 0, 0.3) 55%, transparent 100%);
  transform:translateX(-110%);
  opacity:0;
}

.character-phrase-mark {
  font:900 20px var(--mono);
  color:var(--gold);
  line-height:.85;
  flex:0 0 auto;
  text-shadow:0 0 10px rgba(255, 191, 0, 0.55);
}

.character-phrase.is-entering #character-phrase-text {
  animation:phraseIn .42s cubic-bezier(.16, 1, .3, 1) both;
}

.character-phrase.is-entering::after {
  animation:phraseSweep .62s cubic-bezier(.4, 0, .2, 1) both;
}

@keyframes phraseIn {
  from { opacity:0; transform:translateX(-10px); filter:blur(3px); }
  to   { opacity:1; transform:translateX(0); filter:blur(0); }
}

@keyframes phraseSweep {
  0%   { transform:translateX(-110%); opacity:0; }
  35%  { opacity:1; }
  100% { transform:translateX(110%); opacity:0; }
}

/* Quem pausou: o agente selecionado na pose agachada. */
.pause-agent {
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:1.6cqw;
}

.pause-agent-image {
  width:clamp(64px, 7cqw, 104px);
  height:auto;
  object-fit:contain;
  object-position:bottom;
  filter:drop-shadow(0 8px 18px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 14px rgba(0, 210, 255, 0.22));
}

.pause-agent-copy {
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
}

.pause-agent-copy .panel-kicker {
  font:900 11px var(--mono);
  color:var(--gold);
  letter-spacing:.2em;
  text-shadow:0 0 8px rgba(255, 191, 0, 0.45);
}

#pause-agent-phrase {
  font:600 italic 12.5px var(--sans);
  color:#9fc4d6;
  line-height:1.35;
}

@media (prefers-reduced-motion:reduce) {
  .character-phrase.is-entering #character-phrase-text,
  .character-phrase.is-entering::after {
    animation:none;
  }
}

/* =======================================================
   HUD TÁTICO AAA — SISTEMA ÚNICO, PROPORCIONAL E ALINHADO
   -------------------------------------------------------
   1. Uma única linha de base (--hud-row) define a altura de
      TODOS os módulos do topo, garantindo alinhamento perfeito.
   2. Cada moldura respeita o aspect-ratio nativo do PNG,
      eliminando rebites esticados/achatados.
   3. O conteúdo respeita a "área segura" interna do bisel
      metálico (padding derivado de --hud-row), acabando com
      texto e ícones colados na borda.
   4. Tudo escala com o contêiner (cqw + clamp): sem
      breakpoints duplicados e sem regras conflitantes.
   ======================================================= */

.game-hud {
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:clamp(10px, 1.6cqw, 30px);
  padding:clamp(8px, 1.15cqw, 20px) clamp(10px, 1.4cqw, 26px);
  box-sizing:border-box;

  /* Escala mestre */
  --hud-row:clamp(34px, 3.6cqw, 54px);
  --hud-gap:clamp(4px, 0.5cqw, 9px);
  --hud-shadow:drop-shadow(0 3px 10px rgba(0, 0, 0, 0.72));

  /* Tipografia proporcional ao próprio módulo */
  --fs-micro:max(5.5px, calc(var(--hud-row) * 0.135));
  --fs-kicker:max(6.5px, calc(var(--hud-row) * 0.165));
  --fs-value:max(7.5px, calc(var(--hud-row) * 0.195));
  --fs-big:max(11px, calc(var(--hud-row) * 0.30));

  /* Área segura das molduras (bisel do PNG + respiro) */
  --safe-y:calc(var(--hud-row) * 0.19);
  --safe-x:calc(var(--hud-row) * 0.40);
}

/* =======================================================
   CLUSTER VITAIS (topo-esquerda): VIDA / ESCUDO / MUNIÇÃO
   ======================================================= */
.vitals-cluster {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:var(--hud-gap);
  pointer-events:auto;
  position:relative;
  width:calc(var(--hud-row) * 3.77);
  flex:0 0 auto;
  z-index:2;
}

.vital-card {
  position:relative;
  width:100%;
  height:var(--hud-row);
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-position:center;
  filter:var(--hud-shadow);
  display:flex;
  align-items:center;
  box-sizing:border-box;
  padding:var(--safe-y) var(--safe-x);
  flex:0 0 auto;
}

/* Contrato das barras: o fill é um bloco real com width inline via JS */
.meter-track {
  display:block;
  position:relative;
  width:100%;
  box-sizing:border-box;
  overflow:hidden;
}

.meter-fill {
  display:block;
  height:100%;
  width:100%;
  box-sizing:border-box;
  transition:width 0.18s ease;
}

.meter-scale-ticks {
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:stretch;
  justify-content:space-evenly;
  pointer-events:none;
}

/* O medidor acessível (sr-only) nunca deve ocupar espaço no card */
.meter-track.sr-only {
  position:absolute;
}

.meter-scale-ticks i {
  width:1px;
  background:rgba(255, 255, 255, 0.2);
}

/* 1. VIDA ------------------------------------------------ */
.vital-row--life {
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
}

.vital-card--life {
  background-image:url('../assets/ui/hud-vitals-life-frame.png');
  flex-direction:column;
  justify-content:center;
  gap:calc(var(--hud-row) * 0.05);
}

.vital-card--life .vital-card-top {
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:6px;
  line-height:1;
}

.run-lives-counter {
  position:absolute;
  left:calc(100% + var(--hud-gap) + 2px);
  top:50%;
  transform:translateY(-50%);
  display:flex;
  align-items:baseline;
  gap:calc(var(--hud-row) * 0.08);
  padding:calc(var(--hud-row) * 0.08) calc(var(--hud-row) * 0.18);
  border:1px solid rgba(255, 191, 0, 0.45);
  border-radius:4px;
  background:rgba(5, 12, 19, 0.88);
  backdrop-filter:blur(4px);
  box-shadow:0 3px 10px rgba(0, 0, 0, 0.7), 0 0 10px rgba(255, 191, 0, 0.25);
  color:#ffd76a;
  font:800 var(--fs-micro) var(--mono);
  letter-spacing:.08em;
  line-height:1;
  white-space:nowrap;
  pointer-events:none;
  z-index:5;
}

.run-lives-counter strong {
  color:#fff4c2;
  font:900 var(--fs-value) var(--mono);
  font-variant-numeric:tabular-nums;
}

.run-lives-counter[data-empty="true"] {
  border-color:rgba(255, 133, 109, 0.7);
  color:var(--danger);
  box-shadow:0 0 8px rgba(255, 133, 109, 0.24);
}

.vital-card-kicker {
  font:900 var(--fs-kicker) var(--mono);
  color:#f87171;
  letter-spacing:.12em;
  text-shadow:0 0 6px rgba(239, 68, 68, 0.55), 0 1px 2px rgba(0, 0, 0, 0.9);
  white-space:nowrap;
  min-width:0;
}

.vital-card--life strong {
  font:800 var(--fs-value) var(--mono);
  color:#ffffff;
  text-shadow:0 1px 3px rgba(0, 0, 0, 0.95);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  line-height:1;
}

.hud-hearts-container {
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:calc(var(--hud-row) * 0.06);
}

.hud-heart-img {
  height:calc(var(--hud-row) * 0.37);
  width:auto;
  flex:0 0 auto;
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
  transition:transform 0.16s ease, filter 0.16s ease;
}

.hud-heart-img:hover {
  transform:scale(1.1);
}

/* 2. ESCUDO / 3. MUNIÇÃO --------------------------------- */
.vital-card--shield {
  background-image:url('../assets/ui/hud-vitals-shield-frame.png');
}

.vital-card--ammo {
  background-image:url('../assets/ui/hud-vitals-ammo-frame.png');
}

.vital-card-badge {
  width:calc(var(--hud-row) * 0.5);
  height:100%;
  display:grid;
  place-items:center;
  flex:0 0 auto;
}

.vital-badge-icon {
  height:calc(var(--hud-row) * 0.52);
  width:auto;
  max-width:100%;
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 0 7px rgba(0, 210, 255, 0.65));
}

.vital-badge-icon--bullet {
  height:calc(var(--hud-row) * 0.52);
  width:auto;
  display:block;
  filter:drop-shadow(0 0 7px rgba(255, 191, 0, 0.6));
}

.vital-card-content {
  flex:1 1 auto;
  min-width:0;
  height:100%;
  padding-left:calc(var(--hud-row) * 0.15);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:calc(var(--hud-row) * 0.05);
}

.vital-card-content .vital-card-top {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:6px;
  line-height:1;
}

.vital-card--shield .vital-card-kicker {
  color:#38bdf8;
  text-shadow:0 0 6px rgba(56, 189, 248, 0.5), 0 1px 2px rgba(0, 0, 0, 0.9);
}

.vital-card--ammo .vital-card-kicker {
  color:#fbbf24;
  text-shadow:0 0 6px rgba(251, 191, 36, 0.5), 0 1px 2px rgba(0, 0, 0, 0.9);
}

.vital-card-top > span:first-child {
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.vital-card-content strong {
  font:800 var(--fs-value) var(--mono);
  color:#f8fafc;
  font-variant-numeric:tabular-nums;
  text-shadow:0 1px 3px rgba(0, 0, 0, 0.95);
  white-space:nowrap;
  flex:0 0 auto;
  line-height:1;
}

.meter-track--shield,
.meter-track--ammo {
  height:calc(var(--hud-row) * 0.125);
  border-radius:999px;
  box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.9);
}

.meter-track--shield {
  background:rgba(4, 12, 20, 0.95);
  border:1px solid rgba(0, 210, 255, 0.4);
}

.meter-track--ammo {
  background:rgba(18, 12, 4, 0.95);
  border:1px solid rgba(255, 191, 0, 0.4);
}

.meter-fill--cyan {
  background:linear-gradient(90deg, #0284c7 0%, #00d2ff 65%, #cffafe 100%);
  box-shadow:0 0 8px rgba(0, 210, 255, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border-radius:999px;
}

.meter-fill--amber {
  background:linear-gradient(90deg, #d97706 0%, #ffbf00 65%, #fef08a 100%);
  box-shadow:0 0 8px rgba(255, 191, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border-radius:999px;
}

.vital-card-sub {
  display:flex;
  align-items:center;
  gap:calc(var(--hud-row) * 0.08);
  font:800 var(--fs-micro) var(--mono);
  color:#7dd3fc;
  text-transform:uppercase;
  letter-spacing:.08em;
  line-height:1;
  white-space:nowrap;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}

.vital-card-sub .state-dot {
  width:calc(var(--hud-row) * 0.075);
  height:calc(var(--hud-row) * 0.075);
  border-radius:50%;
  background:#00d2ff;
  box-shadow:0 0 6px #00d2ff;
  flex:0 0 auto;
}

.vital-card-sub > span:last-child {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}

.vital-card-sub--ammo {
  color:#fcd34d;
}

.vital-card-sub--ammo .state-dot {
  background:#ffbf00;
  box-shadow:0 0 6px #ffbf00;
}

.vital-card[data-state="offline"] .vital-card-sub,
.vital-card[data-state="critical"] .vital-card-sub {
  color:#fda4af;
}

.vital-card[data-state="offline"] .state-dot,
.vital-card[data-state="critical"] .state-dot {
  background:#fb7185;
  box-shadow:0 0 6px #fb7185;
}

/* MUNIÇÃO EM RECARGA */
.vital-card--ammo[data-state="reloading"],
.vital-card--ammo[data-reloading="true"],
.vital-card--ammo.is-reloading {
  animation:ammoReloadPulse 0.9s ease-in-out infinite;
}

.vital-card--ammo[data-state="reloading"] .vital-card-kicker,
.vital-card--ammo[data-reloading="true"] .vital-card-kicker,
.vital-card--ammo.is-reloading .vital-card-kicker,
.vital-card--ammo[data-state="reloading"] #ammo-value,
.vital-card--ammo[data-reloading="true"] #ammo-value,
.vital-card--ammo.is-reloading #ammo-value {
  color:#fca5a5;
  text-shadow:0 0 8px rgba(248, 113, 113, 0.5);
}

.vital-card--ammo[data-state="reloading"] .vital-card-sub,
.vital-card--ammo[data-reloading="true"] .vital-card-sub,
.vital-card--ammo.is-reloading .vital-card-sub {
  color:#fca5a5 !important;
}

.vital-card--ammo[data-state="reloading"] .state-dot,
.vital-card--ammo[data-reloading="true"] .state-dot,
.vital-card--ammo.is-reloading .state-dot {
  background:#f87171 !important;
  box-shadow:0 0 8px #f87171 !important;
}

.vital-card--ammo[data-state="reloading"] .meter-track,
.vital-card--ammo[data-reloading="true"] .meter-track,
.vital-card--ammo.is-reloading .meter-track {
  border-color:rgba(248, 113, 113, 0.7);
}

.vital-card--ammo[data-state="reloading"] .meter-fill,
.vital-card--ammo[data-reloading="true"] .meter-fill,
.vital-card--ammo.is-reloading .meter-fill {
  background:linear-gradient(90deg, #f87171 0%, #fca5a5 65%, #fecaca 100%) !important;
  box-shadow:0 0 10px rgba(248, 113, 113, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

.vital-card--ammo[data-state="reloading"] .vital-badge-icon--bullet,
.vital-card--ammo[data-reloading="true"] .vital-badge-icon--bullet,
.vital-card--ammo.is-reloading .vital-badge-icon--bullet {
  filter:drop-shadow(0 0 8px rgba(248, 113, 113, 0.75)) hue-rotate(300deg);
}

@keyframes ammoReloadPulse {
  0%, 100% {
    filter:var(--hud-shadow);
  }
  50% {
    filter:var(--hud-shadow) drop-shadow(0 0 10px rgba(248, 113, 113, 0.6));
  }
}

/* 4. IMPULSO / BOOST (faixa tática sob o cluster) --------- */
.vital-card--boost {
  position:absolute;
  top:calc(100% + var(--hud-gap));
  left:0;
  width:100%;
  height:calc(var(--hud-row) * 0.64);
  background-image:none;
  background:linear-gradient(135deg, rgba(16, 24, 38, 0.96) 0%, rgba(26, 12, 34, 0.96) 100%);
  padding:calc(var(--hud-row) * 0.1) calc(var(--hud-row) * 0.2);
  animation:boostEnter 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  border:1px solid rgba(168, 85, 247, 0.55);
  border-radius:4px;
  box-shadow:0 4px 14px rgba(0, 0, 0, 0.7), 0 0 10px rgba(168, 85, 247, 0.28);
  z-index:10;
  display:flex;
  align-items:center;
}

.vital-card--boost[data-boost="damage"] {
  background:linear-gradient(135deg, rgba(32, 10, 14, 0.96) 0%, rgba(20, 14, 24, 0.96) 100%);
  border-color:rgba(239, 68, 68, 0.6);
  box-shadow:0 4px 14px rgba(0, 0, 0, 0.7), 0 0 12px rgba(239, 68, 68, 0.33);
}

.vital-card--boost .vital-card-badge {
  width:calc(var(--hud-row) * 0.34);
}

.vital-card--boost .meter-capsule-img {
  height:calc(var(--hud-row) * 0.38);
  width:auto;
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 0 6px rgba(168, 85, 247, 0.6));
}

.vital-card--boost[data-boost="damage"] .meter-capsule-img {
  filter:drop-shadow(0 0 8px rgba(239, 68, 68, 0.8)) hue-rotate(290deg);
}

.vital-card--boost .vital-card-content {
  padding-left:calc(var(--hud-row) * 0.12);
  gap:calc(var(--hud-row) * 0.04);
}

.vital-card--boost .meter-track {
  height:calc(var(--hud-row) * 0.1);
  border-radius:999px;
  background:rgba(12, 6, 20, 0.95);
  border:1px solid rgba(168, 85, 247, 0.45);
  box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.9);
}

.vital-card--boost[data-boost="damage"] .meter-track {
  border-color:rgba(239, 68, 68, 0.55);
  background:rgba(22, 6, 10, 0.95);
}

.vital-card--boost .vital-card-kicker {
  font:900 var(--fs-micro) var(--mono);
  color:#e9d5ff;
  text-shadow:0 1px 2px rgba(0, 0, 0, 0.9);
}

.vital-card--boost strong {
  font:900 var(--fs-value) var(--mono);
  color:#f3e8ff;
}

.vital-card--boost .meter-code {
  color:#c084fc;
}

.vital-card--boost[data-boost="damage"] .vital-card-kicker {
  color:#fecdd3;
}

.vital-card--boost[data-boost="damage"] strong {
  color:#ff8b8b;
}

.vital-card--boost[data-boost="damage"] .meter-code {
  color:#ef4444;
}

.meter-fill--purple {
  background:linear-gradient(90deg, #7e22ce 0%, #a855f7 65%, #f3e8ff 100%);
  box-shadow:0 0 10px rgba(168, 85, 247, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border-radius:999px;
}

.meter-fill--damage {
  background:linear-gradient(90deg, #dc2626 0%, #ef4444 65%, #fee2e2 100%);
  box-shadow:0 0 10px rgba(239, 68, 68, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border-radius:999px;
}

@keyframes boostEnter {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}

/* =======================================================
   PAINEL DE MISSÃO (centro) — moldura "sector" 400x86
   ======================================================= */
.mission-panel {
  --mission-h:calc(var(--hud-row) * 1.36);
  position:absolute;
  top:clamp(8px, 1.15cqw, 20px);
  left:50%;
  transform:translateX(-50%);
  height:var(--mission-h);
  width:calc(var(--mission-h) * 4.651);
  max-width:42cqw;
  padding:calc(var(--mission-h) * 0.19) calc(var(--mission-h) * 0.26);
  background:url('../assets/ui/frame-metal-sector.png') no-repeat center / 100% 100%;
  filter:var(--hud-shadow);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:calc(var(--mission-h) * 0.035);
  box-sizing:border-box;
  pointer-events:auto;
  z-index:3;
}

.mission-head {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:calc(var(--mission-h) * 0.12);
  width:100%;
  line-height:1;
}

.mission-head .panel-kicker {
  font:900 var(--fs-kicker) var(--mono);
  color:#94a3b8;
  letter-spacing:.18em;
  text-shadow:0 1px 3px rgba(0, 0, 0, 0.9);
  white-space:nowrap;
}

.mission-head > span:last-child {
  font:800 var(--fs-micro) var(--mono);
  color:var(--gold);
  background:rgba(255, 191, 0, 0.14);
  border:1px solid rgba(255, 191, 0, 0.45);
  padding:.2em .5em;
  border-radius:3px;
  letter-spacing:.1em;
  flex:0 0 auto;
  line-height:1;
}

.mission-panel h2 {
  font:900 max(10.5px, calc(var(--mission-h) * 0.185)) var(--sans);
  letter-spacing:.03em;
  line-height:1.12;
  margin:0;
  color:#ffffff;
  text-shadow:0 0 10px rgba(255, 255, 255, 0.25), 0 2px 4px rgba(0, 0, 0, 0.95);
  text-align:center;
  width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-transform:uppercase;
}

.mission-panel p {
  display:none;
}

.mission-progress-line {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:calc(var(--mission-h) * 0.09);
  width:100%;
  min-width:0;
}

/* Legenda do contador: "SISTEMAS ONLINE 2 / 3" le como uma frase so, com o
   numero destacado em dourado e a legenda em tom secundario. */
.mission-progress-line .mission-progress-caption {
  font:900 var(--fs-micro) var(--mono);
  color:#c99a21;
  letter-spacing:.14em;
  line-height:1;
  white-space:nowrap;
  flex:0 0 auto;
  text-shadow:0 1px 3px rgba(0, 0, 0, 0.9);
}

.mission-progress-line .meter-track {
  flex:0 1 30%;
  min-width:0;
  height:calc(var(--mission-h) * 0.095);
  border-radius:999px;
  background:rgba(8, 18, 28, 0.95);
  border:1px solid rgba(255, 191, 0, 0.35);
  box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.9);
}

.mission-progress-line .meter-fill {
  background:linear-gradient(90deg, #d97706 0%, #ffbf00 100%);
  box-shadow:0 0 6px rgba(255, 191, 0, 0.55);
  border-radius:999px;
}

.mission-progress-line > span {
  font:900 var(--fs-value) var(--mono);
  color:var(--gold);
  text-shadow:0 0 6px rgba(255, 191, 0, 0.35);
  flex:0 0 auto;
  line-height:1;
  font-variant-numeric:tabular-nums;
}

/* =======================================================
   CLUSTER DIREITO: PONTOS · MOEDAS/COMBO · BOTÕES
   ======================================================= */
.wallet-cluster {
  display:flex;
  align-items:center;
  gap:var(--hud-gap);
  pointer-events:auto;
  flex:0 0 auto;
  z-index:2;
}

/* 1. PONTOS (moldura hexagonal com asas, 308x85) */
.hud-score-card {
  width:calc(var(--hud-row) * 3.624);
  height:var(--hud-row);
  background:url('../assets/ui/hud-score-frame.png') no-repeat center / 100% 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:calc(var(--hud-row) * 0.17) calc(var(--hud-row) * 0.56);
  box-sizing:border-box;
  filter:var(--hud-shadow);
  flex:0 0 auto;
}

/* As asas amarelas já fazem parte do PNG da moldura */
.hud-score-wings {
  display:none;
}

.hud-score-center {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:calc(var(--hud-row) * 0.04);
  text-align:center;
  min-width:0;
}

.hud-score-kicker {
  font:900 var(--fs-kicker) var(--mono);
  color:#a8b7c5;
  letter-spacing:.24em;
  line-height:1;
  text-shadow:0 1px 3px rgba(0, 0, 0, 0.9);
}

.hud-score-center strong {
  font:900 var(--fs-big) var(--mono);
  color:#ffffff;
  letter-spacing:.02em;
  line-height:1;
  text-shadow:0 0 8px rgba(255, 255, 255, 0.35), 0 2px 3px rgba(0, 0, 0, 0.9);
  font-variant-numeric:tabular-nums;
}

/* 2. MOEDAS & COMBO (moldura rebitada, 323x86) */
.hud-combo-card {
  width:calc(var(--hud-row) * 3.756);
  height:var(--hud-row);
  background:url('../assets/ui/frame-metal-riveted.png') no-repeat center / 100% 100%;
  display:flex;
  align-items:center;
  gap:calc(var(--hud-row) * 0.12);
  padding:var(--safe-y) var(--safe-x);
  box-sizing:border-box;
  filter:var(--hud-shadow);
  flex:0 0 auto;
  line-height:1;
}

.hud-combo-section--coins {
  display:flex;
  align-items:center;
  gap:calc(var(--hud-row) * 0.12);
  flex:1 1 auto;
  min-width:0;
  height:100%;
}

.hud-combo-section--coins .coin-total {
  display:flex;
  align-items:center;
  gap:calc(var(--hud-row) * 0.12);
  min-width:0;
}

.hud-combo-section--coins .coin-total > div {
  display:flex;
  align-items:center;
  line-height:1;
  min-width:0;
}

.hud-combo-section--coins .hud-coin-badge {
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:auto;
  height:calc(var(--hud-row) * 0.42);
}

.hud-combo-section--coins .hud-coin-badge img {
  height:calc(var(--hud-row) * 0.42);
  width:auto;
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 0 6px rgba(255, 191, 0, 0.55));
}

.hud-combo-section--coins #coin-total {
  font:900 var(--fs-big) var(--mono);
  color:#f8fafc;
  font-variant-numeric:tabular-nums;
  line-height:1;
  text-shadow:0 0 6px rgba(255, 191, 0, 0.35), 0 2px 3px rgba(0, 0, 0, 0.9);
}

.hud-combo-divider {
  width:1.5px;
  height:calc(var(--hud-row) * 0.46);
  background:linear-gradient(180deg, rgba(255, 191, 0, 0) 0%, rgba(255, 191, 0, 0.55) 50%, rgba(255, 191, 0, 0) 100%);
  transform:skewX(-12deg);
  flex:0 0 auto;
}

.hud-combo-section--mult {
  display:flex;
  align-items:center;
  gap:calc(var(--hud-row) * 0.1);
  flex:0 0 auto;
  padding:calc(var(--hud-row) * 0.09) calc(var(--hud-row) * 0.16);
  border:1px solid rgba(255, 191, 0, 0.5);
  border-radius:4px;
  background:rgba(255, 191, 0, 0.08);
  box-shadow:inset 0 0 8px rgba(255, 191, 0, 0.12);
}

.hud-combo-kicker {
  font:900 var(--fs-kicker) var(--mono);
  color:var(--gold);
  letter-spacing:.14em;
  line-height:1;
  text-shadow:0 0 6px rgba(255, 191, 0, 0.5);
}

.hud-combo-multiplier {
  font:900 var(--fs-value) var(--mono);
  color:var(--gold);
  text-shadow:0 0 8px rgba(255, 191, 0, 0.65);
  line-height:1;
}

/* 3. BOTÕES METÁLICOS DE AÇÃO RÁPIDA */
.hud-buttons-cluster {
  display:flex;
  align-items:center;
  gap:var(--hud-gap);
  height:var(--hud-row);
  flex:0 0 auto;
}

.hud-action-btn {
  height:calc(var(--hud-row) * 0.88);
  width:calc(var(--hud-row) * 0.88 * 0.944);
  background:transparent;
  border:none;
  padding:0;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:transform 0.16s ease, filter 0.16s ease;
  filter:drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6));
  box-sizing:border-box;
}

.hud-btn-sprite {
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
}

.hud-action-btn:hover {
  transform:scale(1.08);
  filter:brightness(1.2) drop-shadow(0 0 10px rgba(255, 191, 0, 0.6));
}

.hud-action-btn:active {
  transform:scale(0.95);
  filter:brightness(0.9);
}

.hud-action-btn:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:2px;
  border-radius:6px;
}

.hud-action-btn.hud-music {
  position:relative;
}

.hud-action-btn.hud-music.is-muted {
  filter:drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6)) grayscale(0.5) brightness(0.9);
}

.hud-action-btn.hud-music.is-muted::after {
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:64%;
  height:2.5px;
  background:#ef4444;
  box-shadow:0 0 6px rgba(239, 68, 68, 0.85);
  transform:translate(-50%, -50%) rotate(-45deg);
  border-radius:2px;
  pointer-events:none;
}

/* =======================================================
   TIRA DE MOEDAS (barra inferior) — detalhamento por cripto
   ======================================================= */
.bottom-hud .hud-coin-chips {
  display:flex;
  align-items:center;
  gap:6px;
  margin-right:auto;
  pointer-events:none;
}

.hud-coin-chip {
  display:inline-flex;
  align-items:center;
  gap:4px;
  font:800 clamp(7px, 0.6cqw, 10px) var(--mono);
  color:#cbd5e1;
  background:linear-gradient(180deg, rgba(20, 32, 46, 0.9) 0%, rgba(8, 16, 24, 0.94) 100%);
  padding:3px 7px;
  border-radius:4px;
  border:1px solid rgba(255, 255, 255, 0.09);
  box-shadow:0 2px 6px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  line-height:1;
}

.hud-coin-chip img {
  width:clamp(11px, 0.95cqw, 16px);
  height:clamp(11px, 0.95cqw, 16px);
  object-fit:contain;
}

.hud-coin-chip b {
  font-weight:800;
  font-variant-numeric:tabular-nums;
  color:#e2e8f0;
}

/* =======================================================
   ADAPTAÇÃO FLUIDA: reduz a linha de base antes que os
   clusters se aproximem do painel central.
   ======================================================= */
@container (max-width:1000px) {
  .game-hud {
    --hud-row:clamp(26px, 3.6cqw, 40px);
  }

  .vital-card-sub {
    display:none;
  }

  /* Os pisos mínimos de fonte exigem mais altura útil no painel central */
  .mission-panel {
    --mission-h:calc(var(--hud-row) * 1.5);
  }

  /* Mantém só o multiplicador no selo dourado */
  .hud-combo-kicker {
    display:none;
  }

  .hud-heart-img {
    height:calc(var(--hud-row) * 0.33);
  }
}

@container (max-width:880px) {
  .mission-head {
    display:none;
  }
}

@container (max-width:760px) {
  .mission-panel,
  .bottom-hud .hud-coin-chips,
  .hud-score-kicker {
    display:none;
  }

  /* Só corações no card de vida, como na arte de referência */
  .vital-card--life .vital-card-top {
    display:none;
  }

  .hud-heart-img {
    height:calc(var(--hud-row) * 0.52);
  }
}

.bottom-hud {
  position:absolute;
  left:1.8cqw;
  right:1.8cqw;
  bottom:1.3cqw;
  z-index:3;
  display:flex;
  align-items:center;
  gap:20px;
  pointer-events:none;
  color:#d0dce4;
  font-size:9px;
  text-shadow:0 1px 3px #000;
}

.sector-readout {
  display:flex;
  align-items:center;
  gap:12px;
  font:900 8.5px var(--mono);
  padding:3px 14px;
  border:8px solid transparent;
  border-image:url('../assets/ui/frame-metal-banner.png') 14 26 / 8px 14px stretch;
  background:linear-gradient(180deg, rgba(14, 26, 38, 0.94) 0%, rgba(6, 14, 22, 0.97) 100%);
  background-clip:padding-box;
  box-shadow:0 4px 14px rgba(0, 0, 0, 0.75);
  letter-spacing:.8px;
}

.sector-readout strong {
  font-weight:400;
  color:#a6bbc9;
}

.sector-rule {
  display:block;
  width:65px;
  height:2px;
  background:#d0e2ed36;
}

.sector-rule i {
  display:block;
  height:100%;
  background:var(--gold);
  width:0;
}

.quiet-button {
  display:flex;
  align-items:center;
  gap:8px;
  background:linear-gradient(180deg, rgba(14, 26, 38, 0.92) 0%, rgba(6, 14, 22, 0.96) 100%);
  border:1px solid rgba(255, 191, 0, 0.25);
  border-radius:4px;
  padding:4px 10px;
  font-size:10px;
  font-weight:700;
  color:#c7d6df;
  cursor:pointer;
  pointer-events:auto;
  box-shadow:0 3px 10px rgba(0, 0, 0, 0.6);
  transition:border-color 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.quiet-button:hover {
  border-color:rgba(255, 191, 0, 0.65);
  color:#ffbf00;
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(0, 0, 0, 0.7), 0 0 10px rgba(255, 191, 0, 0.25);
}

.quiet-button kbd {
  background:rgba(255, 191, 0, 0.15);
  border:1px solid rgba(255, 191, 0, 0.4);
  color:#ffbf00;
  font-weight:900;
  font-size:9px;
  padding:2px 5px;
  border-radius:3px;
}

.boss-panel {
  position:absolute;
  bottom:6%;
  left:32%;
  width:36%;
  background:#0a1824ed;
  border:1px solid #ff856d55;
  border-radius:6px;
  padding:12px 16px;
}

.boss-title-row {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
}

.boss-title-row h2 {
  font-size:12px;
  letter-spacing:2px;
  flex:1;
}

.boss-title-row strong {
  font:11px var(--mono);
}

.boss-panel .meter-fill {
  background:var(--danger);
}

/* Pause and results share the same resource language. */
.modal-screen {
  background:linear-gradient(90deg,#08141af7,#0b1b29e8);
  backdrop-filter:blur(12px);
  padding:5cqw 8cqw;
}

.modal-layout {
  display:grid;
  grid-template-columns:1fr 32cqw;
  gap:7cqw;
  min-height:100%;
  align-items:center;
}

.modal-content h2,.result-content h2 {
  font-size:4.5cqw;
  line-height:1.06;
  letter-spacing:-.045em;
  font-weight:400;
  margin-top:1.8cqw;
}

.modal-content h2 em,.result-content h2 em {
  font-style:normal;
  color:var(--gold);
  font-weight:700;
}

.modal-copy {
  font-size:13px;
  color:var(--muted);
  line-height:1.7;
  margin-top:18px;
  max-width:440px;
}

.modal-actions {
  display:grid;
  gap:9px;
  margin-top:25px;
  max-width:340px;
}

.text-button {
  padding:14px 0;
  background:transparent;
  text-align:left;
  color:#aabac6;
  font-size:12px;
  display:flex;
  justify-content:space-between;
}

.text-button:hover {
  color:var(--gold);
}

.subtle-note {
  font-size:10px;
  line-height:1.6;
  color:#91a7b7;
  margin-top:14px;
}

.operation-summary {
  position:relative;
  padding:16px 20px;
  border:22px solid transparent;
  border-image:url('../assets/ui/frame-metal-riveted.png') 30 / 22px stretch;
  background:linear-gradient(180deg, rgba(16, 28, 40, 0.96) 0%, rgba(8, 16, 24, 0.98) 100%);
  background-clip:padding-box;
  box-shadow:0 18px 50px rgba(0, 0, 0, 0.85), inset 0 0 25px rgba(0, 0, 0, 0.6);
}

.summary-heading {
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:-4px -6px 14px -6px;
  height:48px;
  padding:0 24px;
  background:url('../assets/ui/banner-winged-hex.png') no-repeat center / 100% 100%;
  border:none;
  border-radius:0;
  text-align:center;
}

.summary-heading .panel-kicker {
  font:900 13px var(--mono);
  color:var(--gold);
  letter-spacing:2.5px;
  text-shadow:0 0 10px rgba(255, 191, 0, 0.7), 0 0 20px rgba(255, 191, 0, 0.3);
  text-transform:uppercase;
  white-space:nowrap;
  text-align:center;
}

.summary-heading .status-dot {
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
}

.resource-summary {
  display:grid;
  gap:8px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(189, 213, 229, 0.14);
}

.resource-summary>div {
  display:flex;
  gap:10px;
  align-items:center;
  font-size:12px;
  padding:6px 10px;
  background:rgba(4, 15, 25, 0.55);
  border:1px solid rgba(189, 213, 229, 0.1);
  border-radius:6px;
  transition:background 0.18s ease, border-color 0.18s ease;
}

.resource-summary>div:hover {
  background:rgba(8, 26, 42, 0.75);
  border-color:rgba(255, 191, 0, 0.3);
}

.resource-summary .icon {
  width:17px;
  height:17px;
  color:var(--gold);
}

.resource-summary>div:nth-child(2) .icon {
  color:var(--ice);
}

.resource-summary>div:nth-child(3) .icon {
  color:var(--muted);
}

.resource-summary strong {
  margin-left:auto;
  font:700 12.5px var(--mono);
  color:#f1f5f9;
}

.summary-wallet {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:14px 0 10px 0;
  padding:8px 12px;
  background:linear-gradient(90deg, rgba(255, 191, 0, 0.12) 0%, rgba(4, 15, 25, 0.6) 100%);
  border:1px solid rgba(255, 191, 0, 0.25);
  border-radius:6px;
  font-size:13px;
}

.summary-wallet strong {
  font:900 24px var(--mono);
  color:var(--gold);
  text-shadow:0 0 10px rgba(255, 191, 0, 0.5);
}

.coin-breakdown {
  display:grid;
  gap:8px;
}

.coin-breakdown>div {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:12px;
  padding:6px 10px;
  background:rgba(4, 15, 25, 0.45);
  border:1px solid rgba(189, 213, 229, 0.08);
  border-radius:6px;
  transition:transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.coin-breakdown>div:hover {
  background:rgba(10, 28, 44, 0.7);
  border-color:rgba(255, 191, 0, 0.35);
  transform:translateX(3px);
}

.coin-symbol {
  color:var(--gold);
  border:1px solid rgba(255, 191, 0, 0.25);
  background:rgba(255, 191, 0, 0.05);
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  overflow:hidden;
  box-shadow:0 0 8px rgba(0, 0, 0, 0.4);
  flex-shrink:0;
}

.coin-breakdown small {
  display:block;
  color:#91a7b7;
  font-size:9px;
  margin-top:2px;
}

.coin-breakdown strong {
  margin-left:auto;
  font:700 14px var(--mono);
  color:#f8fafc;
}

.summary-points {
  border-top:1px solid rgba(189, 213, 229, 0.16);
  padding-top:14px;
  margin-top:14px;
  display:grid;
  gap:8px;
  font-size:11px;
  color:#a0b5c4;
}

.summary-points>span {
  display:flex;
  justify-content:space-between;
}

.summary-points strong {
  font:700 12.5px var(--mono);
  color:#dbe4e9;
}

.summary-points>span:last-child {
  font-size:12px;
  color:#e9eef1;
  font-weight:600;
}

.summary-points>span:last-child strong {
  color:var(--gold);
  font-size:14px;
}

.result-content {
  margin:auto;
  width:min(540px, 100%);
  text-align:center;
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:22px 30px;
  border:24px solid transparent;
  border-image:url('../assets/ui/frame-metal-riveted.png') 30 / 24px stretch;
  background:linear-gradient(180deg, rgba(16, 28, 40, 0.96) 0%, rgba(9, 17, 25, 0.98) 60%, rgba(5, 11, 17, 0.99) 100%);
  background-clip:padding-box;
  box-shadow:0 24px 70px rgba(0, 0, 0, 0.9), inset 0 0 30px rgba(0, 0, 0, 0.65);
  backdrop-filter:blur(14px);
}

.modal-screen--defeat .result-content {
  box-shadow:0 24px 70px rgba(0, 0, 0, 0.9), 0 0 45px rgba(255, 133, 109, 0.25), inset 0 0 30px rgba(0, 0, 0, 0.65);
}

.modal-screen--victory .result-content {
  box-shadow:0 24px 70px rgba(0, 0, 0, 0.9), 0 0 50px rgba(255, 191, 0, 0.25), inset 0 0 30px rgba(0, 0, 0, 0.65);
}

.result-content .eyebrow {
  width:240px;
  height:54px;
  background:url('../assets/ui/banner-winged-hex.png') no-repeat center / 100% 100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font:900 10.5px var(--mono);
  color:var(--gold);
  letter-spacing:2px;
  text-shadow:0 0 10px rgba(255, 191, 0, 0.7);
  padding:0 16px;
  margin-bottom:6px;
  border:none;
  border-radius:0;
}

.modal-screen--defeat .result-content .eyebrow {
  color:var(--danger);
  text-shadow:0 0 10px rgba(255, 133, 109, 0.8);
}

.result-content .eyebrow span {
  display:none;
}

.result-content .modal-actions {
  width:330px;
  max-width:100%;
  margin-top:22px;
}

.result-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  width:100%;
  margin-top:22px;
  gap:12px;
  padding:0;
  border-block:none;
}

.result-grid>div {
  background:rgba(4, 14, 23, 0.65);
  border:1px solid rgba(189, 213, 229, 0.14);
  border-radius:6px;
  padding:12px 8px;
  box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.5);
  transition:border-color 0.2s ease;
}

.result-grid>div:hover {
  border-color:rgba(255, 191, 0, 0.35);
}

.result-grid>div+div {
  border-left:1px solid rgba(189, 213, 229, 0.14);
}

.result-grid span {
  display:block;
  font:700 9.5px var(--mono);
  letter-spacing:1.2px;
  color:#94a3b8;
}

.result-grid strong {
  display:block;
  font:900 24px var(--mono);
  color:var(--gold);
  margin-top:6px;
  text-shadow:0 0 8px rgba(255, 191, 0, 0.3);
}

.modal-screen--defeat .eyebrow {
  color:var(--danger);
}

.result-vitals {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
  margin-top:18px;
  width:100%;
}

.result-vitals>div {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:rgba(4, 14, 23, 0.55);
  border:1px solid rgba(189, 213, 229, 0.12);
  border-radius:6px;
  padding:6px 6px;
  font:700 9.5px var(--sans);
  color:#cbd5e1;
}

.result-vitals .resource-capsule-icon {
  width:16px;
  height:20px;
}

.result-vitals .resource-capsule-icon img {
  width:16px;
  height:20px;
  object-fit:contain;
}

.result-vitals strong {
  font:700 10.5px var(--mono);
  color:#f8fafc;
  margin-top:0;
  margin-left:2px;
}

.manual-screen {
  inset:1.8cqw 4cqw;
  border:20px solid transparent;
  border-image:url('../assets/ui/frame-metal-riveted.png') 30 / 20px stretch;
  background:linear-gradient(180deg, rgba(16, 28, 40, 0.97) 0%, rgba(9, 17, 25, 0.98) 60%, rgba(5, 11, 17, 0.99) 100%);
  background-clip:padding-box;
  box-shadow:0 24px 80px rgba(0, 0, 0, 0.95), inset 0 0 35px rgba(0, 0, 0, 0.7);
  backdrop-filter:blur(20px);
  padding:1.4cqw 2.2cqw;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.manual-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}

.manual-head .eyebrow {
  width:230px;
  height:48px;
  background:url('../assets/ui/banner-winged-hex.png') no-repeat center / 100% 100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font:900 9.5px var(--mono);
  color:var(--gold);
  letter-spacing:2px;
  text-shadow:0 0 8px rgba(255, 191, 0, 0.6);
  padding:0 14px;
  border:none;
  border-radius:0;
}

.manual-head .eyebrow span {
  display:none;
}

.manual-head h2 {
  font-size:2.7cqw;
  font-weight:600;
  letter-spacing:-.03em;
  margin-top:10px;
}

.close-button {
  font:28px var(--sans);
  flex-shrink:0;
}

.guide-tabs {
  display:flex;
  gap:30px;
  margin-top:25px;
  border-bottom:1px solid var(--line);
}

.guide-tabs button {
  background:transparent;
  color:var(--muted);
  font-size:13px;
  padding:0 0 13px;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
}

.guide-tabs button[aria-selected=true] {
  color:var(--gold);
  border-bottom-color:var(--gold);
}

.guide-tabs button:hover {
  color:var(--ink);
}

.guide-body {
  flex:1;
  min-height:0;
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:#4c6677 transparent;
  padding:22px 3px 12px;
}

.guide-intro {
  font-size:12px;
  line-height:1.6;
  color:#a5b9c8;
  margin-bottom:22px;
}

.manual-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px;
}

.manual-group h3 {
  font-size:16px;
  font-weight:500;
  margin-bottom:15px;
  display:flex;
  align-items:center;
  gap:10px;
}

.manual-group h3>span {
  font:10px var(--mono);
  color:var(--gold);
}

.manual-line {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  min-height:54px;
  border-top:1px solid var(--line);
  font-size:11px;
}

.manual-line small {
  display:block;
  color:#8fa6b7;
  font-size:9px;
  margin-top:5px;
  line-height:1.3;
}

.manual-line kbd {
  font-size:9px;
  padding:5px 6px;
}

.group-note {
  color:#93a9b9;
  font-size:10px;
  line-height:1.7;
  margin-top:14px;
}

.manual-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding-top:16px;
  font:8px var(--mono);
  color:#819cae;
  letter-spacing:1px;
  gap:10px;
}

.footer-slash {
  color:var(--gold);
  margin:0 12px;
}

.resource-guide {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

.resource-guide section {
  border-left:1px solid var(--line);
  padding-left:20px;
}

.resource-guide .icon {
  color:var(--gold);
}

.resource-guide section:nth-child(2) .icon {
  color:var(--ice);
}

.resource-guide section:nth-child(3) .icon {
  color:var(--muted);
}

.resource-guide h3 {
  font-size:15px;
  font-weight:600;
  margin:6px 0 4px;
}

.resource-guide p,.coin-guide p,.mission-guide p {
  color:#a3b7c7;
  font-size:11.5px;
  line-height:1.45;
}

.coin-guide {
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:35px;
}

.coin-guide h3 {
  font-size:18px;
  font-weight:500;
  margin-bottom:8px;
}

.coin-values {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px 25px;
}

.coin-values>span {
  display:grid;
  grid-template-columns:24px 1fr;
  gap:4px 8px;
  font-size:11px;
  align-items:center;
}

.coin-values b {
  font-size:21px;
  color:var(--gold);
  grid-row:span 2;
  font-weight:400;
}

.coin-values strong {
  font:10px var(--mono);
  color:var(--muted);
}

.guide-callout {
  background:#ffbf0008;
  border-left:2px solid var(--gold);
  padding:12px 15px;
  margin-top:22px;
  font-size:11px;
  line-height:1.6;
  color:#bbcad4;
}

.mission-guide {
  display:grid;
  gap:17px;
}

.mission-guide section {
  display:flex;
  align-items:flex-start;
  gap:20px;
  border-top:1px solid var(--line);
  padding-top:18px;
}

.mission-guide section>span {
  font:27px var(--mono);
  color:var(--gold);
}

.mission-guide h3 {
  font-size:16px;
  font-weight:500;
  margin-bottom:6px;
}

.toast-region {
  position:absolute;
  z-index:4;
  right:1.8cqw;
  bottom:8%;
  width:min(330px,32%);
  display:grid;
  gap:7px;
  pointer-events:none;
}

.toast {
  padding:12px 16px;
  background:linear-gradient(180deg, rgba(14,32,50,0.96) 0%, rgba(7,18,28,0.97) 100%);
  border:1px solid rgba(255,191,0,0.35);
  border-left:3px solid var(--gold);
  border-radius:6px;
  box-shadow:0 4px 20px rgba(0,0,0,0.45), 0 0 14px rgba(255,191,0,0.12);
  font-size:11px;
  font-weight:600;
  color:#ffd84d;
  line-height:1.5;
  animation:appear .2s ease-out;
}

.toast--danger {
  border-left-color:var(--danger);
}

.toast--cyan {
  border-left-color:var(--ice);
}

.toast--purple {
  border-left-color:#c084fc;
  color:#f3e8ff;
  box-shadow:0 4px 20px rgba(0,0,0,0.45), 0 0 14px rgba(168,85,247,0.25);
}

.toast--pastel-red {
  border-left-color:#f87171;
  border-color:rgba(248, 113, 113, 0.45);
  color:#fca5a5;
  background:linear-gradient(180deg, rgba(38, 16, 20, 0.96) 0%, rgba(20, 8, 12, 0.97) 100%);
  box-shadow:0 4px 20px rgba(0, 0, 0, 0.5), 0 0 14px rgba(248, 113, 113, 0.28);
}

.toast--pastel-red .led,
.led--pastel-red {
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:6px;
  border-radius:50%;
  background:#f87171;
  box-shadow:0 0 8px #f87171;
  vertical-align:middle;
}

.toast[data-leaving=true] {
  opacity:0;
  transition:opacity .18s;
}

[data-state]:not([data-state=playing]) .toast-region,[data-help=open] .toast-region {
  display:none;
}

@keyframes appear {
  from {
    opacity:0;
    transform:translateY(5px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

@container (max-width:1000px) {
  .title-content {
    margin-top:1.2cqw;
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:1.4px;
  }
  .title-lede {
    font-size:10px;
    line-height:1.35;
    margin-top:4px;
  }
  .title-actions {
    margin-top:1.2cqw;
    gap:6px;
    width:32cqw;
  }
  .character-picker {
    width:32cqw;
    margin-top:0.8cqw;
  }
  .character-option {
    min-height:46px;
  }
  .character-portrait {
    width:35px;
    height:38px;
    flex-basis:35px;
  }
  .character-copy strong {
    font-size:9px;
  }
  .action-button {
    min-height:36px;
    font-size:11px;
    padding-inline:12px;
  }
  .title-footnote {
    display:none;
  }
  .operation-brief {
    padding:7px 12px;
    margin-top:1cqw;
    width:48cqw;
  }
  .brief-steps {
    margin-top:5px;
  }
  .brief-steps>div {
    font-size:8.5px;
  }
  .step-desc {
    font-size:7.5px;
  }
  .menu-header .icon-button {
    width:32px;
    height:32px;
  }
  .chapter-label {
    font-size:8px;
  }
  .brand-lockup {
    font-size:8px;
  }
  .vitals-panel {
    padding:9px 10px;
  }
  .vital-meter {
    margin-top:6px;
    gap:6px;
  }
  .vitals-head {
    margin-bottom:7px;
  }
  .meter-label,.meter-label strong {
    font-size:9px;
  }
  .vitals-footer {
    font-size:7px;
  }
  .game-hud {
    gap:1cqw;
    grid-template-columns:23cqw 1fr auto;
  }
  .wallet-panel {
    gap:10px;
    padding:8px;
  }
  .score-total {
    padding-left:10px;
  }
  .coin-total strong {
    font-size:18px;
  }
  .score-total strong {
    font-size:15px;
  }
  .panel-kicker {
    font-size:8px;
  }
  .operation-summary {
    padding:18px;
  }
  .modal-screen {
    padding:3cqw 7cqw;
  }
  .modal-actions {
    margin-top:18px;
    gap:7px;
  }
  .modal-copy {
    font-size:11px;
    margin-top:12px;
  }
  .subtle-note {
    font-size:9px;
  }
  .resource-summary {
    gap:9px;
    padding-bottom:12px;
  }
  .summary-wallet {
    margin:12px 0;
  }
  .coin-breakdown {
    gap:9px;
  }
  .summary-points {
    margin-top:12px;
    padding-top:12px;
  }
  .manual-screen {
    padding:2.5cqw 3cqw;
  }
  .manual-head h2 {
    font-size:25px;
  }
  .guide-tabs {
    margin-top:16px;
  }
  .guide-body {
    padding-top:15px;
  }
  .guide-intro {
    margin-bottom:15px;
    font-size:11px;
  }
  .manual-grid {
    gap:18px;
  }
  .manual-line {
    min-height:46px;
    font-size:10px;
  }
  .manual-line kbd {
    font-size:8px;
  }
  .group-note {
    font-size:9px;
  }
  .manual-footer {
    padding-top:10px;
  }
  .resource-guide p,.coin-guide p,.mission-guide p {
    font-size:11px;
  }
  .coin-guide {
    margin-top:16px;
    padding-top:16px;
  }
  .guide-callout {
    margin-top:15px;
  }
}

@container (max-width:760px) {
  .title-screen {
    padding-top:2cqw;
  }
  .brand-lockup {
    font-size:7px;
    gap:8px;
  }
  .brand-mark {
    font-size:22px;
  }
  .chapter-label {
    font-size:7px;
    letter-spacing:1px;
  }
  .title-content {
    margin-top:3cqw;
  }
  .title-actions {
    width:35cqw;
  }
  .character-picker {
    width:35cqw;
  }
  .character-picker-head>span:last-child,
  .character-copy small {
    display:none;
  }
  .character-option {
    min-height:38px;
    padding-block:2px;
  }
  .character-portrait {
    width:31px;
    height:33px;
    flex-basis:31px;
  }
  .action-button {
    min-height:33px;
    font-size:10px;
  }
  .title-lede {
    font-size:10px;
  }
  .title-footnote {
    display:none;
  }
  .hero-caption {
    font-size:8px;
  }
  .hero-caption>span:last-child {
    display:none;
  }
  .hero-dialogue-badge {
    top:18%;
    right:3cqw;
    width:min(210px, 44cqw);
    padding:8px 12px;
  }
  .hero-dialogue-text {
    font-size:10px;
  }
  .hero-pose-indicator {
    right:3cqw;
    bottom:8%;
  }
  .operation-brief {
    bottom:0;
    width:53cqw;
  }
  .brief-heading>span:last-child {
    display:none;
  }
  .brief-steps {
    gap:16px;
  }
  .brief-steps b {
    font-size:13px;
  }
  .brief-steps>div {
    font-size:8px;
    gap:6px;
  }
  .menu-footer {
    font-size:6px;
  }
  .menu-footer strong {
    font-size:11px;
  }
  .vitals-panel {
    padding:6px 8px;
  }
  .vitals-head,.vitals-footer {
    display:none;
  }
  .vital-meter {
    margin-top:5px;
  }
  .vital-meter .icon {
    width:12px;
    height:12px;
  }
  .meter-label,.meter-label strong {
    font-size:8px;
  }
  .meter-label {
    margin-bottom:3px;
  }
  .meter-track {
    height:3px;
  }
  .wallet-panel .panel-kicker {
    font-size:6px;
  }
  .wallet-panel {
    gap:7px;
    padding:7px;
  }
  .coin-total {
    gap:5px;
  }
  .coin-total>.icon {
    width:18px;
    height:18px;
  }
  .coin-total strong,.score-total strong {
    font-size:14px;
  }
  .hud-pause {
    width:25px;
    height:29px;
  }
  .sector-readout {
    font-size:6px;
  }
  .quiet-button {
    font-size:9px;
    gap:5px;
  }
  .quiet-button kbd {
    font-size:7px;
  }
  .bottom-hud {
    gap:12px;
  }
  .modal-layout {
    grid-template-columns:1fr 38cqw;
    gap:4cqw;
  }
  .modal-content h2,.result-content h2 {
    font-size:5cqw;
  }
  .operation-summary {
    padding:12px;
  }
  .resource-summary {
    gap:7px;
  }
  .resource-summary>div {
    font-size:10px;
  }
  .resource-summary strong {
    font-size:10px;
  }
  .summary-wallet {
    font-size:11px;
    margin:10px 0;
  }
  .summary-wallet strong {
    font-size:20px;
  }
  .coin-breakdown {
    gap:7px;
  }
  .coin-breakdown>div {
    font-size:10px;
    gap:8px;
  }
  .coin-symbol {
    width:24px;
    height:24px;
    font-size:15px;
  }
  .coin-breakdown small {
    font-size:8px;
  }
  .summary-heading {
    margin-bottom:9px;
  }
  .summary-points {
    font-size:8px;
    margin-top:9px;
    padding-top:9px;
  }
  .summary-points>span:last-child {
    font-size:10px;
  }
  .manual-head h2 {
    font-size:21px;
  }
  .guide-tabs {
    margin-top:12px;
  }
  .guide-tabs button {
    font-size:11px;
    padding-bottom:9px;
  }
  .manual-grid {
    gap:15px;
  }
  .manual-group h3 {
    font-size:13px;
    margin-bottom:9px;
  }
  .manual-line {
    min-height:40px;
    flex-wrap:wrap;
    gap:3px;
    padding:6px 0;
  }
  .manual-line small {
    font-size:8px;
  }
  .manual-footer {
    font-size:6px;
  }
  .result-grid {
    margin-top:15px;
    padding:12px 0;
  }
  .result-grid strong {
    font-size:21px;
  }
  .result-content .modal-actions {
    margin-top:15px;
  }
  .result-vitals {
    margin-top:12px;
  }
  .toast {
    font-size:9px;
    padding:8px 10px;
  }
}

/* Portrait menus use the viewport;
the world always keeps its 16:9 framing. */
@media (max-aspect-ratio:1/1) {
  .screen-panel {
    position:fixed;
    inset:0;
  }
  .title-screen {
    padding:25px 24px;
    overflow-y:auto;
  }
  .menu-header {
    min-height:35px;
  }
  .chapter-label {
    display:none;
  }
  .brand-lockup {
    font-size:8px;
  }
  .title-content {
    margin-top:60px;
    width:100%;
  }
  .title-content .eyebrow {
    font-size:8px;
  }
  .game-title {
    font-size:clamp(38px,10vw,72px);
    margin-top:18px;
  }
  .title-lede {
    font-size:14px;
    margin-top:20px;
  }
  .title-actions {
    width:min(310px,100%);
    margin-top:30px;
    gap:10px;
  }
  .character-picker {
    width:min(310px,100%);
    margin-top:22px;
  }
  .character-option {
    min-height:54px;
  }
  .character-portrait {
    width:43px;
    height:46px;
    flex-basis:43px;
  }
  .character-copy small {
    display:block;
  }
  .title-actions .action-button {
    min-height:46px;
    font-size:13px;
  }
  .hero-art img {
    height:72%;
    right:-42%;
    bottom:9%;
    opacity:.28;
  }
  .hero-number,.hero-orbit,.hero-caption {
    display:none;
  }
  .title-backdrop {
    background:linear-gradient(90deg,#081725ed,#081725aa),url('../assets/scenarios/atlas-city.png') center/cover;
  }
  .operation-brief {
    position:relative;
    left:auto;
    bottom:auto;
    width:100%;
    margin-top:40px;
    padding-top:18px;
  }
  .brief-steps {
    margin-top:16px;
    gap:20px;
  }
  .brief-steps>div {
    font-size:10px;
  }
  .brief-steps b {
    font-size:16px;
  }
  .menu-footer {
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    margin-top:30px;
    padding-top:18px;
    font-size:7px;
    gap:10px;
  }
  .keyboard-note {
    display:none;
  }
  .modal-screen {
    padding:32px 24px;
  }
  .modal-layout {
    grid-template-columns:1fr;
    gap:30px;
    align-items:start;
  }
  .modal-content h2,.result-content h2 {
    font-size:44px;
    margin-top:22px;
  }
  .modal-copy {
    font-size:13px;
  }
  .modal-actions {
    max-width:none;
  }
  .modal-actions .action-button {
    min-height:44px;
    font-size:12px;
  }
  .operation-summary {
    padding:22px;
  }
  .resource-summary>div {
    font-size:12px;
  }
  .resource-summary strong {
    font-size:12px;
  }
  .coin-breakdown>div {
    font-size:12px;
  }
  .coin-breakdown small {
    font-size:10px;
  }
  .manual-screen {
    inset:12px;
    padding:24px 18px;
  }
  .manual-head h2 {
    font-size:25px;
  }
  .manual-head .eyebrow {
    font-size:7px;
    letter-spacing:1px;
  }
  .guide-tabs {
    margin-top:24px;
    gap:25px;
  }
  .guide-tabs button {
    font-size:13px;
    padding-bottom:14px;
  }
  .guide-body {
    padding-top:20px;
  }
  .guide-intro {
    font-size:12px;
  }
  .manual-grid {
    grid-template-columns:1fr;
    gap:26px;
  }
  .resource-guide {
    grid-template-columns:repeat(2, 1fr);
    gap:14px;
  }
  .manual-group h3 {
    font-size:17px;
  }
  .manual-line {
    min-height:46px;
    font-size:12px;
    flex-wrap:nowrap;
  }
  .manual-line kbd {
    font-size:10px;
  }
  .manual-line small {
    font-size:10px;
  }
  .group-note {
    font-size:11px;
  }
  .coin-guide {
    grid-template-columns:1fr;
    gap:16px;
  }
  .coin-values {
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:8px;
  }
  .resource-guide p,.coin-guide p,.mission-guide p {
    font-size:12px;
  }
  .guide-callout {
    font-size:12px;
  }
  .manual-footer>span {
    font-size:6px;
    letter-spacing:0;
  }
  .manual-footer .quiet-button {
    font-size:11px;
  }
  .result-content {
    width:100%;
  }
  .result-grid {
    margin-top:25px;
    padding-block:20px;
  }
  .result-grid strong {
    font-size:23px;
  }
  .game-hud {
    grid-template-columns:40cqw 1fr;
    gap:2cqw;
  }
  .mission-panel {
    display:none;
  }
  .wallet-panel {
    justify-self:end;
  }
  .vitals-panel {
    padding:5px 7px;
  }
  .vital-meter {
    margin-top:3px;
  }
  .meter-label,.meter-label strong {
    font-size:7px;
  }
  .bottom-hud {
    bottom:5px;
  }
  .sector-readout {
    font-size:5px;
    gap:5px;
    padding:5px;
  }
  .sector-rule {
    width:25px;
  }
  .bottom-hud .quiet-button {
    font-size:7px;
  }
  .bottom-hud .quiet-button kbd {
    font-size:6px;
  }
  .boss-panel {
    bottom:18%;
    left:25%;
    width:50%;
    padding:6px 9px;
  }
  .boss-title-row {
    gap:6px;
    margin-bottom:4px;
  }
  .boss-title-row h2 {
    font-size:8px;
  }
  .boss-title-row .panel-kicker,.boss-title-row strong {
    font-size:7px;
  }
}

@media (prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}

.hero-caption {
  bottom:11%;
}
.hero-coords {
  bottom:8%;
}

.title-screen:has(#continue-operation:not([hidden])) #start-operation {
  background:#102332c9;
  color:#d4dfe6;
  border-color:var(--line);
  box-shadow:none;
}

.title-screen:has(#continue-operation:not([hidden])) #start-operation kbd {
  display:none;
}

.title-screen:has(#continue-operation:not([hidden])) .title-footnote {
  display:none;
}

@container (max-width:760px) {
  .title-screen {
    padding:1.5cqw 4cqw;
  }
  .title-content {
    margin-top:0;
  }
  .game-title {
    margin:0;
  }
  .game-title strong {
    font-size:26px;
    line-height:1;
  }
  .title-lede {
    display:none;
  }
  .character-picker {
    margin-top:3px;
  }
  .character-picker-head {
    display:none;
  }
  .character-options {
    gap:6px;
  }
  .character-option {
    padding:2px 14px 2px 6px;
    min-height:26px;
  }
  .character-copy strong {
    font-size:9.5px;
    white-space:nowrap;
  }
  .character-portrait {
    width:20px;
    height:20px;
    flex:0 0 20px;
  }
  .title-actions {
    margin-top:4px;
    gap:4px;
  }
  .action-button {
    min-height:26px;
    padding:2px 10px;
    font-size:9.5px;
  }
  .title-footnote {
    display:none;
  }
  .operation-brief {
    padding:5px 10px;
    margin-top:4px;
    width:54cqw;
    bottom:0;
  }
  .brief-heading {
    padding-bottom:2px;
  }
  .brief-steps {
    gap:6px;
    margin-top:2px;
  }
  .brief-steps b {
    font-size:11px;
  }
  .brief-step {
    padding:0;
  }
  .step-task {
    font-size:8px;
    line-height:1.1;
  }
  .step-desc {
    display:none;
  }
  .hero-caption {
    display:none;
  }
  .hero-coords {
    display:none;
  }
  .campaign-status {
    display:none;
  }

  /* Guia tatico e recursos em telas compactas */
  .manual-screen {
    inset:1cqw 2cqw;
    padding:8px 14px;
  }
  .manual-head h2 {
    font-size:17px;
    margin-top:2px;
  }
  .guide-tabs {
    margin-top:6px;
    gap:14px;
  }
  .guide-tabs button {
    font-size:11px;
    padding-bottom:5px;
  }
  .guide-body {
    padding-top:6px;
  }
  .guide-intro {
    font-size:9.5px;
    margin-bottom:8px;
  }
  .resource-guide {
    grid-template-columns:repeat(4, 1fr);
    gap:8px;
  }
  .resource-guide section {
    padding-left:6px;
  }
  .guide-capsule-box {
    width:32px;
    height:44px;
    margin-bottom:3px;
  }
  .guide-capsule-box img {
    width:18px;
    height:34px;
  }
  .resource-guide h3 {
    font-size:10.5px;
    margin:2px 0;
  }
  .resource-guide p {
    font-size:8px;
    line-height:1.2;
  }
  .coin-guide {
    margin-top:8px;
    padding-top:8px;
    gap:10px;
  }
  .coin-guide h3 {
    font-size:10.5px;
  }
  .coin-guide p {
    font-size:8px;
  }
  .coin-values {
    gap:6px;
  }
  .coin-values span {
    font-size:8.5px;
  }
  .coin-guide-thumb {
    width:15px;
    height:15px;
    margin-right:2px;
  }
  .guide-callout {
    margin-top:6px;
    font-size:8px;
    padding:3px 6px;
  }
}

@media (max-aspect-ratio:1/1) {
  .title-content {
    margin-top:60px;
  }
  .title-actions {
    margin-top:30px;
  }
  .title-screen:has(#continue-operation:not([hidden])) .title-lede {
    display:block;
  }
  .operation-brief {
    padding-top:18px;
  }
}

.menu-utilities {
  display:flex;
  gap:22px;
  margin-top:16px;
}

.menu-utilities .quiet-button {
  font-size:10px;
}

.menu-utilities .icon {
  width:15px;
  height:15px;
}


/* A retained operation adds one action; keep its menu clear on compact landscapes. */
@media (min-aspect-ratio: 1/1) {
  @container (max-width: 1400px) {
    .title-screen:has(#continue-operation:not([hidden])) .title-lede {
      display: none;
    }
  }
}


/* =======================================================
   ADAPTAÇÃO VISUAL AAA: ATIVOS DE UI E MICROINTERAÇÕES
   ======================================================= */
.meter-capsule-img {
  width: 14px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(255, 191, 0, 0.4));
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.2s ease;
}

.vital-meter--hp .meter-capsule-img {
  filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.65));
}

.vital-meter--shield .meter-capsule-img {
  filter: drop-shadow(0 0 6px rgba(0, 210, 255, 0.65));
}

.vital-meter--ammo .meter-capsule-img {
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.65));
}

.vital-meter--boost .meter-capsule-img {
  filter: drop-shadow(0 0 7px rgba(168, 85, 247, 0.75));
}

.vital-meter:hover .meter-capsule-img {
  transform: scale(1.12);
}

.hud-coin-badge {
  border-radius:50%;
  animation:coinShimmer 4s infinite ease-in-out;
}

@keyframes coinShimmer {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 191, 0, 0.4)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 12px rgba(255, 191, 0, 0.75)); transform: scale(1.05); }
}

.hud-coin-chip:hover {
  color: #f8fafc;
  transform: translateY(-1px);
}

.resource-capsule-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 28px;
  flex-shrink: 0;
}

.resource-capsule-icon img {
  width: 18px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(0, 210, 255, 0.35));
}

.coin-symbol {
  color: var(--gold);
  border: 1px solid rgba(255, 191, 0, 0.25);
  background: rgba(255, 191, 0, 0.05);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}

.coin-symbol img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(255, 191, 0, 0.35));
  display: block;
}

.guide-capsule-box {
  width: 44px;
  height: 56px;
  display: grid;
  place-items: center;
  margin-bottom: 6px;
  background: rgba(6, 17, 28, 0.7);
  border: 1px solid rgba(189, 213, 229, 0.16);
  border-radius: 6px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: border-color 0.2s ease;
}

.guide-capsule-box img {
  width: 24px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(0, 210, 255, 0.45));
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.resource-guide section:hover .guide-capsule-box {
  border-color: rgba(255, 191, 0, 0.35);
}

.resource-guide section:hover .guide-capsule-box img {
  transform: scale(1.1);
}

.coin-guide-thumb {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(255, 191, 0, 0.45));
  vertical-align: middle;
  margin-right: 6px;
}

.coin-values span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Microinteracoes Fluidas AAA */
.action-button {
  transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.16s ease, background 0.2s ease, border-color 0.2s ease;
}

.action-button:active {
  transform: translateY(1px) scale(0.985);
}

.action-button--primary:hover {
  box-shadow: 0 0 36px rgba(255, 191, 0, 0.65), 0 8px 24px rgba(0, 0, 0, 0.55);
}

.character-option {
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}

.character-option:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 191, 0, 0.4);
}

.character-option.is-selected {
  box-shadow: 0 0 20px rgba(255, 191, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Microinteração de Coleta de Moedas e Pulsos AAA */
@keyframes coinPickPulse {
  0% { transform: scale(1); filter: brightness(1); }
  35% { transform: scale(1.22); filter: brightness(1.7) drop-shadow(0 0 12px rgba(255, 191, 0, 0.95)); }
  100% { transform: scale(1); filter: brightness(1); }
}

.is-pulsing {
  animation: coinPickPulse 0.45s ease-out;
}

/* Telas Internas: Identidade Visual e Ativos em Derrota e Vitória */
.result-label-with-coin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.mini-coin-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(255, 191, 0, 0.45));
}

.result-coins-breakdown {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.result-coin-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: rgba(5, 18, 28, 0.85);
  border: 1px solid rgba(189, 213, 229, 0.16);
  border-radius: 14px;
  font: 700 9.5px var(--mono);
  color: #94a3b8;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.result-coin-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 191, 0, 0.4);
}

.result-coin-chip img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(255, 191, 0, 0.4));
}

.result-coin-chip b {
  color: #cbd5e1;
}

.result-coin-chip strong {
  color: var(--gold);
  font-size: 11px;
}

/* Os antigos blocos de override responsivo do HUD foram removidos:
   o sistema unificado acima ja e fluido (cqw + clamp).  */

/* =======================================================
   GUIA COMPACTO: o painel era grande demais para conteudo
   simples.  Menos respiro vertical, tipografia menor e
   colunas mais estreitas, sem perder legibilidade.
   ======================================================= */
/* O painel deixa de ocupar a tela inteira: ele cresce ate o conteudo e para.
   Antes ficava um retangulo enorme com metade vazia. */
.manual-screen {
  inset:auto;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:min(1000px, 88cqw);
  height:auto;
  max-height:86cqh;
  padding:1cqw 1.8cqw;
}

/* O resumo do agente na pausa rola sozinho em telas baixas em vez de ser
   cortado no rodape. */
.modal-screen {
  padding:3.2cqw 6cqw;
}

/* Titulo mais contido: com cinco acoes na coluna, 4.5cqw empurrava os botoes
   para fora da tela em 720p. */
.modal-content h2,
.result-content h2 {
  font-size:3.5cqw;
  margin-top:1cqw;
}

.modal-content .modal-copy {
  margin-top:.8cqw;
}

.pause-agent {
  margin-bottom:1cqw;
}

.modal-layout {
  /* A linha do grid precisa ser explicitamente encolhivel (minmax(0,1fr)),
     senao ela cresce com o conteudo e o max-height dos filhos nunca vale. */
  height:100%;
  min-height:0;
  max-height:100%;
  grid-template-rows:minmax(0, 1fr);
  gap:5cqw;
}

.modal-content {
  /* Itens de grid tem min-height:auto por padrao, o que impede encolher
     abaixo do conteudo e estourava o painel em telas baixas. */
  min-height:0;
  max-height:100%;
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:#4c6677 transparent;
  padding-right:6px;
}

.operation-summary {
  min-height:0;
  max-height:100%;
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:#4c6677 transparent;
}

.manual-head .eyebrow {
  width:190px;
  height:38px;
  font-size:8.5px;
}

.manual-head h2 {
  font-size:2cqw;
  margin-top:6px;
}

.close-button {
  font-size:22px;
}

.guide-tabs {
  gap:22px;
  margin-top:14px;
}

.guide-tabs button {
  font-size:11.5px;
  padding:0 0 9px;
}

.guide-body {
  padding:14px 3px 8px;
}

.guide-intro {
  font-size:11px;
  line-height:1.5;
  margin-bottom:14px;
}

.manual-grid {
  gap:18px;
}

.manual-group h3 {
  font-size:12.5px;
}

.manual-group h3 > span {
  font-size:12px;
}

.manual-line {
  padding:5px 0;
  font-size:11.5px;
}

.manual-line small {
  font-size:9.5px;
}

.manual-line kbd {
  font-size:9.5px;
  padding:2px 6px;
}

.group-note {
  font-size:10px;
  line-height:1.45;
  margin-top:8px;
}

.resource-guide {
  gap:12px;
}

.resource-guide section {
  padding-left:13px;
}

.resource-guide h3 {
  font-size:12.5px;
  margin:4px 0 3px;
}

.resource-guide p,
.coin-guide p,
.mission-guide p,
.story-guide p {
  font-size:10.5px;
  line-height:1.45;
}

.guide-capsule-box {
  transform:scale(.82);
  transform-origin:left center;
}

.coin-guide {
  margin-top:10px;
  padding-top:9px;
  gap:24px;
}

.mission-guide {
  gap:10px;
}

.mission-guide section {
  gap:14px;
  padding-top:10px;
}

.mission-guide section > span {
  font-size:19px;
}

.mission-guide h3 {
  font-size:13px;
  margin-bottom:4px;
}

.guide-callout {
  padding:9px 12px;
  margin-top:14px;
  font-size:10.5px;
  line-height:1.5;
}

.guide-callout--compact strong {
  color:var(--gold);
}

.manual-footer {
  font-size:9.5px;
}

/* Historia: duas colunas curtas, para caber sem rolagem. */
.story-guide {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px 26px;
}

.story-guide section {
  border-top:1px solid var(--line);
  padding-top:9px;
}

.story-guide h3 {
  font:600 13px var(--sans);
  color:var(--gold);
  margin:0 0 4px;
  letter-spacing:.01em;
}

.story-guide strong {
  color:#cfe6ef;
  font-weight:700;
}

@container (max-width:820px) {
  .story-guide {
    grid-template-columns:minmax(0, 1fr);
  }

  .manual-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .resource-guide {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

/* =======================================================
   RECIBO DO BLOCO (tela de vitoria)
   O final do setor lido como um bloco fechando na rede.
   ======================================================= */
/* O recibo do bloco deixou a coluna de vitoria mais alta; ela agora rola
   dentro da moldura em vez de vazar pelo rodape, e o conteudo foi apertado
   o suficiente para caber inteiro em 720p. */
.result-content {
  min-height:0;
  max-height:100%;
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:#4c6677 transparent;
  padding:24px 26px 18px;
  width:min(560px, 100%);
}

.result-content h2 {
  margin-top:.4cqw;
}

.result-content .modal-copy {
  font-size:12px;
  line-height:1.5;
  margin-top:.6cqw;
}

.result-content .modal-actions {
  margin-top:1cqw;
}

.modal-screen--victory,
.modal-screen--defeat {
  display:grid;
  place-items:center;
  padding:2.2cqw 4cqw;
}

.result-content .eyebrow {
  width:262px;
  height:48px;
  font-size:9.5px;
  letter-spacing:1.4px;
}

.chain-receipt {
  margin-top:.9cqw;
  border:1px solid rgba(0, 210, 255, 0.28);
  border-left:2px solid var(--gold);
  background:linear-gradient(135deg, rgba(0, 210, 255, 0.06) 0%, rgba(8, 18, 28, 0.7) 45%, rgba(255, 191, 0, 0.05) 100%);
  clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  padding:11px 15px 12px;
}

.chain-receipt-head {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding-bottom:8px;
  margin-bottom:8px;
  border-bottom:1px solid rgba(189, 213, 229, 0.14);
}

.chain-receipt-kicker {
  font:900 9.5px var(--mono);
  color:var(--gold);
  letter-spacing:.2em;
  text-shadow:0 0 8px rgba(255, 191, 0, 0.45);
}

.chain-receipt-id {
  font:800 11px var(--mono);
  color:#cffafe;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 8px rgba(0, 210, 255, 0.4);
}

.chain-receipt-body {
  display:grid;
  gap:5px;
  margin:0;
}

.chain-receipt-body > div {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
}

.chain-receipt-body dt {
  font:600 10.5px var(--sans);
  color:#8fa6b6;
  white-space:nowrap;
}

.chain-receipt-body dd {
  margin:0;
  font:800 11px var(--mono);
  color:#e2f2f8;
  font-variant-numeric:tabular-nums;
  text-align:right;
}

.chain-receipt-next {
  color:#7dd3fc !important;
  font-weight:700 !important;
}

/* Menu interativo: o resumo da operação precisa respirar como um painel de
   leitura, não como uma coluna comprimida de estatísticas. */
@container (min-width:1001px) {
  .modal-layout {
    grid-template-columns:minmax(0, 1fr) minmax(0, 36cqw);
    gap:5cqw;
  }

  .operation-summary {
    padding:22px 26px;
  }

  .summary-heading {
    height:54px;
    margin:-6px -8px 16px;
    padding-inline:20px;
  }

  .summary-heading .panel-kicker {
    font-size:14.5px;
    letter-spacing:3px;
  }

  .summary-heading .status-dot {
    right:24px;
  }

  .resource-summary {
    gap:10px;
    padding-bottom:16px;
  }

  .resource-summary>div {
    min-height:46px;
    padding:8px 12px;
    font-size:13px;
  }

  .resource-summary strong {
    font-size:13.5px;
  }

  .summary-wallet {
    margin:16px 0 12px;
    padding:10px 14px;
    font-size:14px;
  }

  .summary-wallet strong {
    font-size:28px;
  }

  .coin-breakdown {
    gap:10px;
  }

  .coin-breakdown>div {
    min-height:43px;
    gap:14px;
    padding:8px 12px;
    font-size:13px;
  }

  .coin-symbol {
    width:34px;
    height:34px;
  }

  .coin-breakdown small {
    font-size:9.5px;
  }

  .coin-breakdown strong {
    font-size:15px;
  }

  .summary-points {
    gap:10px;
    margin-top:16px;
    padding-top:16px;
    font-size:12px;
  }

  .summary-points strong {
    font-size:13.5px;
  }

  .summary-points>span:last-child {
    font-size:13px;
  }

  .summary-points>span:last-child strong {
    font-size:15px;
  }
}