:root{--bg:#0b0020;--ink:#f5f0ff;--mag:#ff2bd6;--cyan:#19f0ff;--yel:#ffe600;--grn:#39ff14;--org:#ff7a00;--f:'Press Start 2P',monospace}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--f);font-size:12px;line-height:1.7;overflow:hidden;-webkit-text-size-adjust:100%}
button,input{font:inherit}
.crt{pointer-events:none;position:fixed;inset:0;z-index:50;background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.crt::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 120px rgba(0,0,0,.7)}
.screen[hidden]{display:none}
.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;text-align:center;padding-top:max(24px,env(safe-area-inset-top))}
h1,h2,h3{margin:0;text-transform:uppercase}
h2{color:var(--cyan);text-shadow:3px 3px 0 var(--mag);font-size:20px}
h3{color:var(--yel);font-size:12px}
.small{font-size:9px;opacity:.85}
.blink{animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* title */
.grid-floor{position:absolute;left:0;right:0;bottom:0;height:40vh;background:linear-gradient(transparent 0,rgba(255,43,214,.15) 100%),repeating-linear-gradient(90deg,var(--mag) 0 1px,transparent 1px 48px),repeating-linear-gradient(0deg,var(--mag) 0 1px,transparent 1px 32px);transform:perspective(300px) rotateX(60deg);transform-origin:bottom;opacity:.5;z-index:-1}
.logo{font-size:38px;line-height:1;display:flex;flex-direction:column;gap:4px}
.logo span:first-child{color:var(--yel);text-shadow:4px 4px 0 var(--org),8px 8px 0 #7a1e00}
.logo span:last-child{color:var(--cyan);text-shadow:4px 4px 0 var(--mag),8px 8px 0 #5a0050}
.tag{color:var(--mag);font-size:9px;letter-spacing:2px}

.box{background:#14003a;border:4px solid var(--cyan);box-shadow:8px 8px 0 var(--mag);padding:18px;display:flex;flex-direction:column;gap:12px;width:min(92vw,360px)}
.box label{font-size:9px;color:var(--yel)}
.row{display:flex;align-items:center;border:3px solid var(--ink);background:#000}
.at{padding:0 8px;color:var(--mag)}
input{flex:1;min-width:0;background:transparent;border:0;color:var(--grn);padding:10px 6px 10px 0;outline:none;text-transform:lowercase}
.btn{background:var(--mag);color:#fff;border:0;padding:14px 18px;box-shadow:0 5px 0 #8a0070;cursor:pointer;text-transform:uppercase;width:min(92vw,360px)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #8a0070}
.btn:disabled{background:#444;box-shadow:0 5px 0 #222;color:#999}
.btn-go{background:var(--grn);color:#062;box-shadow:0 5px 0 #0a7a00}
.btn-ghost{background:transparent;color:var(--cyan);box-shadow:none;border:3px solid var(--cyan)}

/* select */
.carts{display:flex;flex-direction:column;gap:20px;width:min(92vw,360px)}
.cart{display:flex;flex-direction:column;gap:8px;align-items:center;padding:20px 14px;border:4px solid;cursor:pointer;color:var(--ink);text-align:center;background:#000}
.cart-a{border-color:var(--yel);box-shadow:8px 8px 0 var(--org)}
.cart-b{border-color:var(--org);box-shadow:8px 8px 0 #b00}
.cart:active{transform:translate(4px,4px);box-shadow:2px 2px 0}
.cart-art{font-size:40px;line-height:1}
.cart-name{color:var(--yel);font-size:14px;line-height:1.4}
.cart-b .cart-name{color:var(--org)}
.cart-desc{font-size:8px;opacity:.8}

/* setup */
.steps{text-align:left;font-size:9px;padding-left:1.4em;margin:0;max-width:360px;line-height:1.9}
.steps li::marker{color:var(--yel)}
.cam-wrap{position:relative;width:min(80vw,260px);aspect-ratio:3/4;border:4px solid var(--cyan);background:#000;overflow:hidden}
#cam,#cam-overlay{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.status{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.75);font-size:8px;padding:6px;color:var(--yel)}
.status.ok{color:var(--grn)}
.status.bad{color:var(--org)}

/* game */
#s-game{padding:0}
#game{position:absolute;inset:0;width:100%;height:100%}
.hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:max(10px,env(safe-area-inset-top)) 12px 6px;background:linear-gradient(#000c,#0000);font-size:10px;pointer-events:none}
#hud-score{font-size:26px;color:var(--yel);text-shadow:3px 3px 0 var(--org)}
#hud-hint{color:var(--cyan);max-width:38%;text-align:right;font-size:8px}
.countdown{position:absolute;inset:0;display:grid;place-items:center;font-size:72px;color:var(--yel);text-shadow:6px 6px 0 var(--mag);pointer-events:none}

/* over */
.glitch{color:var(--org);text-shadow:-3px 0 var(--cyan),3px 0 var(--mag);animation:shake .3s steps(2) 6}
@keyframes shake{50%{transform:translateX(3px)}}
.score-label{margin:0;font-size:9px;color:var(--yel)}
.score{margin:0;font-size:40px;color:var(--grn)}
.board{text-align:left;margin:0;padding:0 0 0 1.6em;font-size:9px;width:min(92vw,360px);line-height:2}
.board li::marker{color:var(--yel)}
.board b{color:var(--cyan)}
.board .me{color:var(--grn)}