:root{--ink:#12121a;--paper:#fdfbf5;--pop:#ffd23f;--pop-2:#ff5fa8;--good:#5fe3b4;--panel:#12121ad1;--stroke:4px;font-family:Nunito,"Baloo 2",Trebuchet MS,system-ui,sans-serif}*{box-sizing:border-box}html,body{height:100%;color:var(--paper);-webkit-font-smoothing:antialiased;background:#0b0b10;margin:0;padding:0;overflow:hidden}#app{width:100vw;height:100vh;position:relative}#scene{width:100%;height:100%;display:block}#ui-root{pointer-events:none;-webkit-user-select:none;user-select:none;position:absolute;inset:0}#status{background:var(--panel);letter-spacing:.04em;opacity:0;pointer-events:none;z-index:40;border-radius:999px;padding:10px 18px;font-size:14px;font-weight:800;transition:opacity .25s;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}#status.visible{opacity:1}#status.error{text-align:center;background:#8f1d3a;border-radius:16px;max-width:min(640px,86vw);line-height:1.45}.chunky{letter-spacing:.02em;text-transform:uppercase;-webkit-text-stroke:var(--stroke) var(--ink);paint-order:stroke fill;text-shadow:0 6px #00000059;font-weight:900}.hud{display:none;position:absolute;inset:0}.hud.visible{display:block}.hud-coverage{text-align:center;position:absolute;top:22px;left:50%;transform:translate(-50%)}.hud-coverage .value{color:var(--pop);font-size:clamp(40px,6vw,76px);line-height:.95;display:block}.hud-coverage .label{letter-spacing:.28em;opacity:.75;margin-top:2px;font-size:12px;font-weight:800;display:block}.surface-pips{gap:8px;display:flex;position:absolute;top:26px;right:26px}.pip{flex-direction:column;align-items:center;gap:5px;display:flex}.pip-bar{border:3px solid var(--ink);background:#0a0a10bf;border-radius:8px;align-items:flex-end;width:16px;height:54px;display:flex;overflow:hidden}.pip-fill{background:var(--paper);transform-origin:bottom;width:100%;height:100%;transition:background-color .2s;transform:scaleY(0)}.pip.complete .pip-fill{background:var(--good)}.pip-label{letter-spacing:.06em;opacity:.55;font-size:11px;font-weight:900}.pip.active .pip-label{opacity:1;color:var(--pop)}.pip.active .pip-bar{box-shadow:0 0 0 3px #ffd23f8c}.paint-meter.low .fill{animation:.9s ease-in-out infinite meter-pulse}@keyframes meter-pulse{0%,to{opacity:1}50%{opacity:.55}}.hud-bottom{flex-direction:column;align-items:center;gap:14px;display:flex;position:absolute;bottom:26px;left:50%;transform:translate(-50%)}.paint-meter{border:3px solid var(--ink);background:#0a0a10bf;border-radius:999px;width:min(340px,60vw);height:22px;position:relative;overflow:hidden}.paint-meter .fill{background:var(--paper);transform-origin:0;border-radius:999px;width:100%;height:100%;transition:background-color .15s}.paint-meter.empty .fill{background:#6b2338!important}.paint-meter .caption{letter-spacing:.22em;color:var(--ink);mix-blend-mode:hard-light;place-items:center;font-size:11px;font-weight:900;display:grid;position:absolute;inset:0}.swatches{pointer-events:auto;gap:10px;display:flex}.swatch{border:3px solid var(--ink);cursor:pointer;border-radius:14px;width:44px;height:44px;padding:0;transition:transform .12s,box-shadow .12s;position:relative;box-shadow:0 4px #00000073}.swatch:hover{transform:translateY(-3px)}.swatch.active{box-shadow:0 8px 0 #00000080, 0 0 0 4px var(--paper);transform:translateY(-7px)}.swatch .key{opacity:.65;font-size:11px;font-weight:900;position:absolute;bottom:-20px;left:50%;transform:translate(-50%)}.hud-hints{letter-spacing:.14em;opacity:.6;gap:16px;margin-top:12px;font-size:11px;font-weight:800;display:flex}.hud-prompt{background:var(--pop);color:var(--ink);letter-spacing:.16em;border:3px solid var(--ink);opacity:0;border-radius:999px;padding:12px 22px;font-size:14px;font-weight:900;transition:opacity .18s;position:absolute;top:62%;left:50%;transform:translate(-50%)}.hud-prompt.visible{opacity:1}.overlay{pointer-events:auto;display:none;position:absolute;inset:0}.overlay.visible{display:block}.results{background:0 0}.results .edge-label{background:var(--panel);letter-spacing:.2em;opacity:0;border-radius:999px;padding:8px 16px;font-size:12px;font-weight:900;transition:opacity .3s;position:absolute;top:24px}.results.showing-wipe .edge-label{opacity:1}.results .edge-label.before{left:26px}.results .edge-label.after{right:26px}.wipe-handle{background:var(--paper);cursor:ew-resize;opacity:0;width:4px;transition:opacity .3s;position:absolute;top:0;bottom:0;transform:translate(-2px);box-shadow:0 0 0 2px #00000073}.results.showing-wipe .wipe-handle{opacity:1}.wipe-handle .knob{background:var(--paper);border:4px solid var(--ink);width:54px;height:54px;color:var(--ink);border-radius:50%;place-items:center;font-size:18px;font-weight:900;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 6px #00000073}.wipe-handle.nudge{animation:1.6s ease-in-out 2 nudge}@keyframes nudge{0%,to{margin-left:0}30%{margin-left:-26px}60%{margin-left:26px}}.stats-card{border:4px solid var(--ink);background:var(--panel);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-align:center;opacity:0;border-radius:24px;min-width:min(560px,88vw);padding:20px 26px 22px;transition:opacity .35s,transform .35s;position:absolute;bottom:30px;left:50%;transform:translate(-50%)}.results.showing-card .stats-card{opacity:1}.stats-card h2{color:var(--good);margin:0 0 14px;font-size:clamp(28px,4vw,44px)}.stats-row{flex-wrap:wrap;justify-content:center;gap:26px;margin-bottom:18px;display:flex}.stat{min-width:76px}.stat .n{color:var(--pop);font-size:26px;font-weight:900;display:block}.stat .k{letter-spacing:.16em;opacity:.6;margin-top:2px;font-size:10px;font-weight:900;display:block}.button-row{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.chunky-button{border:4px solid var(--ink);background:var(--paper);color:var(--ink);font:inherit;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border-radius:14px;padding:12px 22px;font-size:13px;font-weight:900;transition:transform .1s,box-shadow .1s;box-shadow:0 5px #00000073}.chunky-button:hover{transform:translateY(-2px);box-shadow:0 7px #00000073}.chunky-button:active{transform:translateY(2px);box-shadow:0 2px #00000073}.chunky-button.primary{background:var(--pop)}.chunky-button.ghost{color:var(--paper);box-shadow:none;background:0 0;border-color:#fdfbf559}.replay-banner{background:var(--pop-2);color:var(--ink);border:3px solid var(--ink);letter-spacing:.2em;border-radius:999px;padding:10px 20px;font-size:12px;font-weight:900;display:none;position:absolute;top:26px;left:50%;transform:translate(-50%)}.results.replaying .replay-banner{display:block}.results.replaying .stats-card,.results.replaying .wipe-handle,.results.replaying .edge-label{opacity:0;pointer-events:none}