/* ═══════════════════════════════════════════════════════
   JOGO DA VELHA GOBLET — Classic Arena
   Layout: shell flex (board centralizado + sidebar de skins)
   Fonte: Inter (sem 'Play')
   Skins: cores controladas via CSS custom properties em #game-shell
   ═══════════════════════════════════════════════════════ */

/* ── Custom properties controladas pela skin ──
   O skin-manager.js seta estas inline em #game-shell.
   Os defaults aqui herdam as variáveis do theme.css. */
#game-shell{
  --board-size:min(96vw,55vh,460px);
  --gap:10px;
  --win-glow:rgba(255,224,75,.42);

  /* Estas serão sobrescritas pela skin equipada: */
  --skin-x:var(--cx);
  --skin-o:var(--co);
  --skin-x-glow:var(--cx-glow);
  --skin-o-glow:var(--co-glow);
  --skin-board-bg:var(--surface);
  --skin-cell-border:var(--border-bright);
  --skin-grid-lines:rgba(0,212,255,.05);
}

/* ── Layout principal: shell em coluna no mobile, grid no desktop ── */
#game-shell{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  padding:24px;
  min-height:70vh;
}
@media (min-width: 980px){
  #game-shell{
    /* board centralizado, sidebar de skins à direita */
    grid-template-columns:1fr 280px;
    align-items:start;
  }
}
.game-board-area{
  background:
    linear-gradient(var(--skin-grid-lines) 1px, transparent 1px),
    linear-gradient(90deg, var(--skin-grid-lines) 1px, transparent 1px),
    var(--skin-board-bg);
  background-size:48px 48px, 48px 48px, auto;
  border:1px solid var(--border-bright);
  border-radius:var(--r-lg);
  padding:clamp(16px,3vw,28px);
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(12px,2.4vw,20px);
  min-height:520px;
}

/* ── screens ── */
.screen{
  display:none; flex-direction:column; align-items:center;
  gap:clamp(14px,2.6vw,20px); width:100%; max-width:520px;
}
.screen.active{display:flex}

/* ── tipografia ── */
.screen .neon-title{
  font-family:var(--font-body); font-weight:800;
  font-size:clamp(1.4rem,4vw,2rem); letter-spacing:-0.01em;
  text-align:center;
  background:linear-gradient(90deg, var(--skin-x) 0%, var(--skin-o) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:none;
}
.screen-label{
  font-weight:700; font-size:13px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--text-muted);
}
.screen-sub{font-size:14px; color:var(--text-muted)}
.hl-orange{color:var(--skin-x); font-weight:700}

/* ── botões do jogo (sobrescreve só dentro do game shell) ── */
/* v10.2.0: NAO usar border:none global aqui — quebrava .btn-ghost / .ps-btn.
   Aplicamos os defaults apenas para botoes sem classe.                       */
#game-shell button{
  font-family:var(--font-body); cursor:pointer;
}
#game-shell button:not([class]){ border:none; background:none; }
#game-shell .btn-neon{
  /* herda magenta filled do theme.css; ajustes de tamanho + borda magenta */
  padding:clamp(10px,2vw,14px) clamp(20px,4vw,30px);
  border:2px solid var(--co);
}
#game-shell .btn-ghost{
  padding:clamp(9px,1.8vw,12px) clamp(18px,3.6vw,26px);
  border:1.5px solid var(--cx);
}
.btn-ghost-red{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:var(--danger);
  border:1.5px solid var(--danger);
  padding:10px 22px; border-radius:var(--r-md);
  font-weight:700; font-size:13px; letter-spacing:0.08em;
  text-transform:uppercase; cursor:pointer;
  transition:background var(--tr), box-shadow var(--tr);
}
.btn-ghost-red:hover{
  background:rgba(255,77,77,.10);
  box-shadow:0 0 16px rgba(255,77,77,.30);
}

/* ── seleção de modo (VS CPU / VS JOGADOR) ── */
.mode-row{
  display:flex; gap:clamp(10px,2.4vw,18px);
  width:100%; justify-content:center; flex-wrap:wrap;
}
.mode-card{
  flex:1; min-width:180px;
  background:var(--surface); border:1px solid var(--border-bright);
  border-radius:var(--r-lg);
  padding:clamp(18px,3.6vw,28px) clamp(14px,2.6vw,20px);
  text-align:center; cursor:pointer;
  transition:border-color var(--tr), box-shadow var(--tr),
             transform var(--tr), background var(--tr);
  position:relative; overflow:hidden;
}
.mode-card::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at top, var(--skin-x-glow), transparent 60%);
  opacity:.20; pointer-events:none; transition:opacity var(--tr);
}
.mode-card:hover{
  border-color:var(--skin-o);
  box-shadow:0 0 24px var(--skin-o-glow);
  transform:translateY(-3px);
}
.mode-card:hover::before{opacity:.35}
.mode-icon{font-size:clamp(1.8rem,5vw,2.4rem); margin-bottom:8px}
.mode-title{
  font-weight:700; font-size:14px; letter-spacing:0.10em;
  text-transform:uppercase; color:var(--text);
}
.mode-desc{
  font-size:12px; color:var(--text-muted);
  margin-top:6px; line-height:1.4;
}

/* sub-modo CPU (cards horizontais) */
#screen-cpu-mode .mode-row{flex-direction:column; max-width:380px}
.cpu-mode-card{
  width:100%; background:var(--surface);
  border:1px solid var(--border-bright); border-radius:var(--r-lg);
  padding:18px 22px; cursor:pointer;
  display:flex; align-items:center; gap:18px;
  transition:border-color var(--tr), box-shadow var(--tr), transform var(--tr);
}
.cpu-mode-card:hover{
  border-color:var(--skin-x);
  box-shadow:0 0 18px var(--skin-x-glow);
  transform:translateY(-2px);
}
.cpu-mode-card .mode-icon{font-size:2rem; flex-shrink:0; margin:0}
.cpu-mode-card .mode-info{
  display:flex; flex-direction:column; gap:4px; text-align:left; flex:1;
}
.cpu-mode-card .mode-title{margin:0}
.cpu-mode-card .mode-desc{font-size:12.5px; line-height:1.5; color:var(--text-muted)}

/* dificuldade (cards iguais ao mode-row) */
.diff-card .mode-icon{font-size:2rem}

/* ── lobby online ── */
#player-list{
  width:100%; max-height:300px; overflow-y:auto;
  display:flex; flex-direction:column; gap:8px;
}
.player-row{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--surface); border:1px solid var(--border-bright);
  border-radius:var(--r-md); padding:11px 16px; cursor:pointer;
  transition:border-color var(--tr), box-shadow var(--tr);
}
.player-row:hover{
  border-color:var(--skin-x); box-shadow:0 0 12px var(--skin-x-glow);
}
.player-row .pname{font-weight:600; font-size:14px}
.player-row .ponline{font-size:11px; color:var(--ok); font-weight:600}
.lobby-status{
  font-size:13px; color:var(--text-muted);
  min-height:18px; text-align:center;
}

/* ── moeda (coin toss) ── */
#coin-wrapper{
  perspective:900px;
  width:min(200px,46vw); height:min(200px,46vw);
  display:flex; align-items:center; justify-content:center;
}
.coin{
  width:min(170px,42vw); height:min(170px,42vw);
  position:relative; transform-style:preserve-3d;
}
.coin.land-heads{animation:coinH 1.4s cubic-bezier(.25,.46,.45,.94) forwards}
.coin.land-tails{animation:coinT 1.4s cubic-bezier(.25,.46,.45,.94) forwards}
@keyframes coinH{
  0%{transform:rotateY(0)}
  20%{transform:rotateY(450deg) translateY(-65px)}
  55%{transform:rotateY(1080deg) translateY(-55px)}
  80%{transform:rotateY(1620deg) translateY(-8px)}
  100%{transform:rotateY(1800deg)}
}
@keyframes coinT{
  0%{transform:rotateY(0)}
  20%{transform:rotateY(450deg) translateY(-65px)}
  55%{transform:rotateY(1080deg) translateY(-55px)}
  80%{transform:rotateY(1620deg) translateY(-8px)}
  100%{transform:rotateY(1980deg)}
}
.coin-face{
  position:absolute; width:100%; height:100%; border-radius:50%;
  backface-visibility:hidden; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px;
}
.coin-front{
  background:radial-gradient(circle at 35% 30%, #ffe066, #c8860a 60%, #7a4e00);
  border:4px solid #b8760a;
  box-shadow:inset 0 3px 8px rgba(255,240,140,.7), 0 6px 22px rgba(0,0,0,.8);
}
.coin-back{
  background:radial-gradient(circle at 65% 65%, #ffe066, #c8860a 60%, #7a4e00);
  border:4px solid #b8760a;
  box-shadow:inset 0 3px 8px rgba(255,240,140,.7), 0 6px 22px rgba(0,0,0,.8);
  transform:rotateY(180deg);
}
.coin-ring{
  position:absolute; width:86%; height:86%; border-radius:50%;
  border:5px solid rgba(255,220,60,.45);
  top:50%; left:50%; transform:translate(-50%,-50%);
  pointer-events:none;
}
.coin-name{
  font-family:var(--font-body); font-weight:900;
  font-size:clamp(1.1rem,6vw,1.5rem); color:#4a2800;
  text-align:center; max-width:70%; line-height:1.2; word-break:break-word;
}
.coin-star{font-size:1.2rem; color:#8b5200}
.coin-result{
  font-weight:800; font-size:clamp(1rem,2.8vw,1.2rem);
  color:var(--win); text-align:center; min-height:28px;
  letter-spacing:0.02em;
}
.coin-auto-msg{font-size:13px; color:var(--text-muted)}
.coin-auto-msg.hidden{display:none}

/* ══════════════════════════════════════════
   TELA DE JOGO
   ══════════════════════════════════════════ */

/* round label — fica acima do placar agora (v10.1.1) */
.pip-group{display:flex; gap:8px}
.pip-group.right{flex-direction:row-reverse}
.win-pip{
  width:clamp(9px,2.2vw,12px); height:clamp(9px,2.2vw,12px);
  border-radius:50%; border:1.5px solid var(--border-bright);
  background:transparent; transition:background .3s, box-shadow .3s, border-color .3s;
}
.win-pip.lit-x{
  background:var(--skin-x); border-color:var(--skin-x);
  box-shadow:0 0 10px var(--skin-x-glow);
}
.win-pip.lit-o{
  background:var(--skin-o); border-color:var(--skin-o);
  box-shadow:0 0 10px var(--skin-o-glow);
}
#round-label{
  font-weight:700; font-size:11px; color:var(--text-faint);
  letter-spacing:0.12em; text-align:center; text-transform:uppercase;
  width:100%; max-width:var(--board-size);
}

/* placar dos jogadores (v10.1.0: avatares grandes + glow no turno) */
/* v10.1.2: grid 3 colunas -> P1 ancorado a esquerda, VS no centro, P2 ancorado a direita */
#players-bar{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:clamp(10px,2.6vw,22px); width:100%; max-width:var(--board-size);
  padding:8px 0;
  margin:0 auto;
}
.player-card{
  display:flex; align-items:flex-start; gap:clamp(8px,1.8vw,14px);
  min-width:0; padding:6px;
  border-radius:var(--r-lg);
  transition:transform var(--tr);
  justify-self:start;   /* P1 ancora a esquerda */
}
.player-card.right{
  /* v10.1.3: sem row-reverse — ordem visual segue HTML: [nome][avatar]
     => nome a esquerda, avatar colado na borda direita */
  text-align:right;
  justify-self:end;     /* P2 ancora a direita (espelho do P1) */
}
/* v10.1.1: nome alinhado ao topo do avatar + pips abaixo do nome */
.player-info{
  display:flex; flex-direction:column;
  align-items:flex-start; justify-content:flex-start;
  gap:8px; padding-top:6px;
  flex:1; min-width:0;
}
.player-info.right{ align-items:flex-end; }
.player-avatar-wrap{
  position:relative;
  width:clamp(64px,13vw,90px); height:clamp(64px,13vw,90px);
  border-radius:50%;
  display:grid; place-items:center;
  border:2.5px solid var(--border-bright);
  background:var(--surface);
  transition:border-color var(--tr), box-shadow var(--tr), transform var(--tr);
  flex-shrink:0;
}
.player-avatar-img{
  width:100%; height:100%; border-radius:50%;
  object-fit:cover; display:block;
}
.player-piece-mark{
  position:absolute; right:-6px; bottom:-6px;
  width:clamp(22px,4.4vw,30px); height:clamp(22px,4.4vw,30px);
  border-radius:50%; background:var(--surface);
  border:2px solid var(--border-bright);
  display:grid; place-items:center;
}
.player-card.right .player-piece-mark{ right:auto; left:-6px; }
.player-piece-mark svg{ width:70%; height:70% }
.player-piece-mark.x-mark{ color:var(--skin-x); border-color:var(--skin-x) }
.player-piece-mark.o-mark{ color:var(--skin-o); border-color:var(--skin-o) }

.player-name{
  font-family:var(--font-body); font-weight:700;
  /* v10.1.1: fonte ligeiramente maior que o round-label (11px) e menor que antes */
  font-size:clamp(12px,2vw,14px); letter-spacing:0.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%;
  transition:text-shadow var(--tr), color var(--tr);
}
.player-card[data-sym="X"] .player-name{ color:var(--skin-x) }
.player-card[data-sym="O"] .player-name{ color:var(--skin-o) }

/* glow no turno ativo (moldura do avatar + nome) */
.player-card[data-sym="X"].active-turn .player-avatar-wrap{
  border-color:var(--skin-x);
  box-shadow:0 0 22px var(--skin-x-glow), 0 0 8px var(--skin-x-glow) inset;
  transform:scale(1.04);
}
.player-card[data-sym="O"].active-turn .player-avatar-wrap{
  border-color:var(--skin-o);
  box-shadow:0 0 22px var(--skin-o-glow), 0 0 8px var(--skin-o-glow) inset;
  transform:scale(1.04);
}
.player-card[data-sym="X"].active-turn .player-name{
  text-shadow:0 0 8px var(--skin-x-glow), 0 0 16px var(--skin-x-glow);
}
.player-card[data-sym="O"].active-turn .player-name{
  text-shadow:0 0 8px var(--skin-o-glow), 0 0 16px var(--skin-o-glow);
}
.vs-badge{
  font-weight:700; font-size:11px; letter-spacing:0.12em;
  color:var(--text-faint); text-transform:uppercase;
  background:var(--surface-2); border:1px solid var(--border-bright);
  border-radius:var(--r-sm); padding:7px 11px; flex-shrink:0;
}

/* ─── Seletor de tamanho P/M/G (pílulas) ─── */
#piece-bar-wrap{
  width:100%; max-width:var(--board-size);
  margin-top:clamp(10px,2vw,16px);
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(8px,1.8vw,14px);
}
.piece-bar-title{
  font-size:14px; font-weight:600; color:var(--text);
  text-align:center; letter-spacing:0.02em;
}
#piece-bar{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(10px,2.2vw,16px); width:100%;
}
/* v10.1.3: 3 estados visiveis para os botoes P/M/G — sem color-mix nas bordas
   1) selected      = borda 2px cheia + glow (igual celulas do tabuleiro)
   2) disponivel    = borda 2px solida na cor skin-x (claramente visivel)
   3) indisponivel  = borda 2px CINZA neutra */
.ps-btn{
  flex:1; display:flex; align-items:center; justify-content:center;
  gap:clamp(6px,1.2vw,10px);
  background:transparent;
  border:2px solid var(--skin-x);
  border-radius:var(--r-full);
  padding:clamp(10px,2vw,14px) clamp(14px,2.8vw,22px);
  cursor:pointer; color:var(--skin-x);
  font-weight:700; letter-spacing:0.02em;
  transition:all var(--tr); min-width:0;
}
.ps-btn:hover:not(:disabled){
  background:color-mix(in srgb, var(--skin-x) 12%, transparent);
  border-color:var(--skin-x);
  box-shadow:0 0 14px var(--skin-x-glow);
}
.ps-btn.selected{
  background:color-mix(in srgb, var(--skin-x) 25%, transparent);
  color:var(--text);
  border-color:var(--skin-x);
  border-width:2px;
  box-shadow:0 0 16px var(--skin-x-glow);
}
.ps-btn.selected .ps-letter,
.ps-btn.selected .ps-count{color:var(--text)}
.ps-btn.selected .ps-x{color:var(--text); opacity:.85}
.ps-btn:disabled{
  background:transparent;
  border-color:rgba(255,255,255,.45);
  color:rgba(255,255,255,.45);
  cursor:not-allowed; box-shadow:none;
}
:root[data-theme="light"] .ps-btn:disabled{
  border-color:rgba(15,23,42,.40);
  color:rgba(15,23,42,.50);
}
.ps-letter{
  font-size:clamp(1rem,3.6vw,1.4rem); font-weight:800; line-height:1;
}
.ps-x{
  font-size:clamp(.85rem,2.6vw,1.05rem);
  opacity:.75; font-weight:500;
}
.ps-count{
  font-size:clamp(1rem,3.6vw,1.4rem);
  font-weight:700; line-height:1; min-width:1ch; text-align:left;
}

/* ════════  TABULEIRO  ════════ */
#board{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--gap); width:var(--board-size); height:var(--board-size);
}
.cell{
  /* v10.1.2: fundo da celula com 50% de transparencia */
  background:color-mix(in srgb, var(--surface) 50%, transparent);
  border:1px solid var(--skin-cell-border);
  border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  position:relative; overflow:hidden;
  transition:border-color var(--tr), background var(--tr),
             transform var(--tr), box-shadow var(--tr);
}
.cell:hover:not(.filled):not(.disabled){
  background:color-mix(in srgb, var(--surface-2) 50%, transparent);
  border-color:color-mix(in srgb, var(--skin-x) 40%, transparent);
  transform:scale(1.02);
  box-shadow:0 0 12px color-mix(in srgb, var(--skin-x) 25%, transparent);
}
.cell:active:not(.filled):not(.disabled){transform:scale(.97)}
.cell.filled{cursor:default}
.cell.winner-cell{
  background:rgba(255,224,75,.08);
  border-color:rgba(255,224,75,.45);
  box-shadow:0 0 24px rgba(255,224,75,.20);
}

/* peças SVG — 3 tamanhos (Goblet) */
.piece{
  position:absolute; display:flex; align-items:center; justify-content:center;
  animation:piece-in .28s cubic-bezier(.16,1,.3,1) forwards; user-select:none;
}
@keyframes piece-in{
  from{transform:scale(0) rotate(-15deg); opacity:0}
  to  {transform:scale(1) rotate(0); opacity:1}
}
.piece.s1{width:32%; height:32%}
.piece.s2{width:58%; height:58%}
.piece.s3{width:84%; height:84%}
.piece svg{width:100%; height:100%; filter:drop-shadow(0 0 10px currentColor)}
.piece-x{color:var(--skin-x)}
.piece-o{color:var(--skin-o)}

/* vitória — pulso dourado */
.cell.winner-cell .piece svg{
  filter:drop-shadow(0 0 16px var(--win));
  color:var(--win) !important;
  animation:win-pulse .9s ease-in-out infinite alternate;
}
@keyframes win-pulse{
  from{filter:drop-shadow(0 0 12px var(--win)); transform:scale(1)}
  to  {filter:drop-shadow(0 0 26px var(--win)); transform:scale(1.08)}
}

/* célula ripple */
.cell::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(circle at center, rgba(255,255,255,.10) 0, transparent 70%);
  opacity:0; transition:opacity .15s;
}
.cell:active:not(.filled)::after{opacity:1}

/* destaque válido (preview de jogada possível) */
.cell.valid-target{
  border-color:color-mix(in srgb, var(--skin-x) 50%, transparent);
  box-shadow:0 0 14px var(--skin-x-glow);
}

/* badge de pilha (peças cobertas) */
.stack-badge{
  position:absolute; bottom:5px; right:6px;
  font-size:11px; font-weight:700;
  color:var(--text-faint);
  background:rgba(0,0,0,.65); border-radius:4px;
  padding:1px 5px; pointer-events:none;
}

/* resultado */
#result-banner{
  width:100%; max-width:var(--board-size); text-align:center;
  font-weight:700; font-size:14px; letter-spacing:0.06em;
  padding:12px 16px;
  background:rgba(255,224,75,.08);
  border:1px solid rgba(255,224,75,.30);
  border-radius:var(--r-md); color:var(--win);
  animation:fadeUp .35s ease;
}
#result-banner.hidden{display:none}
@keyframes fadeUp{
  from{opacity:0; transform:translateY(8px)}
  to  {opacity:1; transform:none}
}

/* ações do jogo */
#game-actions{
  display:flex; gap:clamp(8px,1.8vw,12px);
  flex-wrap:wrap; justify-content:center;
  width:100%; max-width:var(--board-size);
}

/* chat */
#chat-box{
  width:100%; max-width:var(--board-size);
  display:flex; flex-direction:column; gap:8px;
}
#chat-box.hidden{display:none}
#chat-shell{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border-bright);
  border-radius:var(--r-md); overflow:hidden;
}
/* v10.2.0: overlay quando o outro jogador fechou o chat */
.chat-overlay{
  position:absolute; inset:0;
  background:rgba(0,0,0,.78);
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:12px;
  color:var(--text); font-weight:600; font-size:13px;
  letter-spacing:0.02em;
  z-index:5;
}
.chat-overlay.hidden{display:none}
.btn-chat-toggle{
  align-self:center;
  padding:8px 18px !important;
  font-size:12px !important;
  letter-spacing:0.06em;
}
#chat-messages{
  height:100px; overflow-y:auto;
  padding:8px 12px; display:flex; flex-direction:column; gap:4px;
}
.chat-msg{font-size:13px; color:var(--text-muted)}
.chat-msg.system{color:var(--text-faint); font-style:italic}
#chat-input-row{display:flex; border-top:1px solid var(--divider)}
#chat-input{
  flex:1; border:none; background:transparent;
  padding:9px 12px; font-size:13px;
  color:var(--text); font-family:var(--font-body); outline:none;
}
#btn-send{
  background:var(--surface-2); color:var(--skin-x);
  padding:9px 14px; border:none; cursor:pointer;
  font-weight:600; font-size:13px;
  letter-spacing:0.05em; text-transform:uppercase;
  transition:background var(--tr);
}
#btn-send:hover{background:var(--surface-3)}

/* modais */
.modal{
  position:fixed; inset:0;
  background:rgba(0,0,0,.78); backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; z-index:100;
}
.modal.hidden{display:none}
.modal-box{
  background:var(--surface);
  border:1px solid var(--border-bright);
  border-radius:var(--r-lg);
  padding:clamp(22px,5vw,32px); text-align:center;
  display:flex; flex-direction:column; align-items:center;
  gap:16px; max-width:340px; width:90%;
  font-size:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.modal-icon{font-size:2.4rem}
.modal-btns{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}

/* scrollbar */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--surface)}
::-webkit-scrollbar-thumb{background:var(--text-faint); border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}

/* ═══════════════════════════════════════════════════
   SIDEBAR DE SKINS
   ═══════════════════════════════════════════════════ */
.skins-sidebar{
  background:var(--surface);
  border:1px solid var(--border-bright);
  border-radius:var(--r-lg);
  padding:20px;
  display:flex; flex-direction:column; gap:14px;
  position:sticky; top:90px;       /* abaixo do header sticky */
}
.skins-sidebar-header{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:12px; border-bottom:1px solid var(--divider);
}
.skins-sidebar-title{
  font-weight:800; font-size:14px;
  letter-spacing:0.10em; text-transform:uppercase;
  color:var(--text);
}
.skins-sidebar-title::before{
  content:''; display:inline-block; width:8px; height:8px;
  border-radius:50%; background:var(--skin-o);
  box-shadow:0 0 8px var(--skin-o-glow);
  margin-right:8px; vertical-align:middle;
}
.skins-sidebar-badge{
  font-size:10px; padding:3px 9px;
  border-radius:var(--r-full);
  background:var(--cx-dim); color:var(--cx-bright);
  font-weight:600; letter-spacing:0.05em;
}
.skins-sidebar-badge.guest{
  background:rgba(255,174,66,.15); color:var(--warn);
}
.skins-list{
  display:flex; flex-direction:column; gap:8px;
  max-height:480px; overflow-y:auto;
  padding-right:4px;
}
.skin-card{
  display:flex; gap:12px; align-items:center;
  padding:10px;
  background:var(--surface-2);
  border:1.5px solid var(--border-bright);
  border-radius:var(--r-md);
  cursor:pointer;
  transition:border-color var(--tr), box-shadow var(--tr), transform var(--tr);
}
.skin-card:hover{
  border-color:color-mix(in srgb, var(--skin-x) 60%, transparent);
  transform:translateX(2px);
}
.skin-card.equipped{
  border-color:var(--skin-x);
  box-shadow:0 0 16px var(--skin-x-glow);
  background:color-mix(in srgb, var(--skin-x) 6%, var(--surface-2));
}
.skin-card.equipped::after{
  content:'✓'; margin-left:auto;
  width:22px; height:22px; border-radius:50%;
  background:var(--skin-x); color:#0a0a1c;
  display:grid; place-items:center;
  font-weight:900; font-size:13px;
  box-shadow:0 0 10px var(--skin-x-glow);
}
.skin-swatch{
  flex-shrink:0;
  width:44px; height:44px; border-radius:var(--r-sm);
  background:var(--swatch-bg, var(--surface));
  border:1px solid var(--border);
  display:grid; place-items:center;
  position:relative; overflow:hidden;
}
.skin-swatch::before, .skin-swatch::after{
  content:''; position:absolute;
  width:50%; height:50%;
}
.skin-swatch::before{
  /* mini X */
  top:6px; left:6px;
  background:
    linear-gradient(45deg, transparent 42%, var(--swatch-x, var(--cx)) 42%, var(--swatch-x, var(--cx)) 58%, transparent 58%),
    linear-gradient(-45deg, transparent 42%, var(--swatch-x, var(--cx)) 42%, var(--swatch-x, var(--cx)) 58%, transparent 58%);
  filter:drop-shadow(0 0 4px var(--swatch-x-glow, var(--cx-glow)));
}
.skin-swatch::after{
  /* mini O */
  bottom:6px; right:6px;
  border-radius:50%;
  border:2.5px solid var(--swatch-o, var(--co));
  background:transparent;
  filter:drop-shadow(0 0 4px var(--swatch-o-glow, var(--co-glow)));
}
.skin-info{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.skin-name{
  font-weight:700; font-size:13px; color:var(--text);
  letter-spacing:0.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.skin-desc{
  font-size:11px; color:var(--text-muted);
  line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.skins-empty, .skins-loading{
  padding:24px 12px; text-align:center;
  color:var(--text-muted); font-size:13px;
}
.skins-guest-note{
  margin-top:10px; padding:10px 12px;
  background:rgba(255,174,66,.08);
  border:1px solid rgba(255,174,66,.20);
  border-radius:var(--r-sm);
  font-size:11px; color:var(--warn);
  line-height:1.5;
}
.skins-guest-note a{
  color:var(--warn); text-decoration:underline; font-weight:600;
}

/* ─── botão de toggle para mobile (recolhe sidebar) ─── */
.skins-toggle-mobile{
  display:none;
}
@media (max-width: 979px){
  .skins-sidebar{
    position:static; max-height:60vh; overflow:hidden;
  }
  .skins-sidebar.collapsed .skins-list,
  .skins-sidebar.collapsed .skins-guest-note{display:none}
  .skins-toggle-mobile{
    display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:28px; border-radius:6px;
    background:var(--surface-2); border:1px solid var(--border-bright);
    color:var(--text-muted); cursor:pointer;
    font-size:14px; padding:0;
  }
}

/* ── Modo carreira (barra + tela de resultado) ── */
#career-bar{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(8px,1.8vw,12px); width:100%; max-width:var(--board-size);
}
#career-bar.hidden{display:none !important}
#game-shell .hidden{display:none !important}

.career-step{
  display:flex; flex-direction:column; align-items:center;
  gap:4px; flex:1; opacity:.40; transition:opacity .3s;
}
.career-step.done{opacity:.70}
.career-step.active{opacity:1}
.career-step-dot{
  width:clamp(20px,4.4vw,28px); height:clamp(20px,4.4vw,28px);
  border-radius:50%; border:2px solid var(--border-bright);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800;
  color:var(--text-faint); transition:all .3s;
}
.career-step.done .career-step-dot{
  background:color-mix(in srgb, var(--skin-x) 18%, transparent);
  border-color:var(--skin-x); color:var(--skin-x);
}
.career-step.active .career-step-dot{
  background:rgba(255,224,75,.18);
  border-color:var(--win); color:var(--win);
  box-shadow:0 0 12px var(--win-glow);
}
.career-step-label{
  font-size:11px; color:var(--text-faint);
  letter-spacing:0.06em; white-space:nowrap; font-weight:600;
}
.career-step.active .career-step-label{color:var(--win)}
.career-connector{
  height:2px; flex:1; background:var(--border-bright);
  margin-bottom:14px; transition:background .3s;
}
.career-connector.done{background:var(--skin-x)}

/* tela de resultado de carreira */
#career-result-icon{font-size:clamp(3.4rem,12vw,5.4rem); margin-bottom:8px}
#career-result-title{
  font-weight:900; font-size:clamp(1.3rem,4.2vw,2rem);
  letter-spacing:0.04em; text-align:center;
}
#career-result-title.win{
  color:var(--win); text-shadow:0 0 22px var(--win-glow);
}
#career-result-title.loss{
  color:var(--skin-o); text-shadow:0 0 18px var(--skin-o-glow);
}
#career-result-title.champion{
  background:linear-gradient(90deg, var(--skin-x), var(--win), var(--skin-o));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
#career-result-sub{
  font-size:14px; color:var(--text-muted);
  line-height:1.6; text-align:center; max-width:380px;
}
#career-result-streak{
  font-weight:800; font-size:14px;
  color:var(--skin-x); padding:10px 22px;
  background:color-mix(in srgb, var(--skin-x) 12%, transparent);
  border:1px solid var(--skin-x);
  border-radius:var(--r-full);
}
#career-result-streak.hidden{display:none}

/* ── overlay de intro de nível ── */
#level-intro-overlay{
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.85);
  display:flex; align-items:center; justify-content:center;
  animation:fadeInOverlay .35s ease;
}
#level-intro-overlay.fade-out{animation:fadeOutOverlay .5s ease forwards}
#level-intro-box{
  background:var(--surface);
  border:2px solid var(--skin-x);
  border-radius:var(--r-lg);
  padding:32px 40px; max-width:80vw; text-align:center;
  box-shadow:0 0 48px var(--skin-x-glow);
}
#level-intro-msg{
  font-weight:800; font-size:clamp(1rem,3.4vw,1.4rem);
  letter-spacing:0.04em; color:var(--skin-x);
  text-shadow:0 0 14px var(--skin-x-glow);
  line-height:1.5;
}
@keyframes fadeInOverlay {from{opacity:0} to{opacity:1}}
@keyframes fadeOutOverlay{from{opacity:1} to{opacity:0}}

/* entrada e error */
input[type="text"]{
  width:100%; padding:11px 15px;
  background:var(--surface-2); border:1px solid var(--border-bright);
  border-radius:var(--r-md);
  color:var(--text); font-family:var(--font-body); font-size:14px;
  font-weight:500; outline:none;
  transition:border-color var(--tr), box-shadow var(--tr);
}
input[type="text"]::placeholder{color:var(--text-faint)}
input[type="text"]:focus{
  border-color:var(--skin-x);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--skin-x) 18%, transparent);
}
.error-msg{color:var(--danger); font-size:13px; min-height:18px}
.entry-box{display:flex; flex-direction:column; gap:12px; width:100%; max-width:360px}

/* ── shake utility (jogada inválida) ── */
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%,60%{transform:translateX(-4px)}
  40%,80%{transform:translateX(4px)}
}
.cell.shake{animation:shake .3s}

/* ── responsivo ── */
@media (max-width: 480px){
  .cell{border-radius:var(--r-sm)}
  #game-shell{padding:14px; gap:16px}
  .game-board-area{padding:16px; min-height:auto}
}


/* ════════════════════════════════════════════
   Tema CLARO — Jogo da Velha overrides
   ════════════════════════════════════════════ */
:root[data-theme="light"] #game-shell{
  --skin-grid-lines:rgba(2,132,199,.05);
}
:root[data-theme="light"] .ps-btn{
  background:rgba(15,23,42,.03);
}
:root[data-theme="light"] .ps-btn:hover:not(:disabled){
  background:rgba(15,23,42,.07);
}
:root[data-theme="light"] .skin-card{
  background:rgba(15,23,42,.03);
}

/* v10.1.1: destaque temporario (1s) na celula recem-jogada */
.cell.just-played{
  animation:cell-flash 1000ms ease-out;
}
@keyframes cell-flash{
  0%   { background:color-mix(in srgb, #ffffff 28%, var(--surface)); box-shadow:0 0 18px rgba(255,255,255,0.25) inset; }
  100% { background:color-mix(in srgb, var(--surface) 50%, transparent); box-shadow:none; }
}
:root[data-theme="light"] .cell.just-played{
  animation:cell-flash-light 1000ms ease-out;
}
@keyframes cell-flash-light{
  0%   { background:color-mix(in srgb, #000000 18%, var(--surface)); box-shadow:0 0 14px rgba(0,0,0,0.18) inset; }
  100% { background:color-mix(in srgb, var(--surface) 50%, transparent); box-shadow:none; }
}

/* ════════════════════════════════════════════
   v10.1.2: Ajustes mobile — centralizar tudo + esconder header
   ════════════════════════════════════════════ */
@media (max-width: 600px){
  /* v10.1.3: nao deixar nada gerar scroll horizontal que desloque o conteudo */
  html, body{ overflow-x:hidden; max-width:100vw; }
  .site-main{
    width:100%;
    max-width:100vw;
    box-sizing:border-box;
    margin-left:auto; margin-right:auto;
  }
  #game-shell{
    /* board-size reduzido para caber dentro do painel respeitando paddings */
    --board-size:min(82vw,55vh,420px);
    padding:8px;
    gap:12px;
    /* garantir centralizacao real do shell */
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    margin-left:auto; margin-right:auto;
    place-items:center;
  }
  .game-board-area{
    padding:10px;
    min-height:auto;
    gap:10px;
    /* centralizar o painel + conteudo interno */
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    margin-left:auto; margin-right:auto;
    align-items:center;
    justify-self:center;
  }
  /* todas as telas centralizadas */
  .screen{
    margin:0 auto;
    align-items:center;
    width:100%;
  }
  /* placar mais compacto no mobile */
  #players-bar{
    gap:6px; padding:4px 0;
    margin:0 auto;
  }
  .player-card{ gap:8px; padding:2px; }
  .player-avatar-wrap{
    width:clamp(48px,14vw,64px);
    height:clamp(48px,14vw,64px);
    border-width:2px;
  }
  .player-piece-mark{
    width:clamp(18px,5vw,24px);
    height:clamp(18px,5vw,24px);
    right:-4px; bottom:-4px;
  }
  .player-card.right .player-piece-mark{ left:-4px; }
  .player-info{ gap:4px; padding-top:2px; }
  .player-name{ font-size:clamp(11px,3vw,13px); }
  .win-pip{
    width:clamp(7px,2vw,10px);
    height:clamp(7px,2vw,10px);
  }
  .vs-badge{
    font-size:9px; padding:4px 7px;
  }
  /* tabuleiro centralizado + bordas menores no mobile */
  #board{ gap:6px; margin:0 auto; }
  .cell{ border-radius:var(--r-sm); }
  /* piece selector compacto e centralizado */
  #piece-bar-wrap{ margin:0 auto; }
  #piece-bar{ gap:8px }
  .ps-btn{ padding:8px 12px; }
  .piece-bar-title{ font-size:13px; }
  /* career-bar centralizado tambem */
  #career-bar{ margin:0 auto; }
  /* result banner e game actions tambem centralizados */
  #result-banner,
  #game-actions{ margin:0 auto; }
}

/* v10.2.0: no mobile, durante o jogo, ocultar a barra superior inteira
   (logo + theme toggle + menu de usuario). */
@media (max-width: 600px){
  body.game-page-mobile .site-header{ display:none !important; }
  body.game-page-mobile .site-main{ padding-top:0; }
}