:root{
  --bg:#0b0614; --ink:#f4ecff; --muted:#a998c4;
  --accent:#ff7a1a; --accent2:#9b5cff; --danger:#ff2e4d;
  --glass:rgba(16,8,30,.62);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);
  font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;touch-action:none;user-select:none;-webkit-user-select:none}
.hidden{display:none!important}

/* Capa cámara */
#cam,#camFallback{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
#camFallback{background:
  radial-gradient(ellipse at 30% 20%,#2a1745 0%,transparent 55%),
  radial-gradient(ellipse at 70% 80%,#1b2a3a 0%,transparent 60%),#07040d;
  animation:fog 14s ease-in-out infinite alternate}
@keyframes fog{to{filter:hue-rotate(25deg) brightness(1.15)}}

/* HUD canvas */
#hud{position:fixed;inset:0;width:100%;height:100%;z-index:1}

/* Viñeta por nivel */
#vignette{position:fixed;inset:0;z-index:2;pointer-events:none;transition:background .6s}
body[data-level="0"] #vignette{background:radial-gradient(ellipse at center,transparent 62%,rgba(80,30,140,.35) 100%)}
body[data-level="1"] #vignette{background:radial-gradient(ellipse at center,transparent 45%,rgba(10,30,40,.65) 100%)}
body[data-level="2"] #vignette{background:radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,.88) 100%)}
body[data-level="2"] #cam{filter:grayscale(.55) contrast(1.15) brightness(.72)}
body[data-level="1"] #cam{filter:saturate(.6) hue-rotate(160deg) brightness(.85)}
body.flash #vignette{background:rgba(255,46,77,.35)!important}

/* Barra superior */
#topbar{position:fixed;left:0;right:0;top:0;z-index:5;display:flex;justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 10px) 14px 10px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.6),transparent)}
.stat{display:flex;flex-direction:column;min-width:84px}
.stat.center{align-items:center}.stat.right{align-items:flex-end}
.stat .lbl{font-size:10px;letter-spacing:2px;color:var(--muted)}
.stat span:last-child{font-size:26px;font-weight:800;text-shadow:0 0 12px rgba(255,122,26,.6)}
#timer.low{color:var(--danger);animation:pulse .6s infinite alternate}
@keyframes pulse{to{transform:scale(1.15)}}
#combo{position:fixed;top:calc(env(safe-area-inset-top) + 72px);left:50%;transform:translateX(-50%);
  z-index:5;font-weight:800;color:var(--accent);font-size:18px;text-shadow:0 0 10px #000;pointer-events:none}
#pauseBtn{position:fixed;z-index:6;right:14px;bottom:calc(env(safe-area-inset-bottom) + 14px);
  width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:var(--glass);
  color:var(--ink);font-size:16px;backdrop-filter:blur(8px)}
#verTag{position:fixed;z-index:6;left:12px;bottom:calc(env(safe-area-inset-bottom) + 12px);
  font-size:11px;color:var(--muted);opacity:.75;pointer-events:none;letter-spacing:1px}

/* Pantallas */
.screen{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:calc(env(safe-area-inset-top) + 20px) 22px calc(env(safe-area-inset-bottom) + 20px);
  background:radial-gradient(ellipse at 50% 30%,rgba(60,20,100,.55),rgba(5,2,10,.92));backdrop-filter:blur(4px);text-align:center}
.logo-ghost{font-size:64px;animation:bob 2.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px) rotate(-4deg)}}
h1{font-size:30px;letter-spacing:3px;line-height:1.05;text-shadow:0 0 18px rgba(155,92,255,.8)}
h1 span{display:block;font-size:44px;color:var(--accent);text-shadow:0 0 22px rgba(255,122,26,.8)}
h2{font-size:28px;letter-spacing:3px}
.sub{color:var(--muted);margin-top:6px}
.levels{display:flex;flex-direction:column;gap:10px;width:100%;max-width:360px;margin-top:8px}
.lvl{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px 16px;border-radius:14px;
  border:1px solid rgba(255,255,255,.14);background:var(--glass);color:var(--ink);text-align:left;font:inherit}
.lvl b{font-size:18px}.lvl small{color:var(--muted)}
.lvl[data-level="0"]{border-left:4px solid #7cf5c4}
.lvl[data-level="1"]{border-left:4px solid var(--accent2)}
.lvl[data-level="2"]{border-left:4px solid var(--danger)}
.lvl:active,.btn:active{transform:scale(.97)}
.hint{font-size:12px;color:var(--muted);max-width:320px}
.ver{font-size:11px;color:var(--muted);opacity:.7}
.btn{min-width:220px;padding:14px 20px;border-radius:14px;border:0;background:var(--accent);color:#1a0b00;
  font:inherit;font-weight:800;font-size:17px}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid rgba(255,255,255,.3)}
.final{display:flex;flex-direction:column;align-items:center}
.final span{font-size:64px;font-weight:900;color:var(--accent);text-shadow:0 0 24px rgba(255,122,26,.7)}
.final small{color:var(--muted);letter-spacing:2px}
#finalDetail,#bestLine{color:var(--muted)}
#toast{position:fixed;z-index:20;left:50%;bottom:calc(env(safe-area-inset-bottom) + 80px);transform:translateX(-50%);
  background:var(--glass);border:1px solid rgba(255,255,255,.2);padding:10px 16px;border-radius:12px;font-size:13px;max-width:88%;text-align:center}