/* ============================================================
   Tema "Arena" — visual das telas (introdução, início, loja, regras, testador, encerramento)
   Mesma linguagem do jogo: cenário ao fundo, contorno grosso, botões brilhantes de arcade, placas de HUD.
   Regras de cor: vermelho/branco = 13 · amarelo/verde = 22 · o resto da interface é azul/violeta/ciano/branco.
   Acessibilidade: foco visível, alvos ≥ 48 px, contraste ≥ 4,5:1, respeita "reduzir movimento".
   ============================================================ */
:root {
  --ink: #02060f; --navy: #0a1d3f; --navy2: #12306a; --cyan: #7dd3fc; --blue: #3b82f6; --violet: #8b5cf6;
  --txt: #f1f6ff; --mut: #b4c6e8;          /* texto e texto secundário sobre as placas (contraste ≥ 7:1) */
  --plate: linear-gradient(180deg, rgba(22, 52, 104, .94), rgba(8, 22, 52, .96));
  --display: Bangers, Impact, 'Arial Black', sans-serif;
  --gap: 16px;
}

/* ---------- fundo: cenário do jogo + véu escuro ---------- */
html { background: #040b18; }
body { background: transparent; color: var(--txt); line-height: 1.5; }
body::before { content: ''; position: fixed; inset: 0; z-index: -2; background: var(--scene, none) center bottom / cover no-repeat; }
body::after { content: ''; position: fixed; inset: 0; z-index: -1; background:
  radial-gradient(900px 520px at 50% -5%, rgba(40, 80, 170, .35), transparent 70%),
  linear-gradient(180deg, rgba(4, 11, 28, .62) 0%, rgba(4, 11, 28, .86) 38%, rgba(3, 8, 20, .95) 100%); }
body.scene-bsb { --scene: url('img/bg_bsb.webp?v=57'); }
body.scene-rio { --scene: url('img/bg_rio.webp?v=57'); }
body.scene-jn { --scene: url('img/bg_jn.webp?v=57'); }
body.in-room::before, body.in-room::after { display: none; }   /* na luta, fundo preto puro */

/* ---------- foco, movimento ---------- */
:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 10px; box-shadow: 0 0 0 6px rgba(125, 211, 252, .55); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- tipografia ---------- */
h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: 1px; }
.muted { color: var(--mut); }
a { color: var(--cyan); }
a:hover { color: #fff; }

/* ---------- placa (cartão) com moldura de HUD ---------- */
.card { position: relative; background: var(--plate); border: 3px solid var(--ink); border-radius: 20px; padding: 18px 20px; margin: var(--gap) 0;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(125, 211, 252, .5), inset 0 2px 0 3px rgba(255, 255, 255, .06); backdrop-filter: blur(6px); }
.card h2 { margin: 0 0 12px; font-size: 32px; line-height: 1.05; color: #fff; text-shadow: 0 3px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 -2px 0 var(--ink); }
.card h2::after { content: ''; display: block; height: 5px; width: 72px; margin-top: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--cyan), var(--violet)); box-shadow: 0 2px 0 var(--ink); }
.card h3 { color: #dbeafe; }

/* ---------- botões de arcade ---------- */
.cta, .ghost, .seg button, .quick a, .hub button, .pickbtn, .dm { -webkit-tap-highlight-color: transparent; }
.cta { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 58px; padding: 10px 22px; margin-top: 16px; font-family: var(--display); font-size: 30px; letter-spacing: 1.5px; color: #fff;
  text-shadow: 0 3px 0 #0a1c6b, 2px 0 0 #0a1c6b, -2px 0 0 #0a1c6b, 0 -2px 0 #0a1c6b; background: linear-gradient(180deg, #7db4ff 0%, #3b6cf0 52%, #2548c4 100%);
  border: 3px solid var(--ink); border-radius: 18px; box-shadow: inset 0 4px 0 rgba(255, 255, 255, .45), inset 0 -5px 0 rgba(0, 0, 40, .28), 0 7px 0 #0e2a8a, 0 14px 22px rgba(0, 0, 0, .55); cursor: pointer; transition: transform .06s, filter .15s; text-decoration: none; }
.cta:hover { filter: brightness(1.1); }
.cta:active { transform: translateY(5px); box-shadow: inset 0 4px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(0, 0, 40, .28), 0 2px 0 #0e2a8a, 0 6px 12px rgba(0, 0, 0, .5); }
.cta:disabled { filter: grayscale(.7) brightness(.7); cursor: not-allowed; transform: none; }
.ghost { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; margin-top: 12px; padding: 8px 16px; font-family: var(--display); font-size: 22px; letter-spacing: 1px; color: #fff;
  background: linear-gradient(180deg, rgba(30, 64, 130, .85), rgba(14, 32, 76, .9)); border: 3px solid var(--ink); border-radius: 14px; box-shadow: inset 0 0 0 2px rgba(125, 211, 252, .6), 0 5px 0 #040d22, 0 10px 16px rgba(0, 0, 0, .4); cursor: pointer; text-decoration: none; }
.ghost:hover { filter: brightness(1.15); }
.ghost:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px rgba(125, 211, 252, .6), 0 2px 0 #040d22; }
.cta.violet { background: linear-gradient(180deg, #b79cff 0%, #8b5cf6 52%, #6d33dd 100%); text-shadow: 0 3px 0 #2e1065, 2px 0 0 #2e1065, -2px 0 0 #2e1065; box-shadow: inset 0 4px 0 rgba(255, 255, 255, .45), inset 0 -5px 0 rgba(30, 0, 60, .28), 0 7px 0 #4c1d95, 0 14px 22px rgba(0, 0, 0, .55); }

/* ---------- seletores (segmentado) ---------- */
.lbl { margin: 14px 0 8px; font-weight: 700; color: #e8f0ff; font-size: 15px; }
.lbl small { color: var(--mut); font-weight: 600; }
.seg { display: flex; gap: 10px; flex-wrap: wrap; }
.seg button { flex: 1; min-width: 56px; min-height: 52px; padding: 8px 10px; font-family: var(--display); font-size: 24px; letter-spacing: .5px; color: #dbeafe;
  background: linear-gradient(180deg, #14306a, #0b1d45); border: 3px solid var(--ink); border-radius: 14px; box-shadow: inset 0 0 0 2px rgba(125, 211, 252, .35), 0 4px 0 #040d22; cursor: pointer; transition: transform .06s; }
.seg button:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px rgba(125, 211, 252, .35), 0 1px 0 #040d22; }
.seg button.on { color: #fff; background: linear-gradient(180deg, #7db4ff, #3b6cf0 55%, #2548c4); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), 0 4px 0 #0e2a8a; text-shadow: 0 2px 0 #0a1c6b; }
.seg button.s13 { color: #ffd1d6; } .seg button.s22 { color: #fff3a6; }
.seg button.s13.on { color: #fff; background: linear-gradient(180deg, #ff6b78, #e11d2e 55%, #a30f1d); box-shadow: inset 0 0 0 3px #fff, 0 4px 0 #6d0814; text-shadow: 0 2px 0 #6d0814; }
.seg button.s22.on { color: #0a4d22; background: linear-gradient(180deg, #fff27a, #ffd400 55%, #e6a800); box-shadow: inset 0 0 0 3px var(--g22, #0b8f3a), 0 4px 0 #8a6400; text-shadow: none; }
.seg.mini button { min-height: 44px; font-size: 22px; padding: 4px 18px; flex: none; }

/* ---------- campos ---------- */
input, select { width: 100%; min-height: 52px; padding: 10px 14px; font-size: 18px; color: #fff; background: rgba(4, 12, 30, .85); border: 3px solid var(--ink); border-radius: 14px; box-shadow: inset 0 0 0 2px rgba(125, 211, 252, .45); margin-top: 6px; }
input::placeholder { color: #8fa6cf; }
input:focus, select:focus { outline: none; box-shadow: inset 0 0 0 3px var(--cyan), 0 0 0 4px rgba(125, 211, 252, .35); }
input:disabled, select:disabled { opacity: .55; }
input.code { font-family: var(--display); font-size: 40px; letter-spacing: 12px; text-align: center; text-transform: uppercase; padding-left: 22px; }
.field { font-weight: 700; }

/* ---------- topo, logo e lutadores se encarando ---------- */
.hero { display: block; text-align: center; padding: 6px 0 0; }
.brand { display: flex; align-items: center; justify-content: center; gap: 12px; }
.brand img { width: 78px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); }
.brand h1 { margin: 0; font-size: clamp(34px, 7vw, 56px); line-height: .95; color: #fff; text-shadow: 0 4px 0 var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 -3px 0 var(--ink), 0 0 26px rgba(125, 211, 252, .55); }
.brand h1 span { color: var(--cyan); }
.tagline { margin: 6px 0 0; color: #dbeafe; font-weight: 600; text-shadow: 0 2px 0 var(--ink); }
.hero-stage { position: relative; display: flex; align-items: flex-end; justify-content: center; height: clamp(170px, 28vw, 290px); margin: 6px 0 0; pointer-events: none; }
.hero-stage .fighter { height: 100%; width: auto; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .65)); animation: bob 2.4s ease-in-out infinite; }
.hero-stage .fighter.r { animation-delay: -1.2s; }
.hero-stage .vsmark { position: absolute; left: 50%; top: 34%; width: clamp(64px, 13vw, 120px); transform: translateX(-50%) rotate(-6deg); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); animation: pulse 1.8s ease-in-out infinite; }
.hero-stage .ground { position: absolute; left: 12%; right: 12%; bottom: -6px; height: 16px; border-radius: 50%; background: rgba(0, 0, 0, .5); filter: blur(5px); }
@keyframes bob { 50% { transform: translateY(-6px); } }
@keyframes pulse { 50% { transform: translateX(-50%) rotate(-6deg) scale(1.08); } }

/* ---------- navegação principal (menu do jogo) ---------- */
.hub { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 var(--gap); }
.hub button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 96px; padding: 10px 6px; font-family: var(--display); font-size: 19px; line-height: 1.05; letter-spacing: .5px; color: #fff; text-align: center;
  background: var(--plate); border: 3px solid var(--ink); border-radius: 18px; box-shadow: inset 0 0 0 2px rgba(125, 211, 252, .4), 0 6px 0 #040d22, 0 12px 18px rgba(0, 0, 0, .45); cursor: pointer; transition: transform .06s; }
.hub button:active { transform: translateY(4px); box-shadow: inset 0 0 0 2px rgba(125, 211, 252, .4), 0 2px 0 #040d22; }
.hub button.on { background: linear-gradient(180deg, #3b6cf0, #1d3aa6); box-shadow: inset 0 0 0 3px #fff, 0 6px 0 #0e2a8a, 0 0 28px rgba(125, 211, 252, .55); }
.ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #8cc0ff, #2a55d8 62%, #162f8c); border: 3px solid #d7e1ee; box-shadow: 0 0 0 2px var(--ink), 0 4px 0 rgba(0, 0, 0, .5); }
.ico svg { width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ico img { width: 30px; height: 30px; }
.badge { background: var(--violet); color: #fff; border-radius: 10px; padding: 0 7px; font: 800 12px/20px system-ui; font-style: normal; }
.quick { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 12px 0 0; }
.quick a { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 6px 18px; font-family: var(--display); font-size: 19px; letter-spacing: .5px; color: #fff; text-decoration: none; background: linear-gradient(180deg, rgba(30, 64, 130, .9), rgba(14, 32, 76, .92)); border: 3px solid var(--ink); border-radius: 99px; box-shadow: inset 0 0 0 2px rgba(125, 211, 252, .5), 0 4px 0 #040d22; }
.quick a small { color: #ddd6fe; font-family: system-ui, sans-serif; font-size: 11px; }

/* ---------- placar ---------- */
.versus { display: flex; align-items: stretch; justify-content: center; gap: 10px; }
.versus .vs { width: 70px; align-self: center; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6)); }
.side { flex: 1; text-align: center; border-radius: 16px; padding: 12px 6px 12px; border: 3px solid var(--ink); }
.side.s13 { background: linear-gradient(180deg, rgba(225, 29, 46, .38), rgba(60, 8, 20, .55)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
.side.s22 { background: linear-gradient(180deg, rgba(255, 212, 0, .3), rgba(11, 70, 40, .55)); box-shadow: inset 0 0 0 2px rgba(11, 143, 58, .9); }
.side img { width: 80px; height: 80px; border-radius: 16px; object-fit: cover; border: 3px solid currentColor; background: #0b1d3a; }
.side .num { display: block; font-family: var(--display); font-size: 40px; line-height: 1; margin-top: 4px; text-shadow: 0 3px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink); }
.side .big { font-family: var(--display); font-size: 58px; line-height: 1; color: #fff; text-shadow: 0 4px 0 var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink); }
.side .mid { font-family: var(--display); font-size: 32px; line-height: 1; color: #fff; text-shadow: 0 3px 0 var(--ink); margin-top: 4px; }
.side small { display: block; color: #e0ebff; font-size: 12.5px; font-weight: 600; }
.s13 { color: #ff8d97; } .s22 { color: #ffe14d; } .c13 { color: #ff8d97; } .c22 { color: #ffe14d; }

/* ---------- listas e tabelas ---------- */
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th { color: #cfe0ff; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .6px; }
th, td { padding: 9px 6px; border-bottom: 1px solid rgba(180, 198, 232, .2); }
tbody tr:nth-child(even) { background: rgba(255, 255, 255, .03); }
.live li { background: rgba(4, 12, 30, .7); border: 2px solid rgba(125, 211, 252, .4); border-radius: 14px; padding: 10px 14px; }
.live li button { min-height: 44px; padding: 6px 18px; font-family: var(--display); font-size: 20px; background: linear-gradient(180deg, #7db4ff, #3b6cf0); color: #fff; border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 4px 0 #0e2a8a; }
.steps { color: var(--txt); line-height: 1.55; }

/* ---------- introdução ---------- */
.avail { border-color: var(--ink); background: linear-gradient(180deg, rgba(60, 38, 150, .95), rgba(24, 14, 70, .96)); box-shadow: 0 14px 34px rgba(0, 0, 0, .55), inset 0 0 0 2px rgba(196, 181, 253, .7); }
.avail-title { font-family: var(--display); font-size: 26px; color: #fff; text-shadow: 0 3px 0 var(--ink); }
.avail-dates b { color: #fff; text-shadow: 0 4px 0 var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink); }
.avail-note { color: #ddd6fe; }
.cdbox { background: linear-gradient(180deg, #0f1f4f, #060f2a); border: 3px solid var(--ink); border-radius: 14px; box-shadow: inset 0 0 0 2px var(--cyan), 0 4px 0 rgba(0, 0, 0, .5); min-width: 70px; }
.cdbox b { text-shadow: 0 3px 0 var(--ink), 0 0 18px rgba(125, 211, 252, .5); }
.cdbox i { color: #c7d2fe; font-weight: 700; }
.avail-status { font-family: var(--display); font-size: 22px; letter-spacing: 1px; padding: 6px 18px; background: #0b1d3a; border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px var(--cyan); }
.pickrow { gap: 12px; }
.pickbtn { min-height: 84px; background: linear-gradient(180deg, rgba(20, 48, 98, .95), rgba(6, 16, 40, .96)); border: 3px solid var(--ink); border-radius: 18px; cursor: pointer; box-shadow: 0 6px 0 #040d22, 0 12px 18px rgba(0, 0, 0, .45); }
.pickbtn.s13 { box-shadow: inset 0 0 0 3px #fff, 0 6px 0 #6d0814, 0 12px 18px rgba(0, 0, 0, .45); }
.pickbtn.s22 { box-shadow: inset 0 0 0 3px #0b8f3a, 0 6px 0 #8a6400, 0 12px 18px rgba(0, 0, 0, .45); }
.pickbtn:hover { filter: brightness(1.12); }
.pickbtn b { font-size: 46px; text-shadow: 0 3px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink); }
.pickbtn span { font-family: var(--display); font-size: 22px; letter-spacing: .5px; color: #fff; }
.demo-stage { border: 3px solid var(--ink); box-shadow: 0 0 0 3px var(--cyan), 0 12px 28px rgba(0, 0, 0, .6); border-radius: 16px; }
.demo-hint { background: rgba(4, 12, 30, .85); border: 2px solid rgba(125, 211, 252, .5); font-size: 16px; }
.dm { background: linear-gradient(180deg, rgba(30, 64, 130, .95), rgba(10, 24, 60, .96)); border: 3px solid var(--ink); border-radius: 16px; box-shadow: inset 0 0 0 2px rgba(125, 211, 252, .5), 0 5px 0 #040d22; min-height: 64px; }
.dm span { font-family: var(--display); font-size: 15px; letter-spacing: .5px; }
.checks li { background: rgba(4, 12, 30, .8); border: 2px solid rgba(125, 211, 252, .3); border-radius: 12px; color: #c9d8f5; font-size: 14.5px; }
.checks li.done { background: #12306a; border-color: var(--cyan); color: #fff; }
.winner-banner { border: 3px solid var(--ink); box-shadow: 0 0 0 3px #fff3 inset; }

/* ---------- carregando / avisos ---------- */
#loading { background: radial-gradient(900px 500px at 50% 30%, #16367a, #050d20); }
#loading .bar { height: 16px; border: 3px solid var(--ink); border-radius: 10px; background: #0a1a3d; box-shadow: 0 0 0 2px var(--cyan); }
#loading .bar i { background: repeating-linear-gradient(45deg, #7dd3fc 0 12px, #3b82f6 12px 24px); }
#toast { border: 3px solid var(--ink); border-radius: 16px; background: linear-gradient(180deg, #1b3a82, #0b1d45); box-shadow: inset 0 0 0 2px var(--cyan), 0 10px 24px rgba(0, 0, 0, .6); font-weight: 700; }
dialog { border: 3px solid var(--ink); border-radius: 20px; background: var(--plate); box-shadow: inset 0 0 0 2px rgba(125, 211, 252, .5), 0 20px 50px rgba(0, 0, 0, .7); }
dialog h3 { font-size: 28px; color: #fff; text-shadow: 0 3px 0 var(--ink); }

/* ---------- painel dentro da luta ---------- */
#panel .box { border: 3px solid var(--ink); background: var(--plate); box-shadow: inset 0 0 0 2px rgba(125, 211, 252, .5), 0 16px 40px rgba(0, 0, 0, .7); }
#panel-title { font-size: 32px; color: #fff; text-shadow: 0 3px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink); }

/* ---------- responsivo ---------- */
@media (max-width: 560px) {
  .card { padding: 14px 14px; border-radius: 18px; } .card h2 { font-size: 27px; }
  .hub { gap: 8px; } .hub button { min-height: 88px; font-size: 16px; } .ico { width: 40px; height: 40px; } .ico svg { width: 22px; height: 22px; }
  .cta { font-size: 27px; min-height: 56px; } .side .big { font-size: 48px; } .versus .vs { width: 52px; } .side img { width: 64px; height: 64px; }
  .brand img { width: 60px; }
}

/* ---------- telas estreitas: nada pode estourar a largura ---------- */
@media (max-width: 700px) {
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pickrow { flex-direction: column; }
  .pickbtn { width: 100%; }
  kbd { white-space: nowrap; }
}
.tablewrap, .scroll { max-width: 100%; }

/* ---------- ajustes finos ---------- */
.home-avail { margin: 8px auto 0; max-width: 46ch; padding: 6px 16px; width: fit-content; text-align: center; font-weight: 700; font-size: 14px; color: #fff; background: rgba(40, 20, 110, .85); border: 2px solid rgba(196, 181, 253, .8); border-radius: 99px; text-shadow: 0 2px 0 var(--ink); }
.hub .ico img { width: 34px; height: 34px; }
.seg + .lbl, .seg + #create-side, .lbl + .seg { margin-top: 8px; }
.seg { margin-bottom: 6px; }
.lbl { margin-top: 18px; }
#create-side .lbl:first-child { margin-top: 18px; }
.paid { margin-top: 4px; }
.cpusides .cpuside { border-width: 3px; background: rgba(4, 12, 30, .8); }

/* ---------- gráfico, ranking de salas, fatality ---------- */
#chart { margin-top: 10px; } #chart svg { width: 100%; height: auto; display: block; }
#chart .gl { stroke: rgba(180,198,232,.25); } #chart text { fill: #cfe0ff; font: 600 11px system-ui, sans-serif; }
#chart .b13 { fill: #e11d2e; stroke: #fff; stroke-width: 1; } #chart .b22 { fill: #ffd400; stroke: #0b8f3a; stroke-width: 1; }
#chart .empty { fill: #b4c6e8; font-size: 14px; }
.legend { display: flex; gap: 14px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.legend span.lg13, .legend span.lg22 { font-family: var(--display); font-size: 20px; padding: 0 12px; border-radius: 99px; border: 2px solid var(--ink); }
.lg13 { background: #e11d2e; color: #fff; } .lg22 { background: #ffd400; color: #0a5a26; }
.rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: r; }
.rank li { counter-increment: r; display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 14px; background: rgba(4,12,30,.75); border: 2px solid rgba(125,211,252,.35); }
.rank li::before { content: counter(r); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-family: var(--display); font-size: 20px; background: linear-gradient(180deg,#7db4ff,#3b6cf0); border: 2px solid var(--ink); color: #fff; }
.rank li:nth-child(1)::before { background: linear-gradient(180deg,#fff,#c4b5fd); color: #2e1065; }
.rank b { display: block; } .rank small { color: var(--mut); } .rank .n { font-family: var(--display); font-size: 22px; text-align: right; line-height: 1; } .rank .n small { display: block; font-family: system-ui; font-size: 11px; }
.rank li.muted::before { display: none; } .rank li.muted { display: block; }
#fatbar { position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%); z-index: 4; width: min(92%, 520px); padding: 10px 14px; text-align: center; background: linear-gradient(180deg, rgba(60,30,150,.96), rgba(20,10,70,.97)); border: 3px solid var(--ink); border-radius: 18px; box-shadow: inset 0 0 0 2px #c4b5fd, 0 12px 30px rgba(0,0,0,.7), 0 0 36px rgba(139,92,246,.7); animation: pulsefat .7s ease-in-out infinite; }
@keyframes pulsefat { 50% { transform: translateX(-50%) scale(1.03); } }
.fb-title { font-family: var(--display); font-size: 40px; line-height: 1; color: #fff; text-shadow: 0 3px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 0 20px #a78bfa; }
.fb-sub { font-size: 13px; color: #ddd6fe; margin-bottom: 6px; }
#fb-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
#fb-btns button { min-height: 46px; padding: 6px 14px; font-family: var(--display); font-size: 18px; color: #fff; background: linear-gradient(180deg,#b79cff,#8b5cf6 55%,#6d33dd); border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 4px 0 #3b1a8f; cursor: pointer; }
.unlock-note { margin-top: 8px; padding: 8px 12px; border-radius: 12px; background: rgba(60,38,150,.45); border: 2px solid #c4b5fd; font-size: 14px; }

/* ---------- desafios, emojis, textos ---------- */
.hub { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 560px) { .hub { grid-template-columns: repeat(3, 1fr); } }
.rules-mini { margin: 6px 0 4px; padding: 6px 12px; border-radius: 12px; background: rgba(4,12,30,.7); border: 2px solid rgba(125,211,252,.35); font-size: 14px; }
.rules-mini summary { cursor: pointer; font-weight: 700; color: #dbeafe; min-height: 32px; display: flex; align-items: center; }
.rules-mini p { margin: 6px 0; line-height: 1.5; }
.about p { line-height: 1.6; margin: 8px 0; font-size: 15.5px; }
.about { text-align: left; }
.duel-item { display: block !important; }
.duel-item .who { font-weight: 700; display: block; } .duel-item .when { color: var(--mut); font-size: 13px; display: block; margin: 2px 0 6px; }
.duel-item .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.duel-item .acts button { min-height: 42px; padding: 4px 14px; font-family: var(--display); font-size: 18px; border: 3px solid var(--ink); border-radius: 12px; color: #fff; background: linear-gradient(180deg,#7db4ff,#3b6cf0); box-shadow: 0 4px 0 #0e2a8a; cursor: pointer; }
.duel-item .acts button.no { background: linear-gradient(180deg,#556,#334); box-shadow: 0 4px 0 #111; }
.duel-item .acts button.go { background: linear-gradient(180deg,#b79cff,#8b5cf6 55%,#6d33dd); box-shadow: 0 4px 0 #3b1a8f; }
.st-tag { display: inline-block; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 800; background: #1b1450; border: 2px solid #c4b5fd; color: #ddd6fe; margin-left: 6px; }
.st-tag.live { background: #b0122b; border-color: #ffb3c0; color: #fff; animation: livepulse 1.2s ease-in-out infinite; }
@keyframes livepulse { 50% { opacity: .55; } }
.duel-group { list-style: none; font-family: var(--display); font-size: 18px; color: var(--y, #ffd23f); margin: 12px 0 4px; padding: 0 !important; background: none !important; border: 0 !important; }
.duel-item.past { opacity: .82; }
#emojibar { position: absolute; left: 50%; bottom: 38px; transform: translateX(-50%); width: max-content; z-index: 4; display: flex; align-items: center; gap: 6px; max-width: 96%; padding: 5px 10px; border-radius: 99px; background: rgba(4,12,30,.82); border: 2px solid rgba(125,211,252,.6); }
#emoji-btns { display: flex; gap: 3px; flex-wrap: nowrap; justify-content: center; }
#emoji-btns button { width: 34px; height: 34px; font-size: 19px; line-height: 1; border-radius: 50%; border: 2px solid transparent; background: rgba(255,255,255,.1); cursor: pointer; padding: 0; }
#emoji-btns button:active { transform: scale(.85); } #emoji-btns button:disabled { opacity: .35; }
@media (max-width: 700px) { #emoji-btns button { width: 34px; height: 34px; font-size: 18px; } }

/* ---------- conta / login ---------- */
.account { display: flex; justify-content: center; margin: 10px 0 0; }
.account .ghost { width: auto; margin: 0; padding: 6px 22px; font-size: 20px; }
.acct { display: inline-flex; align-items: center; gap: 10px; padding: 6px 8px 6px 16px; border-radius: 99px; background: rgba(4,12,30,.85); border: 2px solid var(--cyan); }
.acct b { font-family: var(--display); font-weight: 400; font-size: 20px; letter-spacing: .5px; } .acct small { color: var(--mut); font-size: 12px; }
.linklike { background: none; border: 0; color: var(--cyan); text-decoration: underline; font-weight: 700; cursor: pointer; min-height: 36px; padding: 0 8px; }
#login-modal { width: min(94vw, 440px); }
#login-modal .cta { font-size: 24px; min-height: 52px; }
.or { display: flex; align-items: center; gap: 10px; margin: 16px 0 10px; color: var(--mut); font-size: 13px; } .or::before, .or::after { content: ''; flex: 1; height: 2px; background: rgba(180,198,232,.25); }
#lg-google { display: flex; justify-content: center; min-height: 44px; }
.lg-err { color: #fda4af; font-weight: 700; min-height: 20px; margin: 8px 0 0; }
.namebar input:disabled { opacity: 1; background: rgba(18,48,106,.9); }

/* ================= v4.3: página inicial sem introdução ================= */
/* topo discreto: marca à esquerda, links e conta à direita */
.topnav { display: flex; align-items: center; gap: 14px; padding: 6px 2px 10px; border-bottom: 1px solid rgba(180,198,232,.18); margin-bottom: 6px; }
.brand-sm { display: flex; align-items: center; gap: 8px; text-decoration: none; color: #fff; margin-right: auto; }
.brand-sm img { width: 40px; } .brand-sm b { font-family: var(--display); font-weight: 400; font-size: 24px; letter-spacing: 1px; text-shadow: 0 2px 0 var(--ink); } .brand-sm span { color: var(--cyan); }
.topnav .links { display: flex; gap: 4px; }
.topnav .links a { color: #cfe0ff; text-decoration: none; font-weight: 600; font-size: 14px; padding: 8px 10px; border-radius: 10px; min-height: 40px; display: inline-flex; align-items: center; }
.topnav .links a:hover { background: rgba(125,211,252,.12); color: #fff; }
.pill-btn { min-height: 40px; padding: 6px 16px; border-radius: 99px; border: 2px solid rgba(125,211,252,.7); background: rgba(4,12,30,.6); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; }
.pill-btn:hover { background: rgba(59,130,246,.35); }
.account { margin: 0; } .acct { padding: 4px 6px 4px 12px; gap: 6px; } .acct b { font-size: 17px; }
@media (max-width: 560px) { .brand-sm b { font-size: 17px; } .brand-sm img { width: 32px; } .topnav { gap: 6px; } .topnav .links a { padding: 8px 6px; font-size: 13px; } }

/* demonstração: os dois lutadores sem cenário, golpes e troca de lado */
.hero2 { text-align: center; }
.hero2 .tagline { font-size: 17px; margin: 8px 0 0; }
.hero-demo { position: relative; width: min(100%, 760px); margin: 0 auto; aspect-ratio: 1280 / 520; overflow: hidden; }
.hero-demo canvas { position: absolute; left: 0; width: 100%; height: auto; top: -32%; /* mostra do “VOCÊ” acima da cabeça até a sombra dos pés */ filter: drop-shadow(0 10px 14px rgba(0,0,0,.6)); }
.hero-demo .vsmark { position: absolute; left: 50%; top: 30%; width: clamp(54px, 10vw, 96px); transform: translateX(-50%) rotate(-6deg); pointer-events: none; opacity: .95; }
.demo-bar { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 2px; }
.demo-bar .pick, .demo-bar .hits { display: flex; gap: 8px; }
.demo-bar .pk { min-width: 64px; min-height: 48px; font-family: var(--display); font-size: 26px; border-radius: 14px; border: 3px solid var(--ink); cursor: pointer; background: #0b1d45; box-shadow: 0 4px 0 #040d22; }
.demo-bar .pk.s13 { color: #ff8d97; } .demo-bar .pk.s22 { color: #ffe14d; }
.demo-bar .pk.s13.on { color: #fff; background: linear-gradient(180deg,#ff6b78,#e11d2e 55%,#a30f1d); box-shadow: inset 0 0 0 3px #fff, 0 4px 0 #6d0814; }
.demo-bar .pk.s22.on { color: #0a4d22; background: linear-gradient(180deg,#fff27a,#ffd400 55%,#e6a800); box-shadow: inset 0 0 0 3px #0b8f3a, 0 4px 0 #8a6400; }
.demo-bar .hit { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 4px 14px 4px 6px; font-family: var(--display); font-size: 20px; color: #fff; border-radius: 99px; border: 3px solid var(--ink); background: linear-gradient(180deg, rgba(30,64,130,.95), rgba(10,24,60,.96)); box-shadow: inset 0 0 0 2px rgba(125,211,252,.5), 0 4px 0 #040d22; cursor: pointer; touch-action: manipulation; }
.hero-demo .vsmark { transition: opacity .25s, transform .25s; } .hero-demo .vsmark.gone { opacity: 0; transform: translateX(-50%) rotate(-6deg) scale(.6); }
.demo-bar .stop { min-height: 48px; padding: 4px 16px; font-family: var(--display); font-size: 20px; color: #fff; border-radius: 14px; border: 3px solid var(--ink); background: linear-gradient(180deg,#556,#2a2f45); box-shadow: 0 4px 0 #111; cursor: pointer; }
.demo-bar .hit img { width: 36px; height: 36px; } .demo-bar .hit:disabled { opacity: .45; cursor: default; }
.demo-bar .hit:active:not(:disabled) { transform: translateY(3px); }
.demo-tip { margin: 8px 0 4px; color: #dbeafe; font-size: 14px; min-height: 20px; }
.hero2 .avail { margin: 12px auto 4px; max-width: 760px; }
body.gated .layout, body.gated .about-home, body.gated .topnav .links, body.gated .account { display: none !important; } /* antes da abertura: só demonstração e contagem */

/* abas de jogo: barra compacta, item ativo destacado */
.hub { display: flex; gap: 4px; padding: 5px; border-radius: 18px; background: rgba(4,12,30,.78); border: 2px solid rgba(125,211,252,.35); margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.hub button { flex: 1 0 auto; min-height: 56px; min-width: 76px; flex-direction: row; gap: 8px; padding: 6px 12px; font-size: 17px; border-radius: 14px; border: 0; background: transparent; box-shadow: none; color: #cfe0ff; }
.hub button .ico { width: 34px; height: 34px; border-width: 2px; box-shadow: none; flex: none; } .hub button .ico svg { width: 18px; height: 18px; } .hub button .ico img { width: 24px; height: 24px; }
.hub button:active { transform: none; box-shadow: none; }
.hub button:hover { background: rgba(125,211,252,.1); }
.hub button.on { color: #fff; background: linear-gradient(180deg, #3b6cf0, #1d3aa6); box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
@media (max-width: 700px) { .hub button { flex-direction: column; gap: 3px; min-width: 64px; font-size: 13px; padding: 6px 6px; } .hub button span:last-child { white-space: normal; line-height: 1.05; } }

/* formulário de criação */
.dispname { display: block; } .dispname input { margin-top: 6px; }
.rule-line { margin: 12px 0 0; }
.fixed-note { margin: 10px 0 0; padding: 8px 12px; border-radius: 12px; background: rgba(60,38,150,.45); border: 2px solid #c4b5fd; font-size: 14px; }
.toggle { display: flex; align-items: center; gap: 10px; margin: 14px 0 2px; font-weight: 600; min-height: 44px; cursor: pointer; }
.toggle input { width: 22px; height: 22px; min-height: 0; margin: 0; }
#seg-side.pulse button { animation: pulsefat .4s 3; outline: 3px solid #fda4af; }
.about-home { margin-top: 18px; } .about-home h2 { font-size: 26px; }
/* acabamento v4.3 */
.hero-demo { aspect-ratio: 1280 / 520; width: min(100%, 820px); }
.hero-demo canvas { top: -32%; width: 100%; } /* pés e sombra inteiros */
@media (max-width: 560px) { .hero-demo { aspect-ratio: 1280 / 520; width: 118%; margin-left: -9%; } .hero-demo canvas { top: -30%; } }
.hub { display: grid; grid-template-columns: repeat(5, 1fr); overflow: visible; }
.hub button { flex-direction: column; gap: 3px; min-width: 0; font-size: 13px; padding: 6px 4px; line-height: 1.05; }
.hub button span:last-child { white-space: normal; }
.avail { padding: 12px 16px; } .avail-title { font-size: 22px; }
@media (max-width: 560px) { .hero-demo { width: 100%; margin-left: 0; aspect-ratio: 1280 / 560; } .hero-demo canvas { width: 130%; left: -15%; top: -34%; } }
@media (max-width: 560px) { .hero-demo canvas { width: 100%; left: 0; top: -32%; } .hero-demo { aspect-ratio: 1280 / 520; } }
body.pad #stage { opacity: .25 !important; filter: saturate(.8); position: fixed !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; width: max(100vw, calc(100dvh * 16 / 9)) !important; z-index: 0; pointer-events: none; }
body.pad #controls, body.pad #padbar { z-index: 5; }
/* nome do jogo: letras alternando vermelho e amarelo */
.wordmark { white-space: nowrap; } .wordmark i { font-style: normal; text-shadow: 0 2px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 -2px 0 var(--ink); }
.wordmark .lr { color: #ff3b4a; } .wordmark .ly { color: #ffd400; }
@media (max-width: 380px) { .brand-sm b { display: none; } }
/* placar do fim da rodada: números nas cores dos lados, nomes pequenos embaixo */
.score-line { font-size: 40px !important; display: flex; justify-content: center; align-items: baseline; gap: 10px; color: #fff; }
.score-line .n13 { color: #ff5a67; } .score-line .n22 { color: #ffd400; }
.score-names { display: flex; justify-content: space-between; gap: 12px; max-width: 280px; margin: -4px auto 8px; font-size: 12px; color: var(--mut, #9fb3d9); }
.score-names span { max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* aba Celular controle: no computador mostra o QR; no celular, leitor de QR + código */
body.kb #tab-pad .pad-phone, body.touch #tab-pad .pad-desk { display: none; }
#scan-modal { width: min(94vw, 420px); text-align: center; }
#scan-video { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; background: #000; border: 3px solid var(--ink); }
#pad-modal .steps { text-align: left; }

.col-side .card { overflow-x: auto; } /* tabelas largas rolam dentro do cartão (sem rolar a página no celular) */
@media (max-width: 560px) { .topnav { flex-wrap: wrap; row-gap: 2px; } .topnav .links { order: 3; width: 100%; justify-content: center; } } /* celular: os links descem para a 2ª linha (a barra não estoura a tela) */
/* “VAI BRASIL!” na frente de tudo: por ~1,2 s as barras de baixo somem e os botões de toque ficam quase transparentes (continuam funcionando) */
#emojibar, #topbar, #controls { transition: opacity .2s; }
body.vai-brasil #emojibar, body.vai-brasil #topbar { opacity: 0; pointer-events: none; }
body.vai-brasil #controls { opacity: .3; }