:root{color-scheme:dark;--ink:#070810;--paper:#edf8ff;--cyan:#45f6ff;--pink:#ff3bbf;--acid:#d8ff35;--violet:#7d55ff;--panel:rgba(7,8,16,.88)}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#03040a;font-family:"Courier New",ui-monospace,monospace;color:var(--paper);touch-action:none;-webkit-tap-highlight-color:transparent}
button{font:inherit}
.machine{position:relative;width:100%;height:100%;min-height:300px;overflow:hidden;background:#050710;isolation:isolate}
#game{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;outline:0;background:#050710}
.machine::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:20;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 1px,transparent 1px,transparent 4px);mix-blend-mode:screen}
.menu-panel{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(18px,4vw,46px);background:radial-gradient(circle at 15% 10%,rgba(69,246,255,.18),transparent 34%),radial-gradient(circle at 85% 80%,rgba(255,59,191,.17),transparent 35%),linear-gradient(135deg,#070913,#11152b);overflow:auto}
.menu-panel[hidden]{display:none}
.menu-noise{position:absolute;inset:0;pointer-events:none;opacity:.16;background-image:radial-gradient(#fff .7px,transparent .8px);background-size:9px 9px}
.kicker,.deck,.mode-grid,.menu-actions,.menu-help,.menu-panel h1{position:relative;z-index:1}
.kicker{margin:0 0 7px;color:var(--cyan);font-size:clamp(9px,1.3vw,13px);font-weight:700;letter-spacing:.24em;text-align:center}
.menu-panel h1{margin:0;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(58px,11vw,126px);line-height:.82;letter-spacing:-.04em;font-style:italic;text-shadow:5px 0 var(--pink),-5px 0 var(--cyan),0 8px 28px #000}
.menu-panel h1 span{color:var(--acid)}
.deck{max-width:760px;margin:17px auto 20px;text-align:center;font-size:clamp(11px,1.6vw,16px);line-height:1.5;color:#c8d2e9}
.mode-grid{width:min(850px,100%);display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.mode-card{position:relative;min-height:142px;padding:17px 12px 13px;border:2px solid rgba(255,255,255,.2);background:rgba(0,0,0,.4);color:#aab3c9;text-align:left;cursor:pointer;overflow:hidden;transition:transform .12s,border-color .12s,background .12s,color .12s;--candidate-accent:var(--cyan);--candidate-accent-2:var(--pink)}
.mode-card::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:5px;background:var(--violet);transform:scaleX(0);transform-origin:left;transition:.15s}
.mode-card:hover,.mode-card.selected{transform:translateY(-4px);border-color:var(--candidate-accent);background:rgba(69,246,255,.11);color:#fff;box-shadow:0 0 24px rgba(69,246,255,.16)}
.mode-card.selected::after{transform:scaleX(1);background:linear-gradient(90deg,var(--candidate-accent),var(--candidate-accent-2),var(--acid))}
.mode-number{position:absolute;right:8px;top:5px;color:rgba(255,255,255,.15);font:800 34px/1 Impact,sans-serif}
.mode-card strong,.mode-card small,.mode-card em{display:block;position:relative}.mode-card strong{font:900 clamp(11px,1.3vw,15px)/1.1 Arial,sans-serif;letter-spacing:.08em}.candidate-title{margin-top:18px;color:#fff;font:900 14px/1.08 Arial,sans-serif;font-style:normal;letter-spacing:.025em;min-height:30px}.mode-card .candidate-meta{margin-top:7px;font-size:8px;line-height:1.35;color:#99a5bd;text-transform:uppercase}
.menu-actions{display:flex;gap:10px;margin-top:18px}
.generate-button,.surprise-button,.reroll-button,.corner-button{border:0;cursor:pointer;font-weight:900;letter-spacing:.08em}
.generate-button{padding:13px 21px;background:var(--acid);color:#090b0d;box-shadow:5px 5px 0 var(--pink)}
.generate-button:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--pink)}
.surprise-button{padding:13px 18px;background:transparent;color:#fff;border:2px solid var(--violet)}
.reroll-button{padding:13px 18px;background:transparent;color:var(--cyan);border:2px solid rgba(69,246,255,.55)}
.reroll-button:hover{background:rgba(69,246,255,.1)}
.menu-help{margin:16px 0 0;text-align:center;color:#7f8ca8;font-size:10px}
.specimen-card{position:absolute;z-index:5;left:14px;top:14px;width:min(285px,46vw);padding:8px 11px;border-left:4px solid var(--cyan);background:rgba(2,4,12,.74);backdrop-filter:blur(4px);pointer-events:none;text-shadow:0 1px 2px #000}
.specimen-card[hidden]{display:none}.specimen-card span,.specimen-card small{display:block}.specimen-card span{font-size:8px;letter-spacing:.18em;color:var(--cyan)}.specimen-card strong{display:block;margin:3px 0;font:900 13px Arial,sans-serif}.specimen-card small{font-size:9px;color:#afbad0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.announcement{position:absolute;z-index:7;left:50%;top:20%;transform:translate(-50%,-15px) scale(.94);padding:10px 18px;border:2px solid var(--pink);background:rgba(7,8,16,.92);color:white;font-weight:900;letter-spacing:.12em;text-align:center;opacity:0;pointer-events:none;transition:.22s}
.announcement.show{opacity:1;transform:translate(-50%,0) scale(1)}
.corner-button{position:absolute;z-index:8;right:40px;top:48px;padding:8px 11px;border:2px solid var(--cyan);background:rgba(4,7,13,.76);color:white;font-size:10px}.corner-button[hidden]{display:none}
@media(max-width:720px){.menu-panel{justify-content:flex-start;padding-top:max(20px,env(safe-area-inset-top))}.menu-panel h1{font-size:clamp(48px,17vw,82px)}.deck{margin:12px auto}.mode-grid{grid-template-columns:1fr 1fr}.mode-card{min-height:108px;padding:10px 9px}.candidate-title{margin-top:10px;min-height:25px;font-size:12px}.mode-card .candidate-meta{margin-top:4px;font-size:7px}.menu-actions{margin-top:12px;flex-wrap:wrap;justify-content:center}.menu-help{margin-top:12px}.specimen-card{left:8px;top:8px}.corner-button{right:8px;top:8px;bottom:auto}}
@media(max-width:520px){.menu-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.generate-button{grid-column:1/-1}.menu-actions button{padding:10px 8px;font-size:10px}}
@media(orientation:landscape) and (max-height:520px){.menu-panel{padding:8px 18px;justify-content:center}.kicker{margin-bottom:2px}.menu-panel h1{font-size:42px}.deck{margin:5px auto 7px;font-size:9px}.mode-grid{max-width:760px}.mode-card{min-height:86px;padding:8px}.candidate-title{margin-top:7px;min-height:13px;font-size:11px}.mode-card .candidate-meta{margin-top:4px;font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.menu-actions{margin-top:7px}.menu-actions button{padding:7px 11px}.menu-help{display:none}.specimen-card{max-width:245px}}