:root{--ink:#301b2c;--cream:#fff8e8;--pink:#f0658c;--berry:#df315f;--milk:#fffdf4;--gold:#ffc94b;--mint:#72cfb0}
[hidden]{display:none!important}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);background:#f7dce6;font-family:Inter,"Noto Sans JP",system-ui,sans-serif}
.intro,.result{width:min(1180px,calc(100% - 28px));min-height:calc(100svh - 100px);margin:14px auto 28px;border:4px solid var(--ink);border-radius:28px;background:var(--cream);box-shadow:0 10px 0 #301b2c22;overflow:hidden}
.intro{display:grid;grid-template-columns:1.05fr .95fr}
.hero-stage{position:relative;display:grid;place-items:center;min-height:680px;background:linear-gradient(#ffd5e2 0 58%,#8cd9c0 58%)}
.hero-stage img{width:88%;filter:drop-shadow(0 14px 0 #301b2c22)}
.hero-tag{position:absolute;left:18px;bottom:18px;padding:7px 11px;border:2px solid var(--ink);border-radius:7px;background:#fff;font-weight:950}
.intro-copy,.result-copy{padding:30px 28px;display:flex;flex-direction:column;justify-content:center}
.eyebrow{margin:0;color:#8b3154;font-size:.78rem;font-weight:950;letter-spacing:.08em}
.intro h1{margin:8px 0;font-size:clamp(3rem,5.7vw,5.7rem);line-height:.88;letter-spacing:-.05em}
.dek{margin:0 0 16px;font-weight:900}
.news-brief,.rule-card{margin:10px 0;padding:14px 16px;border:2px solid #b99baa;border-radius:12px;background:#fff}
.news-brief{border-left:7px solid var(--berry)}
.news-brief b,.rule-card b{font-size:.78rem}
.news-brief p,.rule-card p{margin:5px 0}
.recipe{display:flex;align-items:center;gap:6px;margin:10px 0}
.recipe i{width:44px;height:32px;border:3px solid var(--ink);border-radius:8px;background:#fff center/contain no-repeat}
.recipe i:nth-of-type(1){background-image:url('./art/bottom-bun.svg?v=2')}
.recipe i:nth-of-type(4){background-image:url('./art/bun.svg?v=2')}
.recipe i:nth-of-type(2){background-image:url('./art/strawberry.svg?v=2')}
.recipe i:nth-of-type(3){background-image:url('./art/milk.svg?v=2')}
.recipe i.next{outline:5px solid var(--gold)}
.recipe i.done{background-color:var(--mint)}
#start,#replay,#share{min-height:56px;border:3px solid var(--ink);border-radius:12px;background:var(--gold);color:var(--ink);font:inherit;font-weight:1000;cursor:pointer;box-shadow:0 5px 0 var(--ink)}
#start:active,#replay:active,#share:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.key-help{text-align:center;color:#735c6b;font-size:.75rem}
.play{width:min(900px,calc(100% - 20px));margin:10px auto 28px;border:4px solid var(--ink);border-radius:26px;background:var(--cream);overflow:hidden}
.hud{height:62px;display:grid;grid-template-columns:repeat(3,1fr);align-items:center;border-bottom:3px solid var(--ink)}
.hud div{text-align:center;font-size:.62rem;font-weight:950}
.hud b{display:block;font-size:1.1rem}
.hud small{display:block;min-height:1em;color:#8b3154;font-size:.48rem;line-height:1}
.counter{position:relative;height:min(72svh,620px);min-height:470px;overflow:hidden;background:linear-gradient(#fbd3e2 0 62%,#7bd2b4 62%);touch-action:manipulation;cursor:pointer;outline:0}
.counter:focus-visible{box-shadow:inset 0 0 0 5px #fff,inset 0 0 0 9px var(--ink)}
.lane{position:absolute;left:5%;right:5%;top:30%;height:10px;border:3px solid var(--ink);background:#fff}
.play-recipe{position:absolute;left:50%;top:35%;z-index:8;transform:translateX(-50%);padding:8px;border:2px solid var(--ink);border-radius:9px;background:#fff}
.play-recipe i{width:36px;height:27px}
.piece{position:absolute;z-index:5;top:24%;object-fit:contain;transform:translate(-50%,-50%);filter:drop-shadow(3px 6px 0 #301b2c22)}
.piece-name{position:absolute;left:50%;top:10%;transform:translateX(-50%);padding:6px 10px;border:2px solid var(--ink);border-radius:99px;background:#fff;font-weight:950}
.target{position:absolute;left:50%;bottom:21%;width:54%;max-width:470px;height:52px;transform:translateX(-50%);border:5px solid var(--ink);border-radius:50%;background:var(--gold);box-shadow:0 7px 0 var(--ink)}
.target::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;transform:translate(-50%,-50%);border-radius:50%;background:var(--ink);opacity:.35}
.stack{position:absolute;inset:0;z-index:7;pointer-events:none}
.stack-layer{position:absolute;object-fit:contain;filter:drop-shadow(3px 6px 0 #301b2c22);will-change:left,top,transform}
.stack-layer.falling{filter:drop-shadow(6px 12px 0 #301b2c18)}
.stack-layer.collapsing{filter:drop-shadow(8px 13px 0 #301b2c18)}
.feedback{position:absolute;right:12px;top:12px;z-index:9;max-width:72%;margin:0;padding:5px 9px;border:1px solid #8e5368;border-radius:6px;background:#fff1f3e8;color:#7e2444;font-size:.75rem;font-weight:900;line-height:1.35;text-align:right;pointer-events:none}
.burst{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:#301b2cdd;color:#fff;font-size:clamp(2rem,8vw,5rem);font-weight:1000;pointer-events:none}
.result{display:grid;grid-template-columns:.8fr 1.2fr}
.result-art{display:grid;place-items:center;background:#ffd5e2}
.result-art img{width:76%}
.result h2{font-size:clamp(2.6rem,5vw,5rem);margin:8px 0}
.score-line strong{font-size:5rem}
.rank{display:flex;gap:12px;align-items:center}
.rank b{font-size:2.4rem;color:var(--berry)}
.actions{display:flex;gap:10px}
.actions button{flex:1}
.news-links{display:flex;gap:16px;margin-top:18px;flex-wrap:wrap}
.disclaimer{font-size:.7rem;color:#6b5864}
@media(max-width:760px){.intro,.result{display:block}
.hero-stage{min-height:0;aspect-ratio:16/9}
.intro h1{font-size:clamp(3rem,14vw,4.5rem)}
.intro-copy,.result-copy{padding:22px 16px}
.counter{height:calc(100svh - 130px);min-height:470px}
.result-art{aspect-ratio:16/9}
.result-art img{width:48%}
}
@media(prefers-reduced-motion:reduce){.piece,.stack-layer{transition:none}
}