:root{--ink:#120d2d;--cream:#fff4d8;--mustard:#ffcb47;--tomato:#ff4d56;--pickle:#55d66b;--purple:#6b4cff;--line:rgba(255,244,216,.17)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#0d0922;color:var(--cream);font-family:Inter,system-ui,sans-serif}
body{background:radial-gradient(circle at 20% 0%,#2c1550 0,transparent 38%),radial-gradient(circle at 90% 100%,#122f3d 0,transparent 35%),#0d0922;overflow-x:hidden}
button{font:inherit}
.shell{width:min(1000px,100%);margin:auto;padding:16px 22px 22px}
.topbar,.bottombar{display:flex;align-items:center;justify-content:space-between;gap:30px}
.topbar{padding:0 4px 18px}.brand{position:relative;line-height:.8;min-width:245px}.brand-kicker{display:block;font-size:9px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;margin:0 0 5px 3px;color:var(--mustard)}
.brand-title{font-family:'Fugaz One',Impact,sans-serif;font-size:30px;letter-spacing:-.04em}.brand-title span{color:var(--tomato)}.brand-tag{font:500 8px 'DM Mono',monospace;background:var(--pickle);color:var(--ink);padding:3px 6px;position:absolute;transform:rotate(-5deg);right:0;bottom:-6px}
.stats{display:flex;gap:42px;margin-left:auto}.stats div{display:flex;flex-direction:column}.stats small,.meter>span,.mission span{font:500 9px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.18em;color:#aaa1c5;margin-bottom:4px}.stats strong{font:500 19px 'DM Mono',monospace;letter-spacing:.08em}
.sound-btn{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:#171132;color:var(--cream);cursor:pointer;font-size:18px}.sound-btn[aria-pressed=false]{opacity:.45}
.game-wrap{position:relative;width:min(100%,calc((100svh - 155px)*4/3));margin-inline:auto;border:1px solid rgba(255,255,255,.12);border-radius:18px;overflow:hidden;box-shadow:0 28px 80px rgba(0,0,0,.45),inset 0 0 50px rgba(44,21,80,.4);background:#000;aspect-ratio:4/3}
canvas{display:block;width:100%;height:100%;image-rendering:pixelated}.scanlines{pointer-events:none;position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0,rgba(0,0,0,.06) 1px,transparent 1px,transparent 4px);mix-blend-mode:multiply}
.overlay{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:36px;background:radial-gradient(circle at 50% 45%,rgba(31,23,70,.72),rgba(10,7,29,.94) 70%);backdrop-filter:blur(3px)}.overlay[hidden]{display:none}.overlay h1{font:400 clamp(36px,6vw,74px)/.88 'Fugaz One',Impact,sans-serif;letter-spacing:-.05em;margin:7px 0 18px;text-transform:uppercase}.overlay h1 em{font-style:normal;color:var(--mustard);text-shadow:4px 4px 0 var(--tomato)}.overlay h2{font:400 clamp(38px,6vw,68px)/1 'Fugaz One',sans-serif;text-transform:uppercase;margin:6px 0 10px}.eyebrow{font:500 10px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.28em;color:var(--pickle);margin:0}.intro{max-width:540px;color:#c7bfdc;line-height:1.55;font-size:14px;margin:0 0 22px}.play-btn{display:flex;align-items:center;gap:34px;border:0;border-radius:99px;padding:7px 8px 7px 24px;background:var(--tomato);color:white;text-transform:uppercase;font-weight:800;letter-spacing:.07em;cursor:pointer;box-shadow:0 8px 0 #a42240,0 16px 30px rgba(255,77,86,.22);transition:.15s}.play-btn:hover{transform:translateY(-2px)}.play-btn:active{transform:translateY(5px);box-shadow:0 3px 0 #a42240}.play-btn b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:white;color:var(--tomato);font-size:18px}.howto{display:flex;gap:25px;margin-top:26px;color:#8e86a9;font:500 10px 'DM Mono',monospace}.howto kbd{color:var(--cream);border:1px solid #49405f;border-bottom-width:2px;border-radius:4px;padding:2px 5px;background:#17112f}
.hero-burger{width:90px;height:61px;position:relative;margin-bottom:16px;filter:drop-shadow(0 10px 15px rgba(0,0,0,.35))}.hero-burger i{position:absolute;left:0;width:90px;height:13px;border-radius:10px}.hero-burger i:nth-child(1){top:0;height:21px;border-radius:50px 50px 8px 8px;background:#f4a63b}.hero-burger i:nth-child(2){top:20px;background:var(--pickle);transform:skew(-15deg)}.hero-burger i:nth-child(3){top:29px;background:var(--tomato)}.hero-burger i:nth-child(4){top:39px;background:#6d321f}.hero-burger i:nth-child(5){top:49px;background:#e68d2e;border-radius:7px 7px 15px 15px}
.compact p:not(.eyebrow){color:#aaa1c5}.pause-badge{position:absolute;z-index:4;inset:50% auto auto 50%;transform:translate(-50%,-50%);font:400 38px 'Fugaz One',sans-serif;text-align:center;text-shadow:0 4px 20px #000}.pause-badge small{display:block;font:500 10px 'DM Mono';letter-spacing:.12em;color:var(--mustard)}
.board-banner{position:absolute;z-index:4;inset:50% auto auto 50%;transform:translate(-50%,-50%) rotate(-2deg);padding:18px 32px;text-align:center;background:var(--mustard);color:var(--ink);box-shadow:8px 8px 0 var(--tomato);text-transform:uppercase}.board-banner small{display:block;font:800 9px Inter,sans-serif;letter-spacing:.2em}.board-banner strong{display:block;font:400 34px 'Fugaz One',Impact,sans-serif;line-height:1.05}
.bottombar{padding:17px 5px 0}.meter{min-width:140px}.life-icons,.pepper-dots{display:flex;gap:8px;height:19px;align-items:center}.life-icons i{width:17px;height:17px;background:var(--cream);display:block;border-radius:50% 50% 40% 40%;position:relative}.life-icons i:after{content:'';position:absolute;width:19px;height:6px;left:-1px;bottom:-2px;border-radius:50%;background:var(--mustard)}.pepper-dots i{width:10px;height:10px;border-radius:50%;background:var(--cream);box-shadow:0 0 8px rgba(255,244,216,.6)}.mission{text-align:center}.mission strong{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.04em}.mission small{display:block;margin-top:3px;color:#6f668c;font:500 8px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.1em}.pepper-meter{text-align:right}.pepper-dots{justify-content:flex-end}
.touch-controls{display:none;align-items:center;justify-content:space-between;padding-top:20px}.dpad{display:grid;grid-template-columns:repeat(3,46px);grid-template-rows:repeat(2,46px);gap:5px}.dpad button,.pepper-btn{border:1px solid rgba(255,255,255,.15);background:#1b1439;color:var(--cream);border-radius:12px;touch-action:none}.dpad button:nth-child(1){grid-column:2}.dpad button:nth-child(2){grid-column:1}.dpad button:nth-child(3){grid-column:2}.dpad button:nth-child(4){grid-column:3}.pepper-btn{width:86px;height:86px;border-radius:50%;background:var(--tomato);box-shadow:0 6px 0 #9a293e}.pepper-btn i{display:block;font-size:23px;font-style:normal}.pepper-btn span{font-size:9px;font-weight:800;letter-spacing:.12em}
@media(max-width:750px){.shell{padding:10px 10px 18px}.brand{min-width:auto}.brand-title{font-size:22px}.brand-tag,.brand-kicker{display:none}.stats{gap:16px}.stats div:nth-child(2){display:none}.stats strong{font-size:15px}.sound-btn{width:34px;height:34px}.game-wrap{width:100%;border-radius:12px}.overlay{padding:18px}.hero-burger{transform:scale(.7);margin-bottom:1px}.overlay h1{font-size:34px;margin:4px 0 12px}.intro{font-size:11px;max-width:380px;margin-bottom:12px}.howto{display:none}.play-btn{padding:5px 6px 5px 18px;font-size:11px}.play-btn b{width:29px;height:29px}.bottombar{gap:10px}.meter{min-width:85px}.mission strong{font-size:10px}.touch-controls{display:flex}}
@media(max-width:480px){.topbar{padding-bottom:11px}.stats div:nth-child(3){display:none}.bottombar{padding-top:11px}.mission{display:none}.pepper-meter{margin-left:auto}.overlay h1{font-size:29px}.intro{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}