:root{color-scheme:dark;--cream:#fff7dc;--yellow:#ffd95a;--green:#77f29b;--blue:#68d7ff;--red:#ff5e68;--purple:#c58cff;--deep:#071108;--panel:#102315;--line:#31523b}*{box-sizing:border-box}html{min-height:100%;background:var(--deep)}body{margin:0;min-height:100vh;background:radial-gradient(circle at 14% 0,#234a28 0,transparent 34%),radial-gradient(circle at 88% 84%,#292452 0,transparent 32%),linear-gradient(180deg,#07150a,#071008 56%,#030604);color:var(--cream);font-family:"Courier New",ui-monospace,monospace;letter-spacing:.02em}.cabinet{width:min(1220px,calc(100% - 28px));margin:auto;padding:24px 0 34px}.masthead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 2px 17px}.kicker{margin:0 0 5px;color:var(--yellow);font-size:.72rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase}.masthead h1{margin:0;font-size:clamp(1.9rem,5.7vw,4.7rem);line-height:.85;letter-spacing:-.075em;text-shadow:4px 4px 0 #1e4b25}.masthead h1 span{display:block;color:var(--green);font-size:.46em;letter-spacing:.13em;margin-top:.18em}.status-lamps{display:flex;align-items:center;gap:12px;font-size:.66rem;font-weight:700;letter-spacing:.1em}.status-lamps span{display:flex;align-items:center;gap:7px}.lamp{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green)}button,select,input{font:inherit}.utility{border:1px solid var(--line);background:#0b1b10;color:#b9d8c0;border-radius:5px;padding:8px 10px;cursor:pointer;font-size:.64rem;letter-spacing:.08em}.utility:hover,.utility:focus-visible{border-color:var(--yellow);color:var(--yellow);outline:none}.mobile-only{display:none}.machine{display:grid;grid-template-columns:minmax(0,3fr) minmax(250px,1fr);gap:18px;align-items:start}.screen-frame{position:relative;padding:13px;border:2px solid #3d6747;background:linear-gradient(145deg,#24452d,#0d1c12 46%,#050a06);box-shadow:inset 0 0 0 4px #061008,0 24px 70px #000b;border-radius:12px}.screen-frame:before,.screen-frame:after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:#020402;border:1px solid #66836c;top:6px}.screen-frame:before{left:6px}.screen-frame:after{right:6px}.screen{position:relative;overflow:hidden;border:2px solid #17331d;border-radius:5px;background:#000;aspect-ratio:16/9;box-shadow:inset 0 0 38px #000,0 0 28px rgba(119,242,155,.08)}canvas{display:block;width:100%;height:100%;background:#0a1320;image-rendering:auto}.scanlines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,rgba(0,0,0,.18) 4px);mix-blend-mode:multiply;opacity:.32}.screen:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 58%,rgba(0,0,0,.5) 100%);box-shadow:inset 0 0 30px #000}.overlay{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:rgba(2,10,5,.5);text-align:center;padding:10px}.overlay.hidden{display:none}.panel{width:min(95%,470px);padding:17px;background:rgba(7,24,11,.86);border:1px solid rgba(119,242,155,.46);box-shadow:0 0 30px rgba(119,242,155,.13)}.panel.hidden,.hidden{display:none!important}.tiny{margin:0;color:var(--yellow);font-size:clamp(.5rem,1.45vw,.75rem);font-weight:800;letter-spacing:.11em}.danger{color:var(--red)}.logo{margin-top:8px;color:var(--cream);font-weight:900;line-height:.78;text-shadow:3px 0 0 #3f9150,-3px 0 0 #be7e38}.logo>span{display:block;font-size:clamp(2.4rem,7.5vw,5.4rem);letter-spacing:-.09em}.logo>small{display:block;margin-top:9px;color:var(--green);font-size:clamp(.8rem,2vw,1.3rem);letter-spacing:.32em;text-indent:.32em;text-shadow:none}.tagline{margin:14px 0 10px;color:#b8daba;font-size:clamp(.58rem,1.6vw,.8rem);letter-spacing:.15em}.hero-row{display:flex;align-items:center;justify-content:center;gap:15px;margin:5px 0 12px}.shadrack-icon,.didds-icon{font-size:clamp(1.7rem,5vw,2.7rem);filter:drop-shadow(2px 3px 0 #0008)}.versus{color:var(--red);font-size:.65rem;font-weight:900;letter-spacing:.1em}.arcade-button{border:2px solid var(--yellow);background:#152516;color:var(--yellow);padding:11px 16px;cursor:pointer;font-size:clamp(.62rem,1.6vw,.84rem);font-weight:900;letter-spacing:.08em;text-transform:uppercase;box-shadow:3px 3px 0 #50651d;animation:pulse 1.2s steps(2,end) infinite}.arcade-button:hover,.arcade-button:focus-visible{background:var(--yellow);color:#10200d;outline:none}.arcade-button.compact{padding:9px 12px;font-size:.7rem;animation:none}.micro{margin:9px 0 0;color:#83a68c;font-size:clamp(.48rem,1.35vw,.65rem);line-height:1.4}@keyframes pulse{50%{opacity:.58}}.cheat-message{margin:9px auto 0;padding:7px 10px;width:min(100%,370px);border:1px solid #6d5e22;background:#2a240b;color:var(--yellow);font-size:.63rem;font-weight:800;line-height:1.35}.stage-select{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center;margin:10px auto 0;width:min(100%,360px)}.stage-select label{font-size:.6rem;color:var(--green);letter-spacing:.1em}.stage-select select{min-width:0;border:1px solid var(--line);background:#08160c;color:var(--cream);padding:7px}.message-panel h2,.game-over-panel h2{margin:6px 0 0;color:var(--green);font-size:clamp(1.7rem,5.5vw,3.7rem);line-height:1}.message-body{margin:10px 0 0;color:var(--yellow);font-size:.75rem;font-weight:700;letter-spacing:.06em;line-height:1.5}.final-score{margin:8px 0 0;color:var(--yellow);font-size:clamp(1.35rem,4vw,2.5rem);font-weight:900;letter-spacing:.08em}.final-progress{margin:3px 0 11px;color:#9fc0a5;font-size:.67rem;letter-spacing:.1em}#scoreForm{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end;margin:0 auto;width:min(100%,310px)}#scoreForm label{grid-column:1/-1;text-align:left;color:var(--green);font-size:.62rem;font-weight:700;letter-spacing:.14em}#initials{width:100%;min-width:0;border:2px solid #41634a;background:#061109;color:var(--yellow);padding:8px 10px;text-align:center;text-transform:uppercase;font:900 1.35rem/1 "Courier New",monospace;letter-spacing:.42em;text-indent:.42em;outline:none}#initials:focus{border-color:var(--yellow);box-shadow:0 0 14px rgba(255,217,90,.25)}.saved-message{margin:10px 0 12px;color:var(--green);font-size:.73rem;font-weight:700;line-height:1.45}.side-panel{display:grid;gap:13px}.scoreboard,.controls,.briefing,.zone-list{border:1px solid var(--line);background:linear-gradient(145deg,rgba(17,40,23,.96),rgba(7,18,10,.96));box-shadow:0 14px 42px #0007;padding:14px;border-radius:7px}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:9px;border-bottom:1px solid #24432c}.panel-heading h2{margin:0;color:var(--green);font-size:.76rem;letter-spacing:.09em}.panel-heading span{color:#688a70;font-size:.53rem;letter-spacing:.12em}.high-scores{list-style:none;counter-reset:ranks;margin:9px 0 0;padding:0}.high-scores li{counter-increment:ranks;display:grid;grid-template-columns:22px 1fr auto;gap:7px;align-items:center;min-height:23px;border-bottom:1px dotted #24432c;font-size:.66rem}.high-scores li:before{content:counter(ranks,decimal-leading-zero);color:#64816a}.high-scores .name{color:var(--yellow);font-weight:900;letter-spacing:.12em}.high-scores .score{color:var(--cream);font-variant-numeric:tabular-nums}.high-scores li.loading,.high-scores li.empty{display:block;color:#688a70;padding:8px 0;border:0;font-size:.61rem}.high-scores li.loading:before,.high-scores li.empty:before{display:none}.controls dl{margin:9px 0 0}.controls dl div{display:flex;justify-content:space-between;align-items:center;border-bottom:1px dotted #24432c;padding:6px 0}.controls dt,.controls dd{margin:0}.controls dt{display:flex;gap:4px}.controls dd{color:#99b8a0;font-size:.61rem;letter-spacing:.05em;text-align:right}kbd{display:inline-grid;place-items:center;min-width:28px;height:24px;border:1px solid #53735b;border-bottom-width:3px;border-radius:3px;background:#09180d;color:var(--cream);font:700 .67rem "Courier New",monospace;padding:0 5px}.briefing p{margin:0;color:#91af98;font-size:.63rem;line-height:1.55}.zone-list ol{columns:2;column-gap:15px;margin:9px 0 0;padding:0;list-style:none;counter-reset:zones}.zone-list li{counter-increment:zones;break-inside:avoid;color:#93af99;font-size:.56rem;line-height:1.65;white-space:nowrap}.zone-list li:before{content:counter(zones,decimal-leading-zero) " ";color:var(--yellow)}footer{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:14px 3px 0;color:#64816a;font-size:.61rem;letter-spacing:.05em}footer a{color:#9bc8a5;text-decoration:none}footer a:hover,footer a:focus-visible{color:var(--yellow);outline:none}
/* touch controls */.touch-controls{display:none}body.touch-device{overscroll-behavior:none;-webkit-tap-highlight-color:transparent}body.touch-device .mobile-only{display:inline-block}body.touch-device .touch-controls{display:block;margin-top:7px;padding:7px;border:1px solid #31523b;border-radius:8px;background:linear-gradient(180deg,#102315,#061008);box-shadow:inset 0 0 0 2px #040a05;touch-action:none;user-select:none;-webkit-user-select:none}.touch-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px;color:#688a70;font-size:.5rem;font-weight:700;letter-spacing:.13em}.touch-toolbar button{border:0;background:transparent;color:#a6d4af;padding:4px 0;font-size:.49rem;font-weight:700;letter-spacing:.1em}.touch-deck{display:grid;grid-template-columns:1fr 1fr;align-items:center;justify-items:center;gap:14px;min-height:132px}.joystick{position:relative;width:124px;height:124px;border:2px solid #4f7658;border-radius:50%;background:radial-gradient(circle at 42% 36%,#315a39,#142c1a 58%,#061008 100%);box-shadow:inset 0 0 0 7px #07130a,0 8px 18px #000a;touch-action:none}.joystick:after{content:"";position:absolute;inset:30%;border:1px solid #31523b;border-radius:50%}.joystick-knob{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px;border:2px solid var(--yellow);border-radius:50%;background:radial-gradient(circle at 35% 30%,#9b7d43,#4a3b16 58%,#191204);box-shadow:0 5px 10px #000b,0 0 12px rgba(255,217,90,.2);transform:translate(0,0);transition:transform .03s linear;z-index:3}.joystick.is-active .joystick-knob{box-shadow:0 3px 8px #000b,0 0 20px rgba(255,217,90,.5)}.joystick-arrows{position:absolute;inset:7px;color:#77a181;font-size:.8rem;font-weight:900}.joystick-arrows span{position:absolute}.joystick-arrows span:nth-child(1){left:50%;top:0;transform:translateX(-50%)}.joystick-arrows span:nth-child(2){left:0;top:50%;transform:translateY(-50%)}.joystick-arrows span:nth-child(3){right:0;top:50%;transform:translateY(-50%)}.joystick-arrows span:nth-child(4){left:50%;bottom:0;transform:translateX(-50%)}.joystick-label{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);color:#80a888;font-size:.45rem;font-weight:900;letter-spacing:.12em}.action-button{display:grid;place-items:center;width:106px;height:106px;border:2px solid #8a5f24;border-bottom-width:7px;border-radius:50%;background:radial-gradient(circle at 38% 30%,#fff477,#d9a313 49%,#6b4307 74%);color:#241700;box-shadow:0 9px 18px #000b,inset 0 2px 3px rgba(255,255,255,.3);touch-action:none;user-select:none;-webkit-user-select:none}.action-button .action-core{font-size:1.5rem;line-height:.7;text-shadow:0 0 8px #fff}.action-button strong{font-size:.7rem;letter-spacing:.1em}.action-button small{color:#4f3104;font-size:.44rem;letter-spacing:.1em}.action-button.is-active,.action-button:active{transform:translateY(5px);border-bottom-width:2px;background:radial-gradient(circle at 45% 40%,#fffbd0,#ffcc25 35%,#9d6808 72%);box-shadow:0 3px 8px #000b,0 0 20px rgba(255,217,90,.65)}
body.mobile-game-mode{position:fixed;inset:0;overflow:hidden;background:#030704}body.mobile-game-mode .cabinet{width:100%;height:100%;padding:max(4px,env(safe-area-inset-top)) max(5px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left));overflow:hidden}body.mobile-game-mode .masthead,body.mobile-game-mode .side-panel,body.mobile-game-mode footer{display:none!important}body.mobile-game-mode .machine{display:block;height:100%}body.mobile-game-mode .screen-frame{display:flex;flex-direction:column;height:100%;padding:4px;border-radius:4px}body.mobile-game-mode .screen{flex:1 1 auto;min-height:0;width:100%;aspect-ratio:auto}body.mobile-game-mode canvas{object-fit:contain}body.mobile-game-mode .touch-controls{flex:0 0 auto;margin-top:4px;padding:4px}body.mobile-game-mode .touch-toolbar{display:none}body.mobile-game-mode .touch-deck{height:clamp(118px,31vh,170px);min-height:0}.mobile-game-mode .joystick{width:min(28vh,132px);height:min(28vh,132px)}.mobile-game-mode .action-button{width:min(24vh,112px);height:min(24vh,112px)}
@media(max-width:900px){.machine{grid-template-columns:1fr}.side-panel{grid-template-columns:repeat(2,minmax(0,1fr))}.briefing,.zone-list{grid-column:1/-1}.masthead{align-items:center}.status-lamps span{display:none}}@media(max-width:560px){.cabinet{width:min(100% - 12px,1220px);padding-top:10px}.masthead{margin-bottom:9px}.status-lamps{gap:5px}.utility{padding:7px;font-size:.51rem}.machine{gap:9px}.screen-frame{padding:6px}.side-panel{grid-template-columns:1fr}.briefing,.zone-list{grid-column:auto}.panel{padding:11px 8px}.logo>span{font-size:2.25rem}.logo>small{font-size:.7rem}.tagline{margin:9px 0 7px}.hero-row{margin:3px 0 7px}#scoreForm{grid-template-columns:1fr}.arcade-button.compact{width:100%}body.touch-device .cabinet{width:100%;padding:7px 6px calc(13px + env(safe-area-inset-bottom))}body.touch-device .masthead h1{font-size:1.5rem}body.touch-device .kicker{font-size:.5rem}body.touch-device .screen-frame{padding:4px}.touch-deck{min-height:116px}.joystick{width:110px;height:110px}.action-button{width:94px;height:94px}}
@media(orientation:landscape){body.touch-device:not(.mobile-game-mode) .cabinet{padding-top:4px}body.touch-device:not(.mobile-game-mode) .masthead{display:none}body.touch-device:not(.mobile-game-mode) .machine{display:grid;grid-template-columns:minmax(0,1fr);gap:4px}body.touch-device:not(.mobile-game-mode) .screen-frame{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,33vw);gap:5px;align-items:stretch}body.touch-device:not(.mobile-game-mode) .screen{aspect-ratio:auto;min-height:calc(100vh - 20px)}body.touch-device:not(.mobile-game-mode) .touch-controls{margin-top:0;display:flex;flex-direction:column;justify-content:center}body.touch-device:not(.mobile-game-mode) .touch-deck{height:100%;min-height:0;grid-template-columns:1fr 1fr}body.touch-device:not(.mobile-game-mode) .side-panel,body.touch-device:not(.mobile-game-mode) footer{display:none}}@media(prefers-reduced-motion:reduce){.arcade-button{animation:none}}