/* MIRRORFALL — neon-noir UI. No external fonts or images. */
:root {
  --bg: #05060c;
  --panel: rgba(10, 13, 26, 0.82);
  --panel-solid: #0b0f1e;
  --line: rgba(120, 150, 255, 0.22);
  --text: #e9eefc;
  --dim: #8d97b8;
  --cyan: #2ee6ff;
  --magenta: #ff3df0;
  --amber: #ffb12e;
  --red: #ff2a3a;
  --green: #3dff9a;
  --focus: #ffe84a;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--sans); overflow: hidden; }
body { -webkit-tap-highlight-color: transparent; touch-action: none; user-select: none; -webkit-user-select: none; }
#root { position: fixed; inset: 0; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: auto; }
.noscript, .fatal { position: fixed; inset: 0; display: grid; place-content: center; text-align: center; padding: 2rem; }
.fatal h1 { letter-spacing: .3em; color: var(--magenta); }

/* ---------- HUD ---------- */
.hud { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; font-variant-numeric: tabular-nums; }
.hud.visible { opacity: 1; }
.hud-top { position: absolute; top: max(8px, env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; gap: 14px; align-items: center; }
.hud-level { display: flex; gap: 8px; align-items: baseline; min-width: 0; flex: 0 1 auto; text-shadow: 0 0 8px rgba(46,230,255,.6); }
.hud-level .num { font-family: var(--mono); color: var(--cyan); font-weight: 700; font-size: 15px; }
.hud-level .name { font-weight: 600; letter-spacing: .06em; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-time { flex: 1 1 auto; display: flex; gap: 10px; align-items: center; min-width: 120px; }
.timebar { position: relative; flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); border: 1px solid var(--line); overflow: visible; }
.timebar .fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); border-radius: 4px; background: linear-gradient(90deg, var(--cyan), var(--magenta)); box-shadow: 0 0 10px rgba(46,230,255,.7); }
.timebar .fill.late { background: linear-gradient(90deg, var(--magenta), var(--red)); animation: pulse .5s infinite alternate; }
.timebar .mark { position: absolute; top: -4px; width: 2px; height: 16px; margin-left: -1px; }
.timebar .mark.par { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.timebar .mark.rival { background: #fff; box-shadow: 0 0 6px #fff; }
.timetext { font-family: var(--mono); font-size: 14px; min-width: 64px; text-align: right; }
.hud-ghosts { display: flex; gap: 6px; }
.slot { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; border: 1px solid var(--line); background: rgba(0,0,0,.35); }
.slot.empty { opacity: .35; }
.slot.live { border-color: #fff; animation: pulse .8s infinite alternate; }
.hud-stats { font-family: var(--mono); font-size: 13px; white-space: pre; color: var(--dim); }
.hud-banner { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%) scale(.9); text-align: center; opacity: 0; transition: opacity .2s, transform .25s; max-width: 92vw; }
.hud-banner.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.hud-banner .big { font-size: clamp(28px, 6vw, 64px); font-weight: 800; letter-spacing: .18em; }
.hud-banner .sub { margin-top: 6px; font-size: clamp(13px, 2vw, 18px); color: var(--dim); }
.hud-banner.alarm .big { color: var(--red); text-shadow: 0 0 24px rgba(255,42,58,.9); }
.hud-banner.paradox .big { color: var(--magenta); text-shadow: 3px 0 0 rgba(46,230,255,.8), -3px 0 0 rgba(255,61,240,.8), 0 0 28px rgba(255,61,240,.8); animation: glitch .18s infinite; }
.hud-banner.win .big { color: var(--green); text-shadow: 0 0 26px rgba(61,255,154,.9); }
.hud-banner.info .big { color: var(--cyan); font-size: clamp(20px, 4vw, 40px); text-shadow: 0 0 18px rgba(46,230,255,.7); }
.hud-ready { position: absolute; left: 50%; bottom: calc(64px + var(--safe-b)); transform: translateX(-50%); padding: 8px 16px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); font-size: 14px; opacity: 0; transition: opacity .3s; white-space: nowrap; }
.hud-ready.visible { opacity: 1; animation: pulse 1s infinite alternate; }
.hud-hints { position: absolute; left: 12px; right: 12px; bottom: calc(8px + var(--safe-b)); display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: 12px; color: var(--dim); }
.hud-hints kbd { font-family: var(--mono); background: rgba(255,255,255,.08); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; color: var(--text); }
.hud.rewinding .hud-time { filter: hue-rotate(160deg); }
.hud.touchmode .hud-hints { display: none; }
.hud.touchmode .hud-ready { bottom: auto; top: calc(56px + env(safe-area-inset-top)); }
.hud .fps { position: absolute; right: 12px; top: 44px; font-family: var(--mono); font-size: 11px; color: var(--dim); }

/* ---------- Menus ---------- */
.menus { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; padding: 16px; }
.menus.visible { display: flex; }
.menus.overlay { background: rgba(3, 4, 10, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.screen { width: min(720px, 100%); max-height: 100%; overflow: auto; padding: 22px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 0 60px rgba(46,230,255,.08), inset 0 0 40px rgba(255,61,240,.04); }
.screen.hidden { display: none; }
.screen.title { background: transparent; border: none; box-shadow: none; text-align: center; width: min(760px, 100%); overflow: visible; }
.screen.title .stack { max-width: 420px; margin: 0 auto; }
.screen h2 { margin: 0 0 14px; font-size: 20px; letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); text-shadow: 0 0 12px rgba(46,230,255,.6); }
.screen p { color: var(--dim); line-height: 1.5; }
.logo { font-size: clamp(34px, 8.5vw, 76px); font-weight: 900; letter-spacing: .12em; white-space: nowrap; margin: 0 0 4px; color: #fff; text-shadow: 0 0 6px #fff, 0 0 24px var(--magenta), 0 0 48px var(--magenta), 3px 0 0 rgba(46,230,255,.7); }
.logo span { display: inline-block; transform: scaleY(-1); opacity: .25; filter: blur(.5px); }
.tagline { color: var(--dim); letter-spacing: .3em; font-size: 12px; text-transform: uppercase; margin-bottom: 26px; }
.stack { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.btn { appearance: none; border: 1px solid var(--line); background: rgba(14, 18, 36, .9); color: var(--text); font: inherit; font-size: 15px; letter-spacing: .08em; padding: 12px 18px; border-radius: 10px; cursor: pointer; transition: transform .08s, border-color .15s, box-shadow .15s, background .15s; text-align: center; }
.btn:hover { border-color: var(--cyan); }
.btn:focus-visible, .btn:focus, .card:focus, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 18px rgba(255,232,74,.35); }
.btn:active { transform: scale(.98); }
.btn.primary { background: linear-gradient(90deg, rgba(46,230,255,.25), rgba(255,61,240,.25)); border-color: rgba(46,230,255,.6); font-weight: 700; }
.btn.small { padding: 7px 12px; font-size: 13px; }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.row { display: grid; grid-template-columns: 1fr minmax(120px, 2fr) 52px; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid rgba(255,255,255,.05); }
.row .lab small { display: block; color: var(--dim); font-size: 12px; }
.row output { font-family: var(--mono); color: var(--dim); text-align: right; }
.row.toggle { grid-template-columns: 1fr auto; position: relative; }
.row.toggle input { position: absolute; opacity: 0; width: 46px; height: 26px; right: 4px; margin: 0; cursor: pointer; }
.row.toggle .sw { width: 46px; height: 26px; border-radius: 13px; background: rgba(255,255,255,.12); border: 1px solid var(--line); position: relative; transition: background .2s; }
.row.toggle .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #cfd6ee; transition: transform .2s; }
.row.toggle input:checked + .sw { background: rgba(46,230,255,.45); }
.row.toggle input:checked + .sw::after { transform: translateX(20px); background: #fff; }
.row.toggle input:focus-visible + .sw { outline: 2px solid var(--focus); outline-offset: 2px; }
input[type=range] { width: 100%; accent-color: var(--cyan); }
select, textarea, input[type=text] { width: 100%; background: #070a15; color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px; font: inherit; }
textarea { font-family: var(--mono); font-size: 12px; min-height: 70px; resize: vertical; user-select: text; -webkit-user-select: text; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.card { position: relative; text-align: left; padding: 12px; min-height: 92px; display: flex; flex-direction: column; gap: 6px; }
.card .n { font-family: var(--mono); color: var(--cyan); font-size: 13px; }
.card .t { font-weight: 700; letter-spacing: .04em; }
.card .stars { color: var(--amber); letter-spacing: .15em; font-size: 15px; }
.card .best { font-family: var(--mono); color: var(--dim); font-size: 12px; }
.card.locked { opacity: .45; }
.card.trap::after { content: "⧖"; position: absolute; right: 10px; top: 8px; color: var(--magenta); }
.btnrow { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.btnrow .btn { flex: 1 1 140px; }
.result-stars { font-size: 44px; letter-spacing: .25em; color: var(--amber); text-shadow: 0 0 18px rgba(255,177,46,.7); text-align: center; }
.result-stars .off { color: rgba(255,255,255,.18); text-shadow: none; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-family: var(--mono); font-size: 14px; margin: 12px 0; }
.kv dt { color: var(--dim); }
.kv dd { margin: 0; }
.share { white-space: pre-wrap; font-family: var(--mono); font-size: 13px; background: #070a15; border: 1px solid var(--line); border-radius: 8px; padding: 10px; user-select: text; -webkit-user-select: text; }
.note { font-size: 13px; color: var(--dim); }
.ok { color: var(--green); }
.bad { color: var(--red); }
.progress { height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; margin: 12px 0; }
.progress > div { height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--magenta)); transition: width .2s; }
.toast { position: absolute; left: 50%; bottom: calc(90px + var(--safe-b)); transform: translateX(-50%); background: var(--panel-solid); border: 1px solid var(--line); padding: 8px 14px; border-radius: 8px; font-size: 14px; z-index: 50; animation: fadeout 2.4s forwards; pointer-events: none; }
.legend { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; font-size: 14px; }
.legend svg { vertical-align: middle; }

/* ---------- Touch ---------- */
.touch { position: absolute; inset: 0; pointer-events: none; display: none; }
.touch.visible { display: block; }
.touch-zone { position: absolute; left: 0; top: 15%; bottom: 0; width: 58%; pointer-events: auto; }
.stick { position: absolute; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04); opacity: 0; transition: opacity .15s; pointer-events: none; }
.stick.on { opacity: 1; }
.stick .knob { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; border-radius: 50%; background: rgba(46,230,255,.35); border: 2px solid rgba(46,230,255,.8); transform: translate(-50%, -50%); box-shadow: 0 0 16px rgba(46,230,255,.5); }
.tbtn { pointer-events: auto; position: absolute; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); background: rgba(10,13,26,.55); color: #fff; font-size: 26px; display: grid; place-items: center; touch-action: none; }
.tbtn.act { right: calc(22px + env(safe-area-inset-right)); bottom: calc(26px + var(--safe-b)); width: 86px; height: 86px; border-color: rgba(255,61,240,.8); box-shadow: 0 0 18px rgba(255,61,240,.4); }
.tbtn.act.on { background: rgba(255,61,240,.45); }
.tcmds { position: absolute; right: calc(16px + env(safe-area-inset-right)); bottom: calc(126px + var(--safe-b)); display: flex; gap: 8px; pointer-events: none; }
.tbtn.small { position: static; width: 44px; height: 44px; font-size: 18px; }

/* ---------- Editor ---------- */
.editor { position: absolute; inset: 0; display: none; }
.editor.visible { display: block; }
.editor .bar { position: absolute; left: 8px; right: 8px; top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; pointer-events: auto; }
.editor .tools { position: absolute; left: 8px; top: 56px; bottom: 8px; width: 150px; overflow: auto; display: flex; flex-direction: column; gap: 3px; pointer-events: auto; }
.editor .tools > .btn { flex: 0 0 auto; }
.editor .tools .btn { padding: 5px 8px; font-size: 12px; text-align: left; display: flex; gap: 6px; align-items: center; }
.editor .tools .btn.sel { border-color: var(--focus); box-shadow: 0 0 10px rgba(255,232,74,.4); }
.editor .props { position: absolute; right: 8px; top: 56px; width: 220px; max-height: calc(100% - 64px); overflow: auto; padding: 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); font-size: 13px; pointer-events: auto; }
.editor .props label { display: block; margin: 6px 0 2px; color: var(--dim); }
.editor .status { position: absolute; left: 170px; right: 240px; bottom: 8px; font-size: 13px; color: var(--dim); pointer-events: none; text-align: center; }
.editor .cursor-info { font-family: var(--mono); }

@keyframes pulse { from { opacity: .65; } to { opacity: 1; } }
@keyframes glitch { 0% { transform: translate(0); } 25% { transform: translate(-2px, 1px); } 50% { transform: translate(2px, -1px); } 75% { transform: translate(-1px, -1px); } 100% { transform: translate(0); } }
@keyframes fadeout { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 640px) {
  .hud-level .name { display: none; }
  .hud-stats { display: none; }
  .slot { width: 22px; height: 22px; }
  .screen { padding: 16px; }
  .editor .tools { width: 112px; }
  .editor .props { width: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001s !important; transition-duration: .001s !important; }
}
body.reduced * { animation-duration: .001s !important; transition-duration: .001s !important; }