:root { --blue: #2F5BEA; --ink: #0A0A0A; --paper: #F2F2F2; --hand: "Ink Free", "Segoe Print", cursive; --bold: Impact, "Arial Black", sans-serif; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
html, body { margin: 0; height: 100%; background: var(--ink); color: var(--paper); font-family: "Segoe UI", -apple-system, Arial, sans-serif; overflow: hidden; touch-action: none; }
.hand { font-family: var(--hand); font-weight: 700; text-transform: uppercase; }
.bold { font-family: var(--bold); letter-spacing: 2px; }

/* --- wall */
#wall { position: absolute; left: 50%; top: 50%; width: 1080px; height: 1920px; transform-origin: 50% 50%; background: #000; }
#wall #scene { position: absolute; inset: 0; }
.overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; text-align: center; }
.overlay h1 { font-size: 170px; margin: 0; line-height: .9; transform: rotate(-4deg); text-shadow: 10px 10px 0 var(--blue), 0 0 40px rgba(0,0,0,.5); }
.overlay p { font-size: 46px; padding: 0 60px; margin: 30px 0 0; text-shadow: 0 4px 20px #000; }
.badge { position: absolute; top: 60px; left: 80px; background: var(--paper); color: var(--ink); font-family: var(--bold); font-size: 44px; padding: 8px 30px; transform: rotate(-2deg); }
.count { font-family: var(--bold); font-size: 420px; color: var(--paper); text-shadow: 14px 14px 0 var(--blue); }
.score { font-family: var(--bold); font-size: 120px; transform: rotate(-5deg); text-shadow: 10px 10px 0 var(--blue); }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.flash.go { animation: flash .6s ease-out; }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }
.result { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 40px; background: radial-gradient(circle at 30% 40%, #1b2f6e, #050505 70%); }
.result.on { display: flex; }
.result img.shot { width: 900px; box-shadow: 0 30px 80px #000; transform: rotate(-2deg); }
.result .side { width: 900px; display: flex; align-items: center; gap: 40px; }
.result .side h2 { font-family: var(--bold); font-size: 80px; margin: 0; line-height: 1; transform: rotate(-4deg); text-shadow: 8px 8px 0 var(--blue); }
.result .side p { font-size: 32px; }
.qrbox { background: #fff; padding: 22px; display: inline-block; margin-top: 20px; }
.spots, .riders { position: absolute; left: 0; right: 0; bottom: 70px; display: flex; justify-content: center; gap: 22px; }
.spots .th { width: 130px; height: 230px; background-size: cover; background-position: center; border: 5px solid rgba(255,255,255,.35); opacity: .6; transition: all .2s; }
.riders .th { border: 5px solid rgba(255,255,255,.35); background: rgba(0,0,0,.5); opacity: .6; transition: all .2s; }
.riders canvas { display: block; }
.th.on { border-color: var(--paper); opacity: 1; transform: translateY(-14px) scale(1.08); box-shadow: 10px 10px 0 var(--blue); }
.riders .name { font-family: var(--bold); font-size: 26px; text-align: center; padding: 4px 0 8px; }
.hud { position: absolute; top: 150px; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 22px; }
.hud .chip { font-family: var(--bold); font-size: 44px; background: var(--blue); color: #fff; padding: 6px 22px; transform: rotate(-3deg); }
.hud .ttl { font-family: var(--bold); font-size: 76px; letter-spacing: 3px; text-shadow: 6px 6px 0 #000; }
.arr { position: absolute; top: 46%; font-size: 120px; color: var(--paper); text-shadow: 8px 8px 0 var(--blue); animation: nudge 1s ease-in-out infinite; }
.arr.l { left: 30px; } .arr.r { right: 30px; animation-delay: .5s; }
@keyframes nudge { 50% { transform: scale(1.18); } }
.pick { position: absolute; bottom: 380px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; }
.pick.low { bottom: 160px; }
.pick small, .card-r small { font-family: var(--bold); font-size: 34px; letter-spacing: 6px; color: #9fb4ff; }
.pick b { font-family: var(--bold); font-size: 120px; line-height: 1; text-shadow: 8px 8px 0 var(--blue); }
.pick b.hand { font-family: var(--hand); font-size: 80px; }
.card-r { position: absolute; top: 270px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; }
.card-r b { font-family: var(--bold); font-size: 140px; line-height: 1; text-shadow: 10px 10px 0 var(--blue); }
.card-r em { font-style: normal; font-size: 34px; margin: 6px 0 18px; opacity: .9; }
.stat { display: flex; align-items: center; gap: 18px; width: 560px; margin: 5px 0; font-family: var(--bold); font-size: 30px; }
.stat span { width: 140px; text-align: right; }
.stat i { flex: 1; height: 22px; background: rgba(255,255,255,.2); transform: skewX(-15deg); }
.stat b { display: block; height: 100%; background: var(--paper); box-shadow: inset -6px 0 0 var(--blue); }

/* --- pad */
#pad { position: absolute; inset: 0; display: flex; flex-direction: column; }
.screen { display: none; flex: 1; flex-direction: column; align-items: center; justify-content: center; padding: 3vh 4vw; gap: 2.5vh; }
.screen.on { display: flex; }
.screen h1 { font-size: min(13vw, 12vh); margin: 0; line-height: .9; text-align: center; transform: rotate(-4deg); text-shadow: .08em .08em 0 var(--blue); }
.screen h2 { font-family: var(--bold); font-size: min(6vw, 6vh); margin: 0; letter-spacing: 2px; }
.screen p { font-size: min(3vw, 2.8vh); margin: 0; opacity: .85; text-align: center; max-width: 80vw; }
.btn { font-family: var(--bold); font-size: min(4.5vw, 4.5vh); letter-spacing: 2px; background: var(--paper); color: var(--ink); border: 0; padding: .45em 1.6em; box-shadow: .18em .18em 0 var(--blue); transform: rotate(-1.5deg); }
.btn:active { transform: rotate(-1.5deg) scale(.95); }
.btn.ghost { background: transparent; color: var(--paper); border: 3px solid var(--paper); box-shadow: none; }
.btn:disabled { opacity: .3; }
.row { display: flex; gap: 3vw; align-items: center; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16vw, 14vh), 1fr)); gap: 2vw; width: 100%; max-width: 92vw; }
.grid .card { aspect-ratio: 9/16; background-size: cover; background-position: center; border: 4px solid transparent; box-shadow: .3em .3em 0 var(--blue); }
.grid .card.on { border-color: var(--paper); }
.rcard { display: flex; flex-direction: column; align-items: center; border: 4px solid #333; padding: 1vh; background: #151515; }
.rcard.on { border-color: var(--blue); }
.rcard span { font-family: var(--bold); font-size: min(3vw, 3vh); margin-top: .5vh; }
.prev { height: min(56vh, 100vw); aspect-ratio: 9/16; background-size: cover; background-position: center; border: 5px solid var(--paper); box-shadow: .4em .4em 0 var(--blue); touch-action: pan-y; }
.pname { font-family: var(--bold); font-size: min(6vw, 5vh); letter-spacing: 3px; text-align: center; }
.pname small { display: block; font-family: inherit; font-size: .45em; opacity: .7; letter-spacing: 2px; }
.pad-ctl { display: flex; gap: 4vw; align-items: center; }
.dir { width: min(16vw, 11vh); height: min(16vw, 11vh); border-radius: 50%; border: 4px solid var(--paper); background: transparent; color: var(--paper); font-size: min(6vw, 5vh); }
.dir:active { background: var(--blue); }
#draw { height: min(72vh, 150vw); aspect-ratio: 9/16; background-size: cover; background-position: center; border: 4px solid var(--paper); touch-action: none; }
#mini { height: min(62vh, 120vw); aspect-ratio: 9/16; background: #111; border: 3px solid #333; }
#shutter { width: min(30vw, 30vh); height: min(30vw, 30vh); border-radius: 50%; background: var(--paper); border: min(2vw, 2vh) solid var(--blue); font-family: var(--bold); font-size: min(4vw, 4vh); color: var(--ink); }
#shutter:active { transform: scale(.93); }
#shutter:disabled { opacity: .3; }
.form { display: flex; flex-direction: column; gap: 1.5vh; width: min(80vw, 600px); font-size: min(2.6vw, 2.4vh); }
.form input[type=email] { font-size: 1.2em; padding: .5em; border: 0; }
.form label { display: flex; gap: .6em; align-items: flex-start; }
.form input[type=checkbox] { width: 1.4em; height: 1.4em; flex: none; }
.err { color: #ff6b6b; min-height: 1.2em; }