/* ===================================================================================================
   Tema intermediário: o clima do jogo (fundo escuro com o cenário, títulos na fonte do jogo, 13 vermelho / 22 amarelo)
   com acabamento limpo (cartões lisos, cantos de 10 px, bordas finas, botões sem relevo exagerado).
   Vale para as telas fora da luta. Carregado por último: sobrepõe style.css, ui.css e pages.css.
   (A versão totalmente clara ficou guardada como referência fora do projeto.)
   =================================================================================================== */
:root {
  --cl-bg: #0b1830; --cl-card: #13264a; --cl-card2: #182e58; --cl-line: #2a4473; --cl-line2: #3a5a92;
  --cl-txt: #eef3fb; --cl-mut: #a6b7d4; --cl-pri: #3b82f6; --cl-pri2: #2563eb; --cl-soft: #1b3361;
  --cl-13: #ef3340; --cl-22: #ffd21f; --cl-r: 10px; --cl-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  --cl-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
/* fundo: cenário mais suave atrás de um véu escuro uniforme */
body:not(.in-room)::after { background: linear-gradient(180deg, rgba(8, 18, 40, .82), rgba(8, 18, 40, .93)) !important; }
body:not(.in-room) { color: var(--cl-txt); }

/* títulos na fonte do jogo, sem contorno pesado */
body:not(.in-room) .card h2 { font-size: 24px; margin: 0 0 12px; text-shadow: 0 2px 0 rgba(0, 0, 0, .35) !important; letter-spacing: .5px; }
body:not(.in-room) .card h2::after { display: none; }
.pagehead h1, .train-h { text-shadow: 0 3px 0 rgba(0, 0, 0, .35) !important; }

/* cartões */
body:not(.in-room) .card, .prod, .testbanner { background: var(--cl-card) !important; border: 1px solid var(--cl-line) !important; border-radius: var(--cl-r) !important; box-shadow: var(--cl-shadow) !important; }
.testbanner { border-style: dashed !important; background: var(--cl-soft) !important; }

/* botões: cor do jogo, sem bordas grossas nem sombras 3D */
body:not(.in-room) :is(.cta, .ghost, .btn-back, .pill-btn, .seg button, .hub button, .demo-bar button, .dm, .opts button, .stepper button, .scene-tile button, .live li button, .duel-item .acts button) {
  border-radius: 8px !important; box-shadow: none !important; text-shadow: none !important;
}
body:not(.in-room) .cta { background: linear-gradient(180deg, #4f8ff7, var(--cl-pri2)) !important; border: 1px solid #1d4fc4 !important; color: #fff !important; }
body:not(.in-room) .cta:hover { filter: brightness(1.08); }
body:not(.in-room) :is(.ghost, .btn-back, .pill-btn, .opts button, .stepper button, .live li button) { background: var(--cl-card2) !important; border: 1px solid var(--cl-line2) !important; color: var(--cl-txt) !important; }
body:not(.in-room) :is(.ghost, .btn-back, .pill-btn, .opts button, .stepper button):hover { background: var(--cl-soft) !important; }
body:not(.in-room) .seg button { background: var(--cl-card2) !important; border: 1px solid var(--cl-line2) !important; color: var(--cl-txt) !important; }
body:not(.in-room) .seg button.on { background: var(--cl-pri2) !important; border-color: #1d4fc4 !important; color: #fff !important; }
body:not(.in-room) .seg button.s13 { color: #ff8d97 !important; } body:not(.in-room) .seg button.s22 { color: var(--cl-22) !important; }
body:not(.in-room) .seg button.s13.on { background: var(--cl-13) !important; border-color: #b51d29 !important; color: #fff !important; }
body:not(.in-room) .seg button.s22.on { background: var(--cl-22) !important; border-color: #c9a400 !important; color: #2b2100 !important; }
.opts button.on { border-color: var(--cl-pri) !important; background: var(--cl-soft) !important; }

/* formulários */
body:not(.in-room) :is(#home, #shop, dialog, #training) :is(input:not([type=checkbox]):not([type=color]), select) { background: #0d1d3c !important; color: var(--cl-txt) !important; border: 1px solid var(--cl-line2) !important; border-radius: 8px !important; box-shadow: none !important; }
body:not(.in-room) :is(input, select):focus { border-color: var(--cl-pri) !important; outline: 2px solid rgba(59, 130, 246, .3) !important; }

/* topo */
.topnav { background: rgba(19, 38, 74, .92); border: 1px solid var(--cl-line) !important; border-radius: var(--cl-r); padding: 8px 14px !important; margin-bottom: 14px !important; }

/* página inicial: demonstração + disponibilidade lado a lado (computador) */
#home { max-width: 1200px !important; }
.hero2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 20px; align-items: start; background: var(--cl-card); border: 1px solid var(--cl-line); border-radius: var(--cl-r); box-shadow: var(--cl-shadow); padding: 16px 18px; margin-bottom: 18px; }
.hero-demo { border-radius: 8px; background: radial-gradient(120% 90% at 50% 100%, #1d3a70 0%, #0f2147 70%); }
.hero2 .avail { margin: 12px 0 0 !important; max-width: none !important; }
@media (min-width: 980px) {
  .hero2 { grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); }
  .hero2 > .tagline, .hero2 > .hero-demo, .hero2 > .demo-bar, .hero2 > .demo-tip { grid-column: 1; }
  .hero2 > .avail { grid-column: 2; grid-row: 1 / span 4; align-self: center; margin: 0 !important; }
}
body:not(.in-room) .avail { background: linear-gradient(180deg, #2a1d6b, #1d1550) !important; border-color: #5b47b5 !important; }
body:not(.in-room) .cdbox { border-radius: 8px !important; box-shadow: none !important; }
body:not(.in-room) .avail-status { border-radius: 8px !important; box-shadow: none !important; animation: none !important; }

/* lobby e estatísticas */
.layout { gap: 18px !important; }
@media (min-width: 980px) { .layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; } }
.col-main > .card, .col-side > .card { margin: 0 0 18px !important; }
body:not(.in-room) .hub { background: var(--cl-card) !important; border: 1px solid var(--cl-line) !important; border-radius: var(--cl-r) !important; padding: 4px !important; }
body:not(.in-room) .hub button { background: transparent !important; border: 0 !important; color: var(--cl-mut) !important; }
body:not(.in-room) .hub button.on { background: var(--cl-soft) !important; color: #fff !important; box-shadow: inset 0 -3px 0 var(--cl-pri) !important; }
body:not(.in-room) :is(.live li, .duel-item, .rank li, .side, .cpuside, .checks li, .scene-tile) { border-radius: 8px !important; box-shadow: none !important; }
body:not(.in-room) .rank li { background: var(--cl-card2) !important; border: 1px solid var(--cl-line) !important; }
body:not(.in-room) .rank li::before { box-shadow: none !important; border: 0 !important; }
body:not(.in-room) .side { border-width: 1px !important; }
.rules-mini, .fixed-note, .note { border-radius: 8px !important; }
body:not(.in-room) table th { background: var(--cl-soft) !important; }

/* gráfico de pizza (vitórias por período) */
#chart svg { max-height: 240px; }
#chart .b13 { fill: var(--cl-13); } #chart .b22 { fill: var(--cl-22); } #chart path { stroke: var(--cl-card); stroke-width: 2; }
#chart .pie-empty { fill: none; stroke: var(--cl-line2); stroke-width: 2; stroke-dasharray: 6 6; }
#chart .pie-leg text { font-family: var(--display, Bangers); } #chart .pl13 { fill: var(--cl-13); font-size: 40px; } #chart .pl22 { fill: var(--cl-22); font-size: 40px; }
#chart .pv { fill: #fff; font-size: 40px; } #chart .pn { fill: var(--cl-mut); font-size: 15px; font-family: var(--cl-font) !important; }
body:not(.in-room) #chart { border-radius: 8px !important; }

/* rodapé */
.site-foot { text-align: center; margin: 22px auto 10px; max-width: 860px; }
.site-foot .motto { font-size: 15px; font-style: italic; color: var(--cl-txt); line-height: 1.6; margin: 0 0 8px; padding: 14px 18px; border-top: 1px solid var(--cl-line); border-bottom: 1px solid var(--cl-line); }

/* loja */
.prod .ic { border-radius: 10px !important; box-shadow: none !important; border: 1px solid var(--cl-line2) !important; }
.wallet .pill { border-radius: 8px !important; }
@media (min-width: 900px) { .prod.wide .name-buy { max-width: 560px; } }
.palette .sw.on { box-shadow: 0 0 0 2px var(--cl-card), 0 0 0 4px var(--cl-pri) !important; }

/* regras e relatório */
.toc a { border-radius: 8px !important; }
.badge2 { border-radius: 8px !important; box-shadow: none !important; border: 1px solid var(--cl-line2) !important; }

/* treino */
#training { max-width: 1100px !important; } #training .intro-wrap { max-width: none !important; }
.demo-stage { border-radius: 8px !important; box-shadow: none !important; border: 1px solid var(--cl-line2) !important; }
body:not(.in-room) .dm { border-radius: 10px !important; }
#training .checks { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } @media (max-width: 600px) { #training .checks { grid-template-columns: 1fr 1fr !important; } }

/* janelas */
dialog { border-radius: 12px !important; }

/* ===== v4.7: nova organização da página inicial ===== */
/* placar geral no topo, em linha */
.score-row { margin: 0 0 18px !important; }
.score-row .versus { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
.score-row .side { display: grid !important; grid-template-columns: 64px auto 1fr 1fr; align-items: center; gap: 4px 14px; text-align: left !important; padding: 10px 16px !important; }
.score-row .side img { width: 56px !important; height: 56px !important; grid-row: span 2; }
.score-row .side .num { grid-row: span 2; font-size: 44px !important; }
.score-row .side .big, .score-row .side .mid { font-size: 34px !important; line-height: 1; margin: 0 !important; }
.score-row .side small { grid-row: 2; font-size: 12px; }
.score-row .side .big { grid-column: 3; grid-row: 1; } .score-row .side small:nth-of-type(1) { grid-column: 3; }
.score-row .side .mid { grid-column: 4; grid-row: 1; } .score-row .side small:nth-of-type(2) { grid-column: 4; }
.score-row .vs { width: 56px !important; }
.score-row h2 { margin-bottom: 8px !important; }
@media (max-width: 760px) { .score-row .versus { grid-template-columns: 1fr; } .score-row .vs { display: none; } }

/* disponível por tempo limitado, em linha */
.avail-row { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 22px; margin: 0 0 18px !important; text-align: left !important; }
.avail-row > * { margin: 0 !important; }
.avail-row .avail-dates { display: flex; align-items: center; gap: 10px; }
.avail-row .cd { display: inline-flex; gap: 6px; }
.avail-row .avail-note { flex-basis: 100%; order: 9; }

/* estatísticas em 3 colunas */
.grid3 { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }
.grid3 > .card { margin: 0 !important; }

/* aba Sala */
.sala-seg { margin-bottom: 12px; }
.two-btn { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; } .two-btn > * { margin: 0 !important; }
/* modo de jogo: botões menores; testador embaixo, discreto (não vai para produção) */
#seg-mode { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
#seg-mode button { min-height: 40px !important; font-size: 17px !important; padding: 4px 10px !important; }
#seg-mode .tester-btn { grid-column: 1 / -1; min-height: 30px !important; font-size: 13px !important; opacity: .75; font-family: var(--cl-font) !important; }
#seg-mode .tester-btn.on { opacity: 1; }

/* listas e botões “ver todos” */
.more-btn { width: 100%; margin: 10px 0 0 !important; min-height: 38px !important; }
.rank li.is-live { border-color: #ef3340 !important; }
.rank li .watch-now { grid-column: 1 / -1; min-height: 32px; margin-top: 6px; border-radius: 8px; border: 0; background: #ef3340; color: #fff; font-weight: 700; cursor: pointer; }
.live li.is-duel { border-color: #ef3340 !important; }
#list-modal { width: min(94vw, 760px); max-height: 86vh; } .list-body { max-height: 66vh; overflow: auto; margin: 8px 0; }

/* conta logada: igual ao botão Entrar */
.acct-pill { display: inline-flex; align-items: center; gap: 8px; } .acct-pill .who { font-weight: 700; font-size: 14px; }

/* oferta da loja no fim da rodada */
.offer { margin: 12px 0 6px; padding: 10px; border-radius: 10px; background: rgba(59, 130, 246, .12); border: 1px solid rgba(125, 211, 252, .35); text-align: center; }
.offer-h { font-weight: 800; margin-bottom: 8px; }
.offer-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.offer-item { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 112px; padding: 8px 6px; border-radius: 10px; background: #13264a; border: 1px solid #3a5a92; color: #fff !important; text-decoration: none; font-size: 13px; }
.offer-item:hover { border-color: #7dd3fc; } .offer-item .oi { font-size: 24px; } .offer-item small { color: #ffd21f; font-weight: 700; }
/* ajustes: faixa de disponibilidade numa linha só; colunas com larguras proporcionais ao conteúdo */
.avail-row { display: grid !important; grid-template-columns: auto auto 1fr auto auto; grid-auto-flow: column; align-items: center; gap: 6px 20px; }
.avail-row .avail-title { grid-column: 1; grid-row: 1; } .avail-row .avail-note { grid-column: 1; grid-row: 2; font-size: 12px; }
.avail-row .avail-dates { grid-column: 2; grid-row: 1 / span 2; }
.avail-row .cdlabel { grid-column: 4; grid-row: 1; text-align: center; } .avail-row .cd { grid-column: 4; grid-row: 2; }
.avail-row .avail-status { grid-column: 5; grid-row: 1 / span 2; }
.avail-row .avail-local { grid-column: 1 / -1; grid-row: 3; }
@media (max-width: 900px) { .avail-row { grid-template-columns: 1fr; grid-auto-flow: row; text-align: center !important; } .avail-row > * { grid-column: 1 !important; grid-row: auto !important; justify-self: center; } }
@media (min-width: 1100px) { .grid3 { grid-template-columns: minmax(250px, .75fr) minmax(300px, 1fr) minmax(400px, 1.25fr); } }
#chart-mode { display: flex; gap: 6px; flex-wrap: wrap; } #chart-mode button { min-height: 32px !important; font-size: 14px !important; padding: 2px 10px !important; }
@media (min-width: 900px) {
  .grid3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  .grid3 .chartcard { grid-column: 1; grid-row: 1; } .grid3 .cpuboard { grid-column: 1; grid-row: 2; }
  .grid3 .roomsrank { grid-column: 2; grid-row: 1 / span 2; }
}
.avail-row .avail-title { white-space: nowrap; font-size: 18px !important; }
.chartcard #chart svg { max-height: 200px; }
.avail-row .avail-status { white-space: nowrap; font-size: 15px !important; padding: 6px 12px !important; }

/* ===== v4.8 ===== */
/* disponibilidade: faixa discreta acima da luta */
.avail-mini { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; margin: 0 0 10px; padding: 6px 12px; border-radius: 8px;
  background: rgba(19, 38, 74, .7); border: 1px solid var(--cl-line); font-size: 13px; color: var(--cl-mut); text-align: center; }
.avail-mini > * { margin: 0 !important; }
.avail-mini .avail-title { font-family: var(--cl-font) !important; font-size: 13px !important; font-weight: 700; color: var(--cl-txt) !important; text-shadow: none !important; letter-spacing: 0 !important; }
.avail-mini .avail-dates { display: inline-flex; align-items: center; gap: 6px; }
.avail-mini .avail-dates small { display: none; } .avail-mini .avail-dates > div { display: inline; }
.avail-mini .avail-dates b { font-family: var(--cl-font) !important; font-size: 13px !important; font-weight: 700; color: var(--cl-txt) !important; text-shadow: none !important; }
.avail-mini .avail-arrow { font-size: 13px; color: var(--cl-mut); }
.avail-mini .avail-note { font-size: 12px; }
.avail-mini .cdlabel { font-size: 11px !important; letter-spacing: 1px !important; color: var(--cl-mut) !important; font-family: var(--cl-font) !important; text-shadow: none !important; }
.avail-mini .cd { display: inline-flex; gap: 4px; margin: 0; }
.avail-mini .cdbox { min-width: 0 !important; padding: 1px 5px !important; background: transparent !important; border: 0 !important; display: inline-flex; align-items: baseline; gap: 2px; }
.avail-mini .cdbox b { font-family: var(--cl-font) !important; font-size: 14px !important; font-weight: 800; color: var(--cl-txt) !important; text-shadow: none !important; }
.avail-mini .cdbox i { font-size: 10px !important; font-style: normal; color: var(--cl-mut) !important; }
.avail-mini .avail-status { padding: 2px 10px !important; font-size: 12px !important; font-family: var(--cl-font) !important; font-weight: 700; text-shadow: none !important; border-radius: 99px !important; background: rgba(34, 197, 94, .15) !important; color: #86efac !important; border: 1px solid rgba(34, 197, 94, .4) !important; box-shadow: none !important; animation: none !important; }

/* quadro da luta: ocupa a largura toda; placar dentro, abaixo dos controles */
.hero2 { display: block !important; }
.hero2 .hero-demo { width: 100% !important; max-width: none !important; aspect-ratio: 1280 / 470 !important; }
.hero2 .hero-demo canvas { top: -34% !important; }
.hero2 .hero-demo .vsmark { width: clamp(90px, 13vw, 170px) !important; top: 26% !important; }
.score-row.in-hero { margin: 14px 0 0 !important; padding-top: 12px; border-top: 1px solid var(--cl-line); }
.score-row.in-hero h2 { font-size: 22px; margin: 0 0 8px !important; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
/* 22: foto à direita (espelho do 13) */
.score-row .side.s22 { direction: rtl; } .score-row .side.s22 > * { direction: ltr; }

/* lobby ocupa a largura toda */
.layout { display: block !important; }
.col-main { max-width: none !important; }
.col-main > .card { margin: 0 0 18px !important; }
@media (min-width: 900px) {
  #tab-create #sala-create { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; align-items: start; }
  #tab-create #sala-create.hidden { display: none; }
  #sala-create > .dispname, #sala-create > .lbl:first-of-type, #sala-create > #seg-mode, #sala-create > #create-cc, #sala-create > #create-side, #sala-create > .rule-line { grid-column: 1; }
  #sala-create > #paid-opts, #sala-create > #mode-note { grid-column: 2; }
  #sala-create > #btn-create { grid-column: 1 / -1; }
  #sala-join { max-width: 640px; margin: 0 auto; }
}

/* estatísticas: período → salas → [jogadores | cpu] */
.stats-stack > .card { margin: 0 0 18px !important; }
.stats-stack .pair { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: start; }
.stats-stack .pair > .card { margin: 0 !important; }
.stats-stack .chartcard #chart { display: flex; justify-content: center; } .stats-stack .chartcard #chart svg { max-width: 520px; }
@media (min-width: 900px) { .stats-stack .rank { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .stats-stack .rank li { margin: 0 !important; } }

/* destaque ao abrir a loja num produto */
.prod.flash { outline: 3px solid #ffd21f; outline-offset: 3px; transition: outline-color 1.5s; }

/* conta logada: avatar legível */
.acct-pill .who { color: #fff; display: inline-flex; align-items: center; gap: 6px; }
.acct-pill .who::first-letter { }
.acct-pill .ava { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #ffd21f; color: #10245c; font-weight: 900; font-size: 14px; }
@media (min-width: 900px) { #sala-create > #paid-opts { grid-row: 1 / span 7; align-self: start; } #sala-create > #mode-note { grid-row: 8; } }
.hero2 .hero-demo .vsmark { width: clamp(110px, 16vw, 210px) !important; top: 22% !important; }
.avail-mini .avail-note { display: none; } .avail-mini .avail-mc { font-weight: 400; color: var(--cl-mut); }

/* ===== v4.9 ===== */
/* pizza de vitórias no centro da luta (no lugar da urna); some enquanto a pessoa luta, como o VS */
.hero2 .hero-demo .hero-pie { position: absolute; left: 50%; top: 4% !important; transform: translateX(-50%) !important; width: clamp(150px, 22vw, 250px) !important; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: auto; opacity: 1; }
.hero2 .hero-demo .hero-pie.gone { opacity: 0; pointer-events: none; transform: translateX(-50%) scale(.7) !important; }
.hero-pie #chart-mode { display: flex; gap: 4px; flex-wrap: nowrap; justify-content: center; }
.hero-pie #chart-mode button { min-height: 26px !important; padding: 1px 9px !important; font-size: 13px !important; }
.hero-pie #chart { width: 100%; background: transparent !important; border: 0 !important; padding: 0 !important; }
.hero-pie #chart svg { width: 100%; height: auto; max-height: none !important; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.hero-pie #chart .pie-pc { font-family: var(--display, Bangers); font-size: 26px; fill: #fff; stroke: #3a1a05; stroke-width: 4px; paint-order: stroke; }
.hero-pie #chart .empty { font-size: 18px; fill: #5b300a; font-weight: 800; }
.hero-pie #chart-note { font-size: 13px !important; color: #fff !important; text-shadow: 0 1px 3px #000; white-space: nowrap; }
@media (max-width: 600px) { .hero-pie #chart-mode button { font-size: 11px !important; padding: 1px 6px !important; } .hero-pie #chart-note { font-size: 11px !important; } }

/* abas Sala / Assistir / Desafios ocupam a largura toda, ícone ao lado da palavra */
body:not(.in-room) .hub { display: flex !important; }
body:not(.in-room) .hub button { flex: 1 1 0 !important; display: inline-flex !important; flex-direction: row !important; align-items: center; justify-content: center; gap: 8px; font-size: 20px !important; min-height: 50px !important; }

/* urna (VS) com metade do tamanho no placar */
.score-row .vs { width: 44px !important; } .versus .vs { width: 44px !important; }

/* v4.12 — desafios: nome da sala e código para entrar */
.duel-item .duel-room { display: block; font-size: 13px; margin: 0 0 6px; color: var(--mut, #6b7280); }
.duel-item .duel-code { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: 2px; padding: 1px 6px; border-radius: 4px; background: rgba(127,127,127,.16); color: inherit; cursor: copy; }

/* v4.13 — rankings: nome pode repetir; a marca do jogador aparece menor ao lado */
td.pname { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; max-width: none !important; line-height: 1.25; }
td.pname .ptag { font-weight: 400; font-size: .82em; opacity: .62; white-space: nowrap; }

/* v4.14 — guarda-roupa: ternos à mostra antes de comprar */
.wardrobe.showcase { display: block; }
.wardrobe.showcase .suit-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.wardrobe.showcase .suit-opt { margin: 0; text-align: center; }
.wardrobe.showcase .suit-mini { width: 72px; height: 72px; border-radius: 8px; background: rgba(127,127,127,.12); display: block; }
.wardrobe.showcase figcaption { font-size: 12px; margin-top: 3px; opacity: .8; }
.wardrobe.showcase { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 12px; }
.wardrobe.showcase > p { grid-column: 1 / -1; margin: 0; }
.wardrobe.showcase .suit-side { display: block; }
.wardrobe.showcase .suit-row { display: flex; flex-direction: row; }

/* v4.15 — luta da página inicial: escolha do lado nos cantos de cima, soco e chute nos cantos de baixo (dentro da área do jogo) */
.hero2 .hero-demo { position: relative; }
.hero2 .hero-demo .demo-bar { position: absolute; inset: 0; z-index: 3; pointer-events: none; margin: 0; padding: 0; background: none; border: 0; display: block; }
.hero2 .hero-demo .demo-bar .pick, .hero2 .hero-demo .demo-bar .hits { display: contents; }
.hero2 .hero-demo .demo-bar button { position: absolute; pointer-events: auto; margin: 0; }
.hero2 .hero-demo .demo-bar .pk.s13 { top: 10px; left: 10px; }
.hero2 .hero-demo .demo-bar .pk.s22 { top: 10px; right: 10px; }
.hero2 .hero-demo .demo-bar .hit[data-act="P"] { bottom: 10px; left: 10px; }
.hero2 .hero-demo .demo-bar .hit[data-act="K"] { bottom: 10px; right: 10px; }
.hero2 .hero-demo .demo-bar #demo-stop { bottom: 10px; left: 50%; transform: translateX(-50%); }
.hero2 .hero-demo .demo-bar .hit:disabled { opacity: .45; }
@media (max-width: 600px) {
  .hero2 .hero-demo .demo-bar button { font-size: 14px !important; padding: 2px 8px !important; min-height: 0 !important; min-width: 0 !important; border-width: 2px !important; border-radius: 10px !important; box-shadow: 0 2px 0 #040d22 !important; }
  .hero2 .hero-demo .demo-bar .pk { font-size: 17px !important; padding: 2px 9px !important; }
  .hero2 .hero-demo .demo-bar .hit img { width: 20px !important; height: 20px !important; }
  .hero2 .hero-demo .demo-bar .pk.s13, .hero2 .hero-demo .demo-bar .hit[data-act="P"] { left: 6px; }
  .hero2 .hero-demo .demo-bar .pk.s22, .hero2 .hero-demo .demo-bar .hit[data-act="K"] { right: 6px; }
  .hero2 .hero-demo .demo-bar .pk { top: 6px; } .hero2 .hero-demo .demo-bar .hit, .hero2 .hero-demo .demo-bar #demo-stop { bottom: 6px; }
}

/* v4.16 — Fale conosco */
.contact-card form { display: grid; gap: 12px; }
.contact-card label { display: grid; gap: 4px; font-weight: 600; font-size: 14px; }
.contact-card input, .contact-card select, .contact-card textarea { font: inherit; font-weight: 400; padding: 9px 10px; border-radius: 6px; border: 1px solid rgba(127,127,127,.4); background: rgba(255,255,255,.06); color: inherit; width: 100%; box-sizing: border-box; }
.contact-card select option { color: #111; }
.contact-card textarea { resize: vertical; min-height: 120px; }
.contact-card .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-err { color: #f87171; margin: 0; min-height: 1em; font-size: 14px; }
.contact-ok { text-align: center; padding: 16px 0; } .contact-ok b { font-size: 20px; color: #4ade80; }
.site-foot .foot-links { margin: 0 0 6px; font-size: 14px; } .site-foot .foot-links a { color: inherit; opacity: .85; }

/* v4.17 — loja: sem ícones, preço ao lado do título; guarda-roupa + nome colorido lado a lado; sala personalizada */
.prod .ic { display: none !important; }
.prod .prod-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.prod .prod-head h3 { flex: 1 1 auto; min-width: 0; }
.prod .prod-head .price { font-size: 22px !important; white-space: nowrap; }
@media (min-width: 840px) { .prod.wide2 { grid-column: span 2; } }
.name-buy { display: grid; gap: 10px; }
.name-buy .name-row { display: flex; gap: 8px; }
.name-buy .name-row input { flex: 1; min-width: 0; }
.name-buy .name-row .cta { margin: 0 !important; min-height: 0 !important; font-size: 18px !important; padding: 6px 18px !important; }
.name-buy .prio-btn { justify-self: start; }
.name-buy .my-rooms { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.name-buy .my-rooms .lbl { font-weight: 700; margin-right: 2px; }
.name-buy .room-chip { padding: 2px 10px; border-radius: 99px; border: 1px solid var(--cl-line2, #3b4a6b); font-size: 14px; }
.name-res .note { color: var(--cl-txt, #e5e7eb); font-weight: 400; }
#prio-modal { max-width: 640px; width: calc(100% - 32px); }
#prio-modal input { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 6px; border: 1px solid rgba(127,127,127,.4); background: rgba(255,255,255,.06); color: inherit; font: inherit; }
#prio-modal .prio-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 50vh; overflow: auto; margin: 10px 0 14px; }
#prio-modal .prio-name { padding: 5px 12px !important; min-height: 0 !important; font: 600 14px/1.2 system-ui, sans-serif !important; letter-spacing: 0 !important; border-radius: 99px !important; border: 1px solid #f2c94c !important; background: rgba(242, 201, 76, .1) !important; color: #ffe08a !important; cursor: pointer; text-transform: none !important; }
#prio-modal .prio-name:hover { background: rgba(242, 201, 76, .28) !important; }
#prio-modal .prio-msg { min-height: 1.2em; margin: 8px 0 0; font-size: 14px; } #prio-modal .prio-msg.bad { color: #f87171; }
.name-buy .name-row input { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; }
.name-buy .name-row .cta { flex: 0 0 auto !important; width: auto !important; }
.name-buy .prio-btn { width: auto !important; }
.prod, .prod > * { min-width: 0; }
.name-buy { min-width: 0; max-width: 100%; grid-template-columns: minmax(0, 1fr); }
.name-buy .prio-btn { max-width: 100%; white-space: normal; }
.name-res > div { overflow-wrap: anywhere; }

/* v4.19 — revisão visual */
/* loja: sem buracos nos quadros (o texto não estica; o botão de compra fica no pé) e preço sempre ao lado do título */
.prod p { flex: none !important; }
.prod > button.cta:last-child, .prod > .qty:last-child { margin-top: auto; }
.prod .prod-head { flex-wrap: nowrap !important; align-items: flex-start !important; }
.prod .prod-head h3 { font-size: 22px !important; line-height: 1.15; }
.prod .prod-head .price { font-size: 18px !important; padding-top: 2px; }
.prod.wide2 .wardrobe { align-content: start; }
/* página inicial: Jogadores e Contra a CPU lado a lado só quando cabem as 5 colunas */
.stats-stack .pair { grid-template-columns: 1fr !important; }
@media (min-width: 1100px) { .stats-stack .pair { grid-template-columns: 1fr 1fr !important; } }
#ranking, #cputable { table-layout: auto; }
#ranking th, #cputable th { white-space: nowrap; }
@media (max-width: 560px) {
  #ranking, #cputable { display: table !important; font-size: 13px !important; }
  #ranking th, #cputable th, #ranking td, #cputable td { padding: 6px 4px !important; letter-spacing: 0 !important; }
  #ranking th, #cputable th { font-size: 10px !important; white-space: normal; }
}
@media (max-width: 560px) { #ranking th, #cputable th { font-size: 9px !important; padding: 6px 2px !important; } #ranking td:first-child, #cputable td:first-child { padding-left: 4px !important; } }

/* v4.20 — celular deitado (paisagem, tela baixa): a luta cabe inteira na altura */
@media (orientation: landscape) and (max-height: 500px) {
  /* página inicial: cabeçalho compacto; sem a faixa de horário e a frase de cima */
  .topnav { padding: 4px 12px !important; min-height: 0 !important; margin-bottom: 6px !important; }
  .topnav .brand-sm img { height: 20px !important; width: auto !important; }
  .topnav .wordmark { font-size: 18px !important; }
  .topnav .links a { font-size: 13px !important; padding: 4px 6px !important; }
  .topnav .pill-btn, .topnav #btn-login { padding: 4px 12px !important; min-height: 0 !important; font-size: 14px !important; }
  #avail { display: none !important; }
  .hero2 { padding-top: 6px !important; }
  .hero2 > .tagline { display: none !important; }
  .hero2 .hero-demo { width: min(100%, calc((100dvh - 64px) * 1280 / 470)) !important; margin-left: auto !important; margin-right: auto !important; }
  .hero2 > .demo-tip { margin: 4px 0 !important; }

  /* treino: luta à esquerda na altura da tela, controles à direita */
  #training { padding-top: 4px !important; }
  #training .pagehead { margin: 0 0 4px !important; gap: 10px !important; }
  #training .pagehead .btn-back { padding: 2px 10px !important; min-height: 0 !important; font-size: 14px !important; }
  #training .train-h { font-size: 20px !important; margin: 0 !important; }
  #training .card.demo { display: grid !important; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "stage top" "stage pad" "stage hint" "checks checks"; gap: 6px 10px; padding: 8px !important; align-items: start; }
  #training .demo-lead, #training .keys-tip { display: none !important; }
  #training .demo-stage { grid-area: stage; height: calc(100dvh - 56px); width: auto; aspect-ratio: 16 / 9; max-width: 68vw; margin: 0 !important; }
  #training .demo-top { grid-area: top; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin: 0 !important; font-size: 13px; }
  #training .demo-top .seg button { min-height: 0 !important; padding: 2px 12px !important; }
  #training .demo-top .chk { font-size: 12px; }
  #training .demo-pad { grid-area: pad; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0 !important; }
  #training .demo-pad .dm { min-height: 0 !important; padding: 4px !important; display: flex; align-items: center; justify-content: center; gap: 4px; }
  #training .demo-pad .dm img { width: 26px !important; height: 26px !important; }
  #training .demo-pad .dm span { font-size: 12px !important; }
  #training .demo-hint { grid-area: hint; font-size: 12px; margin: 0 !important; }
  #training .checks { grid-area: checks; }
}
@media (orientation: landscape) and (max-height: 500px) {
  #training .demo-stage { height: calc(100dvh - 66px); }
  #training .demo-top .lbl { font-size: 13px !important; }
  #training .demo-top .chk { display: flex; align-items: center; gap: 6px; }
  #training .demo-top .chk input { width: 16px !important; height: 16px !important; margin: 0 !important; }
  #training .demo-pad .dm { flex-direction: row !important; height: 38px !important; }
  #training .demo-pad .dm.walk { font-size: 16px !important; }
}
@media (orientation: landscape) and (max-height: 500px) {
  #training .demo-top .chk input[type=checkbox] { appearance: auto !important; -webkit-appearance: checkbox !important; height: 16px !important; width: 16px !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
  #training .demo-top { row-gap: 2px; }
  #training .demo-pad .dm { height: 34px !important; }
  #training .demo-pad .dm[data-hold="B"] { grid-column: span 2; }
  #training .demo-hint { display: none !important; }
}

/* v4.21 — loja em fileiras (ordem combinada) */
.shop-row { display: grid; gap: 16px; margin-bottom: 16px; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 760px) { .shop-row.n2 { grid-template-columns: 1fr 1fr; } .shop-row.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .shop-row.n2.wr { grid-template-columns: 2fr 1fr; } }
@media (min-width: 760px) and (max-width: 980px) { .shop-row.n3 { grid-template-columns: 1fr 1fr; } }
.shop-row .prod { margin: 0 !important; }
.prod .wardrobe.showcase { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)) !important; }
.style-show { display: grid; gap: 12px; padding: 6px 0; }
.style-show .ss-names { display: flex; flex-direction: column; gap: 6px; font-family: var(--display, Bangers), sans-serif; font-size: 24px; letter-spacing: 1px; }
.style-show .ss-frames { display: flex; gap: 16px; padding: 6px; }
.style-show .ss-frames img { width: 56px; height: 56px; border-radius: 12px; background: #0b1d45; }
.style-show p { margin: 0; }

/* v4.22 — celular deitado: o que saiu do topo volta, abaixo da luta */
@media (orientation: landscape) and (max-height: 500px) {
  /* página inicial: luta primeiro; a frase e a faixa de horário logo abaixo dela */
  .home-wrap { display: flex !important; flex-direction: column; }
  .home-wrap > * { order: 3; }
  .home-wrap > .topnav { order: 0; }
  .home-wrap > .hero2 { order: 1; }
  .home-wrap > #avail { order: 2; display: flex !important; margin: 0 0 12px !important; }
  .hero2 { display: flex !important; flex-direction: column; }
  .hero2 > * { order: 2; }
  .hero2 > .hero-demo, .hero2 > .demo-tip { order: 0; }
  .hero2 > .tagline { order: 1; display: block !important; margin: 2px 0 10px !important; font-size: 15px !important; }

  /* treino: explicação, dica e atalhos voltam, embaixo da luta */
  #training .card.demo { grid-template-areas: "stage top" "stage pad" "lead lead" "hint hint" "keys keys" "checks checks" !important; }
  #training .demo-lead { display: block !important; grid-area: lead; margin: 4px 0 0 !important; }
  #training .demo-hint { display: block !important; grid-area: hint; font-size: 14px; }
  #training .keys-tip { display: block !important; grid-area: keys; margin: 0 !important; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .hero2 { align-items: stretch !important; }
  .hero2 > :not(.hero-demo) { width: 100% !important; max-width: none !important; box-sizing: border-box; }
  .hero2 > .demo-tip, .hero2 > .tagline { text-align: center !important; }
}

/* v4.23 — botão de avisos no menu */
.topnav .push-btn { background: none; border: 1px solid var(--cl-line2, #3b4a6b); color: inherit; font: inherit; font-weight: 700; border-radius: 99px; padding: 4px 12px; cursor: pointer; }
.topnav .push-btn.on { border-color: #4ade80; color: #bbf7d0; }
.topnav .push-btn { font-size: 14px !important; font-weight: 600 !important; padding: 3px 10px !important; line-height: 1.3; }
.topnav .install-btn { border-color: #60a5fa !important; color: #bfdbfe !important; }
#install-modal { max-width: 460px; width: calc(100% - 32px); }
#install-modal .steps { padding-left: 20px; } #install-modal .steps li { margin: 6px 0; }
.topnav .push-btn { white-space: nowrap; }
@media (max-width: 600px) {
  .topnav .links { flex-wrap: wrap !important; justify-content: center !important; row-gap: 4px; overflow: visible !important; }
  .topnav .push-btn .lg { display: none; }
  .topnav .push-btn { padding: 3px 9px !important; font-size: 13px !important; }
}
.topnav .push-btn .sm { display: none; }
@media (max-width: 600px) { .topnav .push-btn .sm { display: inline; } .topnav .links a { min-height: 30px !important; padding-top: 4px !important; padding-bottom: 4px !important; } }

/* v4.24 — partida rápida */
.quick-btn { width: 100%; margin: 0 0 12px !important; display: flex !important; flex-direction: column; align-items: center; gap: 0; background: linear-gradient(180deg, #22c55e, #15803d) !important; border-color: #14532d !important; }
.quick-btn small { font-family: system-ui, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0; opacity: .9; text-transform: none; }
#quick-modal { max-width: 420px; width: calc(100% - 32px); text-align: center; }
#quick-modal .row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.quick-spin { width: 44px; height: 44px; margin: 8px auto 12px; border-radius: 50%; border: 4px solid rgba(255,255,255,.15); border-top-color: #22c55e; animation: qspin 1s linear infinite; }
@keyframes qspin { to { transform: rotate(360deg); } }
#create-level { margin-top: 8px; }

/* v4.25 — seletor de idioma */
.lang-sel { background: transparent; color: inherit; border: 1px solid var(--cl-line2, #3b4a6b); border-radius: 99px; padding: 3px 8px; font: 600 13px system-ui, sans-serif; cursor: pointer; }
.lang-sel option { color: #111; }
.site-foot .lang-sel { font-size: 13px; }
.topnav .lang-sel { width: auto; max-width: 128px; flex: 0 0 auto; }

/* v4.26 — cores dos lados: 13 = vermelho com detalhes brancos · 22 = amarelo com detalhes verdes (sem tom de vinho) */
:root { --r13: #e11d2e; --r13b: #ef3340; --y22: #ffd400; --y22b: #ffe14d; --g22: #0b8f3a; --g22d: #075c26; }
.c13, .c13t, #chart-note .c13, .tagline .c13, body:not(.in-room) .s13:not(.side):not(.cpuside):not(.pill):not(.chip):not(button):not(.sb-head):not(.sb-val) { color: #ff4152 !important; }
.c22, .c22t, body:not(.in-room) .s22:not(.side):not(.cpuside):not(.pill):not(.chip):not(button):not(.sb-head):not(.sb-val) { color: var(--y22) !important; }
body:not(.in-room) .side.s13, .score-row .side.s13 { background: linear-gradient(180deg, var(--r13b), var(--r13)) !important; border: 2px solid #ffffff !important; color: #ffffff !important; }
body:not(.in-room) .side.s22, .score-row .side.s22 { background: linear-gradient(180deg, var(--y22b), var(--y22)) !important; border: 2px solid var(--g22) !important; color: var(--g22d) !important; }
.side.s13 *, .side.s13 small { color: #ffffff !important; text-shadow: 0 2px 0 rgba(120, 0, 10, .45) !important; }
.side.s22 *, .side.s22 small { color: var(--g22d) !important; text-shadow: none !important; }
.side.s22 .num, .side.s22 .big, .side.s22 .mid { color: var(--g22) !important; text-shadow: 0 2px 0 rgba(255, 255, 255, .5) !important; }
.side.s13 img { box-shadow: 0 0 0 3px #ffffff !important; border-color: #ffffff !important; } .side.s22 img { box-shadow: 0 0 0 3px var(--g22) !important; border-color: var(--g22) !important; }
.cpusides .cpuside.s13 { background: linear-gradient(180deg, var(--r13b), var(--r13)) !important; border: 2px solid #ffffff !important; color: #ffffff !important; }
.cpusides .cpuside.s22 { background: linear-gradient(180deg, var(--y22b), var(--y22)) !important; border: 2px solid var(--g22) !important; color: var(--g22) !important; }
.cpusides .cpuside.s13 span { color: #ffffff !important; } .cpusides .cpuside.s22 span { color: var(--g22d) !important; font-weight: 600; }
body:not(.in-room) .seg button.s13 { color: #ff4152 !important; } body:not(.in-room) .seg button.s13.on { background: var(--r13) !important; border-color: #ffffff !important; color: #ffffff !important; }
body:not(.in-room) .seg button.s22.on { background: var(--y22) !important; border-color: var(--g22) !important; color: var(--g22d) !important; }
.demo-bar .pk.s13 { color: #ff4152 !important; } .demo-bar .pk.s13.on { background: var(--r13) !important; color: #fff !important; box-shadow: inset 0 0 0 3px #fff !important; }
.demo-bar .pk.s22.on { background: var(--y22) !important; color: var(--g22d) !important; box-shadow: inset 0 0 0 3px var(--g22) !important; }

/* v4.27 — cabeçalho uniforme: todos os itens com o mesmo estilo de texto; idioma pela bandeira */
.topnav .links { display: flex !important; align-items: center !important; gap: 2px !important; flex-wrap: nowrap; }
.topnav .links > a, .topnav .links > .push-btn {
  all: unset; box-sizing: border-box; display: inline-flex !important; align-items: center; gap: 5px; height: 34px; padding: 0 10px !important;
  color: #dbe7ff !important; font: 600 14px/1 system-ui, -apple-system, 'Segoe UI', sans-serif !important; border-radius: 6px !important;
  cursor: pointer; white-space: nowrap; border: 0 !important; background: none !important; min-height: 0 !important;
}
.topnav .links > a:hover, .topnav .links > .push-btn:hover { background: rgba(255, 255, 255, .08) !important; }
.topnav .links > .push-btn.hidden { display: none !important; }
.topnav .links > .push-btn.on { color: #86efac !important; }
.topnav .links > .install-btn { color: #93c5fd !important; }
.lang-pick { position: relative; margin-left: 4px; }
.lang-btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; height: 34px; padding: 0 6px; border-radius: 6px; }
.lang-btn:hover { background: rgba(255, 255, 255, .08); }
.flag { width: 30px; height: 20px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); display: block; }
.lang-menu { position: absolute; right: 0; top: 40px; z-index: 50; background: #0f1f3d; border: 1px solid var(--cl-line2, #3b4a6b); border-radius: 8px; padding: 6px; display: grid; gap: 2px; min-width: 150px; box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }
.lang-menu.hidden { display: none; }
.lang-opt { all: unset; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; color: #e8eefc; font: 600 14px system-ui, sans-serif; }
.lang-opt:hover, .lang-opt.on { background: rgba(255, 255, 255, .1); }
.lang-flags { display: inline-flex; gap: 8px; vertical-align: middle; }
.lang-flags button { all: unset; cursor: pointer; opacity: .65; } .lang-flags button.on, .lang-flags button:hover { opacity: 1; }
.lang-flags .flag { width: 26px; height: 17px; }
.site-foot .lang-sel { display: none; }
@media (max-width: 600px) {
  .topnav .links { flex-wrap: wrap !important; justify-content: center !important; }
  .topnav .links > a, .topnav .links > .push-btn { height: 30px; padding: 0 7px !important; font-size: 13px !important; }
}

/* v4.28 — aba Sala: partida rápida em quadro próprio; código + criar no mesmo quadro */
#tab-create { display: grid; gap: 14px; padding: 0 !important; background: none !important; border: 0 !important; }
.quick-card { display: flex !important; align-items: center; gap: 18px; flex-wrap: wrap; border-color: #16a34a !important; background: linear-gradient(135deg, rgba(22, 163, 74, .22), rgba(19, 38, 74, .92)) !important; }
.quick-card .quick-text { flex: 1 1 320px; }
.quick-card h3 { margin: 0 0 4px; font-family: var(--display, Bangers), sans-serif; font-size: 26px; letter-spacing: .5px; font-weight: 400; }
.quick-card p { margin: 2px 0; }
.quick-card .quick-count { color: #bbf7d0; font-weight: 600; font-size: 14px; margin-top: 6px; }
.quick-card .quick-btn { width: auto !important; flex: 0 0 auto; margin: 0 !important; padding: 12px 28px !important; font-size: 24px !important; }
#sala-create .sala-h { margin: 0 0 8px; font-family: var(--display, Bangers), sans-serif; font-weight: 400; font-size: 24px; }
.join-row { margin: 6px 0 4px; }
.join-line { display: flex; gap: 8px; flex-wrap: wrap; }
.join-line input { flex: 1 1 180px; min-width: 0; }
.join-line button { margin: 0 !important; flex: 0 0 auto; width: auto !important; min-height: 0 !important; padding: 8px 16px !important; font-size: 18px !important; }
.or-line { display: flex; align-items: center; gap: 10px; margin: 16px 0 8px; color: var(--cl-mut, #9aa3ba); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }
.or-line::before, .or-line::after { content: ''; flex: 1; height: 1px; background: var(--cl-line2, #3b4a6b); }
@media (max-width: 600px) { .quick-card .quick-btn { width: 100% !important; } }
dialog.onb { max-width: 460px; width: calc(100% - 32px); }
dialog.onb .row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
dialog.onb .row button { margin: 0 !important; width: auto !important; flex: 1 1 auto; }
#onb-name { width: 100%; box-sizing: border-box; font-size: 18px; padding: 10px; }
.onb-err { color: #f87171; min-height: 1.1em; margin: 6px 0 0; font-size: 14px; }
body:not(.in-room) .card.quick-card { border: 1px solid #16a34a !important; background: linear-gradient(135deg, rgba(22, 163, 74, .28), rgba(19, 38, 74, .95) 60%) !important; }
body:not(.in-room) .quick-card .quick-btn { background: linear-gradient(180deg, #22c55e, #15803d) !important; border-color: #14532d !important; color: #fff !important; }
.join-line input#code-join { font: 600 16px system-ui, sans-serif !important; letter-spacing: 1px !important; text-transform: uppercase; height: auto !important; padding: 10px 12px !important; }
.join-line input#code-join::placeholder { text-transform: none; letter-spacing: 0; }
.join-line button { min-height: 44px !important; }

/* v4.29 — neutralidade: nada de verde (cor do 22) nem vermelho (cor do 13) em elementos que não são de um lado. Neutro = azul-cobalto */
:root { --neutral: #2563eb; --neutral-l: #93c5fd; --neutral-bg: rgba(37, 99, 235, .18); }
.avail-mini .avail-status, .avail-status.open { background: var(--neutral-bg) !important; border: 1px solid var(--neutral) !important; color: #dbeafe !important; }
body:not(.in-room) .card.quick-card { border: 1px solid var(--neutral) !important; background: linear-gradient(135deg, rgba(37, 99, 235, .25), rgba(19, 38, 74, .95) 60%) !important; }
body:not(.in-room) .quick-card .cta, body:not(.in-room) .cpu-card .cta { background: linear-gradient(180deg, #3b82f6, #1d4ed8) !important; border-color: #1e3a8a !important; color: #fff !important; }
.quick-card .quick-count { color: #dbeafe !important; }
.topnav .links > .push-btn.on { color: var(--neutral-l) !important; } .topnav .push-btn.on { border-color: var(--neutral); color: var(--neutral-l); }
.contact-ok b { color: var(--neutral-l) !important; }
.quick-spin { border-top-color: var(--neutral) !important; }

/* faixa “jogando como” */
.me-bar { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border: 1px solid var(--cl-line, #2b3a5c); border-radius: 8px; background: rgba(19, 38, 74, .92); font-size: 15px; }
.me-bar .c13 { color: #ff4152 !important; } .me-bar .c22 { color: var(--y22) !important; }
.linkish { all: unset; cursor: pointer; color: var(--neutral-l); text-decoration: underline; font-weight: 600; font-size: 14px; }
/* jogar agora + contra a CPU lado a lado, compactos */
.play-row { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .play-row { grid-template-columns: 1.3fr 1fr; } }
.play-card { display: flex !important; flex-direction: column; gap: 6px; margin: 0 !important; padding: 14px 16px !important; }
.play-card h3 { margin: 0; font-family: var(--display, Bangers), sans-serif; font-weight: 400; font-size: 24px; letter-spacing: .5px; }
.play-card p { margin: 0; font-size: 14px; }
.play-card .cta { margin: 6px 0 0 !important; width: 100% !important; min-height: 0 !important; padding: 9px 16px !important; font-size: 20px !important; }
.play-card .seg.mini { margin-top: 4px; }
.play-card .seg.mini button { min-height: 0 !important; padding: 5px 8px !important; font-size: 14px !important; }
.quick-card { display: flex !important; flex-wrap: nowrap; align-items: stretch; }
/* sala com amigos: compacta */
#sala-create { padding: 14px 16px !important; display: grid; gap: 8px; }
#sala-create .sala-h { margin: 0 !important; font-size: 22px !important; }
#sala-create .lbl { margin: 0 0 4px !important; font-size: 13px !important; }
#sala-create select, #sala-create input { font-size: 15px !important; padding: 7px 10px !important; height: auto !important; min-height: 0 !important; }
#sala-create .join-line button { min-height: 0 !important; padding: 7px 14px !important; font-size: 16px !important; }
#sala-create .or-line { margin: 6px 0 2px !important; }
#sala-create .paid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; align-items: end; margin: 0 !important; }
#sala-create .paid > .lbl:nth-of-type(1) { grid-column: 1; grid-row: 1; } #sala-create .paid > select#room-name-select { grid-column: 1; grid-row: 2; }
#sala-create .paid > .lbl:nth-of-type(2) { grid-column: 2; grid-row: 1; } #sala-create .paid > select#scene-select { grid-column: 2; grid-row: 2; }
#sala-create .paid > #room-name-note { grid-column: 1 / -1; grid-row: 3; margin: 0; }
#sala-create #mode-note { margin: 0 !important; }
#sala-create #btn-create { margin: 4px 0 0 !important; min-height: 0 !important; padding: 9px !important; font-size: 20px !important; }
#sala-create .tester-only { max-width: 320px; } #sala-create .tester-only button { min-height: 0 !important; padding: 4px 8px !important; font-size: 13px !important; }
@media (max-width: 600px) { #sala-create .paid { grid-template-columns: 1fr; } #sala-create .paid > * { grid-column: 1 !important; grid-row: auto !important; } }
/* boas-vindas: escolha do lado */
.onb-side-l { margin: 12px 0 6px; font-weight: 700; }
.onb-side { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.onb-side button { all: unset; cursor: pointer; text-align: center; padding: 10px; border-radius: 8px; font: 400 34px var(--display, Bangers), sans-serif; border: 2px solid var(--cl-line2, #3b4a6b); background: rgba(255, 255, 255, .04); }
.onb-side .s13 { color: #ff4152; } .onb-side .s22 { color: var(--y22); }
.onb-side .s13.on { background: var(--r13); color: #fff; border-color: #fff; } .onb-side .s22.on { background: var(--y22); color: var(--g22d); border-color: var(--g22); }
/* bandeiras em linha no topo */
.topnav .lang-flags { margin-left: 6px; gap: 6px; } .topnav .lang-flags .flag { width: 26px; height: 17px; }
.cheer-meter { font-size: 12px !important; white-space: nowrap; }
#sala-create { grid-template-columns: minmax(0, 1fr) !important; }
#sala-create > * { grid-column: 1 !important; grid-row: auto !important; }
#sala-create .tester-only { display: flex !important; gap: 6px; max-width: none; }
#sala-create .tester-only button { flex: 0 0 auto !important; width: auto !important; }
#sala-create .tester-only.hidden { display: none !important; }
@media (min-width: 760px) { #sala-create .join-row, #sala-create .paid { max-width: 760px; } }

/* v4.30 — placar geral alinhado: 13 e 22 lado a lado em cada linha, a métrica no meio */
.score-row .sb-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px 10px; align-items: stretch; max-width: 760px; margin: 0 auto; }
.score-row .sb-head { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px; border-radius: 8px; font: 400 40px/1 var(--display, Bangers), sans-serif; }
.score-row .sb-head img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }
.score-row .sb-head.s13 { background: linear-gradient(180deg, var(--r13b), var(--r13)); color: #fff; border: 2px solid #fff; } .score-row .sb-head.s13 img { box-shadow: 0 0 0 2px #fff; }
.score-row .sb-head.s22 { background: linear-gradient(180deg, var(--y22b), var(--y22)); color: var(--g22); border: 2px solid var(--g22); } .score-row .sb-head.s22 img { box-shadow: 0 0 0 2px var(--g22); }
.score-row .sb-val { display: flex; align-items: center; justify-content: center; padding: 6px; border-radius: 8px; font: 400 36px/1 var(--display, Bangers), sans-serif; }
.score-row .sb-val.s13 { background: rgba(225, 29, 46, .9); color: #fff; } .score-row .sb-val.s22 { background: rgba(255, 212, 0, .92); color: var(--g22d); }
.score-row .sb-label { display: flex; align-items: center; justify-content: center; text-align: center; font-size: 13px; color: #cfe0ff; padding: 0 4px; }
@media (max-width: 600px) { .score-row .sb-head { font-size: 28px; } .score-row .sb-head img { width: 36px; height: 36px; } .score-row .sb-val { font-size: 28px; } .score-row .sb-label { font-size: 11px; max-width: 80px; } }

/* v4.31 — azul-cobalto como cor neutra de ação e destaque (não pertence ao 13 nem ao 22) */
:root { --cobalt: #2563eb; --cobalt-d: #1e40af; --cobalt-l: #93c5fd; --cl-pri: #2563eb; --cl-pri2: #1e40af; --neutral: #2563eb; }
body:not(.in-room) .cta, body:not(.in-room) .quick-card .cta, body:not(.in-room) .cpu-card .cta { background: linear-gradient(180deg, #3b72f0, var(--cobalt-d)) !important; border: 1px solid #1e3a8a !important; color: #fff !important; }
body:not(.in-room) .seg button.on:not(.s13):not(.s22), #chart-mode button.on { background: var(--cobalt) !important; border-color: var(--cobalt-d) !important; color: #fff !important; }
.badge { background: var(--cobalt) !important; }
.linkish, .site-foot a, .lock a { color: var(--cobalt-l) !important; }
.duels-btn { margin-left: 8px; padding: 4px 12px !important; min-height: 0 !important; font-size: 14px !important; width: auto !important; }
#duels-modal { max-width: 560px; width: calc(100% - 32px); max-height: 88vh; overflow: auto; }
#duels-modal .duels-head { display: flex; justify-content: space-between; align-items: center; } #duels-modal .duels-head h3 { margin: 0; }
#duels-modal input, #duels-modal select { width: 100%; box-sizing: border-box; }
.duel-found { list-style: none; padding: 0; margin: 4px 0; display: grid; gap: 4px; }
.duel-found button { all: unset; cursor: pointer; display: block; width: 100%; box-sizing: border-box; padding: 7px 10px; border-radius: 6px; background: rgba(37, 99, 235, .15); border: 1px solid var(--cobalt); font-weight: 600; }
.duel-found button:hover { background: rgba(37, 99, 235, .3); }
.live-card { margin-top: 14px; } .live-card .sala-h small { font-family: system-ui, sans-serif; font-size: 13px; opacity: .7; letter-spacing: 0; }
.duel-cd { margin: 8px 0; padding: 8px 10px; border-radius: 8px; background: rgba(37, 99, 235, .18); border: 1px solid var(--cobalt); font-weight: 700; text-align: center; }

/* v4.32 — celular em pé: igual ao deitado — luta logo abaixo do menu; a frase e a faixa de horário vêm depois dela */
@media (max-width: 760px) {
  .home-wrap { display: flex !important; flex-direction: column; }
  .home-wrap > * { order: 3; }
  .home-wrap > .topnav { order: 0; }
  .home-wrap > .hero2 { order: 1; }
  .home-wrap > #avail { order: 2; margin: 0 0 12px !important; }
  .hero2 { display: flex !important; flex-direction: column; }
  .hero2 > * { order: 2; width: 100% !important; max-width: none !important; box-sizing: border-box; }
  .hero2 > .hero-demo, .hero2 > .demo-tip { order: 0; }
  .hero2 > .tagline { order: 1; margin: 2px 0 10px !important; font-size: 15px !important; text-align: center; }
  .hero2 > .demo-tip { text-align: center; }
}
.score-row .sb-head.s13, .score-row .sb-val.s13 { color: #ffffff !important; text-shadow: 0 2px 0 rgba(120, 0, 10, .45); }
.score-row .sb-head.s22, .score-row .sb-val.s22 { color: var(--g22d) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
#duels-modal .duels-head button { width: auto !important; min-height: 0 !important; padding: 5px 14px !important; font-size: 15px !important; flex: 0 0 auto; }
#duels-modal .duels-head h3 { display: flex; align-items: center; gap: 8px; }
#duels-modal .two-btn button { font-size: 16px !important; min-height: 0 !important; padding: 8px !important; }
/* v4.33 — campo do código e botões Lutar/Assistir na mesma altura, alinhados */
#sala-create .join-line { display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: stretch; }
#sala-create .join-line input#code-join, #sala-create .join-line button { height: 42px !important; box-sizing: border-box; margin: 0 !important; }
#sala-create .join-line button { padding: 0 18px !important; font-size: 17px !important; display: inline-flex !important; align-items: center; justify-content: center; white-space: nowrap; }
@media (max-width: 420px) { #sala-create .join-line { grid-template-columns: 1fr 1fr; } #sala-create .join-line input#code-join { grid-column: 1 / -1; } }
.play-card p { font-size: 13px !important; }

/* v4.34 — placar geral como antes; no celular os dois quadros continuam lado a lado (só menores) */
@media (max-width: 760px) {
  .score-row .versus { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 6px !important; }
  .score-row .vs { display: none !important; }
  .score-row .side { grid-template-columns: auto auto !important; grid-auto-rows: auto; justify-content: center; gap: 2px 8px !important; padding: 8px 6px !important; text-align: center !important; }
  .score-row .side img { width: 34px !important; height: 34px !important; grid-row: auto !important; grid-column: 1 !important; justify-self: end; }
  .score-row .side .num { grid-row: 1 !important; grid-column: 2 !important; font-size: 30px !important; justify-self: start; }
  .score-row .side .big { grid-column: 1 !important; grid-row: 2 !important; font-size: 26px !important; }
  .score-row .side .mid { grid-column: 2 !important; grid-row: 2 !important; font-size: 26px !important; }
  .score-row .side small { font-size: 10px !important; line-height: 1.1; }
  .score-row .side small:nth-of-type(1) { grid-column: 1 !important; grid-row: 3 !important; }
  .score-row .side small:nth-of-type(2) { grid-column: 2 !important; grid-row: 3 !important; }
}
/* v4.35 — azul neutro exato: #2563EB */
:root { --cobalt: #2563EB; --neutral: #2563EB; --cl-pri: #2563EB; --cl-pri2: #2563EB; }
body:not(.in-room) .cta, body:not(.in-room) .quick-card .cta, body:not(.in-room) .cpu-card .cta { background: #2563EB !important; border: 1px solid #2563EB !important; }
body:not(.in-room) .cta:hover { filter: brightness(1.08); }
body:not(.in-room) .seg button.on:not(.s13):not(.s22), #chart-mode button.on, .badge { background: #2563EB !important; border-color: #2563EB !important; }
/* v4.36 — placar geral: números e textos centralizados em cada coluna */
.score-row .side { text-align: center !important; justify-items: center !important; }
.score-row .side .big, .score-row .side .mid, .score-row .side small { text-align: center !important; justify-self: center !important; }