/* ============================================================================
   RoyalShess — estilos del cliente (estética inspirada en TETR.IO)
   ============================================================================ */
:root{
  --bg:#06060d; --bg-2:#0b0c16; --panel:#10111e; --panel-2:#161829; --line:#23263d;
  --ink:#e9ecff; --ink-dim:#8a90b8;
  --white-acc:#33e6ff; --black-acc:#ff3b73;
  --energy-a:#6bffb0; --energy-b:#33e6ff; --danger:#ff2d4a; --gold:#ffcf4a;
  --sq-light:#1a1d2e; --sq-dark:#12141f; --sel:#ffd54a; --radius:14px;
  --piece-w:#eafffd; --piece-w-glow:rgba(51,230,255,.85);
  --piece-b:#ffe3ee; --piece-b-glow:rgba(255,59,115,.85);
}

/* ---------- TEMA "Clásico" (inspirado en chess.com) ---------- */
body.theme-chesscom{
  --bg:#312e2b; --bg-2:#272522; --panel:#262522; --panel-2:#302e2b; --line:#413e3a;
  --ink:#f5f3ef; --ink-dim:#9e9c98;
  --white-acc:#ebecd0; --black-acc:#81b64c;
  --energy-a:#81b64c; --energy-b:#a3d160; --danger:#fa412d; --gold:#f7c631;
  --sq-light:#ebecd0; --sq-dark:#739552; --sel:#f5f682;
  --piece-w:#ffffff; --piece-w-glow:rgba(0,0,0,.5);
  --piece-b:#2b2926; --piece-b-glow:rgba(255,255,255,.28);
}
body.theme-chesscom .board-wrap{ background:linear-gradient(180deg,#2a2825,#21201d); }
body.theme-chesscom .sq .coord{ color:rgba(0,0,0,.3); }
body.theme-chesscom .hint{ background:rgba(0,0,0,.16); }
body.theme-chesscom .hint.cap{ border-color:rgba(0,0,0,.25); }
body.theme-chesscom #cardW .efill{ background:linear-gradient(90deg,#cdd7a9,#ebecd0); box-shadow:0 0 10px rgba(235,236,208,.35); }
body.theme-chesscom #cardB .efill{ background:linear-gradient(90deg,#a3d160,#81b64c); box-shadow:0 0 10px rgba(129,182,76,.4); }
body.theme-chesscom .rbeam.w{ background:rgba(255,255,255,.55); box-shadow:0 0 6px rgba(255,255,255,.4); }
body.theme-chesscom .rbeam.b{ background:rgba(43,41,38,.5); box-shadow:0 0 6px rgba(0,0,0,.35); }
body.theme-chesscom .playbtn{ background:linear-gradient(90deg,#81b64c,#a3d160); color:#14200a; box-shadow:0 0 24px rgba(129,182,76,.35); }
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  background:
    radial-gradient(1200px 700px at 50% -10%, #141833 0%, transparent 60%),
    radial-gradient(900px 600px at 100% 110%, #1a0f2b 0%, transparent 55%),
    var(--bg);
  color:var(--ink); font-family:'Rajdhani',system-ui,sans-serif;
  min-height:100dvh; overflow-x:hidden; -webkit-tap-highlight-color:transparent;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:44px 44px; opacity:.08;
  mask-image:radial-gradient(circle at 50% 40%,#000 30%,transparent 80%);
}
/* fondo animado (bgfx.js): detrás de todo, la rejilla de body::before queda encima */
#bgfx{ position:fixed; inset:0; z-index:-1; pointer-events:none; }
.app{ position:relative; z-index:1; max-width:1120px; margin:0 auto; padding:18px 16px 40px; }

.topbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
.brand{ display:flex; align-items:baseline; gap:10px; }
.brand h1{
  font-family:'Chakra Petch'; font-weight:700; letter-spacing:.16em; font-size:clamp(20px,3.4vw,30px); text-transform:uppercase;
  background:linear-gradient(90deg,var(--white-acc),#c9a6ff 55%,var(--black-acc));
  -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 14px rgba(90,140,255,.25));
}
.brand small{ color:var(--ink-dim); letter-spacing:.28em; font-size:11px; text-transform:uppercase; }
.controls{ display:flex; gap:8px; align-items:center; }
.status{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); display:flex; align-items:center; gap:6px; }
.status .led{ width:9px; height:9px; border-radius:50%; background:var(--danger); box-shadow:0 0 8px var(--danger); }
.status.ok .led{ background:var(--energy-a); box-shadow:0 0 8px var(--energy-a); }
.btn{
  font-family:'Chakra Petch'; font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:13px;
  color:var(--ink); background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:9px 14px; cursor:pointer;
  transition:transform .08s,border-color .15s,box-shadow .15s,color .15s;
}
.btn:hover{ border-color:#3a3f64; box-shadow:0 0 0 1px #3a3f64,0 6px 20px rgba(0,0,0,.4); }
.btn:active{ transform:translateY(1px) scale(.98); }

.stage{ display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:start; }
@media (max-width:880px){
  .stage{ grid-template-columns:1fr; justify-items:center; }
  .side-top{ width:100%; max-width:560px; }
}

.side{ display:flex; flex-direction:column; gap:12px; min-width:210px; }
.pcard{ background:linear-gradient(180deg,var(--panel),var(--bg-2)); border:1px solid var(--line); border-radius:var(--radius); padding:14px; position:relative; overflow:hidden; }
.pcard.check{ animation:checkpulse 1s ease-in-out infinite; }
@keyframes checkpulse{ 0%,100%{ box-shadow:0 0 0 1px var(--line);} 50%{ box-shadow:0 0 22px rgba(255,45,74,.55),0 0 0 1px var(--danger);} }
.phead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.pname{ font-family:'Chakra Petch'; font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:15px; display:flex; align-items:center; gap:8px; }
.dot{ width:11px; height:11px; border-radius:3px; }
#cardW .dot{ background:var(--white-acc); box-shadow:0 0 10px var(--white-acc); }
#cardB .dot{ background:var(--black-acc); box-shadow:0 0 10px var(--black-acc); }
.badge-check{ font-family:'Chakra Petch'; font-weight:700; font-size:11px; letter-spacing:.14em; color:#fff; background:var(--danger); padding:3px 8px; border-radius:6px; opacity:0; transition:opacity .2s; box-shadow:0 0 14px rgba(255,45,74,.6); }
.pcard.check .badge-check{ opacity:1; }
.energy-top{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:6px; }
.energy-label{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-dim); }
.energy-num{ font-family:'Chakra Petch'; font-weight:700; font-size:26px; line-height:1; }
.energy-num small{ font-size:13px; color:var(--ink-dim); font-weight:500; }
.ebar{ height:16px; border-radius:8px; background:#05060c; border:1px solid var(--line); overflow:hidden; position:relative; }
.efill{ height:100%; width:0%; border-radius:7px; transition:width .12s linear; }
#cardW .efill{ background:linear-gradient(90deg,#0f6,var(--energy-b)); box-shadow:0 0 14px rgba(51,230,255,.5); }
#cardB .efill{ background:linear-gradient(90deg,#ff8a5c,var(--black-acc)); box-shadow:0 0 14px rgba(255,59,115,.5); }

/* Tu tarjeta (siempre abajo): se estira a lo ancho para que la barra quede más alargada */
#sideBottom{ align-self:stretch; }
#sideBottom .pcard{ width:100%; }
.ebar .ticks{ position:absolute; inset:0; display:flex; }
.ebar .ticks i{ flex:1; border-right:1px solid rgba(255,255,255,.06); }
.ebar .ticks i:last-child{ border:0; }
.pstats{ display:flex; gap:14px; margin-top:12px; }
.stat{ flex:1; }
.stat .k{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim); }
.stat .v{ font-family:'Chakra Petch'; font-weight:700; font-size:20px; }

.board-col{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.clock{ font-family:'Chakra Petch'; font-weight:700; letter-spacing:.08em; font-size:clamp(30px,6vw,44px); line-height:1; padding:6px 20px; border:1px solid var(--line); border-radius:12px; background:var(--panel); min-width:170px; text-align:center; box-shadow:0 0 26px rgba(0,0,0,.5) inset; }
.clock.low{ color:var(--danger); animation:clockflash .6s steps(2) infinite; }
@keyframes clockflash{ 50%{ opacity:.55; } }
.board-wrap{ width:min(90vw,62vh,560px); aspect-ratio:1; position:relative; border-radius:16px; padding:10px; background:linear-gradient(180deg,#0c0e18,#07080f); border:1px solid var(--line); box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.02); }
.board-wrap.edge-w{ box-shadow:0 0 40px rgba(51,230,255,.18),0 30px 80px rgba(0,0,0,.6); }
.board-wrap.edge-b{ box-shadow:0 0 40px rgba(255,59,115,.18),0 30px 80px rgba(0,0,0,.6); }
/* TU rey en jaque: alarma fuerte, todo el tablero pulsa en rojo */
.board-wrap.danger{ border-color:var(--danger); animation:dangerpulse .7s ease-in-out infinite; }
.board-wrap.danger::after{
  content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none;
  background:radial-gradient(closest-side, transparent 52%, rgba(255,45,74,.32));
  animation:dangerfade .7s ease-in-out infinite;
}
@keyframes dangerpulse{
  0%,100%{ box-shadow:0 0 24px rgba(255,45,74,.35),0 30px 80px rgba(0,0,0,.6); }
  50%{ box-shadow:0 0 70px rgba(255,45,74,.8),0 30px 80px rgba(0,0,0,.6); }
}
@keyframes dangerfade{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }
.grid{ position:absolute; inset:10px; display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(8,1fr); border-radius:8px; overflow:hidden; }
.sq{ position:relative; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.sq.light{ background:var(--sq-light); } .sq.dark{ background:var(--sq-dark); }
.sq .coord{ position:absolute; bottom:2px; right:4px; font-size:9px; color:rgba(255,255,255,.16); font-weight:600; pointer-events:none; }
.sq.sel::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 3px var(--sel); background:rgba(255,213,74,.10); }
/* cupón de recaptura gratis: puedes comer a esta pieza sin gastar energía */
.sq.freecap::before{
  content:""; position:absolute; inset:2px; border:2px solid var(--gold); border-radius:8px;
  box-shadow:0 0 12px rgba(255,207,74,.55), inset 0 0 10px rgba(255,207,74,.25);
  animation:freepulse .8s ease-in-out infinite; pointer-events:none;
}
@keyframes freepulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
.sq.lastmove{ background-image:linear-gradient(rgba(255,255,255,.06),rgba(255,255,255,.06)); }
.hint{ position:absolute; width:30%; height:30%; border-radius:50%; background:rgba(255,255,255,.28); pointer-events:none; }
/* carril de la torre: línea tenue que marca su zona de fuego (cruzarla cuesta +1) */
.rbeam{ position:absolute; pointer-events:none; animation:rbeampulse 1.6s ease-in-out infinite; }
.rbeam.h{ left:0; right:0; top:50%; height:3px; transform:translateY(-50%); }
.rbeam.v{ top:0; bottom:0; left:50%; width:3px; transform:translateX(-50%); }
.rbeam.w{ background:rgba(51,230,255,.4); box-shadow:0 0 9px rgba(51,230,255,.45); }
.rbeam.b{ background:rgba(255,59,115,.4); box-shadow:0 0 9px rgba(255,59,115,.45); }
@keyframes rbeampulse{ 0%,100%{ opacity:.45; } 50%{ opacity:.85; } }
.hint.cap{ width:78%; height:78%; background:transparent; border:3px solid rgba(255,80,120,.7); border-radius:50%; }
.hint.poor{ background:transparent; border:2px dashed rgba(255,80,120,.5); width:44%; height:44%; }
.pieces{ position:absolute; inset:10px; pointer-events:none; }
.piece{ position:absolute; width:12.5%; height:12.5%; display:flex; align-items:center; justify-content:center; font-size:min(9vw,58px); line-height:1; user-select:none; transform:translate(0,0); transition:transform .16s cubic-bezier(.3,.9,.3,1.2),opacity .18s; will-change:transform; }
.piece.w{ color:var(--piece-w); text-shadow:0 0 10px var(--piece-w-glow),0 2px 4px rgba(0,0,0,.6); }
.piece.b{ color:var(--piece-b); text-shadow:0 0 10px var(--piece-b-glow),0 2px 4px rgba(0,0,0,.6); }
.piece.dead{ opacity:0; transform:scale(.4) rotate(20deg); }
.piece.pop{ animation:pop .22s ease; }
/* el glifo va en un span interior: así la escala (agarrar/soltar) no pisa el translate de posición */
.piece span{ display:block; transition:transform .18s cubic-bezier(.3,1.5,.5,1); }
.piece.dragging{ transition:none; z-index:6; filter:drop-shadow(0 10px 16px rgba(0,0,0,.6)); }
.piece.dragging span{ transform:scale(1.28); }
@keyframes settle{ 0%{ transform:scale(1.28); } 55%{ transform:scale(.9); } 100%{ transform:scale(1); } }
.grid{ touch-action:none; }
body.grabbing, body.grabbing .sq{ cursor:grabbing; }
@keyframes pop{ 0%{ transform:scale(.6);} 60%{ transform:scale(1.18);} 100%{ transform:scale(1);} }

.legend{ width:min(90vw,560px); background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.legend h3{ font-family:'Chakra Petch'; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:10px; }
.legend .row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ display:flex; align-items:center; gap:6px; background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:5px 9px; font-size:13px; }
.chip .g{ font-size:18px; color:#dfe6ff; } .chip b{ font-family:'Chakra Petch'; color:var(--white-acc); } .chip i{ color:var(--energy-a); font-style:normal; }
.legend p{ margin-top:10px; font-size:12.5px; color:var(--ink-dim); line-height:1.5; }

.toast{ position:fixed; left:50%; top:14%; transform:translateX(-50%) translateY(-10px); background:var(--danger); color:#fff; font-family:'Chakra Petch'; font-weight:700; letter-spacing:.1em; padding:8px 16px; border-radius:10px; opacity:0; pointer-events:none; transition:opacity .18s,transform .18s; box-shadow:0 0 24px rgba(255,45,74,.5); z-index:50; text-transform:uppercase; font-size:13px; }
.toast.good{ background:var(--energy-a); color:#04220f; box-shadow:0 0 24px rgba(107,255,176,.5); }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

.overlay{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; background:rgba(4,4,10,.82); backdrop-filter:blur(6px); }
.overlay.hidden{ display:none; }
.panelbig{ text-align:center; max-width:440px; padding:34px 30px; }
.panelbig .title{ font-family:'Chakra Petch'; font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:clamp(24px,6vw,40px); white-space:nowrap; background:linear-gradient(90deg,var(--white-acc),#c9a6ff 55%,var(--black-acc)); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 20px rgba(90,140,255,.3)); }
.panelbig .sub{ color:var(--ink-dim); letter-spacing:.2em; text-transform:uppercase; font-size:12px; margin-top:6px; }
.result{ font-family:'Chakra Petch'; font-weight:700; font-size:clamp(26px,6vw,40px); letter-spacing:.1em; text-transform:uppercase; margin-bottom:6px;
  animation:resultpop .5s cubic-bezier(.2,.9,.3,1.2); }   /* se reinicia sola: el panel pasa por display:none */
.result.win{ color:var(--energy-a); text-shadow:0 0 24px rgba(107,255,176,.5); }
.result.lose{ color:var(--danger); text-shadow:0 0 24px rgba(255,45,74,.5); }
.result.draw{ color:var(--gold); }
@keyframes resultpop{
  0%{ transform:scale(2.4); opacity:0; filter:blur(6px); }
  60%{ transform:scale(.94); opacity:1; filter:blur(0); }
  100%{ transform:scale(1); }
}
#screenResult .menu-btns{ animation:fadeup .35s .25s both; }
@keyframes fadeup{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

/* canvas de estallidos (bgfx.js): por encima de TODO, no bloquea clics */
#fxfx{ position:fixed; inset:0; z-index:70; pointer-events:none; }

/* flash de pantalla al terminar (el color lo pone el cliente) */
.flash{ position:fixed; inset:0; z-index:65; pointer-events:none; opacity:0; }
.flash.go{ animation:flashout .5s ease-out; }
@keyframes flashout{ 0%{ opacity:.5; } 100%{ opacity:0; } }

/* sacudida del tablero al perder */
.board-wrap.shake{ animation:boardshake .45s cubic-bezier(.36,.07,.19,.97); }
@keyframes boardshake{
  10%,90%{ transform:translateX(-2px); } 20%,80%{ transform:translateX(4px); }
  30%,50%,70%{ transform:translateX(-8px); } 40%,60%{ transform:translateX(8px); }
}
.playbtn{ font-family:'Chakra Petch'; font-weight:700; letter-spacing:.16em; text-transform:uppercase; font-size:18px; color:#04121a; background:linear-gradient(90deg,var(--energy-a),var(--white-acc)); border:0; border-radius:12px; padding:14px 40px; margin-top:20px; cursor:pointer; box-shadow:0 0 30px rgba(51,230,255,.4); transition:transform .1s,box-shadow .15s; }
.playbtn:hover{ box-shadow:0 0 44px rgba(51,230,255,.6); }
.playbtn:active{ transform:scale(.97); }
.playbtn:disabled{ opacity:.4; cursor:not-allowed; box-shadow:none; }
.small-note{ margin-top:16px; font-size:12px; color:var(--ink-dim); line-height:1.6; }

/* ---------- móviles: todo más compacto y el tablero a lo ancho ---------- */
@media (max-width:640px){
  .app{ padding:10px 8px 28px; }
  .topbar{ margin-bottom:10px; gap:8px; }
  .brand small{ display:none; }
  .brand h1{ font-size:20px; }
  .btn{ padding:7px 9px; font-size:11px; }
  .stage{ gap:10px; }
  .clock{ font-size:28px; min-width:130px; padding:4px 14px; }
  .board-wrap{ width:min(96vw,64vh); padding:6px; border-radius:12px; }
  .grid,.pieces{ inset:6px; }
  .board-wrap.danger::after{ border-radius:12px; }
  .piece{ font-size:min(10.5vw,44px); }
  .pcard{ padding:10px 12px; }
  .pname{ font-size:13px; }
  .energy-num{ font-size:22px; }
  .pstats{ margin-top:8px; }
  .stat .v{ font-size:16px; }
  .legend{ width:100%; padding:10px 12px; }
  .legend p{ font-size:11.5px; }
  .panelbig{ padding:24px 14px; max-width:94vw; }
  .code-value{ font-size:32px; }
}

@media(prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }

/* ---------- Fase 3: menú, búsqueda, cuenta atrás ---------- */
.tag{ font-weight:600; font-size:11px; letter-spacing:.1em; }
.menu-btns{ display:flex; flex-direction:column; gap:10px; align-items:center; margin-top:8px; }
.btn.big{ padding:12px 34px; font-size:15px; }
.playbtn{ margin-top:0; }

.spinner{ width:46px; height:46px; margin:6px auto 14px; border-radius:50%;
  border:4px solid var(--line); border-top-color:var(--white-acc); animation:spin .8s linear infinite; box-shadow:0 0 18px rgba(51,230,255,.25); }
@keyframes spin{ to{ transform:rotate(360deg); } }
.searching-txt{ font-family:'Chakra Petch'; font-weight:600; letter-spacing:.16em; text-transform:uppercase; font-size:16px; margin-bottom:18px; color:var(--ink); }
#screenSearch .btn{ margin-top:4px; }

/* cuenta atrás sobre el tablero */
.countdown{ position:absolute; inset:10px; display:none; align-items:center; justify-content:center;
  background:rgba(5,6,14,.55); backdrop-filter:blur(2px); border-radius:8px; z-index:5; pointer-events:none; }
.countdown span{ font-family:'Chakra Petch'; font-weight:700; font-size:clamp(60px,18vw,120px); line-height:1;
  color:var(--white-acc); text-shadow:0 0 40px rgba(51,230,255,.6); animation:cdpop .9s ease-out; }
@keyframes cdpop{ 0%{ transform:scale(.5); opacity:0; } 30%{ transform:scale(1.1); opacity:1; } 100%{ transform:scale(1); opacity:1; } }

/* ---------- salas privadas ---------- */
.code-input{
  width:100%; text-align:center; font-family:'Chakra Petch'; font-weight:700; letter-spacing:.28em;
  text-transform:uppercase; font-size:22px; color:var(--ink);
  background:#05060c; border:1px solid var(--line); border-radius:12px; padding:14px 12px; margin-bottom:6px; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.code-input::placeholder{ color:var(--ink-dim); letter-spacing:.14em; font-size:15px; font-weight:600; }
.name-input{ font-size:18px; letter-spacing:.18em; padding:11px 12px; margin-bottom:10px; }
.opt-row{ display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:12px; cursor:pointer;
  font-size:13px; font-weight:600; letter-spacing:.08em; color:var(--ink-dim); user-select:none; }
.opt-row input{ width:16px; height:16px; accent-color:var(--white-acc); cursor:pointer; }
.opt-row:hover span{ color:var(--ink); }

/* selector de tema en el menú */
.theme-row{ display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.theme-label{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-dim); }
.tbtn.on{ border-color:var(--white-acc); color:var(--white-acc); box-shadow:0 0 12px rgba(120,220,255,.2); }

/* idioma: fijo arriba a la izquierda, por encima de todo (incluido el menú) */
.lang-row{ position:fixed; top:16px; left:16px; z-index:70; display:inline-flex; gap:6px; }
.lang-row .tbtn{ padding:5px 9px; font-size:11px; }

/* clasificación (leaderboard) */
.board-list{
  display:flex; flex-direction:column; gap:6px; max-height:min(46vh,360px); overflow:auto;
  margin:4px 0 10px; text-align:left;
}
.board-row{
  display:grid; grid-template-columns:40px 1fr 60px 78px; gap:6px; align-items:center;
  background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:8px 12px; font-size:13.5px;
}
.board-row.head{ background:transparent; border:0; color:var(--ink-dim); font-size:10px; text-transform:uppercase; letter-spacing:.16em; padding:2px 12px; }
.board-row.me{ border-color:var(--gold); box-shadow:0 0 12px rgba(255,207,74,.25); }
.board-row .rk{ font-family:'Chakra Petch'; font-weight:700; color:var(--white-acc); }
.board-row .nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.board-row .nm small{ color:var(--ink-dim); margin-left:2px; }
.board-row .el{ font-family:'Chakra Petch'; font-weight:700; text-align:right; }
.board-row .wl{ color:var(--ink-dim); text-align:right; font-size:12px; }
.board-me{ font-family:'Chakra Petch'; font-weight:600; color:var(--gold); margin-bottom:8px; }

/* tutorial (cómo jugar) */
.help-list{
  text-align:left; max-height:min(48vh,380px); overflow:auto;
  display:flex; flex-direction:column; gap:8px; margin:4px 0 12px; padding-right:4px;
}
.help-item{
  background:var(--panel-2); border:1px solid var(--line); border-radius:10px;
  padding:9px 12px; font-size:13.5px; line-height:1.45; color:var(--ink);
  cursor:pointer; transition:border-color .15s;
}
.help-item:hover{ border-color:#3a3f64; }
.help-item.active{ border-color:var(--white-acc); box-shadow:0 0 10px rgba(120,220,255,.15); }
.help-item b{ color:var(--white-acc); font-family:'Chakra Petch'; margin-right:6px; }

/* mini-tablero de demostraciones: recrea cada regla con coordenadas */
.demo-hint{ margin-bottom:8px; }
.demo-wrap{ margin:0 0 10px; }
.demo-board{
  position:relative; width:min(64vw,220px); aspect-ratio:1; margin:0 auto;
  border-radius:8px; overflow:hidden; border:1px solid var(--line);
}
.demo-board.danger{ animation:dangerpulse .7s ease-in-out infinite; border-color:var(--danger); }
.dsq{ position:absolute; width:12.5%; height:12.5%; }
.dsq.l{ background:var(--sq-light); } .dsq.d{ background:var(--sq-dark); }
.dpiece{
  position:absolute; width:12.5%; height:12.5%; display:flex; align-items:center; justify-content:center;
  font-size:min(6vw,20px); line-height:1; transition:transform .35s ease, opacity .25s; z-index:2; pointer-events:none;
}
.dpiece.w{ color:var(--piece-w); text-shadow:0 0 6px var(--piece-w-glow),0 1px 2px rgba(0,0,0,.5); }
.dpiece.b{ color:var(--piece-b); text-shadow:0 0 6px var(--piece-b-glow),0 1px 2px rgba(0,0,0,.5); }
.dfloat{
  position:absolute; width:12.5%; text-align:center; z-index:4; pointer-events:none;
  font-family:'Chakra Petch'; font-weight:700; font-size:11px; color:#fff;
  text-shadow:0 0 6px rgba(0,0,0,.9); animation:dfloatup 1.1s ease-out forwards;
}
.dfloat.good{ color:var(--energy-a); }
.dfloat.bad{ color:#ff7d92; }
@keyframes dfloatup{ 0%{ transform:translateY(0); opacity:1; } 100%{ transform:translateY(-16px); opacity:0; } }
.dbeam{ position:absolute; z-index:1; pointer-events:none; background:rgba(51,230,255,.35); box-shadow:0 0 7px rgba(51,230,255,.4); animation:rbeampulse 1.6s ease-in-out infinite; }
.dgold{
  position:absolute; z-index:3; pointer-events:none; border:2px solid var(--gold); border-radius:4px;
  box-shadow:0 0 8px rgba(255,207,74,.55); animation:freepulse .8s ease-in-out infinite;
}

/* ajustes de partida al crear sala privada */
.cfg-rows{ display:flex; gap:10px; justify-content:center; margin:2px 0 12px; flex-wrap:wrap; }
.cfg{ display:flex; flex-direction:column; gap:4px; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); }
.cfg select{
  background:#05060c; color:var(--ink); border:1px solid var(--line); border-radius:8px;
  padding:6px 8px; font-family:'Chakra Petch'; font-weight:600; font-size:13px; cursor:pointer; outline:none;
}
.cfg select:focus{ border-color:var(--white-acc); }
body.theme-chesscom .cfg select{ background:var(--panel-2); }

/* ajustes avanzados: coste y recuperación por pieza */
.cfg-adv{ margin:0 auto 12px; max-width:340px; text-align:left; }
.cfg-adv summary{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim);
  cursor:pointer; text-align:center; padding:6px 0; user-select:none;
}
.cfg-adv summary:hover{ color:var(--ink); }
.cfg-grid{
  display:grid; grid-template-columns:1fr 74px 74px; gap:6px 8px; align-items:center;
  background:#05060c; border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-top:6px;
}
body.theme-chesscom .cfg-grid{ background:var(--panel-2); }
.cfg-grid .cfg-h{ font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-dim); text-align:center; }
.cfg-grid .cfg-name{ font-size:13px; color:var(--ink); display:flex; align-items:center; gap:6px; }
.cfg-grid .cfg-name .g{ font-size:18px; }
.cfg-grid input{
  width:100%; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:8px;
  padding:5px 6px; font-family:'Chakra Petch'; font-weight:600; font-size:13px; text-align:center; outline:none;
}
.cfg-grid input:focus{ border-color:var(--white-acc); }
.cfg-grid .cfg-dash{ text-align:center; color:var(--ink-dim); }
.code-input:focus{ border-color:var(--white-acc); box-shadow:0 0 18px rgba(51,230,255,.3); }
.code-err{ min-height:18px; color:var(--danger); font-size:13px; font-weight:600; margin-bottom:6px; }
.code-box{ display:inline-flex; flex-direction:column; align-items:center; gap:4px; margin-top:6px;
  background:#05060c; border:1px solid var(--line); border-radius:12px; padding:14px 30px; }
.code-label{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-dim); }
.code-value{ font-family:'Chakra Petch'; font-weight:700; font-size:40px; letter-spacing:.18em; color:var(--white-acc);
  text-shadow:0 0 22px rgba(51,230,255,.45); }