* { margin: 0; padding: 0; box-sizing: border-box; }
/* REGLA MAESTRA: .hidden gana SIEMPRE, sin importar el orden ni la especificidad.
   Sin esto, .reg-paso{display:flex} le ganaba al display:none y se veían
   todos los pasos del registro apilados a la vez. */
.hidden { display: none !important; }
:root { --cyan:#00f0ff; --magenta:#ff2bd6; --violet:#8b5cff; --amber:#ffb020; --bg:#05060d; }
html, body { width:100%; height:100%; background:var(--bg); overflow:hidden;
  font-family:'Segoe UI','Helvetica Neue',system-ui,sans-serif; color:#e8f6ff; user-select:none;
  -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; }
#game-wrap { position:relative; width:100vw; height:100vh; height:100dvh; overflow:hidden;
  background:radial-gradient(ellipse at 50% 40%, #0b1030 0%, #05060d 70%); }
#game { position:absolute; inset:0; width:100%; height:100%; display:block; cursor:crosshair; }
#hud { position:absolute; inset:0; pointer-events:none; display:flex; justify-content:space-between;
  align-items:flex-start; padding:22px 28px; font-variant-numeric:tabular-nums; z-index:10; }
.hud-left, .hud-right { display:flex; flex-direction:column; gap:12px; }
.hud-right { align-items:flex-end; }
.hud-center { flex:1; display:flex; justify-content:center; }
.stat { display:flex; flex-direction:column; gap:4px; }
.hud-right .stat { align-items:flex-end; }
.lbl { font-size:10px; letter-spacing:3px; color:#5f7f9f; font-weight:600; }
.val.bando { font-size:16px; letter-spacing:2px; text-shadow:0 0 12px currentColor; }
.val { font-size:30px; font-weight:800; letter-spacing:1px; color:var(--cyan); line-height:1;
  text-shadow:0 0 12px rgba(0,240,255,.8), 0 0 30px rgba(0,240,255,.35); }
.bar { width:150px; height:8px; background:rgba(255,255,255,.07); border-radius:4px;
  overflow:hidden; border:1px solid rgba(255,255,255,.1); }
.bar-fill { height:100%; width:100%; border-radius:4px; transition:width .12s linear; }
.bar-fill.shield { background:linear-gradient(90deg,#00f0ff,#4d7cff); box-shadow:0 0 12px rgba(0,240,255,.9); }
.bar-fill.od { background:linear-gradient(90deg,#ff2bd6,#ffb020); box-shadow:0 0 12px rgba(255,43,214,.9); width:0%; }
.combo { font-size:46px; font-weight:900; color:var(--amber); letter-spacing:2px; transition:transform .1s ease-out;
  text-shadow:0 0 20px rgba(255,176,32,.9), 0 0 50px rgba(255,176,32,.4); }
.combo.hidden { opacity:0; display:none !important; }
.combo.pop { transform:scale(1.35); }
.overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at center, rgba(5,6,13,.55), rgba(5,6,13,.92));
  backdrop-filter:blur(3px); z-index:20; transition:opacity .35s ease;
  overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  padding:calc(16px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right))
          calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); }
.overlay.hidden { opacity:0; pointer-events:none; display:none !important; }
.panel { text-align:center; padding:44px 56px; border:1px solid rgba(0,240,255,.25); border-radius:18px;
  background:linear-gradient(160deg, rgba(11,16,48,.85), rgba(5,6,13,.9)); max-width:560px;
  width:100%; margin:auto; flex:0 0 auto;
  box-shadow:0 0 60px rgba(0,240,255,.12), inset 0 0 60px rgba(0,240,255,.04);
  animation:panelIn .5s cubic-bezier(.2,.9,.3,1.2); }
@keyframes panelIn { from { transform:translateY(24px) scale(.96); opacity:0; } to { transform:none; opacity:1; } }
.title { font-size:54px; font-weight:900; letter-spacing:6px; line-height:.95; color:#fff;
  text-shadow:0 0 24px rgba(0,240,255,.9), 0 0 70px rgba(0,240,255,.4); }
.title span { display:block; color:var(--magenta);
  text-shadow:0 0 24px rgba(255,43,214,.9), 0 0 70px rgba(255,43,214,.4); }
.title.dead { color:#ff4d6d; text-shadow:0 0 24px rgba(255,77,109,.9); }
.title.dead span { color:#ff2bd6; }
.subtitle { margin:18px 0 26px; font-size:14px; color:#8fb4d0; letter-spacing:.5px; line-height:1.5; }
/* ===== CONTROLES =====
   Tabla real de 3 columnas con anchos FIJOS en px.
   Las tres filas comparten la MISMA grilla, así que las teclas de la
   izquierda arrancan todas en el mismo punto, la acción queda centrada
   en la misma vertical y las teclas de la derecha terminan alineadas. */
.controls {
  display:grid;
  /* Las 3 filas son celdas de la MISMA grilla: cada columna mide lo que el
     contenido más ancho de las tres, así quedan alineadas solas y nada se parte.
     Laterales iguales (1fr) para que la acción del medio caiga justo al centro. */
  grid-template-columns: minmax(max-content,1fr) max-content minmax(max-content,1fr);
  align-items:center;
  column-gap:18px;
  row-gap:10px;
  margin:0 auto 28px;
  font-size:13px;
  color:#9fc0d8;
  width:100%;
  max-width:520px;
  box-sizing:border-box;
}

/* Cada fila es su PROPIA grilla, pero con las MISMAS columnas fijas
   (150px | 1fr | 150px). Al no depender del contenido, las tres filas
   quedan alineadas al píxel entre sí. */

/* Las columnas laterales tienen ancho FIJO y no se estiran con el contenido:
   así las tres filas arrancan y terminan en el mismo píxel. */

.controls .lado { display:flex; align-items:center; gap:6px; min-height:30px; flex-wrap:nowrap; }
.controls .lado.izq { justify-content:flex-end; }
.controls .lado.der { justify-content:flex-start; }
.controls .lado kbd { flex:0 0 auto; }
.controls .accion { text-align:center; white-space:nowrap; color:#cfe6f5; font-size:12px;
  letter-spacing:1.5px; text-transform:uppercase; font-weight:700;
  min-width:0; overflow:hidden; text-overflow:ellipsis; }
kbd { display:inline-block; white-space:nowrap; padding:3px 9px; font-family:inherit; font-size:11px; font-weight:700;
  letter-spacing:1px; color:var(--cyan); background:rgba(0,240,255,.08);
  border:1px solid rgba(0,240,255,.35); border-radius:5px; box-shadow:0 0 10px rgba(0,240,255,.15); }
button { font-family:inherit; font-size:16px; font-weight:800; letter-spacing:3px; padding:16px 44px;
  color:#05060d; background:linear-gradient(90deg, var(--cyan), #4d7cff); border:none; border-radius:10px;
  cursor:pointer; box-shadow:0 0 30px rgba(0,240,255,.5); transition:transform .12s ease, box-shadow .12s ease; }
button:hover { transform:translateY(-2px) scale(1.03); box-shadow:0 0 50px rgba(0,240,255,.85); }
button:active { transform:scale(.98); }
.hint { margin-top:20px; font-size:11px; color:#4f6f8f; letter-spacing:.5px; }
.final-stats { display:flex; justify-content:center; gap:40px; margin:28px 0 34px; }
.final-stats div { display:flex; flex-direction:column; gap:6px; }
.final-stats span { font-size:10px; letter-spacing:2px; color:#5f7f9f; }
.final-stats strong { font-size:34px; font-weight:900; color:var(--cyan); text-shadow:0 0 16px rgba(0,240,255,.7); }
.fps { position:absolute; bottom:10px; right:14px; font-size:10px; letter-spacing:1px; color:#2f4a63;
  z-index:10; pointer-events:none; font-variant-numeric:tabular-nums; }
#game-wrap::after { content:''; position:absolute; inset:0; pointer-events:none; z-index:15;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.13) 0px, rgba(0,0,0,.13) 1px, transparent 1px, transparent 3px);
  mix-blend-mode:multiply; opacity:.5; }

/* ===== PANTALLA 1: REGISTRO ===== */
.reg-form { display:flex; flex-direction:column; gap:14px; align-items:center; margin-bottom:8px; }

.reg-sep { display:flex; align-items:center; gap:12px; width:100%; max-width:320px; margin:20px auto 14px; }
.reg-sep::before, .reg-sep::after { content:''; flex:1; height:1px; background:linear-gradient(90deg, transparent, rgba(0,229,255,.35), transparent); }
.reg-sep span { font-size:10px; letter-spacing:2px; color:#4f6f8f; white-space:nowrap; }

.btn-alt { background:transparent !important; border:1px solid rgba(0,229,255,.45) !important; color:#00e5ff !important; box-shadow:none !important; }
.btn-alt:hover { background:rgba(0,229,255,.1) !important; box-shadow:0 0 24px rgba(0,229,255,.3) !important; }

/* --- PASO 1: elegir camino --- */
.reg-paso { display:flex; flex-direction:column; gap:14px; width:100%; max-width:340px; margin:0 auto; }
.btn-camino {
  display:flex; flex-direction:column; gap:5px; align-items:center;
  padding:20px 18px; cursor:pointer; font-family:inherit;
  background:rgba(0,229,255,.04); border:1px solid rgba(0,229,255,.28);
  border-radius:12px; transition:all .22s ease;
}
.btn-camino:hover, .btn-camino:active {
  background:rgba(0,229,255,.12); border-color:rgba(0,229,255,.75);
  box-shadow:0 0 28px rgba(0,229,255,.28); transform:translateY(-2px);
}
.camino-t { font-size:15px; font-weight:700; letter-spacing:2.5px; color:#eaf6ff; }
.camino-s { font-size:11px; letter-spacing:.6px; color:#5f7f9f; }
.btn-camino:hover .camino-s { color:#8fb8d8; }

.btn-volver {
  margin-top:18px; padding:8px 16px; cursor:pointer; font-family:inherit;
  background:transparent; border:none; color:#4f6f8f;
  font-size:11px; letter-spacing:1.5px; transition:color .2s;
}
.btn-volver:hover { color:#00e5ff; }

/* (sistema viejo de planetas eliminado — ahora se usa .planeta/.orb) */

.btn-copiar { margin-top:4px; padding:8px 22px; font-size:11px; letter-spacing:2px; font-weight:700;
  background:rgba(0,229,255,.12); border:1px solid rgba(0,229,255,.5); color:#00e5ff;
  border-radius:8px; cursor:pointer; transition:all .18s; font-family:inherit; }
.btn-copiar:hover { background:rgba(0,229,255,.25); box-shadow:0 0 20px rgba(0,229,255,.4); }
.btn-copiar.ok { background:rgba(0,255,150,.2); border-color:rgba(0,255,150,.6); color:#00ff96; }
#reg-nombre, #reg-nombre-entrar { width:280px; padding:15px 20px; font-family:inherit; font-size:15px; font-weight:700;
  letter-spacing:3px; text-align:center; color:var(--cyan); background:rgba(0,240,255,.05);
  border:1px solid rgba(0,240,255,.35); border-radius:10px; outline:none; text-transform:uppercase;
  transition:border-color .2s, box-shadow .2s; }
#reg-nombre::placeholder, #reg-nombre-entrar::placeholder { color:#3f5f7f; letter-spacing:2px; }
#reg-nombre:focus, #reg-nombre-entrar:focus { border-color:var(--cyan); box-shadow:0 0 24px rgba(0,240,255,.45); }

/* Campo para ingresar un código existente — mismo lenguaje visual, en magenta */
#reg-codigo-input { width:280px; padding:15px 20px; font-family:inherit; font-size:15px; font-weight:700;
  letter-spacing:3px; text-align:center; color:var(--magenta); background:rgba(255,43,214,.06);
  border:1px solid rgba(255,43,214,.4); border-radius:10px; outline:none; text-transform:uppercase;
  font-variant-numeric:tabular-nums; transition:border-color .2s, box-shadow .2s, background .2s;
  box-shadow:inset 0 0 20px rgba(255,43,214,.08); }
#reg-codigo-input::placeholder { color:#7f4f7f; letter-spacing:1.5px; font-size:12px; font-weight:600; }
#reg-codigo-input:focus { border-color:var(--magenta); background:rgba(255,43,214,.1);
  box-shadow:0 0 26px rgba(255,43,214,.5), inset 0 0 24px rgba(255,43,214,.12); }
#reg-codigo-input:hover:not(:focus) { border-color:rgba(255,43,214,.65); }
.codigo-box { display:flex; flex-direction:column; gap:8px; align-items:center; margin:22px 0 6px;
  padding:20px 32px; border:1px dashed rgba(255,43,214,.5); border-radius:12px;
  background:rgba(255,43,214,.05); animation:panelIn .4s ease; }
.codigo-lbl { font-size:10px; letter-spacing:3px; color:#8f6f9f; font-weight:600; }
#reg-codigo { font-size:30px; font-weight:900; letter-spacing:6px; color:var(--magenta);
  text-shadow:0 0 20px rgba(255,43,214,.9), 0 0 50px rgba(255,43,214,.4); font-variant-numeric:tabular-nums; }
.codigo-hint { font-size:10px; color:#6f5f7f; letter-spacing:.5px; }
#reg-continuar { margin-top:18px; }

/* ===== PANTALLA 2: PLANETAS / BANDOS ===== */
.panel-wide { max-width:900px; }
.planetas { display:flex; justify-content:center; gap:22px; flex-wrap:wrap; margin:10px 0 26px; }
.planeta { position:relative; width:132px; display:flex; flex-direction:column; align-items:center;
  gap:10px; padding:16px 10px 14px; border:1px solid rgba(255,255,255,.1); border-radius:16px;
  background:rgba(255,255,255,.02); cursor:pointer; transition:all .22s cubic-bezier(.2,.9,.3,1.2); }
.planeta:hover { transform:translateY(-6px); border-color:rgba(0,240,255,.5);
  background:rgba(0,240,255,.05); box-shadow:0 12px 40px rgba(0,240,255,.2); }
.planeta.sel { border-color:var(--cyan); background:rgba(0,240,255,.1);
  box-shadow:0 0 40px rgba(0,240,255,.45), inset 0 0 30px rgba(0,240,255,.1); transform:translateY(-6px); }
.planeta .orb { width:74px; height:74px; position:relative;
  animation:orbFloat 4s ease-in-out infinite; }
.planeta .orb .cuerpo { position:absolute; inset:0; border-radius:50%; overflow:hidden;
  box-shadow:inset -10px -10px 24px rgba(0,0,0,.75), inset 6px 6px 16px rgba(255,255,255,.12); }
.planeta .orb .detalle { position:absolute; inset:0; border-radius:50%; overflow:hidden; }

/* VENUS — nubes densas amarillo-crema, remolinos */
.orb-venus .cuerpo { background:
  radial-gradient(circle at 30% 26%, #fff3c4 0%, #f5d98a 28%, #d9a94e 62%, #8a5c1e 100%); }
.orb-venus .detalle { background:
  repeating-linear-gradient(102deg, rgba(255,255,255,.22) 0 5px, rgba(180,120,40,.18) 5px 13px, transparent 13px 22px);
  filter:blur(1.2px); opacity:.85; }

/* MARTE — rocoso, óxido, casquete polar */
.orb-marte .cuerpo { background:
  radial-gradient(circle at 32% 28%, #ff9a6b 0%, #d4552b 34%, #9c3418 68%, #4a1508 100%); }
.orb-marte .detalle { background:
  radial-gradient(circle at 62% 68%, rgba(80,25,10,.55) 0 12%, transparent 13%),
  radial-gradient(circle at 38% 52%, rgba(60,18,8,.5) 0 8%, transparent 9%),
  radial-gradient(circle at 50% 8%, rgba(255,255,255,.75) 0 14%, transparent 15%);
  filter:blur(.6px); }

/* JÚPITER — bandas horizontales + gran mancha roja */
.orb-jupiter .cuerpo { background:
  radial-gradient(circle at 30% 26%, #ffe9cf 0%, #e8b98a 30%, #b57b4a 66%, #5c3418 100%); }
.orb-jupiter .detalle { background:
  repeating-linear-gradient(178deg,
    rgba(255,240,220,.42) 0 6px,
    rgba(150,90,50,.42) 6px 11px,
    rgba(255,225,195,.3) 11px 16px,
    rgba(110,60,30,.45) 16px 22px);
  filter:blur(.8px); }
.orb-jupiter .detalle::after { content:''; position:absolute; left:52%; top:58%;
  width:26%; height:16%; border-radius:50%;
  background:radial-gradient(ellipse, #d94a2b 0%, #a02a14 70%, transparent 100%);
  filter:blur(.5px); }

/* SATURNO — pálido dorado + anillo inclinado */
.orb-saturno .cuerpo { background:
  radial-gradient(circle at 32% 28%, #fff8e0 0%, #ecd9a0 32%, #c4a866 66%, #6b5326 100%); }
.orb-saturno .detalle { background:
  repeating-linear-gradient(176deg, rgba(255,250,225,.35) 0 7px, rgba(170,140,80,.3) 7px 14px);
  filter:blur(1px); }
.orb-saturno .anillo { position:absolute; left:50%; top:50%;
  width:132px; height:132px; margin:-66px 0 0 -66px; border-radius:50%;
  border:7px solid rgba(240,225,175,.75);
  border-top-color:rgba(240,225,175,.15); border-bottom-color:rgba(240,225,175,.15);
  transform:rotate(-22deg) scaleY(.34);
  box-shadow:0 0 14px rgba(240,220,160,.5), inset 0 0 10px rgba(240,220,160,.35);
  pointer-events:none; }

/* NEPTUNO — azul profundo con vetas claras */
.orb-neptuno .cuerpo { background:
  radial-gradient(circle at 30% 26%, #a8d4ff 0%, #3f7fd4 32%, #1e4a9c 68%, #08183d 100%); }
.orb-neptuno .detalle { background:
  repeating-linear-gradient(172deg, rgba(180,220,255,.22) 0 6px, rgba(20,60,140,.28) 6px 13px);
  filter:blur(1.1px); }
.planeta:nth-child(2) .orb { animation-delay:-.8s; }
.planeta:nth-child(3) .orb { animation-delay:-1.6s; }
.planeta:nth-child(4) .orb { animation-delay:-2.4s; }
.planeta:nth-child(5) .orb { animation-delay:-3.2s; }
@keyframes orbFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
.planeta .orb::after { content:''; position:absolute; inset:-14px; border-radius:50%;
  background:radial-gradient(circle, var(--glow) 0%, transparent 68%); opacity:.55; z-index:-1; }
.planeta .p-nombre { font-size:12px; font-weight:800; letter-spacing:2px; color:#e8f6ff; }
.planeta .p-bonus { font-size:9px; letter-spacing:.5px; color:#7f9fbf; line-height:1.4; text-align:center; }
.planeta.sel .p-nombre { color:var(--cyan); text-shadow:0 0 14px rgba(0,240,255,.8); }
#bando-continuar { margin-top:4px; }

/* ===== RESPONSIVE: TABLET (721px – 1100px) ===== */
@media (max-width: 1100px) {
  .panel { padding:36px 34px; max-width:min(92vw, 760px); }
  .panel-wide { max-width:min(94vw, 860px); }
  .title { font-size:44px; letter-spacing:4px; }
  .planetas { gap:16px; }
  .planeta { width:calc(20% - 14px); min-width:104px; padding:14px 8px 12px; }
  .planeta .orb { width:64px; height:64px; }
  .planeta .orb .anillo, .orb-saturno .anillo { width:114px; height:114px; margin:-57px 0 0 -57px; }
  .planeta .p-nombre { font-size:11px; letter-spacing:1.5px; }
  .planeta .p-bonus { font-size:8.5px; }
}

/* ===== RESPONSIVE: MÓVIL (hasta 720px) ===== */
@media (max-width: 720px) {
  .overlay { align-items:flex-start; padding-top:calc(20px + env(safe-area-inset-top)); }
  .panel { padding:26px 18px; max-width:96vw; border-radius:14px; }
  .panel-wide { max-width:97vw; }
  .title { font-size:32px; letter-spacing:2.5px; }
  .subtitle { font-size:12px; margin:12px 0 18px; }
  .planetas { gap:10px; margin:6px 0 18px; }
  .planeta { width:calc(33.33% - 8px); min-width:0; padding:10px 4px 9px; gap:7px; border-radius:12px; }
  .planeta .orb { width:50px; height:50px; }
  .planeta .orb .anillo, .orb-saturno .anillo { width:90px; height:90px; margin:-45px 0 0 -45px; border-width:5px; }
  .planeta .p-nombre { font-size:9.5px; letter-spacing:1px; }
  .planeta .p-bonus { font-size:7.5px; }
  #reg-nombre, #reg-nombre-entrar { width:100%; max-width:280px; font-size:14px; padding:13px 16px; }
  #reg-codigo-input { width:100%; max-width:280px; font-size:14px; padding:13px 16px; letter-spacing:2px; }
  #reg-codigo { font-size:22px; letter-spacing:3px; }
  .codigo-box { padding:16px 18px; }
  button { font-size:13px; padding:13px 26px; letter-spacing:2px; width:100%; max-width:300px; }
  .controls { font-size:11px; row-gap:8px; margin-bottom:20px; max-width:100%; }
  /* En pantallas chicas las columnas pueden achicarse y el contenido acomodarse,
     así el bloque NUNCA se sale de la pantalla. */
  .controls { column-gap:8px; max-width:100%;
    grid-template-columns: minmax(0,1fr) max-content minmax(0,1fr); }
  .controls .lado { gap:4px; flex-wrap:wrap; }
  .controls .accion { font-size:10px; letter-spacing:1px; white-space:normal; }
  kbd { font-size:9px; padding:2px 6px; letter-spacing:.5px; }
  .final-stats strong { font-size:26px; }
  /* HUD compacto para que no se pisen los números */
  .stat-par { gap:10px; } .stat-bajas .val { font-size:15px !important; }
  #hud { padding:12px 14px; }
  .val { font-size:20px; }
  .lbl { font-size:8px; letter-spacing:2px; }
  .bar { width:84px; height:6px; }
  .combo { font-size:30px; }
}

/* ===== CELULARES ANGOSTOS ===== */
@media (max-width: 430px) {
  .controls { column-gap:6px; }
  .controls .lado { gap:3px; }
  kbd { font-size:8.5px; padding:2px 5px; letter-spacing:.3px; }
}

/* ===== PANTALLAS BAJAS / HORIZONTAL ===== */
@media (max-height: 560px) {
  .overlay { align-items:flex-start; }
  .panel { padding:18px 22px; }
  .title { font-size:26px; letter-spacing:2px; }
  .subtitle { margin:8px 0 12px; font-size:11px; }
  .planetas { margin:4px 0 12px; gap:8px; }
  .planeta { padding:8px 4px 7px; gap:5px; }
  .planeta .orb { width:42px; height:42px; }
  .planeta .orb .anillo, .orb-saturno .anillo { width:76px; height:76px; margin:-38px 0 0 -38px; border-width:4px; }
  .controls { margin-bottom:14px; row-gap:6px; }
  button { padding:11px 24px; font-size:12px; }
  .codigo-box { margin:12px 0 4px; padding:12px 18px; }
  #reg-codigo { font-size:20px; }
  #reg-codigo-input { padding:11px 14px; font-size:13px; }
}

/* ===== AVISO DE ROTAR (celular vertical) ===== */
/* El aviso de rotar lo controla app.js por JS: solo aparece en un celular REAL en vertical.
   En la preview de escritorio nunca debe tapar la pantalla. */
#rotar { display:none; }
#rotar.visible { display:flex; position:absolute; inset:0; z-index:60; align-items:center; justify-content:center;
    flex-direction:column; gap:18px; background:rgba(5,6,13,.97); text-align:center; padding:30px; }
@media (max-width:760px) and (orientation:portrait) {
  #rotar.visible { display:flex; }
  #rotar .icono { font-size:54px; animation:girar 1.8s ease-in-out infinite; }
  #rotar p { font-size:14px; letter-spacing:2px; color:#8fb4d0; line-height:1.7; }
  #rotar strong { color:var(--cyan); }
}
@keyframes girar { 0%,40% { transform:rotate(0deg); } 60%,100% { transform:rotate(90deg); } }

/* ===== TÁCTIL: sin hover pegado ===== */
@media (hover: none) {
  .planeta:hover { transform:none; border-color:rgba(255,255,255,.1);
    background:rgba(255,255,255,.02); box-shadow:none; }
  .planeta.sel:hover { border-color:var(--cyan); background:rgba(0,240,255,.1);
    box-shadow:0 0 40px rgba(0,240,255,.45), inset 0 0 30px rgba(0,240,255,.1); }
  .planeta { -webkit-tap-highlight-color:transparent; }
}

/* ============================================================
   RÉCORD, TARJETA COMPARTIBLE Y PIZARRA MUNDIAL
   ============================================================ */

/* --- Botones secundarios y filas --- */
.fila-botones {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 14px;
}

.btn-sec {
  background: rgba(0, 240, 255, .06);
  border: 1px solid rgba(0, 240, 255, .35);
  color: #9fe8ff;
  padding: 10px 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .18s ease;
  font-family: inherit;
}
.btn-sec:hover {
  background: rgba(0, 240, 255, .16);
  border-color: #00f0ff;
  color: #fff;
  box-shadow: 0 0 22px rgba(0, 240, 255, .4);
  transform: translateY(-1px);
}
.btn-sec:active { transform: translateY(0); }

/* --- Aviso de récord nuevo --- */
.record-nuevo {
  margin: 10px 0 4px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #00ff96;
  text-shadow: 0 0 18px rgba(0, 255, 150, .8);
  animation: pulsoRecord 1.1s ease-in-out infinite alternate;
}
@keyframes pulsoRecord {
  from { opacity: .65; transform: scale(.98); }
  to   { opacity: 1;   transform: scale(1.03); }
}

.puesto-mundial {
  margin: 2px 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #ffd166;
  text-shadow: 0 0 14px rgba(255, 209, 102, .6);
}

/* --- Tarjeta compartible --- */
.tarjeta-box {
  margin: 14px auto 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  animation: aparecerTarjeta .35s ease;
}
@keyframes aparecerTarjeta {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
#tarjeta-img {
  width: 100%;
  max-width: 260px;
  border-radius: 12px;
  border: 1px solid rgba(0, 240, 255, .4);
  box-shadow: 0 0 30px rgba(0, 240, 255, .3);
  display: block;
}
.tarjeta-botones {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

/* --- Pizarra mundial --- */
.pizarra-lista {
  max-height: 52vh;
  overflow-y: auto;
  margin: 6px 0 16px;
  padding-right: 4px;
  -webkit-overflow-scrolling: touch;
}
.pizarra-lista { scrollbar-width: none; }
.pizarra-lista::-webkit-scrollbar { display: none; } /* nunca barras de scroll */

.pz-tabla { display: flex; flex-direction: column; gap: 4px; }

.pz-fila {
  display: grid;
  grid-template-columns: 40px 1fr 78px 48px 58px 92px;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
  font-size: 13px;
  transition: all .15s ease;
}
.pz-fila:hover { background: rgba(0, 240, 255, .07); border-color: rgba(0, 240, 255, .25); }

.pz-head {
  background: transparent;
  border: none;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, .4);
  font-weight: 700;
  padding-bottom: 2px;
}
.pz-head:hover { background: transparent; border: none; }

.pz-yo {
  background: rgba(0, 255, 150, .1);
  border-color: rgba(0, 255, 150, .45);
  box-shadow: 0 0 18px rgba(0, 255, 150, .2);
}

.pz-pos { text-align: center; font-weight: 900; font-size: 14px; color: #ffd166; }
.pz-nom { font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-ban { font-size: 10px; font-weight: 800; letter-spacing: .5px; text-align: center; }
.pz-vic { text-align: center; font-weight: 900; color: #ffd166; font-variant-numeric: tabular-nums; }
.pz-ola { text-align: center; font-weight: 800; color: #b48cff; font-variant-numeric: tabular-nums; }
.pz-pts { text-align: right; font-weight: 900; color: #00f0ff; font-variant-numeric: tabular-nums; }

/* Colores por bando */
.ban-venus   { color: #ffd23f; }
.ban-marte   { color: #ff2e4d; }
.ban-jupiter { color: #ff8a1e; }
.ban-saturno { color: #b98cff; }
.ban-neptuno { color: #2f6bff; }

/* --- Guerra de planetas --- */
.pz-lider {
  margin: 14px 0 10px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 1.5px;
  font-weight: 800;
  color: rgba(255, 255, 255, .55);
}
.pz-lider strong { font-size: 15px; letter-spacing: 2px; }
.pz-bando-lider {
  border-color: rgba(255, 209, 102, .6) !important;
  background: rgba(255, 209, 102, .1) !important;
  box-shadow: 0 0 20px rgba(255, 209, 102, .25);
}
.pb-pos { font-size: 10px; font-weight: 900; color: rgba(255, 255, 255, .35); }
.pb-vic { font-size: 10px; font-weight: 800; color: #ffd166; letter-spacing: .5px; }
.pz-bandos-tit {
  margin: 18px 0 8px;
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 800;
  color: rgba(255, 255, 255, .45);
  text-align: center;
}
.pz-bandos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}
.pz-bando {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
}
.pb-nom { font-size: 11px; font-weight: 900; letter-spacing: 1px; }
.pb-pts { font-size: 16px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
.pb-pil { font-size: 9px; color: rgba(255, 255, 255, .4); letter-spacing: .5px; }

/* --- Estados de la pizarra --- */
.pz-cargando, .pz-vacio {
  text-align: center;
  padding: 40px 20px;
  color: rgba(255, 255, 255, .5);
  font-size: 13px;
}
.pz-vacio { display: flex; flex-direction: column; gap: 8px; }
.pz-vacio strong { color: #ff4d6d; font-size: 15px; letter-spacing: 1px; }
.pz-vacio span { font-size: 12px; line-height: 1.5; }

/* --- Móvil --- */
@media (max-width: 520px) {
  .pz-fila { grid-template-columns: 24px 1fr 52px 28px 40px 70px; font-size: 11px; padding: 8px 6px; gap: 4px; }
  .pz-pos { font-size: 12px; }
  .pz-ban { font-size: 9px; }
  .pz-pts { font-size: 11px; }
  .pz-vic, .pz-ola { font-size: 11px; }
  .pizarra-lista { max-height: 46vh; }
  #tarjeta-img { max-width: 200px; }
  .fila-botones { gap: 8px; }
  .btn-sec { padding: 9px 14px; font-size: 11px; }
}

/* ===== PANELES ALTOS =====
   Con align-items:center, un panel más alto que la pantalla se corta por arriba
   y no se puede subir. margin:auto lo centra si cabe y deja desplazarse si no.
   Sin barras de scroll visibles. */
.overlay > .panel { margin:auto; }
.overlay { scrollbar-width:none; }
.overlay::-webkit-scrollbar { display:none; }

/* la pizarra se abre también desde la pantalla final: va por encima */
#screen-pizarra { z-index:30; }

/* contador de FPS solo para depurar: oculto a los jugadores */
#fps { display:none !important; }

/* ===== CONTROLES: 2 columnas (acción | teclas) =====
   Todas las teclas tienen el mismo ancho y arrancan en la misma vertical,
   y todas las acciones terminan en la misma vertical: nada queda torcido. */
.controls { grid-template-columns: 1fr 1fr !important; column-gap:16px !important; row-gap:9px; max-width:420px; }
.controls .accion { text-align:right !important; white-space:nowrap; }
.controls .lado { justify-content:flex-start !important; gap:6px; flex-wrap:nowrap !important; }
.controls kbd { min-width:92px; text-align:center; box-sizing:border-box; }
@media (max-width: 900px), (max-height: 560px) {
  .controls kbd { min-width:78px; }
  .controls .accion { white-space:normal; }
}

/* celular: los cuatro chips del mismo ancho */
#ctrl-movil kbd { min-width:11.5em; }

/* ===== CELULAR DE LADO: todo cabe sin scroll =====
   Inicio y final en dos columnas: así entran en 360 px de alto. */
@media (orientation: landscape) and (max-height: 500px) {
  #overlay .panel, #gameover .panel {
    display:grid; align-items:center; column-gap:26px; row-gap:6px;
    padding:14px 22px; max-width:min(96vw, 860px); width:auto;
  }
  #overlay .panel { grid-template-columns:auto auto;
    grid-template-areas:"t c" "s c" "b c" "g c" "h c" "f f"; }
  #overlay .guerra-mini { grid-area:h; margin:2px 0 0; max-width:34ch; justify-self:center; }
  #overlay .title { grid-area:t; font-size:30px; }
  #overlay .subtitle { grid-area:s; margin:2px 0; max-width:30ch; justify-self:center; }
  #overlay .controls { grid-area:c; margin:0 !important; }
  #overlay #start-btn { grid-area:b; justify-self:center; margin:6px 0 0; }
  #overlay .hint { grid-area:h; margin:2px 0 0; font-size:10px; max-width:30ch; justify-self:center; }
  #overlay .fila-botones { grid-area:f; margin-top:6px; }

  #gameover .panel { grid-template-columns:auto auto;
    grid-template-areas:"t k" "e k" "d k" "r k" "p k" "b k" "g k" "f k"; }
  #gameover .title { grid-area:t; font-size:28px; }
  #gameover .final-stats { grid-area:e; margin:2px 0; }
  #gameover .final-stats strong { font-size:22px; }
  #gameover .record-nuevo { grid-area:r; margin:0; }
  #gameover .derribado-por { grid-area:d; margin:0; }
  #gameover .puesto-mundial { grid-area:p; margin:0; }
  #gameover #restart-btn { grid-area:b; justify-self:center; margin:6px 0 0; }
  #gameover .fila-botones { grid-area:f; margin-top:4px; max-width:min(46vw, 420px); justify-self:center; }
  #gameover .tarjeta-box { grid-area:k; margin:0; align-self:center; }
  #gameover .tarjeta-box img { max-height:calc(100vh - 92px); width:auto; max-width:34vw; }
  #gameover .tarjeta-botones { margin-top:6px; }
  .fila-botones .btn-sec, .tarjeta-botones .btn-sec { padding:8px 12px; font-size:10px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  #gameover .title { font-size:24px; }
  #gameover .final-stats strong { font-size:19px; }
  #gameover .final-stats span { font-size:9px; }
  #gameover .record-nuevo { font-size:11px; }
  #gameover .puesto-mundial { font-size:10px; }
  #gameover #restart-btn { padding:9px 26px; }
  #gameover .fila-botones, #gameover .tarjeta-botones { display:flex; flex-direction:row; flex-wrap:nowrap; gap:8px; justify-content:center; }
  #gameover .fila-botones { flex-wrap:wrap; } /* con 4 botones: dos renglones, sin empujar la tarjeta */
  #gameover .fila-botones .btn-sec, #gameover .tarjeta-botones .btn-sec { width:auto; flex:0 1 auto; white-space:nowrap; margin:0; }
  #gameover .tarjeta-box img { max-height:calc(100vh - 80px); }
}
@media (orientation: landscape) and (max-height: 500px) {
  .overlay { padding:calc(6px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left)); }
}
@media (orientation: landscape) and (max-height: 500px) {
  #gameover .tarjeta-box img { max-height:calc(100vh - 128px); }
  #gameover .panel { row-gap:3px; padding-top:10px; padding-bottom:10px; }
  #gameover .final-stats { margin:0; }
}
@media (orientation: landscape) and (max-height: 500px) {
  #screen-pizarra .title { font-size:24px; }
  .pz-fila { padding-top:5px !important; padding-bottom:5px !important; min-height:0 !important; }
}
.pz-tabla, #pizarra-lista { scrollbar-width:none; }
.pz-tabla::-webkit-scrollbar, #pizarra-lista::-webkit-scrollbar { display:none; }

/* ===== MODO DEMOSTRACIÓN (portada): solo la partida, sin menús ni marcadores ===== */
.nv-demo .overlay, .nv-demo #hud, .nv-demo #rotar, .nv-demo #fps { display:none !important; }
.nv-demo, .nv-demo body { cursor:default; }

/* pizarra: la lista larga se desliza dentro de .pizarra-lista, sin barra visible; cabecera fija */
.pizarra-lista { scrollbar-width:none; }
.pizarra-lista::-webkit-scrollbar { display:none; }
.pizarra-lista .pz-head { position:sticky; top:0; z-index:1; background:rgba(8,10,24,.96); }
.pz-mio { margin-top:6px; }

/* pizarra: tu puesto siempre a la vista y buscador por código */
.pz-tu { margin:-4px 0 10px; font-size:12px; letter-spacing:1.5px; color:#cfe6f5; min-height:1em; }
.pz-tu strong { color:var(--cyan); font-size:15px; }
.pz-busca { display:flex; gap:8px; justify-content:center; margin:0 auto 8px; max-width:420px; }
.pz-busca input { flex:1; min-width:0; padding:9px 12px; font:700 12px/1 inherit; letter-spacing:2px; text-transform:uppercase; color:#e8f6ff;
  background:rgba(0,240,255,.06); border:1px solid rgba(0,240,255,.3); border-radius:8px; outline:none; }
.pz-busca input:focus { border-color:var(--cyan); box-shadow:0 0 14px rgba(0,240,255,.25); }
.pz-busca .btn-sec { padding:8px 14px; font-size:11px; width:auto; }
.pz-resultado { margin:0 auto 8px; max-width:640px; }
.pz-resultado .pz-msg { display:block; font-size:12px; color:#9fb8cc; margin-bottom:6px; }
.pz-resultado .pz-msg strong { color:#fff; }
@media (orientation: landscape) and (max-height: 500px) { .pz-tu { margin:0 0 6px; } .pz-busca { margin-bottom:4px; } .pz-busca input { padding:7px 10px; } }

#reg-paso-codigo .reg-form { display:flex; flex-direction:column; align-items:center; gap:12px; }


/* ===== AVISO DE GIRAR: pequeño y opcional (antes tapaba toda la pantalla) ===== */
#rotar.visible { display:flex !important; position:absolute; inset:auto 10px auto 10px; top:calc(10px + env(safe-area-inset-top)); bottom:auto;
  z-index:60; flex-direction:row; align-items:center; gap:10px; padding:9px 12px; border-radius:12px; text-align:left;
  background:rgba(8,12,28,.92); border:1px solid rgba(0,240,255,.3); box-shadow:0 0 18px rgba(0,240,255,.15);
  font-size:12px; letter-spacing:.5px; color:#9fb8cc; pointer-events:auto; }
#rotar.visible .icono { font-size:18px; animation:none; }
#rotar.visible strong { color:var(--cyan); }
#rotar-cerrar { margin-left:auto; flex:0 0 auto; width:30px; height:30px; padding:0; border-radius:8px; font-size:14px; letter-spacing:0;
  background:rgba(255,255,255,.06); color:#cfe6f5; border:1px solid rgba(255,255,255,.15); box-shadow:none; }

/* ===== INICIO: más ancho y más bajo, con menos fondo, para que se vea el juego detrás ===== */
#overlay { background:radial-gradient(ellipse at center, rgba(5,6,13,.25), rgba(5,6,13,.6)); backdrop-filter:blur(1.5px); }
#overlay .panel { background:linear-gradient(160deg, rgba(11,16,48,.62), rgba(5,6,13,.58)); max-width:min(96vw, 1180px); }
@media (orientation: landscape) and (max-height: 500px) {
  #overlay .panel { width:min(96vw, 1180px); max-width:none; column-gap:5vw; padding:12px 26px; grid-template-columns:1fr 1.1fr; }
  #overlay .title { font-size:28px; }
  #overlay .controls { justify-self:center; row-gap:5px; }
}

/* ===== PIZARRA FIJA: título, tu puesto y buscador quietos; solo se desliza la lista ===== */
#screen-pizarra { overflow:hidden; }
#screen-pizarra .panel { display:flex; flex-direction:column; max-height:calc(100dvh - 24px); overflow:hidden; margin:auto; }
#screen-pizarra .panel > * { flex:0 0 auto; }
#screen-pizarra .pizarra-lista { flex:1 1 auto; min-height:0; max-height:none; overflow-y:auto; }
.pizarra-lista .pz-head { background:#080b1c !important; box-shadow:0 6px 10px #080b1c; margin-bottom:4px; }

#screen-pizarra .panel > .btn-sec { align-self:center; width:auto; }

/* niveles de mejora (núcleos de planeta) en el marcador */
.hud-mejoras { display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; max-width:180px; }
.hud-mejoras span { display:inline-flex; align-items:center; gap:3px; padding:2px 7px; border-radius:7px; font-size:13px; color:var(--c);
  border:1px solid color-mix(in srgb, var(--c) 55%, transparent); background:rgba(5,6,13,.55); text-shadow:0 0 8px var(--c); }
.hud-mejoras b { font-size:11px; color:#fff; }

/* campo del código con el ojito para mostrar/ocultar */
.campo-clave { position:relative; display:inline-block; width:280px; max-width:100%; }
.campo-clave #reg-codigo-input { width:100%; padding-right:46px; }
.ver-clave { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:36px; height:36px; padding:0; margin:0; border:0; border-radius:8px;
  background:transparent; color:#c48bd0; box-shadow:none; letter-spacing:0; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.ver-clave:hover { background:rgba(255,43,214,.12); }
.ver-clave #ojo-tachado { display:block; } .ver-clave.visible #ojo-tachado { display:none; }
.ver-clave.visible { color:var(--magenta); }

/* ===== SIN RECUADROS: las pantallas ocupan todo el ancho y el juego se ve detrás ===== */
.overlay .panel { border:0 !important; background:transparent !important; box-shadow:none !important; backdrop-filter:none !important; }
.overlay { background:linear-gradient(90deg, rgba(5,6,13,.78), rgba(5,6,13,.45) 50%, rgba(5,6,13,.78)) !important; backdrop-filter:blur(2px); }
#overlay .panel { width:100% !important; max-width:none !important; }
@media (orientation: landscape) {
  #overlay .panel { display:grid; grid-template-columns:1fr 1fr; grid-template-areas:"t c" "s c" "b c" "g c" "h c" "f f"; column-gap:6vw; align-items:center; padding:12px 4vw !important; }
  #overlay .title { grid-area:t; } #overlay .subtitle { grid-area:s; max-width:34ch; justify-self:center; }
  #overlay .controls { grid-area:c; margin:0 !important; justify-self:center; }
  #overlay #start-btn { grid-area:b; justify-self:center; } #overlay .hint { grid-area:h; justify-self:center; max-width:34ch; }
  #overlay .fila-botones { grid-area:f; justify-content:center; margin-top:10px; }
  #gameover .panel { width:100% !important; max-width:none !important; padding:10px 4vw !important; }
}

/* --- Botones de música y efectos (en la partida, debajo de las barras) --- */
.hud-sonido { display:flex; gap:8px; pointer-events:auto; margin-top:2px; }
.btn-son { position:relative; width:38px; height:38px; border-radius:50%; border:1px solid rgba(0,240,255,.55);
  background:rgba(0,240,255,.08); color:#00f0ff; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 12px rgba(0,240,255,.25);
  filter:drop-shadow(0 0 4px rgba(0,240,255,.6));
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.btn-son.apagado { color:#5f7f9f; filter:none; box-shadow:none; border-color:rgba(95,127,159,.4); }
.btn-son.apagado::after { content:''; position:absolute; left:8px; right:8px; top:50%; height:2px;
  background:#ff2bd6; transform:rotate(-45deg); box-shadow:0 0 6px #ff2bd6; }
html.nv-demo .hud-sonido { display:none; }

/* --- Instalar en iPhone: los pasos, sin recuadro pesado --- */
#instalar-ios { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  background:rgba(3,4,10,.86); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); padding:16px; }
#instalar-ios.hidden { display:none !important; }
.caja-ios { max-width:420px; width:100%; text-align:center; color:#cfe9ff; }
.caja-ios h3 { margin:0 0 12px; font-size:15px; letter-spacing:3px; color:#00f0ff; text-shadow:0 0 14px rgba(0,240,255,.6); }
.caja-ios ol { text-align:left; margin:0 auto 16px; padding-left:22px; line-height:1.7; font-size:14px; }
.caja-ios b { color:#fff; }
.ico-ios { display:inline-block; padding:0 6px; border:1px solid rgba(0,240,255,.4); border-radius:5px; color:#00f0ff; }

/* --- Presentación al iniciar: sin HUD encima --- */
html.nv-intro #hud { opacity:0; pointer-events:none; }
html.nv-intro #hud .hud-sonido { pointer-events:none; }

/* ===== FASE 3: misiones, logros y guerra de planetas ===== */
/* avisos arriba (misión cumplida, logro, premio) */
#nv-toast { position:fixed; left:50%; top:calc(env(safe-area-inset-top, 0px) + 44px); transform:translate(-50%, -14px); z-index:80;
  padding:7px 16px; border-radius:20px; background:rgba(5,6,13,.88); border:1px solid var(--c, #00f0ff); color:#fff;
  font:800 12px/1.2 system-ui, sans-serif; letter-spacing:1px; white-space:nowrap; max-width:92vw; overflow:hidden; text-overflow:ellipsis;
  box-shadow:0 0 18px color-mix(in srgb, var(--c, #00f0ff) 55%, transparent); opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; }
#nv-toast.ver { opacity:1; transform:translate(-50%, 0); }

.btn-misiones .bm-n { margin-left:4px; padding:1px 6px; border-radius:8px; background:rgba(0,255,168,.18); color:#00ffa8; font-size:.9em; }

/* barra de la guerra en la pantalla de inicio */
.guerra-mini { margin:12px auto 0; max-width:520px; width:100%; }
.gm-txt { font-size:11px; color:#8fb4d0; letter-spacing:.5px; text-align:center; margin-bottom:5px; }
.gm-barra { display:flex; height:6px; border-radius:3px; overflow:hidden; gap:2px; }
.gm-seg { display:block; min-width:2px; opacity:.85; }
.gm-seg.gm-yo { opacity:1; box-shadow:0 0 8px #fff; }

/* insignia dorada */
.pz-oro { margin-right:4px; }
#hud-bando.campeon::after { content:' 🏆'; }

/* pantalla de misiones */
.misiones-lista { text-align:left; }
.mi-sec { margin:14px 0 6px; font-size:12px; font-weight:800; letter-spacing:2px; color:#00f0ff; }
.mi-sec:first-child { margin-top:2px; }
.mi-nota { font-weight:600; letter-spacing:.5px; color:#5f7f9f; font-size:11px; margin-left:6px; }
.mi-fila { display:grid; grid-template-columns:22px 1fr auto; align-items:center; gap:10px; padding:7px 4px; border-bottom:1px solid rgba(0,240,255,.08); }
.mi-check { width:18px; height:18px; border-radius:50%; border:1px solid rgba(0,240,255,.4); display:flex; align-items:center; justify-content:center; color:#05060d; font-weight:900; font-size:12px; }
.mi-ok .mi-check { background:#00ffa8; border-color:#00ffa8; box-shadow:0 0 10px #00ffa8; }
.mi-txt { color:#dcefff; font-size:13px; }
.mi-ok .mi-txt { color:#00ffa8; }
.mi-prog { display:flex; align-items:center; gap:8px; font-size:11px; color:#8fb4d0; font-variant-numeric:tabular-nums; white-space:nowrap; }
.mi-bar, .gw-bar { display:block; width:90px; height:5px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden; }
.mi-bar i, .gw-bar i { display:block; height:100%; background:#00f0ff; }
.mi-ok .mi-bar i { background:#00ffa8; }
.mi-premio { font-size:11px; color:#7fa6c4; margin:8px 2px 4px; line-height:1.45; }
.gw-fila { display:grid; grid-template-columns:18px 110px 1fr auto; align-items:center; gap:10px; padding:4px 4px; font-size:12px; }
.gw-fila .gw-bar { width:100%; }
.gw-pos { color:#5f7f9f; font-weight:700; }
.gw-nom { font-weight:800; letter-spacing:1px; }
.gw-pts { color:#cfe0f0; font-variant-numeric:tabular-nums; }
.gw-yo { background:rgba(0,240,255,.06); border-radius:6px; }
.lg-rejilla { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; margin-top:6px; }
.lg { display:grid; grid-template-columns:30px 1fr; grid-template-rows:auto auto; column-gap:8px; padding:8px; border-radius:8px; border:1px solid rgba(255,255,255,.06); opacity:.42; filter:grayscale(1); }
.lg-ok { opacity:1; filter:none; border-color:rgba(255,210,63,.45); box-shadow:0 0 12px rgba(255,210,63,.15) inset; }
.lg-ico { grid-row:1 / 3; font-size:22px; align-self:center; text-align:center; }
.lg-nom { font-size:12px; font-weight:800; color:#fff; }
.lg-ok .lg-nom { color:#ffd23f; }
.lg-desc { font-size:10px; color:#8fb4d0; line-height:1.3; }
@media (orientation: landscape) and (max-height: 500px) {
  #screen-misiones .title { font-size:22px; }
  #screen-misiones .title span { display:inline; margin-left:8px; }
  .misiones-lista { max-height:calc(100vh - 120px); }
  .gm-txt { font-size:10px; margin-bottom:3px; }
  .guerra-mini { max-width:560px; }
}
#overlay.con-guerra .hint { display:none; } /* con la guerra cargada, su barra ocupa el lugar del consejo */

/* ===== FASE 4: jugar con amigos ===== */
.btn-amigos { border-color:rgba(255,43,214,.5); color:#ffb3ef; }
.am-crear { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:6px 0 14px; }
.am-crear .btn-camino { flex:1 1 220px; max-width:300px; margin:0; }
.am-unir { display:flex; gap:8px; justify-content:center; align-items:center; margin-bottom:6px; }
.am-unir input { width:150px; padding:10px 12px; border-radius:8px; border:1px solid rgba(0,240,255,.45); background:rgba(0,240,255,.06);
  color:#fff; font:800 18px/1 system-ui, sans-serif; letter-spacing:6px; text-align:center; text-transform:uppercase; outline:none; }
.am-unir input::placeholder { letter-spacing:2px; font-size:13px; color:#5f7f9f; }
.am-unir input:focus { border-color:#00f0ff; box-shadow:0 0 14px rgba(0,240,255,.4); }
.am-msg { min-height:16px; margin:6px 0 10px; font-size:12px; color:#ffd23f; }
#sala-banner { position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom, 0px) + 8px); transform:translateX(-50%); z-index:40;
  display:flex; align-items:center; gap:8px; padding:5px 6px 5px 14px; border-radius:22px; background:rgba(5,6,13,.78);
  border:1px solid rgba(0,240,255,.4); color:#9fe8ff; font:700 11px/1 system-ui, sans-serif; letter-spacing:1px; white-space:nowrap; }
#sala-banner.hidden { display:none; }
#sala-banner b { color:#fff; letter-spacing:3px; }
.sb-btn { padding:6px 10px; border-radius:14px; border:1px solid rgba(0,240,255,.45); background:rgba(0,240,255,.1); color:#fff;
  font:800 10px/1 system-ui, sans-serif; letter-spacing:1px; cursor:pointer; touch-action:manipulation; }
.sb-salir { border-color:rgba(255,77,109,.5); background:rgba(255,77,109,.12); }
.pf-marcador { display:flex; flex-direction:column; gap:6px; margin:10px auto 6px; max-width:320px; }
.pf-fila { display:flex; justify-content:space-between; padding:6px 12px; border-radius:8px; background:rgba(255,255,255,.04); font-weight:800; letter-spacing:1px; }
.pf-fila b { color:#fff; font-size:16px; }
.pf-yo { border:1px solid rgba(0,240,255,.5); }
.pf-eq { text-align:center; font-size:12px; font-weight:800; margin-top:4px; }
#pf-revancha { padding:12px 22px; }
@media (orientation: landscape) and (max-height: 500px) {
  #screen-amigos .title, #screen-privada-fin .title { font-size:24px; }
  #screen-amigos .title span, #screen-privada-fin .title span { display:inline; margin-left:8px; }
  #screen-amigos .subtitle { margin:4px 0 8px; }
  .am-crear { flex-wrap:nowrap; margin:4px 0 8px; }
  .am-crear .btn-camino { padding:10px 12px; }
  .am-msg { margin:2px 0 6px; }
}

/* supermutación en el HUD */
.hud-mejoras span.mut { box-shadow:0 0 10px var(--c); border-color:var(--c) !important; }
.hud-mejoras span.mut b { color:#fff; }

/* ===== Idioma: botón 🌐 ES / EN arriba a la derecha del registro y del inicio ===== */
.btn-idioma { position:absolute; top:calc(env(safe-area-inset-top, 0px) + 10px); right:calc(env(safe-area-inset-right, 0px) + 12px); z-index:5;
  padding:6px 11px; border-radius:16px; border:1px solid rgba(0,240,255,.4); background:rgba(0,240,255,.08); color:#9fe8ff;
  font:800 11px/1 system-ui, sans-serif; letter-spacing:1px; cursor:pointer; touch-action:manipulation; }
.btn-idioma:hover { background:rgba(0,240,255,.18); color:#fff; }
.title b { font-weight:inherit; }

/* ===== Regresar a la base: aviso pequeño arriba; la partida no se detiene ===== */
#confirmar-base { position:fixed; left:50%; top:calc(env(safe-area-inset-top, 0px) + 74px); transform:translateX(-50%); z-index:45;
  padding:12px 16px; border-radius:14px; background:rgba(5,6,13,.9); border:1px solid rgba(0,240,255,.5); box-shadow:0 0 24px rgba(0,240,255,.25);
  text-align:center; color:#cfe9ff; max-width:92vw; }
#confirmar-base.hidden { display:none; }
.cb-t { font:900 15px/1.2 system-ui, sans-serif; letter-spacing:2px; color:#fff; }
.cb-s { font-size:11px; color:#8fb4d0; margin:4px 0 10px; }
.cb-botones { display:flex; gap:8px; justify-content:center; }
.cb-botones button { padding:9px 14px; border-radius:10px; font:800 11px/1 system-ui, sans-serif; letter-spacing:1px; cursor:pointer; touch-action:manipulation; }
.cb-si { background:linear-gradient(90deg,#00f0ff,#4d7cff); border:0; color:#05060d; }
.cb-no { background:rgba(255,43,214,.12); border:1px solid rgba(255,43,214,.5); color:#ffb3ef; }

/* pizarra: pestañas HOY · SEMANA · SIEMPRE */
.pz-tabs { display:flex; gap:6px; justify-content:center; margin:2px auto 8px; }
.pz-tabs button { font:inherit; font-size:12px; font-weight:800; letter-spacing:2px; padding:7px 14px; border-radius:999px; cursor:pointer;
  color:#8fa3c8; background:rgba(0,240,255,.05); border:1px solid rgba(0,240,255,.25); transition:all .15s; }
.pz-tabs button.activa { color:#05060d; background:#00f0ff; border-color:#00f0ff; box-shadow:0 0 12px rgba(0,240,255,.55); }
@media (orientation: landscape) and (max-height: 500px) { .pz-tabs { margin-bottom:4px; } .pz-tabs button { padding:5px 12px; font-size:11px; } }

/* marcador: OLEADA y BAJAS en la misma fila (las bajas más discretas) */
.stat-par { display:flex; gap:16px; align-items:flex-start; }
.stat-bajas .val { color:#ff6b8a; font-size:22px; text-shadow:0 0 8px rgba(255,77,109,.45); }

/* fin de partida: elegir qué tarjeta compartir (solo si la partida quedó por debajo del récord) */
.tarjeta-modo { display:flex; gap:6px; justify-content:center; margin:0 0 6px; }
.tarjeta-modo button { font:inherit; font-size:11px; font-weight:800; letter-spacing:1.5px; padding:5px 12px; border-radius:999px; cursor:pointer;
  color:#8fa3c8; background:rgba(0,240,255,.05); border:1px solid rgba(0,240,255,.25); }
.tarjeta-modo button.activa { color:#05060d; background:#00f0ff; border-color:#00f0ff; box-shadow:0 0 10px rgba(0,240,255,.5); }
@media (orientation: landscape) and (max-height: 500px) { .tarjeta-modo button { padding:4px 10px; font-size:10px; } }
#gameover .tarjeta-modo button { width:auto; flex:0 0 auto; white-space:nowrap; margin:0; min-height:0; padding:6px 14px; font-size:11px; letter-spacing:1.5px; }

/* teléfono en vertical: los avisos bajan debajo del marcador (--hud-bajo lo calcula red.js) */
#nv-toast { top:calc(env(safe-area-inset-top, 0px) + var(--hud-bajo, 44px)); }
@media (orientation: portrait) and (max-width: 600px) { #nv-toast { white-space:normal; text-align:center; width:max-content; max-width:88vw; border-radius:16px; } }

/* cambiar de bando fuera del lunes: candado, apagado (sigue tocable para explicar cuándo abre) */
.btn-sec.bloqueado { opacity:.7; }

/* pantalla final: quién te derribó */
.derribado-por { margin:4px 0 0; font-size:12px; font-weight:800; letter-spacing:2px; color:#ff6b8a; text-shadow:0 0 10px rgba(255,46,77,.45); text-align:center; }

/* ---------- MI BASE (nave de la semana, cargas y amigos) ---------- */
.base-cont { text-align:left; }
.base-nave { display:flex; align-items:center; gap:18px; padding:6px 2px 4px; }
.base-img { flex:0 0 auto; width:116px; height:116px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%); }
.base-img img { width:96px; height:96px; object-fit:contain; transform:rotate(-90deg); filter:drop-shadow(0 0 10px var(--c)); }
.base-datos { display:flex; flex-direction:column; gap:3px; min-width:0; }
.base-nombre { font-size:20px; letter-spacing:2px; color:#fff; }
.base-planeta { font-size:12px; font-weight:800; letter-spacing:2px; }
.base-ckpt { font-size:13px; color:#dcefff; } .base-ckpt b { color:#00ffa8; }
.base-nota { font-size:11px; color:#5f7f9f; }
.base-niveles { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:6px 14px; }
.base-nivel { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; font-weight:700; padding:4px 0; }
.base-pips { display:flex; gap:4px; } .base-pips i { width:12px; height:6px; border-radius:2px; background:rgba(255,255,255,.1); }
.base-muts { margin:6px 0 0; font-size:12px; color:#ffd23f; font-weight:700; letter-spacing:.5px; }
.base-records { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:8px; }
.base-records span { display:flex; flex-direction:column; font-size:11px; color:#8fb4d0; } .base-records b { font-size:17px; color:#fff; font-variant-numeric:tabular-nums; }
.base-carga, .base-amigo { display:flex; align-items:center; gap:10px; padding:7px 4px; border-bottom:1px solid rgba(0,240,255,.08); }
.base-eq { background:rgba(0,255,168,.06); border-radius:8px; }
.base-ic { width:18px; text-align:center; font-size:15px; }
.base-ct { flex:1; min-width:0; font-size:13px; color:#dcefff; }
.base-bts { display:flex; gap:6px; }
.btn-mini { font:800 11px system-ui, sans-serif; letter-spacing:1px; color:#00f0ff; background:rgba(0,240,255,.08); border:1px solid rgba(0,240,255,.35);
  border-radius:8px; padding:6px 10px; cursor:pointer; white-space:nowrap; }
.btn-mini:disabled { opacity:.35; cursor:default; }
.base-regalo { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:6px 4px 10px 32px; font-size:12px; color:#8fb4d0; }
.base-dot { width:8px; height:8px; border-radius:50%; background:#3a4a5c; flex:0 0 auto; } .base-dot.on { background:#00ffa8; box-shadow:0 0 6px #00ffa8; }
.base-vacio { font-size:12px; color:#5f7f9f; margin:6px 2px; }
.base-fin { margin-top:16px; text-align:center; } .base-cero { color:#ff8aa0; border-color:rgba(255,110,138,.4); background:rgba(255,110,138,.06); }
.base-msg { min-height:16px; margin:8px 0 0; text-align:center; font-size:12px; font-weight:700; }
@media (max-width: 520px) { .base-nave { gap:12px; } .base-img { width:84px; height:84px; } .base-img img { width:70px; height:70px; } }
/* la base va por encima de las demás pantallas (como la pizarra): título fijo y solo se desliza el contenido */
#screen-base { z-index:30; overflow:hidden; }
#screen-base .panel { display:flex; flex-direction:column; max-height:calc(100dvh - 24px); overflow:hidden; margin:auto; width:min(96vw, 760px); }
#screen-base .panel > * { flex:0 0 auto; }
#screen-base .base-cont { flex:1 1 auto; min-height:0; max-height:none; overflow-y:auto; scrollbar-width:none; }
#screen-base .base-cont::-webkit-scrollbar { display:none; }
#screen-base .panel > .btn-sec { align-self:center; width:auto; margin-top:10px; }
@media (max-height: 500px) { #screen-base .title { font-size:22px; } #screen-base .title span { display:inline; margin-left:8px; } }
#screen-base { background:rgba(4,5,12,.93); }
@media (max-width: 520px) { .base-niveles { grid-template-columns:1fr; gap:2px; } .base-records { grid-template-columns:1fr 1fr; } }
#screen-base.overlay { background:rgba(4,5,12,.94); backdrop-filter:blur(6px); }
#screen-base .panel { background:linear-gradient(160deg, rgba(11,16,48,.97), rgba(5,6,13,.97)); }

/* Misiones encima de todo (también sobre «SISTEMA CAÍDO»): antes quedaban detrás y el toque caía en REINTENTAR */
#screen-misiones { z-index:30; }
#screen-misiones.overlay { background:rgba(4,5,12,.97); backdrop-filter:blur(6px); }
/* temblor de pantalla en «bajo»: botón a media luz */
.btn-son.medio { opacity:.6; box-shadow:none; }
/* Pantallas (inicio, resultados, base, misiones, pizarra, amigos…) con fondo SÓLIDO: queja de un jugador (25 oct)
   — detrás se veía borroso el marcador y la batalla. Ya no se transparenta nada. */
.overlay, #overlay, #screen-base.overlay, #screen-misiones.overlay {
  background:radial-gradient(ellipse at 50% 35%, #0c1236 0%, #070919 55%, #04050c 100%) !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }

/* MI BASE: botón principal justo debajo de INICIAR MISIÓN / REINTENTAR (pedido del Jefe: que tenga prioridad) */
.btn-base-principal { display:block; margin:12px auto 0; color:#fff; background:linear-gradient(90deg, rgba(255,43,214,.22), rgba(138,92,255,.22));
  border:2px solid #ff2bd6; box-shadow:0 0 24px rgba(255,43,214,.45), inset 0 0 16px rgba(255,43,214,.18); text-shadow:0 0 10px rgba(255,43,214,.8); }
.btn-base-principal:hover { box-shadow:0 0 40px rgba(255,43,214,.8), inset 0 0 18px rgba(255,43,214,.25); }
#start-btn, #restart-btn, #base-btn, #base-btn2 { min-width:min(320px, 84vw); }
@media (orientation: landscape) {
  #overlay #base-btn { grid-area:g; justify-self:center; margin:8px 0 0; }
  #gameover #base-btn2 { grid-area:g; justify-self:center; margin:6px 0 0; }
}
/* el botón de idioma nunca se estira (en el celular vertical los botones van a todo lo ancho) */
.btn-idioma { width:auto !important; max-width:none !important; }
/* Invitar a tu sala: amigos (se les avisa con notificación) + enlace para alguien nuevo */
#inv-panel { position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom, 0px) + 64px); transform:translateX(-50%); z-index:45;
  width:min(420px, calc(100vw - 24px)); max-height:min(70dvh, 420px); overflow-y:auto; scrollbar-width:none; padding:14px;
  background:#070919; border:1px solid rgba(0,240,255,.45); border-radius:14px; box-shadow:0 0 30px rgba(0,240,255,.25);
  display:flex; flex-direction:column; gap:8px; color:#dcefff; font:600 12px system-ui, sans-serif; }
#inv-panel::-webkit-scrollbar { display:none; }
#inv-panel .ip-t { font-weight:900; letter-spacing:2px; color:#00f0ff; text-align:center; }
#inv-panel .ip-nota { margin:0; color:#8fb4d0; text-align:center; line-height:1.4; }
#inv-panel .ip-fila { display:flex; align-items:center; gap:8px; }
#inv-panel .ip-nom { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#inv-panel .btn-sec { width:100%; max-width:none; }
/* «X te invita a su sala»: tarjeta arriba con ENTRAR */
#inv-card { position:fixed; left:50%; top:calc(env(safe-area-inset-top, 0px) + 12px); transform:translateX(-50%); z-index:70;
  width:min(440px, calc(100vw - 24px)); display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:#0b0f2a; border:2px solid #ff2bd6; border-radius:14px; box-shadow:0 0 30px rgba(255,43,214,.45);
  color:#fff; font:700 13px system-ui, sans-serif; animation:icEntra .3s ease; }
#inv-card .ic-txt { flex:1; min-width:0; } #inv-card b { color:#ffb3ef; }
#inv-card .ic-bot { display:flex; gap:6px; }
#inv-card button { width:auto; max-width:none; padding:9px 16px; font-size:12px; letter-spacing:1px; }
#inv-card .ic-no { background:transparent; color:#8fb4d0; border:1px solid rgba(143,180,208,.4); box-shadow:none; padding:9px 12px; }
@keyframes icEntra { from { opacity:0; transform:translate(-50%, -12px); } }
/* JUNTOS: el modo cooperativo destaca en «Jugar con amigos»; en el menú y en resultados, aviso pequeño de la sala */
.btn-juntos { border-color:#00ffa8 !important; box-shadow:0 0 22px rgba(0,255,168,.35) !important; }
.btn-juntos .camino-t { color:#00ffa8; }
html.en-juntos .overlay { padding-bottom:calc(76px + env(safe-area-inset-bottom, 0px)) !important; }
/* JUNTOS: sala de espera */
#screen-juntos { z-index:30; }
#screen-juntos .jl-codigo { font:900 34px/1 system-ui, sans-serif; letter-spacing:10px; color:#00ffa8; text-shadow:0 0 18px rgba(0,255,168,.6); margin:6px 0 12px; }
#screen-juntos .jl-lista { display:flex; flex-direction:column; gap:6px; margin:0 auto 16px; width:min(320px, 84vw); text-align:left; font:700 14px system-ui, sans-serif; color:#dcefff; }
#screen-juntos .jl-fila { display:flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid rgba(0,255,168,.25); border-radius:10px; background:rgba(0,255,168,.05); }
#screen-juntos #jl-iniciar { min-width:min(320px, 84vw); background:linear-gradient(90deg, #00ffa8, #00c2ff); }
#screen-juntos .fila-botones { justify-content:center; margin-top:12px; }
@media (orientation: landscape) and (max-height: 500px) { #screen-juntos .title { font-size:24px; } #screen-juntos .title span { display:inline; margin-left:8px; } #screen-juntos .jl-codigo { font-size:26px; margin:2px 0 8px; } #screen-juntos .jl-lista { margin-bottom:10px; } }
/* ===== LA SALA (como en COD): modos, casillas de pilotos, invitar e INICIAR ===== */
#screen-sala { z-index:30; }
#screen-sala .panel { width:min(96vw, 820px); }
.sl-cab { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.sl-tit { font:900 22px/1 system-ui, sans-serif; letter-spacing:3px; color:#dcefff; }
.sl-tit b { color:#00ffa8; letter-spacing:8px; margin-left:6px; text-shadow:0 0 14px rgba(0,255,168,.55); }
.sl-cab .btn-mini { width:auto; max-width:none; }
.sl-modos { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.sl-modos button { width:100%; max-width:none; display:flex; flex-direction:column; gap:3px; padding:10px 8px; border-radius:12px;
  background:rgba(0,240,255,.05); border:1px solid rgba(0,240,255,.3); color:#9fe8ff; box-shadow:none; letter-spacing:1px; font-size:12px; }
.sl-modos button span { font:600 10px system-ui, sans-serif; letter-spacing:.5px; color:#8fb4d0; }
.sl-modos button.sel { background:rgba(0,255,168,.16); border:2px solid #00ffa8; color:#fff; box-shadow:0 0 18px rgba(0,255,168,.35); }
.sl-modos button:disabled { cursor:default; transform:none; } .sl-modos button:disabled:not(.sel) { opacity:.5; }
.sl-desc { margin:10px auto 12px; max-width:60ch; color:#bcd6ea; font-size:12px; line-height:1.45; min-height:2.9em; }
.sl-casillas { display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:10px; margin:0 auto 14px; }
.sl-c { display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 6px; border-radius:12px; min-width:0;
  border:1px solid var(--c, rgba(0,240,255,.35)); background:rgba(255,255,255,.03); color:#dcefff; font:700 12px system-ui, sans-serif; }
.sl-c img { width:64px; height:64px; object-fit:contain; filter:drop-shadow(0 0 8px var(--c)); transform:rotate(-90deg); }
.sl-c b { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.sl-c span { color:var(--c, #8fb4d0); font-size:11px; } .sl-c i { font-style:normal; font-size:10px; color:#8fb4d0; letter-spacing:.5px; }
.sl-c.sl-yo { box-shadow:0 0 16px color-mix(in srgb, var(--c) 45%, transparent); }
.sl-c.sl-inv { --c:#ffd23f; border-style:dashed; } .sl-c.sl-inv b { color:#ffd23f; }
.sl-reloj, .sl-mas { width:64px; height:64px; display:flex; align-items:center; justify-content:center; font-size:30px; }
.sl-c.sl-vacia { width:100%; max-width:none; border:1px dashed rgba(0,240,255,.4); background:transparent; box-shadow:none; color:#00f0ff; letter-spacing:1px; padding:10px 6px; }
.sl-c.sl-vacia .sl-mas { font-size:40px; font-weight:300; }
#sl-iniciar { min-width:min(320px, 84vw); background:linear-gradient(90deg, #00ffa8, #00c2ff); }
#sl-iniciar:disabled { opacity:.45; cursor:default; transform:none; box-shadow:none; }
.sl-nota { margin:8px 0 0; color:#8fb4d0; font-size:12px; min-height:1.4em; } .sl-nota.sl-error { color:#ff8aa0; }
.sl-pie { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; margin-top:14px; }
.sl-pie .am-unir { margin:0; } .sl-pie .btn-sec { width:auto; max-width:none; }
#screen-sala.sl-cargando .sl-modos, #screen-sala.sl-cargando .sl-desc, #screen-sala.sl-cargando #sl-iniciar, #screen-sala.sl-cargando .sl-pie { visibility:hidden; }
html.en-sala #gameover #base-btn2 { display:none; }
@media (orientation: landscape) { #gameover #go-sala { grid-area:g; justify-self:center; margin:6px 0 0; } }
@media (orientation: landscape) and (max-height: 500px) {
  #screen-sala .panel { padding:8px 16px !important; }
  .sl-cab { margin-bottom:6px; } .sl-tit { font-size:18px; }
  .sl-modos button { padding:6px; font-size:11px; } .sl-desc { margin:6px auto; min-height:0; font-size:11px; }
  .sl-casillas { grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); gap:6px; margin-bottom:8px; }
  .sl-c { padding:6px 4px; } .sl-c img, .sl-reloj, .sl-mas { width:40px; height:40px; } .sl-c.sl-vacia .sl-mas { font-size:28px; }
  .sl-pie { margin-top:8px; }
}