@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@600;700;800&display=swap');

:root { color-scheme: dark; font-family: Manrope, ui-sans-serif, system-ui, sans-serif; background: #0b1220; }
* { box-sizing: border-box; }
body { margin: 0; overflow: hidden; }
button { font: inherit; }
.game-shell { position: relative; min-height: 100vh; overflow: hidden; background: radial-gradient(circle at 50% 18%, #718ba0, #162334 78%); }
canvas { position:absolute; z-index:1; inset:0; display:block; width:100vw; height:100vh; touch-action:none; }
.hud { position:absolute; z-index:2; inset:0; pointer-events:none; padding:28px clamp(22px,4vw,54px); color:#f9f6ee; text-shadow:0 2px 12px #18253955; }
.brand { display:flex; align-items:center; gap:9px; font-weight:800; letter-spacing:-.05em; font-size:25px; }
.brand i { width:19px; height:19px; display:block; border:5px solid #ff765d; border-radius:50%; background:#101827; box-shadow:0 0 0 2px #f9f6ee33; }
.brand small { margin-left:5px; font:500 10px 'DM Mono',monospace; letter-spacing:.15em; color:#edf4f5aa; }
.score-panel, .size-panel { position:absolute; top:30px; padding:11px 14px 10px; border:1px solid #ffffff32; border-radius:13px; background:#1018273d; backdrop-filter: blur(8px); }
.score-panel { right:clamp(22px,4vw,54px); text-align:right; }.size-panel { right:clamp(22px,4vw,54px); top:103px; }
.score-panel span,.size-panel span,.objective span { display:block; font:500 10px 'DM Mono',monospace; letter-spacing:.16em; opacity:.72; }
.score-panel strong { font-size:28px; letter-spacing:-.07em; }.size-panel b { font-size:22px; letter-spacing:-.06em; }.size-panel em { margin-left:3px; font:500 11px 'DM Mono',monospace; opacity:.7; }
.objective { position:absolute; left:50%; bottom:33px; width:min(310px,calc(100vw - 250px)); transform:translateX(-50%); text-align:center; }
.objective strong { display:block; margin:4px 0 9px; font-size:14px; }.meter { height:5px; overflow:hidden; border-radius:99px; background:#ffffff3a; }.meter i { display:block; height:100%; width:12%; border-radius:inherit; background:#ff765d; transition:width .35s ease; }
.controls { position:absolute; z-index:2; left:clamp(22px,4vw,54px); bottom:25px; display:flex; align-items:center; gap:8px; color:#f8f5edcc; font-size:11px; }.controls p { margin:0 13px 0 0; }.controls span { opacity:.5; margin:0 4px; } kbd { display:inline-grid; place-items:center; min-width:20px; height:20px; margin:0 1px; border:1px solid #ffffff45; border-bottom-width:2px; border-radius:4px; font:500 10px 'DM Mono',monospace; }
.controls button { border:1px solid #ffffff42; border-radius:7px; padding:7px 9px; color:inherit; background:#12203375; cursor:pointer; }.controls button:hover { background:#ffffff22; }
.debug-panel { position:absolute; z-index:3; top:145px; right:clamp(22px,4vw,54px); width:315px; border:1px solid #7ce3bd88; border-radius:13px; background:#07111be8; box-shadow:0 15px 40px #0008; color:#c4f8e0; font:11px/1.5 'DM Mono',monospace; }.debug-panel>div { display:flex; justify-content:space-between; padding:10px 12px; border-bottom:1px solid #7ce3bd33; letter-spacing:.11em; }.debug-panel button { border:0; color:#c4f8e0; background:transparent; cursor:pointer; font-size:19px; line-height:12px; }.debug-panel pre { max-height:310px; overflow:auto; margin:0; padding:11px; white-space:pre-wrap; }
.toast { position:absolute; z-index:3; top:42%; left:50%; transform:translate(-50%,-50%) scale(.9); padding:11px 16px; border-radius:999px; background:#102037df; color:#fff9f1; font-size:13px; font-weight:700; opacity:0; transition:opacity .18s,transform .18s; pointer-events:none; }.toast.show { opacity:1; transform:translate(-50%,-50%) scale(1); }
.data-attribution { position:absolute; z-index:2; right:16px; bottom:8px; margin:0; color:#f4eee2aa; font:9px 'DM Mono',monospace; text-shadow:0 1px 4px #000; pointer-events:none; }
#holeio-debug-snapshot { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
@media(max-width:650px) { .brand small,.controls p { display:none; }.objective { bottom:76px; width:260px; }.controls { gap:5px; }.hud { padding-top:20px; }.score-panel { top:20px; }.size-panel{top:91px}.debug-panel{left:12px;right:12px;width:auto;top:140px;} }