/* =====================================================================
   PÉ NA TÁBUA — estilos
   Toda a interface usa a unidade --u (1 pixel lógico do jogo × escala),
   assim o HUD e os menus escalam junto com o canvas 384×640.
   ===================================================================== */
:root {
  --u: 1px;
  --fa: 'Press Start 2P', 'Courier New', monospace;
  --fb: 'VT323', 'Courier New', monospace;
  --ink: #0a1224;
  --ink2: #060c1c;
  --panel-a: #12264f;
  --panel-b: #0a1733;
  --line: #5aa2ff;
  --line-dark: #1d3f78;
  --ice: #9fd8ff;
  --white: #eef6ff;
  --gold: #ffc93a;
  --orange: #ff8a1f;
  --red: #ff3b3b;
  --green: #3fd07a;
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #050a16;
}

body {
  font-family: var(--fb);
  color: var(--white);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  background:
    radial-gradient(120% 70% at 50% -10%, #1f4a86 0%, #0b1734 48%, #040812 100%);
}

/* neve estática + montanhas ao fundo (só aparecem fora da área do jogo) */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    radial-gradient(#ffffff30 1px, transparent 1.6px),
    radial-gradient(#ffffff18 1px, transparent 1.6px);
  background-size: 38px 38px, 23px 23px;
  background-position: 0 0, 11px 17px;
  pointer-events: none;
}
body::after {
  content: '';
  position: fixed; left: 0; right: 0; bottom: 0; height: 34vh;
  background: linear-gradient(#16305c, #0a1733);
  clip-path: polygon(0 100%, 0 62%, 7% 38%, 13% 52%, 22% 18%, 31% 47%, 40% 28%, 49% 56%, 58% 24%, 67% 50%, 76% 22%, 85% 46%, 93% 33%, 100% 50%, 100% 100%);
  opacity: .75;
  pointer-events: none;
}

:root { color-scheme: dark; }
#app {
  position: fixed;
  left: 0; right: 0;
  top: env(safe-area-inset-top, 0px);
  bottom: env(safe-area-inset-bottom, 0px);
  z-index: 1;
}

#stage {
  position: absolute;
  overflow: hidden;
  background: var(--ink);
  box-shadow:
    0 0 0 calc(var(--u) * 2) var(--ink),
    0 0 0 calc(var(--u) * 4) #2c5da8,
    0 0 60px rgba(80, 160, 255, .35);
}

#game {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

canvas { image-rendering: crisp-edges; image-rendering: pixelated; }

.hidden { display: none !important; }

/* ---------------------------------------------------------------------
   Ícones gerados em pixel art pelo game.js (data URLs)
   --------------------------------------------------------------------- */
.ico-coin, .ico-wolf, .ico-lock {
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  image-rendering: pixelated;
  flex: none;
}
.ico-coin { background-image: var(--img-coin); width: calc(var(--u) * 11); height: calc(var(--u) * 11); }
.ico-wolf { background-image: var(--img-wolf); width: calc(var(--u) * 16); height: calc(var(--u) * 13); }
.ico-lock { background-image: var(--img-lock); width: calc(var(--u) * 12); height: calc(var(--u) * 14); }

/* ---------------------------------------------------------------------
   HUD
   --------------------------------------------------------------------- */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 5; }

.hud-tl {
  position: absolute; left: calc(var(--u) * 5); top: calc(var(--u) * 5);
  display: flex; flex-direction: column; gap: calc(var(--u) * 3);
}
.hud-tr {
  position: absolute; right: calc(var(--u) * 5); top: calc(var(--u) * 5);
  display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * 4);
}
.hud-chip {
  background: rgba(7, 14, 32, .8);
  border: calc(var(--u) * 1.5) solid var(--ink);
  box-shadow: inset 0 0 0 var(--u) #3a6fc0, 0 var(--u) 0 rgba(0,0,0,.4);
  padding: calc(var(--u) * 3) calc(var(--u) * 6) calc(var(--u) * 3);
  display: flex; flex-direction: column;
  min-width: calc(var(--u) * 74);
}
.hud-chip .lbl {
  font-family: var(--fa);
  font-size: calc(var(--u) * 4.6);
  color: #9fc8ff;
  letter-spacing: .06em;
  line-height: 1.5;
}
.hud-chip b {
  font-family: var(--fa);
  font-weight: normal;
  font-size: calc(var(--u) * 8);
  color: #fff;
  line-height: 1.35;
  text-shadow: var(--u) var(--u) 0 #000;
}
.hud-coins { flex-direction: row; align-items: center; gap: calc(var(--u) * 5); }
.hud-coins b { color: var(--gold); font-size: calc(var(--u) * 11); }
.hud-coins .ico-coin { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.hud-coins.pulse { animation: pulse .22s steps(3); }
@keyframes pulse { 50% { transform: scale(1.12); } }

.hud-speed .bar {
  height: calc(var(--u) * 4);
  margin-top: calc(var(--u) * 2);
  background: #13244a;
  box-shadow: inset 0 0 0 var(--u) #0a1224;
}
.hud-speed .bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #3fd6ff, #ffe14a 70%, #ff5a2a);
}

.hud-phase { align-items: flex-end; min-width: calc(var(--u) * 84); }
.hud-phase b { font-size: calc(var(--u) * 10.5); color: #fff; }

.hud-pause {
  pointer-events: auto;
  width: calc(var(--u) * 24); height: calc(var(--u) * 24);
  display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 3);
  background: linear-gradient(#2f6fd6, #1d4a9c);
  border: calc(var(--u) * 1.5) solid var(--ink);
  box-shadow: inset 0 var(--u) 0 #6fb0ff, inset 0 calc(var(--u) * -2) 0 #133268;
  cursor: pointer;
}
.hud-pause span { display: block; width: calc(var(--u) * 3); height: calc(var(--u) * 9); background: #fff; }
.hud-pause:active { transform: translateY(var(--u)); }

.hud-danger {
  position: absolute; left: 50%; top: calc(var(--u) * 48);
  transform: translateX(-50%);
  display: flex; align-items: center; gap: calc(var(--u) * 5);
  font-family: var(--fa); font-size: calc(var(--u) * 8);
  color: #fff; white-space: nowrap;
  background: #b3121c;
  border: calc(var(--u) * 1.5) solid #2a0508;
  box-shadow: inset 0 0 0 var(--u) #ff6a6a, 0 0 calc(var(--u) * 10) rgba(255, 40, 40, .5);
  padding: calc(var(--u) * 4) calc(var(--u) * 8);
  opacity: 0;
  transition: opacity .15s;
  text-shadow: var(--u) var(--u) 0 #2a0508;
}
.hud-danger.on { opacity: 1; animation: blink .6s steps(2) infinite; }
.hud-danger.hot { animation-duration: .26s; }
@keyframes blink { 50% { filter: brightness(1.5); background: #e0202c; } }

.hud-msg {
  position: absolute; left: 0; right: 0; top: 29%;
  text-align: center;
  font-family: var(--fa);
  font-size: calc(var(--u) * 14);
  color: #fff;
  letter-spacing: .04em;
  text-shadow:
    calc(var(--u) * 2) calc(var(--u) * 2) 0 var(--ink),
    calc(var(--u) * -1) calc(var(--u) * -1) 0 var(--ink),
    calc(var(--u) * 1) calc(var(--u) * -1) 0 var(--ink),
    calc(var(--u) * -1) calc(var(--u) * 1) 0 var(--ink);
  opacity: 0;
}
.hud-msg.red { color: #ff5a5a; }
.hud-msg.gold { color: var(--gold); }
.hud-msg.ice { color: #9fe3ff; }
.hud-msg.show { animation: msgpop 1.7s ease-out forwards; }
/* aviso de quem entrou na perseguição: no meio da tela e por mais tempo */
.hud-msg.mid { top: 50%; margin-top: calc(var(--u) * -10); padding: 0 calc(var(--u) * 10); line-height: 1.35; }
.hud-msg.mid.show { animation-duration: 2.6s; }
@keyframes msgpop {
  0% { opacity: 0; transform: scale(2.2); }
  12% { opacity: 1; transform: scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateY(calc(var(--u) * -14)); }
}

.hud-hint {
  position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 26);
  text-align: center;
  font-family: var(--fa);
  font-size: calc(var(--u) * 7);
  line-height: 1.8;
  color: #fff;
  text-shadow: var(--u) var(--u) 0 var(--ink);
  opacity: 0;
  transition: opacity .4s;
}
.hud-hint.on { opacity: 1; }
.hud-hint span {
  display: inline-block;
  background: rgba(7, 14, 32, .78);
  padding: calc(var(--u) * 4) calc(var(--u) * 8);
  box-shadow: inset 0 0 0 var(--u) #3a6fc0;
}

/* ---------------------------------------------------------------------
   Controle por toque (celular)
   --------------------------------------------------------------------- */
/* Toque na metade esquerda = esquerda, metade direita = direita.
   A dica aparece discreta no início de cada fase e some sozinha. */
#stage { touch-action: none; -webkit-user-select: none; user-select: none; }

.tap-hint {
  position: absolute; inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
}
.tap-hint.on { opacity: 1; }
.th-side {
  position: absolute; top: 80%;
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 6);
  transform: translateY(-50%);
  filter: drop-shadow(0 0 calc(var(--u) * 1.5) rgba(8, 16, 36, .6));
}
.th-side.left { left: 18%; }
.th-side.right { right: 18%; }
.th-chevs { display: flex; gap: calc(var(--u) * 3); }
.th-side.right .th-chevs { transform: scaleX(-1); }
.chev {
  display: block;
  width: calc(var(--u) * 13); height: calc(var(--u) * 22);
  background: rgba(255, 255, 255, .75);
  clip-path: polygon(100% 0, 58% 0, 0 50%, 58% 100%, 100% 100%, 42% 50%);
  animation: chev 1.2s ease-in-out infinite;
}
.chev:nth-child(2) { animation-delay: .15s; opacity: .55; }
@keyframes chev {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(calc(var(--u) * -5)); }
}
.th-side span {
  font-family: var(--fa);
  font-size: calc(var(--u) * 6);
  letter-spacing: .15em;
  color: rgba(255, 255, 255, .8);
}
.th-line {
  position: absolute; left: 50%; top: 70%; bottom: 8%;
  border-left: calc(var(--u) * 1) dashed rgba(255, 255, 255, .45);
  filter: drop-shadow(0 0 var(--u) rgba(8, 16, 36, .5));
}

/* brilho leve na borda do lado que está sendo tocado */
.tap-glow {
  position: absolute; top: 0; bottom: 0; width: 16%;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s;
}
.tap-glow.left { left: 0; background: linear-gradient(90deg, rgba(60, 130, 230, .22), rgba(60, 130, 230, 0)); }
.tap-glow.right { right: 0; background: linear-gradient(270deg, rgba(60, 130, 230, .22), rgba(60, 130, 230, 0)); }
.tap-glow.on { opacity: 1; }

@media (prefers-reduced-motion: reduce) { .chev { animation: none; } }

/* ---------------------------------------------------------------------
   Telas / painéis
   --------------------------------------------------------------------- */
.screen {
  position: absolute; inset: 0;
  z-index: 10;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  padding: calc(var(--u) * 14);
  background: linear-gradient(rgba(4, 9, 22, .25), rgba(4, 9, 22, .6));
}
.screen.show { display: flex; animation: fadein .22s ease-out; }
.screen.dark { background: rgba(3, 6, 16, .72); }
.screen.clear { background: none; pointer-events: none; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

.panel {
  width: 100%;
  max-height: 100%;
  background: linear-gradient(var(--panel-a), var(--panel-b));
  border: calc(var(--u) * 2) solid var(--ink);
  box-shadow:
    0 0 0 calc(var(--u) * 2) var(--line),
    inset 0 0 0 calc(var(--u) * 2) var(--line-dark),
    0 calc(var(--u) * 6) 0 calc(var(--u) * 2) rgba(0, 0, 0, .45);
  padding: calc(var(--u) * 14) calc(var(--u) * 12);
  display: flex; flex-direction: column;
  gap: calc(var(--u) * 9);
}
.panel.narrow { width: 88%; }
.panel.scroll { overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.panel.scroll::-webkit-scrollbar { width: calc(var(--u) * 5); }
.panel.scroll::-webkit-scrollbar-thumb { background: var(--line); }
.panel-head { display: flex; align-items: center; justify-content: space-between; }

.h {
  font-family: var(--fa);
  font-weight: normal;
  font-size: calc(var(--u) * 12);
  color: #fff;
  text-align: center;
  letter-spacing: .06em;
  line-height: 1.4;
  text-shadow: calc(var(--u) * 2) calc(var(--u) * 2) 0 var(--ink);
}
.h.big { font-size: calc(var(--u) * 15); }
.h.gold { color: var(--gold); }
.h.red { color: #ff4a4a; }
.h3 {
  font-family: var(--fa); font-weight: normal;
  font-size: calc(var(--u) * 7.5);
  color: var(--ice);
  margin-top: calc(var(--u) * 4);
  letter-spacing: .05em;
}
.sub {
  font-family: var(--fa); font-size: calc(var(--u) * 8);
  text-align: center; color: #ffb3b3;
  text-shadow: var(--u) var(--u) 0 var(--ink);
  margin-top: calc(var(--u) * -3);
}
.note, .small-p {
  font-size: calc(var(--u) * 12);
  line-height: 1.15;
  color: #bcd6f5;
  text-align: center;
}
.small-p { text-align: left; }

/* ---------------------------------------------------------------------
   Botões
   --------------------------------------------------------------------- */
.btn {
  font-family: var(--fa);
  font-size: calc(var(--u) * 8.5);
  letter-spacing: .05em;
  color: #fff;
  width: 100%;
  padding: calc(var(--u) * 9) calc(var(--u) * 10);
  background: linear-gradient(#2f6fd6, #1d4a9c);
  border: calc(var(--u) * 2) solid var(--ink);
  box-shadow:
    inset 0 calc(var(--u) * 2) 0 #6fb0ff,
    inset 0 calc(var(--u) * -3) 0 #133268,
    0 calc(var(--u) * 3) 0 var(--ink2);
  text-shadow: var(--u) var(--u) 0 var(--ink);
  cursor: pointer;
  outline: none;
  position: relative;
  transition: filter .1s;
}
.btn:hover { filter: brightness(1.15); }
.btn:focus-visible { box-shadow: inset 0 calc(var(--u) * 2) 0 #6fb0ff, inset 0 calc(var(--u) * -3) 0 #133268, 0 0 0 calc(var(--u) * 2) #fff, 0 calc(var(--u) * 3) 0 calc(var(--u) * 2) var(--ink2); }
.btn:focus-visible::before {
  content: '▶'; position: absolute; left: calc(var(--u) * 6); top: 50%;
  transform: translateY(-50%); font-size: calc(var(--u) * 7); animation: blink2 .6s steps(2) infinite;
}
@keyframes blink2 { 50% { opacity: 0; } }
.btn:active { transform: translateY(calc(var(--u) * 2)); box-shadow: inset 0 calc(var(--u) * 2) 0 #6fb0ff, inset 0 calc(var(--u) * -2) 0 #133268, 0 var(--u) 0 var(--ink2); }

.btn.primary {
  background: linear-gradient(#ffb431, #e8681a);
  box-shadow: inset 0 calc(var(--u) * 2) 0 #ffe08a, inset 0 calc(var(--u) * -3) 0 #9a3a0a, 0 calc(var(--u) * 3) 0 var(--ink2);
  font-size: calc(var(--u) * 10);
}
.btn.primary:focus-visible { box-shadow: inset 0 calc(var(--u) * 2) 0 #ffe08a, inset 0 calc(var(--u) * -3) 0 #9a3a0a, 0 0 0 calc(var(--u) * 2) #fff, 0 calc(var(--u) * 3) 0 calc(var(--u) * 2) var(--ink2); }
.btn.ghost {
  background: linear-gradient(#1a2f5c, #10204a);
  box-shadow: inset 0 0 0 var(--u) #5aa2ff, 0 calc(var(--u) * 3) 0 var(--ink2);
}
.btn.danger { background: linear-gradient(#c43333, #7e1420); box-shadow: inset 0 calc(var(--u) * 2) 0 #ff8a8a, inset 0 calc(var(--u) * -3) 0 #4a0810, 0 calc(var(--u) * 3) 0 var(--ink2); font-size: calc(var(--u) * 7); }
.btn.toggle { width: auto; min-width: calc(var(--u) * 92); font-size: calc(var(--u) * 7); padding: calc(var(--u) * 7) calc(var(--u) * 8); }
.btn.toggle.off { background: linear-gradient(#3a4458, #232a3a); box-shadow: inset 0 calc(var(--u) * 2) 0 #6a7690, inset 0 calc(var(--u) * -3) 0 #151a26, 0 calc(var(--u) * 3) 0 var(--ink2); color: #aab4c8; }

/* ---------------------------------------------------------------------
   Tela inicial
   --------------------------------------------------------------------- */
#scr-title { justify-content: space-between; padding-top: calc(var(--u) * 26); }
.title-wrap { display: flex; flex-direction: column; align-items: center; width: 100%; gap: calc(var(--u) * 8); }
#logo {
  width: calc(var(--u) * 340);
  max-width: 100%;
  height: auto;
  image-rendering: auto;          /* arte em alta resolução: não pixelar */
  -webkit-user-drag: none; user-select: none; pointer-events: none;
  filter: drop-shadow(0 calc(var(--u) * 4) 0 rgba(0, 0, 0, .35));
  animation: logo-in .7s cubic-bezier(.2, 1.6, .4, 1) both;
}
@keyframes logo-in { from { transform: translateY(calc(var(--u) * -60)) scale(.8); opacity: 0; } }
.tagline {
  font-family: var(--fa);
  font-size: calc(var(--u) * 8);
  letter-spacing: .28em;
  color: var(--ice);
  text-shadow: calc(var(--u) * 2) calc(var(--u) * 2) 0 var(--ink);
  margin-bottom: calc(var(--u) * 10);
  padding-left: .28em;
}
.menu { display: flex; flex-direction: column; gap: calc(var(--u) * 8); width: 78%; }
.wallet {
  display: inline-flex; align-items: center; gap: calc(var(--u) * 5);
  background: rgba(7, 14, 32, .8);
  box-shadow: inset 0 0 0 var(--u) #3a6fc0;
  padding: calc(var(--u) * 5) calc(var(--u) * 10);
  margin-top: calc(var(--u) * 8);
}
.wallet b { font-family: var(--fa); font-weight: normal; font-size: calc(var(--u) * 9); color: var(--gold); text-shadow: var(--u) var(--u) 0 #000; }
.wallet.small { margin: 0; padding: calc(var(--u) * 4) calc(var(--u) * 7); }
.foot {
  font-family: var(--fa);
  font-size: calc(var(--u) * 5.5);
  color: #9fc8ff;
  text-shadow: var(--u) var(--u) 0 var(--ink);
  opacity: .85;
  text-align: center;
}

/* botão de som da tela inicial */
.sound-btn {
  position: absolute;
  top: calc(var(--u) * 8); right: calc(var(--u) * 8);
  z-index: 2;
  display: flex; align-items: center; gap: calc(var(--u) * 5);
  font-family: var(--fa); font-size: calc(var(--u) * 6);
  color: #fff;
  padding: calc(var(--u) * 5) calc(var(--u) * 7);
  background: linear-gradient(#2f6fd6, #1d4a9c);
  border: calc(var(--u) * 1.5) solid var(--ink);
  box-shadow: inset 0 var(--u) 0 #6fb0ff, inset 0 calc(var(--u) * -2) 0 #133268, 0 calc(var(--u) * 2) 0 var(--ink2);
  text-shadow: var(--u) var(--u) 0 var(--ink);
  cursor: pointer;
  outline: none;
}
.sound-btn:hover { filter: brightness(1.15); }
.sound-btn:focus-visible { box-shadow: inset 0 var(--u) 0 #6fb0ff, 0 0 0 calc(var(--u) * 2) #fff; }
.sound-btn:active { transform: translateY(var(--u)); }
.sound-btn.off {
  background: linear-gradient(#3a4458, #232a3a);
  box-shadow: inset 0 var(--u) 0 #6a7690, inset 0 calc(var(--u) * -2) 0 #151a26, 0 calc(var(--u) * 2) 0 var(--ink2);
  color: #aab4c8;
}
.ico-sound {
  display: inline-block; flex: none;
  width: calc(var(--u) * 14); height: calc(var(--u) * 12);
  background: var(--img-sound-on) center / contain no-repeat;
  image-rendering: pixelated;
}
.sound-btn.off .ico-sound { background-image: var(--img-sound-off); }

/* ---------------------------------------------------------------------
   Nome do jogador
   --------------------------------------------------------------------- */
.name-input {
  width: 100%;
  font-family: var(--fa);
  font-size: max(16px, calc(var(--u) * 12));   /* >= 16px evita o zoom automático do iPhone */
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
  color: var(--gold);
  caret-color: var(--gold);
  background: #06102a;
  border: calc(var(--u) * 2) solid var(--line);
  box-shadow: inset 0 calc(var(--u) * 2) 0 rgba(0, 0, 0, .45);
  padding: calc(var(--u) * 10) calc(var(--u) * 8);
  outline: none;
  -webkit-user-select: text; user-select: text;
  touch-action: manipulation;
  border-radius: 0;
  -webkit-appearance: none; appearance: none;
}
.name-input::placeholder { color: #4d6a99; }
.name-input:focus { border-color: var(--gold); box-shadow: inset 0 calc(var(--u) * 2) 0 rgba(0, 0, 0, .45), 0 0 calc(var(--u) * 10) rgba(255, 201, 58, .35); }
.name-input.shake { animation: shake .3s; }
.name-saved { display: flex; flex-direction: column; gap: calc(var(--u) * 5); }
.name-saved-lbl { font-family: var(--fa); font-size: calc(var(--u) * 5.5); color: #9fc8ff; letter-spacing: .08em; }
.name-chips { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 5); }
.name-chip {
  font-family: var(--fa); font-size: calc(var(--u) * 6.5);
  color: #fff;
  background: #16306a;
  border: calc(var(--u) * 1.5) solid var(--ink);
  box-shadow: inset 0 0 0 var(--u) #3a6fc0;
  padding: calc(var(--u) * 5) calc(var(--u) * 7);
  cursor: pointer; outline: none;
  display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 2);
}
.name-chip small { font-size: calc(var(--u) * 4.5); color: #9fc8ff; }
.name-chip:hover, .name-chip:focus-visible, .name-chip.sel { box-shadow: inset 0 0 0 calc(var(--u) * 1.5) var(--gold); }
.player-tag {
  font-family: var(--fa); font-size: calc(var(--u) * 6);
  color: #9fc8ff; text-align: center;
  margin-top: calc(var(--u) * -4);
}
.player-tag b { color: var(--gold); font-weight: normal; }

/* ---------------------------------------------------------------------
   Seleção de fases
   --------------------------------------------------------------------- */
.phase-list { display: flex; flex-direction: column; gap: calc(var(--u) * 6); }
.phase-card {
  display: flex; align-items: center; gap: calc(var(--u) * 8);
  width: 100%;
  text-align: left;
  color: #fff;
  font-family: var(--fb);
  background: linear-gradient(#18336a, #0f2250);
  border: calc(var(--u) * 2) solid var(--ink);
  box-shadow: inset 0 0 0 var(--u) #3a6fc0, 0 calc(var(--u) * 2) 0 var(--ink2);
  padding: calc(var(--u) * 4);
  cursor: pointer;
  outline: none;
  position: relative;
}
.phase-card:hover, .phase-card:focus-visible { box-shadow: inset 0 0 0 calc(var(--u) * 2) #ffc93a, 0 calc(var(--u) * 2) 0 var(--ink2); }
.phase-card canvas { width: calc(var(--u) * 58); height: calc(var(--u) * 46); flex: none; box-shadow: 0 0 0 var(--u) var(--ink); }
.phase-card .pc-info { display: flex; flex-direction: column; gap: calc(var(--u) * 2); min-width: 0; }
.phase-card .pc-num { font-family: var(--fa); font-size: calc(var(--u) * 6); color: #9fc8ff; }
.phase-card .pc-name { font-family: var(--fa); font-size: calc(var(--u) * 7.5); line-height: 1.3; }
.phase-card .pc-meta { font-size: calc(var(--u) * 11); color: #bcd6f5; line-height: 1; }
.phase-card .pc-best { font-size: calc(var(--u) * 11); color: var(--gold); line-height: 1; }
.phase-card.locked { filter: grayscale(.9) brightness(.6); cursor: not-allowed; }
.phase-card.locked::after {
  content: ''; position: absolute; right: calc(var(--u) * 10); top: 50%; transform: translateY(-50%);
  width: calc(var(--u) * 14); height: calc(var(--u) * 16);
  background: var(--img-lock) center / contain no-repeat; image-rendering: pixelated;
}

/* ---------------------------------------------------------------------
   Pranchas
   --------------------------------------------------------------------- */
.board-preview {
  display: flex; gap: calc(var(--u) * 10); align-items: center;
  background: rgba(5, 12, 30, .6);
  box-shadow: inset 0 0 0 var(--u) #2c5da8;
  padding: calc(var(--u) * 6);
}
#board-rider { width: calc(var(--u) * 84); height: calc(var(--u) * 84); flex: none; background: #dbe9fa; box-shadow: 0 0 0 calc(var(--u) * 2) var(--ink); }
.bp-info { display: flex; flex-direction: column; gap: calc(var(--u) * 4); flex: 1; min-width: 0; }
.bp-info b { font-family: var(--fa); font-weight: normal; font-size: calc(var(--u) * 10); }
#bp-status { font-family: var(--fa); font-size: calc(var(--u) * 6); color: var(--green); }
#bp-status.buy { color: var(--gold); }
#bp-status.no { color: #ff8080; }
.stat-bars { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--u) * 2) calc(var(--u) * 5); align-items: center; font-size: calc(var(--u) * 10); color: #9fc8ff; margin-top: calc(var(--u) * 2); }
.stat-bars .sb { height: calc(var(--u) * 4); background: #0b1733; box-shadow: inset 0 0 0 var(--u) #1d3f78; }
.stat-bars .sb i { display: block; height: 100%; background: #5aa2ff; }
.stat-bars .soon { grid-column: 1 / -1; font-family: var(--fa); font-size: calc(var(--u) * 5); color: #7f9cc8; }

.board-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 6); }
.board-card {
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 3);
  background: linear-gradient(#18336a, #0f2250);
  border: calc(var(--u) * 2) solid var(--ink);
  box-shadow: inset 0 0 0 var(--u) #3a6fc0;
  padding: calc(var(--u) * 5) calc(var(--u) * 3);
  color: #fff; cursor: pointer; outline: none;
  position: relative;
}
.board-card canvas { width: calc(var(--u) * 40); height: calc(var(--u) * 60); }
.board-card .bc-name { font-family: var(--fa); font-size: calc(var(--u) * 6); }
.board-card .bc-price { font-family: var(--fa); font-size: calc(var(--u) * 5.5); color: var(--gold); display: flex; align-items: center; gap: calc(var(--u) * 3); }
.board-card .bc-price .ico-coin { width: calc(var(--u) * 8); height: calc(var(--u) * 8); }
.board-card.owned .bc-price { color: #9fc8ff; }
.board-card.equipped { box-shadow: inset 0 0 0 calc(var(--u) * 2) var(--green); }
.board-card.equipped .bc-price { color: var(--green); }
.board-card.locked canvas { filter: brightness(.55) saturate(.6); }
.board-card.locked::after {
  content: ''; position: absolute; left: 50%; top: calc(var(--u) * 26); transform: translateX(-50%);
  width: calc(var(--u) * 12); height: calc(var(--u) * 14);
  background: var(--img-lock) center / contain no-repeat; image-rendering: pixelated;
}
.board-card.cant .bc-price { color: #ff8080; }
.board-card:hover, .board-card:focus-visible { box-shadow: inset 0 0 0 calc(var(--u) * 2) var(--gold); }
.board-card.shake { animation: shake .3s; }
@keyframes shake { 25% { transform: translateX(calc(var(--u) * -3)); } 75% { transform: translateX(calc(var(--u) * 3)); } }

/* ---------------------------------------------------------------------
   Como jogar
   --------------------------------------------------------------------- */
.howto { display: flex; flex-direction: column; gap: calc(var(--u) * 8); }
.how-row { display: flex; gap: calc(var(--u) * 8); align-items: center; }
.how-row p { font-size: calc(var(--u) * 12.5); line-height: 1.1; color: #dbe9fa; }
.how-row b, .elements b { color: #fff; font-weight: normal; }
b.red { color: #ff6a6a !important; }
b.gold { color: var(--gold) !important; }
.how-ico { width: calc(var(--u) * 36); height: calc(var(--u) * 36); flex: none; background: rgba(210, 228, 250, .9); box-shadow: 0 0 0 calc(var(--u) * 1.5) var(--ink), inset 0 0 0 var(--u) #fff; }
.keys { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 4); padding-left: calc(var(--u) * 44); }
.key {
  font-family: var(--fa); font-size: calc(var(--u) * 7);
  min-width: calc(var(--u) * 18); height: calc(var(--u) * 18);
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(#2f6fd6, #1d4a9c);
  box-shadow: inset 0 var(--u) 0 #6fb0ff, 0 calc(var(--u) * 2) 0 var(--ink);
}
.or { font-size: calc(var(--u) * 11); color: #9fc8ff; }
.elements { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 6) calc(var(--u) * 8); }
.el { display: flex; align-items: center; gap: calc(var(--u) * 6); }
.el canvas { width: calc(var(--u) * 28); height: calc(var(--u) * 28); flex: none; background: rgba(210, 228, 250, .9); box-shadow: 0 0 0 var(--u) var(--ink); }
.el span { font-size: calc(var(--u) * 11); line-height: 1; color: #bcd6f5; }
.el b { display: block; font-size: calc(var(--u) * 12.5); }

/* ---------------------------------------------------------------------
   Ranking
   --------------------------------------------------------------------- */
.rank-table { width: 100%; border-collapse: collapse; font-size: calc(var(--u) * 12); }
.rank-table th { font-family: var(--fa); font-weight: normal; font-size: calc(var(--u) * 5); color: #9fc8ff; text-align: left; padding: calc(var(--u) * 3); border-bottom: var(--u) solid #2c5da8; }
.rank-table td { padding: calc(var(--u) * 2) calc(var(--u) * 3); border-bottom: var(--u) solid rgba(44, 93, 168, .35); }
.rank-table tr:nth-child(1) td:first-child { color: var(--gold); }
.rank-table tr:nth-child(2) td:first-child { color: #d9e3f0; }
.rank-table tr:nth-child(3) td:first-child { color: #e0955a; }
.rank-table .rk-name { color: var(--gold); max-width: calc(var(--u) * 110); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-table .won { color: var(--green); }
.rank-table .lost { color: #ff8080; }
.rank-empty { text-align: center; font-size: calc(var(--u) * 13); color: #9fc8ff; padding: calc(var(--u) * 10) 0; }
.rank-best { display: flex; flex-direction: column; gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 10); }
.rank-best div { display: flex; justify-content: space-between; font-size: calc(var(--u) * 12); background: rgba(5, 12, 30, .5); padding: calc(var(--u) * 3) calc(var(--u) * 6); }
.rank-best span:first-child { font-family: var(--fa); font-size: calc(var(--u) * 6); color: #9fc8ff; align-self: center; }

/* ---------------------------------------------------------------------
   Configurações
   --------------------------------------------------------------------- */
.settings { display: flex; flex-direction: column; gap: calc(var(--u) * 8); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 8); }
.set-row > span { font-family: var(--fa); font-size: calc(var(--u) * 6.5); line-height: 1.4; }

/* ---------------------------------------------------------------------
   Intro de fase + contagem
   --------------------------------------------------------------------- */
.intro-card {
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 6);
  background: rgba(6, 12, 30, .86);
  box-shadow: 0 0 0 calc(var(--u) * 2) var(--ink), 0 0 0 calc(var(--u) * 4) var(--line), 0 calc(var(--u) * 6) 0 calc(var(--u) * 4) rgba(0,0,0,.35);
  padding: calc(var(--u) * 12) calc(var(--u) * 14);
  width: 88%;
  margin-top: calc(var(--u) * 150);
  text-align: center;
  animation: card-in .4s cubic-bezier(.2, 1.5, .4, 1) both;
}
.intro-diff { font-family: var(--fa); font-size: calc(var(--u) * 5.5); color: #9fc8ff; letter-spacing: .06em; }
.intro-card .btn { pointer-events: auto; align-self: stretch; margin-top: calc(var(--u) * 4); }
.intro-card.out .btn { pointer-events: none; }
.intro-card.out { animation: card-out .3s ease-in forwards; }
@keyframes card-in { from { transform: scale(.6); opacity: 0; } }
@keyframes card-out { to { transform: translateY(calc(var(--u) * -20)); opacity: 0; } }
.intro-fase { font-family: var(--fa); font-size: calc(var(--u) * 8); color: var(--gold); letter-spacing: .1em; }
.intro-card h2 { font-family: var(--fa); font-weight: normal; font-size: calc(var(--u) * 12.5); line-height: 1.4; text-shadow: calc(var(--u) * 2) calc(var(--u) * 2) 0 var(--ink); }
.intro-card p { font-size: calc(var(--u) * 13); line-height: 1.1; color: #bcd6f5; }
.intro-obj { display: flex; gap: calc(var(--u) * 8); }
.intro-obj span { font-family: var(--fa); font-size: calc(var(--u) * 6.5); background: #1d3f78; padding: calc(var(--u) * 4) calc(var(--u) * 6); box-shadow: inset 0 0 0 var(--u) var(--line); }
.intro-obj span:last-child { background: #6a1018; box-shadow: inset 0 0 0 var(--u) #ff6a6a; }
.count {
  position: absolute; left: 0; right: 0; top: 52%;
  text-align: center;
  font-family: var(--fa);
  font-size: calc(var(--u) * 44);
  color: #fff;
  text-shadow:
    calc(var(--u) * 3) calc(var(--u) * 3) 0 var(--ink),
    calc(var(--u) * -2) calc(var(--u) * -2) 0 var(--ink),
    calc(var(--u) * 2) calc(var(--u) * -2) 0 var(--ink),
    calc(var(--u) * -2) calc(var(--u) * 2) 0 var(--ink);
}
.count.go { color: var(--gold); font-size: calc(var(--u) * 36); }
.count.pop { animation: countpop .6s ease-out forwards; }
@keyframes countpop { 0% { transform: scale(2.4); opacity: 0; } 20% { transform: scale(1); opacity: 1; } 80% { opacity: 1; } 100% { transform: scale(.8); opacity: 0; } }

/* ---------------------------------------------------------------------
   Resultado (vitória / game over)
   --------------------------------------------------------------------- */
.result { align-items: stretch; }
.stats { display: flex; flex-direction: column; gap: calc(var(--u) * 2); background: rgba(5, 12, 30, .6); box-shadow: inset 0 0 0 var(--u) #2c5da8; padding: calc(var(--u) * 6) calc(var(--u) * 8); }
.stats div { display: flex; justify-content: space-between; align-items: baseline; gap: calc(var(--u) * 8); }
.stats dt { font-family: var(--fa); font-size: calc(var(--u) * 5.8); color: #9fc8ff; }
.stats dd { font-size: calc(var(--u) * 14); color: #fff; text-align: right; }
.stats dd.hl { color: var(--gold); }
.badge {
  align-self: center;
  font-family: var(--fa); font-size: calc(var(--u) * 7);
  color: var(--ink);
  background: var(--gold);
  padding: calc(var(--u) * 4) calc(var(--u) * 8);
  box-shadow: 0 0 0 calc(var(--u) * 1.5) var(--ink), 0 0 calc(var(--u) * 14) rgba(255, 200, 60, .6);
  animation: blink .5s steps(2) infinite;
}
.unlock { font-family: var(--fa); font-size: calc(var(--u) * 6.5); color: var(--green); text-align: center; line-height: 1.5; }

/* ---------------------------------------------------------------------
   Toast
   --------------------------------------------------------------------- */
.toast {
  position: absolute; left: 50%; bottom: calc(var(--u) * 24);
  transform: translate(-50%, calc(var(--u) * 20));
  z-index: 30;
  font-family: var(--fa); font-size: calc(var(--u) * 6.5);
  color: #fff; white-space: nowrap;
  background: #10204a;
  box-shadow: 0 0 0 calc(var(--u) * 1.5) var(--ink), inset 0 0 0 var(--u) var(--line);
  padding: calc(var(--u) * 6) calc(var(--u) * 10);
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* barra do chefão (LOBO ALFA) */
.boss-bar {
  position: absolute; left: 50%; top: calc(var(--u) * 6);
  transform: translateX(-50%);
  width: calc(var(--u) * 150);
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2);
  background: rgba(30, 4, 10, .86);
  border: calc(var(--u) * 1.5) solid #2a0508;
  box-shadow: inset 0 0 0 var(--u) #ff4a5a, 0 0 calc(var(--u) * 12) rgba(255, 30, 50, .35);
  padding: calc(var(--u) * 3) calc(var(--u) * 6) calc(var(--u) * 4);
}
.boss-bar b { font-family: var(--fa); font-weight: normal; font-size: calc(var(--u) * 6.5); color: #ff5a5a; letter-spacing: .12em; text-shadow: var(--u) var(--u) 0 #000; }
.boss-bar .bb { width: 100%; height: calc(var(--u) * 5); background: #12040a; box-shadow: inset 0 0 0 var(--u) #5a0a14; }
.boss-bar .bb i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff2a3a, #ff8a3a); }
.boss-bar small { font-family: var(--fa); font-size: calc(var(--u) * 4); color: #ffb3b3; letter-spacing: .05em; }
/* indicador do PULO (recarga) */
.hud-jump { min-width: calc(var(--u) * 50); align-items: stretch; }
.hud-jump .bar { height: calc(var(--u) * 4); margin-top: calc(var(--u) * 2); background: #13244a; box-shadow: inset 0 0 0 var(--u) #0a1224; }
.hud-jump .bar i { display: block; height: 100%; width: 100%; background: #9fe3ff; }
.hud-jump.ready { box-shadow: inset 0 0 0 var(--u) #9fe3ff, 0 0 calc(var(--u) * 8) rgba(159, 227, 255, .45); }
.hud-jump.ready .lbl { color: #fff; }
.th-jump {
  position: absolute; left: 0; right: 0; top: 92%;
  text-align: center;
  font-family: var(--fa); font-size: calc(var(--u) * 6);
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .8);
  filter: drop-shadow(0 0 calc(var(--u) * 1.5) rgba(8, 16, 36, .7));
}
/* botão VIDA EXTRA (continuar por 300 moedas) */
.btn.revive {
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 3);
  background: linear-gradient(#3fd07a, #1c8a46);
  box-shadow: inset 0 calc(var(--u) * 2) 0 #a8ffcb, inset 0 calc(var(--u) * -3) 0 #0e5a2c, 0 calc(var(--u) * 3) 0 var(--ink2);
  font-size: calc(var(--u) * 9);
}
.btn.revive .ico-coin { width: calc(var(--u) * 10); height: calc(var(--u) * 10); vertical-align: -12%; }
.btn.revive small { font-size: calc(var(--u) * 5); color: #eafff2; letter-spacing: .06em; }
.btn.revive.cant {
  background: linear-gradient(#4a5468, #2c3344);
  box-shadow: inset 0 calc(var(--u) * 2) 0 #7a86a0, inset 0 calc(var(--u) * -3) 0 #1a1f2c, 0 calc(var(--u) * 3) 0 var(--ink2);
  color: #c8d0e0;
}
.btn.revive.cant small { color: #ff9a9a; }
.btn.revive.used {
  background: linear-gradient(#2c3344, #1e2432);
  box-shadow: inset 0 0 0 var(--u) #3a4458;
  color: #8a94a8; cursor: default; filter: none;
}
.btn.revive.used small { color: #6a7488; }
.btn.shake { animation: shake .3s; }
.btn.revive .rv-main { display: inline-flex; align-items: center; gap: calc(var(--u) * 5); white-space: nowrap; }

/* ---------------------------------------------------------------------
   Tudo centralizado (tela inicial no meio da tela; textos das telas ao centro)
   --------------------------------------------------------------------- */
#scr-title { justify-content: center; padding-top: calc(var(--u) * 14); }
#scr-title .foot { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 12); }
.title-wrap { align-items: center; text-align: center; }
.menu { margin: 0 auto; }

.panel { text-align: center; }
.panel-head { flex-direction: column; gap: calc(var(--u) * 6); }
.note, .small-p { text-align: center; }
.h3 { text-align: center; }

.how-row { flex-direction: column; text-align: center; }
.how-row p { text-align: center; }
.keys { justify-content: center; padding-left: 0; }
.elements { justify-items: center; }
.el { flex-direction: column; text-align: center; gap: calc(var(--u) * 3); }

.phase-card { justify-content: flex-start; text-align: center; }   /* miniaturas alinhadas numa coluna à esquerda */
.phase-card .pc-info { align-items: center; flex: 1; padding-right: calc(var(--u) * 22); }   /* texto centralizado no espaço restante (folga do cadeado à direita) */

.board-preview { justify-content: center; }
.bp-info { flex: none; align-items: center; text-align: center; }
.stat-bars { justify-items: center; }
.stat-bars .sb { width: calc(var(--u) * 90); }

.rank-table th, .rank-table td { text-align: center; }
.rank-table .rk-name { margin: 0 auto; }
.rank-best div { flex-direction: column; align-items: center; gap: calc(var(--u) * 2); }

.set-row { flex-direction: column; justify-content: center; gap: calc(var(--u) * 4); }
.set-row > span { text-align: center; }
.btn.toggle { min-width: calc(var(--u) * 150); }

.stats div { justify-content: center; align-items: baseline; gap: calc(var(--u) * 8); }
.stats dt::after { content: ':'; }
.stats dd { text-align: center; }
.name-saved { align-items: center; }
.name-chips { justify-content: center; }
.name-chip { align-items: center; }
#logo { margin-bottom: calc(var(--u) * 10); }

/* ---------------------------------------------------------------------
   Mundos
   --------------------------------------------------------------------- */
.world-list { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 6); }
.world-card {
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 3);
  color: #fff; text-align: center; font-family: var(--fb);
  background: linear-gradient(#18336a, #0f2250);
  border: calc(var(--u) * 2) solid var(--ink);
  box-shadow: inset 0 0 0 var(--u) #3a6fc0, 0 calc(var(--u) * 2) 0 var(--ink2);
  padding: calc(var(--u) * 5) calc(var(--u) * 4);
  cursor: pointer; outline: none;
}
.world-card:hover, .world-card:focus-visible { box-shadow: inset 0 0 0 calc(var(--u) * 2) var(--gold), 0 calc(var(--u) * 2) 0 var(--ink2); }
.world-card canvas { width: calc(var(--u) * 87); height: calc(var(--u) * 69); box-shadow: 0 0 0 var(--u) var(--ink); }
.world-card .wc-lock {
  width: calc(var(--u) * 87); height: calc(var(--u) * 30);
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 10, 24, .55); box-shadow: 0 0 0 var(--u) var(--ink);
}
.world-card .wc-num { font-family: var(--fa); font-size: calc(var(--u) * 5.5); color: #9fc8ff; }
.world-card .wc-name { font-family: var(--fa); font-size: calc(var(--u) * 6.5); line-height: 1.35; }
.world-card .wc-meta { font-size: calc(var(--u) * 11); line-height: 1; color: var(--gold); }
.world-card.locked { filter: grayscale(.85) brightness(.62); cursor: not-allowed; }
.world-card.locked .wc-meta { color: #bcd6f5; }
/* ---------------------------------------------------------------------
   Loja: abas (pranchas, roupas, motos)
   --------------------------------------------------------------------- */
.shop-tabs { display: flex; gap: calc(var(--u) * 4); width: 100%; }
.shop-tabs .btn.tab { flex: 1; min-width: 0; padding: calc(var(--u) * 6) calc(var(--u) * 2); font-size: calc(var(--u) * 6.5); opacity: .7; }
.shop-tabs .btn.tab.on { opacity: 1; box-shadow: inset 0 0 0 calc(var(--u) * 2) var(--gold), 0 calc(var(--u) * 2) 0 var(--ink2); color: var(--gold); }
.board-card canvas, #board-rider { image-rendering: pixelated; }