:root{--ink:#272334;--cream:#fff0c7;--paper:#f0d99a;--gold:#e6b84f;--red:#a84347;--blue:#263c62;--purple:#4d315e;--night:#11182c;--shadow:0 22px 60px #080b18aa}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:radial-gradient(circle at 50% -20%,#53617c,#202d4d 40%,#10162a 100%);overscroll-behavior:none}button,input{font:inherit}button{touch-action:manipulation}button:focus-visible,input:focus-visible{outline:3px solid #ffd96f;outline-offset:3px}.app-shell{width:min(1180px,100%);min-height:100dvh;margin:auto;padding:env(safe-area-inset-top) max(8px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px,env(safe-area-inset-left));display:flex;flex-direction:column}.topbar{height:68px;display:flex;align-items:center;justify-content:space-between;color:#fff}.brand{display:flex;gap:10px;align-items:center;color:#fff;text-decoration:none;letter-spacing:.07em}.brand b,.brand small{display:block}.brand small{font-size:.55rem;color:#d0d7e6;margin-top:2px}.logo{width:45px;height:45px;border:2px solid var(--gold);color:var(--gold);display:grid;place-items:center;border-radius:50%;font-size:1.5rem}.top-actions{display:flex;gap:7px}.icon-btn{width:43px;height:43px;border:1px solid #ffffff44;background:#ffffff12;color:#fff;border-radius:50%;cursor:pointer}.game-only{display:none}.playing .game-only{display:block}main{flex:1;display:grid;align-items:center;padding:8px 0 20px}.screen{display:none;animation:fade .24s ease}.screen.active{display:grid}@keyframes fade{from{opacity:0;transform:translateY(7px)}}
.poster{width:min(960px,100%);margin:auto;position:relative;background:linear-gradient(150deg,var(--cream),var(--paper));border:8px double #69434e;border-radius:8px;padding:clamp(23px,5vw,58px);box-shadow:var(--shadow);overflow:hidden}.poster:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 15%,#773e4514 0 2px,transparent 3px),repeating-linear-gradient(7deg,transparent 0 22px,#7b50320b 23px);pointer-events:none}.poster>*{position:relative}.kicker{font-size:.7rem;font-weight:900;letter-spacing:.16em;color:var(--red)}h1{font:900 clamp(3rem,8vw,6rem)/.8 Georgia,serif;color:var(--blue);text-transform:uppercase;margin:.2em 0;text-shadow:2px 2px #fff2c9}h1 em{color:var(--red);font-style:normal}h2{font:900 clamp(1.8rem,4vw,3rem) Georgia,serif;color:var(--blue);margin:.25em 0}.objective{max-width:650px;font:1.05rem/1.6 Georgia,serif}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:20px 0}.stats span{background:#fff7da99;border:1px solid #c39956;padding:9px;text-align:center}.stats b,.stats small{display:block}.stats b{font-family:Georgia,serif;color:var(--purple)}.stats small{font-size:.6rem;letter-spacing:.08em;text-transform:uppercase}.difficulty{display:flex;gap:4px;padding:4px;border:1px solid #b88747;border-radius:12px;background:#d9b96855}.difficulty button{flex:1;border:0;background:transparent;border-radius:8px;padding:10px 4px;font-weight:850;color:#6e5132;cursor:pointer}.difficulty button.selected{background:var(--purple);color:white}.main-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.btn{border:0;border-radius:11px;min-height:50px;padding:11px 17px;color:white;font-weight:900;cursor:pointer;box-shadow:0 6px 15px #17203333;transition:.12s}.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}.btn span,.btn small{display:block}.btn small{font-weight:500;opacity:.82}.btn.primary{background:linear-gradient(135deg,#a54549,#713040)}.btn.secondary{background:linear-gradient(135deg,#3c557c,#273754)}.btn.danger{background:linear-gradient(135deg,#6a486f,#462c50)}.btn.wide{width:100%}.text-btn{border:0;background:transparent;color:#71364f;text-decoration:underline;text-underline-offset:4px;font-weight:850;padding:9px;cursor:pointer}.menu-links{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.cat-band-art{position:absolute!important;right:5%;top:9%;display:flex;gap:3px;opacity:.2}.cat-band-art i{display:block;width:46px;height:62px;background:#593449;border-radius:50% 50% 35% 35%;position:relative}.cat-band-art i:before,.cat-band-art i:after{content:"";position:absolute;top:-11px;border-style:solid;border-width:0 9px 16px;border-color:transparent transparent #593449}.cat-band-art i:before{left:3px;transform:rotate(-18deg)}.cat-band-art i:after{right:3px;transform:rotate(18deg)}.cat-band-art i:nth-child(2){margin-top:18px}.stamp{display:inline-block;border:3px solid var(--red);color:var(--red);font-weight:900;letter-spacing:.13em;padding:5px 10px;transform:rotate(-2deg);margin:0 0 10px}.stamp.small{font-size:.64rem;border-width:2px}.briefing>p{line-height:1.6}.brief-grid{display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:8px;margin:22px 0}.brief-grid div{background:#fff5d3;border:1px solid #c89a56;padding:11px}.brief-grid small,.brief-grid b{display:block}.brief-grid small{font-size:.58rem;color:var(--red);font-weight:900;letter-spacing:.08em}.brief-grid b{margin-top:4px}
.game-screen{width:100%;max-width:1080px;margin:auto;background:#0c1225;border:1px solid #59698c;border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}.hud{display:grid;grid-template-columns:120px 90px 1fr 110px 90px;min-height:64px;background:#151f38;color:#fff;align-items:center}.hud>div{text-align:center;border-right:1px solid #ffffff15;padding:6px}.hud small,.hud b{display:block}.hud small{font-size:.55rem;letter-spacing:.1em;color:#c7d0e1}.hud b{font:900 1.15rem Georgia}.hud-center span{font-size:.55rem;background:var(--gold);color:#30251e;border-radius:3px;padding:2px 6px;font-weight:900}.hud-center b{font-size:.96rem;margin-top:3px}.hud-center small{font-size:.52rem}.stage{width:100%;aspect-ratio:8/5;max-height:calc(100dvh - 210px);position:relative;overflow:hidden;background:#192540}#gameCanvas{display:block;width:100%;height:100%;touch-action:none}.countdown{position:absolute;inset:0;display:grid;place-items:center;font:900 clamp(5rem,15vw,10rem) Georgia;color:#ffe078;text-shadow:0 8px 20px #000;pointer-events:none}.judgment{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);font:900 clamp(1.8rem,5vw,3.6rem) Georgia;color:#fff1a2;text-shadow:0 3px 8px #000;opacity:0;pointer-events:none}.judgment.show{animation:judge .45s}@keyframes judge{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-65%) scale(1.12)}}.section-banner{position:absolute;left:50%;top:14%;transform:translateX(-50%);background:#10172ddd;color:#ffe391;border:1px solid #e6ba58;padding:7px 14px;border-radius:99px;font-size:.72rem;font-weight:900;letter-spacing:.1em;opacity:0;transition:.2s}.section-banner.show{opacity:1}.lane-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:8px;background:#11192d}.lane-controls button{min-height:68px;border:2px solid #65779c;background:#263654;color:#fff;border-radius:10px;cursor:pointer}.lane-controls button:nth-child(1){border-color:#e06b6f}.lane-controls button:nth-child(2){border-color:#e5ba58}.lane-controls button:nth-child(3){border-color:#67b4d3}.lane-controls button:nth-child(4){border-color:#9d75c4}.lane-controls button.active{filter:brightness(1.5);transform:translateY(2px)}.lane-controls b,.lane-controls small{display:block}.lane-controls b{font-size:1.4rem}.lane-controls small{font-size:.56rem;margin-top:2px}.grade{width:180px;height:180px;border:8px double var(--red);border-radius:50%;margin:16px auto;display:grid;place-content:center;text-align:center}.grade>b{font:900 3.7rem/1 Georgia;color:var(--purple)}.grade span,.grade small,.grade em{display:block}.grade span{font-weight:900}.grade small,.grade em{font-size:.58rem}.grade em{color:var(--red);font-weight:900}.breakdown{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.breakdown span{background:#e0bd73;padding:6px 9px;font-size:.72rem;font-weight:850}.challenge-line{text-align:center;font-size:.8rem}.challenge-line strong{letter-spacing:.08em;user-select:all}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:650px;margin:auto}.result-actions .text-btn{grid-column:1/-1}
dialog{width:min(520px,calc(100% - 22px));border:1px solid #bd904f;border-radius:13px;background:var(--cream);color:var(--ink);padding:27px;box-shadow:0 25px 70px #080b18cc}dialog::backdrop{background:#080d1ccc;backdrop-filter:blur(3px)}dialog[open]{animation:dialog .2s ease}@keyframes dialog{from{opacity:0;transform:scale(.96)}}.wide-dialog{width:min(820px,calc(100% - 22px));max-height:86dvh;overflow:auto}.dialog-close{position:absolute;right:8px;top:5px;border:0;background:transparent;font-size:2rem;color:#6f4b46;cursor:pointer}.tutorial-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tutorial-grid div{background:#fff6d8;border:1px solid #c99b57;padding:11px}.tutorial-grid div>b{float:left;width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:var(--purple);color:white;margin-right:7px}.tutorial-grid h3{font-family:Georgia,serif;margin:3px 0}.tutorial-grid p{font-size:.82rem;line-height:1.45;clear:both}.code-row{display:flex;gap:7px;margin-top:6px}.code-row input{min-width:0;flex:1;border:2px solid #8b6349;border-radius:8px;padding:10px;text-transform:uppercase}.error{min-height:1.2em;color:#981f2b;font-size:.8rem;font-weight:800}.toggle-row,.range-row{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #caa15d;padding:11px 0;font-weight:800}.toggle-row input{width:24px;height:24px}.range-row input{width:45%}.range-row>b{font-size:.7rem;width:50px}.settings-stats{display:flex;justify-content:space-between;gap:5px;background:#dfbd77;padding:10px;margin:14px 0;font-size:.72rem}.settings-stats b{display:block}.collection-grid,.achievement-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.collectible,.achievement{border:1px solid #c4934e;background:#fff6d6;padding:10px}.collectible{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:8px;cursor:pointer}.collectible.locked,.achievement.locked{opacity:.45}.collectible.selected{box-shadow:inset 4px 0 var(--red)}.swatch{width:38px;height:48px;border:2px solid #433242;border-radius:16px 16px 8px 8px;display:grid;place-items:center;font-size:1.3rem}.collectible strong,.collectible small,.achievement strong,.achievement small{display:block}.collectible small,.achievement small{font-size:.7rem;color:#6c584d;margin-top:3px}.toast{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;background:#121c34;color:#fff1b8;border:1px solid #ddb85c;border-radius:99px;padding:10px 16px;z-index:30;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}.shake{animation:shake .25s linear}@keyframes shake{25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}body.reduced-motion *{animation-duration:.001ms!important;transition-duration:.001ms!important}body.high-contrast{--cream:#fff7d2;--ink:#05040a;--red:#7b121f;--blue:#0b2659}
@media(max-width:720px){.topbar{height:58px}.brand b{font-size:.78rem}.brand small{display:none}.logo{width:38px;height:38px}.icon-btn{width:38px;height:38px}.poster{padding:22px 15px}.stats{grid-template-columns:1fr 1fr}.main-actions,.brief-grid,.result-actions{grid-template-columns:1fr}.cat-band-art{opacity:.1}.hud{grid-template-columns:80px 62px 1fr 78px}.hud>div:last-child{display:none}.hud b{font-size:.86rem}.hud-center small{display:none}.stage{max-height:none}.lane-controls{gap:4px;padding:6px}.lane-controls button{min-height:62px}.tutorial-grid,.collection-grid,.achievement-grid{grid-template-columns:1fr}}
@media(orientation:portrait) and (max-width:500px){.stage{aspect-ratio:3/4}.lane-controls button{min-height:74px}.lane-controls small{font-size:.48rem}}
@media(orientation:landscape) and (max-height:600px){.topbar{height:43px}.logo{width:32px;height:32px}.game-screen{display:grid!important;grid-template-columns:1fr 150px;grid-template-rows:auto 1fr}.hud{grid-column:1/-1}.stage{height:calc(100dvh - 105px);width:auto;aspect-ratio:8/5}.lane-controls{grid-column:2;grid-row:2;grid-template-columns:1fr;align-content:center}.lane-controls button{min-height:54px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}