@font-face { font-family:'Lilita One'; src:url('../fonts/LilitaOne-Regular.ttf') format('truetype'); font-display:swap; }

/* Juego a pantalla completa (canvas) con pantallas en capas encima. Un solo look nocturno neón. */
:root {
  --night:#070d33; --panel:rgba(9,16,58,.88); --panel-2:rgba(20,34,110,.9);
  --neon:#29e6ff; --mag:#ff2d8a; --yel:#ffd21e; --fg:#f4f6ff; --muted:#aab6e6; --ok:#6ff0a0; --warn:#ffb14d;
  --display:'Lilita One', system-ui, sans-serif; --ui:system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: dark;
}
* { box-sizing:border-box }
html, body { height:100%; margin:0; background:var(--night); color:var(--fg); font-family:var(--ui); overflow:hidden;
  overscroll-behavior:none; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; touch-action:none }
#app { position:fixed; top:0; left:0; width:100vw; height:100dvh; overflow:hidden; transform-origin:0 0 }
canvas { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none }
button { font-family:var(--ui); font-weight:900; color:var(--fg); cursor:pointer; touch-action:manipulation }
button:focus-visible, input:focus-visible { outline:3px solid var(--yel); outline-offset:2px }
.screen { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:5;
  padding:max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)) }
.dim { background:rgba(4,8,30,.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px) }
.card { background:var(--panel); border:2px solid rgba(41,230,255,.55); border-radius:18px; padding:18px 22px;
  box-shadow:0 0 24px rgba(41,230,255,.25), inset 0 0 18px rgba(41,230,255,.08); max-width:min(640px, 100%); width:100%; max-height:100%; overflow:auto }
h1, h2 { font-family:var(--display); font-weight:400; margin:0; letter-spacing:.5px }
h2 { font-size:clamp(22px, 5vh, 32px); color:var(--yel); text-shadow:2px 3px 0 #7a0a4c; text-align:center; margin-bottom:10px }
.btn { display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:8px 16px; border-radius:12px;
  background:linear-gradient(180deg,#2a4fd0,#1a2f86); border:2px solid var(--neon); font-size:16px; box-shadow:0 3px 0 #0b1650 }
.btn:active { transform:translateY(2px); box-shadow:0 1px 0 #0b1650 }
.btn.primary { background:linear-gradient(180deg,#ffe066,#ffb700); color:#2a1030; border-color:#fff3b0; box-shadow:0 3px 0 #9a5b00; font-size:20px }
.btn.pink { background:linear-gradient(180deg,#ff5aa5,#c8166a); border-color:#ffc2dd; box-shadow:0 3px 0 #6d0a3a }
.btn small { font-weight:800; opacity:.75; font-size:12px }
.btn[disabled] { opacity:.45; cursor:default }
.row { display:flex; gap:10px; flex-wrap:wrap; justify-content:center }
.muted { color:var(--muted) }
.corner { position:absolute; display:flex; gap:8px; align-items:center }
.tl { top:max(10px, env(safe-area-inset-top)); left:max(14px, env(safe-area-inset-left)) }
.tr { top:max(10px, env(safe-area-inset-top)); right:max(14px, env(safe-area-inset-right)) }
.chip { background:rgba(9,16,58,.8); border:1.5px solid rgba(41,230,255,.6); border-radius:999px; padding:6px 12px; font-size:14px; font-weight:800 }
.back { background:rgba(9,16,58,.8); border:1.5px solid rgba(41,230,255,.6); border-radius:999px; padding:7px 14px; font-size:14px }

/* Menú */
#menu { background:linear-gradient(90deg, rgba(4,8,30,.72) 0%, rgba(4,8,30,.25) 55%, rgba(4,8,30,.55) 100%) }
.menu-grid { display:grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap:clamp(16px,4vw,48px); align-items:center; width:min(980px,100%) }
.brand { display:grid; justify-items:start; gap:6px; min-width:0 }
.brand svg { width:clamp(56px, 16vh, 110px); height:auto; filter:drop-shadow(0 0 12px rgba(41,230,255,.6)) }
.brand h1 { font-size:clamp(30px, 9.5vh, 72px); line-height:.95; color:var(--yel);
  text-shadow: 0 -2px 0 #fff3a6, 3px 5px 0 #7a0a4c, 0 0 22px rgba(255,210,30,.35); -webkit-text-stroke:2px #101030; overflow-wrap:anywhere }
.brand h1 span { display:block; white-space:nowrap }   /* P12: título fijo en dos líneas, PIGEOMETRID / ASH */
.chip { color:var(--fg); cursor:pointer }
.brand p { margin:0; font-size:clamp(14px, 3.4vh, 18px); color:var(--muted); font-weight:800 }
.menu-btns { display:grid; grid-template-columns:1fr 1fr; gap:10px; min-width:0 }
.menu-btns .primary, .menu-btns #btnContinue { grid-column:1 / -1; min-height:56px }
.foot { position:absolute; left:0; right:0; bottom:max(8px, env(safe-area-inset-bottom)); text-align:center; font-size:12px; font-weight:800;
  color:#c9d3ff; letter-spacing:.4px; text-shadow:0 1px 2px #000; font-variant-numeric:tabular-nums; pointer-events:none }

/* Niveles y ranking */
.levels { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px }
.lvl { border-radius:14px; padding:12px; background:var(--panel-2); border:2px solid rgba(41,230,255,.4); display:grid; gap:6px; align-content:start; min-width:0 }
.lvl h3 { margin:0; font-family:var(--display); font-weight:400; font-size:20px }
.lvl .bar { height:8px; background:#0b1450; border-radius:99px; overflow:hidden }
.lvl .bar i { display:block; height:100%; background:linear-gradient(90deg,var(--yel),#ff9d00) }
.lvl.locked { opacity:.55; border-style:dashed }
.tabs { display:flex; gap:6px; justify-content:center; margin-bottom:8px; flex-wrap:wrap }
.tabs button { background:transparent; border:1.5px solid rgba(41,230,255,.5); border-radius:999px; padding:5px 12px; font-size:13px }
.tabs button[aria-pressed="true"] { background:var(--neon); color:#08103a }
table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; font-size:14px }
th, td { padding:6px 8px; text-align:left } th { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:1px }
td.n { text-align:right } tr.me td { background:rgba(255,210,30,.16); color:var(--yel) }
tbody tr + tr td { border-top:1px solid rgba(170,182,230,.15) }

/* Ajustes y pausa */
.set { display:grid; gap:10px }
.set label { display:grid; grid-template-columns: 90px minmax(0,1fr) 44px; align-items:center; gap:10px; font-weight:800 }
.set label.check { grid-template-columns: 24px minmax(0,1fr) }
.set output { text-align:right; font-variant-numeric:tabular-nums; color:var(--muted) }
input[type=range] { width:100%; accent-color:var(--yel) }
input[type=checkbox] { width:20px; height:20px; accent-color:var(--mag) }
.sep { border:0; border-top:1px dashed rgba(170,182,230,.3); margin:6px 0 }
.note { font-size:12px; color:var(--muted); margin:0 }
.stat { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin:6px 0 12px }
.stat div { background:var(--panel-2); border-radius:12px; padding:8px; text-align:center }
.stat b { display:block; font-family:var(--display); font-weight:400; font-size:26px; color:var(--yel); font-variant-numeric:tabular-nums }
.stat span { font-size:12px; color:var(--muted); font-weight:800 }
.save { text-align:center; font-weight:900; margin:0 0 12px }
.save.ok { color:var(--ok) } .save.err { color:var(--warn) }

/* Sala del Pogo */
.lobby { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:16px }
.lh { font-family:var(--display); font-weight:400; font-size:18px; margin:6px 0 6px; color:var(--neon) }
.plist { list-style:none; margin:0; padding:0; display:grid; gap:6px }
.plist li { display:flex; justify-content:space-between; gap:8px; background:var(--panel-2); border-radius:10px; padding:7px 10px; font-weight:800 }
.plist .ok { color:var(--ok) } .plist .wait { color:var(--muted) }
.seg { display:flex; flex-wrap:wrap; gap:6px }
.seg button { background:transparent; border:1.5px solid rgba(41,230,255,.5); border-radius:999px; padding:6px 12px; font-size:13px }
.seg button[aria-pressed="true"] { background:var(--yel); color:#2a1030; border-color:#fff3b0 }
@media (max-width:560px) { .lobby { grid-template-columns:1fr } }
/* Juego */
#btnPause { position:fixed; z-index:4; top:max(8px, env(safe-area-inset-top)); right:max(10px, env(safe-area-inset-right)); width:48px; height:48px;
  border-radius:50%; background:rgba(9,16,58,.55); border:2.5px solid var(--neon); font-size:18px; display:flex; align-items:center; justify-content:center }
#rotate { z-index:20; background:var(--night); flex-direction:column; gap:14px; text-align:center }
#rotate .phone { width:54px; height:88px; border:4px solid var(--neon); border-radius:12px; animation:turn 1.6s ease-in-out infinite }
@keyframes turn { 0%,25% { transform:rotate(0) } 60%,100% { transform:rotate(-90deg) } }
@media (prefers-reduced-motion: reduce) { #rotate .phone { animation:none } }
#hostbar { position:fixed; z-index:8; left:50%; transform:translateX(-50%); top:max(10px, env(safe-area-inset-top)); width:min(520px, calc(100% - 32px));
  background:#fff; color:#1b1b2a; border-radius:14px; padding:10px 14px; display:flex; gap:10px; align-items:center; box-shadow:0 8px 30px rgba(0,0,0,.45) }
#hostbar b { flex:1 } #hostbar button { background:#ff4455; color:#fff; border:0; border-radius:10px; padding:8px 12px }
#toast { position:fixed; z-index:9; left:50%; bottom:max(18px, env(safe-area-inset-bottom)); transform:translateX(-50%); background:rgba(9,16,58,.95);
  border:2px solid var(--yel); border-radius:14px; padding:10px 16px; font-weight:900; box-shadow:0 0 20px rgba(255,210,30,.35); max-width:calc(100% - 32px); text-align:center }
#tagx { position:fixed; z-index:30; right:max(8px, env(safe-area-inset-right)); bottom:max(6px, env(safe-area-inset-bottom)); font-size:10px; font-weight:800;
  background:rgba(0,0,0,.5); color:#ffd9ea; border:1px dashed #ff8fc0; border-radius:6px; padding:2px 6px; pointer-events:none }
@media (max-height:430px) {
  .card { padding:12px 16px } .btn { min-height:40px; font-size:15px } .menu-btns { gap:8px } .menu-btns .primary { min-height:48px }
  .stat b { font-size:22px } h2 { margin-bottom:6px }
}
@media (max-width:620px) and (orientation:landscape) { .levels { gap:6px } .lvl { padding:8px } }
.code-in { font:900 22px var(--ui); letter-spacing:6px; text-transform:uppercase; width:8ch; text-align:center; border-radius:12px; border:2px solid var(--neon); background:#0b1450; color:var(--fg); padding:6px 8px }
/* pgd-menu-estandar: con el menú estándar del SDK, del menú propio solo queda el pie (req. 12.7, 12.8) */
body.std-menu #menu > :not(#foot), body.std-menu #btnPause { display:none !important }
body.std-menu #menu { pointer-events:none }
.hud-pause { position:absolute; top:max(10px, env(safe-area-inset-top)); right:max(10px, env(safe-area-inset-right)); z-index:6 }
.lobby-head { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap }
.lands { display:grid; grid-template-columns:repeat(5, 1fr); gap:10px }
.land { display:grid; gap:6px; padding:8px; border-radius:14px; border:2px solid rgba(41,230,255,.35); background:rgba(20,34,110,.7); font-weight:900; text-align:center }
.land .sw { height:46px; border-radius:10px }
.land small { color:var(--muted); font-weight:800; font-size:11px }
.land[aria-pressed="true"] { border-color:var(--yel); box-shadow:0 0 0 2px var(--yel) }
@media (max-width:620px) { .lands { grid-template-columns:repeat(3, 1fr) } }
/* BUG-01: sin esto, `.screen { display:flex }` le gana al atributo hidden y todas las pantallas se ven a la vez. */
[hidden] { display:none !important }