:root{font-family:ui-rounded,'Trebuchet MS',system-ui,sans-serif;color:#f6edf9;background:#221a3e;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 20% 0%,#47345e,transparent 60%),#221a3e}main{max-width:760px;margin:auto;padding:26px 22px calc(20px + env(safe-area-inset-bottom))}header{display:flex;justify-content:space-between;gap:14px;font-size:10px;letter-spacing:1.5px;font-weight:bold}.brand{color:inherit;text-decoration:none}.tag{color:#b4a1c9}.intro{padding:28px 0 22px}.eyebrow{color:#ffd768;font-size:10px;letter-spacing:2px;font-weight:800}h1{font-size:clamp(42px,8vw,68px);letter-spacing:-3px;margin:12px 0;line-height:1}h1 em{color:#ffd768;font-style:normal}.intro>p:last-child{color:#c4b3d4;font-size:15px;margin:0}.stats{display:flex;justify-content:space-between;gap:12px;background:#382b50;padding:13px 20px;border-radius:18px 18px 0 0;color:#b7a3cc;font-size:10px;letter-spacing:1.5px}.stats strong{display:block;color:#fff3bc;font-size:20px;letter-spacing:0;margin-top:4px}.arena{position:relative;border:1px solid #5c4577;border-radius:0 0 18px 18px;overflow:hidden}canvas{display:block;width:100%;height:min(58vh,600px);min-height:300px;touch-action:none;outline:none}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;background:#231735e8}.overlay[hidden]{display:none}h2{font-size:clamp(24px,4vw,36px);letter-spacing:-1px;margin:10px 0}.overlay p:not(.eyebrow){font-size:14px;line-height:1.65;color:#d8cbe3;max-width:440px}button{font:inherit;font-weight:900;cursor:pointer;border:0;border-radius:12px;min-height:56px;touch-action:none;background:#ffd768;color:#352443;padding:14px 25px;box-shadow:0 4px 0 #b89337}button:focus-visible{outline:3px solid white;outline-offset:3px}button:active{transform:translateY(2px)}button:disabled{opacity:.4;cursor:default}.controls{display:flex;align-items:center;gap:12px;margin-top:14px}.controls span{flex:1;text-align:center;font-size:10px;letter-spacing:1px;color:#d4bddf;line-height:1.6}.controls small{font-size:9px;color:#ad97c4}#left,#right{font-size:25px;min-width:62px}#pause{background:#44335e;color:#f3e5ff;box-shadow:none;padding:14px 18px}footer{font-size:11px;text-align:center;color:#ab93bc;margin-top:22px}@media(max-width:600px){main{padding:18px 12px}.tag{display:none}.intro{padding:20px 0}.intro p:last-child{font-size:13px}.stats{padding:11px 14px}.stats strong{font-size:17px}canvas{height:52vh;min-height:300px}.controls{gap:8px}#left,#right{padding:10px 18px}#pause{padding:12px}.overlay p:not(.eyebrow){font-size:13px}footer{margin-top:17px}}@media(max-height:500px) and (orientation:landscape){main{max-width:900px;padding:10px}.intro{padding:6px 0}.intro h1{font-size:32px}.intro p,.tag,footer{display:none}canvas{height:230px;min-height:230px}.stats{padding:7px 14px}.stats strong{display:inline;margin-left:10px;font-size:16px}.controls{margin-top:8px}}
.mission{display:flex;align-items:center;gap:18px;padding:10px 18px;background:#2c2142;font-size:12px;color:#e9d4f5}.mission span{white-space:nowrap;font-weight:800}progress{width:100%;height:7px;border:0;border-radius:10px;overflow:hidden;accent-color:#ffd768}progress::-webkit-progress-bar{background:#51405e}progress::-webkit-progress-value{background:#ffd768;border-radius:10px}.sound-row{display:flex;align-items:center;justify-content:center;gap:15px;margin-top:18px;color:#bda9cf;font-size:11px}#sound{min-height:44px;padding:10px 14px;font-size:12px;background:#44335e;color:#f3e5ff;box-shadow:none}.overlay:not([hidden]) h2{animation:pop-in .45s cubic-bezier(.2,1.5,.4,1)}@keyframes pop-in{from{opacity:0;transform:scale(.75) translateY(15px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.overlay:not([hidden]) h2{animation:none}}
.sound-row{justify-content:space-between;margin:0 0 24px;padding:12px 16px;background:#302342;border-radius:14px}#sound{min-width:112px;min-height:48px}.stats div:last-child strong{font-size:13px;line-height:24px}.stats{gap:8px}
#soundcheck{min-height:48px;padding:10px 14px;font-size:12px;background:#514060;color:#fff3bc;box-shadow:none}