:root {
  --bg: #0d0812;
  --panel: rgba(26, 17, 34, 0.86);
  --panel-2: rgba(40, 27, 52, 0.9);
  --line: rgba(255, 255, 255, 0.09);
  --text: #f3eef7;
  --muted: #a99bb5;
  --fire: #ff6a1f;
  --fire-light: #ffd25a;
  --water: #2f8cff;
  --water-light: #9fe3ff;
  --gold: #ffd23f;
  --violet: #d65bff;
  --good: #4dffa6;
  --bad: #ff5b6b;
  --radius: 14px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;
  --display: "Impact", "Haettenschweiler", "Arial Narrow Bold", var(--font);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}

body {
  background:
    radial-gradient(900px 600px at 0% 100%, rgba(255, 106, 31, 0.22), transparent 60%),
    radial-gradient(900px 600px at 100% 0%, rgba(47, 140, 255, 0.22), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

[hidden] { display: none !important; }

button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }

.screen { position: relative; min-height: 100vh; }

/* ------------------------------------------------------------ comuns */

.menu-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; margin-top: 22px; }
@media (max-width: 820px) { .menu-grid { grid-template-columns: 1fr; } }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.panel h2, .side-panel h2 {
  margin: 0 0 14px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.btn {
  padding: 11px 20px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--text);
  color: #170e1d;
  font-weight: 800;
}
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--text); border-color: rgba(255, 255, 255, 0.25); }
.btn.small { padding: 7px 14px; font-size: 14px; }
.btn:disabled { opacity: 0.6; }

.hint { color: var(--muted); font-size: 13px; margin: 10px 0 0; }
.error { color: var(--bad); font-size: 14px; min-height: 1.2em; margin: 6px 0; }
.ok { color: var(--good); }

kbd {
  display: inline-block;
  min-width: 24px;
  padding: 2px 6px;
  margin-right: 2px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-bottom-width: 3px;
  background: rgba(255, 255, 255, 0.06);
  font: 700 12px var(--font);
  text-align: center;
}

/* ------------------------------------------------------------ menus (início, modo, cartas) */

#menu-bg { position: fixed; inset: 0; width: 100%; height: 100%; display: block; filter: saturate(1.1) brightness(0.75); }
#menu-bg[hidden] { display: none; }
.menu-screen { position: relative; min-height: 100vh; overflow: hidden; }
.dim { position: fixed; inset: 0; background: rgba(8, 4, 14, 0.72); backdrop-filter: blur(3px); }
.dim.strong { background: radial-gradient(1200px 600px at 50% 120%, rgba(58, 21, 48, 0.92), rgba(12, 6, 16, 0.94) 60%); backdrop-filter: blur(6px); }

/* fundo do menu: degradê translúcido que some aos poucos (o cenário continua aparecendo) */
.home-shade { position: fixed; inset: 0; background:
    linear-gradient(90deg, rgba(9,6,18,.82) 0%, rgba(9,6,18,.62) 20%, rgba(9,6,18,.26) 36%, rgba(9,6,18,0) 50%),
    linear-gradient(0deg, rgba(9,6,18,.35), transparent 22%); }
/* na tela inicial o cenário fica um pouco mais claro */
#menu-bg.home-lit { filter: saturate(1.19) brightness(0.84) contrast(1.02); }

/* etiqueta "partida de demonstração": ponto vermelho pulsando, contorno e luz no mesmo ritmo */
.live-tag {
  position: fixed; top: 31px; right: 43px; z-index: 1; display: flex; align-items: center; gap: 9px;
  padding: 9px 17px 9px 14px; border-radius: 999px; background: rgba(14,9,24,.58); border: 1px solid rgba(232,52,74,.24);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: 12.5px; font-weight: 700; letter-spacing: .22em; color: rgba(255,255,255,.88);
  animation: liveEdge 2.8s ease-in-out infinite;
}
.live-tag::before {
  content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ff8c98, #e8344a 60%);
  animation: liveDot 2.8s ease-in-out infinite;
}
@keyframes liveDot {
  0%, 100% { box-shadow: 0 0 3px .5px rgba(255,70,90,.55), 0 0 0 1.5px rgba(232,52,74,.16); filter: brightness(.92); }
  50%      { box-shadow: 0 0 9px 2px rgba(255,70,90,.85), 0 0 0 5px rgba(232,52,74,.10); filter: brightness(1.15); }
}
@keyframes liveEdge {
  0%, 100% { border-color: rgba(232,52,74,.22); box-shadow: 0 0 8px rgba(232,52,74,.05); }
  50%      { border-color: rgba(232,52,74,.55); box-shadow: 0 0 17px rgba(232,52,74,.18); }
}

.home-menu {
  position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 6px; min-height: 100vh; padding: 40px 0 80px 67px; width: min(640px, 100%);
}
.logo { margin: 0 0 38px 8px; }
.logo b {
  display: block; white-space: nowrap; font-size: clamp(46px, 6.5vw, 84px); font-weight: 900; font-style: italic; line-height: .95;
  letter-spacing: -.01em; padding-right: 8px;
  background: linear-gradient(90deg, #ffd25a, #ff6a1f 42%, #c77dff 62%, #4fb0ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)) drop-shadow(0 0 20px rgba(255,106,31,.22));
}
.logo small { display: block; margin: 16px 0 0 4px; letter-spacing: .42em; font-size: 15px; font-weight: 600; color: rgba(236,230,248,.72); white-space: nowrap; }
.logo small i { font-style: normal; color: rgba(255,255,255,.28); margin: 0 .2em 0 -.1em; }

/* opções: a faixa laranja (.home-band) desliza até a opção escolhida */
.home-item {
  position: relative; z-index: 1; display: block; width: 100%; height: 60px; padding: 0 0 0 28px; text-align: left; white-space: nowrap;
  font-size: 24px; line-height: 60px; font-weight: 900; font-style: italic; letter-spacing: .06em;
  background: none; border: 0; color: rgba(236,232,246,.62);
  transition: color .25s, transform .32s cubic-bezier(.2,.8,.2,1), font-size .32s cubic-bezier(.2,.8,.2,1), text-shadow .25s;
}
.home-item::before {
  content: ""; position: absolute; left: 8px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
  border: 1px solid rgba(255,255,255,.3); transform: rotate(45deg); transition: opacity .25s, border-color .25s;
}
.home-item:hover:not(.on) { color: rgba(255,255,255,.9); transform: translateX(4px); }
.home-item:hover:not(.on)::before { border-color: #ffd25a; }
.home-item.on { color: #fff; font-size: 30px; transform: translateX(6px); text-shadow: 0 1.5px 4px rgba(90,25,0,.45); }
.home-item.on::before { opacity: 0; }
@media (max-width: 560px) {
  .logo small { font-size: 12px; letter-spacing: .24em; }
  .home-menu { padding-left: 32px; }
  .home-band { left: 32px; }
  .live-tag { top: 18px; right: 16px; font-size: 11px; }
}
/* a faixa laranja já mostra a opção com foco */
.home-item:focus, .home-item:focus-visible { outline: none; }
.home-band {
  position: absolute; left: 67px; top: 0; width: min(520px, 88vw); height: 60px; pointer-events: none;
  filter: drop-shadow(0 4px 15px rgba(255,90,20,.28));
  transform: translateY(var(--y, 0px)) skewX(-12deg); transform-origin: left center;
  transition: transform .32s cubic-bezier(.2,.8,.2,1);
}
.home-band .fill {
  position: absolute; inset: 0; border-radius: 3px 0 0 3px;
  background: linear-gradient(90deg, rgba(255,112,34,.97) 0%, rgba(246,96,30,.9) 30%, rgba(255,106,31,.82) 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 20%, rgba(0,0,0,.86) 33%, rgba(0,0,0,.62) 47%, rgba(0,0,0,.38) 61%, rgba(0,0,0,.18) 75%, rgba(0,0,0,.06) 87%, transparent 97%);
          mask-image: linear-gradient(90deg, #000 0%, #000 20%, rgba(0,0,0,.86) 33%, rgba(0,0,0,.62) 47%, rgba(0,0,0,.38) 61%, rgba(0,0,0,.18) 75%, rgba(0,0,0,.06) 87%, transparent 97%);
}
.home-band .fill::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,.18), transparent 55%); }
.home-band::before { content: ""; position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: 4px; background: #ffd25a; border-radius: 3px; }

.account-box {
  position: fixed; left: 56px; bottom: 30px; z-index: 1;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px;
}
.account-box .who { color: var(--muted); }
.account-box .who strong { color: #ffd25a; }

/* janelas do menu (controles, configurações): no meio da tela, com destaque */
.side-panel {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4;
  width: min(440px, calc(100% - 32px)); max-height: calc(100vh - 40px); overflow-y: auto;
  padding: 20px 22px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(30, 14, 34, .96), rgba(14, 7, 20, .96));
  border: 1px solid rgba(255, 210, 90, .35);
  box-shadow: 0 0 0 1px rgba(255, 140, 60, .12), 0 0 36px rgba(255, 140, 60, .18), 0 24px 60px rgba(0, 0, 0, .65);
  animation: modal-in .18s ease-out;
}
.side-panel h2 { color: #ffd25a; text-shadow: 0 0 14px rgba(255, 170, 60, .35); }
.side-panel[hidden] { display: none; }
.keys { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 14px; }
.keys li { display: grid; grid-template-columns: 170px 1fr; align-items: center; gap: 10px; }
.keys li > span { color: var(--muted); font-size: 12px; }
/* tela de controles: trocar as teclas */
.controls-panel { width: min(680px, calc(100% - 32px)); }
/* fundo escuro e borrado atrás das janelas do menu */
.panel-backdrop {
  position: fixed; inset: 0; z-index: 3;
  background: rgba(5, 2, 10, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: fade-in .18s ease-out;
}
.panel-backdrop[hidden] { display: none; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translate(-50%, -48%) scale(.97); } }
.bind-head, .bind-row { display: grid; grid-template-columns: 1fr 170px 170px; gap: 8px; align-items: center; }
.bind-head { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 10px 0 6px; }
.bind-list { display: grid; gap: 6px; }
.bind-row.menu-first { margin-top: 6px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .1); }
.bind-row .name { font-size: 14px; font-weight: 600; }
.bind-slot { position: relative; display: flex; }
.bind-btn {
  flex: 1; min-width: 0; padding: 7px 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,.22); border-bottom-width: 3px;
  background: rgba(255,255,255,.07); color: #fff; font: 700 13px system-ui, sans-serif; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bind-btn:hover, .bind-btn:focus-visible { border-color: #ffd25a; outline: none; }
.bind-btn.empty { color: var(--muted); font-weight: 500; border-style: dashed; }
.bind-btn.listening { background: #ffd25a; color: #1a0f05; border-color: #ffd25a; animation: bindPulse .8s ease-in-out infinite alternate; }
@keyframes bindPulse { to { background: #fff1b0; } }
.bind-clear {
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; border: 0; padding: 0;
  background: #e8263a; color: #fff; font: 800 11px/18px system-ui; cursor: pointer;
}
.bind-msg { min-height: 1.3em; margin: 8px 0 4px; font-size: 13px; color: #ffd25a; }
.bind-msg.error { color: var(--bad); }
.fixed-keys { margin-top: 6px; }
.panel-actions { display: flex; justify-content: flex-end; margin-top: 16px; }
.bind-actions { display: flex; gap: 8px; justify-content: space-between; margin-top: 12px; }

.toggle { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-weight: 600; }
.toggle input { width: 18px; height: 18px; accent-color: #ff6a1f; }

/* cabeçalho dos passos (modo, elemento, mapa): voltar, "passo X de 4" com
   uma barrinha de progresso e o título */
.step-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 22px; padding: 30px 40px 0; }
.step-head small { display: flex; align-items: center; gap: 12px; letter-spacing: .3em; font-size: 11px; color: rgba(236,230,248,.7); font-weight: 800; }
.step-head h1 { margin: 6px 0 0; font-size: clamp(24px, 3.4vw, 40px); font-weight: 900; font-style: italic; letter-spacing: .04em; line-height: 1; text-shadow: 0 3px 14px rgba(0,0,0,.45); }
.step-bar { display: inline-flex; gap: 4px; }
.step-bar i { width: 26px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.16); }
.step-bar i.on { background: linear-gradient(90deg, #ff8a3d, #ffd25a); box-shadow: 0 0 8px rgba(255,170,70,.55); }
.back {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 18px 0 14px;
  background: rgba(16,10,28,.55); border: 1px solid rgba(255,255,255,.16); color: #fff; border-radius: 10px;
  font-weight: 800; font-size: 14px; letter-spacing: .02em; transform: skewX(-8deg);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 6px 18px rgba(0,0,0,.3);
  transition: background .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.back:hover, .back:focus-visible { background: rgba(40,26,60,.7); border-color: rgba(255,210,90,.55); box-shadow: 0 6px 22px rgba(255,170,70,.15); outline: none; transform: skewX(-8deg) translateX(-2px); }

/* ---------- tela de modos ---------- */
/* fundo: o cenário um pouco mais visível, com luz no meio e bordas escuras */
#menu-bg.mode-lit { filter: saturate(1.12) brightness(.86); }
#screen-mode .dim {
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(40,22,70,.30), rgba(12,6,22,.62) 70%, rgba(6,3,12,.84)),
    linear-gradient(180deg, rgba(8,4,16,.55), rgba(8,4,16,.15) 30%, rgba(8,4,16,.25) 70%, rgba(8,4,16,.7));
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
#screen-mode:not([hidden]) { display: flex; flex-direction: column; }
#screen-mode .step-head { width: 100%; max-width: 1400px; margin: 0 auto; }

/* 4 cards em cima e 3 embaixo (centralizados): grade de 8 colunas, cada card ocupa 2 */
.mode-grid {
  position: relative; z-index: 1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 20px;
  width: 100%; max-width: 1400px; margin: auto; padding: 28px 40px 44px; align-items: stretch;
  grid-auto-rows: 1fr;   /* todas as linhas com a mesma altura */
}
.mode-tile { grid-column: span 2; }

/* cor de cada modo (a borda, o brilho e a luz do card usam essa cor);
   competitivos: grafite com o laranja da marca */
.mode-tile { --mc: 255,140,60; --bg1: 46,34,30; --bg2: 14,10,11; }
.mode-tile[data-mode="rei"] { --mc: 255,200,80; --bg1: 74,56,22; --bg2: 22,16,8; }
.mode-tile[data-mode="torre"] { --mc: 80,150,240; --bg1: 22,44,84; --bg2: 8,14,30; }
.mode-tile[data-mode="online"] { --mc: 90,215,255; --bg1: 16,52,66; --bg2: 6,16,24; }
.mode-tile[data-mode="treino"] { --mc: 96,220,140; --bg1: 34,62,48; --bg2: 10,20,16; }

.mode-tile {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; text-align: left;
  padding: 12px 12px 18px; border-radius: 18px; color: #fff; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(var(--mc), .16), transparent 60%),
    linear-gradient(165deg, rgb(var(--bg1)) 0%, rgb(var(--bg2)) 100%);
  border: 1px solid rgba(var(--mc), .26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 36px rgba(0,0,0,.45);
  transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s, border-color .25s;
}
/* camada que clareia o card no hover */
.mode-tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(90% 60% at 50% 20%, rgba(var(--mc), .22), transparent 70%);
  opacity: 0; transition: opacity .32s;
}
/* barrinha da cor do modo embaixo (aparece quando escolhido) */
.mode-tile::after {
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
  background: rgb(var(--mc)); box-shadow: 0 0 12px rgba(var(--mc), .8); opacity: 0; transform: scaleX(.4);
  transition: opacity .3s, transform .3s cubic-bezier(.2,.8,.2,1);
}
.mode-tile canvas {
  display: block; width: 100%; height: 182px; border-radius: 12px;
  background:
    radial-gradient(70% 55% at 50% 92%, rgba(var(--mc), .22), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.34));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 -18px 24px -18px rgba(0,0,0,.6);
  transform-origin: 50% 90%; transition: transform .4s cubic-bezier(.2,.8,.2,1), filter .3s;
}
.mode-tile b {
  display: block; padding: 16px 6px 0; font-size: 30px; line-height: 1.02; font-weight: 900; font-style: italic;
  letter-spacing: .03em; text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.mode-tile span { display: block; padding: 8px 6px 0; font-size: 13.5px; line-height: 1.4; color: rgba(226,218,240,.72); }
.mode-tile[data-mode="ffa"] b { font-size: 23px; }
.mode-tile i { position: absolute; top: 24px; right: 24px; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .1em; padding: 3px 8px; border-radius: 5px; background: rgba(0,0,0,.6); }

/* passar o mouse: sobe um pouco, borda acende, ilustração cresce de leve */
.mode-tile:not(:disabled):hover {
  transform: translateY(-6px);
  border-color: rgba(var(--mc), .6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px rgba(var(--mc), .18), 0 24px 44px rgba(0,0,0,.5), 0 0 34px rgba(var(--mc), .16);
}
.mode-tile:not(:disabled):hover::before { opacity: 1; }
.mode-tile:not(:disabled):hover canvas { transform: scale(1.035); filter: brightness(1.06); }

/* escolhido (último modo jogado, foco do teclado/controle ou apertando) */
.mode-tile.on, .mode-tile:focus-visible, .mode-tile:active, body.pad-nav .mode-tile:focus {
  border-color: rgba(var(--mc), .95);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(var(--mc), .55), 0 0 30px rgba(var(--mc), .32), 0 22px 42px rgba(0,0,0,.5);
  outline: none;
}
.mode-tile.on::after, .mode-tile:focus-visible::after, .mode-tile:active::after, body.pad-nav .mode-tile:focus::after { opacity: 1; transform: none; }
.mode-tile.on::before, .mode-tile:focus-visible::before { opacity: .7; }
.mode-tile:focus-visible, body.pad-nav .mode-tile:focus { transform: translateY(-6px); }
.mode-tile:active { transform: translateY(-2px) scale(.99); transition-duration: .08s; }
body.pad-nav .mode-tile:focus { outline: none !important; }
.mode-tile:disabled { filter: grayscale(.85) brightness(.6); }

/* telas mais baixas (notebook 1280x720, por exemplo): tudo cabe sem rolar */
@media (max-height: 860px) and (min-height: 521px) and (min-width: 1101px) {
  .step-head { padding-top: 20px; }
  .mode-grid { gap: 16px; padding: 18px 40px 22px; }
  .mode-tile { padding: 10px 10px 14px; }
  .mode-tile canvas { height: 142px; }
  .mode-tile b { padding-top: 12px; font-size: 26px; }
  .mode-tile[data-mode="ffa"] b { font-size: 20px; }
  .mode-tile span { padding-top: 6px; font-size: 13px; }
}

/* 3 por linha (o último centralizado) */
@media (max-width: 1100px) {
  .mode-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; padding: 24px 28px 36px; }
  .mode-tile:nth-child(7) { grid-column: 2 / span 2; }
  .mode-tile canvas { height: 150px; }
  .mode-tile b { font-size: 26px; }
  .mode-tile[data-mode="ffa"] b { font-size: 20px; }
}
/* 2 por linha (o último centralizado) */
@media (max-width: 700px) {
  .step-head { padding: 18px 16px 0; gap: 14px; }
  .mode-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 18px 14px 28px; }
  .mode-tile:nth-child(7) { grid-column: span 2; }
  .mode-tile { padding: 8px 8px 14px; border-radius: 16px; }
  .mode-tile canvas { height: 128px; border-radius: 10px; }
  .mode-tile b { padding: 12px 4px 0; font-size: 21px; }
  .mode-tile[data-mode="ffa"] b { font-size: 17px; }
  .mode-tile span { padding: 6px 4px 0; font-size: 12px; }
  .step-bar i { width: 18px; }
}

/* cartas de elemento: vidro escuro com a cor do elemento acesa em cima,
   lutador num pedestal de luz, nome em itálico, barras de atributo e
   chips do que é imune / morre / efeito das armas */
.card-list { position: relative; z-index: 1; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 4vh; padding: 0 20px 120px; }
.el-card {
  position: relative; width: 176px; border-radius: 18px; padding: 0 0 14px; display: flex; flex-direction: column; text-align: left; color: #fff; overflow: hidden;
  background:
    radial-gradient(160px 130px at 50% 0%, color-mix(in srgb, var(--c1) 55%, transparent), transparent 75%),
    linear-gradient(180deg, color-mix(in srgb, var(--c2) 70%, #120c1c), #120c1c 70%);
  border: 1.5px solid color-mix(in srgb, var(--c1) 35%, rgba(255,255,255,.08));
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s, filter .25s;
}
.el-card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--c3), transparent); opacity: .7;
}
.el-card .sel {
  position: absolute; top: 10px; right: 10px; z-index: 1; font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .1em;
  padding: 4px 8px; border-radius: 999px; background: #ffd25a; color: #1a0f05; opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .2s;
}
.el-card.on .sel { opacity: 1; transform: none; }
.el-card .stage { height: 158px; padding: 14px 8px 0; }
.el-card canvas { width: 100%; height: 100%; display: block; }
.el-card .info { padding: 4px 13px 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.el-card .n { font-size: 25px; font-weight: 900; font-style: italic; letter-spacing: .03em; line-height: 1; color: var(--c3); text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.el-card .tl { font-size: 12px; line-height: 1.35; color: rgba(255,255,255,.75); min-height: 32px; }
.el-card .bars { display: grid; gap: 5px; }
.el-card .bar { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: rgba(255,255,255,.6); }
.el-card .bar b { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.el-card .bar i { height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); }
.el-card .bar i.on { background: linear-gradient(90deg, var(--c1), var(--c3)); }
.el-card .perks { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.el-card .perks li { font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 999px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.8); }
.el-card .perks li.good { background: rgba(77,255,166,.14); color: #8dffc4; }
.el-card .perks li.bad { background: rgba(255,91,107,.16); color: #ff9aa5; }
.el-card .perks li.mid { background: rgba(255,210,90,.14); color: #ffd98a; }
.el-card .rnd-note { margin: 0; font-size: 11.5px; line-height: 1.4; color: rgba(255,255,255,.7); }
.el-card.random .n { font-size: 21px; background: linear-gradient(90deg, #ffd25a, #ff6a1f 50%, #c77dff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.el-card:hover { transform: translateY(-6px); }
.el-card.on {
  transform: translateY(-14px) scale(1.04); border-color: #ffd25a;
  box-shadow: 0 0 0 3px rgba(255,210,90,.3), 0 26px 60px color-mix(in srgb, var(--c1) 45%, transparent);
}
.el-card:focus-visible { outline: 2px solid #ffd25a; outline-offset: 3px; }
.card-list:has(.el-card.on) .el-card:not(.on):not(:hover) { filter: brightness(.78) saturate(.9); }

/* ------------------------------------------------------------ escolher mapa */

.maps-bg { position: fixed; inset: 0; background:
    radial-gradient(1000px 520px at 50% 45%, rgba(120,70,180,.22), transparent 70%),
    linear-gradient(180deg, #0f0a1c, #08060f); }
.map-arrows { margin-left: auto; display: flex; gap: 12px; }
.map-arrows button {
  width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.35); background: rgba(255,255,255,.04);
  color: #fff; font-size: 28px; line-height: 1; display: grid; place-items: center; transition: background .2s, border-color .2s, transform .2s;
}
.map-arrows button:hover, .map-arrows button:focus-visible { background: rgba(255,255,255,.12); border-color: #ffd25a; outline: none; transform: scale(1.06); }
.map-track { --mw: min(56vw, 640px, calc((100vh - 370px) * 1.78)); position: relative; z-index: 1; height: calc(var(--mw) * 0.5625 + 84px); margin-top: 2.5vh; }
.map-card {
  --d: 0;
  position: absolute; left: 50%; top: 50%; width: var(--mw); padding: 0; border: 0; text-align: center; color: #fff; background: none;
  transform: translate(calc(-50% + var(--d) * 74%), -50%) scale(var(--s, 1));
  transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .4s, filter .4s; cursor: pointer;
}
.map-card.near { opacity: .55; filter: brightness(.6) saturate(.8); z-index: 0; }
.map-card.far { opacity: 0; pointer-events: none; visibility: hidden; }
#screen-maps { overflow: clip; }
.map-card.on { z-index: 2; }
.map-name { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 12px; }
.map-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .3em; color: rgba(236,230,248,.55); display: flex; align-items: center; gap: 10px; }
.map-eyebrow::before, .map-eyebrow::after { content: ""; width: 26px; height: 2px; background: #ff6a1f; border-radius: 2px; }
.map-name b { font-size: clamp(26px, 3.4vw, 44px); font-weight: 900; font-style: italic; letter-spacing: .02em; line-height: 1; }
.map-card.on .map-name b { background: linear-gradient(90deg, #ffd25a, #ff6a1f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.map-view { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #140e22; box-shadow: 0 24px 60px rgba(0,0,0,.55); border: 1.5px solid rgba(255,255,255,.1); }
.map-card.on .map-view { border-color: rgba(255,210,90,.55); box-shadow: 0 0 0 3px rgba(255,210,90,.18), 0 30px 70px rgba(0,0,0,.6); }
.map-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.map-random {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 45%, rgba(199,125,255,.35), transparent 60%), repeating-linear-gradient(135deg, #1b1230 0 24px, #160f28 24px 48px);
}
.map-random span {
  font-size: min(18vw, 210px); font-weight: 900; font-style: italic; line-height: 1;
  background: linear-gradient(180deg, #ffd25a, #ff6a1f 55%, #c77dff); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 0 rgba(0,0,0,.4)); animation: rnd-bob 2.4s ease-in-out infinite;
}
@keyframes rnd-bob { 50% { transform: translateY(-8px) rotate(-4deg); } }
.map-desc { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.map-desc p { margin: 0; font-size: 15px; color: rgba(236,230,248,.8); text-align: center; }
.map-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.map-tags span { font-size: 11px; font-weight: 800; letter-spacing: .08em; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.75); text-transform: uppercase; }
.map-under {
  position: relative; z-index: 1; width: min(56vw, 640px, calc((100vh - 370px) * 1.78)); min-width: min(560px, 90vw); margin: 1.5vh auto 0; display: grid; grid-template-columns: 1fr auto; gap: 12px 24px; align-items: center;
}
.map-progress { grid-column: 1 / -1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
.map-progress i { display: block; height: 100%; background: linear-gradient(90deg, #ff6a1f, #ffd25a); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.map-meta { display: flex; align-items: center; gap: 18px; }
.map-dots { display: flex; gap: 6px; }
.map-dots button { width: 26px; height: 4px; border-radius: 2px; border: 0; padding: 0; background: rgba(255,255,255,.2); transition: background .2s, width .3s; }
.map-dots button.on { width: 44px; background: #fff; }
.map-count { font-size: 22px; font-weight: 900; font-style: italic; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.85); }
@media (max-width: 700px) {
  .map-card { width: 84vw; transform: translate(calc(-50% + var(--d) * 96%), -50%) scale(var(--s, 1)); }
  .map-under { width: 84vw; grid-template-columns: 1fr; }
  .map-arrows button { width: 42px; height: 42px; }
}

/* mapa escolhido na tela de versus */
.vs-map { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 16px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }
.vs-map span { font-size: 11px; font-weight: 800; letter-spacing: .2em; color: rgba(255,255,255,.55); }
.vs-map b { font-size: 16px; font-weight: 900; font-style: italic; }
.vs-map-change { padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff; font-weight: 700; font-size: 12px; }
.vs-map-change:hover { background: rgba(255,255,255,.12); }

.step-foot {
  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 1; display: flex; align-items: center; gap: 20px;
  padding: 12px 14px 12px 22px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); white-space: nowrap;
}
.step-foot .hint { margin: 0; }
.go-btn {
  padding: 12px 34px; border-radius: 12px; border: 0; font-size: 19px; font-weight: 900; letter-spacing: .12em; color: #1a0700;
  background: linear-gradient(180deg, #ffe08a, #ff9a3c); box-shadow: 0 5px 0 #8a3b08;
}
.go-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #8a3b08; }

/* ------------------------------------------------------------ versus */

#screen-versus { position: relative; height: 100vh; overflow: hidden; background: #07040b; }
#versus-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vs-top { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; padding: 24px 28px 0; }
.vs-top .back { justify-self: start; }
.vs-title { text-align: center; }
.vs-title h1 { margin: 0; font-size: clamp(36px, 5.4vw, 64px); font-weight: 900; font-style: italic; line-height: .95; text-shadow: 0 6px 0 #000; }
.vs-title p { margin: 8px 0 0; letter-spacing: .3em; font-size: 11px; opacity: .6; }
.vs-side { position: absolute; top: 170px; z-index: 1; font-weight: 900; font-style: italic; max-width: 30%; }
.vs-side.l { left: 56px; }
.vs-side.r { right: 56px; text-align: right; }
.vs-side .tag { display: inline-block; padding: 4px 12px; font-size: 13px; letter-spacing: .15em; transform: skewX(-12deg); }
.vs-side h2 { margin: 8px 0 4px; font-size: clamp(36px, 4.4vw, 54px); }
.vs-side ul { list-style: none; margin: 0; padding: 0; font-style: normal; font-weight: 600; font-size: 14px; line-height: 1.75; opacity: .9; }
.vs-side .names { margin-top: 10px; font-size: 13px; font-style: normal; font-weight: 700; opacity: .75; }
.vs-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px;
  padding: 22px 16px 26px; background: linear-gradient(0deg, rgba(0,0,0,.85), rgba(0,0,0,0));
}
.vs-bar .hint { flex-basis: 100%; text-align: center; margin: 0; }
.chips { display: flex; gap: 6px; }
.chips button {
  padding: 9px 14px; border: 1px solid rgba(255,255,255,.25); font-weight: 800; font-size: 13px; color: #fff;
  transform: skewX(-10deg); background: rgba(255,255,255,.06);
}
.chips button.on { background: #fff; color: #120a18; }
.fight {
  font-size: 34px; font-weight: 900; font-style: italic; letter-spacing: .12em; padding: 12px 58px; border: 0; color: #fff; transform: skewX(-12deg);
  background: linear-gradient(90deg, #ff6a1f, #ff3d6e); box-shadow: 0 6px 0 #5a1020, 0 0 40px rgba(255,90,60,.5);
}
.fight:hover { filter: brightness(1.08); }
.fight:active { transform: skewX(-12deg) translateY(4px); box-shadow: 0 2px 0 #5a1020; }

@media (prefers-reduced-motion: reduce) {
  .home-item, .home-band, .mode-tile, .mode-tile canvas, .mode-tile::before, .mode-tile::after, .back, .el-card, .map-card, .map-progress i { transition: none; }
  .map-random span { animation: none; }
  .live-tag, .live-tag::before { animation: none; }
}

/* ------------------------------------------------------------ partida */

#screen-game, #screen-tutorial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  height: 100vh;
  overflow: hidden;
}
.stage-wrap {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  aspect-ratio: 16 / 9;
}
#game-canvas, #tut-canvas { display: block; width: 100%; height: 100%; }

.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(8, 4, 12, 0.6);
  backdrop-filter: blur(3px);
}
.overlay-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 260px;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--line);
  text-align: center;
}
.overlay-card h2 { margin: 0 0 6px; font-family: var(--display); letter-spacing: 0.08em; font-size: 34px; }
.exit-box { position: fixed; z-index: 7; }
.exit-box[hidden] { display: none; }
.exit-box .overlay-card { width: min(380px, 92vw); }
.exit-box.bye .overlay-card { border-color: rgba(255,210,90,.4); }
.home-exit { color: rgba(236,232,246,.45); }

/* ------------------------------------------------------------ tutorial */

/* placa de madeira da tarefa, pendurada por duas cordas no alto da tela */
.tut-card {
  --ink: #2a1708;
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  width: min(600px, calc(100% - 280px)); min-width: 300px;
  padding: 12px 22px 12px; border-radius: 8px;
  color: var(--ink);
  background:
    radial-gradient(circle at 12px 12px, #5a3a1c 2.5px, #2a1708 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 12px) 12px, #5a3a1c 2.5px, #2a1708 3px, transparent 3.5px),
    radial-gradient(circle at 12px calc(100% - 12px), #5a3a1c 2.5px, #2a1708 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), #5a3a1c 2.5px, #2a1708 3px, transparent 3.5px),
    repeating-linear-gradient(180deg, rgba(90, 50, 20, .0) 0 11px, rgba(90, 50, 20, .22) 11px 12px, rgba(255, 230, 180, .12) 12px 13px, rgba(90, 50, 20, 0) 13px 34px),
    linear-gradient(180deg, #e7b77c, #d29a5c 60%, #c08548);
  border: 3px solid var(--ink);
  box-shadow: inset 0 2px 0 rgba(255, 240, 210, .6), inset 0 -4px 0 rgba(90, 50, 20, .35), 0 6px 0 rgba(0, 0, 0, .35);
  pointer-events: none;
  transform-origin: 50% -30px;
}
/* cordas */
.tut-card::before, .tut-card::after {
  content: ''; position: absolute; top: -21px; width: 4px; height: 21px;
  background: repeating-linear-gradient(180deg, #e8d29a 0 3px, #b8964f 3px 6px);
  border-left: 1px solid var(--ink); border-right: 1px solid var(--ink);
}
.tut-card::before { left: 40px; }
.tut-card::after { right: 40px; }
.tut-card.enter { animation: tut-swing .7s cubic-bezier(.2, .9, .3, 1.2); }
.tut-card.done { background-color: #d29a5c; }
.tut-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tut-top small {
  font-family: var(--display); font-style: italic; font-size: 13px; letter-spacing: .12em; color: #6b3e18;
}
.tut-progress {
  font-family: var(--display); font-size: 15px; letter-spacing: .06em; color: #fff;
  background: #2f8f3a; border: 2px solid var(--ink); border-radius: 4px; padding: 0 8px; transform: rotate(3deg);
  box-shadow: 0 2px 0 var(--ink);
}
.tut-card h2 {
  margin: 0 0 4px; font-family: var(--display); font-style: italic; font-weight: 400; text-transform: uppercase;
  letter-spacing: .04em; font-size: 30px; line-height: 1; color: #fff4dc;
  -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill;
  text-shadow: 0 3px 0 var(--ink);
}
.tut-card.done h2 { color: #8dff9e; }
.tut-card p { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.55; }
/* teclas com cara de tecla de verdade */
.tut-card kbd {
  display: inline-block; min-width: 24px; padding: 0 6px; margin: 0 1px; text-align: center;
  font: 800 13px/20px var(--font); color: #2a1708;
  background: linear-gradient(180deg, #fffaf0, #eadfc8); border: 2px solid var(--ink); border-bottom-width: 4px; border-radius: 6px;
  transform: translateY(-1px);
}
/* um pino por etapa */
.tut-pegs { display: flex; gap: 5px; margin-top: 9px; }
.tut-pegs i { flex: 1; height: 7px; border-radius: 4px; background: rgba(60, 30, 10, .3); box-shadow: inset 0 1px 0 rgba(0, 0, 0, .25); }
.tut-pegs i.done { background: #2f8f3a; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25); }
.tut-pegs i.now { background: #ffd23f; box-shadow: inset 0 -2px 0 rgba(150, 90, 0, .45); animation: peg-blink 1s ease-in-out infinite alternate; }
@keyframes peg-blink { to { filter: brightness(1.25); } }
@keyframes tut-swing {
  0% { transform: translateX(-50%) translateY(-140%) rotate(-4deg); }
  55% { transform: translateX(-50%) translateY(0) rotate(2.5deg); }
  75% { transform: translateX(-50%) rotate(-1.2deg); }
  100% { transform: translateX(-50%) rotate(0); }
}
/* botões do canto: plaquinhas de madeira */
.tut-corner { position: absolute; top: 14px; right: 14px; display: flex; flex-direction: column; gap: 6px; }
.tut-corner .btn {
  font-family: var(--display); font-style: italic; font-weight: 400; letter-spacing: .06em; font-size: 15px;
  color: #2a1708; background: linear-gradient(180deg, #e7b77c, #c08548); border: 2px solid #2a1708; border-radius: 6px;
  box-shadow: inset 0 2px 0 rgba(255, 240, 210, .55), 0 3px 0 #2a1708;
}
.tut-corner .btn:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255, 240, 210, .55), 0 1px 0 #2a1708; }
.tut-toast {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  font-family: var(--display); font-style: italic; font-size: clamp(36px, 6.5vw, 72px); letter-spacing: .04em; white-space: nowrap;
  color: #8dff9e; -webkit-text-stroke: 3px #0d2a12; paint-order: stroke fill; text-shadow: 0 6px 0 #0d2a12;
  pointer-events: none;
}
.tut-toast.show { animation: tut-pop 1.5s ease-out forwards; }
.tut-fade { position: absolute; inset: 0; background: #0d0812; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.tut-fade.on { opacity: 1; }

/* janelas do tutorial (escolha do lutador, pausa, fim): estilo dos menus do
   jogo, com borda preta grossa, sombra dura e título inclinado */
.tut-overlay { background: rgba(5, 2, 10, .55); backdrop-filter: blur(5px); }
.tut-overlay .overlay-card, .welcome-card {
  background: #1d1027;
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 14px, rgba(255, 255, 255, 0) 14px 28px);
  border: 3px solid #000; border-radius: 6px;
  box-shadow: 8px 8px 0 #000, inset 0 0 0 2px rgba(255, 210, 90, .25);
  animation: card-slam .28s cubic-bezier(.2, .9, .3, 1.3);
}
.tut-overlay .overlay-card h2 {
  font-style: italic; font-weight: 400; text-transform: uppercase; color: #ffd25a;
  -webkit-text-stroke: 1.5px #000; paint-order: stroke fill; text-shadow: 0 4px 0 #000;
}
.tut-overlay .overlay-card .btn { font-weight: 900; font-style: italic; letter-spacing: .05em; border-radius: 4px; transform: skewX(-8deg); }
.tut-overlay .overlay-card .btn:not(.ghost) { background: linear-gradient(90deg, #ff6a1f, #ffb03a); color: #1a0f05; border: 2px solid #000; box-shadow: 0 4px 0 #000; }
@keyframes card-slam { from { opacity: 0; transform: scale(1.12) rotate(-1.5deg); } }
.tut-pick-card { max-width: min(880px, calc(100% - 32px)); }
.tut-pick-card small { font-family: var(--display); font-style: italic; font-size: 14px; letter-spacing: .14em; color: #ff8a4a; }
.tut-pick-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 6px; }
.tut-pick-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px 12px;
  border-radius: 4px; border: 2px solid #000; background: #2a1838; color: var(--text);
  box-shadow: 0 4px 0 #000; transition: transform .12s ease, background .12s ease;
}
.tut-pick-btn:hover, .tut-pick-btn:focus-visible { transform: translateY(-4px) rotate(-1deg); background: #382250; outline: 3px solid var(--el); outline-offset: -2px; }
.tut-pick-btn canvas { width: 100%; height: 110px; }
.tut-pick-btn b { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 22px; letter-spacing: .04em; color: var(--el); -webkit-text-stroke: 1px #000; paint-order: stroke fill; }
.tut-pick-btn span { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.tut-end-card { max-width: 440px; }
@keyframes tut-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.6) rotate(-6deg); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1.1) rotate(-3deg); }
  25% { transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -62%) rotate(-3deg); }
}

/* cartão de boas-vindas (primeira vez): pôster de jogo de luta */
.welcome {
  position: fixed; inset: 0; z-index: 5; display: flex; padding: 22px 16px 16px; overflow-y: auto;
  background: rgba(5, 2, 10, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: fade-in .25s ease-out;
}
.welcome[hidden] { display: none; }
.welcome-card {
  position: relative; display: grid; grid-template-columns: 200px 1fr; align-items: center; gap: 8px;
  width: min(660px, 100%); margin: auto; /* no meio quando cabe; rola quando não cabe */ padding: 26px 30px 22px 14px;
}
.welcome-tag {
  position: absolute; top: -16px; left: 22px; padding: 4px 12px;
  font-family: var(--display); font-style: italic; font-size: 18px; letter-spacing: .06em; color: #1a0f05;
  background: #ffd23f; border: 3px solid #000; box-shadow: 4px 4px 0 #000; transform: rotate(-4deg);
}
.welcome-art { display: block; width: 200px; height: 250px; }
.welcome-body { text-align: left; }
.welcome-card h2 { margin: 0 0 12px; }
.welcome-card h2 small { display: block; font-family: var(--display); font-style: italic; font-weight: 400; font-size: 16px; letter-spacing: .14em; color: #ffd25a; }
.welcome-card h2 b {
  display: block; font-size: clamp(34px, 6vw, 50px); font-weight: 900; font-style: italic; line-height: .9;
  background: linear-gradient(90deg, #ffd25a, #ff6a1f 45%, #c77dff 60%, #4fb0ff);
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 #000);
}
.welcome-card p { margin: 0 0 18px; color: #e9e1f0; line-height: 1.5; font-size: 15px; }
.welcome-card p strong { color: #9fe36a; }
.welcome-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.welcome-go, .welcome-skip {
  font-weight: 900; font-style: italic; letter-spacing: .06em; border: 0; transform: skewX(-10deg); cursor: pointer;
}
.welcome-go {
  padding: 12px 26px; font-size: 22px; color: #fff;
  background: linear-gradient(90deg, #ff6a1f, #ff6a1f 70%, #ffb03a); border-left: 5px solid #ffd25a;
  box-shadow: 5px 5px 0 #000; text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}
.welcome-go:hover, .welcome-go:focus-visible { filter: brightness(1.1); outline: none; padding-left: 34px; }
.welcome-skip { padding: 8px 18px; font-size: 15px; color: rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .08); }
.welcome-skip:hover, .welcome-skip:focus-visible { color: #fff; background: rgba(255, 255, 255, .16); outline: none; }
.welcome-login {
  margin-top: 14px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 13px;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.welcome-login:hover { color: var(--text); }

@media (max-width: 760px) {
  .tut-card { width: calc(100% - 24px); min-width: 0; top: 20px; padding: 8px 14px; }
  .tut-card h2 { font-size: 22px; }
  .tut-card p { font-size: 13px; }
  .tut-corner { top: auto; bottom: 10px; flex-direction: row; }
  .tut-pick-grid { grid-template-columns: repeat(2, 1fr); }
  .welcome-card { grid-template-columns: 1fr; padding: 24px 20px 18px; text-align: center; }
  .welcome-art { width: 120px; height: 140px; margin: 0 auto; }
  .welcome-body { text-align: center; }
  .welcome-actions { align-items: center; }
}
@media (max-height: 520px) {
  .welcome-art { height: 170px; }
  .tut-card { top: 14px; padding: 6px 14px; }
  .tut-card p { font-size: 13px; line-height: 1.4; }
}

/* ------------------------------------------------------------ resultado */

/* fundo: a partida de demonstração escurecida, como na tela inicial */
.result-shade { position: fixed; inset: 0; background:
    radial-gradient(900px 500px at 50% 18%, rgba(255,170,60,0.12), transparent 70%),
    linear-gradient(180deg, rgba(9,6,18,0.78), rgba(9,6,18,0.9)); }
#screen-result.lose .result-shade { background:
    radial-gradient(900px 500px at 50% 18%, rgba(255,80,90,0.1), transparent 70%),
    linear-gradient(180deg, rgba(9,6,18,0.82), rgba(9,6,18,0.92)); }
.result-wrap { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; padding: 46px 24px 40px; text-align: center; }
.result-eyebrow { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .32em; color: rgba(236,230,248,.6); }
.result-title {
  margin: 0; font-family: var(--font); font-weight: 900; font-style: italic;
  font-size: clamp(60px, 11vw, 124px); line-height: .95; letter-spacing: -.01em; padding: 0 .08em;
  background: linear-gradient(90deg, #ffd25a, #ff6a1f); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.4)) drop-shadow(0 0 30px rgba(255,140,40,.25));
  animation: result-pop .6s cubic-bezier(.2,1.4,.4,1) both;
}
.result-title.lose { background-image: linear-gradient(90deg, #ff8a8a, #e2364a); filter: drop-shadow(0 4px 0 rgba(0,0,0,.4)) drop-shadow(0 0 30px rgba(255,60,80,.22)); }
.result-title.draw { background-image: linear-gradient(90deg, #ffffff, #b9b2c8); filter: drop-shadow(0 4px 0 rgba(0,0,0,.4)); }
.result-sub { color: rgba(236,230,248,.75); margin: 10px 0 28px; font-size: 18px; }
@keyframes result-pop { from { opacity: 0; transform: scale(.7) skewX(-6deg); } to { opacity: 1; transform: none; } }

.result-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; text-align: left; }
.pcard {
  position: relative; overflow: hidden; border-radius: 16px; padding: 16px 16px 14px 20px;
  background: linear-gradient(180deg, rgba(40,28,58,.92), rgba(20,14,32,.94)); border: 1px solid rgba(255,255,255,.08);
  animation: card-in .5s ease-out both;
}
.pcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--team); }
.pcard.winner { border-color: rgba(255,210,90,.45); box-shadow: 0 0 0 1px rgba(255,210,90,.2), 0 10px 40px rgba(255,170,60,.15); }
.pcard.me { background: linear-gradient(100deg, rgba(255,106,31,.32), rgba(255,106,31,.06) 55%, rgba(20,14,32,.94)), linear-gradient(180deg, rgba(40,28,58,.92), rgba(20,14,32,.94)); }
.pcard.out-of-time { opacity: .9; }
@keyframes card-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.pcard-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pavatar {
  flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 900; font-size: 20px; color: #1a1020; border: 2px solid rgba(0,0,0,.35);
  background: radial-gradient(circle at 35% 30%, var(--el-light), var(--el));
}
.pname-wrap { min-width: 0; }
.pcard .pname { display: block; font-weight: 900; font-style: italic; font-size: 19px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard .pmeta { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--team); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; min-height: 18px; }
.ptag { font-size: 10px; font-weight: 800; letter-spacing: .08em; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.75); }
.ptag.win { background: rgba(255,210,90,.2); color: #ffd25a; }
.ptag.mvp { background: rgba(255,140,60,.22); color: #ffb06a; }
.ptag.you { background: rgba(255,255,255,.9); color: #1a1020; }
.pstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 6px; margin-top: 12px; }
.pstat b { display: block; font-size: 20px; font-weight: 900; font-style: italic; color: #fff; font-variant-numeric: tabular-nums; }
.pstat span { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: rgba(236,230,248,.5); text-transform: uppercase; }
.pstat.dealt b { color: #ffd27a; }
.pstat.taken b { color: #ff9a9a; }
.pstat.zero b { color: rgba(255,255,255,.3); }

.result-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.result-btn {
  font-family: var(--font); font-size: 18px; font-weight: 900; font-style: italic; letter-spacing: .06em;
  padding: 13px 30px; border: 1px solid rgba(255,255,255,.22); border-radius: 4px; color: #fff;
  background: rgba(255,255,255,.04); transform: skewX(-10deg); transition: filter .15s, transform .15s, background .15s;
}
.result-btn.primary { border-color: transparent; background: linear-gradient(90deg, #ff7022, #ff9a3a); box-shadow: inset 4px 0 0 #ffd25a, 0 8px 24px rgba(255,100,30,.3); }
.result-btn:hover, .result-btn:focus-visible { filter: brightness(1.12); transform: skewX(-10deg) translateY(-2px); outline: none; }
.result-btn:not(.primary):hover, .result-btn:not(.primary):focus-visible { background: rgba(255,255,255,.1); }
.result-btn:focus-visible { box-shadow: 0 0 0 2px #ffd25a; }
#result-save { margin-top: 16px; }
@media (prefers-reduced-motion: reduce) { .result-title, .pcard { animation: none; } }

/* ------------------------------------------------------------ login */

#screen-auth { display: grid; place-items: center; padding: 24px; }
.auth-wrap { width: min(420px, 100%); }
.tabs { display: flex; gap: 6px; margin-bottom: 18px; }
.tabs button {
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: transparent;
  font-weight: 800;
}
.tabs button.on { background: var(--text); color: #170e1d; }
#auth-form label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 12px; }
#auth-form input {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.3);
  color: var(--text);
  font: 16px var(--font);
}
#auth-form input:focus { outline: 2px solid var(--violet); outline-offset: 1px; }
#auth-submit { width: 100%; margin-top: 4px; }
.auth-wrap > .btn.ghost { margin-top: 14px; }

/* ------------------------------------------------------------ perfil */

.profile-wrap { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 32px 24px 40px; }
#screen-profile::before { content: ""; position: fixed; inset: 0; background: rgba(9,6,18,.78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.profile-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.ph-kicker { font-size: 12px; font-weight: 800; letter-spacing: .32em; color: #ffd25a; }
.profile-head h1 { margin: 2px 0 4px; font-family: var(--display); font-size: 48px; letter-spacing: 0.04em; overflow-wrap: anywhere; }
.profile-head .hint { margin: 0; }

.profile-top { display: grid; grid-template-columns: 300px 190px 1fr; gap: 14px; margin: 20px 0 16px; align-items: stretch; }
.profile-top .stat-grid { margin: 0; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.profile-top .stat.big { padding: 10px 16px; }
@media (max-width: 1000px) { .profile-top { grid-template-columns: 1fr 190px; } .profile-top .stat-grid { grid-column: 1 / -1; } }
@media (max-width: 560px) { .profile-top { grid-template-columns: 1fr; } .profile-top .stat-grid { grid-template-columns: repeat(2, 1fr); } .profile-head h1 { font-size: 36px; } }

.profile-hero {
  --el: #ff6a1f; position: relative; display: flex; align-items: flex-end; min-height: 200px; border-radius: var(--radius); overflow: hidden;
  background: radial-gradient(circle at 70% 70%, color-mix(in srgb, var(--el) 42%, transparent), transparent 62%), var(--panel);
  border: 1px solid color-mix(in srgb, var(--el) 40%, transparent);
}
.profile-hero canvas { position: absolute; right: 0; bottom: 0; width: 58%; height: 100%; }
.ph-txt { position: relative; padding: 16px 18px; display: grid; gap: 2px; max-width: 60%; }
.ph-txt small { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; color: var(--muted); }
.ph-txt b { font-family: var(--display); font-size: 34px; letter-spacing: .03em; color: var(--el); text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.ph-txt span { font-size: 12.5px; color: rgba(255,255,255,.75); }

.profile-ring {
  --p: 0; display: grid; place-items: center; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); padding: 14px;
}
.profile-ring::before { content: none; }
.pr-in {
  width: 152px; height: 152px; border-radius: 50%; display: grid; place-content: center; text-align: center; gap: 2px; position: relative;
  background: radial-gradient(closest-side, #1c1328 80%, transparent 81%), conic-gradient(var(--good) calc(var(--p) * 1%), rgba(255,255,255,.09) 0);
}
.pr-in b { font-size: 38px; font-weight: 900; line-height: 1; }
.pr-in small { font-size: 10px; font-weight: 800; letter-spacing: .16em; color: var(--muted); }
.pr-in span { font-size: 12px; color: rgba(255,255,255,.7); }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 20px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.stat .v { font-size: 30px; font-weight: 900; }
.stat .k { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.stat.big { display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.stat.big::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: rgba(255,255,255,.18); }
.stat.big .v { font-size: 36px; line-height: 1.1; }
.stat.good .v { color: var(--good); } .stat.good::after { background: var(--good); }
.stat.fire .v { color: #ff8a3d; } .stat.fire::after { background: #ff8a3d; }
.stat.bad .v { color: var(--bad); } .stat.bad::after { background: var(--bad); }
.stat.violet .v { color: #c98bff; } .stat.violet::after { background: #c98bff; }
.stat.gold .v { color: var(--gold); } .stat.gold::after { background: var(--gold); }

.profile-more { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 22px; }
.pm { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.pm span { color: var(--muted); }
.pm b { font-size: 16px; white-space: nowrap; }

.profile-cols { display: grid; grid-template-columns: 1.1fr 1fr 1.15fr; gap: 16px; margin-top: 16px; }
@media (max-width: 1000px) { .profile-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .profile-cols { grid-template-columns: 1fr; } }

.pe-row { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: center; padding: 5px 0; }
.pe-row canvas { width: 52px; height: 52px; border-radius: 10px; background: rgba(255,255,255,.05); }
.pe-row.none { opacity: .45; }
.pe-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; font-size: 13px; }
.pe-top span { color: var(--muted); font-size: 12px; text-align: right; }
.pe-bar { height: 8px; margin-top: 6px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.pe-bar i { display: block; height: 100%; border-radius: 4px; min-width: 0; }

.pf { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pf-i { font-size: 22px; text-align: center; }
.pf small { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pf b { font-size: 16px; }
.pf em { font-style: normal; font-size: 12px; color: var(--muted); white-space: nowrap; }
#profile-favs h3 { margin: 14px 0 6px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pf-modes { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.pf-modes > div { display: grid; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.05); }
.pf-modes span { font-size: 11px; color: var(--muted); }
.pf-modes b { font-size: 20px; }
.pf-modes small { font-size: 11px; color: rgba(255,255,255,.55); }

.history { list-style: none; margin: 0; padding: 0; }
.history li { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; }
.history li:first-child { border-top: 0; }
.history li small { display: block; color: var(--muted); font-size: 11.5px; }
.history li .r { text-align: right; white-space: nowrap; }
.history .res { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; font-weight: 900; background: rgba(255,255,255,.08); color: var(--muted); }
.history .ph-vitoria .res { background: rgba(77,255,166,.15); color: var(--good); }
.history .ph-derrota .res { background: rgba(255,91,107,.15); color: var(--bad); }

.profile-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }

/* chip de perfil no canto superior direito: nome à esquerda, foto redonda à direita */
.profile-chip {
  position: fixed; top: 22px; right: 36px; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 0; text-align: right;
  background: none; border: 0; color: #fff; cursor: pointer; font: inherit;
}
.profile-chip:focus-visible { outline: none; }
.profile-chip:hover .pc-av, .profile-chip:focus-visible .pc-av { transform: scale(1.06); }
.profile-chip:hover .pc-txt b, .profile-chip:focus-visible .pc-txt b { color: #ffd25a; }
.pc-txt { display: grid; justify-items: end; gap: 3px; line-height: 1.15; text-shadow: 0 2px 6px rgba(0,0,0,.7); }
.pc-txt b { font-size: 18px; font-weight: 900; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .2s; }
.pc-lv { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; color: #ffd25a; }
.pc-xp { display: block; width: 92px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.18); overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.pc-xp i { display: block; height: 100%; background: linear-gradient(90deg, #ffb347, #ffd25a); border-radius: 3px; }

/* foto redonda com borda (a cor da borda vem do nível) */
.pc-av {
  --ring: linear-gradient(135deg, #8d8699, #4a4458 55%, #77708a);
  position: relative; flex: none; width: 58px; height: 58px; border-radius: 50%; padding: 3px; border: 0;
  background: var(--ring); box-shadow: 0 4px 14px rgba(0,0,0,.5); transition: transform .2s; cursor: pointer;
}
.pc-av canvas { display: block; width: 100%; height: 100%; border-radius: 50%; background: #120c1e; }
.pc-badge {
  position: absolute; left: -4px; bottom: -3px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px;
  display: grid; place-items: center; font: 900 11.5px var(--font); color: #2a1600;
  background: linear-gradient(180deg, #ffe7a0, #f2b437); border: 2px solid #1a1026;
}
.ap-fdot, [data-frame="simples"] { --ring: linear-gradient(135deg, #8d8699, #4a4458 55%, #77708a); }
[data-frame="bronze"] { --ring: linear-gradient(135deg, #e6a36a, #8a4d22 55%, #d48a52); }
[data-frame="prata"] { --ring: linear-gradient(135deg, #ffffff, #8f9bb0 50%, #e2e8f2); }
[data-frame="ouro"] { --ring: linear-gradient(135deg, #fff1b8, #d9a032 50%, #f6cf5a); }
[data-frame="esmeralda"] { --ring: linear-gradient(135deg, #b8ffd9, #1fae6a 50%, #63e6a4); }
[data-frame="rubi"] { --ring: linear-gradient(135deg, #ffc2cc, #c8102e 50%, #ff5b7a); }
[data-frame="diamante"] { --ring: linear-gradient(135deg, #ffffff, #9ee8ff 30%, #4a8fd8 55%, #e8fbff 75%, #7cc8f0); }
[data-frame="diamante"].pc-av { box-shadow: 0 0 12px rgba(160,230,255,.55), 0 4px 14px rgba(0,0,0,.5); }
[data-frame="elemental"] { --ring: conic-gradient(from var(--spin, 0deg), #ff6a1f, #ffd25a, #4fd1b8, #2f8cff, #b65cff, #ff6a1f); animation: ringSpin 4s linear infinite; }
[data-frame="elemental"].pc-av { box-shadow: 0 0 16px rgba(255,180,90,.45), 0 4px 14px rgba(0,0,0,.5); }
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes ringSpin { to { --spin: 360deg; } }
@media (prefers-reduced-motion: reduce) { [data-frame="elemental"] { animation: none; } }

.pc-av.big { width: 112px; height: 112px; padding: 5px; }
.pc-av.big .pc-badge { min-width: 32px; height: 32px; border-radius: 16px; font-size: 15px; left: -2px; bottom: 0; }
.pa-edit {
  position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); padding: 2px 8px; border-radius: 8px;
  font: 800 9.5px var(--font); letter-spacing: .14em; color: #fff; background: rgba(20,12,34,.92); border: 1px solid rgba(255,255,255,.25);
  opacity: 0; transition: opacity .2s;
}
.pc-av.big:hover .pa-edit, .pc-av.big:focus-visible .pa-edit { opacity: 1; }
.pc-av.big:hover, .pc-av.big:focus-visible { transform: scale(1.04); outline: none; }

.ph-id { display: flex; align-items: center; gap: 22px; min-width: 0; }
.ph-level { display: flex; align-items: center; gap: 10px; margin: 2px 0 4px; }
.ph-level b { font-size: 13px; font-weight: 900; letter-spacing: .16em; color: #ffd25a; white-space: nowrap; }
.ph-xp { display: block; width: 240px; max-width: 46vw; height: 8px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
.ph-xp i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #ffb347, #ffd25a); }
.profile-head .hint + .hint { margin-top: 2px; }

/* janela de escolher a foto */
.avatar-picker { position: fixed; inset: 0; z-index: 6; display: grid; place-items: center; padding: 16px; }
.avatar-picker[hidden] { display: none; }
.ap-back { position: absolute; inset: 0; background: rgba(6,3,12,.72); backdrop-filter: blur(3px); }
.ap-card {
  position: relative; z-index: 1; width: min(640px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 20px 22px;
  border-radius: 18px; background: linear-gradient(180deg, #221634, #140d22); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.ap-card header { display: flex; justify-content: space-between; align-items: center; }
.ap-card h2 { margin: 0; font-family: var(--display); font-size: 28px; letter-spacing: .04em; }
.ap-card h3 { margin: 16px 0 8px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ap-card h3 small { text-transform: none; letter-spacing: 0; }
.ap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.ap-opt { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid transparent; color: var(--text); cursor: pointer; font: inherit; }
.ap-opt:hover, .ap-opt:focus-visible { background: rgba(255,255,255,.09); outline: none; }
.ap-opt.on { border-color: #ffd25a; background: rgba(255,210,90,.12); }
.ap-ring { display: block; width: 56px; height: 56px; border-radius: 50%; padding: 2px; background: rgba(255,255,255,.18); }
.ap-opt.on .ap-ring { background: #ffd25a; }
.ap-ring canvas { display: block; width: 100%; height: 100%; border-radius: 50%; }
.ap-opt small { font-size: 11.5px; color: rgba(255,255,255,.75); }
.ap-wrow { margin-bottom: 8px; }
.ap-wname { display: block; font-size: 13px; font-weight: 800; margin: 4px 0 6px; }
.ap-frames { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.ap-frame { display: grid; justify-items: center; gap: 3px; padding: 10px 4px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid transparent; color: var(--text); cursor: pointer; font: inherit; }
.ap-frame b { font-size: 13px; }
.ap-frame small { font-size: 11px; color: var(--muted); }
.ap-frame.on { border-color: #ffd25a; background: rgba(255,210,90,.12); }
.ap-frame.locked { opacity: .45; cursor: not-allowed; }
.ap-fdot { width: 34px; height: 34px; border-radius: 50%; background: var(--ring); box-shadow: inset 0 0 0 6px rgba(18,12,30,.0); position: relative; }
.ap-fdot::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #1a1129; }

/* XP na tela de resultado */
.result-xp { width: min(420px, 92vw); margin: 16px auto 0; }
.result-xp[hidden] { display: none; }
.rx-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.rx-gain { font-size: 22px; font-weight: 900; color: #ffd25a; }
.rx-lv { font-size: 12px; font-weight: 800; letter-spacing: .12em; color: rgba(255,255,255,.7); }
.rx-bar { height: 10px; border-radius: 5px; background: rgba(255,255,255,.12); overflow: hidden; }
.rx-bar i { display: block; height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, #ffb347, #ffd25a); transition: width 1.2s cubic-bezier(.2,.8,.2,1) .4s; }
.rx-up { margin: 8px 0 0; text-align: center; font-weight: 900; letter-spacing: .08em; color: #ffd25a; text-shadow: 0 0 14px rgba(255,200,80,.5); }

#screen-home .live-tag { top: 96px; }
@media (max-width: 560px) {
  .profile-chip { top: 12px; right: 12px; gap: 8px; }
  .profile-chip .pc-av { width: 44px; height: 44px; }
  .pc-txt b { font-size: 14px; max-width: 120px; }
  .pc-xp { width: 64px; }
  .ph-id { gap: 14px; }
  .profile-head { flex-direction: column-reverse; align-items: stretch; }
  .profile-head > .btn { align-self: flex-end; }
  .ph-xp { width: 130px; }
  .pc-av.big { width: 84px; height: 84px; }
  #screen-home .live-tag { top: 70px; right: 12px; }
}

.res-vitoria { color: var(--good); font-weight: 800; }
.res-derrota { color: var(--bad); font-weight: 800; }
.res-empate { color: var(--muted); font-weight: 800; }

/* ------------------------------------------------------------ treino livre */

.training-hud {
  position: absolute; top: 16px; left: 16px; z-index: 3; width: 240px; padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(30,22,46,.9), rgba(14,10,24,.9)); border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 30px rgba(0,0,0,.4); color: #fff; pointer-events: none;
}
.th-title { font-size: 14px; font-weight: 900; font-style: italic; letter-spacing: .08em;
  background: linear-gradient(90deg, #ffd25a, #ff6a1f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.th-combo { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 8px; }
.th-combo b { font-size: 44px; font-weight: 900; font-style: italic; line-height: 1; font-variant-numeric: tabular-nums; }
.th-combo b.pop { animation: th-pop .25s ease-out; color: #ffd25a; }
.th-combo span { font-size: 12px; color: rgba(255,255,255,.6); }
.th-combo.old { opacity: .45; transition: opacity .4s; }
@keyframes th-pop { from { transform: scale(1.35); } to { transform: none; } }
.th-stats { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; margin: 0; font-size: 13px; }
.th-stats dt { color: rgba(255,255,255,.6); }
.th-stats dd { margin: 0; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.th-keys { display: grid; gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.1); font-size: 11.5px; color: rgba(255,255,255,.65); }
.th-keys kbd { display: inline-block; min-width: 18px; padding: 1px 5px; margin-right: 2px; border-radius: 4px; border: 1px solid rgba(255,255,255,.3); font: 800 10.5px system-ui, sans-serif; color: #fff; text-align: center; }
.th-toggle { pointer-events: auto; width: 100%; margin-top: 10px; padding: 7px 10px; border-radius: 9px; border: 1px solid rgba(255,210,90,.45); background: rgba(255,210,90,.12); color: #ffd25a; font: 800 12px system-ui, sans-serif; cursor: pointer; }
.th-toggle:hover { background: rgba(255,210,90,.22); }
.th-toggle:focus-visible { outline: 2px solid #ffd25a; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .th-combo b.pop { animation: none; } }

/* ---------- controle (gamepad) ---------- */
.pad-only { display: none !important; }
body.has-pad .pad-only { display: grid !important; }
body.has-pad p.pad-only { display: block !important; }
body.has-pad .key-only { display: none !important; }
.pad-btn { display: inline-block; min-width: 18px; padding: 1px 6px; margin: 0 1px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); font: 800 10.5px system-ui, sans-serif; color: #fff; text-align: center; }
.pad-title { margin: 18px 0 4px; font-size: 15px; }
.pad-keys li span { white-space: nowrap; }
/* destaque do item escolhido quando navega pelo controle */
body.pad-nav :focus { outline: 3px solid #ffd25a !important; outline-offset: 3px; }
body.pad-nav .home-item:focus { outline: none !important; }
.pad-toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 50; transform: translateX(-50%);
  padding: 10px 18px; border-radius: 999px; background: rgba(14,10,24,.92); border: 1px solid rgba(255,210,90,.5);
  color: #ffd25a; font: 800 14px system-ui, sans-serif; box-shadow: 0 10px 30px rgba(0,0,0,.4);
  transition: opacity .4s, transform .4s;
}
.pad-toast.out { opacity: 0; transform: translateX(-50%) translateY(12px); pointer-events: none; }

/* ---------- toque (celular) ---------- */
.touch-only { display: none !important; }
body.has-touch .touch-only { display: flex !important; }
body.has-touch .no-touch { display: none !important; }

.touch-controls {
  position: fixed; inset: 0; z-index: 20; pointer-events: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.touch-controls[hidden] { display: none; }
.touch-controls button { -webkit-tap-highlight-color: transparent; touch-action: none; }
/* metade esquerda: onde encostar o dedo cria o joystick */
.tc-zone {
  position: absolute; left: 0; top: 64px; bottom: 0; width: 46%;
  pointer-events: auto; touch-action: none;
}
.tc-zone-hint {
  position: absolute; left: calc(env(safe-area-inset-left) + 34px); bottom: 26px; font: 800 11px system-ui, sans-serif;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.4);
}
.tc-stick { position: absolute; inset: 0; }
.tc-base {
  position: absolute; left: calc(env(safe-area-inset-left) + 100px); top: calc(100% - 100px); width: 124px; height: 124px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.06), rgba(255,255,255,.14));
  border: 2px solid rgba(255,255,255,.28); box-shadow: inset 0 0 20px rgba(0,0,0,.3);
  opacity: .55; transition: opacity .15s;
}
.tc-stick.on .tc-base { opacity: 1; }
.tc-stick.on ~ .tc-zone-hint { opacity: 0; }
.tc-knob {
  position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6d8, #ffd25a 45%, #e08a1e);
  border: 2px solid rgba(0,0,0,.35); box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.tc-stick:not(.on) .tc-knob { transition: transform .12s ease-out; }

.tc-top {
  position: absolute; top: calc(env(safe-area-inset-top) + 8px); right: calc(env(safe-area-inset-right) + 10px);
  display: flex; gap: 8px; pointer-events: auto;
}
.tc-small {
  width: 42px; height: 42px; border-radius: 12px; border: 1px solid rgba(255,255,255,.3);
  background: rgba(14,10,24,.55); color: #fff; font: 900 15px system-ui, sans-serif;
}
.tc-small:active { background: rgba(255,210,90,.35); }

/* botões em arco no canto direito */
.tc-buttons {
  position: absolute; right: calc(env(safe-area-inset-right) + 14px); bottom: 14px; width: 236px; height: 214px;
  pointer-events: none;
}
.tc-btn {
  opacity: .88;
  position: absolute; pointer-events: auto; border-radius: 50%; display: grid; place-items: center; align-content: center; gap: 1px;
  border: 2px solid rgba(255,255,255,.4); color: #fff; touch-action: none;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 -4px 0 rgba(0,0,0,.2);
  transition: transform .06s, filter .06s;
}
.tc-btn svg { width: 28px; height: 28px; fill: #fff; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tc-btn b { font: 900 10px system-ui, sans-serif; letter-spacing: .06em; }
.tc-btn.on { transform: scale(.9); filter: brightness(1.35); }
.tc-jump svg { width: 34px; height: 34px; }
.tc-jump { right: 0; bottom: 0; width: 92px; height: 92px; background: radial-gradient(circle at 40% 30%, #ffb35a, #e8641e); }
.tc-attack { right: 104px; bottom: 6px; width: 80px; height: 80px; background: radial-gradient(circle at 40% 30%, #ff7a7a, #c42c3c); }
.tc-attack svg { fill: #fff; stroke: none; }
.tc-dash { right: 8px; bottom: 104px; width: 70px; height: 70px; background: radial-gradient(circle at 40% 30%, #7fe3ff, #2f7fd8); }
.tc-dash svg { fill: none; }
.tc-dash svg path:last-child { fill: #fff; }
.tc-throw { right: 92px; bottom: 96px; width: 64px; height: 64px; background: radial-gradient(circle at 40% 30%, #c9a6ff, #7a4bd6); }
.tc-throw svg { fill: none; }
.tc-jump svg { stroke: none; }

/* celular de pé: pede para girar */
.rotate-hint { display: none; }
@media (orientation: portrait) {
  body.has-touch.phone.in-fight:not(.rotate-ok) .rotate-hint {
    display: grid; place-items: center; position: fixed; inset: 0; z-index: 60; background: rgba(10,6,18,.94); color: #fff; text-align: center;
  }
  .rotate-hint div { display: grid; gap: 8px; justify-items: center; }
  .rotate-hint b { font: 900 22px system-ui, sans-serif; }
  .rotate-hint small { color: rgba(255,255,255,.6); }
  .rotate-hint .btn { margin-top: 10px; }
  .rotate-phone { width: 46px; height: 76px; border: 4px solid #ffd25a; border-radius: 10px; animation: rotate-phone 2s ease-in-out infinite; }
}
@keyframes rotate-phone { 0%, 25% { transform: rotate(0); } 55%, 100% { transform: rotate(-90deg); } }

/* treino no celular: painel menor e botões de toque */
.th-touch { gap: 6px; }
.th-touch .th-toggle { margin-top: 6px; }
@media (max-height: 520px) {
  .training-hud { top: 8px; left: 8px; width: 190px; padding: 8px 10px; transform-origin: top left; }
  .training-hud .th-combo b { font-size: 28px; }
  .training-hud .th-stats { font-size: 11px; }
  .training-hud .th-title { font-size: 11px; }
  .training-hud .th-toggle { padding: 5px 8px; font-size: 11px; margin-top: 6px; }
}
body.has-touch .training-hud { z-index: 25; }

/* ---------- celular deitado (tela baixa): menus mais compactos ---------- */
@media (max-height: 520px) {
  .menu-screen { overflow-y: auto; }
  .step-head { padding: 10px 16px 0; gap: 14px; }
  .step-head h1 { font-size: 22px; }
  .step-head small { font-size: 9px; }
  .back { padding: 6px 12px; font-size: 13px; }

  #screen-mode:not([hidden]) { display: block; }
  .mode-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; margin: 0 auto; padding: 12px 16px 18px; }
  .mode-tile:nth-child(7) { grid-column: span 2; }
  .mode-tile { padding: 6px 6px 10px; border-radius: 12px; }
  .mode-tile canvas { height: 78px; border-radius: 8px; }
  .mode-tile b { padding: 7px 3px 0; font-size: 15px; }
  .mode-tile[data-mode="ffa"] b { font-size: 12.5px; }
  .mode-tile span { padding: 3px 3px 0; font-size: 10px; line-height: 1.3; }
  .step-bar i { width: 16px; }

  .card-list { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; gap: 10px; margin-top: 8px; padding: 14px 16px 76px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .card-list::-webkit-scrollbar { display: none; }
  .el-card { flex: 0 0 150px; width: 150px; scroll-snap-align: center; padding-bottom: 10px; }
  .el-card .stage { height: 88px; padding-top: 8px; }
  .el-card .n { font-size: 20px; }
  .el-card .tl { font-size: 10.5px; min-height: 0; }
  .el-card .info { gap: 5px; padding: 2px 10px 0; }
  .el-card .bar { grid-template-columns: 52px 1fr; font-size: 9.5px; }
  .el-card .perks li { font-size: 9px; padding: 2px 6px; }
  .el-card .rnd-note { font-size: 10px; }
  .el-card.on { transform: translateY(-6px) scale(1.02); }

  .step-foot { bottom: 8px; padding: 6px 8px 6px 14px; gap: 12px; }
  .step-foot .hint { display: none; }
  .go-btn { padding: 8px 22px; font-size: 15px; }

  .map-arrows button { width: 40px; height: 40px; font-size: 22px; }
  .map-track { --mw: min(62vw, calc((100vh - 232px) * 1.78)); margin-top: 0; height: calc(var(--mw) * 0.5625 + 46px); }
  .map-desc .map-tags { display: none; }
  .map-name { margin-bottom: 6px; gap: 2px; }
  .map-name b { font-size: 20px; }
  .map-eyebrow { font-size: 9px; }
  .map-under { width: min(70vw, 560px); min-width: 0; margin-top: 4px; gap: 6px 16px; }
  .map-desc { gap: 4px; }
  .map-desc p { font-size: 12px; }
  .map-tags span { font-size: 9.5px; padding: 3px 8px; }
  .map-count { font-size: 16px; }
  .map-dots button { width: 16px; }
  .map-dots button.on { width: 28px; }

  .vs-top { padding: 8px 14px 0; }
  .vs-title h1 { font-size: 30px; }
  .vs-title p { display: none; }
  .vs-side { top: 64px; max-width: 34%; }
  .vs-side.l { left: 20px; }
  .vs-side.r { right: 20px; }
  .vs-side .tag { font-size: 10px; padding: 2px 9px; }
  .vs-side h2 { font-size: 28px; margin: 4px 0 2px; }
  .vs-side ul { font-size: 11px; line-height: 1.45; }
  .vs-side .names { display: none; }
  .vs-bar { padding: 8px 12px 10px; gap: 10px; }
  .vs-bar .hint { display: none; }
  .vs-map { padding: 4px 6px 4px 12px; }
  .vs-map b { font-size: 13px; }
}
@media (max-height: 520px) {
  .result-wrap { padding: 14px 16px 20px; }
  .result-eyebrow { font-size: 10px; }
  .result-title { font-size: 46px; }
  .result-sub { margin: 4px 0 12px; font-size: 13px; }
  .result-actions { margin-top: 12px; }
}
@media (max-height: 520px) {
  #screen-result { overflow-y: auto; height: 100vh; }
  .result-cards { gap: 8px; }
  .pcard { padding: 10px 12px 10px 16px; }
  .pavatar { width: 34px; height: 34px; font-size: 15px; }
  .pcard .pname { font-size: 15px; }
  .pcard .pmeta { font-size: 10px; }
  .ptags { margin-top: 6px; }
  .pstats { grid-template-columns: repeat(6, 1fr); margin-top: 6px; }
  .pstat b { font-size: 15px; }
  .pstat span { font-size: 8px; letter-spacing: .04em; }
  .result-btn { padding: 8px 22px; font-size: 15px; }
}

/* brasão pequeno no canto de baixo à direita da tela inicial */
.home-crest {
  position: fixed; z-index: 2; pointer-events: none;
  right: calc(28px + env(safe-area-inset-right, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  width: 64px; height: 70px; opacity: .92;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.45));
}
@media (max-height: 520px) { .home-crest { width: 40px; height: 44px; right: 14px; bottom: 12px; } }

/* treino livre: trocar de personagem */
.th-el { margin-top: 10px; display: grid; gap: 5px; }
.th-el-l { font: 700 10px var(--font); letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.6); display: flex; align-items: center; gap: 6px; }
.th-el-l kbd { display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 4px; border: 1px solid rgba(255,255,255,.3); font: 800 10px system-ui, sans-serif; color: #fff; text-align: center; letter-spacing: 0; }
.th-el-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.th-el-btn { pointer-events: auto; height: 46px; padding: 0; border-radius: 9px; cursor: pointer; overflow: hidden;
  border: 1.5px solid color-mix(in srgb, var(--c) 45%, rgba(255,255,255,.1));
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c) 40%, transparent), rgba(10,8,20,.6)); opacity: .7; transition: opacity .15s, transform .15s, border-color .15s; }
.th-el-btn canvas { width: 100%; height: 100%; display: block; }
.th-el-btn:hover { opacity: 1; }
.th-el-btn.on { opacity: 1; border-color: #ffd25a; box-shadow: 0 0 0 2px rgba(255,210,90,.3); transform: translateY(-2px); }
.th-el-btn:focus-visible { outline: 2px solid #ffd25a; outline-offset: 2px; }
@media (max-height: 520px) { .th-el-btn { height: 34px; } }

/* ---------- conquistas ---------- */
.ach-panel { width: min(560px, calc(100% - 32px)); }
.ach-tabs { display: flex; gap: 6px; margin: 4px 0 6px; }
.ach-tabs button { flex: 1; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.04); color: rgba(255,255,255,.75); font: italic 800 14px var(--font); cursor: pointer; }
.ach-tabs button b { font-style: normal; font-size: 11px; opacity: .7; margin-left: 4px; }
.ach-tabs button.on { border-color: #ffd25a; color: #fff; background: rgba(255,210,90,.12); }
.ach-tabs button[data-tier="ouro"].on { background: linear-gradient(90deg, rgba(255,210,90,.28), rgba(232,160,30,.12)); color: #ffe08a; }
.ach-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ach-item { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.ach-i { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 20px; background: rgba(0,0,0,.3); filter: grayscale(1); opacity: .6; }
.ach-t b { display: block; font: italic 800 14px var(--font); color: rgba(255,255,255,.7); }
.ach-t span { font-size: 12px; color: rgba(255,255,255,.5); }
.ach-item em { font: 800 12px var(--font); font-style: normal; color: rgba(255,255,255,.5); font-variant-numeric: tabular-nums; }
.ach-item.got { border-color: rgba(120,220,160,.35); background: rgba(120,220,160,.07); }
.ach-item.got .ach-i { filter: none; opacity: 1; background: linear-gradient(160deg, #4a4752, #24222b); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.ach-item.got .ach-t b { color: #fff; }
.ach-item.got em { color: #7fe0a8; font-size: 16px; }
.ach-item.ouro.got { border-color: rgba(255,210,90,.6); background: linear-gradient(90deg, rgba(255,210,90,.16), rgba(255,210,90,.03)); box-shadow: inset 0 0 0 1px rgba(255,240,180,.08); }
.ach-item.ouro.got .ach-i { background: radial-gradient(circle at 40% 30%, #fff1b8, #e8a520); box-shadow: 0 0 10px rgba(255,200,80,.5); }
.ach-item.ouro.got .ach-t b, .ach-item.ouro.got em { color: #ffe08a; }
.ach-item.hidden .ach-i { font: 900 20px var(--font); color: rgba(255,255,255,.4); filter: none; }
.ach-item.hidden .ach-t b { letter-spacing: .2em; }

.result-ach { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; margin: 14px 0 0; }
.result-ach-l { font: 800 11px var(--font); letter-spacing: .25em; color: rgba(255,255,255,.6); margin-right: 4px; }
.ach-chip { padding: 5px 12px; border-radius: 999px; font: 800 12px var(--font); background: rgba(120,220,160,.15); border: 1px solid rgba(120,220,160,.45); color: #c8ffe0; }
.ach-chip.ouro { background: linear-gradient(90deg, rgba(255,210,90,.3), rgba(232,160,30,.15)); border-color: #ffd25a; color: #ffe08a; }

.ach-toasts { position: fixed; top: calc(16px + env(safe-area-inset-top, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); z-index: 60; display: grid; gap: 8px; pointer-events: none; }
.ach-toast { display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 14px; background: rgba(14,10,24,.94); border: 1px solid rgba(120,220,160,.5); box-shadow: 0 12px 30px rgba(0,0,0,.45); animation: ach-in .45s cubic-bezier(.2,1.3,.4,1) both; transition: opacity .5s, transform .5s; }
.ach-toast.ouro { border-color: #ffd25a; box-shadow: 0 0 24px rgba(255,200,80,.35), 0 12px 30px rgba(0,0,0,.45); }
.ach-toast.out { opacity: 0; transform: translateY(-10px); }
.ach-toast-i { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; color: #e6e4ea; background: linear-gradient(160deg, #4a4752, #24222b); }
.ach-toast.ouro .ach-toast-i { color: #6b4210; }
.ach-toast.ouro .ach-toast-i { background: radial-gradient(circle at 40% 30%, #fff1b8, #e8a520); }
.ach-toast small { display: block; font: 800 10px var(--font); letter-spacing: .2em; color: #7fe0a8; }
.ach-toast.ouro small { color: #ffd25a; }
.ach-toast b { font: italic 900 17px var(--font); color: #fff; }
@keyframes ach-in { from { opacity: 0; transform: translateY(-14px) scale(.95); } }
@media (prefers-reduced-motion: reduce) { .ach-toast { animation: none; } }

/* celular deitado (tela baixa): perfil menor no canto e sem a etiqueta de demonstração */
@media (max-height: 520px) {
  #screen-home .live-tag { display: none; }
  .profile-chip { top: 10px; right: calc(14px + env(safe-area-inset-right, 0px)); gap: 8px; }
  .profile-chip .pc-av { width: 46px; height: 46px; }
  .pc-txt b { font-size: 15px; }
  .profile-wrap { padding-top: 18px; }
  .profile-hero { min-height: 170px; }
  .pc-av.big { width: 88px; height: 88px; }
}

/* celular em pé: escolher foto com 5 por linha (cada arma numa linha só) */
@media (max-width: 560px) {
  .ap-card { padding: 16px 14px; }
  .ap-card h2 { font-size: 24px; }
  .ap-grid { grid-template-columns: repeat(5, 1fr); gap: 5px; }
  .ap-opt { padding: 6px 2px; }
  .ap-ring { width: 46px; height: 46px; }
  .ap-opt small { font-size: 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ap-frames { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .ap-frame b { font-size: 11.5px; }
  .ap-frame small { font-size: 10px; }
}

/* modo Torre: andar no alto da tela e aviso grande entre os andares */
.tower-hud {
  position: absolute; top: 64px; left: 50%; transform: translateX(-50%); z-index: 3; pointer-events: none;
  display: flex; align-items: baseline; gap: 8px; padding: 6px 16px; border-radius: 999px;
  background: rgba(14,9,24,.62); border: 1px solid rgba(255,210,90,.35); color: #fff; white-space: nowrap;
}
.tower-hud[hidden] { display: none; }
.tower-hud small { font: 800 11px var(--font); letter-spacing: .2em; color: #ffd25a; }
.tower-hud b { font: 900 22px var(--font); }
.tower-hud span { font: 700 12px var(--font); color: rgba(255,255,255,.75); }
.tower-banner {
  position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center;
  pointer-events: none; background: radial-gradient(ellipse at center, rgba(10,6,20,.72), rgba(10,6,20,.2) 70%);
  animation: towerIn .35s ease-out;
}
.tower-banner[hidden] { display: none; }
.tower-banner small { font: 800 15px var(--font); letter-spacing: .32em; color: #ffd25a; }
.tower-banner b { font: italic 900 clamp(54px, 11vw, 120px) var(--font); line-height: 1; color: #fff; text-shadow: 0 4px 0 rgba(0,0,0,.4), 0 0 30px rgba(255,200,90,.35); }
.tower-banner span { font: 800 clamp(16px, 2.6vw, 24px) var(--font); color: #fff; }
.tower-banner em { font: 700 15px var(--font); font-style: normal; color: #7dffb8; min-height: 1em; }
.tower-banner.win b { color: #ffd25a; }
@keyframes towerIn { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tower-banner { animation: none; } }
@media (max-height: 520px) {
  .tower-hud { top: 44px; padding: 3px 12px; }
  .tower-hud b { font-size: 16px; }
  .tower-banner b { font-size: 58px; }
  .tower-banner span { font-size: 16px; }
  .tower-banner em { font-size: 12px; max-width: 60vw; }
}

/* coleção de acessórios no perfil */
.profile-collection { margin-top: 16px; }
#profile-collection { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.pcol { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid transparent; }
.pcol.on { border-color: #ffd25a; background: rgba(255,210,90,.1); }
.pcol canvas, .pcol-q { width: 72px; height: 72px; border-radius: 50%; background: radial-gradient(circle at 50% 60%, rgba(120,170,255,.35), rgba(255,255,255,.04)); }
.pcol-q { display: grid; place-items: center; font-size: 30px; filter: grayscale(1); opacity: .5; }
.pcol b { display: block; font-size: 15px; }
.pcol small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.pcol.locked b { color: rgba(255,255,255,.6); }
.pcol-more { grid-column: 1 / -1; margin: 4px 0 0; }

/* andar do Guardião (chefe) */
.tower-hud.boss { border-color: rgba(255,90,110,.6); box-shadow: 0 0 18px rgba(255,90,110,.25); }
.tower-hud.boss span { color: #ff9aa8; font-weight: 800; }
.tower-banner.boss small { color: #ff7a8a; }
.tower-banner.boss b { color: #ffd25a; text-shadow: 0 4px 0 rgba(0,0,0,.4), 0 0 34px rgba(255,80,100,.55); }

/* cronômetro do tutorial (speedrun da conquista de ouro) */
.tut-clock {
  position: absolute; top: 104px; right: 14px; z-index: 3; pointer-events: none;
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px; padding: 6px 12px; border-radius: 12px; white-space: nowrap;
  background: rgba(14,9,24,.6); border: 1px solid rgba(255,210,90,.35); color: #fff;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.tut-clock b { font: 900 20px var(--font); font-variant-numeric: tabular-nums; color: #ffd25a; }
.tut-clock small { font: 700 11px var(--font); color: rgba(255,255,255,.7); }
.tut-clock.late b { color: #ff9a8a; }
.tut-clock.off { border-color: rgba(255,255,255,.15); }
.tut-clock.off b { color: rgba(255,255,255,.6); }
@media (max-width: 560px), (max-height: 520px) { .tut-clock { top: auto; bottom: 10px; right: 50%; transform: translateX(50%); padding: 3px 10px; } .tut-clock b { font-size: 15px; } .tut-clock small { display: none; } }

/* ---------- tela ONLINE ---------- */
#screen-online:not([hidden]) { display: flex; flex-direction: column; }
#screen-online .step-head { width: 100%; max-width: 1100px; margin: 0 auto; }
.online-wrap { position: relative; z-index: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 24px 40px 40px; }
.online-entry { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 4vh; }
.online-card { display: flex; flex-direction: column; }
.online-card > .go-btn, .online-join { margin-top: auto; }
.online-card > .go-btn { align-self: flex-start; white-space: nowrap; }
.online-join .go-btn { white-space: nowrap; }
.online-card {
  padding: 26px 26px 28px; border-radius: 18px; border: 1px solid rgba(90,215,255,.3);
  background: radial-gradient(120% 70% at 50% 0%, rgba(90,215,255,.14), transparent 60%), linear-gradient(165deg, #12343f, #071118);
  box-shadow: 0 18px 36px rgba(0,0,0,.45);
}
.online-card h2 { margin: 0 0 6px; font-size: 26px; font-style: italic; font-weight: 900; }
.online-card .hint { min-height: 42px; }
.online-join { display: flex; gap: 10px; }
.online-join input {
  flex: 1; min-width: 0; font: 900 30px var(--font); letter-spacing: .3em; text-align: center; padding: 8px 10px; border-radius: 12px;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.2); color: #fff;
}
.online-join input:focus { outline: none; border-color: #5ad7ff; box-shadow: 0 0 0 3px rgba(90,215,255,.25); }
.online-status { grid-column: 1 / -1; min-height: 1.4em; margin: 6px 0 0; color: rgba(220,240,255,.8); text-align: center; }
.online-status.error { color: #ff9a8a; }
.online-lobby { display: grid; gap: 16px; }
.ol-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ol-code { display: flex; align-items: center; gap: 14px; padding: 10px 18px; border-radius: 14px; background: rgba(0,0,0,.35); border: 1px solid rgba(90,215,255,.35); }
.ol-code small { font: 800 11px var(--font); letter-spacing: .2em; color: rgba(255,255,255,.65); }
.ol-code b { font: 900 38px var(--font); letter-spacing: .18em; color: #8fe6ff; font-variant-numeric: tabular-nums; }
.ol-timer { font-weight: 800; color: rgba(255,255,255,.85); }
.ol-timer.hurry { color: #ffd25a; }
.ol-timer.error { color: #ff9a8a; }
.ol-players { display: flex; align-items: stretch; gap: 14px; }
.ol-player { flex: 1; display: grid; grid-template-columns: 86px 1fr; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.ol-player.you { border-color: rgba(90,215,255,.5); }
.ol-player.ready { box-shadow: 0 0 0 1px rgba(77,255,166,.6), 0 0 20px rgba(77,255,166,.15); }
.ol-player.empty { opacity: .6; border-style: dashed; }
.ol-player canvas { width: 86px; height: 86px; border-radius: 12px; background: rgba(0,0,0,.25); }
.ol-player b { display: block; font-size: 18px; }
.ol-player small { display: block; color: rgba(255,255,255,.65); margin: 2px 0 6px; }
.ol-badge { display: inline-block; font: 800 11px var(--font); letter-spacing: .12em; padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); }
.ol-badge.on { background: rgba(77,255,166,.2); color: #7dffb8; }
.ol-vs { align-self: center; font: italic 900 30px var(--font); color: rgba(255,255,255,.8); }
.ol-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; }
.ol-section h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.ol-section h3 small { text-transform: none; letter-spacing: 0; color: rgba(255,255,255,.5); }
.ol-section .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ol-section .chips button { padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; font: 700 13px var(--font); cursor: pointer; }
.ol-section .chips button.on { background: rgba(90,215,255,.22); border-color: #5ad7ff; }
.ol-section .chips button:disabled { cursor: default; opacity: .55; }
.ol-section .chips button.on:disabled { opacity: 1; }
.ol-elements { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.ol-el { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid transparent; color: #fff; cursor: pointer; font: 700 13px var(--font); }
.ol-el canvas { width: 64px; height: 64px; }
.ol-el.on { border-color: #ffd25a; background: rgba(255,210,90,.12); }
.ol-el:hover { background: rgba(255,255,255,.1); }
.ol-friends { display: flex; flex-wrap: wrap; gap: 8px; }
.ol-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
#ol-ready.on { background: linear-gradient(180deg, #5dffae, #1fb86a); color: #06210f; }
@media (max-width: 760px) {
  .online-wrap { padding: 16px 14px 28px; }
  .online-entry { grid-template-columns: 1fr; margin-top: 8px; }
  .ol-players { flex-direction: column; }
  .ol-vs { display: none; }
  .ol-grid { grid-template-columns: 1fr; }
  .ol-elements { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ol-code b { font-size: 30px; }
}
@media (max-height: 520px) {
  #screen-online:not([hidden]) { display: block; }
  .online-entry { margin-top: 8px; }
  .ol-player canvas { width: 60px; height: 60px; }
  .ol-player { grid-template-columns: 60px 1fr; }
  .ol-el canvas { width: 44px; height: 44px; }
}

/* ---------- amigos ---------- */
.friends-panel { width: min(460px, 92vw); max-height: 86vh; overflow: auto; }
.friends-panel h3 { margin: 16px 0 6px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.fr-add { display: flex; gap: 8px; }
.fr-add input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.3); color: #fff; font: 600 15px var(--font); }
.fr-msg { margin: 8px 0 0; color: #7dffb8; }
.fr-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.fr-name { font-weight: 800; }
.fr-state { color: rgba(255,255,255,.5); margin-right: auto; }
.fr-row:not(:has(.fr-state)) .fr-name { margin-right: auto; }
.fr-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.25); flex: none; }
.fr-row.online .fr-dot { background: #4dff9a; box-shadow: 0 0 8px rgba(77,255,154,.8); }
.fr-row.online .fr-state { color: #7dffb8; }
.invite-toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 80; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px 12px 18px; border-radius: 14px; background: rgba(12,26,34,.96); border: 1px solid rgba(90,215,255,.5); box-shadow: 0 14px 34px rgba(0,0,0,.5); color: #fff;
}
.invite-toast[hidden] { display: none; }
.invite-toast b { color: #8fe6ff; margin-right: 4px; }

/* ícones vetoriais (public/js/icons.js): do tamanho da letra, na cor do texto */
.icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; flex: none; }
.ach-i .icon, .ach-toast-i .icon, .pcol-q .icon, .pf-i .icon { width: 1.05em; height: 1.05em; vertical-align: middle; }
.pf-i { color: #ffd25a; }
.ach-item.got .ach-i { color: #e6e4ea; }
.ach-item.ouro.got .ach-i { color: #6b4210; }
.ach-item em .icon { color: #7dffb8; }
.ach-chip .icon { margin-right: 2px; color: #d6d3dc; }
.ach-chip.ouro .icon { color: #ffe08a; }
.icon.host { color: #ffd25a; }
.tc-small .icon { width: 20px; height: 20px; vertical-align: middle; }
.tut-clock b .icon { width: 15px; height: 15px; margin-right: 5px; vertical-align: -2px; }
.pad-title .icon, .pad-only .icon { vertical-align: -0.2em; }
.pcol-q { color: rgba(255,255,255,.75); }