:root{
  --bg:#0a0e1f;--surface:#11172e;--line:#222b4d;--line-2:#2f3a66;
  --txt:#e7ebf7;--mute:#8a94b8;--accent:#f2b84b;--accent-ink:#1a1305;--err:#ff8a8a;
  --font:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);font-family:var(--font);overscroll-behavior:none;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-font-smoothing:antialiased}
svg{width:18px;height:18px;flex:none}

#app{height:100dvh;display:flex;flex-direction:column;align-items:center;gap:10px;padding:max(12px,env(safe-area-inset-top)) 14px max(12px,env(safe-area-inset-bottom))}

.top{width:min(100%,420px);display:flex;align-items:center;gap:14px}
.brand{font-size:13px;font-weight:700;letter-spacing:.28em;color:var(--txt);flex:1}
.stats{display:flex;gap:18px}
.stat{display:flex;flex-direction:column;align-items:flex-end;line-height:1}
.stat span{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.stat b{font-family:var(--mono);font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
.icon-btn{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--mute);cursor:pointer}
.icon-btn:hover{color:var(--txt);border-color:var(--line-2)}

.cabinet{position:relative;flex:1;min-height:0;aspect-ratio:7/15;max-width:100%;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);overflow:hidden;box-shadow:0 20px 50px -20px #000a}
canvas{display:block;width:100%;height:100%}

.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:16px;background:rgba(7,10,24,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.overlay[hidden]{display:none}
.panel{width:100%;max-width:240px;display:flex;flex-direction:column;gap:12px;text-align:left}
.panel.wide{max-width:280px}
.eyebrow{margin:0;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
h2{margin:0;font-size:30px;font-weight:700;letter-spacing:-.01em}

.field{display:flex;flex-direction:column;gap:6px;margin-top:4px}
label{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
input{width:100%;padding:11px 12px;font:inherit;font-size:16px;border-radius:8px;border:1px solid var(--line-2);background:#0c1226;color:var(--txt);outline:none;user-select:text;-webkit-user-select:text}
input::placeholder{color:#566090}
input:focus{border-color:var(--accent)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px 14px;font:inherit;font-size:14px;font-weight:600;border-radius:8px;border:1px solid var(--line-2);background:transparent;color:var(--txt);cursor:pointer;transition:background .15s,border-color .15s}
.btn:hover{background:#ffffff0a}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:#f6c76a}
.btn:active{transform:translateY(1px)}
.row{display:flex;gap:8px}
.row .btn{flex:1}

.hint{margin:0;font-size:12px;line-height:1.45;color:var(--mute)}
.hint:empty{display:none}
.hint.warn{color:var(--accent)}
.err{margin:0;font-size:12px;color:var(--err)}

.result{display:flex;align-items:baseline;gap:8px}
.result b{font-family:var(--mono);font-size:64px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.result span{font-size:14px;color:var(--mute)}

#rankList{list-style:none;margin:0;padding:0;max-height:300px;overflow:auto;border-top:1px solid var(--line)}
#rankList li{display:flex;gap:10px;align-items:baseline;padding:9px 6px;border-bottom:1px solid var(--line);font-size:14px}
#rankList .pos{width:24px;font-family:var(--mono);font-size:12px;color:var(--mute)}
#rankList .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#rankList b{font-family:var(--mono);font-weight:600}
#rankList li:nth-child(-n+3) .pos{color:var(--accent)}
#rankList li.me{background:#f2b84b14}

/* ===== sin zoom ni selección ===== */
html,body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
*{touch-action:pan-x pan-y}
#game,#game *{touch-action:none}
input,textarea{-webkit-user-select:text;user-select:text;touch-action:manipulation}
img,svg,canvas{-webkit-user-drag:none;user-drag:none}