:root{
  --bg:#03060A;
  --bg2:#0a1424;
  --grid:rgba(74,163,255,.10);
  --ink:#e8f0ff;
  --dim:#7f93b3;
  --cy:#39d7ff;      /* multicapa / acento frio */
  --mag:#ff5cc8;     /* multicapa avanzada */
  --am:#ffb443;      /* bonus / calor */
  --good:#4dff9e;    /* letra acertada */
  --bad:#ff5566;     /* error */
  --line:rgba(120,160,220,.18);
  --font:'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  background:radial-gradient(120% 90% at 50% -10%, var(--bg2), var(--bg) 60%);
  color:var(--ink);
  font-family:var(--font);
  overflow:hidden;
  -webkit-user-select:none; user-select:none;
  touch-action:none;
}

#app{ position:fixed; inset:0; }
#game{ position:absolute; inset:0; width:100%; height:100%; display:block; }

.hidden{ display:none !important; }

/* ---------- HUD ---------- */
.hud{
  position:absolute; top:0; left:0; right:0;
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  padding:10px 12px;
  background:linear-gradient(180deg, rgba(3,6,10,.75), transparent);
  z-index:5; pointer-events:none;
}
.hud .cell{
  display:flex; flex-direction:column; align-items:center;
  min-width:74px; padding:4px 10px;
  border:1px solid var(--line); border-radius:10px;
  background:rgba(10,20,36,.5); backdrop-filter:blur(4px);
}
.hud .k{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.hud .v{ font-size:20px; font-weight:800; line-height:1.1; }
.hud .v.cy{ color:var(--cy); }

/* ---------- Boton silenciar ---------- */
.mute{
  position:fixed; top:64px; right:10px; z-index:11;
  width:40px; height:40px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; line-height:1; color:var(--cy);
  background:rgba(10,20,36,.6); border:1px solid var(--line);
  cursor:pointer; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.mute.off{ color:var(--dim); border-color:rgba(120,160,220,.12); }

/* ---------- Banner bonus ---------- */
.banner{
  position:absolute; top:64px; left:50%; transform:translateX(-50%);
  padding:8px 18px; z-index:6;
  font-weight:800; letter-spacing:.18em; color:#04121a;
  background:linear-gradient(90deg,var(--am),#ff7a3c);
  border-radius:999px;
  box-shadow:0 0 30px rgba(255,180,67,.6);
  animation:pulse 1s ease-in-out infinite;
}
@keyframes pulse{ 50%{ transform:translateX(-50%) scale(1.05); } }

/* ---------- Pantallas ---------- */
.screen{
  position:absolute; inset:0; z-index:10;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; text-align:center; padding:24px;
  background:radial-gradient(120% 90% at 50% 0%, rgba(10,20,36,.6), rgba(3,6,10,.86));
  backdrop-filter:blur(3px);
}
.eyebrow{ font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--cy); }
.logo{
  font-size:clamp(44px,12vw,110px); font-weight:800; letter-spacing:.06em;
  background:linear-gradient(180deg,#fff,var(--cy));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 40px rgba(57,215,255,.35);
}
.sub{ max-width:640px; color:#c7d5ee; font-size:15px; line-height:1.7; }
.sub b.cy{ color:var(--cy); } .sub b.am{ color:var(--am); }
.tiny{ font-size:12px; color:var(--dim); }

.btn{
  font-family:var(--font); font-weight:700; letter-spacing:.08em;
  color:#04121a; background:linear-gradient(180deg,#fff,#bfe9ff);
  border:0; border-radius:12px; padding:12px 22px; cursor:pointer;
  box-shadow:0 6px 24px rgba(57,215,255,.28);
  transition:transform .08s ease, box-shadow .2s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(1px); }
.btn.big{ font-size:20px; padding:14px 40px; }

/* ---------- Game over ---------- */
.over-title{ font-size:clamp(28px,7vw,52px); font-weight:800; color:var(--bad);
  text-shadow:0 0 30px rgba(255,85,102,.4); letter-spacing:.04em; }
.over-score{ font-size:18px; color:#dbe6ff; }

.board{
  list-style:none; width:min(420px,92vw);
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background:rgba(10,20,36,.5);
}
.board li{
  display:flex; align-items:center; gap:10px;
  padding:7px 14px; font-size:14px;
  border-top:1px solid rgba(120,160,220,.08);
}
.board li:first-child{ border-top:0; }
.board li .rank{ width:26px; color:var(--dim); }
.board li .nm{ flex:1; letter-spacing:.06em; }
.board li .sc{ font-weight:700; color:var(--cy); }
.board li.me{ background:rgba(57,215,255,.10); }
.board li.me .nm{ color:#fff; }

/* ---------- Arcade name entry ---------- */
.name-entry{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.name-btns{ display:flex; gap:10px; }
.btn.ghost{ background:transparent; color:var(--cy); border:1px solid var(--line); box-shadow:none; }
.arcade{ display:flex; gap:10px; }
.arcade .slot{
  position:relative;
  width:46px; height:64px; display:flex; align-items:center; justify-content:center;
  font-size:38px; font-weight:800;
  border:2px solid var(--line); border-radius:10px;
  background:rgba(10,20,36,.6); color:var(--ink);
}
.arcade .slot.active{
  border-color:var(--cy); color:var(--cy);
  box-shadow:0 0 24px rgba(57,215,255,.4);
  animation:blink 1s steps(1) infinite;
}
.arcade .slot .arrow{
  position:absolute; left:0; right:0; text-align:center; color:var(--cy);
  font-size:14px; opacity:.7;
}
.arcade .slot .arrow.up{ top:-16px; } .arcade .slot .arrow.dn{ bottom:-16px; }
@keyframes blink{ 50%{ opacity:.45; } }
.arcade-help{ margin-top:8px; }

@media (max-width:520px){
  .hud .cell{ min-width:60px; padding:3px 7px; }
  .hud .v{ font-size:17px; }
  .arcade .slot{ width:38px; height:54px; font-size:30px; }
}

/* ---------- Teclado integrado estilo ZType (tactil) ---------- */
/* Teclas de ancho FIJO y filas CENTRADAS -> escalonado real: la fila Z-M
   queda centrada (la M alcanzable), no estirada al borde. Pegado abajo. */
#keyboard{
  position:fixed; left:0; right:0; bottom:0; z-index:7;
  display:none; flex-direction:column; gap:2px;
  padding:11px 4px calc(5vh + env(safe-area-inset-bottom, 0px));  /* un poco mas arriba */
  background:transparent;      /* el grid se ve a traves */
  border-top:1px solid rgba(57,215,255,.28);
  box-shadow:0 -1px 24px rgba(57,215,255,.12);
  pointer-events:none;         /* los huecos no capturan toques */
}
body.has-kbd #keyboard.show{ display:flex; }
.krow{ display:flex; justify-content:center; align-items:stretch; gap:1.3vw; }
.krow.sep{ opacity:.3; gap:1.3vw; }
.krow.sep span{ flex:0 0 auto; width:8.8vw; max-width:48px; text-align:center; color:var(--cy); font-size:11px; }
.key{
  flex:0 0 auto; width:8.8vw; max-width:48px; min-height:7vh;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font); font-weight:700; font-size:clamp(20px, 6.2vw, 30px); text-transform:uppercase;
  color:var(--cy); background:transparent; border:0;
  text-shadow:0 0 10px rgba(57,215,255,.45);
  -webkit-user-select:none; user-select:none; touch-action:manipulation;
  transition:color .06s, text-shadow .06s, transform .06s;
  pointer-events:auto;         /* solo las teclas capturan toques */
}
.key:active, .key.on{
  color:#ffffff; text-shadow:0 0 18px rgba(57,215,255,.95); transform:scale(1.18);
}
.arcade .slot .arrow{ cursor:pointer; padding:6px 10px; }