/* ============================================================
   COMMON.CSS — estilos compartidos por todos los juegos
   (reset, tema claro/oscuro, botones, campos, modales,
    récords, confeti y el hub de juegos)
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --gold:#d9a441; --gold2:#f3cf7a; --danger:#e05d4f; --ok:#4caf7d;
}
body[data-theme="dark"]{
  --bg:#121815; --panel:#1d2723; --panel2:#242f2a; --text:#ece9df; --muted:#98a79e;
  --line:#33413a; --shadow:rgba(0,0,0,.55);
}
body[data-theme="light"]{
  --bg:#ece6d6; --panel:#fffdf6; --panel2:#f2edde; --text:#26302b; --muted:#6d7a72;
  --line:#d8d2c0; --shadow:rgba(60,50,30,.35);
}
html,body{height:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  background-image:radial-gradient(ellipse at 50% -10%, rgba(217,164,65,.08), transparent 55%);
  -webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}
button:disabled{cursor:not-allowed}
input{font:inherit}
.hidden{display:none!important}
.muted{color:var(--muted)}

/* ---------- pantallas ---------- */
.screen{display:none;min-height:100dvh}
.screen.show{display:flex;flex-direction:column}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.55em 1.2em;border-radius:12px;font-weight:600;
  background:var(--panel2);border:1px solid var(--line);color:var(--text);
  transition:transform .12s,box-shadow .2s,filter .2s;
}
.btn:hover:not(:disabled){filter:brightness(1.08)}
.btn:active:not(:disabled){transform:scale(.96)}
.btn:disabled{opacity:.4;filter:saturate(.4)}
.btn.primary{
  background:linear-gradient(160deg,var(--gold2),var(--gold) 60%,#b07f24);
  color:#2a1f08;border:1px solid #b58a33;
  box-shadow:0 3px 10px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn.big{font-size:1.15rem;padding:.7em 1.6em;border-radius:14px}
.btn.danger{background:linear-gradient(160deg,#e97b6e,#c74a3c);color:#fff;border-color:#a53a2e}
.btn-icon{
  width:42px;height:42px;border-radius:50%;font-size:1.15rem;display:inline-flex;
  align-items:center;justify-content:center;background:var(--panel2);border:1px solid var(--line);
  transition:transform .12s,filter .2s;
}
.btn-icon:hover{filter:brightness(1.12)}
.btn-icon:active{transform:scale(.92)}

/* ---------- campos y tarjetas de opción ---------- */
.field label{display:block;font-size:.82rem;font-weight:700;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;margin-bottom:6px}
.field input[type=text]{
  width:100%;padding:.6em .8em;border-radius:10px;border:1px solid var(--line);
  background:var(--panel2);color:var(--text);outline:none;
}
.field input[type=text]:focus{border-color:var(--gold)}
.opt-grid{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:520px){.opt-grid{grid-template-columns:repeat(3,1fr)}}
.opt-card{position:relative;display:block}
.opt-card input{position:absolute;opacity:0}
.opt-card span.card{
  display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:12px;cursor:pointer;
  border:2px solid var(--line);background:var(--panel2);height:100%;transition:border-color .15s,box-shadow .15s;
}
.opt-card b{font-size:.95rem}
.opt-card em{font-style:normal;font-size:.76rem;color:var(--muted);line-height:1.3}
.opt-card input:checked + span.card{border-color:var(--gold);box-shadow:0 0 0 3px rgba(217,164,65,.18)}
.chk-row{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:12px;background:var(--panel2);border:1px solid var(--line);cursor:pointer}
.chk-row input{width:18px;height:18px;margin-top:2px;accent-color:var(--gold)}
.chk-row b{font-size:.92rem}
.chk-row em{display:block;font-style:normal;font-size:.76rem;color:var(--muted)}
.chk-row.disabled{opacity:.45;pointer-events:none}
.diff-row{display:flex;gap:8px}
.diff-row .opt-card{flex:1}
.diff-row span.card{align-items:center;text-align:center}

/* ---------- tarjeta de menú y logotipo ---------- */
.home-card{
  width:min(560px,100%);background:var(--panel);border:1px solid var(--line);
  border-radius:22px;padding:26px 24px 20px;box-shadow:0 16px 50px var(--shadow);
  display:flex;flex-direction:column;gap:16px;
}
.logo{
  text-align:center;font-family:Georgia,"Times New Roman",serif;letter-spacing:.14em;
  font-size:clamp(1.9rem,7vw,2.7rem);color:var(--gold);text-shadow:0 2px 8px rgba(0,0,0,.35);
}
.logo small{display:block;font-family:"Segoe UI",sans-serif;font-size:.85rem;letter-spacing:.28em;color:var(--muted);margin-top:2px}
.logo-dice{text-align:center;font-size:1.5rem;letter-spacing:.35em;color:var(--text);opacity:.85;margin-top:-6px}
.home-actions{display:flex;flex-direction:column;gap:10px}
.home-actions .row{display:flex;gap:10px}
.home-actions .row .btn{flex:1}
.home-foot{display:flex;justify-content:center;gap:12px;margin-top:2px}
/* Navegación "volver" homogénea en todos los juegos (flecha ← arriba a la izquierda) */
.home-top{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.home-link{background:none;border:none;color:var(--muted);font-size:.85rem;text-decoration:none;display:inline-flex;align-items:center;gap:.35em;cursor:pointer}
.home-link:hover{color:var(--gold)}

/* ---------- modales ---------- */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(8,12,10,.6);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;z-index:100;padding:16px;
}
.modal-backdrop.show{display:flex}
.modal{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;
  width:min(540px,100%);max-height:88dvh;overflow-y:auto;padding:22px 22px 18px;
  box-shadow:0 24px 70px rgba(0,0,0,.5);animation:pop .22s ease-out;
}
@keyframes pop{from{transform:scale(.92) translateY(14px);opacity:0}to{transform:none;opacity:1}}
.modal h2{font-family:Georgia,serif;color:var(--gold);margin-bottom:10px;font-size:1.35rem}
.modal h3{font-size:1rem;margin:14px 0 6px;color:var(--text)}
.modal p{line-height:1.5;margin:6px 0;font-size:.93rem}
.modal ul{margin:6px 0 6px 20px;font-size:.9rem;line-height:1.55}
.modal .muted{color:var(--muted);font-size:.83rem}
.modal-btns{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.help-table{width:100%;border-collapse:collapse;font-size:.87rem;margin:8px 0}
.help-table td{padding:4px 6px;border-bottom:1px solid var(--line)}
.help-table td:last-child{text-align:right;font-weight:700;white-space:nowrap}

/* resultado de partida */
.modal.result{text-align:center}
.res-icon{font-size:3.2rem;margin-bottom:4px}
#res-title{font-size:1.8rem;margin-bottom:4px}
#res-sub{color:var(--muted)}
.res-scores{display:flex;gap:12px;justify-content:center;margin:16px 0}
.res-scores>div{
  flex:1;max-width:170px;background:var(--panel2);border:1px solid var(--line);
  border-radius:14px;padding:10px;
}
.res-scores span{display:block;font-size:.8rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res-scores b{font-size:1.7rem}
.res-scores>div.winner{border-color:var(--gold);box-shadow:0 0 14px rgba(217,164,65,.3)}
.res-record{min-height:1.3em;font-weight:700}
.res-record.hit{color:var(--gold);animation:recordShine 1.2s ease-in-out infinite}
@keyframes recordShine{0%,100%{text-shadow:0 0 4px rgba(217,164,65,.2)}50%{text-shadow:0 0 16px rgba(217,164,65,.9)}}
.modal.result .modal-btns{justify-content:center}

/* tutorial */
#tut-step{min-height:120px}
#tut-dots{display:flex;gap:6px;justify-content:center;margin:10px 0}
#tut-dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}
#tut-dots i.on{background:var(--gold)}

/* ---------- RÉCORDS ---------- */
#sc-records{padding:20px 14px;align-items:center}
.rec-card{
  width:min(640px,100%);background:var(--panel);border:1px solid var(--line);
  border-radius:20px;padding:20px;box-shadow:0 14px 44px var(--shadow);
  display:flex;flex-direction:column;gap:14px;
}
.rec-head{display:flex;align-items:center;gap:10px}
.rec-head h2{flex:1;font-family:Georgia,serif;color:var(--gold)}
#rec-tabs,.rec-tabs{display:flex;gap:8px;flex-wrap:wrap}
#rec-tabs .btn,.rec-tabs .btn{flex:1;padding:.45em .6em;font-size:.88rem}
#rec-tabs .btn.on,.rec-tabs .btn.on{background:linear-gradient(160deg,var(--gold2),var(--gold));color:#2a1f08;border-color:#b58a33}
.rec-table{width:100%;border-collapse:collapse;font-size:.88rem}
.rec-table th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:left;padding:6px}
.rec-table td{padding:7px 6px;border-top:1px solid var(--line)}
.rec-table td.score{font-weight:800;color:var(--gold)}
.rec-table tr.hit td{animation:rowGlow 1.4s ease-in-out infinite;background:rgba(217,164,65,.1)}
@keyframes rowGlow{0%,100%{box-shadow:none}50%{box-shadow:inset 0 0 18px rgba(217,164,65,.35)}}
.rec-empty{text-align:center;color:var(--muted);padding:24px 0}
.rec-foot{display:flex;justify-content:space-between;gap:10px}

/* confeti */
#confetti{position:fixed;inset:0;pointer-events:none;z-index:300}

/* ============================================================
   HUB — pantalla principal con las tarjetas de cada juego
   ============================================================ */
#sc-hub{align-items:center;justify-content:flex-start;padding:26px 14px 40px}
.hub-wrap{width:min(860px,100%);display:flex;flex-direction:column;gap:20px}
.hub-head{text-align:center;display:flex;flex-direction:column;gap:10px}
.hub-name{width:min(360px,100%);margin:0 auto}
.hub-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.hub-grid{grid-template-columns:repeat(2,1fr)}}
.game-card{
  position:relative;display:flex;flex-direction:column;gap:6px;text-align:left;
  padding:18px 18px 16px;border-radius:18px;background:var(--panel);
  border:1px solid var(--line);box-shadow:0 10px 30px var(--shadow);
  transition:transform .15s,box-shadow .2s,border-color .2s;text-decoration:none;color:var(--text);
  overflow:hidden;
}
.game-card::before{
  content:"";position:absolute;inset:0 auto 0 0;width:5px;
  background:linear-gradient(var(--gold2),var(--gold));opacity:.9;
}
.game-card.ready{cursor:pointer}
.game-card.ready:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 16px 40px var(--shadow)}
.game-card.ready:active{transform:translateY(-1px) scale(.995)}
.game-card .gc-icon{font-size:2.1rem;line-height:1}
.game-card .gc-title{font-family:Georgia,serif;font-size:1.35rem;color:var(--gold)}
.game-card .gc-desc{font-size:.86rem;color:var(--muted);line-height:1.35}
.game-card.soon{opacity:.62}
.game-card.soon::before{background:linear-gradient(var(--line),var(--muted));opacity:.6}
.game-card .gc-badge{
  position:absolute;top:12px;right:12px;font-size:.66rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;padding:3px 9px;border-radius:999px;
  background:var(--panel2);border:1px solid var(--line);color:var(--muted);
}
.game-card.ready .gc-badge{color:var(--gold);border-color:var(--gold)}