/* ═══════════════════════════════════════════════════════
   MINI CHESS — Classic Arena  •  v11.1.3
   Layout: shell grid (board centralizado + sidebar de skins)
   Skins: cores via CSS custom properties em #game-shell
          --skin-x = peças BRANCAS | --skin-o = peças PRETAS
   ═══════════════════════════════════════════════════════ */

#game-shell{
  --board-size:min(94vw,56vh,520px);
  --win-glow:rgba(255,224,75,.42);

  /* 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 ── */
#game-shell{
  display:grid; grid-template-columns:1fr; gap:24px;
  padding:24px; min-height:70vh;
  justify-items:center;     /* centraliza board-area e sidebar no mobile */
}
@media (min-width: 980px){
  #game-shell{ grid-template-columns:1fr 280px; align-items:start;
    justify-items:stretch; }
}
.game-board-area{
  background:var(--skin-board-bg);
  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:540px;
  width:100%; max-width:600px; margin:0 auto; box-sizing:border-box;
}

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

.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;
}
.screen-label{ font-weight:700; font-size:13px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-muted); }
.screen-sub{font-size:14px; color:var(--text-muted)}
.mc-tagline{font-size:13px; color:var(--text-muted); text-align:center; max-width:420px}
.hl-orange{color:var(--skin-x); font-weight:700}

/* ── mode cards ── */
.mode-row{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; width:100%; }
.mode-card,.diff-card{
  background:var(--surface); border:1px solid var(--border-bright);
  border-radius:var(--r-md); padding:20px 22px; min-width:150px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  cursor:pointer; transition:transform .15s, border-color .15s, box-shadow .15s;
}
.mode-card:hover,.diff-card:hover{
  transform:translateY(-3px); border-color:var(--skin-x);
  box-shadow:0 6px 24px var(--skin-x-glow);
}
.mode-icon{font-size:34px; line-height:1}
.mode-title{font-weight:800; letter-spacing:.04em}
.mode-desc{font-size:12px; color:var(--text-muted); text-align:center}

/* ── placar / players bar (avatar em cima, nome centralizado abaixo) ── */
#players-bar{ display:flex; align-items:flex-start; justify-content:space-between;
  width:100%; max-width:var(--board-size); gap:10px; box-sizing:border-box; }
.player-card{ display:flex; flex-direction:column; align-items:center; gap:8px;
  flex:1 1 0; min-width:0; max-width:calc(50% - 28px);
  padding:8px 6px; border-radius:var(--r-md); border:1px solid transparent;
  box-sizing:border-box;
  transition:border-color .2s, box-shadow .2s; }
/* linha superior: avatar + energia, alinhada ao lado do jogador */
.player-top{ display:flex; align-items:center; gap:10px; max-width:100%; }
.player-card.active-turn{ border-color:var(--skin-x); box-shadow:0 0 16px var(--skin-x-glow); }
#badge-b.active-turn{ border-color:var(--skin-o); box-shadow:0 0 16px var(--skin-o-glow); }
.player-avatar-wrap{ position:relative; width:48px; height:48px; flex:none; }
.player-avatar-img{ width:48px; height:48px; border-radius:50%; object-fit:cover;
  border:2px solid var(--border-bright); background:var(--surface); }
.player-piece-mark{ position:absolute; right:-6px; bottom:-6px; font-size:20px;
  filter:drop-shadow(0 0 4px rgba(0,0,0,.6)); }
.w-mark{ color:var(--skin-x); }
.b-mark{ color:var(--skin-o); }
/* nome centralizado SOB o avatar */
.player-name{ font-weight:700; font-size:14px; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
  align-self:center; }
/* alinha o conteúdo de cada lado ao seu avatar:
   esquerda à esquerda, direita à direita */
#badge-w{ align-items:flex-start; }
#badge-w .player-name{ align-self:flex-start; text-align:left; }
#badge-b{ align-items:flex-end; }
#badge-b .player-name{ align-self:flex-end; text-align:right; }
.vs-badge{ font-weight:900; color:var(--text-muted); font-size:13px; flex:none;
  align-self:center; margin-top:14px; }

/* ── energia eclipse ── */
.energy-row{ display:flex; gap:4px; }
.energy-row.right{ justify-content:flex-end; }
.energy-pip{ width:12px; height:12px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #b388ff, #6a1b9a);
  box-shadow:0 0 6px rgba(168,85,247,.6); transition:opacity .2s, filter .2s; }
.energy-pip.spent{ opacity:.22; filter:grayscale(1); box-shadow:none; }

/* ── peça em voo (animação de movimento) ── */
.piece-flyer{
  position:absolute; z-index:30; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  transition:transform .26s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}

#turn-label{ font-weight:700; font-size:14px; color:var(--text-muted);
  letter-spacing:.06em; min-height:18px; }

/* ── tabuleiro 6×6 ── */
.board-wrap{ position:relative; width:var(--board-size); margin:0 auto; }
#board{
  width:var(--board-size); height:var(--board-size);
  display:grid; grid-template-columns:repeat(6,1fr); grid-template-rows:repeat(6,1fr);
  border:3px solid var(--skin-cell-border); border-radius:8px; overflow:hidden;
  box-shadow:0 8px 40px rgba(0,0,0,.45);
  position:relative;
  touch-action:none;   /* (#1) impede scroll/zoom durante o arrasto no mobile */
}
.cell{
  position:relative; display:flex; align-items:center; justify-content:center;
  cursor:pointer; user-select:none; transition:background .12s;
}
.cell.light{ background:rgba(255,255,255,.06); }
.cell.dark{ background:rgba(0,0,0,.28); }
.cell.core::after{
  content:""; position:absolute; inset:14%; border-radius:6px;
  border:2px dashed rgba(168,85,247,.55);
  background:radial-gradient(circle, rgba(168,85,247,.18), transparent 70%);
  pointer-events:none;
}
.cell:hover{ background:rgba(255,255,255,.13); }

.piece{
  /* Glyph textual mantido como fallback (caso o módulo de sprites falhe). */
  font-family: "Segoe UI Symbol", "Noto Sans Symbols2", "Noto Sans Symbols",
               "DejaVu Sans", "Arial Unicode MS", sans-serif;
  font-variant-emoji: text;
  font-size:calc(var(--board-size) / 9); line-height:1;
  transition:transform .12s; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}
/* Sprite SVG dentro da peça: ocupa ~84% da casa, centralizado. */
.piece svg{
  width:84%; height:84%; display:block;
  overflow:visible;
}
/* Cor do CORPO (currentColor) e do CONTORNO (--mc-piece-stroke) por cor.
   Brancas = cor da skin X; Pretas = cor da skin O. O contorno usa um tom
   escuro para destacar a silhueta sobre o tabuleiro neon. */
.piece-x{
  color:var(--skin-x);
  --mc-piece-stroke:rgba(2,6,23,.92);
  filter:drop-shadow(0 0 6px var(--skin-x-glow));
}
.piece-o{
  color:var(--skin-o);
  --mc-piece-stroke:rgba(2,6,23,.92);
  filter:drop-shadow(0 0 6px var(--skin-o-glow));
}
.cell.sel{ background:var(--skin-x-glow) !important; }
.cell.sel .piece{ transform:scale(1.12); }
.cell.target::before{
  content:""; position:absolute; width:26%; height:26%; border-radius:50%;
  background:var(--skin-x); opacity:.55;
}
.cell.target-capture{ box-shadow:inset 0 0 0 4px var(--skin-o); }

/* ── barra de impulso ── */
#impulse-bar-wrap{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  justify-content:center; max-width:var(--board-size); }
#btn-impulse.armed{
  background:rgba(168,85,247,.22); border-color:#a855f7;
  box-shadow:0 0 14px rgba(168,85,247,.55); color:#e9d5ff;
}
#btn-impulse:disabled{ opacity:.4; cursor:not-allowed; }
.impulse-hint{ font-size:12px; color:var(--text-muted); transition:color .2s; }
.impulse-hint.flash{ color:#d8b4fe; }

/* ── (#6) banner de resultado sobreposto ao tabuleiro, piscando suave ── */
#result-banner.result-overlay{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:86%; max-width:none; z-index:40;
  font-weight:900; font-size:clamp(1.1rem,4vw,1.6rem); text-align:center;
  padding:18px 20px; border-radius:var(--r-lg);
  backdrop-filter:blur(3px);
  animation:resultBlink 1.6s ease-in-out infinite;
}
#result-banner.result-overlay.win{
  color:#22e07c; background:rgba(8,20,14,.82);
  box-shadow:0 0 30px rgba(34,224,124,.5); border:1.5px solid rgba(34,224,124,.6);
}
#result-banner.result-overlay.lose{
  color:#ff6b6b; background:rgba(24,8,8,.82);
  box-shadow:0 0 30px rgba(255,107,107,.45); border:1.5px solid rgba(255,107,107,.55);
}
@keyframes resultBlink{
  0%,100%{ opacity:1; }
  50%{ opacity:.35; }
}
.hidden{ display:none !important; }

/* ── ações ── */
#game-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }

/* ── lobby ── */
#player-list{ width:100%; display:flex; flex-direction:column; gap:8px; }
.lobby-row{ display:flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--border-bright);
  border-radius:var(--r-md); padding:8px 12px; }
.lobby-avatar{ width:34px; height:34px; border-radius:50%; object-fit:cover; }
.lobby-name{ flex:1; font-weight:600; }
.lobby-empty{ color:var(--text-muted); font-size:13px; text-align:center; }
.lobby-status{ font-size:13px; color:var(--text-muted); min-height:18px; }

/* ── coin (animação do Jogo da Velha — moeda dourada que cai numa face) ── */
#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(1rem,5vw,1.4rem); color:#4a2800;
  text-align:center; max-width:74%; line-height:1.15; 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, #22e07c); 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; }

/* ── chat ── */
#chat-box{ width:100%; max-width:var(--board-size); display:flex; flex-direction:column; gap:8px; }
#chat-shell{ position:relative; border:1px solid var(--border-bright);
  border-radius:var(--r-md); background:var(--surface); overflow:hidden; }
#chat-messages{ height:120px; overflow-y:auto; padding:10px; display:flex;
  flex-direction:column; gap:4px; font-size:13px; }
.chat-line strong{ color:var(--skin-x); }
#chat-input-row{ display:flex; gap:6px; padding:8px; border-top:1px solid var(--border-bright); }
#chat-input{ flex:1; background:var(--bg); border:1px solid var(--border-bright);
  border-radius:6px; padding:6px 10px; color:inherit; }
.chat-overlay{ position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; background:rgba(0,0,0,.78); font-size:13px; color:var(--text-muted); }
.btn-chat-toggle{ align-self:flex-end; font-size:12px; padding:4px 12px; }

/* ── modais ── */
.modal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center;
  justify-content:center; background:rgba(0,0,0,.7); }
.modal.hidden{ display:none; }
.modal-box{ background:var(--surface); border:1px solid var(--border-bright);
  border-radius:var(--r-lg); padding:28px 32px; text-align:center; max-width:380px;
  display:flex; flex-direction:column; gap:14px; align-items:center; }
.modal-icon{ font-size:40px; }
.modal-btns{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.promo-btns .promo-pick{ min-width:104px; }

/* ── mobile ── */
@media (max-width: 979px){
  /* (#5) Esconde a sidebar de skins por completo no mobile. */
  .skins-sidebar{ display:none !important; }
  #board{ --board-size:min(96vw,70vh); }

  /* Remove o espaço lateral e faz o quadro do jogo ocupar toda a largura
     da tela no mobile. */
  body.game-page-mobile .site-main{ padding-left:0; padding-right:0; padding-top:0; }
  #game-shell{
    padding:6px 0 16px;
    justify-items:stretch;
    gap:8px;
    min-height:0;            /* (#8) não força altura extra */
  }
  .game-board-area{
    max-width:none; width:100%;
    margin:0; border-radius:0;
    border-left:none; border-right:none;
    padding:8px;
    gap:8px;                 /* (#8) reduz o vão entre placar/label/tabuleiro */
    min-height:0;            /* (#8) remove a altura mínima que criava vazio */
  }
  #board{ --board-size:min(98vw,70vh); }

  /* (#8) compacta os elementos que geravam os retângulos vazios:
     a faixa de turno e o placar não reservam mais espaço sobrando. */
  #turn-label{ min-height:0; margin:0; }
  #players-bar{ margin:0; }
  #game-shell > *:empty{ display:none; }   /* some com contêineres vazios */
}

/* ═══════════════════════════════════════════════════════
   v10.1.0 — adições
   ═══════════════════════════════════════════════════════ */

/* ── (#6) remove o conteúdo abaixo do quadro de skins na página do jogo ──
   O footer do site (.site-footer) aparecia logo abaixo da sidebar de skins,
   poluindo a tela do jogo (sobretudo no mobile). Como este CSS só é carregado
   na página do Mini Chess, a regra não afeta o restante do site. */
body .site-footer{ display:none !important; }

/* ── (#3) botão "Desistir" — danger outline (faltava no Mini Chess) ── */
.btn-ghost-red{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:var(--danger, #ff4d4d);
  border:1.5px solid var(--danger, #ff4d4d);
  padding:10px 22px; border-radius:var(--r-md);
  font-weight:700; font-size:13px; letter-spacing:0.08em;
  text-transform:uppercase; cursor:pointer;
  font-family:inherit;
  transition:background var(--tr,.18s), box-shadow var(--tr,.18s);
}
.btn-ghost-red:hover{
  background:rgba(255,77,77,.10);
  box-shadow:0 0 16px rgba(255,77,77,.30);
}

/* ── (#3) glow branco sob a peça recém-movida (dura 1s) ── */
/* Usa box-shadow no próprio .cell (não ::after) para não colidir com o
   quadrado do Núcleo (.core::after) nem com o glow amarelo (.core-ready). */
.cell.just-moved{
  animation:justMovedFade 1s ease-out forwards;
}
@keyframes justMovedFade{
  0%{ box-shadow:inset 0 0 26px 4px rgba(255,255,255,.85); }
  100%{ box-shadow:inset 0 0 0 0 rgba(255,255,255,0); }
}

/* ── (#4v) glow amarelo: Rei a 1 turno de vencer pelo Núcleo ── */
.cell.core-ready{
  animation:coreReadyPulse 1.1s ease-in-out infinite;
}
.cell.core-ready::before{
  content:""; position:absolute; inset:8%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,214,10,.55), rgba(255,214,10,.12) 55%, transparent 72%);
  box-shadow:0 0 22px 6px rgba(255,214,10,.45);
  z-index:0; pointer-events:none;
}
.cell.core-ready .piece{ position:relative; z-index:1; }
@keyframes coreReadyPulse{
  0%,100%{ filter:brightness(1); }
  50%{ filter:brightness(1.25); }
}

/* ── (#3) Rei sob ataque: glow vermelho piscante na base ── */
.cell.king-attacked::after{
  content:""; position:absolute; inset:6%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,40,40,.6), rgba(255,40,40,.12) 58%, transparent 74%);
  box-shadow:0 0 22px 7px rgba(255,40,40,.5);
  z-index:0; pointer-events:none;
  animation:kingAttackedBlink .7s ease-in-out infinite;
}
.cell.king-attacked .piece{ position:relative; z-index:1; }
@keyframes kingAttackedBlink{
  0%,100%{ opacity:.25; }
  50%{ opacity:1; }
}

/* ── (#9) Rastro amarelo do Impulso (dura 2s) ── */
.cell.impulse-trail::after{
  content:""; position:absolute; inset:18%;
  border-radius:8px;
  background:radial-gradient(circle, rgba(255,221,51,.5), rgba(255,221,51,.14) 60%, transparent 78%);
  box-shadow:0 0 14px 3px rgba(255,221,51,.4);
  z-index:0; pointer-events:none;
  animation:impulseTrailFade 2s ease-out forwards;
}
.cell.impulse-trail .piece{ position:relative; z-index:1; }
@keyframes impulseTrailFade{
  0%{ opacity:1; }
  80%{ opacity:.7; }
  100%{ opacity:0; }
}

/* ── (#1) peça fantasma durante o arrasto (segue o ponteiro) ── */
.drag-ghost{
  position:fixed; z-index:60; pointer-events:none;
  transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.6));
  opacity:.95;
}
#board.dragging{ cursor:grabbing; }
/* casa sob o ponteiro durante o arrasto, se for destino válido */
.cell.hover-target{
  box-shadow:inset 0 0 0 3px var(--skin-x), inset 0 0 18px var(--skin-x-glow);
}

/* ── (#2) glow azul GIRANDO sob Cavalo/Torre/Bispo quando o Impulso liga ── */
.cell.impulse-ready::before{
  content:""; position:absolute; left:50%; top:58%;
  width:78%; height:78%; transform:translate(-50%,-50%);
  border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(0,180,255,0), rgba(0,180,255,.65), rgba(80,220,255,.9),
    rgba(0,180,255,.65), rgba(0,180,255,0));
  filter:blur(2px);
  z-index:0; pointer-events:none;
  animation:impulseSpin 1.4s linear infinite;
}
.cell.impulse-ready .piece{ position:relative; z-index:1; }
@keyframes impulseSpin{
  0%{ transform:translate(-50%,-50%) rotate(0deg); }
  100%{ transform:translate(-50%,-50%) rotate(360deg); }
}

/* ── (#5) animação no mobile: o flyer precisa de font-size explícito,
   pois fora de uma .cell ele não herda o tamanho do tabuleiro ── */
.piece-flyer{
  font-size:calc(var(--board-size) / 9);
  font-family: "Segoe UI Symbol", "Noto Sans Symbols2", "Noto Sans Symbols",
               "DejaVu Sans", "Arial Unicode MS", sans-serif;
  font-variant-emoji: text;
}

/* ═══════════════════════════════════════════════════════
   (#1) SIDEBAR DE SKINS — estilos (faltavam no Mini Chess)
   classes geradas por skin-manager.js: .skin-card .skin-swatch
   .skin-info .skin-name .skin-desc
   ═══════════════════════════════════════════════════════ */
.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;
}
.skins-sidebar-header{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:12px; border-bottom:1px solid var(--divider, var(--border-bright));
}
.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, 999px);
  background:var(--cx-dim, rgba(0,212,255,.12)); color:var(--cx-bright, var(--cx));
  font-weight:600; letter-spacing:0.05em;
}
.skins-sidebar-badge.guest{
  background:rgba(255,174,66,.15); color:var(--warn, #ffae42);
}
.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, rgba(255,255,255,.04));
  border:1.5px solid var(--border-bright);
  border-radius:var(--r-md);
  cursor:pointer;
  text-align:left; width:100%; font-family:inherit; color:inherit;
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.skin-card:hover{
  border-color:var(--skin-x);
  transform:translateX(2px);
}
.skin-card.equipped{
  border-color:var(--skin-x);
  box-shadow:0 0 16px var(--skin-x-glow);
}
.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, 8px);
  background:var(--swatch-bg, var(--surface));
  border:1px solid var(--border, var(--border-bright));
  display:grid; place-items:center;
  position:relative; overflow:hidden;
}
/* swatch temático de xadrez: um "rei" claro e um "peão" escuro */
.skin-swatch::before{
  content:'♚'; position:absolute; top:2px; left:7px;
  font-size:20px; line-height:1;
  color:var(--swatch-x, var(--cx));
  filter:drop-shadow(0 0 4px var(--swatch-x-glow, var(--cx-glow)));
  font-family:"Segoe UI Symbol","Noto Sans Symbols2",sans-serif;
}
.skin-swatch::after{
  content:'♟'; position:absolute; bottom:2px; right:7px;
  font-size:18px; line-height:1;
  color:var(--swatch-o, var(--co));
  filter:drop-shadow(0 0 4px var(--swatch-o-glow, var(--co-glow)));
  font-family:"Segoe UI Symbol","Noto Sans Symbols2",sans-serif;
}
.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, 8px);
  font-size:11px; color:var(--warn, #ffae42);
  line-height:1.5;
}
.skins-guest-note a{
  color:var(--warn, #ffae42); text-decoration:underline; font-weight:600;
}
.skins-toggle-mobile{ display:none; }
@media (max-width: 979px){
  .skins-sidebar{ position:static; max-height:none; }
  .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, rgba(255,255,255,.04));
    border:1px solid var(--border-bright);
    color:var(--text-muted); cursor:pointer;
    font-size:14px; padding:0;
  }
}