@font-face{font-family:Arcade;src:url('/fonts/Montserrat/Montserrat-BlackItalic.woff2') format('woff2');font-display:swap}
*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;background:#08090e;color:#ede7f4;font:13px/1.5 Arial,sans-serif;background-image:radial-gradient(ellipse at 42% 20%,#2c1c36 0,transparent 62%);min-height:100dvh}
button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:1px solid #6c5678;background:linear-gradient(170deg,#37273d,#1a1621 70%);border-radius:8px;min-height:44px;padding:8px 13px;box-shadow:inset 0 1px 0 #ffffff18,0 3px 0 #08080c,0 4px 6px #0006;transition:border-color .18s,box-shadow .18s,transform .18s}button:hover{border-color:#d58fff}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid #f3a8df;outline-offset:3px}
.site-bar{position:relative;min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 24px}.site-bar a{color:#e6bbf5;text-decoration:none}.site-bar>span{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:10px;letter-spacing:.2em;color:#a99aae}
main{padding:4px 14px 8px}.arcade-layout{display:flex;align-items:center;justify-content:center;gap:28px}.cabinet{flex:none;width:min(100%,calc((100dvh - 315px)*.6 + 26px),460px);min-width:285px;border:1px solid #7a5f7e;border-radius:20px;padding:12px;background:linear-gradient(110deg,#49334b 0,#241c2d 5%,#332535 27%,#17151f 54%,#36283a 94%,#130f19 100%);box-shadow:0 7px 0 #0b0910,0 9px 0 #4a354b,0 22px 36px #0009,0 30px 95px #0008,inset 1px 1px 1px #ffffff2e,inset -3px -3px 5px #000b;position:relative}.cabinet:before{content:'';position:absolute;inset:5px;border:1px solid #c898bc24;border-radius:15px;box-shadow:inset 0 1px 0 #ffffff0d;pointer-events:none}.cabinet:after{content:'';position:absolute;inset:12px auto 12px 3px;width:2px;border-radius:2px;background:linear-gradient(transparent,#fbaee335,transparent);pointer-events:none}
.marquee{display:flex;align-items:center;justify-content:space-between;padding:0 6px 8px;filter:drop-shadow(0 2px 1px #000b)}.marquee p{font:8px monospace;letter-spacing:.25em;margin:0;color:#bca3c9}h1{font-family:Arcade,Arial,sans-serif;font-size:30px;font-weight:900;letter-spacing:-.04em;font-style:italic;line-height:1.3;margin:0;background:linear-gradient(90deg,#007bff,#c91de1,#ff007f,#007bff);background-size:300% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:gradientMove 10s linear infinite}.cookie-mark{display:block;flex:none;width:35px;height:35px;background:linear-gradient(90deg,#007bff,#c91de1,#ff007f,#007bff);background-size:300% 100%;-webkit-mask:url('../img/cookie.svg') center/contain no-repeat;mask:url('../img/cookie.svg') center/contain no-repeat;mask-mode:luminance;-webkit-mask-source-type:luminance;animation:gradientMove 10s linear infinite;filter:drop-shadow(0 0 5px #c91de14d)}
@keyframes gradientMove{0%{background-position:0% 50%}100%{background-position:300% 50%}}
/* Recessed stadium display: lit dot matrix behind smoked glass. */
.scores{--led:#ffbd72;position:relative;display:grid;grid-template-columns:1.35fr 1.35fr 1fr .7fr;gap:5px 8px;margin:0 1px 12px;padding:7px 8px 5px;border:1px solid #060609;border-radius:7px;background:radial-gradient(circle at 1px 1px,#f7bc7f0a .6px,transparent .9px) 0 0/3px 3px,#06070a;box-shadow:0 1px 0 #b38eb13b,0 -1px 0 #f2b9da18,inset 0 2px 5px #000,inset 0 0 0 2px #111019;font:7px/1.2 monospace;letter-spacing:.12em;color:#b3885c;isolation:isolate}.scores:after{content:'';position:absolute;inset:2px;border-radius:5px;background:linear-gradient(110deg,#ffffff06,transparent 46%,#ffffff02);pointer-events:none;z-index:2}.scores>div:not(.cookie-scoreboard-row){min-width:0}.scores strong{display:block;margin-top:3px;font:16px/1.2 monospace;letter-spacing:.02em;font-weight:700;font-variant-numeric:tabular-nums;color:var(--led);filter:drop-shadow(0 0 3px #ff953d65);background:radial-gradient(circle at 1px 1px,var(--led) .75px,#c68f4840 .95px) 0 0/2px 2px;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.scores>div:nth-child(3),.scores>div:nth-child(4){--led:#8ce0e6;color:#67969f}.cookie-scoreboard-row{grid-column:1/-1;height:28px;margin-top:1px;padding-top:3px;border-top:1px solid #795a3338;overflow:hidden;pointer-events:none;contain:paint}.cookie-scoreboard-row #cookie-scoreboard{display:block;width:100%;height:24px;aspect-ratio:auto;image-rendering:pixelated;touch-action:auto;filter:drop-shadow(0 0 2px #e5a75b38)}
.table{position:relative;border:1px solid #74597e;border-radius:13px;overflow:hidden;background:#080910;box-shadow:0 0 0 3px #07080c,0 0 0 4px #b08aaf29,0 4px 5px #0007,inset 0 0 20px #000}.table:after{content:'';position:absolute;inset:0;border-radius:12px;box-shadow:inset 1px 1px 2px #ffffff28,inset -2px -2px 4px #0008;background:linear-gradient(125deg,#ffffff05,transparent 26%,transparent 78%,#ddb8ec03);pointer-events:none;z-index:3}canvas{display:block;width:100%;height:auto;aspect-ratio:3/5;touch-action:none}
#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;background:linear-gradient(#09091025,#0c0815cf 55%,#09091045);backdrop-filter:blur(1.5px)}#overlay[hidden]{display:none}#overlay-label{font:10px/1.6 monospace;letter-spacing:.13em;text-align:center;padding:10px;color:#f5d7ed}#start{border-color:#e49acb;background:linear-gradient(#512a57e8,#28122fef);padding:12px 32px;text-transform:uppercase;letter-spacing:.2em;box-shadow:inset 0 1px 0 #f8c8ec45,0 4px 0 #150c1a,0 0 30px #d54fa027}
.controls{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:8px;margin-top:12px;padding-bottom:3px}.controls button{position:relative;min-height:50px;touch-action:none;user-select:none;-webkit-user-select:none;font-size:24px;background:linear-gradient(155deg,#4b3450 0,#33243d 14%,#211a2a 76%,#17131e 100%);box-shadow:inset 0 1px #f6d7f13b,inset -1px -1px 3px #0009,0 4px 0 #0d0b12,0 5px 0 #69496e,0 7px 8px #0007}.controls button span{display:block;font:7px/1.2 Arial;letter-spacing:.1em;margin-top:2px}.controls #launch{font-size:10px;letter-spacing:.14em;padding-bottom:14px;overflow:hidden}.controls button.held{transform:translateY(3px);background:linear-gradient(#704274,#38233e);border-color:#ffc3ef;box-shadow:inset 0 2px 5px #0008,0 1px 0 #0b090e,0 2px 0 #69496e,0 0 20px #e88fda20}.controls #charge-meter{position:absolute;left:11px;right:11px;bottom:6px;height:3px;margin:0;background:#0c0b12;box-shadow:0 1px 0 #b48db32e;border-radius:2px;overflow:hidden}.controls #charge-meter:before{content:'';display:block;width:100%;height:100%;transform:scaleX(var(--charge,0));transform-origin:left;background:linear-gradient(90deg,#8fd6e5,#bc7bf3,#ff9bcf);box-shadow:0 0 8px #f99ad4}
#instructions{text-align:center;font:9px/1.9 monospace;color:#aa9baf;margin:14px 0 0}#instructions>span{padding:0 7px}footer{text-align:center;font:8px monospace;letter-spacing:.18em;color:#74647e;padding:6px}
.operator-panel{width:198px;flex:none;padding:24px 16px 20px;border:1px solid #68516f;border-radius:15px;background:linear-gradient(115deg,#38283d,#1b1622 12%,#101017 75%,#28202e);box-shadow:inset 1px 1px 0 #d4adcf25,inset -2px -2px 5px #000b,0 5px 0 #08080c,0 7px 0 #3e2e46,0 18px 45px #0008;position:relative}.brand-mark{display:flex;align-items:center;justify-content:center;gap:10px;color:#d7a1f4;font-size:42px;line-height:1;margin-bottom:23px;filter:drop-shadow(0 2px 1px #000)}.brand-mark .brand-type{font:italic 900 14px/1.05 Arcade,Arial;letter-spacing:-.04em;background:linear-gradient(90deg,#007bff,#c91de1,#ff007f,#007bff);background-size:300% 100%;color:transparent;background-clip:text;-webkit-background-clip:text;animation:gradientMove 10s linear infinite}.readout{border:1px solid #1c1721;border-radius:11px;padding:8px;background:linear-gradient(135deg,#55445a,#1b1720 30%,#3c3043);box-shadow:inset 1px 1px 0 #d4b1d337,0 1px 0 #cba8c52e,0 4px 6px #0008}.crt-screen{position:relative;width:100%;aspect-ratio:4/3;border:1px solid #000;border-radius:45% / 10%;background:#010202;box-shadow:inset 0 0 0 3px #000,inset 2px 1px 8px #000,inset -2px -4px 12px #000,0 1px 0 #9b829427,0 0 0 2px #100f14;overflow:hidden;isolation:isolate}.crt-screen #crt-display{position:absolute;inset:0;display:block;width:100%;height:100%;aspect-ratio:4/3;border-radius:inherit;touch-action:auto}.crt-screen:before{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse at 32% 12%,#e7f2ff16 0,transparent 37%),linear-gradient(145deg,#ffffff08,transparent 30%,transparent 79%,#d9deef04);box-shadow:inset 1px 1px 2px #ffffff1a;pointer-events:none;z-index:1}.crt-screen:after{content:'';position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(0deg,#0000 0,#0000 1px,#0003 2px,#0000 3px);box-shadow:inset 0 -5px 9px #000,inset -4px 0 8px #000,inset 4px 0 8px #000,inset 0 0 12px #0008;pointer-events:none;z-index:2}
.progress-block{padding-top:22px}.progress-block h2{font:8px monospace;font-weight:400;letter-spacing:.16em;color:#ad98b7;margin:0 0 12px}.circuit-lights{display:flex;flex-direction:column;gap:9px}.circuit-lights span{display:flex;gap:9px;align-items:center;font:8px monospace;color:#ad9bb5}.circuit-lights span:before{content:'';width:5px;height:5px;border:1px solid #765a85;border-radius:50%;background:#19151e;box-shadow:inset 0 1px 2px #000,0 1px 0 #c0a7c22b}.circuit-lights .lit:before{background:#8edbe0;border-color:#b1ffff;box-shadow:0 0 9px #96e7ef}.bank-row{display:flex;align-items:center;gap:10px;margin:9px 0}.bank-row>span{font:8px monospace;color:#8d7a99;margin-right:5px}.bank-row i{width:20px;height:5px;border-radius:1px;border:1px solid #5e436e;background:#160f1c;box-shadow:inset 0 1px 2px #000,0 1px 0 #c0a7c220}.bank-row .lit{background:#e898be;box-shadow:0 0 8px #da78b24a}.score-note{display:flex;align-items:center;justify-content:space-between;font:8px monospace;letter-spacing:.12em;color:#ad98b7}.score-note strong{font:21px monospace;color:#fac496}#code-display{height:62px;overflow:hidden;white-space:pre;margin:23px 0 20px;font:7px/1.75 monospace;letter-spacing:.02em;color:#766d86;mask-image:linear-gradient(#0008,#000 30%,#000 80%,transparent);user-select:none;contain:paint}.serial{font:7px monospace;letter-spacing:.15em;color:#5f506a}
@media(max-width:740px){.operator-panel{display:none}.site-bar{min-height:64px;padding:10px 14px}.site-bar>span{font-size:8px;letter-spacing:.1em}.cabinet{width:min(100%,calc((100dvh - 315px)*.6 + 26px));min-width:270px}h1{font-size:27px}.controls{gap:6px}.controls button{min-height:48px}}
@media(max-width:500px){.site-bar>span{display:none}.cabinet{padding:10px;width:min(100%,calc((100dvh - 315px)*.6 + 22px))}.marquee{padding-bottom:5px}.scores{margin-bottom:10px;gap:4px 6px;padding:6px 7px 5px}.scores strong{font-size:14px}h1{font-size:25px}.marquee .cookie-mark{width:32px;height:32px}.controls{margin-top:10px}#instructions{margin-top:12px;font-size:8px}footer{padding:4px}}
/* Keep the whole course and tactile controls in view on compact phones. */
@media(max-width:740px) and (max-height:760px) and (max-aspect-ratio:1/1){
 .cabinet{width:min(100%,330px);min-width:0}.table{width:min(100%,calc((100dvh - 278px)*.6));margin-inline:auto}
 .marquee{padding-bottom:3px}h1{font-size:21px}.marquee .cookie-mark{width:25px;height:25px}.scores{margin-bottom:9px;padding:5px 6px 4px}.scores strong{font-size:13px}.cookie-scoreboard-row{height:26px;padding-top:2px}
 .controls{margin-top:8px}.controls button{min-height:44px;padding:5px;font-size:19px;line-height:1.1}.controls button span{font-size:7px;margin-top:3px}.controls #launch{padding-bottom:12px;font-size:9px}.controls #launch>span:not(#charge-meter){font-size:6px}#instructions{margin-top:12px;font-size:8px}footer{display:none}
}
/* Landscape mounts the display and flippers beside the playfield. */
@media(max-height:500px) and (min-aspect-ratio:1/1){
 .site-bar{height:48px;min-height:48px;padding:4px 16px}.operator-panel{display:none}main{padding:0 8px 8px}.arcade-layout{display:block}
 .cabinet{display:grid;grid-template-columns:auto 158px;grid-template-rows:auto auto 1fr;gap:8px 12px;width:fit-content;min-width:0;padding:8px;margin:auto;border-radius:13px}
 .table{grid-column:1;grid-row:1/4;width:calc((100dvh - 82px)*.6);min-width:130px;margin:0}.marquee{grid-column:2;grid-row:1;padding:0}.marquee p{font-size:7px}h1{font-size:22px}.marquee .cookie-mark{display:none}
 .scores{grid-column:2;grid-row:2;grid-template-columns:1fr 1fr;gap:6px 8px;padding:8px 7px 5px;font-size:7px;margin:0}.scores strong{font-size:15px}.cookie-scoreboard-row{height:28px}
 .controls{grid-column:2;grid-row:3;align-self:end;grid-template-columns:1fr 1fr;gap:7px;margin-top:0}.controls button{min-height:44px;padding:4px;font-size:18px;line-height:1.1}.controls button span{font-size:7px;margin-top:2px}.controls #launch{grid-row:2;grid-column:1/3;font-size:10px;padding-bottom:13px}
 #instructions,footer{display:none}
}
@media(prefers-reduced-motion:reduce){h1,.brand-mark .brand-type,.cookie-mark{animation:none}button{transition:none}#overlay{backdrop-filter:none}}

/* One fixed grain layer keeps every cabinet surface in the same analog light. */
body:after{content:'';position:fixed;inset:0;z-index:20;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='grain' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch' seed='7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.9' filter='url(%23grain)'/%3E%3C/svg%3E");background-repeat:repeat;mix-blend-mode:soft-light}

/* Coin-door attract screen, drawn with stepped edges and warm phosphor light. */
#overlay[data-screen="coin"]{gap:12px;background:radial-gradient(ellipse at center,#0d0b15e8 0,#090910d9 40%,#09091060 100%)}
.credit-screen{height:91px;width:100%;display:grid;place-items:center;perspective:500px;pointer-events:none}
.arcade-token{position:relative;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;border:3px solid #f5cb75;background:linear-gradient(135deg,#e5ab4e,#614326 48%,#d9a45f 51%,#392618);box-shadow:inset 0 0 0 3px #5e3e21,inset 0 0 0 5px #e3ac57,4px 2px 0 #392619,6px 3px 0 #171114,0 0 24px #f9b6552e;animation:tokenTurn 6s ease-in-out infinite}
.arcade-token:before{content:'';position:absolute;inset:8px;border:2px dashed #e9ba64;border-radius:50%;opacity:.85}
.arcade-token>span{font:900 24px/1 'Courier New',monospace;color:#ffe7ad;text-shadow:2px 2px 0 #503419,-1px -1px 0 #9e743d;letter-spacing:-.1em;transform:translateX(-1px)}
#overlay[data-screen="coin"] #overlay-label{padding:0 4px;font:900 clamp(15px,4vw,21px)/1.45 'Courier New',monospace;letter-spacing:.1em;color:#ffe4a2;text-shadow:2px 0 #b7744c,0 2px #713935,0 0 15px #edaa4840}
.credit-hint{font:7px/1.5 'Courier New',monospace;letter-spacing:.12em;color:#a88b77;margin:-5px 0 7px}
#overlay[data-screen="coin"] #start{font:900 10px/1.4 'Courier New',monospace;letter-spacing:.22em;border-color:#b78960;background:linear-gradient(#392a24e8,#1c171bef);box-shadow:inset 0 1px 0 #f8d7a63b,0 3px 0 #100d12,0 0 20px #d88d3d16;padding:10px 27px}
#overlay[data-screen="coin"] #start:hover{border-color:#ffe4a2;box-shadow:inset 0 1px 0 #f8d7a63b,0 3px 0 #100d12,0 0 24px #d88d3d30}
#overlay[data-screen="score"] .credit-screen,#overlay[data-screen="score"] .credit-hint{display:none}
@keyframes tokenTurn{0%,35%,100%{transform:rotateY(-12deg) rotateZ(-7deg)}65%,78%{transform:rotateY(24deg) rotateZ(7deg)}}
@media(max-height:760px){.credit-screen{height:70px}.arcade-token{width:58px;height:58px}.arcade-token>span{font-size:20px}#overlay[data-screen="coin"]{gap:9px}.credit-hint{font-size:6px;margin-bottom:4px}}
@media(prefers-reduced-motion:reduce){.arcade-token{animation:none}}
