/* Château Princesse · おりこうリズム — mobile-first layout & components */
:root{color-scheme:light;
 --cream:#fff9f1;--cream-2:#fff3ea;--blush:#fbe3ea;--pink:#f3b8cb;--rose:#d9799e;--rose-deep:#b24f7b;--wine:#8c3a60;--lilac:#d7b6e6;--lilac-deep:#9b6fb6;
 --gold:#c39a5a;--gold-2:#e6c88e;--gold-3:#f7e6bf;--ink:#6a3a4e;--ink-soft:#8e6274;
 --serif:'Hiragino Mincho ProN','Yu Mincho','YuMincho','Noto Serif CJK JP',serif;
 --didot:'Didot','Bodoni 72','Bodoni MT','Noto Serif CJK JP',Georgia,serif;
 --round:'Hiragino Maru Gothic ProN','Hiragino Sans','Noto Sans CJK JP','Yu Gothic',sans-serif;
 --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);
 --lane-h:clamp(190px,33dvh,300px);--ctrl-h:clamp(74px,10.5dvh,92px)}
*{box-sizing:border-box}
html{height:100%;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100%;color:var(--ink);font:15px/1.5 var(--round);background:#f8e4e4;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,a,input,select{font:inherit;color:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button{cursor:pointer;border:0;background:none;padding:0}
button:disabled{cursor:default}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #b5813a;outline-offset:3px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- palace backdrop ---------- */
.palace{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.palace-bg{position:absolute;inset:-2%;will-change:transform;background:url('assets/princess-palace.webp') 63% 30%/cover;transform:scale(1.02);transition:filter .8s}
.palace:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#fff7f033 0%,#fff6ef00 30%,#fff3ec55 52%,#fff6efd9 70%,#fff8f2 100%)}
#magic{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:0;transition:opacity .2s}#magic.active{opacity:1}

/* ---------- shell ---------- */
.shell{position:relative;z-index:1;max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;padding:calc(var(--safe-t) + 8px) 14px calc(var(--safe-b) + 12px)}
body:not([data-run=idle]):not([data-run=finished]){overflow:hidden;overscroll-behavior:none}
body:not([data-run=idle]):not([data-run=finished]) .shell{height:100dvh}

/* top bar (lobby) */
.topbar{display:grid;grid-template-columns:64px 1fr 64px;align-items:center;min-height:52px}
.icon-btn{display:flex;flex-direction:column;align-items:center;gap:1px;font-size:10px;color:var(--ink-soft);text-decoration:none;padding:6px 4px;border-radius:16px}
.icon-btn svg{width:24px;height:24px;padding:4px;box-sizing:content-box;background:#fffaf4d9;border:1px solid #e6cfa9;border-radius:50%;color:#b07a86;box-shadow:0 2px 8px #c58f9a26}
.brand{text-align:center;line-height:1.15}
.brand-name{display:block;font:italic 21px var(--didot);color:#a07142;letter-spacing:.02em;text-shadow:0 1px 0 #fff,0 0 14px #fff}
.brand-sub{display:inline-block;margin-top:4px;font-size:11px;letter-spacing:.14em;color:#fff;background:linear-gradient(90deg,#e9a3bd,#d47f9f,#e9a3bd);padding:3px 14px;clip-path:polygon(0 0,100% 0,95% 50%,100% 100%,0 100%,5% 50%)}

/* HUD (play) */
.hud{display:none;grid-template-columns:44px 1fr 44px;gap:10px;align-items:center;padding:4px 0 6px}
.hud-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#fffaf4e6;border:1px solid #e3c896;color:#a0627c;box-shadow:0 3px 10px #b97a8a30}
.hud-btn svg{width:20px;height:20px;stroke-width:2}
.hud-btn.is-paused{background:linear-gradient(#e9a0bb,#c76690);color:#fff;border-color:#f0d6a6}
.hud-btn .i-play,.hud-btn.is-paused .i-pause{display:none}.hud-btn.is-paused .i-play{display:block;fill:currentColor}
.hud-center{background:#fffaf3e6;border:1px solid #e6d0aa;border-radius:22px;padding:5px 14px 7px;box-shadow:inset 0 0 0 3px #fff8,0 4px 14px #b8858f24;text-align:center}
.hud-score{font:700 22px/1.15 var(--didot);color:var(--wine);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.hud-progress{display:flex;align-items:center;gap:8px;margin-top:3px}
.hud-progress span{font-size:10px;color:var(--ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap}
progress{flex:1;width:100%;height:5px;appearance:none;-webkit-appearance:none;border:0;border-radius:6px;overflow:hidden;background:#f1e1d2}
progress::-webkit-progress-bar{background:#f1e1d2;border-radius:6px}
progress::-webkit-progress-value{background:linear-gradient(90deg,#f0bfd0,#d17a9f,#c99a55);border-radius:6px}
progress::-moz-progress-bar{background:#d17a9f}

/* ---------- stage ---------- */
.stage{position:relative;flex:1 1 auto;min-height:300px;display:flex;align-items:flex-end;justify-content:center;isolation:isolate;padding-bottom:26px}
.stage:after{content:'';position:absolute;z-index:0;bottom:12px;left:50%;width:min(74vw,330px);height:46px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse at 50% 40%,#fffdf7 0%,#fff3e3 45%,#f1d9b8 72%,#d6b07500 74%);box-shadow:0 0 0 2px #e8cf9f88,0 10px 30px #c48c6a40}
.halo{position:absolute;z-index:0;left:50%;bottom:34px;width:min(80vw,360px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,#fffbe8f2 0%,#fff1d4b0 38%,#ffe1ea55 60%,#ffe1ea00 72%);transition:transform .45s,filter .45s}
.pet{position:relative;z-index:2;width:min(78vw,43dvh,350px);aspect-ratio:1;background-size:300% 200%;background-repeat:no-repeat;filter:drop-shadow(0 10px 14px #9c5d6b33);transform-origin:50% 90%}
.pose-0{background-position:0 0}.pose-1{background-position:50% 0}.pose-2{background-position:100% 0}.pose-3{background-position:0 100%}.pose-4{background-position:50% 100%}.pose-5{background-position:100% 100%}
.pet.hop{animation:hop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes hop{0%{transform:translateY(0) scale(1)}30%{transform:translateY(-14px) scale(1.03,.97)}60%{transform:translateY(0) scale(.98,1.02)}100%{transform:none}}
#praise{position:absolute;z-index:5;top:6px;left:0;right:0;margin:0 auto;width:fit-content;max-width:92%;text-wrap:balance;padding:9px 20px;border-radius:24px;text-align:center;font:600 17px/1.35 var(--serif);color:#9c4e74;background:linear-gradient(#fffdf8,#fff0f3);border:1px solid #e5c99a;box-shadow:0 6px 18px #c08a9a2e;overflow-wrap:anywhere}
#praise:after{content:'';position:absolute;left:50%;bottom:-7px;width:12px;height:12px;transform:translateX(-50%) rotate(45deg);background:#fff1f4;border-right:1px solid #e5c99a;border-bottom:1px solid #e5c99a}
#name-chip{position:absolute;z-index:6;bottom:6px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:7px 16px 7px 12px;border-radius:20px;background:#fffaf3f2;border:1px solid #dcbf8c;color:#9a5b77;font:600 14px var(--serif);box-shadow:0 4px 12px #b07a8a2e;max-width:80%}
#name-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#name-chip svg{width:15px;height:15px;color:#c39a5a;flex-shrink:0}
.season-ribbon{position:absolute;z-index:4;top:64px;left:50%;transform:translateX(-50%);white-space:nowrap;font:600 11px var(--round);letter-spacing:.06em;padding:4px 14px;border-radius:12px;color:#fff;background:linear-gradient(90deg,#9c6fc4,#d2789f);box-shadow:0 3px 10px #7a4c8a40}
.show-ribbon{position:absolute;z-index:6;bottom:64px;left:50%;transform:translateX(-50%);white-space:nowrap;max-width:92%;overflow:hidden;text-overflow:ellipsis;padding:7px 18px;border-radius:10px;font:600 13px var(--serif);letter-spacing:.06em;color:#fff6da;background:linear-gradient(110deg,#d293ae,#a85e85,#d293ae);border:1px solid #f0d59f;box-shadow:0 6px 16px #8a3a6040}
#judgment{position:absolute;z-index:7;top:66px;left:8px;transform-origin:0 50%;pointer-events:none;font:italic 700 34px/1 var(--didot);letter-spacing:.04em;white-space:nowrap;color:transparent;background:linear-gradient(180deg,#fff7d6 0%,#e5b665 45%,#b07a33 100%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 2px 0 #fff) drop-shadow(0 4px 10px #b07a3366);opacity:0}
#judgment[data-grade=GOOD]{background-image:linear-gradient(180deg,#fff 0%,#f2a9c4 50%,#c4628c 100%)}
#judgment[data-grade=NOTBAD]{background-image:linear-gradient(180deg,#fff 0%,#dcc0ef 50%,#9a72b8 100%);font-size:28px}
#judgment.pop{animation:judge .62s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes judge{0%{opacity:0;transform:translateY(10px) scale(.55)}25%{opacity:1;transform:translateY(0) scale(1.2)}45%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-12px)}}
.combo-badge{position:absolute;z-index:6;top:62px;right:4px;display:flex;flex-direction:column;align-items:center;min-width:64px;opacity:0;transition:opacity .25s;pointer-events:none}
.combo-badge[data-on="1"]{opacity:1}
.combo-badge b{font:700 34px/1 var(--didot);font-variant-numeric:tabular-nums;color:#a54a76;text-shadow:0 2px 0 #fff,0 0 12px #fff}
.combo-badge small{font:700 10px var(--didot);letter-spacing:.24em;color:#b58a4e}
.combo-badge.pop b{animation:combo-pop .28s ease-out}
@keyframes combo-pop{0%{transform:scale(1.35)}100%{transform:scale(1)}}
#combo-flare{position:absolute;z-index:6;top:46%;left:50%;transform:translateX(-50%);font:italic 700 18px var(--didot);color:#fff7da;background:linear-gradient(#d998b0,#b86285);border:1px solid #efcf92;border-radius:14px;padding:4px 14px;pointer-events:none;white-space:nowrap}
#combo-flare:empty{display:none}
#petals{position:absolute;inset:0;z-index:3;pointer-events:none}
.petal{position:absolute;left:50%;top:55%;color:#e08fb0;font-size:22px;animation:petal 1.6s ease-out forwards;pointer-events:none}
.petal:nth-child(3n){color:#d1a65e}
@keyframes petal{to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}
.glow .halo{filter:brightness(1.12) saturate(1.2);transform:translateX(-50%) scale(1.08)}
.tier-banner{position:absolute;z-index:8;top:42%;left:50%;transform:translate(-50%,0);white-space:nowrap;font:600 15px var(--serif);letter-spacing:.08em;padding:8px 22px;color:#fff;background:linear-gradient(100deg,#e7a5bf,#c4699a,#e7a5bf);border:1px solid #f4dba7;border-radius:30px;box-shadow:0 8px 24px #9c4a7244;opacity:0;pointer-events:none}
.tier-banner[data-tier="3"]{font:italic 700 20px var(--didot);background:linear-gradient(100deg,#f4d48d,#d98fb2,#9f7ad0,#f4d48d);background-size:200% 100%}
.tier-banner.show{animation:banner 1.5s cubic-bezier(.2,1.2,.3,1) forwards}
@keyframes banner{0%{opacity:0;transform:translate(-50%,16px) scale(.7)}18%{opacity:1;transform:translate(-50%,0) scale(1.06)}30%{transform:translate(-50%,0) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-10px)}}

/* ---------- lobby ---------- */
.lobby{position:relative;z-index:2;margin-top:18px;padding:14px 14px 12px;background:linear-gradient(#fffcf8f5,#fff7f0f7);border:1px solid #e3cb9f;border-radius:30px;box-shadow:inset 0 0 0 4px #ffffffb0,0 14px 40px #b9858f30}
.lobby:before{content:'♡ ♛ ♡';position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-size:13px;letter-spacing:.3em;color:#c39a5a;background:#fffaf4;padding:2px 12px;border:1px solid #e3cb9f;border-radius:12px}
.step{margin:0 0 12px;padding:0;border:0;min-width:0}
.step h2,.step legend{display:flex;align-items:center;gap:7px;margin:0 0 8px;padding:0;font:600 14px var(--serif);color:#9c5675;letter-spacing:.04em}
.step h2 i,.step legend i,.cta small{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font:italic 700 12px var(--didot);color:#fff;background:radial-gradient(circle at 35% 30%,#fff7 0 18%,transparent 20%),linear-gradient(#e3b874,#b68645);box-shadow:0 1px 3px #a0703a55;flex-shrink:0}
.dog-row{display:flex;gap:9px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 8px;margin:0 -14px;padding-left:14px;padding-right:14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.dog-row::-webkit-scrollbar{display:none}
.breed-option{position:relative;flex:0 0 auto;width:70px;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--ink-soft)}
.portrait{display:grid;place-items:center;width:64px;height:72px;border-radius:32px 32px 16px 16px;background:linear-gradient(#fffaf8,#fbe4ec);border:1px solid #ebc9d4;box-shadow:inset 0 0 0 3px #fff9,0 3px 0 #efd3dc;transition:transform .2s}
.portrait img{width:54px;height:54px;object-fit:contain}
.breed-label{font-size:11px;line-height:1.2;white-space:nowrap}
.breed-option[aria-pressed=true] .portrait{background:linear-gradient(#fff8e2,#fbd9e5);border:2px solid #c9a062;box-shadow:0 0 0 3px #fff2d6,0 6px 14px #cf8fa544;transform:translateY(-3px)}
.breed-option[aria-pressed=true] .breed-label{color:var(--wine);font-weight:700}
.breed-option[aria-pressed=true]:after{content:'♡';position:absolute;top:-6px;right:0;width:20px;height:20px;display:grid;place-items:center;font-size:12px;color:#fff;background:#d87aa0;border:1px solid #fff;border-radius:50%}
.breed-option:disabled{opacity:.6}
.coat-picker{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-soft);min-height:32px}
.coat-picker>span{flex-shrink:0}
#coat-options{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
#coat-options::-webkit-scrollbar{display:none}
.coat-option{display:flex;align-items:center;gap:6px;white-space:nowrap;padding:5px 11px 5px 6px;border-radius:16px;font-size:12px;background:#fffdf8;border:1px solid #ead7c7;color:var(--ink-soft)}
.coat-option i{width:16px;height:16px;border-radius:50%;border:1px solid #b9979f;box-shadow:inset 0 -2px 3px #0002}
.coat-option[aria-pressed=true]{background:#ffeaf1;border-color:#d495ab;color:var(--wine);font-weight:700}
.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.levels button{display:flex;flex-direction:column;align-items:center;padding:8px 4px 7px;border-radius:18px;background:#fffdf9;border:1px solid #ead7c4;color:var(--ink-soft);transition:transform .15s}
.levels b{font:600 14px var(--serif);color:#9a5674}
.levels small{font-size:10px}
.levels em{font:italic 10px var(--didot);color:#b48a54;margin-top:2px;font-variant-numeric:tabular-nums;white-space:nowrap}
.levels button[aria-pressed=true]{background:linear-gradient(#fff3f7,#f9d3e1);border:2px solid #cfa064;box-shadow:0 4px 12px #d48ea944;transform:translateY(-2px)}
.level-picker:disabled .levels button{opacity:.55}
.cta{position:relative;overflow:hidden;width:100%;display:flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:12px 18px;border-radius:30px;color:#fff;font:600 17px var(--serif);letter-spacing:.06em;background:linear-gradient(180deg,#eaa1bd 0%,#d27198 48%,#b9547f 100%);border:1px solid #c79a5f;box-shadow:inset 0 0 0 3px #ffffff38,inset 0 2px 0 #fff6,0 6px 0 #a24d74,0 12px 24px #a24d7444;text-shadow:0 1px 2px #8a3a6066}
.cta:after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,#ffffff8c 45%,transparent 60%);transform:translateX(-120%);animation:shine 3.2s ease-in-out infinite 1s}
@keyframes shine{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.cta:active{transform:translateY(4px);box-shadow:inset 0 0 0 3px #ffffff38,0 2px 0 #a24d74}
.lobby-links{display:flex;justify-content:center;gap:10px;margin-top:12px}
.lobby-links button{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-soft);padding:7px 12px;border-radius:16px;background:#fffaf4;border:1px solid #eadbc8}
.lobby-links svg{width:16px;height:16px;color:#c39a5a}
.lobby-links b{font:italic 700 12px var(--didot);color:#a7703d}

/* ---------- play field ---------- */
.playfield{display:none;flex-direction:column;position:relative}
.lane{position:relative;height:var(--lane-h);overflow:hidden;border-radius:28px 28px 16px 16px;background:linear-gradient(180deg,#fff8f340 0%,#fff6f2cc 30%,#fff3f0f0 100%);border:1px solid #e8cfa6aa;box-shadow:inset 0 0 0 3px #ffffff70}
.lane-cols{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr)}
.lane-cols i{border-right:1px dashed #e1bfc988}
.lane-cols i:last-child{border:0}
.lane-cols i:nth-child(1){background:linear-gradient(#f6b9cf00 40%,#f6b9cf40)}
.lane-cols i:nth-child(2){background:linear-gradient(#d9b8ec00 40%,#d9b8ec44)}
.lane-cols i:nth-child(3){background:linear-gradient(#f2d59600 40%,#f2d59650)}
.target{position:absolute;left:0;right:0;top:84%;height:0;border-top:2px solid #d5ab69;box-shadow:0 0 10px #f3d99a}
.target:before,.target:after{content:'';position:absolute;top:-23px;width:44px;height:44px;border-radius:50%;border:2px solid #e3c08380;left:calc(16.667% - 22px);box-shadow:0 0 0 4px #ffffff55}
.target:after{left:calc(83.333% - 22px)}
.target span{position:absolute;top:-23px;left:calc(50% - 22px);width:44px;height:44px;border-radius:50%;border:2px solid #e3c08380;box-shadow:0 0 0 4px #ffffff55;font-size:0}
#notes{position:absolute;inset:0}
.note{position:absolute;top:0;height:44px;width:calc(33.333% - 12px);display:grid;place-items:center;border-radius:22px;font:700 13px var(--round);color:#8c3d62;will-change:transform;box-shadow:0 6px 14px #a8577a33,inset 0 2px 0 #fff,inset 0 -3px 0 #0000000f;border:2px solid #fff}
.note b{position:relative;z-index:1;font-weight:700;white-space:nowrap}
.note.sit{left:6px;background:linear-gradient(#ffe3ec,#f4a9c3)}
.note.paw{left:calc(33.333% + 6px);background:linear-gradient(#f4e7fb,#d2b0e8);color:#6f4589}
.note.wait{left:calc(66.666% + 6px);background:linear-gradient(#fff6dc,#efcf8c);color:#875a20}
.note.held{background:linear-gradient(#fff,#f7c9d9);box-shadow:0 0 0 4px #f8d9a2aa,0 0 20px #f3c27e}
.note.yoshi{background:linear-gradient(#fffbe6,#f6d68a);animation:yoshi .35s ease-in-out infinite alternate}
@keyframes yoshi{to{box-shadow:0 0 0 6px #ffe39b,0 0 28px #f3c27e}}
.hold-tail{position:absolute;left:calc(50% - 8px);bottom:40px;width:16px;border-radius:10px;background:linear-gradient(#f9e2a900,#f6d48fcc);border:1px solid #f7e2b5;z-index:0}
.hit-burst{position:absolute;z-index:3;width:70px;height:70px;margin:-35px 0 0 -35px;border-radius:50%;pointer-events:none;border:3px solid #f3cf86;box-shadow:0 0 18px #f6d58f,inset 0 0 14px #fff4cf;animation:burst .45s ease-out forwards}
.hit-burst:after{content:'✦';position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:26px;text-shadow:0 0 10px #e7b65c}
.hit-burst.g-good{border-color:#f2a7c3;box-shadow:0 0 18px #f2a7c3}
.hit-burst.g-good:after{content:'♡';text-shadow:0 0 10px #d87aa0}
.hit-burst.g-notbad{border-color:#cfb0e6;box-shadow:0 0 14px #cfb0e6}
.hit-burst.g-notbad:after{content:'♡';text-shadow:0 0 10px #9b6fb6}
@keyframes burst{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.6);opacity:0}}
.hint{margin:6px 0;min-height:20px;text-align:center;font-size:12px;color:var(--ink-soft);line-height:1.4}
.controls{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.controls button{position:relative;overflow:hidden;height:var(--ctrl-h);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:26px 26px 20px 20px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;border:1px solid #fff;transition:box-shadow .06s}
.controls button span{font:700 19px var(--serif);letter-spacing:.04em}
.controls button small{font-size:10px;opacity:.85}
#sit{color:#8d3b61;background:linear-gradient(180deg,#fff2f6 0%,#f7bfd2 55%,#ea9ab8 100%);box-shadow:inset 0 2px 0 #fff,inset 0 0 0 3px #ffffff55,0 6px 0 #cf7aa0,0 10px 18px #cf7aa04d}
#paw{color:#6c4387;background:linear-gradient(180deg,#faf3ff 0%,#dfc6f0 55%,#c9a6e2 100%);box-shadow:inset 0 2px 0 #fff,inset 0 0 0 3px #ffffff55,0 6px 0 #a985c6,0 10px 18px #a985c64d}
#wait{color:#80551d;background:linear-gradient(180deg,#fffbee 0%,#f6dfa8 55%,#ebc77c 100%);box-shadow:inset 0 2px 0 #fff,inset 0 0 0 3px #ffffff55,0 6px 0 #c9a05a,0 10px 18px #c9a05a4d}
/* The button box (the hit area) never moves; only what is drawn inside it sinks. */
.controls button>span:not(.ripple),.controls button>small{transition:transform .06s}
.controls button.pressed>span:not(.ripple),.controls button.pressed>small{transform:translateY(4px)}

#sit.pressed{box-shadow:inset 0 2px 0 #fff,0 1px 0 #cf7aa0}#paw.pressed{box-shadow:inset 0 2px 0 #fff,0 1px 0 #a985c6}#wait.pressed{box-shadow:inset 0 2px 0 #fff,0 1px 0 #c9a05a}
.controls button:disabled{filter:saturate(.75);opacity:.8}
.ripple{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:#ffffffb8;pointer-events:none;animation:ripple .45s ease-out forwards}
@keyframes ripple{to{transform:scale(9);opacity:0}}
#skip-show{position:absolute;z-index:9;top:10px;right:10px;font-size:11px;padding:6px 12px;border-radius:14px;background:#fffaf4e6;border:1px solid #e3c896;color:var(--ink-soft)}
.pause-veil{position:absolute;inset:0;z-index:8;display:none;place-items:center;border-radius:28px 28px 16px 16px;background:#fff6f2e8;pointer-events:none}
.pause-veil p{margin:0;text-align:center;font:600 20px var(--serif);color:#9c5675}
.pause-veil small{display:block;font:12px var(--round);color:var(--ink-soft);margin-top:6px}
body[data-run=paused] .pause-veil{display:grid}

/* ---------- run-state layout ---------- */
body[data-run=playing] .topbar,body[data-run=paused] .topbar,body[data-run=starting] .topbar,
body[data-run=playing] .lobby,body[data-run=paused] .lobby,body[data-run=starting] .lobby,
body[data-run=playing] #name-chip,body[data-run=paused] #name-chip,body[data-run=starting] #name-chip{display:none}
body[data-run=playing] .hud,body[data-run=paused] .hud,body[data-run=starting] .hud{display:grid}
body[data-run=playing] .playfield,body[data-run=paused] .playfield,body[data-run=starting] .playfield{display:flex}
body[data-run=playing] .stage,body[data-run=paused] .stage,body[data-run=starting] .stage{min-height:0;padding-bottom:10px}
body[data-run=playing] .pet,body[data-run=paused] .pet,body[data-run=starting] .pet{width:min(66vw,calc(100dvh - var(--lane-h) - var(--ctrl-h) - 190px),330px)}
body[data-run=playing] .stage:after,body[data-run=paused] .stage:after,body[data-run=starting] .stage:after{bottom:0;height:34px;width:min(60vw,270px)}
body[data-run=playing] .halo,body[data-run=paused] .halo,body[data-run=starting] .halo{bottom:14px;width:min(66vw,300px)}
body[data-run=playing] #praise,body[data-run=paused] #praise,body[data-run=starting] #praise{font-size:15px;padding:7px 16px;top:2px}
body[data-run=playing] .season-ribbon,body[data-run=paused] .season-ribbon,body[data-run=starting] .season-ribbon{display:none}
body[data-run=idle] .combo-badge,body[data-run=finished] .combo-badge{display:none}
/* very short screens (iPhone SE etc.) */
@media (max-height:700px){:root{--lane-h:clamp(170px,30dvh,240px);--ctrl-h:70px}.stage{min-height:190px}.pet{width:min(62vw,32dvh)}.topbar{min-height:46px}.portrait{width:56px;height:62px}.portrait img{width:46px;height:46px}.breed-option{width:62px}.levels button{padding:6px 4px}.lobby{padding-top:12px}.step{margin-bottom:9px}.cta{min-height:52px}.lobby-links{margin-top:8px}}
@media (min-width:700px){.shell{padding-top:24px}}

/* ---------- dialogs & sheets ---------- */
dialog{color:var(--ink);font-family:var(--round)}
dialog::backdrop{background:#5a2445a6;backdrop-filter:blur(2px)}
.sheet{position:fixed;inset:auto 0 0;margin:0 auto;width:100%;max-width:480px;max-height:88dvh;overflow:auto;padding:22px 20px calc(var(--safe-b) + 18px);border:1px solid #e3cb9f;border-bottom:0;border-radius:30px 30px 0 0;background:linear-gradient(#fffcf8,#fff5ef);box-shadow:0 -10px 40px #7a3a5a33}
.sheet[open]{animation:sheet-up .32s cubic-bezier(.2,1,.3,1)}
@keyframes sheet-up{from{transform:translateY(40px);opacity:0}}
.sheet:before{content:'';display:block;width:42px;height:4px;border-radius:4px;background:#e4cdb6;margin:-8px auto 14px}
.sheet h2{margin:0 0 14px;text-align:center;font:600 19px var(--serif);color:#9c5675;letter-spacing:.06em}
.sheet-lead{text-align:center;font-size:12px;color:var(--ink-soft);margin:-6px 0 14px}
.sheet-close{display:block;margin:16px auto 0;font-size:13px;color:var(--ink-soft);padding:9px 26px;border-radius:18px;border:1px solid #e3cfb6;background:#fffaf4}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border-radius:20px;font-size:13px;text-decoration:none;border:1px solid #dcc1a2;background:#fffaf4;color:var(--ink-soft)}
.pill.primary{color:#fff;border-color:#c79a5f;background:linear-gradient(#e7a0bb,#c46792);box-shadow:0 3px 0 #a24d74}
#pet-name{width:100%;font:600 18px var(--serif);color:var(--ink);border:1px solid #d8b5c0;border-radius:16px;background:#fffdf9;padding:12px 14px;text-align:center}
.name-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}
#name-note,#name-status,.small-note{font-size:11px;line-height:1.7;text-align:center;color:var(--ink-soft);margin:10px 0 0}
#name-status:empty{display:none}
#name-status{color:var(--wine);font-weight:700}
.range-row,.switch-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 4px;border-bottom:1px dashed #ecd9c6;font-size:14px}
input[type=range]{flex:1;max-width:220px;-webkit-appearance:none;appearance:none;height:28px;background:transparent}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,#f2bfd0,#d58aa9)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 22%,#fbeef3 40%,#e9c6d2);border:2px solid #d2a768;box-shadow:0 2px 6px #9b4d6e44}
input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:linear-gradient(90deg,#f2bfd0,#d58aa9)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff6f9;border:2px solid #d2a768}
.switch-row input[type=checkbox]{-webkit-appearance:none;appearance:none;width:50px;height:30px;border-radius:16px;background:#ecdcd6;position:relative;flex-shrink:0;transition:background .2s;margin:0}
.switch-row input[type=checkbox]:before{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 4px #0002;transition:transform .2s}
.switch-row input[type=checkbox]:checked{background:linear-gradient(90deg,#e69bb8,#c96d96)}
.switch-row input[type=checkbox]:checked:before{transform:translateX(20px)}
.switch-row select{border:1px solid #dcc1a2;background:#fffaf4;border-radius:14px;padding:6px 10px;color:var(--ink)}
#voice-preview>p:first-child{font:600 13px var(--serif);color:#9c5675;margin:14px 0 6px}
#voice-clips{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px}
#voice-clips button{font-size:11px;padding:8px 4px;border-radius:14px;background:#fff7fa;border:1px solid #ecd0da;color:var(--ink-soft)}
#voice-status{min-height:18px;font-size:11px;color:var(--ink-soft);margin:6px 0 0}
.rules{margin:0;padding-left:22px;line-height:1.9;font-size:13px}
.rules b{color:var(--wine)}
.charm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.charm{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding:12px 4px 10px;border-radius:20px;background:#f6efeb;border:1px dashed #dcc7bd;color:#bfa8a8}
.charm svg{width:34px;height:34px;stroke-width:1.3}
.charm b{font:600 11px var(--serif)}
.charm small{font-size:9.5px;line-height:1.4;color:#a78f93}
.charm.got{background:linear-gradient(#fffaf0,#fde6ee);border:1px solid #dfbd85;color:#b17e3e;box-shadow:0 4px 10px #d5a1ae33}
.charm.got svg{fill:#f6e0ad;filter:drop-shadow(0 1px 2px #c08d4a66)}
.charm.got b{color:var(--wine)}
.share-preview{display:grid;place-items:center;min-height:220px;background:#f7eae4;border-radius:20px;padding:10px}
.share-preview img{display:block;width:min(64vw,260px);aspect-ratio:9/16;border-radius:14px;box-shadow:0 10px 26px #7a3a5a44;background:#fff}
.share-preview img:not([src]){visibility:hidden}

/* ---------- v0.8: name row, 4 levels, name modal, ranking ---------- */
.lobby:before{pointer-events:none}
#name-chip{z-index:9;min-height:40px;bottom:10px}
.lobby{margin-top:22px}
.step h2{flex-wrap:wrap}
.name-row{margin-left:auto;display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:5px 12px 5px 14px;border-radius:18px;font:600 13px var(--serif);color:var(--wine);background:linear-gradient(#fff6f9,#fde2ea);border:1px solid #e3b9c8;max-width:55%}
.name-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.name-row svg{width:14px;height:14px;color:#c39a5a;flex-shrink:0}
.name-row.empty{color:#fff;background:linear-gradient(#e9a0bb,#c96d96);border-color:#d7a96a;animation:nudge 1.6s ease-in-out infinite}
.name-row.empty svg{color:#fff}
@keyframes nudge{0%,100%{transform:none}50%{transform:translateY(-2px)}}
.levels{grid-template-columns:repeat(4,1fr);gap:6px}
.levels button{padding:8px 2px 7px}
.levels b{font-size:13px;white-space:nowrap}
.levels em{font-size:9px}
.levels .lv-special{background:linear-gradient(#f7f0ff,#fbe8f2);border-color:#cdb2e4}
.levels .lv-special b{color:#7b4f9c}
.levels .lv-special[aria-pressed=true]{background:linear-gradient(#efe2ff,#f6cfe3);border-color:#a679c9;box-shadow:0 4px 12px #9b6fb644}
.name-modal{inset:12dvh 0 auto;margin:0 auto;width:calc(100% - 28px);border-radius:28px;border:1.5px solid #dcb57a;padding:20px 18px 16px}
.name-choices{display:grid;grid-template-columns:1fr}
.name-choices .pill{width:100%;color:var(--wine);border-color:#c79a5f}
#rank-disclosure{font-size:12px;line-height:1.7;color:var(--ink);margin:8px 0;padding:10px;border-radius:12px;background:#fffaf4}
.name-modal:before{display:none}
.name-modal[open]{animation:name-pop .32s cubic-bezier(.2,1.4,.4,1)}
@keyframes name-pop{from{transform:scale(.88);opacity:0}}
.name-crown{text-align:center;color:#c39a5a;letter-spacing:.3em;font-size:14px;margin-bottom:4px}
.name-modal h2{margin-bottom:4px}
.name-modal #pet-name{font-size:20px;padding:14px;min-height:54px;margin-top:4px}
.pill.big{font-size:15px;padding:13px 22px;min-height:48px}
.rank-opt{border:0;padding:10px 2px 0;font-size:13px}
.name-modal.required #clear-name{display:none}
.name-modal.required .sheet-close{color:var(--wine);border-color:#e3b9c8}
.rank-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:10px}
.rank-tabs button{padding:8px 2px;border-radius:14px;font-size:12px;background:#fffaf4;border:1px solid #eadbc8;color:var(--ink-soft)}
.rank-tabs button[aria-selected=true]{background:linear-gradient(#fff3f7,#f9d3e1);border-color:#cfa064;color:var(--wine);font-weight:700}
.rank-list{list-style:none;margin:0;padding:0;max-height:48dvh;overflow:auto}
.rank-list li{display:grid;grid-template-columns:34px 30px 1fr auto;align-items:center;gap:8px;padding:8px 6px;border-bottom:1px dashed #ecd9c6;font-size:14px}
.rank-list li:nth-child(-n+3){background:linear-gradient(90deg,#fff6df,#fff0)}
.rank-list li.mine{background:linear-gradient(90deg,#fde3ec,#fff0);font-weight:700}
.rank-list .pos{text-align:center;font:italic 700 15px var(--didot);color:#b0803f}
.rank-list img{width:30px;height:30px;object-fit:contain}
.rank-list .nm{font:600 14px var(--serif);color:var(--wine);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-list .sc{font:700 14px var(--didot);color:#8f3c63;font-variant-numeric:tabular-nums}
.rank-list .rank-empty{display:block;text-align:center;color:var(--ink-soft);padding:24px 8px;border:0;background:none}
.rank-me{text-align:center;font-size:12px;color:var(--wine);margin:10px 0 0;min-height:16px}
.lobby-links{gap:6px}.lobby-links button{white-space:nowrap;font-size:11px;padding:7px 10px}

/* v0.8.1 countdown: 3,2,1,スタート on the first four beats */
.countdown{position:absolute;z-index:8;left:50%;top:76%;white-space:nowrap;transform:translate(-50%,-50%);pointer-events:none;display:grid;place-items:center;min-width:112px;height:112px;padding:0 6px;box-sizing:border-box;border-radius:999px;background:radial-gradient(circle at 50% 35%,#fffdf8,#fff0f4);border:3px solid #e2c07e;box-shadow:0 0 0 6px #ffffffb0,0 14px 30px #a24d7455;font:700 68px/1 var(--didot);color:#c2457a;text-shadow:0 2px 0 #fff}
.countdown.go{min-width:0;height:76px;padding:0 30px;font:800 34px/1 var(--round);letter-spacing:.08em;color:#fff;text-shadow:0 2px 0 #a24d74;background:linear-gradient(180deg,#f0a9c4,#c46792);border-color:#f1d7a3;box-shadow:0 0 0 6px #ffffffb0,0 6px 0 #a24d74,0 16px 30px #a24d7466}
.countdown.tick{animation:cdpop .44s cubic-bezier(.2,1.5,.4,1) both}
.countdown.go.tick{animation:cdgo .66s cubic-bezier(.2,1.5,.4,1) both}
@keyframes cdpop{0%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}30%{opacity:1;transform:translate(-50%,-50%) scale(.95)}60%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.92)}}
@keyframes cdgo{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}70%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-62%) scale(1.02)}}
body.reduced .countdown.tick{animation:none;opacity:1}

.rank-opt small{display:block;font-size:11px;font-weight:500;color:#9a7b80;margin-top:2px}
.rank-delete{display:block;margin:6px auto 0;font-size:12px;background:transparent;color:#9a6a80;border:1px solid #e7cbd6}

.save-warning{margin:10px 0 0;padding:10px 14px;border-radius:14px;background:#fff4f0;border:1.5px solid #e8a3a3;color:#9a3b4f;font-size:13px;font-weight:600;line-height:1.5;text-align:center}
.save-warning[hidden]{display:none}