:root{--ink: #f4f1e8;--dim: #98a0aa;--amber: #ffd479}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#07080c radial-gradient(120% 90% at 50% 0%,#1a1c26,#07080c 62%) no-repeat;color:var(--ink);font-family:"Press Start 2P",ui-monospace,SFMono-Regular,monospace;-webkit-font-smoothing:none;-webkit-text-size-adjust:100%;overscroll-behavior:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.app{min-height:100dvh;display:grid;place-items:center;padding:16px 8px 20px}.cabinet{--face-hi: #414858;--face-mid: #2c313d;--face-lo: #1d212a;--well-hi: #13161d;--well-lo: #0a0c11;--lip: rgba(255, 255, 255, .08);--screw-in: 12px;position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;padding:18px 18px 24px;border-radius:22px;background:radial-gradient(circle at var(--screw-in) var(--screw-in),#0d1015 0 2px,#4d5464 2px 3.4px,rgba(77,84,100,0) 3.4px),radial-gradient(circle at calc(100% - var(--screw-in)) var(--screw-in),#0d1015 0 2px,#4d5464 2px 3.4px,rgba(77,84,100,0) 3.4px),radial-gradient(circle at var(--screw-in) calc(100% - var(--screw-in)),#0b0e13 0 2px,#2c313c 2px 3.4px,rgba(44,49,60,0) 3.4px),radial-gradient(circle at calc(100% - var(--screw-in)) calc(100% - var(--screw-in)),#0b0e13 0,#0b0e13 2px,#2c313c 2px,#2c313c 3.4px,#2c313c00 3.4px),linear-gradient(var(--face-hi) 0,var(--face-mid) 44%,var(--face-lo) 100%);box-shadow:inset 0 1px #ffffff29,inset 2px 0 #ffffff0a,inset -2px 0 #00000038,inset 0 -3px #00000073,0 0 0 1px #0b0d12,0 3px #0b0d12,0 24px 48px #0000009e}.cabinet:after{content:"VIRTUAL INSANITY 96";position:absolute;bottom:7px;left:0;right:0;font-size:7px;letter-spacing:2px;text-indent:2px;text-align:center;color:#565e6f;text-shadow:0 1px 0 rgba(0,0,0,.55);pointer-events:none}.bezel{position:relative;display:flex;flex:none;justify-content:center;width:100%;padding:9px;border-radius:13px;background:linear-gradient(var(--well-hi),var(--well-lo));box-shadow:inset 0 3px 6px #000c,inset 0 0 0 1px #0009,0 1px 0 var(--lip)}.chrome{display:flex;flex:none;flex-direction:column;align-items:center;gap:9px;width:100%}.screen{position:relative;flex:none;container-type:size;overflow:hidden;border-radius:5px;box-shadow:0 0 0 1px #04060a,0 0 0 2px #23272f,0 0 18px #78aaff0f;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.screen canvas{display:block;width:100%;height:100%;image-rendering:pixelated}.scanlines{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(148deg,#ffffff12 0,#ffffff12 16%,#fff0 44%),radial-gradient(120% 88% at 50% 46%,#0000 54%,#0000004d),repeating-linear-gradient(to bottom,rgba(0,0,0,.075) 0,rgba(0,0,0,.075) 1px,transparent 1px,transparent .431cqw)}.hud{position:absolute;top:1.29cqw;left:1.29cqw;right:1.29cqw;display:flex;align-items:center;justify-content:space-between;gap:.86cqw;font-size:2.16cqw;pointer-events:none}.hud .left{display:flex;align-items:center;gap:1.29cqw}.plate{display:flex;align-items:center;gap:.86cqw;padding:.86cqw;background:#08090eb8;border:1px solid rgba(244,241,232,.28)}.plate .label{color:var(--dim)}.plate .value{color:var(--ink)}.hats{gap:.86cqw}.hat{position:relative;display:block;width:3.88cqw;height:2.59cqw}.hat:before,.hat:after{content:"";position:absolute;background:var(--ink)}.hat:before{left:.86cqw;top:0;width:2.16cqw;height:1.29cqw}.hat:after{left:0;bottom:.431cqw;width:3.88cqw;height:.86cqw}.hat.gone{opacity:.22}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;justify-items:center;gap:2.16cqw;text-align:center;background:#06070b8c}.overlay h1,.overlay h2{margin:0;color:#fff3d0;line-height:1.3;text-shadow:.431cqw .431cqw 0 #2a5083}.overlay h1{font-size:6.47cqw;letter-spacing:.22cqw}.overlay h2{font-size:5.6cqw}.overlay .tag{margin:0;font-size:2.59cqw;line-height:1.5}.overlay .dim{color:var(--dim)}.overlay .lyric{margin:0;font-size:2.59cqw;line-height:1.6;color:#cdd6e2;text-shadow:.431cqw .431cqw 0 rgba(10,12,20,.7)}.overlay.credits{background:#06070bf5;gap:3.45cqw;padding:5.17cqw 3.45cqw}.overlay.credits:before{content:"";position:absolute;top:2.16cqw;right:2.16cqw;bottom:2.16cqw;left:2.16cqw;border:.431cqw solid #39424f;pointer-events:none}.overlay.credits .reel{display:flex;flex-direction:column;align-items:center;gap:4.31cqw;max-width:100%}.overlay.credits .tag{font-size:3.45cqw;letter-spacing:.86cqw;text-indent:.86cqw;color:#fff3d0;text-shadow:.431cqw .431cqw 0 #2a5083}.overlay.credits .rule{margin-top:-2.59cqw;width:30.17cqw;height:.431cqw;background:repeating-linear-gradient(to right,rgba(255,212,121,.55) 0 .86cqw,transparent .86cqw 1.72cqw)}.overlay.credits .pip{width:.86cqw;height:.86cqw;background:#454d5c;box-shadow:-2.59cqw 0 #454d5c,2.59cqw 0 #454d5c}.overlay.credits .bill{display:flex;flex-direction:column;align-items:center;gap:.431cqw;max-width:100%}.overlay.credits .bill p{margin:0;line-height:1.4;text-align:center;text-wrap:balance}.overlay.credits .role{font-size:1.72cqw;letter-spacing:.431cqw;color:#767e8c}.overlay.credits .lead{font-size:2.59cqw;color:var(--amber);text-shadow:.431cqw .431cqw 0 rgba(10,12,20,.8)}.overlay.credits .name{font-size:2.16cqw;color:#dfe4ec}.overlay.credits .from{font-size:1.72cqw;line-height:1.6;color:#8b93a1}.overlay.credits .links{display:flex;flex-direction:column;align-items:center;gap:1.72cqw;margin-top:1.29cqw;font-size:1.72cqw}.overlay.credits a{color:#b7bec8;text-decoration:none;border-bottom:.431cqw solid #4a5058;padding-bottom:.431cqw}.overlay.credits a:hover,.overlay.credits a:focus-visible{color:var(--amber);border-bottom-color:#ffd47999}.overlay.credits .fine{margin:0;max-width:76cqw;font-size:1.72cqw;line-height:1.7;text-align:center;text-wrap:balance;color:#565d67}@container (min-aspect-ratio: 3 / 4){.overlay.credits{gap:2.59cqw;padding:3.45cqw}.overlay.credits .reel{gap:2.59cqw}.overlay.credits .rule{margin-top:-1.29cqw}.overlay.credits .links{gap:1.29cqw;margin-top:.86cqw}}.overlay .tally{margin:0;font-size:2.16cqw;color:#aab3c0}.overlay .share{font:inherit;font-size:2.59cqw;color:var(--amber);background:#0a0c12d9;border:1px solid rgba(255,212,121,.55);padding:1.29cqw 2.59cqw;cursor:pointer;touch-action:manipulation}.overlay .share:hover{color:#fff3d0;border-color:#ffd479;background:#1e180ae6}.overlay .legend{margin:0;font-size:2.16cqw;color:#ffd479;letter-spacing:.09cqw}.overlay .blink{margin:.86cqw 0 0;font-size:3.02cqw;color:var(--amber);animation:blink 1.05s steps(2,start) infinite}@keyframes blink{50%{opacity:0}}.badges{position:absolute;bottom:1.72cqw;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:.86cqw;pointer-events:none}.badge{padding:.86cqw 1.72cqw;background:#06070bcc;border:1px solid rgba(168,216,255,.35);color:#a8d8ff;font-size:2.16cqw;white-space:nowrap}.badge.warn{color:#ff9a8a;border-color:#ff9a8a80;animation:blink .4s steps(2,start) infinite}.dpad{--apex: 36%;--seam-x: 1.2%;--seam-y: 2px;position:relative;width:100%;height:142px;border-radius:42px;overflow:hidden;background:radial-gradient(72% 120% at 50% 50%,#0a0e15,#12161e);box-shadow:0 0 0 1px var(--lip),0 3px 7px #00000073;touch-action:none;user-select:none;-webkit-user-select:none}.dpad:before{content:"";position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;border-radius:inherit;box-shadow:inset 0 0 0 5px #090c12,inset 0 0 0 6px #ffffff0d;pointer-events:none}.dpad .key{position:absolute;top:0;right:0;bottom:0;left:0;display:block;padding:0;border:0;border-radius:0;color:#e9e4d8;background:#2b303c;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;filter:drop-shadow(0 -1px 0 rgba(255,255,255,.18)) drop-shadow(0 2px 2px rgba(0,0,0,.5))}.dpad .up{clip-path:polygon(var(--seam-x) 0,calc(100% - var(--seam-x)) 0,calc(100% - var(--apex)) calc(50% - var(--seam-y)),var(--apex) calc(50% - var(--seam-y)));background:linear-gradient(to bottom,#464d5f,#3a4150 46%,#363d4a)}.dpad .down{clip-path:polygon(var(--seam-x) 100%,calc(100% - var(--seam-x)) 100%,calc(100% - var(--apex)) calc(50% + var(--seam-y)),var(--apex) calc(50% + var(--seam-y)));background:linear-gradient(to top,#262c37,#2e3441 54%,#323844)}.dpad .left{clip-path:polygon(0 0,var(--apex) 50%,0 100%);background:linear-gradient(to right,#414859,#353c49 60%,#333a46)}.dpad .right{clip-path:polygon(100% 0,calc(100% - var(--apex)) 50%,100% 100%);background:linear-gradient(to left,#2a303c,#2f3643 60%,#333a46)}.dpad .key.on,.dpad .up.on,.dpad .down.on,.dpad .left.on,.dpad .right.on{color:#fff0cd;background:linear-gradient(to bottom,#6a5729,#4c3f1a 60%,#3d3214);filter:drop-shadow(0 1px 0 rgba(0,0,0,.5))}.dpad:after{content:"";position:absolute;top:50%;left:50%;width:26px;height:26px;transform:translate(-50%,-50%);border-radius:50%;background:linear-gradient(#3c4351,#2c323e 60%,#262c37);box-shadow:inset 0 1px #ffffff24,inset 0 -1px #00000080,0 0 0 1px #0b0d12,0 2px 3px #00000080;pointer-events:none}.dpad .arrow{position:absolute;display:block;transform:translate(-50%,-50%);image-rendering:pixelated;filter:drop-shadow(1px 1px 0 rgba(0,0,0,.55))}.dpad .key.on .arrow{transform:translate(-50%,-50%) translate(1px,1px)}.dpad .up .arrow{left:50%;top:20%}.dpad .down .arrow{left:50%;top:80%}.dpad .left .arrow{left:12%;top:50%}.dpad .right .arrow{left:88%;top:50%}.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;font-size:10px;color:#7c8496;text-shadow:0 1px 0 rgba(0,0,0,.5)}.controls b{color:#ccd3df}.controls button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:30px;font:inherit;font-size:10px;color:#ccd3df;background:linear-gradient(#464d5e 0,#343a48 52%,#272c37);border:0;border-radius:999px;padding:8px 12px;cursor:pointer;touch-action:manipulation;text-shadow:0 -1px 0 rgba(0,0,0,.5);box-shadow:inset 0 1px #ffffff2e,inset 0 -2px #00000061,0 2px #10131a,0 3px 6px #00000073}.controls .icon{padding:0 11px}.controls .icon.round{gap:0;width:34px;height:34px;padding:0;border-radius:50%}.controls .glyph{display:block;filter:drop-shadow(0 1px 0 rgba(0,0,0,.45))}.controls button:hover{color:#fff}.controls button:active{transform:translateY(2px);box-shadow:inset 0 2px 4px #00000080,0 0 #10131a}.controls button:focus-visible{outline:2px solid rgba(255,212,121,.7);outline-offset:2px}.controls button.on{color:#fff0cd;background:linear-gradient(#6d5b2c 0,#574718 52%,#453714);box-shadow:inset 0 1px #ffe0a04d,inset 0 -2px #0006,0 2px #10131a,0 3px 6px #00000073,0 0 10px #ffbe5a2e}.rotate{display:none}@media(max-width:720px){.app{padding:8px 6px 12px}.cabinet{--screw-in: 9px;gap:9px;padding:12px 12px 18px;border-radius:17px}.cabinet:after{bottom:5px;font-size:6px;letter-spacing:1.5px}.bezel{padding:6px;border-radius:10px}.dpad{height:134px}.controls,.controls button{font-size:9px}.controls button{min-height:34px;padding:0 12px}}@media(orientation:landscape)and (max-height:560px){.cabinet{--screw-in: 8px;flex-direction:row;align-items:center;gap:10px;padding:11px;border-radius:16px}.cabinet:after{display:none}.bezel{width:auto}.chrome{width:auto;justify-content:center}.dpad{width:300px;height:124px}.rotate{display:block;margin:0;font-size:9px;color:var(--dim);text-align:center}}.offscreen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}