/* BUG BUSTERS 作り込み版 — ストリートポップのステッカー調（よく晴れた空・ライム／マゼンタ／シアン／イエロー） */
:root {
    --ink: #1D1E24;
    --mute: #5B5E6B;
    --lime: #8BE12E;
    --lime-l: #C6FF3D;
    --mag: #FF3EA5;
    --cyan: #22D3EE;
    --yel: #FFD60A;
    --sky: #4FC3FF;
    --cream: #FFFBF0;
    --red: #E63946;
    --disp: "Bungee", "Mochiy Pop One", sans-serif;
    --pop: "Mochiy Pop One", "M PLUS Rounded 1c", sans-serif;
    --body: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
    background: #BFEAFF; color: var(--ink);
    font-family: var(--body); font-weight: 500;
    touch-action: none; user-select: none; -webkit-user-select: none; overscroll-behavior: none;
}
button { font: inherit; color: inherit; }

/* PC で舞台の外に見える空（雲とペンキのはね） */
.sh-backdrop {
    position: fixed; inset: 0;
    background:
        radial-gradient(circle at 12% 78%, rgba(255, 62, 165, .35) 0 4%, transparent 4.2%),
        radial-gradient(circle at 88% 22%, rgba(139, 225, 46, .4) 0 3.4%, transparent 3.6%),
        radial-gradient(circle at 84% 84%, rgba(255, 214, 10, .45) 0 2.6%, transparent 2.8%),
        radial-gradient(circle at 18% 18%, rgba(34, 211, 238, .4) 0 2.4%, transparent 2.6%),
        radial-gradient(ellipse 22% 9% at 14% 30%, #fff 60%, transparent 62%),
        radial-gradient(ellipse 20% 8% at 86% 64%, #fff 60%, transparent 62%),
        radial-gradient(ellipse 16% 6% at 78% 12%, rgba(255, 255, 255, .85) 60%, transparent 62%),
        radial-gradient(circle at 6% 4%, rgba(255, 252, 220, .95), rgba(255, 252, 220, 0) 30%),
        linear-gradient(180deg, #3FB6FF 0%, #8ED8FF 55%, #E2F6FF 100%);
}
.sh-stage {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
    overflow: hidden; background: #8ED8FF; border-radius: 22px;
    box-shadow: 0 0 0 5px #fff, 0 0 0 9px var(--ink), 12px 16px 0 9px var(--mag), 0 40px 90px rgba(24, 90, 160, .3);
    container-type: size;
}
.sh-stage.sh-full { border-radius: 0; box-shadow: none; }
.sh-stage [hidden] { display: none !important; }
.sh-stage canvas#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.sh-stage.sh-ouch::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1.6cqw rgba(255, 62, 165, .75); animation: shOuch .5s ease-out forwards; }
@keyframes shOuch { to { opacity: 0; } }

/* ───── HUD ───── */
.sh-hud {
    position: absolute; left: 0; right: 0; top: 0;
    padding: max(1.6cqw, env(safe-area-inset-top)) 2cqw 0;
    display: flex; flex-direction: column; gap: 1.2cqw;
    pointer-events: none; font-size: clamp(11px, 3.3cqw, 18px);
}
.sh-row1, .sh-row2 { display: flex; align-items: center; gap: 1.2cqw; }
.sh-grow { flex: 1 1 0; min-width: 0; }
.sh-pill {
    background: #fff; border: 3px solid var(--ink); border-radius: 999px;
    padding: .3em .8em .35em; display: flex; align-items: baseline; gap: .4em; white-space: nowrap;
    box-shadow: .18em .22em 0 var(--ink);
}
.sh-pill small { font: 400 max(12px, .58em)/1 var(--disp); letter-spacing: .06em; color: var(--mute); }
.sh-pill b { font: 400 1.2em/1 var(--disp); font-variant-numeric: tabular-nums; }
.sh-score { flex: 0 1 auto; min-width: 0; }
.sh-hearts { gap: .2em; align-items: center; padding-left: .55em; padding-right: .55em; }
.sh-hearts i { width: 1.15em; height: 1.1em; display: block; position: relative; font-style: normal; }
.sh-hearts i::before { content: "♥"; position: absolute; inset: -.1em 0 0; font: 400 1.3em/1 sans-serif; color: var(--mag); text-align: center; text-shadow: 1px 1px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink); }
.sh-hearts i.off::before { color: #E3E6EE; }
.sh-icon {
    pointer-events: auto; cursor: pointer; flex: none;
    width: max(44px, 11.6cqw); height: max(44px, 11.6cqw); border-radius: 50%;
    border: 3px solid var(--ink); background: var(--yel); font: 400 1em/1 var(--disp);
    box-shadow: .16em .2em 0 var(--ink);
}
/* コンボ */
.sh-combo {
    display: flex; align-items: baseline; gap: .35em; position: relative;
    background: var(--ink); color: #fff; border-radius: 999px; padding: .32em .9em .5em; font-size: .92em;
    transition: transform .15s;
}
.sh-combo b { font: 400 1.25em/1 var(--disp); font-variant-numeric: tabular-nums; min-width: 1.2em; text-align: right; }
.sh-combo small { font: 400 max(12px, .58em)/1 var(--disp); letter-spacing: .08em; opacity: .8; }
.sh-combo em { font: 400 max(12px, 1.05em)/1 var(--disp); font-style: normal; color: var(--lime-l); }
.sh-combo i { position: absolute; left: .9em; right: .9em; bottom: .22em; height: .18em; background: rgba(255, 255, 255, .2); border-radius: 9px; overflow: hidden; }
.sh-combo s { display: block; height: 100%; background: var(--lime-l); transform-origin: left; text-decoration: none; }
.sh-combo.idle { opacity: .55; }
.sh-combo[data-tier="2"] em { color: var(--cyan); }
.sh-combo[data-tier="3"] em { color: var(--yel); }
.sh-combo[data-tier="4"] { background: var(--mag); }
.sh-combo[data-tier="4"] em, .sh-combo[data-tier="5"] em { color: #fff; }
.sh-combo[data-tier="5"] { background: linear-gradient(90deg, var(--mag), #8B5CF6); }
.sh-kills { display: flex; gap: .3em; }
.sh-kills span { display: flex; align-items: center; gap: .25em; background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: .15em .45em .15em .2em; font-size: max(12px, .82em); }
.sh-kills i { width: .95em; height: .95em; border-radius: 50%; background: var(--c); border: 2px solid var(--ink); display: block; }
.sh-kills b { font: 400 1em/1 var(--disp); font-variant-numeric: tabular-nums; }
.sh-kills span.lead { background: #FFF7C2; transform: translateY(-.12em); box-shadow: 0 .15em 0 var(--ink); }

/* ボスの体力 */
.sh-bossbar {
    position: absolute; left: 2.4cqw; right: 2.4cqw;
    top: calc(max(1.6cqw, env(safe-area-inset-top)) + 21.5cqw);
    display: flex; align-items: center; gap: 1.4cqw; pointer-events: none;
    font-size: clamp(10px, 3cqw, 16px);
}
.sh-boss-name { flex: none; color: #fff; font: 400 max(12px, .95em)/1 var(--pop); background: var(--mag); border: 3px solid var(--ink); border-radius: 999px; padding: .38em .8em .42em; box-shadow: .14em .18em 0 var(--ink); white-space: nowrap; }
.sh-boss-pips { display: flex; gap: .2em; }
.sh-boss-pips i { width: .8em; height: .8em; border-radius: 50%; background: var(--yel); border: 2px solid var(--ink); display: block; }
.sh-boss-pips i.off { background: #D7DBE5; }
.sh-bossbar > i { flex: 1; height: 1.3em; background: #fff; border: 3px solid var(--ink); border-radius: 999px; overflow: hidden; box-shadow: .14em .18em 0 var(--ink); }
.sh-bossbar em { display: block; height: 100%; width: 100%; transform-origin: left; background: repeating-linear-gradient(-45deg, var(--mag) 0 .7em, #FF70BD .7em 1.4em); transition: transform .15s; }

/* 下の帯：いまの弾とボム */
.sh-dock {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; align-items: flex-end; gap: 2cqw;
    padding: 0 2.4cqw max(2.4cqw, env(safe-area-inset-bottom));
    font-size: clamp(12px, 3cqw, 16px); pointer-events: none;
}
.sh-weapon {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .55em;
    background: #fff; border: 3px solid var(--ink); border-radius: 1.4em; padding: .3em .7em .3em .3em;
    box-shadow: .2em .24em 0 var(--ink);
}
.sh-weapon.pop { animation: shPop .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes shPop { 40% { transform: scale(1.07) rotate(-1deg); } }
.sh-wicon { flex: none; width: 2.7em; height: 2.7em; border-radius: 50%; display: block; background: radial-gradient(circle at 35% 30%, #fff, var(--yel) 50%, #F5B300); border: 2px solid var(--ink); background-size: cover; }
.sh-wicon.job { border: 0; background-color: transparent; }
.sh-wtext { display: flex; flex-direction: column; gap: .2em; min-width: 0; text-align: left; flex: 1; }
.sh-wtext small { font: 800 max(12px, .72em)/1 var(--body); color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-wtext b { font: 400 1em/1.1 var(--pop); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-wpips { display: flex; gap: .2em; flex: none; }
.sh-wpips i { width: .7em; height: 1.2em; border-radius: .2em; border: 2px solid var(--ink); background: #E3E6EE; display: block; }
.sh-wpips i.on { background: var(--c); }
.sh-bomb {
    flex: none; pointer-events: auto; cursor: pointer; touch-action: none;
    width: max(64px, 17cqw); height: max(64px, 17cqw); border-radius: 50%;
    border: 4px solid var(--ink); background: radial-gradient(circle at 35% 30%, #FF9AD0, var(--mag) 55%, #C81E7A);
    color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1em;
    box-shadow: .2em .28em 0 var(--ink); transition: transform .1s;
}
.sh-bomb span { font: 400 max(12px, .78em)/1 var(--disp); letter-spacing: .04em; }
.sh-bomb b { font: 400 1.35em/1 var(--disp); }
.sh-bomb:active { transform: scale(.92); }
.sh-bomb.empty { filter: grayscale(1) opacity(.55); }
.sh-bomb.hint { animation: shHint .8s ease-in-out infinite; }
@keyframes shHint { 50% { transform: scale(1.12); box-shadow: 0 0 0 .5em rgba(255, 214, 10, .8), .2em .28em 0 var(--ink); } }

/* ───── 演出 ───── */
.sh-intro {
    position: absolute; left: 0; right: 0; top: 30%; display: flex; flex-direction: column; align-items: center; gap: 1.6cqw;
    pointer-events: none; animation: shIntro 2.3s ease forwards;
}
.sh-intro small { font: 400 clamp(13px, 4cqw, 20px)/1 var(--disp); letter-spacing: .16em; color: #fff; background: var(--ink); padding: .5em 1.2em; border-radius: 999px; }
.sh-intro b { font: 400 clamp(30px, 10.5cqw, 56px)/1.15 var(--pop); color: var(--yel); -webkit-text-stroke: .1em var(--ink); paint-order: stroke fill; text-shadow: .06em .1em 0 var(--mag); transform: rotate(-3deg); white-space: nowrap; }
.sh-intro em { font: 400 clamp(14px, 4.4cqw, 22px)/1 var(--disp); font-style: normal; color: var(--cyan); -webkit-text-stroke: .12em var(--ink); paint-order: stroke fill; }
.sh-intro span { font: 800 clamp(12px, 3.6cqw, 17px)/1 var(--body); background: #fff; border: 3px solid var(--ink); border-radius: 999px; padding: .5em 1.1em; }
@keyframes shIntro { 0% { opacity: 0; transform: translateX(30cqw) skewX(-12deg); } 14% { opacity: 1; transform: none; } 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(-30cqw) skewX(12deg); } }
.sh-banner {
    position: absolute; left: 0; right: 0; top: 40%;
    display: flex; flex-direction: column; align-items: center; gap: .3em;
    pointer-events: none; animation: shBanner 1.6s ease forwards;
}
.sh-banner small { font: 400 clamp(12px, 3.6cqw, 18px)/1 var(--disp); letter-spacing: .2em; color: #fff; background: var(--ink); padding: .45em 1.1em; border-radius: 999px; }
.sh-banner b { font: 400 clamp(26px, 8.6cqw, 48px)/1.15 var(--pop); color: var(--lime-l); -webkit-text-stroke: .09em var(--ink); paint-order: stroke fill; text-shadow: .06em .1em 0 var(--ink); transform: rotate(-3deg); white-space: nowrap; }
.sh-banner.warn b { color: #FF70BD; }
.sh-banner.warn small { background: var(--mag); }
@keyframes shBanner { 0% { opacity: 0; transform: scale(1.6); } 14% { opacity: 1; transform: scale(1); } 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.9) translateY(-4cqw); } }
.sh-toast {
    position: absolute; left: 3cqw; right: 3cqw; bottom: calc(max(2.4cqw, env(safe-area-inset-bottom)) + 22cqw);
    text-align: center; pointer-events: none;
    font: 800 clamp(12px, 3.5cqw, 17px)/1.45 var(--body); word-break: keep-all; overflow-wrap: anywhere;
    background: #fff; border: 3px solid var(--ink); border-radius: 1.2em; padding: .55em 1em; box-shadow: .18em .22em 0 var(--ink);
    animation: shToast var(--td, 2s) ease forwards;
}
.sh-toast b { color: var(--tc, var(--red)); }
@keyframes shToast { 0% { opacity: 0; transform: translateY(2cqw); } 10% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }
.sh-tip {
    position: absolute; left: 2.6cqw; right: 2.6cqw; top: calc(max(1.6cqw, env(safe-area-inset-top)) + 22cqw);
    display: flex; gap: 2cqw; align-items: flex-start; pointer-events: none;
    animation: shIn .4s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes shIn { from { opacity: 0; transform: translateY(-3cqw) scale(.95); } }
.sh-tip-face { width: 17cqw; height: 17cqw; flex: none; border-radius: 50%; background: #fff; border: 3px solid var(--ink); object-fit: cover; box-shadow: .15em .2em 0 var(--mag); }
.sh-tip-box { flex: 1; background: #fff; border: 3px solid var(--ink); border-radius: 18px; padding: 2.2cqw 3cqw; box-shadow: .18em .22em 0 var(--ink); }
.sh-tip-step { margin: 0 0 .35em; font: 400 clamp(12px, 2.5cqw, 13px)/1 var(--disp); color: var(--mag); }
.sh-tip-step span:last-child { font: 800 1.05em/1 var(--body); color: var(--mute); }
.sh-tip-text { margin: 0; font: 800 clamp(12.5px, 3.7cqw, 18px)/1.55 var(--body); word-break: keep-all; overflow-wrap: anywhere; }
.sh-tip-text b { color: #B0126B; }
.sh-tip-reading { pointer-events: auto; }
.sh-tip-reading .sh-tip-step { margin-top: .65em; }
.sh-warning {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2cqw;
    pointer-events: none; animation: shWarn 2.6s ease forwards;
    background: repeating-linear-gradient(-45deg, rgba(255, 214, 10, .28) 0 6cqw, rgba(255, 62, 165, .16) 6cqw 12cqw);
}
.sh-warning img { width: auto; max-width: 86cqw; height: 62cqw; display: block; object-fit: contain; }
.sh-warn-text { font: 400 clamp(46px, 16cqw, 90px)/1 var(--disp); color: var(--yel); -webkit-text-stroke: .08em var(--ink); paint-order: stroke fill; text-shadow: .05em .08em 0 var(--mag); font-style: italic; display: block; transform: rotate(-6deg); }
.sh-warning p { margin: 0; font: 400 clamp(15px, 4.8cqw, 26px)/1.3 var(--pop); color: #fff; -webkit-text-stroke: .12em var(--ink); paint-order: stroke fill; }
@keyframes shWarn { 0% { opacity: 0; } 10%, 22%, 34% { opacity: 1; } 16%, 28% { opacity: .4; } 85% { opacity: 1; } 100% { opacity: 0; } }
.sh-cutin { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column; justify-content: center; gap: 1.6cqw; animation: shCutBg 1.25s ease forwards; }
.sh-cutin span {
    display: block; height: 15cqw; margin: 0 -10cqw; background: var(--c); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
    transform: skewY(-8deg) translateX(-110%); animation: shCut 1.25s cubic-bezier(.2, .9, .3, 1) forwards; animation-delay: calc(var(--i) * .06s);
    position: relative; overflow: hidden;
}
.sh-cutin span:nth-child(even) { transform: skewY(-8deg) translateX(110%); animation-name: shCutR; }
.sh-cutin img { position: absolute; left: 50%; top: 50%; width: 20cqw; height: 20cqw; transform: translate(-50%, -50%) skewY(8deg); border-radius: 50%; border: 3px solid #fff; object-fit: cover; }
.sh-cutin b { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%) rotate(-8deg); text-align: center; font: 400 clamp(36px, 13cqw, 70px)/1 var(--disp); color: #fff; -webkit-text-stroke: .09em var(--ink); paint-order: stroke fill; text-shadow: .05em .08em 0 var(--mag); animation: shCutT 1.25s ease forwards; }
@keyframes shCut { 18% { transform: skewY(-8deg) translateX(0); } 80% { transform: skewY(-8deg) translateX(0); opacity: 1; } 100% { transform: skewY(-8deg) translateX(110%); opacity: 0; } }
@keyframes shCutR { 18% { transform: skewY(-8deg) translateX(0); } 80% { transform: skewY(-8deg) translateX(0); opacity: 1; } 100% { transform: skewY(-8deg) translateX(-110%); opacity: 0; } }
@keyframes shCutT { 0% { opacity: 0; transform: translateY(-50%) rotate(-8deg) scale(2); } 25% { opacity: 1; transform: translateY(-50%) rotate(-8deg) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes shCutBg { 0% { background: rgba(255, 255, 255, 0); } 15% { background: rgba(255, 255, 255, .55); } 100% { background: rgba(255, 255, 255, 0); } }
/* 画面の切り替え：ペンキのしぶきが広がって隠す */
.sh-wipe { position: absolute; inset: 0; pointer-events: none; z-index: 30; }
.sh-wipe i { position: absolute; width: 160cqw; height: 160cqw; border-radius: 46% 54% 52% 48%; background: var(--wc, var(--lime)); border: 4px solid var(--ink); transform: scale(0); }
.sh-wipe i:nth-child(1) { left: -60cqw; top: -40cqw; }
.sh-wipe i:nth-child(2) { right: -70cqw; top: 30cqh; background: #fff; }
.sh-wipe i:nth-child(3) { left: -40cqw; bottom: -60cqw; background: var(--yel); }
.sh-wipe.go i { animation: shWipe .62s cubic-bezier(.6, 0, .4, 1) forwards; }
.sh-wipe.go i:nth-child(2) { animation-delay: .04s; }
.sh-wipe.go i:nth-child(3) { animation-delay: .08s; }
@keyframes shWipe { 0% { transform: scale(0) rotate(0); } 42% { transform: scale(1.05) rotate(20deg); } 58% { transform: scale(1.05) rotate(20deg); opacity: 1; } 100% { transform: scale(1.2) rotate(30deg); opacity: 0; } }

/* ───── 共通の画面・ボタン ───── */
.sh-screen {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqw;
    padding: max(4cqw, env(safe-area-inset-top)) 5cqw max(4cqw, env(safe-area-inset-bottom));
    text-align: center;
}
.sh-panel { overflow-y: auto; touch-action: pan-y; justify-content: flex-start; }
.sh-panel > * { flex: none; }
.sh-btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
    cursor: pointer; text-decoration: none; border-radius: 999px;
    padding: .75em 2em .8em; font: 400 clamp(14px, 4.4cqw, 22px)/1.2 var(--pop); letter-spacing: .04em;
    word-break: keep-all; transition: transform .12s;
}
.sh-btn:active { transform: scale(.95) rotate(-1deg); }
.sh-btn-main {
    color: var(--ink); border: 4px solid var(--ink);
    background: linear-gradient(180deg, #E4FF8A 0%, var(--lime-l) 40%, var(--lime) 100%);
    box-shadow: inset 0 .2em 0 rgba(255, 255, 255, .6), .22em .3em 0 var(--ink), .5em .6em 0 var(--mag);
}
.sh-btn-sub { color: var(--ink); background: #fff; border: 3px solid var(--ink); box-shadow: .18em .24em 0 var(--ink); }
.sh-btn-s { font-size: clamp(13px, 3.8cqw, 18px); padding: .55em 1.4em .6em; }
.sh-btn-xs { font-size: clamp(12px, 3.3cqw, 16px); padding: .45em 1.1em .5em; }
.sh-row { display: flex; gap: 3cqw; justify-content: center; flex-wrap: wrap; }
.sh-link { color: var(--ink); font: 800 clamp(12px, 3.4cqw, 15px)/1 var(--body); display: inline-flex; align-items: center; min-height: 44px; }
.sh-link-btn { background: none; border: 0; padding: .4em; text-decoration: underline; cursor: pointer; }
.sh-head { margin: 0; font: 400 clamp(26px, 9cqw, 48px)/1.1 var(--pop); color: var(--yel); -webkit-text-stroke: .1em var(--ink); paint-order: stroke fill; text-shadow: .06em .1em 0 var(--mag); transform: rotate(-3deg); }

/* ───── タイトル ───── */
.sh-title {
    justify-content: flex-end; gap: 2.6cqw; padding-bottom: max(5cqw, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(255, 251, 240, 0) 55%, rgba(255, 251, 240, .9) 70%, rgba(255, 251, 240, .97));
}
.sh-logo-wrap { margin-bottom: auto; margin-top: 13cqw; width: 90cqw; display: flex; justify-content: center; animation: shFloat 3.2s ease-in-out infinite; }
@keyframes shFloat { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-1.6cqw) rotate(1deg); } }
.sh-logo { width: 90cqw; height: auto; display: block; filter: drop-shadow(0 1.4cqw 2cqw rgba(24, 60, 110, .25)); }
/* 題字の画像が無いときの英字（ストリートのステッカー風：太い白フチ＋インクの影＋ペンキのしずく） */
.sh-logo-text { margin: 0; position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; transform: rotate(-6deg); font-weight: 400; }
.sh-lt { position: relative; display: block; font: 400 25cqw/.95 var(--disp); padding: 0 .06em; background: linear-gradient(180deg, #F2FF9C 0%, var(--lime-l) 40%, var(--lime) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sh-lt::before {
    content: attr(data-t); position: absolute; left: 0; top: 0; right: 0; z-index: -1; padding: 0 .06em;
    color: #fff; -webkit-text-stroke: .2em #fff;
    filter: drop-shadow(.03em 0 0 var(--ink)) drop-shadow(-.03em 0 0 var(--ink)) drop-shadow(0 -.03em 0 var(--ink)) drop-shadow(.05em .08em 0 var(--ink)) drop-shadow(.06em .09em 0 var(--mag));
}
.sh-lt::after { content: ""; position: absolute; left: 22%; bottom: -.12em; width: .14em; height: .3em; border-radius: 0 0 .1em .1em; background: var(--lime); border: .03em solid var(--ink); border-top: 0; z-index: -1; }
.sh-lt2 { font-size: 15.5cqw; margin-top: -.5cqw; background: linear-gradient(180deg, #FFD3EB 0%, #FF70BD 40%, var(--mag) 100%); -webkit-background-clip: text; background-clip: text; }
.sh-lt2::after { left: 70%; background: var(--mag); height: .42em; }
.sh-lt-ja { margin-top: 3cqw; font: 400 5.2cqw/1 var(--pop); letter-spacing: .12em; color: var(--ink); background: var(--cyan); border: 3px solid var(--ink); border-radius: 999px; padding: .45em 1.1em .5em; box-shadow: .2em .24em 0 var(--ink); transform: rotate(4deg); }
.sh-catch { margin: 0; font: 400 clamp(15px, 4.9cqw, 26px)/1.5 var(--pop); letter-spacing: .02em; word-break: keep-all; text-shadow: 0 0 .3em #fff, 0 0 .6em #fff; }
.sh-title-btns { display: flex; flex-direction: column; gap: 3cqw; align-items: center; }
.sh-title-btns .sh-btn-main { font-size: clamp(19px, 6.6cqw, 34px); padding: .6em 2.8em .65em; animation: shPulse 1.6s ease-in-out infinite; }
@keyframes shPulse { 0%, 100% { transform: scale(1) rotate(-1deg); } 50% { transform: scale(1.05) rotate(1deg); } }
.sh-title-stats { margin: 0; display: flex; gap: 3cqw; font: 400 clamp(11px, 3.3cqw, 16px)/1 var(--disp); color: var(--mute); }
.sh-title-stats b { color: var(--ink); font-weight: 400; }
.sh-title-stats span:first-child { color: #D99B00; }
.sh-note { margin: 0; font-size: clamp(12px, 3cqw, 14px); color: var(--mute); line-height: 1.6; word-break: keep-all; font-weight: 800; }
.sh-demo-tag { position: absolute; top: max(3cqw, env(safe-area-inset-top)); left: 3cqw; font: 400 clamp(12px, 2.8cqw, 14px)/1 var(--disp); letter-spacing: .12em; background: var(--ink); color: #fff; padding: .7em 1em; border-radius: 999px; }
.sh-demo-tag::before { content: ""; display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: var(--lime-l); margin-right: .6em; animation: shBlink 1s steps(2) infinite; }
@keyframes shBlink { 50% { opacity: 0; } }
.sh-sound { position: absolute; top: max(3cqw, env(safe-area-inset-top)); right: 3cqw; min-height: 44px; min-width: 44px; cursor: pointer; border: 3px solid var(--ink); background: #fff; border-radius: 999px; padding: .4em 1em; font: 400 clamp(12px, 3cqw, 15px)/1 var(--disp); box-shadow: .16em .2em 0 var(--ink); }

/* ───── あそびかた ───── */
.sh-howto { background: linear-gradient(180deg, rgba(221, 246, 255, .97), rgba(255, 251, 240, .98) 40%); gap: 2.6cqw; justify-content: safe center; }
.sh-how { width: 100%; background: #fff; border: 3px solid var(--ink); border-radius: 22px; box-shadow: .3em .36em 0 var(--ink); padding: 3.2cqw 3.6cqw; display: flex; flex-direction: column; gap: 2cqw; text-align: left; }
.sh-how-step { display: flex; gap: 2.4cqw; align-items: flex-start; }
.sh-how-step p { margin: 0; font: 500 clamp(12px, 3.5cqw, 17px)/1.6 var(--body); }
.sh-how-step b { font-weight: 800; color: #B0126B; }
.sh-num { flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; display: grid; place-items: center; font: 400 clamp(11px, 3.4cqw, 16px)/1 var(--disp); background: var(--yel); border: 3px solid var(--ink); }
.sh-how-mons { width: 100%; height: auto; display: block; aspect-ratio: 720 / 170; }
.sh-how-jobs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.4cqw; }
.sh-how-jobs li { display: flex; flex-direction: column; gap: .25em; background: #F6FBFF; border: 2px solid var(--ink); border-left: 1.4cqw solid var(--c); border-radius: 12px; padding: 1.2cqw 1.8cqw; }
.sh-how-jobs b { font: 800 clamp(12px, 3cqw, 14.5px)/1.25 var(--body); }
.sh-how-jobs em { display: block; font: 400 1.05em/1.3 var(--pop); font-style: normal; color: var(--c); }
.sh-how-jobs span { font: 500 clamp(12px, 2.8cqw, 13.5px)/1.4 var(--body); color: var(--mute); }

/* ───── ステージ選択 ───── */
.sh-stages, .sh-dex { background: linear-gradient(180deg, rgba(198, 255, 61, .25), rgba(255, 251, 240, .98) 30%); gap: 2.6cqw; padding-top: max(3cqw, env(safe-area-inset-top)); }
.sh-topbar { width: 100%; display: flex; align-items: center; gap: 2cqw; }
.sh-back { width: max(44px, 11cqw); height: max(44px, 11cqw); flex: none; font: 800 7.6cqw/1 "Hiragino Sans", "Helvetica Neue", sans-serif; cursor: pointer; border: 3px solid var(--ink); background: #fff; border-radius: 50%; box-shadow: .1em .14em 0 var(--ink); padding-bottom: .12em; }
.sh-screen-title { flex: 1; margin: 0; text-align: left; font: 400 clamp(16px, 5.4cqw, 28px)/1 var(--pop); white-space: nowrap; }
.sh-screen-title b { font: 400 .62em/1 var(--disp); color: var(--mag); margin-left: .4em; }
.sh-stage-list { width: 100%; display: flex; flex-direction: column; gap: 3cqw; padding-bottom: 4cqw; }
.sh-stage-card {
    position: relative; overflow: hidden; cursor: pointer; text-align: left;
    min-height: 34cqw; border-radius: 22px; border: 3px solid var(--ink);
    background: linear-gradient(110deg, #fff 40%, var(--s1, #E6F7FF) 70%, var(--s0, #8ED8FF)) center / cover no-repeat;
    box-shadow: .22em .3em 0 var(--ink);
    padding: 3cqw 38cqw 3cqw 4cqw; display: flex; flex-direction: column; gap: .5em; transition: transform .12s;
}
.sh-stage-card:active { transform: scale(.98); }
.sh-st-no { font: 400 clamp(12px, 3cqw, 14px)/1 var(--disp); color: #B0126B; }
.sh-st-no em { font-style: normal; color: var(--mute); }
.sh-st-name { font: 400 clamp(17px, 5.8cqw, 30px)/1.15 var(--pop); }
.sh-st-stars { display: flex; gap: .15em; font-size: clamp(16px, 5cqw, 26px); }
.sh-st-stars i { font-style: normal; color: #D7DBE5; -webkit-text-stroke: 1.5px var(--ink); }
.sh-st-stars i.on { color: var(--yel); }
.sh-st-best { font: 400 clamp(12px, 2.9cqw, 14px)/1.3 var(--disp); color: var(--mute); display: flex; align-items: center; gap: .5em; }
.sh-st-boss-name { font: 800 clamp(12px, 3cqw, 14px)/1.3 var(--body); color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: .2em .7em; align-self: flex-start; }
.sh-st-boss { position: absolute; right: 2cqw; top: calc(50% - 15cqw); width: 30cqw; height: 30cqw; animation: shFloat 3s ease-in-out infinite; }
.sh-stage-card.locked { cursor: default; filter: grayscale(.75); }
.sh-stage-card.locked .sh-st-boss { filter: brightness(0) opacity(.25); animation: none; }
.sh-st-lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(236, 239, 245, .9); font: 400 clamp(13px, 4cqw, 19px)/1.3 var(--pop); }
.sh-st-first { position: absolute; right: 2cqw; top: 2cqw; font: 400 clamp(12px, 2.9cqw, 14px)/1 var(--pop); background: var(--mag); color: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: .4em .8em; transform: rotate(3deg); }
.sh-endless { background: linear-gradient(120deg, #F2FF9C, #FFD3EB 50%, #C9F1FF); min-height: 26cqw; padding-right: 4cqw; }
.sh-mini-rank { font: 400 1.2em/1 var(--disp); color: #fff; background: var(--ink); border-radius: .3em; padding: .15em .35em; }
.sh-mini-rank.rS { background: var(--mag); } .sh-mini-rank.rA { background: #D99B00; }

/* ───── 図鑑 ───── */
.sh-tabs { width: 100%; display: flex; gap: 2cqw; }
.sh-tabs button { flex: 1; min-height: 44px; cursor: pointer; border: 3px solid var(--ink); background: #fff; border-radius: 14px; font: 400 clamp(13px, 3.9cqw, 19px)/1 var(--pop); box-shadow: .12em .16em 0 var(--ink); }
.sh-tabs button.on { background: var(--lime-l); }
.sh-dex-body { width: 100%; display: flex; flex-direction: column; gap: 3cqw; padding-bottom: 6cqw; }
.sh-job-card { background: #fff; border: 3px solid var(--ink); border-radius: 20px; box-shadow: .22em .28em 0 var(--ink); padding: 3cqw; text-align: left; border-top: 2.4cqw solid var(--c); }
.sh-job-card header { display: flex; align-items: center; gap: 3cqw; margin-bottom: 2cqw; }
.sh-job-card header img { width: 19cqw; height: 19cqw; border-radius: 50%; border: 3px solid var(--ink); object-fit: cover; background: var(--cream); flex: none; }
.sh-job-card header div { display: flex; flex-direction: column; gap: .3em; min-width: 0; }
.sh-job-card header small { font: 800 clamp(12px, 2.9cqw, 13.5px)/1.2 var(--body); color: var(--c); filter: brightness(.8); }
.sh-job-card header b { font: 400 clamp(16px, 5cqw, 26px)/1.2 var(--pop); }
.sh-job-card header span { font: 400 clamp(12px, 2.8cqw, 13px)/1 var(--disp); color: var(--mute); }
.sh-job-card section { border-top: 2px dashed rgba(29, 30, 36, .2); padding: 1.6cqw 0; }
.sh-job-card h4 { margin: 0 0 .3em; font: 400 clamp(12.5px, 3.7cqw, 18px)/1.3 var(--pop); }
.sh-job-card p { margin: 0; font: 500 clamp(12px, 3.4cqw, 16px)/1.65 var(--body); }
.sh-job-card section.locked h4 { color: #A8AFBF; }
.sh-job-card section.locked p { color: var(--mute); font-weight: 800; }
.sh-en-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2cqw; }
.sh-en-cell { cursor: pointer; background: #fff; border: 3px solid var(--ink); border-radius: 14px; padding: 1cqw .6cqw 1.4cqw; display: flex; flex-direction: column; align-items: center; gap: .3em; box-shadow: .1em .14em 0 var(--ink); min-height: 44px; }
.sh-en-cell canvas { width: 100%; height: auto; aspect-ratio: 1; display: block; }
.sh-en-cell span { font: 800 clamp(12px, 2.6cqw, 13px)/1.2 var(--body); word-break: keep-all; overflow-wrap: anywhere; }
.sh-en-cell.boss { background: #FFF1F8; }
.sh-en-cell.locked span { color: #A8AFBF; }
.sh-dex-detail { width: 100%; background: var(--ink); color: #fff; border-radius: 16px; padding: 2.6cqw 3.4cqw; text-align: left; animation: shIn .3s ease; }
.sh-dex-detail b { font: 400 clamp(14px, 4.4cqw, 21px)/1.3 var(--pop); color: var(--lime-l); }
.sh-dex-detail p { margin: .4em 0 0; font: 500 clamp(12px, 3.4cqw, 16px)/1.6 var(--body); }

/* ───── 一時停止 ───── */
.sh-pause { background: rgba(255, 251, 240, .94); gap: 3.4cqw; z-index: 20; }
.sh-pause-head { margin: 0; font: 400 clamp(34px, 12cqw, 64px)/1 var(--disp); color: var(--cyan); -webkit-text-stroke: .08em var(--ink); paint-order: stroke fill; text-shadow: .05em .08em 0 var(--mag); transform: rotate(-4deg); }
.sh-pause .sh-btn { min-width: 62cqw; }

/* ───── リザルト ───── */
.sh-result { background: linear-gradient(180deg, rgba(221, 246, 255, .95), rgba(255, 251, 240, .97) 30%); gap: 2.4cqw; padding-top: max(5cqw, env(safe-area-inset-top)); }
.sh-res-head img { width: auto; max-width: 84cqw; height: 46cqw; object-fit: contain; display: block; animation: shIn .6s cubic-bezier(.34, 1.56, .64, 1); }
.sh-word { display: block; font: 400 clamp(32px, 11.5cqw, 62px)/1.05 var(--disp); transform: rotate(-4deg); -webkit-text-stroke: .1em var(--ink); paint-order: stroke fill; text-shadow: .05em .08em 0 var(--mag); animation: shIn .6s cubic-bezier(.34, 1.56, .64, 1); }
.sh-word.clear { color: var(--lime-l); }
.sh-word.try { color: #9BE7FF; text-shadow: .05em .08em 0 #8B5CF6; }
.sh-res-sub { margin: -1cqw 0 0; font: 400 clamp(13px, 4cqw, 19px)/1.45 var(--pop); word-break: keep-all; overflow-wrap: anywhere; }
.sh-res-scorebox { position: relative; width: 100%; background: #fff; border: 3px solid var(--ink); border-radius: 20px; box-shadow: .22em .28em 0 var(--ink); padding: 3cqw 4cqw; }
.sh-res-lines { list-style: none; margin: 0 0 1.4cqw; padding: 0 22cqw 0 0; display: flex; flex-direction: column; gap: .35em; text-align: left; }
.sh-res-lines li { display: flex; justify-content: space-between; gap: 1em; font: 800 clamp(11.5px, 3.3cqw, 15.5px)/1.3 var(--body); opacity: 0; animation: shLine .35s ease forwards; animation-delay: calc(.3s + var(--i) * .12s); }
.sh-res-lines b { font: 400 1em/1.3 var(--disp); }
@keyframes shLine { from { opacity: 0; transform: translateX(-3cqw); } to { opacity: 1; transform: none; } }
.sh-res-score { display: flex; align-items: baseline; justify-content: center; gap: .5em; border-top: 3px dashed rgba(29, 30, 36, .25); padding-top: 1.4cqw; }
.sh-res-score small { font: 400 clamp(12px, 3cqw, 15px)/1 var(--disp); color: var(--mute); }
.sh-res-score b { font: 400 clamp(30px, 10cqw, 52px)/1 var(--disp); font-variant-numeric: tabular-nums; }
.sh-res-best { margin: .4em 0 0; font: 400 clamp(12px, 3cqw, 14px)/1.3 var(--disp); color: var(--mute); }
.sh-res-badges { margin: .6em 0 0; display: flex; gap: .5em; justify-content: center; flex-wrap: wrap; }
.sh-res-badges:empty { display: none; }
.sh-res-badges span { font: 400 clamp(11px, 3.2cqw, 15px)/1 var(--disp); padding: .5em .9em; border-radius: 999px; border: 3px solid var(--ink); animation: shStamp .5s cubic-bezier(.34, 1.56, .64, 1) 1.7s backwards; }
.sh-res-badges .nomiss { background: var(--lime-l); }
.sh-res-badges .nobomb { background: var(--cyan); }
.sh-res-badges .rec { background: var(--mag); color: #fff; }
.sh-rank { position: absolute; right: 3cqw; top: 2cqw; width: 20cqw; height: 20cqw; display: grid; place-items: center; font: 400 14cqw/1 var(--disp); color: #fff; border-radius: 50%; border: 4px solid var(--ink); background: var(--ink); transform: rotate(-12deg); box-shadow: .1em .12em 0 var(--mag); animation: shStamp .55s cubic-bezier(.34, 1.56, .64, 1) 1.4s backwards; }
.sh-rank.rS { background: var(--mag); text-shadow: .06em .06em 0 var(--ink); }
.sh-rank.rA { background: #FFB800; text-shadow: .06em .06em 0 var(--ink); }
.sh-rank.rB { background: var(--cyan); text-shadow: .06em .06em 0 var(--ink); }
.sh-rank.rC { background: #A3AABB; }
@keyframes shStamp { from { opacity: 0; transform: scale(2.4) rotate(-30deg); } }
.sh-res-stats { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4cqw; }
.sh-res-stats span { font: 800 clamp(12px, 3.1cqw, 15px)/1.2 var(--body); white-space: nowrap; background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: .4em .8em; }
.sh-res-stats b { font: 400 1.05em/1 var(--disp); }
.sh-res-missions { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 1.2cqw; }
.sh-res-missions li { display: flex; align-items: center; gap: 2cqw; background: #fff; border: 2px solid rgba(29, 30, 36, .25); border-radius: 999px; padding: .45em 1em .45em .6em; text-align: left; font: 800 clamp(12px, 3.5cqw, 16px)/1.3 var(--body); }
.sh-res-missions li i { font-style: normal; font-size: 1.4em; color: #D7DBE5; -webkit-text-stroke: 1.5px var(--ink); }
.sh-res-missions li.done { border-color: var(--ink); }
.sh-res-missions li.done i { color: var(--yel); animation: shStamp .5s cubic-bezier(.34, 1.56, .64, 1) backwards; animation-delay: calc(1s + var(--i) * .2s); }
.sh-res-missions li span { flex: 1; }
.sh-res-missions li b { font: 400 max(12px, .8em)/1 var(--disp); color: #fff; background: var(--mag); border-radius: 999px; padding: .35em .6em; }
.sh-res-match { width: 100%; background: #fff; border: 3px solid var(--ink); border-radius: 22px; padding: 3.4cqw 4cqw; text-align: left; box-shadow: .22em .28em 0 var(--ink), .5em .6em 0 var(--c, var(--mag)); }
.sh-res-lead { margin: 0 0 1.6cqw; font: 800 clamp(12px, 3.6cqw, 17px)/1.4 var(--body); color: var(--mute); }
.sh-res-job { display: flex; align-items: center; gap: 3cqw; }
.sh-res-job img { width: 24cqw; height: 24cqw; border-radius: 50%; object-fit: cover; border: 3px solid var(--ink); background: var(--cream); flex: none; box-shadow: .12em .16em 0 var(--c, var(--mag)); }
.sh-res-job > div { min-width: 0; }
.sh-res-type { margin: 0 0 .3em; font: 800 clamp(12px, 3cqw, 14px)/1.2 var(--body); color: #B0126B; }
.sh-res-name { margin: 0; font: 400 clamp(18px, 5.6cqw, 30px)/1.25 var(--pop); word-break: keep-all; overflow-wrap: anywhere; }
.sh-res-reason { margin: 2.4cqw 0 0; font: 800 clamp(13px, 3.8cqw, 18px)/1.6 var(--body); background: #FFF7C2; border-radius: 12px; padding: .5em .8em; }
.sh-res-desc { margin: 1.6cqw 0 2cqw; font: 500 clamp(13px, 3.6cqw, 17px)/1.7 var(--body); }
.sh-res-bars { display: flex; flex-direction: column; gap: 1.2cqw; }
.sh-res-bar { display: grid; grid-template-columns: 9em 1fr 3.2em; align-items: center; gap: .8em; font: 800 clamp(12px, 3cqw, 14px)/1 var(--body); }
.sh-res-bar i { height: 1.1em; background: rgba(29, 30, 36, .08); border-radius: 999px; overflow: hidden; border: 2px solid var(--ink); }
.sh-res-bar em { display: block; height: 100%; width: 0; transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.sh-res-bar span:last-child { text-align: right; font: 400 1em/1 var(--disp); }
.sh-res-small { margin: 2cqw 0 0; font-size: clamp(12px, 2.8cqw, 13.5px); color: var(--mute); line-height: 1.6; font-weight: 800; }
.sh-res-dexnew { margin: 2cqw 0; font: 800 clamp(12px, 3.2cqw, 15px)/1.6 var(--body); background: #EFFFD6; border: 2px solid var(--ink); border-radius: 12px; padding: .5em .8em; }
.sh-res-dexnew b { font: 400 max(12px, .95em)/1 var(--pop); color: #3F7A0C; margin-right: .6em; }
.sh-res-match .sh-btn-xs { margin-top: 1cqw; }
.sh-res-btns { display: flex; flex-direction: column; gap: 3cqw; align-items: center; padding-bottom: 5cqw; }
.sh-res-btns > .sh-btn { min-width: 72cqw; }
.sh-res-btns-top { padding-bottom: 0; }

.sh-loading { position: absolute; inset: 0; z-index: 40; display: grid; place-content: center; gap: 2cqw; justify-items: center; background: #DDF6FF; font: 400 clamp(12px, 3cqw, 15px)/1 var(--disp); letter-spacing: .2em; transition: opacity .4s; }
.sh-loading i { width: 10cqw; height: 10cqw; border-radius: 50%; background: var(--mag); border: 3px solid var(--ink); animation: shBounce .6s ease-in-out infinite alternate; }
@keyframes shBounce { to { transform: translateY(-4cqw); } }
.sh-loading.off { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    .sh-logo-wrap, .sh-title-btns .sh-btn-main, .sh-st-boss { animation: none; }
}