/* =======================================================================
   WBJUEGOS-UI v1.0.0 — estética compartida de WhiteBox Juegos
   (extraída de Math Quest: Inter, pasteles planos, acento índigo)

   Cómo incluir (en el <head> de cada juego, en este orden):
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap">
     <link rel="stylesheet" href="../common/wbjuegos-ui.css">

   IMPORTANTE: la fuente Inter se carga con <link> en cada juego (arriba),
   NUNCA con @import dentro de este archivo (bloquea el render).

   Acento propio por juego: sobrescribe variables DESPUÉS de este archivo:
     <style>:root{ --accent:#4a9ea0; }</style>   (siempre dentro de la paleta pastel)
======================================================================= */

:root{
  --bg:#fafaf8; --ink:#16161a; --muted:#6f6f7a; --line:#e8e8ee; --card:#fff;
  --accent:#5b5bd6; --gold:#e8b93c; --bad:#d6608a; --ok:#4aa06a;
  --radius:16px; --font:'Inter',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; height:100%;}
body{font-family:var(--font); color:var(--ink); background:var(--bg);
  min-height:100%; overflow-x:hidden; user-select:none;}

/* ---- Layout base ---- */
.wrap{position:relative; max-width:820px; margin:0 auto; padding:28px 20px 60px;}
.topbar{display:flex; align-items:center; gap:10px; margin-bottom:26px; flex-wrap:wrap;}
.logo{font-weight:800; font-size:1.15rem; letter-spacing:-.01em; display:flex; align-items:center; gap:8px;}
.logo small{font-weight:600; color:var(--muted); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;}
.spacer{flex:1;}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.row.center{justify-content:center;}
.row.spread{justify-content:space-between;}

/* ---- Panel ---- */
.panel{background:var(--card); border-radius:var(--radius); border:1px solid var(--line);
  padding:26px; margin-bottom:16px;}
.panel h2{margin:.1em 0 .4em; font-size:1.3rem; font-weight:700; letter-spacing:-.02em;}
.panel p.sub{color:var(--muted); margin:.2em 0 1.2em; font-size:.94rem; line-height:1.5;}

/* ---- Botones ---- */
.btn{border:none; cursor:pointer; font-family:var(--font); font-weight:600; font-size:.98rem;
  padding:12px 22px; border-radius:12px; color:#fff; background:var(--accent);
  transition:transform .08s, filter .15s;}
.btn:hover{filter:brightness(1.07);}
.btn:active{transform:translateY(2px);}
.btn:disabled{filter:grayscale(.6) opacity(.5); cursor:default;}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line);}
.btn.ghost:hover{border-color:var(--ink); filter:none;}
.btn.big{font-size:1.08rem; padding:14px 30px;}
.btn.gold{background:var(--gold);}

/* ---- Pills (HUD superior) ---- */
.pill{display:inline-flex; align-items:center; gap:6px; background:var(--card);
  padding:7px 13px; border-radius:999px; font-weight:600; font-size:.88rem;
  border:1px solid var(--line);}
.pill.who{cursor:pointer;}
.pill.who:hover{border-color:var(--accent);}

/* ---- Input de nombre / apodo ---- */
input.name{font-family:var(--font); font-weight:600; font-size:1.05rem; padding:12px 16px;
  border-radius:12px; border:1px solid var(--line); width:100%; max-width:320px; text-align:center;
  outline:none; background:#fff; color:var(--ink);}
input.name:focus{border-color:var(--accent);}

/* ---- Tabla de récords ---- */
table.lb{width:100%; border-collapse:collapse; font-size:.94rem;}
.lb th{text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--muted); font-weight:600; padding:8px 10px; border-bottom:1px solid var(--line);}
.lb td{padding:11px 10px; border-bottom:1px solid var(--line); font-weight:500;}
.lb td.rank{width:44px; font-weight:700; color:var(--muted);}
.lb td.total{text-align:right; font-weight:700;}
.lb th.total{text-align:right;}
.lb tr.me td{background:#f4f4fd; font-weight:700;}
.lb tr:last-child td{border-bottom:none;}

/* ---- Cuadro de récord arcade (lo inyecta WBJ.recordFlow) ---- */
.wbj-record{margin-top:16px; padding:16px; border:1px solid var(--line);
  border-radius:14px; background:var(--bg);}
.wbj-record-title{font-weight:700; margin-bottom:10px;}
.wbj-record-msg{margin-top:8px;}

/* ---- Controles táctiles (bajo el canvas, nunca sobre él) ---- */
.controls{display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top:12px; padding:0 2px;}
.pad{display:flex; gap:10px;}
.cbtn{width:64px; height:64px; border-radius:50%; border:1px solid var(--line); cursor:pointer;
  background:#fff; color:var(--ink); font-size:1.6rem; font-weight:700;
  display:grid; place-items:center; touch-action:none; transition:transform .08s;}
.cbtn.jump{width:118px; height:64px; border-radius:18px; background:var(--ink); color:#fff;
  font-size:1rem; letter-spacing:.04em;}
.cbtn:active{transform:translateY(2px);}
.hint{text-align:center; color:var(--muted); font-weight:500; font-size:.82rem; margin-top:12px;}

/* ---- Utilidades ---- */
.hidden{display:none !important;}
.muted{color:var(--muted);}
.fade{animation:wbjfade .35s;}
@keyframes wbjfade{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
.footnote{text-align:center; color:var(--muted); font-size:.8rem; font-weight:500; margin-top:10px;}
a.backlink{color:var(--muted); text-decoration:none; font-size:.82rem; font-weight:500;}
a.backlink:hover{color:var(--ink);}