/* FIRST DAY STORY 作り込み版 — アニメ調ビジュアルノベル（桜色・空色・白・やわらかい金） */
:root {
    --ink: #3D3B5C;
    --mute: #6E6C8A;
    --cream: #FFF9FB;
    --pink: #FF8FB1;
    --pink-d: #E8577F;
    --pink-l: #FFE3EC;
    --sky: #5BC0FF;
    --sky-l: #E3F4FF;
    --gold: #E8C26A;
    --gold-d: #B8892E;
    --disp: "Playfair Display", "Zen Maru Gothic", serif;
    --body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { background: var(--cream); color: var(--ink); font-family: var(--body); font-weight: 500; touch-action: none; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; }
.st-backdrop { position: fixed; inset: -40px; background: radial-gradient(circle at 20% 20%, #FFE3EC, transparent 60%), radial-gradient(circle at 80% 70%, #E3F4FF, transparent 60%), linear-gradient(160deg, #FFF4F8, #F1F8FF); }
.st-backdrop::after { content: ""; position: absolute; inset: 0; background: url(assets/bg.webp) center top / cover; opacity: .35; filter: blur(26px) saturate(1.1); }
.st-stage {
    position: fixed; left: 50%; top: 50%; width: 360px; height: 640px;
    transform: translate(-50%, -50%); overflow: hidden; background: var(--cream);
    border-radius: 22px; box-shadow: 0 0 0 1px rgba(61, 59, 92, .08), 0 30px 80px rgba(120, 90, 140, .28);
    container-type: size;
    --box-h: 50cqw; --box-b: max(3cqw, env(safe-area-inset-bottom));
}
.st-stage.st-full { border-radius: 0; box-shadow: none; }
.st-stage [hidden] { display: none !important; }
.st-stage.flash::after { content: ""; position: absolute; inset: 0; z-index: 60; background: rgba(255, 255, 255, .55); pointer-events: none; animation: stFade .14s ease reverse forwards; }

/* ───── ゲーム文字（白の太フチ＋金の縁＋グラデーション） ───── */
.st-fx { position: relative; display: inline-block; white-space: nowrap; isolation: isolate; }
.st-fx > span { display: block; }
.st-fx .fx-b { position: absolute; inset: 0; z-index: -2; color: #fff; -webkit-text-stroke: .28em #fff; filter: drop-shadow(0 .06em .04em rgba(184, 137, 46, .55)) drop-shadow(0 .14em .14em rgba(232, 87, 127, .28)); }
.st-fx .fx-m { position: absolute; inset: 0; z-index: -1; color: var(--gold-d); -webkit-text-stroke: .09em var(--gold); }
.st-fx .fx-f { background: var(--fx, linear-gradient(180deg, #FFE7F0 0%, #FF9DBC 45%, #E8577F 78%, #F2C66B 100%)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ───── 背景 ───── */
.st-world { position: absolute; inset: 0; }
.st-world.shake { animation: stShake .38s ease; }
@keyframes stShake { 20% { transform: translate(-2.4cqw, 1cqw); } 40% { transform: translate(2cqw, -1cqw); } 60% { transform: translate(-1.4cqw, .6cqw); } 80% { transform: translate(1cqw, 0); } }
.st-bg { position: absolute; inset: -2%; background-color: #F3F9FF; background-repeat: no-repeat; opacity: 0; transition: opacity .7s ease; }
.st-bg.bg-fb { background-size: auto 165%; }
.st-bg.bg-art { background-size: cover; }
.st-bg.on { opacity: 1; animation: stBreath 30s ease-in-out infinite alternate; }
@keyframes stBreath { from { transform: scale(1) translateX(0); } to { transform: scale(1.06) translateX(-1.5%); } }
[data-screen="title"] .st-bg.on { animation-duration: 18s; }
/* 会議室（CSS で描く明るい部屋。画像が届くまでの仮） */
/* 会議室（CSS で描く明るい部屋） */
.st-bg.bg-meeting, .cgfb-bg.bg-meeting {
    background:
        linear-gradient(180deg, transparent 0 50%, #DCD3F5 50% 50.9%, transparent 50.9%),
        repeating-linear-gradient(90deg, transparent 0 12cqw, rgba(29, 30, 36, .04) 12cqw 12.4cqw),
        linear-gradient(180deg, #F5F1FF 0 50%, #FFFDF8 50% 100%);
}
.bg-meeting i, .bg-meeting b { position: absolute; display: block; }
.mr-win {
    left: 5%; top: 8%; width: 43%; height: 32%;
    border: 1.6cqw solid #fff; border-radius: 2.4cqw;
    box-shadow: 0 0 0 .6cqw #E3DAFA, 0 1.6cqw 3cqw rgba(120, 100, 200, .16);
    background:
        radial-gradient(ellipse 22% 12% at 26% 30%, #fff 0 60%, transparent 62%),
        radial-gradient(ellipse 16% 10% at 38% 26%, #fff 0 60%, transparent 62%),
        radial-gradient(ellipse 20% 10% at 74% 30%, #fff 0 60%, transparent 62%),
        linear-gradient(#3FA2F0, #3FA2F0) 0 100% / 100% 9% no-repeat,
        linear-gradient(#FFFFFF, #E9F4FF) 8% 91% / 10% 22% no-repeat,
        linear-gradient(#D5E9FA, #BFDDF7) 21% 91% / 8% 34% no-repeat,
        linear-gradient(#FFFFFF, #E3F0FC) 32% 91% / 12% 18% no-repeat,
        linear-gradient(#E8F3FD, #CFE5F8) 60% 91% / 11% 28% no-repeat,
        linear-gradient(#FFFFFF, #DDEEFB) 74% 91% / 9% 40% no-repeat,
        linear-gradient(#D9EBFA, #C4E0F6) 88% 91% / 10% 24% no-repeat,
        radial-gradient(ellipse 40% 30% at 22% 86%, #6CCB8A 0 70%, transparent 71%),
        radial-gradient(ellipse 50% 34% at 72% 88%, #58BE7C 0 70%, transparent 71%),
        linear-gradient(180deg, #59B6FF, #BFE7FF 80%);
}
.mr-win::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(90deg, transparent calc(50% - .5cqw), #fff calc(50% - .5cqw) calc(50% + .5cqw), transparent calc(50% + .5cqw)),
        linear-gradient(180deg, transparent 38%, #fff 38% calc(38% + 1cqw), transparent calc(38% + 1cqw));
}
.mr-board {
    right: 5%; top: 10%; width: 42%; height: 27%;
    background: #fff;
    border: 1.2cqw solid #E2E5EE; border-radius: 1.6cqw;
    box-shadow: 0 1.4cqw 2.6cqw rgba(29, 30, 36, .1);
}
.mr-board::before {
    content: ""; position: absolute; left: 8%; right: 30%; bottom: 14%; height: 18%;
    background:
        linear-gradient(#2F9BFF, #2F9BFF) 0 0 / 70% 14% no-repeat,
        linear-gradient(#E63946, #E63946) 0 50% / 90% 14% no-repeat,
        linear-gradient(#8B5CF6, #8B5CF6) 0 100% / 55% 14% no-repeat;
    border-radius: 2px;
}
.mr-board b { width: 17%; height: 26%; border-radius: 3px; box-shadow: 0 .5cqw .8cqw rgba(29, 30, 36, .14); }
.mr-board b:nth-child(1) { left: 7%; top: 10%; background: #FFC23C; transform: rotate(-6deg); }
.mr-board b:nth-child(2) { left: 28%; top: 14%; background: #FF8FA3; transform: rotate(4deg); }
.mr-board b:nth-child(3) { left: 49%; top: 9%; background: #7CC8FF; transform: rotate(-3deg); }
.mr-board b:nth-child(4) { left: 72%; top: 12%; background: #B69CFF; transform: rotate(7deg); }
.mr-board b:nth-child(5) { left: 73%; top: 50%; background: #9BE38E; transform: rotate(-5deg); }
.mr-board b:nth-child(6) { left: 51%; top: 46%; background: #FFE27A; transform: rotate(3deg); }
.mr-lamp { left: 50.5%; top: 0; width: 2px; height: 17%; background: #C9C2E0; }
.mr-lamp::after {
    content: ""; position: absolute; left: 50%; top: 100%; width: 10cqw; height: 5cqw;
    transform: translateX(-50%); border-radius: 10cqw 10cqw 1cqw 1cqw;
    background: linear-gradient(180deg, #FFD15C, #FFB13C);
    box-shadow: 0 2cqw 5cqw rgba(255, 194, 60, .5);
}
.mr-plant { right: 1%; top: 33%; width: 15%; height: 18%; }
.mr-plant::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 70%;
    background:
        radial-gradient(ellipse 30% 45% at 30% 55%, #47C46B 0 70%, transparent 72%),
        radial-gradient(ellipse 30% 45% at 70% 50%, #3BB25E 0 70%, transparent 72%),
        radial-gradient(ellipse 30% 45% at 50% 30%, #5BD37C 0 70%, transparent 72%);
}
.mr-plant b { left: 22%; right: 22%; bottom: 0; height: 36%; border-radius: 1cqw 1cqw 3cqw 3cqw; background: linear-gradient(180deg, #FF8C69, #F26A4B); }


/* ───── 立ち絵 ───── */
.st-cast { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.st-world.cg-on .st-cast { opacity: 0; }
.st-chara {
    position: absolute; padding: 0; border: 0; background: none; cursor: default;
    left: calc(var(--x, 50) * 1%);
    bottom: calc(var(--box-h) + var(--box-b) - 8cqw + var(--y, 0) * 1cqw + max(0px, (100cqh - 178cqw) * .3));
    width: calc(var(--w, 70) * 1cqw); aspect-ratio: 1;
    opacity: 0; transform: translateX(-50%) translateY(8cqw) scale(.94);
    transition: left .45s cubic-bezier(.3, .9, .3, 1), bottom .45s, width .45s cubic-bezier(.3, .9, .3, 1), opacity .35s, transform .45s cubic-bezier(.34, 1.4, .64, 1), filter .3s;
    pointer-events: none;
}
.art2 .st-chara { aspect-ratio: 2 / 3; }
.st-chara.in { opacity: 1; transform: translateX(-50%) translateY(0) scale(.97); }
.st-chara.in.talk { transform: translateX(-50%) translateY(-2cqw) scale(1.05); z-index: 5 !important; }
.st-chara.in.idle { filter: saturate(.6) brightness(1.08) contrast(.86); transform: translateX(-50%) translateY(2cqw) scale(.91); }
.st-chara img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; display: block; filter: drop-shadow(0 1.2cqw 1.6cqw rgba(120, 80, 120, .22)); pointer-events: none; }
.st-chara.hop img { animation: stHop .34s ease; }
@keyframes stHop { 40% { transform: translateY(-2.4cqw); } }
.st-manpu { position: absolute; right: 16%; top: 4%; font: 900 6cqw/1 var(--body); font-style: normal; color: var(--pink-d); background: #fff; border-radius: 50%; width: 1.7em; height: 1.7em; display: grid; place-items: center; box-shadow: 0 .4cqw 1.4cqw rgba(232, 87, 127, .3); opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.st-manpu.on { opacity: 1; transform: scale(1) rotate(-8deg); }
.st-manpu.surprise { color: #F59E0B; } .st-manpu.trouble { color: #5BA8E0; }
.st-bang { display: none; position: absolute; left: 50%; top: 2%; transform: translateX(-50%); font: 900 6.4cqw/1 var(--body); font-style: normal; color: #fff; background: linear-gradient(180deg, #FFB0C8, var(--pink-d)); border: .6cqw solid #fff; border-radius: 50%; width: 1.8em; height: 1.8em; place-items: center; box-shadow: 0 .6cqw 2cqw rgba(232, 87, 127, .45); animation: stBob 1s ease-in-out infinite; }
@keyframes stBob { 50% { transform: translateX(-50%) translateY(-1.6cqw); } }
.exploring .st-chara.in { pointer-events: auto; cursor: pointer; }
.exploring .st-chara.in:not(.done) .st-bang { display: grid; }
.exploring .st-chara.in:not(.done) img { filter: drop-shadow(0 0 1.4cqw rgba(255, 143, 177, .95)) drop-shadow(0 0 .5cqw #fff); }
.exploring .st-chara.in.done { filter: saturate(.7) brightness(1.06); }

/* ───── 一枚絵（CG） ───── */
.st-cg { position: absolute; inset: 0; z-index: 3; animation: stFade .6s ease; }
.st-cg-blur { position: absolute; inset: -10%; background: linear-gradient(160deg, #FFE3EC, #E3F4FF) center / cover; filter: blur(22px) saturate(1.2) brightness(1.08); }
.st-cg-frame { position: absolute; left: 3cqw; right: 3cqw; top: calc(max(2.4cqw, env(safe-area-inset-top)) + 18cqw + max(0px, (100cqh - 178cqw) * .4)); padding: 1.2cqw; background: #fff; border-radius: 3cqw; box-shadow: 0 0 0 .5cqw var(--gold), 0 2cqw 5cqw rgba(120, 80, 120, .25); animation: stCgIn .7s cubic-bezier(.3, 1.3, .5, 1); }
@keyframes stCgIn { from { opacity: 0; transform: translateY(4cqw) scale(.95); } }
.st-cg-img { position: relative; aspect-ratio: 3 / 2; border-radius: 2cqw; overflow: hidden; }
.st-cg-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-cg-img.fb .cgfb-bg, .st-gal-th .cgfb-bg, .st-viewer-img .cgfb-bg { position: absolute; inset: 0; background-size: 120% auto; background-repeat: no-repeat; }
.cgfb-cast { position: absolute; left: 0; right: 0; bottom: -6%; display: flex; justify-content: center; align-items: flex-end; }
.cgfb-cast img { width: 38%; margin: 0 -5%; filter: drop-shadow(0 1cqw 1cqw rgba(120, 80, 120, .25)); }
.cgfb-cast.n1 img { width: 56%; } .cgfb-cast.n2 img { width: 46%; }
.cgfb-name { position: absolute; left: 3%; top: 4%; margin: 0; font: 800 clamp(12px, 2.6cqw, 13px)/1 var(--body); color: var(--pink-d); background: rgba(255, 255, 255, .92); padding: .4em .8em; border-radius: 999px; }
.st-cg-img.fb .cgfb-bg.bg-meeting, .st-gal-th .cgfb-bg.bg-meeting { background: linear-gradient(180deg, #F5F1FF 0 55%, #FFFDF8 55%); }

.st-fxcv { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }

/* ───── 共通の画面・ボタン ───── */
.st-screen { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqw; padding: max(4cqw, env(safe-area-inset-top)) 6cqw max(4cqw, env(safe-area-inset-bottom)); text-align: center; }
.st-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; cursor: pointer; text-decoration: none; border-radius: 999px; padding: .85em 2.2em .9em; font: 900 clamp(14px, 4.4cqw, 22px)/1.2 var(--body); letter-spacing: .06em; word-break: keep-all; transition: transform .12s, filter .12s; }
.st-btn:active { transform: scale(.95); }
.st-btn:disabled { filter: grayscale(1) opacity(.45); cursor: default; }
.st-btn-main { color: #fff; border: 0; background: linear-gradient(180deg, #FFB0C8 0%, var(--pink) 45%, var(--pink-d) 100%); box-shadow: inset 0 0 0 .18em rgba(255, 255, 255, .55), 0 .3em 0 #C2416A, 0 .8em 1.6em rgba(232, 87, 127, .35); text-shadow: 0 .06em 0 rgba(194, 65, 106, .6); }
.st-btn-sub { color: var(--ink); background: #fff; border: 2.5px solid var(--gold); box-shadow: 0 .25em 0 var(--gold), 0 .5em 1.2em rgba(184, 137, 46, .18); }
.st-btn-s { font-size: clamp(12px, 3.6cqw, 17px); padding: .55em 1.4em .6em; }
.st-row { display: flex; gap: 3cqw; justify-content: center; flex-wrap: wrap; }
.st-link { color: var(--ink); font: 700 clamp(12px, 3.4cqw, 15px)/1 var(--body); min-height: 44px; display: inline-flex; align-items: center; }
.st-link-btn { background: none; border: 0; padding: .4em .8em; text-decoration: underline; cursor: pointer; }
.st-note { margin: 0; font-size: clamp(12px, 3cqw, 14px); color: var(--mute); line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; }
.st-head { margin: 0; font: 900 clamp(28px, 10cqw, 54px)/1.1 var(--body); }
.st-icon { cursor: pointer; flex: none; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--gold); background: rgba(255, 255, 255, .95); font: 800 18px/1 var(--body); color: var(--ink); box-shadow: 0 4px 14px rgba(120, 80, 120, .16); }
.ui-art .st-icon { border: 0; background: url(assets/ui_round.webp) center / contain no-repeat; box-shadow: none; }

/* ───── タイトル ───── */
.st-title { justify-content: flex-start; gap: 0; padding: 0; }
.st-tag { position: absolute; top: max(3cqw, env(safe-area-inset-top)); left: 3cqw; z-index: 3; font: 800 clamp(12px, 2.8cqw, 14px)/1 var(--disp); font-style: italic; letter-spacing: .18em; background: rgba(255, 255, 255, .92); color: var(--pink-d); padding: .65em 1.1em; border-radius: 999px; box-shadow: 0 0 0 2px var(--gold); }
.st-sound { position: absolute; top: max(3cqw, env(safe-area-inset-top)); right: 3cqw; z-index: 3; min-width: 44px; min-height: 44px; cursor: pointer; border: 2px solid var(--gold); background: rgba(255, 255, 255, .92); border-radius: 999px; padding: 0 1em; font: 800 clamp(12px, 3cqw, 15px)/1 var(--body); color: var(--ink); }
.st-sound.off { color: var(--mute); }
.st-logo-wrap { position: relative; z-index: 2; margin-top: max(13cqw, calc(env(safe-area-inset-top) + 10cqw)); width: 88cqw; display: grid; place-items: center; }
.st-logo { width: min(88cqw, 44cqh); height: auto; display: block; filter: drop-shadow(0 0 .35cqw #B8336A) drop-shadow(0 0 .35cqw #B8336A) drop-shadow(0 .5cqw 0 #8E2A55) drop-shadow(0 0 2.4cqw rgba(255, 255, 255, .95)) drop-shadow(0 1.4cqw 2cqw rgba(120, 80, 120, .3)); animation: stFloat 3.6s ease-in-out infinite; }
.st-logo-wrap::before { content: ""; position: absolute; inset: 6% -4% 2%; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255, 255, 255, .9) 30%, rgba(255, 255, 255, 0) 72%); }
@keyframes stFloat { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-1.6cqw) rotate(1deg); } }
.st-logo-text { margin: 1cqw 0 0; display: flex; flex-direction: column; align-items: center; line-height: .92; font-family: var(--disp); font-weight: 800; font-style: italic; animation: stFloat 3.6s ease-in-out infinite; }
.st-logo-text small { font-size: 11cqw; letter-spacing: .02em; --fx: linear-gradient(180deg, #E9F7FF 0%, #8FD3FF 50%, #3FA2F0 100%); transform: translateX(-10cqw); }
.st-logo-text b { font-size: 23cqw; letter-spacing: .01em; margin-top: -2cqw; }
.st-logo-text em { margin-top: 1.4cqw; font: 900 clamp(12px, 3.4cqw, 17px)/1 var(--body); font-style: normal; letter-spacing: .3em; color: var(--pink-d); background: rgba(255, 255, 255, .9); padding: .5em 1.2em; border-radius: 999px; box-shadow: 0 0 0 1.5px var(--gold); }
.st-title-scene { position: relative; flex: 1; min-height: 0; width: 100%; }
.st-title-cast { position: absolute; left: 0; right: 0; bottom: -12cqw; display: flex; justify-content: center; align-items: flex-end; padding: 0 1cqw; }
.st-tc { width: 30cqw; margin: 0 -3.6cqw; animation: stSway 3.6s ease-in-out infinite; animation-delay: var(--d); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.st-tc:nth-child(2), .st-tc:nth-child(3) { width: 33cqw; z-index: 1; }
.art2 .st-tc { width: min(27cqw, 12.4cqh); } .art2 .st-tc:nth-child(2), .art2 .st-tc:nth-child(3) { width: min(30cqw, 13.8cqh); }
.st-tc img { width: 100%; display: block; filter: drop-shadow(0 1.2cqw 1.4cqw rgba(120, 80, 120, .22)); }
.st-tc.talk { z-index: 2; }
.st-tc.talk img { animation: stHop .4s ease; transform: scale(1.06) translateY(-2cqw); transition: transform .3s; }
@keyframes stSway { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg) translateY(-.8cqw); } }
.st-title-bubble { position: absolute; left: 50%; bottom: min(26cqw, 8.5cqh); z-index: 3; transform: translateX(-50%); margin: 0; max-width: 80cqw; white-space: nowrap; font: 900 clamp(12px, 3.7cqw, 18px)/1.3 var(--body); color: var(--ink); background: #fff; border: 2.5px solid var(--c, var(--pink)); border-radius: 999px; padding: .6em 1.2em; box-shadow: 0 .6cqw 2cqw rgba(120, 80, 120, .18); opacity: 0; }
.art2 .st-title-bubble { bottom: clamp(-5cqw, calc((100cqh - 200cqw) * .3), 1.5cqw); }
.st-title-bubble.on { animation: stBubble 3.2s ease forwards; }
@keyframes stBubble { 0% { opacity: 0; transform: translateX(-50%) translateY(2cqw) scale(.85); } 10%, 85% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } 100% { opacity: 0; transform: translateX(-50%) translateY(-1cqw); } }
.st-title-foot { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2.2cqw; padding: 4.6cqw 5cqw max(4cqw, env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); border-radius: 7cqw 7cqw 0 0; box-shadow: 0 -1.4cqw 4cqw rgba(120, 80, 120, .14); }
.st-title-foot::before { content: ""; position: absolute; left: 6cqw; right: 6cqw; top: 1.6cqw; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), var(--pink), var(--gold), transparent); }
.st-catch { margin: .6cqw 0 0; font: 900 clamp(15px, 5cqw, 26px)/1.4 var(--body); letter-spacing: .04em; word-break: keep-all; }
.st-title-stats { display: flex; gap: 2cqw; justify-content: center; flex-wrap: wrap; }
.st-title-stats span { display: inline-flex; align-items: center; gap: .3em; font: 700 clamp(12px, 3.1cqw, 15px)/1 var(--body); color: var(--mute); background: var(--pink-l); border-radius: 999px; padding: .4em .9em; }
.st-title-stats b { color: var(--ink); font: 800 1.1em/1 var(--disp); }
.st-title-stats .ic { font: 800 max(12px, .8em)/1 var(--disp); font-style: normal; color: #fff; background: var(--pink-d); border-radius: .4em; padding: .2em .35em; }
.st-star { width: 1.2em; height: 1.2em; display: inline-grid; place-items: center; font-style: normal; color: var(--gold); flex: none; }
.st-title .st-btn-main { font-size: clamp(18px, 6cqw, 30px); padding: .65em 3.2em .7em; animation: stPulse 1.8s ease-in-out infinite; }
@keyframes stPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.st-title-menu { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6cqw; width: 100%; }
.st-title-menu button { cursor: pointer; min-height: 56px; border: 2px solid var(--pink-l); background: #fff; border-radius: 3cqw; padding: 1cqw .4cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4em; font: 700 clamp(12px, 2.8cqw, 14px)/1.1 var(--body); color: var(--ink); white-space: nowrap; }
.st-title-menu i { font: 800 1.1em/1 var(--disp); font-style: normal; color: #fff; background: linear-gradient(180deg, var(--sky), #3FA2F0); width: 2em; height: 2em; border-radius: 50%; display: grid; place-items: center; }
.st-title-menu button:active { transform: scale(.95); }

/* ───── サブ画面（チャプター・ギャラリー・図鑑・設定・セーブ） ───── */
.st-howto, .st-subscreen, .st-result { background: rgba(255, 249, 251, .95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); overflow-y: auto; touch-action: pan-y; }
.st-howto { justify-content: safe center; gap: 2.4cqw; }
.st-howto > *, .st-subscreen > *, .st-result > * { flex: none; }
.st-subscreen { justify-content: flex-start; gap: 2.6cqw; padding-left: 4cqw; padding-right: 4cqw; }
.st-topbar { width: 100%; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 2cqw; min-height: 44px; }
.st-back { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--gold); background: #fff; cursor: pointer; font: 900 24px/1 var(--body); color: var(--ink); }
.st-screen-title { margin: 0; font: 900 clamp(17px, 5.4cqw, 28px)/1.2 var(--body); text-align: left; }
.st-pill { font: 800 clamp(12px, 3.2cqw, 15px)/1 var(--body); background: var(--pink-l); color: var(--pink-d); padding: .5em 1em; border-radius: 999px; white-space: nowrap; }
.st-lead { margin: 0; font: 700 clamp(12px, 3.5cqw, 16px)/1.6 var(--body); color: var(--mute); text-align: left; width: 100%; }
.st-stat { margin: 0; font: 700 clamp(12px, 3.2cqw, 15px)/1.5 var(--body); color: var(--mute); }
.st-steps { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 1.8cqw; }
.st-steps li { display: flex; align-items: center; gap: 3cqw; text-align: left; background: #fff; border: 2px solid var(--pink-l); border-radius: 16px; padding: 2.2cqw 3cqw; font: 700 clamp(12px, 3.6cqw, 17px)/1.55 var(--body); box-shadow: 0 .6cqw 2cqw rgba(120, 80, 120, .08); }
.st-steps li b { flex: none; width: 2em; height: 2em; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, #FFB0C8, var(--pink-d)); color: #fff; font: 800 1em/1 var(--disp); }
.st-steps li:nth-child(2) b { background: linear-gradient(180deg, #9BD8FF, #3FA2F0); }
.st-steps li:nth-child(3) b { background: linear-gradient(180deg, #F6DD9B, var(--gold-d)); }
.st-steps li:nth-child(4) b { background: linear-gradient(180deg, #C7B2FF, #8B5CF6); }
.st-steps em { font-style: normal; color: var(--pink-d); }
.st-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4cqw 3cqw; font: 700 clamp(12px, 3.1cqw, 15px)/1.3 var(--body); color: var(--mute); }
.st-keys span { display: inline-flex; align-items: center; gap: .4em; }
.st-keys i { font: 800 max(12px, .82em)/1 var(--disp); font-style: normal; color: var(--ink); background: #fff; border: 2px solid var(--gold); border-radius: 999px; padding: .35em .7em; }
.st-howto-lead { margin: .6cqw 0 0; font: 900 clamp(13px, 3.8cqw, 18px)/1.3 var(--body); }
.st-howto-cast { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2cqw; }
.st-hc { display: flex; align-items: center; gap: 2cqw; text-align: left; background: #fff; border-radius: 999px; padding: 1cqw 2.4cqw 1cqw 1cqw; border: 2.5px solid var(--c); }
.st-hc img { width: 13cqw; height: 13cqw; border-radius: 50%; object-fit: cover; object-position: center 12%; background: var(--cream); flex: none; }
.st-hc p { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: .2em; }
.st-hc b { font: 900 clamp(14px, 4.2cqw, 20px)/1.1 var(--body); }
.st-hc small { font: 700 clamp(12px, 2.6cqw, 13px)/1.2 var(--body); color: var(--mute); white-space: nowrap; }
@container (max-width: 430px) {
    .st-howto-cast { grid-template-columns: minmax(0, 1fr); gap: 1.6cqw; }
    .st-hc img { width: 11cqw; height: 11cqw; }
    .st-hc p { flex-direction: row; align-items: baseline; gap: .8em; }
}

.st-ch-list { width: 100%; display: flex; flex-direction: column; gap: 2cqw; }
.st-chl { width: 100%; display: grid; grid-template-columns: 14cqw 1fr auto; align-items: center; gap: 2.4cqw; text-align: left; cursor: pointer; background: #fff; border: 2.5px solid var(--gold); border-radius: 18px; padding: 2.2cqw 3cqw; box-shadow: 0 .25em 0 var(--gold); min-height: 64px; }
.st-chl.locked { border-color: #E2DDE8; box-shadow: none; background: #F7F4F9; cursor: default; }
.st-chl-ico { width: 14cqw; height: 14cqw; display: grid; place-items: center; }
.st-chl-txt { min-width: 0; display: flex; flex-direction: column; gap: .3em; }
.st-chl-txt small { font: 800 clamp(12px, 2.6cqw, 12px)/1 var(--disp); font-style: italic; letter-spacing: .12em; color: var(--pink-d); }
.st-chl-txt b { font: 900 clamp(14px, 4.2cqw, 20px)/1.25 var(--body); }
.st-chl-txt em { font: 600 clamp(12px, 2.8cqw, 13px)/1.45 var(--body); font-style: normal; color: var(--mute); }
.st-chl-stars { display: flex; gap: .1em; font-size: clamp(14px, 4.4cqw, 22px); color: #E2DDE8; }
.st-chl-stars .on { color: var(--gold); text-shadow: 0 0 .3em rgba(232, 194, 106, .6); }
.st-chl-stars i { font-style: normal; }
.st-lock { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: #EDE7F2; color: #B9B0C6; font: 900 6cqw/1 var(--disp); font-style: normal; }
.st-ico { width: 100%; height: 100%; object-fit: contain; display: block; }
.st-ico-fb { border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff, color-mix(in srgb, var(--c) 30%, #fff) 60%, var(--c)); color: #fff; font: 900 6cqw/1 var(--body); font-style: normal; text-shadow: 0 .1em .2em rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 .5cqw rgba(255, 255, 255, .7), 0 .5cqw 1.4cqw rgba(120, 80, 120, .2); }
.st-ico-fb.big { font-size: 8cqw; }

.st-tabs { display: flex; gap: 2cqw; width: 100%; }
.st-tabs button { flex: 1; min-height: 44px; cursor: pointer; border: 2px solid var(--pink-l); background: #fff; border-radius: 999px; font: 800 clamp(13px, 3.8cqw, 18px)/1 var(--body); color: var(--mute); }
.st-tabs button.on { background: linear-gradient(180deg, #FFB0C8, var(--pink-d)); color: #fff; border-color: transparent; }
.st-gal-body { width: 100%; }
.st-gal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; }
.st-gal-item { cursor: pointer; border: 0; background: #fff; border-radius: 14px; padding: 1cqw; box-shadow: 0 0 0 2px var(--gold); text-align: left; }
.st-gal-item.locked { box-shadow: 0 0 0 2px #E2DDE8; cursor: default; }
.st-gal-th { position: relative; aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden; background: #F3EEF6; display: grid; place-items: center; }
.st-gal-th img { width: 100%; height: 100%; object-fit: cover; }
.st-gal-th .cgfb-cast img { object-fit: contain; height: auto; }
.st-gal-th .cgfb-name { display: none; }
.st-gal-th .st-lock { width: 12cqw; height: 12cqw; }
.st-gal-item p { margin: 1cqw .6cqw .4cqw; font: 700 clamp(12px, 2.9cqw, 14px)/1.4 var(--body); color: var(--ink); }
.st-gal-item.locked p { color: var(--mute); }
.st-end-list { display: flex; flex-direction: column; gap: 2cqw; }
.st-end-row { display: flex; align-items: center; gap: 3cqw; text-align: left; background: #fff; border-radius: 16px; padding: 2cqw 3cqw; border: 2.5px solid var(--c); }
.st-end-row.locked { border-color: #E2DDE8; background: #F7F4F9; }
.st-end-row img { width: 15cqw; height: 15cqw; object-fit: cover; object-position: center 12%; border-radius: 50%; background: var(--cream); flex: none; }
.st-end-row.locked img { filter: grayscale(1) brightness(1.2) opacity(.5); }
.st-end-row p { margin: 0; display: flex; flex-direction: column; gap: .3em; min-width: 0; }
.st-end-row small { font: 800 clamp(12px, 2.6cqw, 12px)/1 var(--disp); font-style: italic; letter-spacing: .12em; color: var(--pink-d); }
.st-end-row b { font: 900 clamp(14px, 4.2cqw, 20px)/1.3 var(--body); }
.st-end-row span { font: 600 clamp(12px, 2.9cqw, 14px)/1.45 var(--body); color: var(--mute); }

.st-zk-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6cqw; width: 100%; }
.st-zk-tab { cursor: pointer; min-height: 56px; border: 2.5px solid #EEE7F2; background: #fff; border-radius: 16px; padding: 1cqw; display: flex; flex-direction: column; align-items: center; gap: .3em; font: 800 clamp(12px, 3.2cqw, 15px)/1 var(--body); color: var(--mute); }
.st-zk-tab img { width: 11cqw; height: 11cqw; border-radius: 50%; object-fit: cover; object-position: center 12%; background: var(--cream); }
.st-zk-tab.on { border-color: var(--c); color: var(--ink); box-shadow: 0 .25em 0 var(--c); }
.st-zk-body { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 2cqw; }
.st-zk-head { display: flex; align-items: center; gap: 3cqw; background: #fff; border-radius: 18px; padding: 2.4cqw 3cqw; border: 2.5px solid var(--c); }
.st-zk-head .st-ico { width: 16cqw; height: 16cqw; flex: none; }
.st-zk-head small { display: block; font: 700 clamp(12px, 3cqw, 14px)/1.2 var(--body); color: var(--mute); }
.st-zk-head b { font: 900 clamp(17px, 5.4cqw, 26px)/1.25 var(--body); }
.st-zk-page { background: #fff; border-radius: 16px; padding: 2.6cqw 3.4cqw; border-left: 1.4cqw solid var(--c); box-shadow: 0 .6cqw 2cqw rgba(120, 80, 120, .07); }
.st-zk-page.locked { border-left-color: #E2DDE8; background: #F7F4F9; }
.st-zk-page h3 { margin: 0 0 .5em; font: 900 clamp(13px, 3.9cqw, 18px)/1.3 var(--body); }
.st-zk-page p { margin: 0; font: 500 clamp(12px, 3.6cqw, 16.5px)/1.75 var(--body); }
.st-zk-page.locked p, .st-zk-page.locked h3 { color: var(--mute); }

.st-set { width: 100%; display: flex; flex-direction: column; gap: 1.6cqw; text-align: left; background: #fff; border-radius: 18px; padding: 3cqw 4cqw; box-shadow: 0 0 0 2px var(--pink-l); }
.st-set > p { margin: 1.4cqw 0 0; font: 800 clamp(13px, 3.8cqw, 18px)/1.3 var(--body); }
.st-seg { display: flex; gap: 1.6cqw; }
.st-seg button { flex: 1; min-height: 44px; cursor: pointer; border: 2px solid var(--pink-l); background: #fff; border-radius: 999px; font: 800 clamp(12px, 3.6cqw, 17px)/1 var(--body); color: var(--mute); }
.st-seg button.on { background: linear-gradient(180deg, #9BD8FF, #3FA2F0); color: #fff; border-color: transparent; }

.st-sl-list { width: 100%; display: flex; flex-direction: column; gap: 2.4cqw; }
.st-slot { width: 100%; cursor: pointer; text-align: left; display: grid; grid-template-columns: 1fr auto; gap: .4em 1em; background: #fff; border: 2.5px solid var(--gold); border-radius: 18px; padding: 2.6cqw 3.4cqw; box-shadow: 0 .25em 0 var(--gold); min-height: 72px; }
.st-slot:disabled { border-color: #E2DDE8; box-shadow: none; background: #F7F4F9; cursor: default; }
.st-slot small { grid-column: 1 / -1; font: 800 clamp(12px, 2.9cqw, 13px)/1.2 var(--body); color: var(--pink-d); }
.st-slot b { font: 900 clamp(13px, 3.9cqw, 18px)/1.3 var(--body); }
.st-slot em { font: 700 clamp(12px, 2.9cqw, 13px)/1.3 var(--disp); font-style: normal; color: var(--mute); align-self: start; }
.st-slot span { grid-column: 1 / -1; font: 500 clamp(12px, 3.2cqw, 14px)/1.5 var(--body); color: var(--mute); }

/* ───── プレイ ───── */
.st-play { position: absolute; inset: 0; z-index: 5; cursor: pointer; }
.exploring .st-play { pointer-events: none; }
.exploring .st-play > :not(.st-hud):not(.st-explore) { pointer-events: auto; }
.st-hud { position: absolute; left: 0; right: 0; top: 0; z-index: 6; display: flex; align-items: center; gap: 1.6cqw; padding: max(2.4cqw, env(safe-area-inset-top)) 2.6cqw 0; pointer-events: none; }
.st-hud > * { pointer-events: auto; }
.st-place { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: .5em; row-gap: .2em; align-items: baseline; min-width: 0; background: rgba(255, 255, 255, .94); border-radius: 14px; padding: .5em 1em .55em .8em; box-shadow: 0 0 0 2px var(--gold), 0 4px 14px rgba(120, 80, 120, .14); font-size: clamp(12px, 2.8cqw, 14px); }
.st-place small { font: 800 max(12px, .82em)/1 var(--disp); font-style: italic; color: #fff; background: var(--pink-d); border-radius: .4em; padding: .25em .45em; }
.st-place b { font: 800 1.45em/1 var(--disp); color: var(--pink-d); font-variant-numeric: lining-nums tabular-nums; }
.st-place span { grid-column: 1 / -1; font: 900 1em/1.1 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30cqw; }
.st-grow { flex: 1; }
.st-meters { display: flex; gap: .9cqw; flex: none; }
.st-meter { position: relative; width: 8.6cqw; height: 8.6cqw; flex: none; }
.st-meter i { position: absolute; inset: 0; border-radius: 50%; padding: .55cqw; background: conic-gradient(var(--c) calc(var(--p, 0) * 1%), rgba(255, 255, 255, .95) 0); box-shadow: 0 0 0 2px #fff, 0 3px 8px rgba(120, 80, 120, .2); }
.st-meter img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center 12%; display: block; background: #fff; }
.art2 .st-meter img { object-position: center 6%; transform: scale(1.5); transform-origin: center 20%; }
.st-meter i { overflow: hidden; }
.st-meter > b { position: absolute; right: -1cqw; bottom: -1cqw; min-width: 1.6em; padding: .2em .3em; font: 800 clamp(12px, 2.4cqw, 12px)/1 var(--disp); text-align: center; color: #fff; background: var(--c); border-radius: 999px; border: 2px solid #fff; }
.st-meter:nth-child(4) > b { color: var(--ink); }
.st-meter.bump i { animation: stBump .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes stBump { 40% { transform: scale(1.3); } }
.st-pop { position: absolute; left: 50%; top: 100%; z-index: 3; font: 800 clamp(13px, 4cqw, 20px)/1 var(--disp); color: var(--c); -webkit-text-stroke: .18em #fff; paint-order: stroke fill; animation: stPopUp 1.1s ease-out forwards; pointer-events: none; }
@keyframes stPopUp { 0% { opacity: 0; transform: translate(-50%, 2cqw) scale(.6); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.2); } 100% { opacity: 0; transform: translate(-50%, 6cqw) scale(1); } }

/* テキストの窓 */
.st-box { position: absolute; z-index: 7; left: 3cqw; right: 3cqw; bottom: var(--box-b); height: var(--box-h); background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(255, 246, 250, .97)); border-radius: 20px; box-shadow: 0 0 0 2px var(--gold), 0 0 0 5px rgba(255, 255, 255, .9), 0 0 0 6.5px rgba(232, 194, 106, .55), 0 1.4em 2.4em rgba(120, 80, 120, .2); padding: 7cqw 5cqw 11cqw; }
.st-box::before { content: "✿"; position: absolute; right: 3.4cqw; top: 2cqw; font-size: 4.4cqw; color: var(--pink); opacity: .55; }
.ui-art .st-box { background: none; box-shadow: none; border: 26px solid transparent; border-image: url(assets/ui_window.webp) 70 fill / 26px stretch; padding: 3.4cqw 2.8cqw 8cqw; filter: drop-shadow(0 1.4cqw 2cqw rgba(120, 80, 120, .2)); }
.ui-art .st-box.st-box-n { padding-top: 2.4cqw; }
.ui-art .st-box::before { display: none; }
.st-box.shake { animation: stShake .38s ease; }
.st-box.st-box-n { padding-top: 5.6cqw; }
.st-name { position: absolute; left: 4cqw; top: 0; transform: translateY(-55%); margin: 0; display: flex; align-items: baseline; gap: .6em; background: linear-gradient(180deg, color-mix(in srgb, var(--c, var(--pink)) 70%, #fff), var(--c, var(--pink))); color: #fff; border-radius: 999px; padding: .45em 1.2em .5em; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--gold), 0 .3em .8em rgba(120, 80, 120, .2); }
.st-name b { font: 900 clamp(14px, 4.4cqw, 22px)/1 var(--body); letter-spacing: .06em; text-shadow: 0 .06em .1em rgba(0, 0, 0, .18); }
.st-name small { font: 700 clamp(12px, 2.8cqw, 14px)/1 var(--body); opacity: .95; }
.st-name.dark { color: var(--ink); }
.st-name.dark b { text-shadow: none; }
.st-text { margin: 0; height: 100%; overflow: hidden; font: 700 clamp(14px, 4.3cqw, 22px)/1.8 var(--body); white-space: pre-wrap; line-break: strict; overflow-wrap: anywhere; text-align: left; color: var(--ink); }
.st-text.read { color: #6B7BA6; }
.st-box-n .st-text { color: #55536F; }
.st-next { position: absolute; right: 5cqw; bottom: 11cqw; font: 800 clamp(12px, 3.6cqw, 18px)/1 var(--body); font-style: normal; color: var(--pink-d); animation: stNext .8s ease-in-out infinite; }
@keyframes stNext { 50% { transform: translateY(1cqw); } }
.st-ctrls { position: absolute; right: 3cqw; bottom: 2.4cqw; display: flex; gap: 1.6cqw; }
.st-ctrl { position: relative; cursor: pointer; font: 800 clamp(12px, 2.8cqw, 13px)/1 var(--disp); letter-spacing: .1em; background: #fff; color: var(--ink); border: 2px solid var(--gold); border-radius: 999px; padding: .55em .9em; min-height: 30px; }
.st-ctrl::after { content: ""; position: absolute; inset: -8px -4px; }
.st-ctrl.on { background: linear-gradient(180deg, #FFB0C8, var(--pink-d)); color: #fff; border-color: transparent; }

/* 探索 */
.st-explore { position: absolute; z-index: 8; left: 0; right: 0; bottom: calc(var(--box-h) + var(--box-b) + 3cqw); display: flex; justify-content: center; pointer-events: none; }
.st-explore .st-btn { pointer-events: auto; }

/* 選択肢 */
.st-choice { position: absolute; z-index: 8; left: 0; right: 0; top: calc(max(2.4cqw, env(safe-area-inset-top)) + 16cqw); bottom: calc(var(--box-h) + var(--box-b) + 4cqw); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.2cqw; padding: 0 4cqw; cursor: default; }
.st-choice::before { content: ""; position: absolute; left: 0; right: 0; top: -3cqw; bottom: -2cqw; z-index: -1; background: radial-gradient(ellipse 80% 60% at 50% 45%, rgba(255, 249, 251, .86), rgba(255, 249, 251, .55)); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: stFade .3s ease; }
@keyframes stFade { from { opacity: 0; } }
.st-choice-head { margin: 0; font: 800 clamp(18px, 6cqw, 30px)/1 var(--disp); font-style: italic; letter-spacing: .04em; }
.st-choice-head .st-fx { --fx: linear-gradient(180deg, #E9F7FF 0%, #8FD3FF 50%, #3FA2F0 100%); }
.st-choice.timed .st-choice-head .st-fx { --fx: linear-gradient(180deg, #FFF3C9 0%, #FFC46B 50%, #E8577F 100%); }
.st-timer { width: 86%; display: flex; align-items: center; gap: 2cqw; }
.st-timer i { flex: 1; height: 2.2cqw; min-height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 2px var(--gold); overflow: hidden; }
.st-timer em { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sky), var(--pink)); transition: width .05s linear; }
.st-timer b { font: 800 clamp(16px, 5cqw, 26px)/1 var(--disp); color: var(--pink-d); min-width: 1.4em; text-align: center; }
.st-choice.hurry .st-timer em { background: linear-gradient(90deg, #FFB703, var(--pink-d)); }
.st-choice.hurry .st-timer b { animation: stPulse .5s ease-in-out infinite; }
.st-opts { width: 100%; display: flex; flex-direction: column; gap: 2cqw; }
.st-opt { display: flex; align-items: center; gap: 3cqw; text-align: left; width: 100%; min-height: 52px; cursor: pointer; background: #fff; border: 2.5px solid var(--sky); border-radius: 18px; padding: 2.2cqw 3.4cqw 2.2cqw 2.4cqw; box-shadow: 0 .28em 0 #9CCFF2, 0 .6em 1.2em rgba(91, 192, 255, .18); font: 700 clamp(13px, 3.9cqw, 19px)/1.5 var(--body); color: var(--ink); animation: stIn .4s cubic-bezier(.34, 1.56, .64, 1) backwards; transition: transform .12s, opacity .3s, background .2s; }
/* 選択肢は2行になると画像の端飾りが縦に伸びるため、CSS の枠のまま使う */

.st-opt i { flex: none; width: 2em; height: 2em; border-radius: 50%; display: grid; place-items: center; font: 800 .95em/1 var(--disp); font-style: normal; color: #fff; background: linear-gradient(180deg, #9BD8FF, #3FA2F0); box-shadow: inset 0 -.15em 0 rgba(0, 0, 0, .12); }
.st-opt span { min-width: 0; overflow-wrap: anywhere; }
.st-opt:active { transform: scale(.97); }
@media (hover: hover) { .st-opt:hover { background: #F2FAFF; transform: translateY(-2px); } }
.st-opt.secret { border-color: var(--gold); background: linear-gradient(135deg, #FFFBEA, #FFEFF5); box-shadow: 0 .28em 0 var(--gold), 0 0 1.6em rgba(232, 194, 106, .6); }
.st-opt.secret i { background: linear-gradient(180deg, #F6DD9B, var(--gold-d)); }
.st-opt.picked { background: linear-gradient(180deg, #FFF0F5, #FFD9E6); border-color: var(--pink); transform: scale(1.03); }
.st-opt.picked i { background: linear-gradient(180deg, #FFB0C8, var(--pink-d)); }
.st-opt.gone { opacity: 0; transform: scale(.96); }
.st-opt.gone.right { opacity: 1; border-color: #5CC98A; background: #F0FFF5; }
.pz .st-opt i { background: linear-gradient(180deg, #F6DD9B, var(--gold-d)); }
@keyframes stIn { from { opacity: 0; transform: translateY(3cqw) scale(.96); } }

/* プレゼンのゲージ */
.st-present { position: absolute; z-index: 7; left: 3cqw; right: 3cqw; top: calc(max(2.4cqw, env(safe-area-inset-top)) + 16cqw); display: flex; flex-direction: column; gap: 1.2cqw; pointer-events: none; animation: stIn .4s ease; }
.st-pz-gauge { display: flex; align-items: center; gap: 2cqw; background: rgba(255, 255, 255, .95); border-radius: 999px; padding: 1.4cqw 3cqw; box-shadow: 0 0 0 2px var(--gold), 0 4px 14px rgba(120, 80, 120, .14); }
.st-pz-label { font: 900 clamp(12px, 3.6cqw, 17px)/1 var(--body); color: var(--pink-d); white-space: nowrap; }
.st-pz-label::before { content: "♥"; margin-right: .2em; }
.st-pz-gauge i { flex: 1; height: 3cqw; min-height: 10px; border-radius: 999px; background: #FBEFF4; overflow: hidden; box-shadow: inset 0 1px 3px rgba(120, 80, 120, .15); }
.st-pz-gauge em { display: block; height: 100%; width: 10%; border-radius: inherit; background: linear-gradient(90deg, #FFB0C8, var(--pink-d), var(--gold)); transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.st-pz-gauge b { font: 800 clamp(14px, 4.4cqw, 22px)/1 var(--disp); color: var(--ink); min-width: 3em; text-align: right; }
.st-present.hi .st-pz-gauge { box-shadow: 0 0 0 2px var(--gold), 0 0 2em rgba(232, 194, 106, .7); }
.st-pz-row { display: flex; justify-content: space-between; align-items: center; padding: 0 2cqw; }
.st-pz-row small { font: 800 clamp(12px, 3.2cqw, 15px)/1 var(--body); font-style: normal; color: var(--ink); background: rgba(255, 255, 255, .9); padding: .4em .9em; border-radius: 999px; }
.st-pz-combo { font: 800 clamp(16px, 5.4cqw, 28px)/1 var(--disp); font-style: italic; color: var(--pink-d); -webkit-text-stroke: .16em #fff; paint-order: stroke fill; }
.st-pz-combo.pop { animation: stComboPop .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes stComboPop { from { transform: scale(1.8); } }
.st-present ~ .st-choice { top: calc(max(2.4cqw, env(safe-area-inset-top)) + 34cqw); }

/* 判定の文字 */
.st-judge { position: absolute; z-index: 9; left: 0; right: 0; top: 36%; display: flex; flex-direction: column; align-items: center; gap: 1cqw; pointer-events: none; opacity: 0; }
.st-judge.go { animation: stJudge 1.1s ease forwards; }
@keyframes stJudge { 0% { opacity: 0; transform: scale(1.8); } 14% { opacity: 1; transform: scale(1); } 75% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.94) translateY(-4cqw); } }
.st-judge img { width: 76cqw; height: auto; }
.st-judge b { font: 800 clamp(40px, 15cqw, 84px)/1 var(--disp); font-style: italic; }
.st-judge.great b { --fx: linear-gradient(180deg, #E9F7FF 0%, #8FD3FF 50%, #3FA2F0 100%); }
.st-judge.good b { font-size: clamp(30px, 11cqw, 60px); --fx: linear-gradient(180deg, #F0FFF5, #7CD6A0 60%, #3AA56A); }
.st-judge.miss b { font-size: clamp(30px, 11cqw, 60px); --fx: linear-gradient(180deg, #F4F2F8, #B7B3C8 60%, #8C88A3); }
.st-judge-add { font: 900 clamp(14px, 4.6cqw, 22px)/1 var(--body); color: var(--pink-d); background: #fff; padding: .4em 1em; border-radius: 999px; box-shadow: 0 0 0 2px var(--gold); }

/* 場面の札 */
.st-card { position: absolute; z-index: 9; left: 0; right: 0; top: 24%; display: flex; flex-direction: column; align-items: center; gap: 1.6cqw; pointer-events: none; animation: stCardIn .55s cubic-bezier(.34, 1.56, .64, 1); }
.st-card.out { animation: stCardOut .22s ease forwards; }
@keyframes stCardIn { from { opacity: 0; transform: scale(1.4); } }
@keyframes stCardOut { to { opacity: 0; transform: scale(.92) translateY(-3cqw); } }
.st-card small { font: 800 clamp(12px, 3.6cqw, 18px)/1 var(--disp); font-style: italic; letter-spacing: .3em; color: #fff; background: linear-gradient(90deg, var(--pink), var(--pink-d)); padding: .5em 1.4em; border-radius: 999px; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--gold); }
.st-card b { font: 800 clamp(56px, 22cqw, 120px)/1 var(--disp); font-style: italic; font-variant-numeric: lining-nums; }
.st-card > span { font: 900 clamp(16px, 5.6cqw, 30px)/1.2 var(--body); letter-spacing: .08em; color: var(--ink); background: #fff; border-radius: 14px; padding: .5em 1.4em; box-shadow: 0 0 0 2px var(--gold), 0 .5em 1.4em rgba(120, 80, 120, .18); }
.ui-art .st-card > span { background: url(assets/ui_ribbon.webp) center / 100% 100% no-repeat; box-shadow: none; border-radius: 0; padding: .5em 2.4em .95em; color: #fff; text-shadow: 0 .06em .14em rgba(30, 90, 160, .55); transform: none; }
.st-card::before { content: ""; position: absolute; left: -10%; right: -10%; top: -22cqw; bottom: -26cqw; z-index: -1; background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0) 70%); }

/* 章のはじまり・章クリア・エンディング */
.st-chcard, .st-chclear, .st-endcard { position: absolute; inset: 0; z-index: 12; display: flex; align-items: center; justify-content: center; padding: 6cqw; background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .92), rgba(255, 233, 242, .9) 70%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: stFade .4s ease; cursor: pointer; }
.st-chcard.out, .st-chclear.out { animation: stFadeOut .3s ease forwards; }
@keyframes stFadeOut { to { opacity: 0; } }
.st-chcard-in, .st-chclear-in { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2.4cqw; text-align: center; }
.st-ch-icon { width: 22cqw; height: 22cqw; animation: stIn .6s cubic-bezier(.34, 1.56, .64, 1); }
.st-ch-no { margin: 0; font: 800 clamp(30px, 11cqw, 60px)/1 var(--disp); font-style: italic; }
.st-ch-name { margin: 0; }
.st-ch-name span { display: inline-block; font: 900 clamp(18px, 6.4cqw, 34px)/1.3 var(--body); color: #fff; background: linear-gradient(180deg, #9BD8FF, #3FA2F0); padding: .4em 1.4em; border-radius: 1em; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--gold), 0 .5em 1.4em rgba(63, 162, 240, .3); text-shadow: 0 .06em .12em rgba(0, 0, 0, .2); }
.ui-art .st-ch-name span { background: url(assets/ui_ribbon.webp) center / 100% 100% no-repeat; box-shadow: none; border-radius: 0; padding: .5em 2.4em .95em; text-shadow: 0 .06em .14em rgba(30, 90, 160, .55); }
.st-ch-sub { margin: 0; font: 800 clamp(12px, 3.6cqw, 17px)/1 var(--body); color: var(--pink-d); }
.st-ch-mlead { margin: 2cqw 0 0; font: 800 clamp(12px, 3.5cqw, 16px)/1 var(--body); color: var(--mute); }
.st-missions { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 1.4cqw; }
.st-missions li { display: flex; align-items: center; gap: 2cqw; background: #fff; border-radius: 999px; padding: .5em 1em .5em .7em; text-align: left; font: 700 clamp(12px, 3.6cqw, 16px)/1.35 var(--body); box-shadow: 0 0 0 2px var(--pink-l); }
.st-missions li .st-star { width: 7cqw; height: 7cqw; font-size: 6cqw; filter: grayscale(1) opacity(.3); }
.st-missions li.got .st-star, .st-missions li.done.pop .st-star { filter: none; }
.st-missions li.done.pop .st-star { animation: stStar .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes stStar { from { transform: scale(2.4) rotate(-60deg); } }
.st-missions li span { flex: 1; }
.st-missions li b { font: 800 max(12px, .78em)/1 var(--disp); color: #fff; background: var(--pink-d); border-radius: 999px; padding: .4em .7em; }
.st-tapnext { margin: 2cqw 0 0; font: 800 clamp(12px, 3.5cqw, 16px)/1 var(--body); color: var(--pink-d); animation: stNext 1s ease-in-out infinite; }
.st-chclear { cursor: default; }
.st-clr-word { min-height: 20cqw; display: grid; place-items: center; animation: stCardIn .6s cubic-bezier(.34, 1.56, .64, 1); }
.st-clr-word img { width: 86cqw; height: auto; }
.st-clr-word b { font: 800 clamp(26px, 9.4cqw, 52px)/1 var(--disp); font-style: italic; }
.st-clr-name { margin: 0; font: 900 clamp(14px, 4.4cqw, 22px)/1.4 var(--body); }
.st-clr-best { margin: 0; font: 800 clamp(12px, 3.5cqw, 16px)/1.5 var(--body); color: var(--pink-d); background: #fff; border-radius: 12px; padding: .5em 1em; }
.st-clr-total { margin: 0; font: 800 clamp(14px, 4.4cqw, 22px)/1 var(--disp); color: var(--gold-d); }
.st-chclear .st-btn-main { min-width: 70cqw; margin-top: 1cqw; }
.st-endcard { flex-direction: column; gap: 2.4cqw; text-align: center; background: radial-gradient(circle at 50% 35%, #fff, color-mix(in srgb, var(--c, #FF8FB1) 22%, #FFF4F8) 75%); }
.st-end-word { animation: stCardIn .8s cubic-bezier(.34, 1.56, .64, 1); }
.st-end-word img { width: 80cqw; height: auto; }
.st-end-word b { font: 800 clamp(44px, 17cqw, 92px)/1 var(--disp); font-style: italic; letter-spacing: .06em; }
.st-end-no { margin: 2cqw 0 0; font: 800 clamp(12px, 3.6cqw, 17px)/1 var(--disp); letter-spacing: .2em; color: var(--mute); }
.st-end-title { margin: 0; font: 900 clamp(19px, 6.4cqw, 34px)/1.4 var(--body); color: var(--ink); word-break: keep-all; overflow-wrap: anywhere; }
.st-end-job { margin: 0; font: 800 clamp(13px, 3.9cqw, 18px)/1 var(--body); color: #fff; background: var(--c); padding: .6em 1.4em; border-radius: 999px; }

/* はじめての人への案内 */
.st-tip { position: absolute; z-index: 11; left: 6cqw; right: 6cqw; top: 40%; background: #fff; border-radius: 18px; padding: 3.4cqw 4cqw 2.6cqw; text-align: left; box-shadow: 0 0 0 2.5px var(--pink), 0 0 0 6px rgba(255, 255, 255, .8), 0 1.4em 3em rgba(120, 80, 120, .28); animation: stIn .4s cubic-bezier(.34, 1.56, .64, 1); }
.st-tip::before { content: "TIPS"; position: absolute; left: 4cqw; top: 0; transform: translateY(-55%); font: 800 clamp(12px, 3cqw, 14px)/1 var(--disp); font-style: italic; letter-spacing: .14em; color: #fff; background: var(--pink-d); padding: .45em 1em; border-radius: 999px; }
.st-tip::after { content: ""; position: absolute; left: 50%; width: 4cqw; height: 4cqw; background: #fff; transform: translateX(-50%) rotate(45deg); box-shadow: 2.5px 2.5px 0 var(--pink); bottom: -2cqw; }
.st-tip[data-target="meters"] { top: calc(max(2.4cqw, env(safe-area-inset-top)) + 16cqw); }
.st-tip[data-target="meters"]::after { bottom: auto; top: -2cqw; left: 72%; box-shadow: -2.5px -2.5px 0 var(--pink); }
.st-tip[data-target="cast"] { top: 18%; }
.st-tip[data-target="choice"] { top: 30%; }
.st-tip[data-target="choice"]::after, .st-tip[data-target="cast"]::after { display: none; }
.st-tip[data-target="box"], .st-tip[data-target="ctrls"] { top: auto; bottom: calc(var(--box-h) + var(--box-b) + 5cqw); }
.st-tip[data-target="ctrls"]::after { left: 80%; }
.st-tip p { margin: 0; font: 700 clamp(13px, 3.9cqw, 18px)/1.65 var(--body); }
.st-tip small { display: block; margin-top: 1.4cqw; text-align: right; font: 700 clamp(12px, 2.9cqw, 13px)/1 var(--body); color: var(--pink-d); }

/* 読み返し・メニュー */
.st-log { z-index: 20; background: rgba(255, 249, 251, .97); justify-content: flex-start; gap: 2cqw; padding-left: 4cqw; padding-right: 4cqw; cursor: default; }
.st-log .st-topbar { grid-template-columns: 1fr 44px; }
.st-log-list { flex: 1; min-height: 0; width: 100%; overflow-y: auto; touch-action: pan-y; display: flex; flex-direction: column; gap: 1.6cqw; padding-bottom: 4cqw; text-align: left; }
.st-log-item { background: #fff; border-radius: 14px; padding: 2cqw 3cqw; box-shadow: 0 0 0 2px var(--pink-l); }
.st-log-item b { display: block; font: 900 clamp(12px, 3.4cqw, 16px)/1.2 var(--body); margin-bottom: .3em; }
.st-log-item p { margin: 0; font: 600 clamp(13px, 3.7cqw, 17px)/1.65 var(--body); white-space: pre-wrap; }
.st-log-item.q { background: var(--sky-l); }
.st-log-item.me { background: #FFF7E0; box-shadow: 0 0 0 2px #F6DD9B; }
.st-menu { z-index: 20; background: rgba(255, 249, 251, .95); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); gap: 4cqw; cursor: default; }
.st-menu > .st-btn-main { min-width: 66cqw; }
.st-menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; width: 78cqw; }

/* ───── 結果 ───── */
.st-result { justify-content: flex-start; gap: 3cqw; padding-top: max(7cqw, env(safe-area-inset-top)); }
.st-res-head { margin: 0; display: flex; flex-direction: column; align-items: center; font-family: var(--disp); font-weight: 800; font-style: italic; line-height: 1; transform: rotate(-3deg); }
.st-res-head small { font-size: 8cqw; --fx: linear-gradient(180deg, #E9F7FF 0%, #8FD3FF 50%, #3FA2F0 100%); }
.st-res-head b { font-size: 14cqw; }
.st-res-ending { margin: 0; font: 900 clamp(13px, 4cqw, 19px)/1.5 var(--body); color: var(--pink-d); word-break: keep-all; overflow-wrap: anywhere; }
.st-res-stats { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; }
.st-res-stats div { background: #fff; border-radius: 14px; padding: 2cqw 1cqw; display: flex; flex-direction: column; gap: .5em; box-shadow: 0 0 0 2px var(--pink-l); }
.st-res-stats small { font: 700 clamp(12px, 2.7cqw, 13px)/1.2 var(--body); color: var(--mute); }
.st-res-stats b { font: 800 clamp(14px, 4.4cqw, 21px)/1.1 var(--disp); word-break: keep-all; overflow-wrap: anywhere; }
.st-res-stats div:last-child b { font-family: var(--body); font-size: clamp(12px, 3.6cqw, 17px); }
.st-res-match { width: 100%; background: #fff; border-radius: 20px; padding: 3.4cqw 4cqw; text-align: left; box-shadow: 0 0 0 2.5px var(--gold), 0 .3em 0 var(--gold), 0 1em 2em rgba(120, 80, 120, .1); }
.st-res-lead { margin: 0 0 1.6cqw; font: 700 clamp(12px, 3.6cqw, 17px)/1.4 var(--body); color: var(--mute); }
.st-res-job { display: flex; align-items: center; gap: 3cqw; }
.st-res-job img { width: 24cqw; height: 24cqw; border-radius: 50%; object-fit: cover; object-position: center 12%; border: 4px solid var(--pink); background: var(--cream); flex: none; }
.st-res-job > div { min-width: 0; }
.st-res-type { margin: 0 0 .4em; font: 800 clamp(12px, 3.1cqw, 15px)/1.2 var(--body); letter-spacing: .06em; }
.st-res-name { margin: 0; font: 900 clamp(18px, 5.6cqw, 30px)/1.25 var(--body); word-break: keep-all; overflow-wrap: anywhere; }
.st-res-reason { margin: 2.4cqw 0 0; font: 700 clamp(12px, 3.6cqw, 17px)/1.7 var(--body); background: var(--sky-l); border-radius: 12px; padding: .7em 1em; }
.st-res-desc { margin: 2cqw 0; font: 500 clamp(13px, 3.7cqw, 17.6px)/1.7 var(--body); }
.st-res-lean { background: var(--cream); border-radius: 16px; padding: 3cqw 3.2cqw; box-shadow: inset 0 0 0 2px var(--pink-l); }
.st-res-lean-head { margin: 0; font: 800 clamp(12px, 3.1cqw, 15px)/1.2 var(--body); color: var(--mute); }
.st-res-lean-type { margin: .4em 0 .3em; font: 900 clamp(18px, 6cqw, 30px)/1.25 var(--body); background: linear-gradient(transparent 62%, color-mix(in srgb, var(--c, #FF8FB1) 35%, transparent) 62%); display: inline; }
.st-res-lean-text { margin: .6em 0 2.4cqw; font: 600 clamp(12px, 3.5cqw, 16.5px)/1.65 var(--body); }
.st-res-bars { display: flex; flex-direction: column; gap: 1.4cqw; }
.st-res-bar { display: grid; grid-template-columns: 10.6em 1fr 2.8em; align-items: center; gap: .7em; font: 700 clamp(12px, 3cqw, 14px)/1.2 var(--body); }
.st-res-bar.top { font-weight: 900; }
.st-res-bar i { height: 1.1em; background: rgba(61, 59, 92, .08); border-radius: 999px; overflow: hidden; }
.st-res-bar em { display: block; height: 100%; border-radius: inherit; width: 0; transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.st-res-bar span:last-child { text-align: right; font-family: var(--disp); }
.st-res-picks { margin-top: 2.6cqw; border-top: 2px dashed var(--pink-l); padding-top: 2cqw; }
.st-res-picks summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font: 800 clamp(12px, 3.5cqw, 16px)/1.4 var(--body); }
.st-res-picks ol { margin: 1.6cqw 0 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 1.4cqw; }
.st-res-picks li { font: 600 clamp(12px, 3.3cqw, 15px)/1.5 var(--body); }
.st-res-picks li small { display: block; color: var(--mute); font-size: max(12px, .88em); }
.st-res-picks li span { border-left: .35em solid var(--c, #D8D3E0); padding-left: .5em; display: block; }
.st-res-small { margin: 2.4cqw 0 0; font-size: clamp(12px, 2.8cqw, 13.6px); color: var(--mute); line-height: 1.6; }
.st-res-hint { margin: 0; font: 700 clamp(12px, 3.4cqw, 16px)/1.6 var(--body); background: #FFF4D9; border-radius: 14px; padding: .7em 1em; text-align: left; overflow-wrap: anywhere; }
.st-res-btns { display: flex; flex-direction: column; gap: 3cqw; align-items: center; padding-bottom: 5cqw; }
.st-res-btns > .st-btn { min-width: 74cqw; }

/* ───── 拡大表示・ワイプ・お知らせ・読み込み ───── */
.st-viewer { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqw; padding: 4cqw; background: rgba(255, 249, 251, .96); cursor: pointer; animation: stFade .3s ease; }
.st-viewer-img { position: relative; width: 100%; aspect-ratio: 3 / 2; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--gold), 0 2em 3em rgba(120, 80, 120, .25); }
.st-viewer-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-viewer p { margin: 0; font: 900 clamp(15px, 4.6cqw, 22px)/1.3 var(--body); }
.st-viewer small { color: var(--mute); font-size: clamp(12px, 3cqw, 14px); }
.st-wipe { position: absolute; inset: 0; z-index: 30; pointer-events: none; background: linear-gradient(105deg, transparent 0 30%, #FFD9E6 30% 46%, #fff 46% 54%, #DDF1FF 54% 70%, transparent 70%) 0 0 / 300% 100% no-repeat; background-position: 160% 0; opacity: 0; }
.st-wipe.go { animation: stWipe .76s ease-in-out; }
@keyframes stWipe { 0% { opacity: 1; background-position: 160% 0; } 50% { opacity: 1; background-position: 50% 0; } 100% { opacity: 1; background-position: -60% 0; } }
.st-toasts { position: absolute; z-index: 45; left: 0; right: 0; top: calc(max(2.4cqw, env(safe-area-inset-top)) + 17cqw); display: flex; flex-direction: column; align-items: center; gap: 1.4cqw; pointer-events: none; }
.st-toast { max-width: 90cqw; font: 800 clamp(12px, 3.3cqw, 15px)/1.4 var(--body); background: #fff; color: var(--ink); padding: .6em 1.2em; border-radius: 999px; box-shadow: 0 0 0 2px var(--gold), 0 .6em 1.4em rgba(120, 80, 120, .2); animation: stToast .4s cubic-bezier(.34, 1.56, .64, 1); transition: opacity .4s, transform .4s; text-align: center; }
.st-toast.cg { box-shadow: 0 0 0 2px var(--pink), 0 0 1.6em rgba(255, 143, 177, .5); }
.st-toast.zk { box-shadow: 0 0 0 2px var(--sky), 0 .6em 1.4em rgba(91, 192, 255, .3); }
.st-toast.out { opacity: 0; transform: translateY(-2cqw); }
@keyframes stToast { from { opacity: 0; transform: translateY(-3cqw) scale(.9); } }
.st-loading { position: absolute; inset: 0; z-index: 50; display: grid; place-content: center; gap: 2cqw; justify-items: center; background: var(--cream); font: 800 clamp(12px, 3cqw, 15px)/1 var(--disp); letter-spacing: .3em; color: var(--pink-d); transition: opacity .4s; }
.st-loading i { width: 10cqw; height: 10cqw; border-radius: 50% 50% 50% 0; background: linear-gradient(135deg, #FFD9E6, var(--pink)); transform: rotate(-45deg); animation: stBounce .6s ease-in-out infinite alternate; }
@keyframes stBounce { to { transform: rotate(-45deg) translate(2cqw, -2cqw); } }
.st-loading.off { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    .st-logo, .st-logo-text, .st-title .st-btn-main, .st-bg.on, .st-next, .st-tc, .st-bang { animation: none; }
}