:root { --bg:#0a0a12; --panel:#16161f; --panel-2:#1c1c27; --text:#f8f7fb; --muted:#aaa9b4; --purple:#7e43ff; --pink:#df3cf4; --line:#33333f; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:"DM Sans",sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at 88% 9%,rgba(87,43,205,.2),transparent 20%),radial-gradient(circle at 8% 72%,rgba(215,60,244,.08),transparent 25%); }
.game-page { position:relative; min-height:100dvh; overflow:hidden; display:flex; flex-direction:column; }
.game-header { height:74px; width:min(820px,100%); display:flex; align-items:center; padding:0 18px; margin:0 auto; justify-content:space-between; }
.brand { color:#f8f7fb; display:flex; gap:10px; align-items:center; text-decoration:none; font:700 25px "Space Grotesk",sans-serif; letter-spacing:-1.2px; }.brand span span{color:#8846ff}.brand-icon{display:grid;place-items:center;width:30px;height:19px;border-radius:12px;background:#fff;color:#15151d;font-size:13px;}
.eyebrow{font-size:15px;font-weight:700;letter-spacing:1.3px;color:#8a4dff;margin:0 0 15px}
.instructions{color:var(--muted);font-size:14px;margin:0}kbd{border:1px solid #4a4855;border-bottom-width:3px;border-radius:5px;padding:2px 5px;font:600 11px inherit;color:#ddd}
.game-section{max-width:820px;width:100%;margin:auto;padding:16px 18px 30px}
.game-card{position:relative;max-width:520px;margin:auto;border-radius:28px;overflow:hidden;border:1px solid #3a3945;background:#11111a;box-shadow:0 24px 60px rgba(0,0,0,.35);aspect-ratio:4/5}.game-card:after{content:"";position:absolute;inset:0;border-radius:28px;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}canvas{display:block;width:100%;height:100%;touch-action:manipulation}.game-ui{position:absolute;top:20px;text-align:center;z-index:2}.game-ui span{display:block;color:#bcb8c9;font-size:10px;letter-spacing:1.4px;font-weight:700}.game-ui strong{font:700 29px "Space Grotesk",sans-serif}.score-ui{left:50%;transform:translateX(-50%)}.best-ui{right:20px}.best-ui strong{font-size:20px}.game-overlay{position:absolute;z-index:3;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:30px;background:linear-gradient(rgba(10,10,18,.08),rgba(10,10,18,.5));transition:opacity .18s}.game-overlay.hidden{opacity:0;pointer-events:none}.overlay-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:17px;background:linear-gradient(135deg,#7740ff,#e440f6);font-size:23px;margin-bottom:17px}.game-overlay h3{font:700 33px "Space Grotesk",sans-serif;letter-spacing:-1.5px;margin:0}.game-overlay p:not(.eyebrow){color:#d0ced7;max-width:310px;line-height:1.45;margin:12px 0 26px}.game-overlay button span{font-size:20px;margin-left:16px}
@media(max-width:650px){.game-header{height:66px}.brand{font-size:21px}.instructions{font-size:12px}.game-section{padding-top:8px}.game-card{border-radius:21px}.game-overlay h3{font-size:29px}}

.game-overlay{padding:26px;background:linear-gradient(rgba(10,10,18,.1),rgba(10,10,18,.62))}.overlay-icon{width:48px;height:48px;border-radius:16px;font-size:22px;margin-bottom:12px;box-shadow:0 8px 22px rgba(130,63,255,.35)}.game-overlay h3{font-size:31px}.game-overlay p:not(.eyebrow){max-width:330px;line-height:1.4;margin:9px 0 14px}.character-picker{width:min(390px,100%);padding:12px;border:1px solid rgba(255,255,255,.1);border-radius:19px;background:rgba(19,18,33,.78);box-shadow:0 10px 28px rgba(0,0,0,.2);backdrop-filter:blur(8px);margin-bottom:15px}.picker-label{margin:0 0 9px!important;color:#b9a6f9!important;font-size:10px;line-height:1!important;letter-spacing:1.35px;font-weight:700}.character-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.character-option{appearance:none;min-width:0;border:1px solid transparent;border-radius:13px;background:#252438;color:#e6e3ee;padding:4px 2px 7px;font:700 clamp(7px,2.3vw,10px)/1 "DM Sans",sans-serif;overflow:hidden;cursor:pointer;transition:transform .16s,border-color .16s,background .16s;touch-action:manipulation}.character-option>span:last-child{display:block;min-height:15px;overflow-wrap:anywhere;text-wrap:balance}.character-option:hover{transform:translateY(-2px);background:#2b2943}.character-option.selected{border-color:#a662ff;background:linear-gradient(160deg,#433065,#27233f);box-shadow:0 0 0 2px rgba(164,98,255,.18)}.character-art{display:block;height:55px;margin:0 0 3px;background-image:url("assets/character-spritesheet.png");background-size:200% 200%;background-repeat:no-repeat;background-position:center}.bird-art{background-position:0 0}.bat-art{background-position:100% 0}.wizard-art{background-position:0 100%}.hero-art{background-position:100% 100%}.game-overlay>#startButton{border:0;border-radius:14px;padding:14px 20px;background:linear-gradient(100deg,#7940f6,#db3ded);color:white;font:700 15px "Space Grotesk",sans-serif;letter-spacing:.1px;box-shadow:0 11px 25px rgba(144,57,240,.38);cursor:pointer;transition:transform .16s,box-shadow .16s}.game-overlay>#startButton:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(144,57,240,.48)}.game-overlay>#startButton:active{transform:translateY(1px)}
@media(max-width:650px){.game-overlay{padding:20px}.game-overlay h3{font-size:27px}.character-picker{padding:9px}.character-art{height:47px}}
@media(max-width:380px){.game-header{padding:0 12px}.instructions{display:none}.game-section{padding-left:10px;padding-right:10px}.game-overlay h3{font-size:24px}.overlay-icon{width:41px;height:41px;margin-bottom:8px}.character-art{height:36px}.character-grid{gap:4px}.character-option{padding:4px 1px 5px}}