@font-face{font-family:Metal Mania;src:url(../fonts/MetalMania-Regular.ttf)format("truetype");font-display:swap}:root{--red:#e0262a;--tablet-w:clamp(300px, 21.4vw, 470px);--hud-font:"Helvetica Neue", "Arial", "Hiragino Sans", "Noto Sans JP", sans-serif;--count-font:"Arial Black", "Helvetica Neue", "Arial", sans-serif;--sway-x:0px;--sway-y:0px;--sway-r:0deg}*{box-sizing:border-box}html,body{color:#eee;height:100%;font-family:var(--hud-font);-webkit-user-select:none;user-select:none;background:#000;margin:0;overflow:hidden}#scene{touch-action:none;outline:none;width:100vw;height:100vh;display:block;position:fixed;inset:0}[hidden]{display:none!important}.hud{pointer-events:none;position:fixed;inset:0}.tablet{width:var(--tablet-w);perspective:1100px;transform-origin:30% 110%;transform:translate3d(var(--sway-x), var(--sway-y), 0) rotate(var(--sway-r));transition:top .32s cubic-bezier(.3,.7,.2,1),opacity .25s;position:absolute;top:33.5vh;left:13.4vw}.tablet.is-lowered{opacity:.7;top:104vh}.tablet__body{background:linear-gradient(160deg,#1b1b1b,#070707 40%,#0c0c0c);border:2px solid #3b3b3b;border-radius:20px;padding:11px 12px 12px;transform:rotateY(9deg)rotateX(2deg);box-shadow:0 0 0 1px #000,inset 0 0 0 1px #111,0 18px 40px #000000a6}.tablet__screen{aspect-ratio:.8;background:#000;border-radius:6px;flex-direction:column;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 0 18px #ffffff0d}.tablet__screen:after{content:"";pointer-events:none;background:linear-gradient(125deg,#ffffff12,#0000 38%);position:absolute;inset:0}.tablet__top{z-index:1;background:linear-gradient(#303030,#1d1d1d);border-radius:999px;justify-content:space-between;align-items:center;gap:6px;height:15%;margin:3.5% 3.5% 0;padding:0 2%;display:flex;position:relative}.tablet__count{text-align:center;font-family:var(--count-font);font-weight:900;font-size:calc(var(--tablet-w) * .15);letter-spacing:.01em;color:#f5f5f5;text-shadow:0 0 10px #ffffff73;font-variant-numeric:tabular-nums;flex:1;line-height:1}.tablet__count.is-bump{animation:.4s ease-out bump}@keyframes bump{30%{color:#e7a2ff;transform:scale(1.18)}}.tablet__slot{width:calc(var(--tablet-w) * .155);aspect-ratio:1;background:radial-gradient(#151515,#000 70%);border:2px solid #4a4a4a;border-radius:50%;flex:none;place-items:center;margin:-3% 0;display:grid;position:relative}.tablet__slot>svg:first-child{filter:drop-shadow(0 0 4px #e0262a8c);width:78%;height:78%;transition:opacity .2s,filter .2s}.tablet__slot.is-dim>svg:first-child{opacity:.35;filter:grayscale(.8)}.tablet__slot.is-hot{border-color:#b267ff;box-shadow:0 0 12px #b267ffcc}.tablet__slot.is-active{border-color:#ff8a5c;box-shadow:0 0 14px #ff5a3ce6}.tablet__key{font:700 calc(var(--tablet-w) * .032) / 1 var(--hud-font);color:#cfcfcf;background:#111;border:1px solid #555;border-radius:4px;padding:2px 4px;position:absolute;bottom:-8%;right:-6%}.tablet__cooldown{pointer-events:none;width:calc(100% + 4px);height:calc(100% + 4px);position:absolute;inset:-2px;transform:rotate(-90deg)}.tablet__cooldown circle{fill:none;stroke:#ff5a3c;stroke-width:3px;stroke-dasharray:100;stroke-dashoffset:100px}.tablet__map{flex:1;margin:2% 3.5% 0;position:relative}.tablet__map canvas{width:100%;height:100%;position:absolute;inset:0}.tablet__zoom{font:700 calc(var(--tablet-w) * .032) / 1 var(--hud-font);color:#9a9a9a;position:absolute;bottom:3%;left:3%}.tablet__timer{font:800 calc(var(--tablet-w) * .05) / 1 var(--count-font);color:#e9e9e9;font-variant-numeric:tabular-nums;text-shadow:0 0 6px #ffffff4d;align-items:center;gap:5px;display:flex;position:absolute;bottom:2.5%;right:3%}.tablet__timer i{border:2px solid;border-radius:50%;width:.8em;height:.8em;position:relative}.tablet__timer i:after{content:"";transform-origin:bottom;background:currentColor;width:2px;height:40%;position:absolute;top:12%;left:50%}.tablet__timer.is-low{color:#ff3b30;text-shadow:0 0 8px #ff281ecc;animation:1s steps(2,end) infinite blink}@keyframes blink{50%{opacity:.55}}.tablet__objective{text-align:center;font:700 calc(var(--tablet-w) * .045) / 1.1 "Arial", var(--hud-font);letter-spacing:.01em;text-transform:uppercase;color:#fff;background:#3a3a3a;margin:2% 3.5% 3.5%;padding:2.4% 3%}.prompt{font:600 16px/1 var(--hud-font);color:#eee;text-shadow:0 0 6px #000;align-items:center;gap:10px;animation:.2s fadein;display:flex;position:absolute;top:58%;left:50%;transform:translate(-50%)}.prompt kbd{font:800 14px/1 var(--hud-font);background:#0000008c;border:1.5px solid #ddd;border-radius:5px;padding:5px 8px;box-shadow:0 0 10px #b267ff99}.banner{font:400 clamp(28px, 3.4vw, 54px) / 1 "Metal Mania", var(--hud-font);letter-spacing:.04em;color:#f2e6d8;text-shadow:0 0 18px #ff461ecc,0 0 2px #000;white-space:nowrap;animation:3.6s ease-out forwards banner;position:absolute;top:22%;left:50%;transform:translate(-50%)}@keyframes banner{0%{opacity:0;transform:translate(-50%)scale(1.15)}12%,75%{opacity:1;transform:translate(-50%)scale(1)}to{opacity:0}}.subtitles{text-align:center;width:min(70vw,1100px);font:500 clamp(15px, 1.05vw, 22px) / 1.45 var(--hud-font);color:#ececec;text-shadow:0 0 4px #000,0 1px 2px #000;position:absolute;bottom:6.5vh;left:50%;transform:translate(-50%)}.subtitles p{margin:.2em 0;animation:.25s fadein}.subtitles p.is-out{opacity:0;transition:opacity .4s}.subtitles .speaker{color:#c9a2ff;margin-right:.4em}.saving{font:300 clamp(13px, .95vw, 19px) / 1 var(--hud-font);letter-spacing:.07em;color:#e1e1e1e0;text-shadow:0 0 4px #000;align-items:center;gap:9px;animation:.3s fadein;display:flex;position:absolute;bottom:2.6vh;right:2.4vw}.saving__icon{border:2px solid #e1e1e159;border-top-color:#fffffff2;border-radius:50%;width:.85em;height:.85em;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadein{0%{opacity:0}}.stats{color:#9f9;pointer-events:none;white-space:pre;z-index:20;background:#0009;margin:0;padding:8px 10px;font:12px/1.35 ui-monospace,Menlo,monospace;position:fixed;top:10px;right:10px}.screen{z-index:10;place-items:center;display:grid;position:fixed;inset:0}.screen--title{background:radial-gradient(at 50% 40%,#7808088c,#0000 60%),radial-gradient(at 50% 120%,#3c140099,#0000 60%),#050202}.screen--pause,.screen--end{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#0000009e}.title__inner,.pause__inner{text-align:center;flex-direction:column;align-items:center;gap:18px;max-width:820px;padding:0 24px;display:flex}.title__kicker{font:600 12px/1 var(--hud-font);letter-spacing:.4em;color:#b88;margin:0}.title__logo{color:#efe3d2;text-shadow:0 0 28px #ff28148c,0 4px #300;margin:0;font:400 clamp(56px,7.5vw,124px)/.9 Metal Mania,serif}.title__sub{color:#caa;letter-spacing:.2em;margin:0;font-size:14px}.title__api{color:#766;margin:0;font:12px/1 ui-monospace,Menlo,monospace}.progress{gap:8px;width:min(520px,80vw);display:grid}.progress__bar{background:#ffffff1a;height:3px;overflow:hidden}.progress__bar i{background:linear-gradient(90deg,#7a0c0c,#ff3b2f);width:0%;height:100%;transition:width .15s;display:block;box-shadow:0 0 10px #f33}#progress-label{color:#b99;letter-spacing:.05em;font:12px/1 ui-monospace,Menlo,monospace}.title__actions{gap:12px;display:flex}.btn{pointer-events:auto;font:400 26px/1 "Metal Mania", var(--hud-font);letter-spacing:.06em;color:#f4e7d6;cursor:pointer;text-shadow:0 0 10px #ff3c2899;background:linear-gradient(#5a0b0b,#2a0404);border:1px solid #a33;padding:12px 30px}.btn:hover:not(:disabled){background:linear-gradient(#7a1010,#3a0606)}.btn:disabled{opacity:.5;cursor:progress}.btn--ghost{font:600 14px/1 var(--hud-font);letter-spacing:.08em;background:0 0;border-color:#533}.controls{color:#b9a9a9;grid-template-columns:repeat(5,auto);gap:8px 22px;margin:6px 0 0;font-size:12px;display:grid}.controls div{align-items:baseline;gap:6px;display:flex}.controls dt{color:#eee;font-weight:700}.controls dd{margin:0}.pause__inner h2{color:#efe3d2;text-shadow:0 0 24px #ff281499;margin:0;font:400 72px/1 Metal Mania,serif}.fatal{color:#fdd;z-index:30;white-space:pre-wrap;background:#300;border:1px solid #a33;padding:14px;font:13px/1.5 ui-monospace,Menlo,monospace;position:fixed;inset:auto 20px 20px}