/* STEP UP MERGE — ふわふわのおもちの合体パズル（明るい昼・パステル） */
:root {
    --ink: #5B3F37;
    --ink-s: #8A6A5F;
    --mute: #8C7770;
    --cream: #FFF7EE;
    --paper: #FFFDF9;
    --peach: #FFB79E;
    --sakura: #FF9DB5;
    --coral: #FF7F8E;
    --mint: #9BE3C7;
    --butter: #FFE08A;
    --sky: #8FD3FF;
    --red: #E63946;
    --blue: #2F9BFF;
    --violet: #8B5CF6;
    --yellow: #FFC23C;
    --disp: "Fredoka", "Zen Maru Gothic", sans-serif;
    --body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
    --puff: 0 0 0 3px #fff, 0 0 0 5px rgba(91, 63, 55, .78), 0 .5em 1em rgba(175, 110, 90, .2);
}
* { 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; overscroll-behavior: none;
}
button { font: inherit; color: inherit; }
.mg-backdrop {
    position: fixed; inset: 0;
    background:
        radial-gradient(circle at 15% 20%, #FFE1EA 0 14%, transparent 15%),
        radial-gradient(circle at 85% 30%, #DDF6EC 0 12%, transparent 13%),
        radial-gradient(circle at 75% 85%, #FFF0C9 0 16%, transparent 17%),
        radial-gradient(circle at 25% 80%, #DCEFFF 0 12%, transparent 13%),
        linear-gradient(160deg, #FFF3EC, #FFF9F1 50%, #F2FAFF);
}
.mg-stage {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
    overflow: hidden; background: var(--cream);
    border-radius: 28px;
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(91, 63, 55, .25), 0 30px 70px rgba(175, 110, 90, .3);
    container-type: size;
}
.mg-stage.mg-full { border-radius: 0; box-shadow: none; }
.mg-stage [hidden] { display: none !important; }
.mg-stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* ───── 共通のボタン ───── */
.mg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4em;
    cursor: pointer; text-decoration: none; border-radius: 999px;
    min-height: 44px; padding: .7em 2em .75em;
    font: 900 clamp(14px, 4.4cqw, 22px)/1.2 var(--body); letter-spacing: .06em; word-break: keep-all;
    transition: transform .12s;
}
.mg-btn:active { transform: translateY(.18em) scale(.98); }
.mg-btn-main {
    color: #fff; border: 3px solid #fff;
    background: linear-gradient(180deg, #FFC9B0 0%, #FF9FAE 55%, #FF859D 100%);
    box-shadow: 0 0 0 2.5px var(--ink), inset 0 .22em 0 rgba(255, 255, 255, .55), 0 .3em 0 2.5px #D9667C, 0 .7em 1.3em rgba(217, 102, 124, .35);
    text-shadow: 0 .07em 0 rgba(170, 60, 80, .55), 0 0 .3em rgba(255, 120, 140, .5);
}
.mg-btn-main:active { box-shadow: 0 0 0 2.5px var(--ink), inset 0 .22em 0 rgba(255, 255, 255, .55), 0 .1em 0 2.5px #D9667C; }
.mg-btn-sub {
    color: var(--ink); background: var(--paper); border: 3px solid #fff;
    box-shadow: 0 0 0 2.5px var(--ink), 0 .26em 0 2.5px #E7C8B8, 0 .5em 1em rgba(175, 110, 90, .18);
}
.mg-btn-sub:active { box-shadow: 0 0 0 2.5px var(--ink), 0 .08em 0 2.5px #E7C8B8; }
.mg-btn-s { font-size: clamp(12px, 3.5cqw, 17px); padding: .5em 1.2em .55em; }
.mg-btn[disabled] { filter: grayscale(.8) opacity(.55); cursor: default; }
.mg-row { display: flex; gap: 2.4cqw; justify-content: center; flex-wrap: wrap; }
.mg-link { color: var(--ink); font: 700 clamp(12px, 3.4cqw, 15px)/1.2 var(--body); }
.mg-link-btn { background: none; border: 0; padding: .7em; min-height: 44px; text-decoration: underline; cursor: pointer; }
.mg-ic { display: inline-block; width: 1.6em; height: 1.6em; vertical-align: middle; }
.mg-ic svg { width: 100%; height: 100%; display: block; }
img.mg-ic { object-fit: contain; }

/* ───── 画面の切り替え ───── */
.mg-screen {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3cqw; text-align: center;
    padding: max(4cqw, env(safe-area-inset-top)) 5.5cqw max(4cqw, env(safe-area-inset-bottom));
}
.mg-enter { animation: mgEnter .42s cubic-bezier(.22, 1.2, .36, 1) both; }
@keyframes mgEnter { from { opacity: 0; transform: translateY(4cqw) scale(.97); } }
.mg-page {
    background: linear-gradient(180deg, #FFE9EF 0%, #FFF6EE 30%, #F1FAF6 100%);
    justify-content: flex-start; overflow-y: auto; touch-action: pan-y; gap: 2.6cqw;
    padding-top: max(3cqw, env(safe-area-inset-top));
}
.mg-page > * { flex: none; }
.mg-topbar { width: 100%; display: flex; align-items: center; gap: 2.4cqw; }
.mg-back {
    width: max(44px, 11cqw); height: max(44px, 11cqw); flex: none; cursor: pointer; border-radius: 50%;
    background: var(--paper); border: 3px solid #fff; box-shadow: 0 0 0 2.5px var(--ink), 0 .2em 0 2.5px #E7C8B8;
    font: 700 7cqw/1 var(--disp); padding-bottom: .12em;
}
.mg-page-title {
    flex: 1; margin: 0; text-align: left; white-space: nowrap;
    font: 900 clamp(18px, 6cqw, 32px)/1.1 var(--body); color: #fff;
    -webkit-text-stroke: .16em var(--ink); paint-order: stroke fill; letter-spacing: .04em;
    text-shadow: 0 .12em 0 var(--ink);
}
.mg-chip {
    flex: none; display: inline-flex; align-items: center; gap: .3em;
    background: var(--paper); border-radius: 999px; padding: .35em .9em; box-shadow: var(--puff);
    font: 700 clamp(12px, 3.6cqw, 18px)/1 var(--disp);
}
.mg-chip .mg-ic { width: 1.3em; height: 1.3em; }
.mg-page-lead { margin: 0; width: 100%; text-align: left; font: 700 clamp(12px, 3.6cqw, 17px)/1.6 var(--body); color: var(--ink-s); word-break: keep-all; overflow-wrap: anywhere; }
.mg-page-note { margin: 1cqw 0 4cqw; font-size: clamp(12px, 3cqw, 14px); color: var(--mute); line-height: 1.6; }
.mg-box {
    width: 100%; background: var(--paper); border-radius: 22px; padding: 3cqw 3.4cqw; text-align: left;
    box-shadow: var(--puff);
}
.mg-box-head { margin: 0 0 1.6cqw; font: 900 clamp(13px, 4cqw, 19px)/1.3 var(--body); }
.mg-box-head::before { content: ""; display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: var(--sakura); box-shadow: 0 0 0 2px var(--ink); margin-right: .5em; vertical-align: .05em; }
.mg-box-text { margin: 0 0 1.6cqw; font: 700 clamp(12px, 3.5cqw, 16px)/1.6 var(--body); }
.mg-box-text b { color: #D9466A; }

/* ───── HUD ───── */
.mg-hud, .mg-hud2 {
    position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 1.8cqw;
    padding: 0 2.6cqw; pointer-events: none; font-size: clamp(12px, 3.2cqw, 17px);
}
.mg-hud { top: 0; padding-top: max(2.4cqw, env(safe-area-inset-top)); }
.mg-hud2 { top: calc(max(2.4cqw, env(safe-area-inset-top)) + 12.6cqw); justify-content: space-between; }
.mg-pill {
    background: var(--paper); border-radius: 999px; box-shadow: var(--puff);
    display: flex; flex-direction: column; justify-content: center; gap: .2em; padding: .4em 1em; white-space: nowrap;
}
.mg-pill small, .mg-goal small { font: 600 max(12px, .66em)/1 var(--disp); letter-spacing: .14em; color: var(--mute); }
.mg-pt { flex: none; align-items: flex-end; min-width: 5em; min-height: 3.3em; }
.mg-pt b { font: 700 1.3em/1 var(--disp); font-variant-numeric: tabular-nums; }
.mg-goal {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .55em;
    background: var(--paper); border-radius: 999px; box-shadow: var(--puff); padding: .12em 1em .12em .25em; min-height: 3.3em;
}
.mg-goal canvas { width: 3em; height: 3em; flex: none; display: block; }
.mg-goal-body { min-width: 0; display: flex; flex-direction: column; gap: .04em; align-items: flex-start; }
.mg-goal-body b { font: 900 1.02em/1.15 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mg-goal.up { animation: mgUp .7s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes mgUp { 35% { transform: scale(1.07) rotate(-1.5deg); background: #FFF4D2; } }
.mg-dots { display: flex; gap: .22em; }
.mg-dots i { width: .62em; height: .62em; border-radius: 50%; background: #EDE5E8; box-shadow: inset 0 0 0 1.5px rgba(91, 63, 55, .25); }
.mg-dots i.on { background: var(--c); box-shadow: inset 0 0 0 1.5px rgba(91, 63, 55, .6); }
.mg-dots i.goal { box-shadow: 0 0 0 2px #FF7F8E; }
.mg-icon {
    flex: none; pointer-events: auto; cursor: pointer; width: max(44px, 2.9em); height: max(44px, 2.9em); border-radius: 50%;
    background: var(--paper); border: 0; box-shadow: var(--puff); display: inline-flex; gap: .26em; align-items: center; justify-content: center;
}
.mg-icon i { width: .3em; height: 1em; border-radius: 99px; background: var(--ink); }
.mg-next { flex: none; flex-direction: row; align-items: center; gap: .3em; padding: .2em .4em .2em .9em; }
.mg-next canvas { width: 2.5em; height: 2.5em; display: block; }
.mg-next.swap canvas { animation: mgSwap .3s ease; }
@keyframes mgSwap { 50% { transform: scale(.6) rotate(180deg); } }
.mg-status { display: flex; gap: 1.4cqw; align-items: center; min-width: 0; flex: 1 1 auto; }
.mg-status .mg-pill { flex-direction: row; align-items: center; gap: .45em; padding: .35em .9em .35em .5em; min-height: 2.6em; }
.mg-status .mg-pill b { font: 900 1em/1 var(--body); }
.mg-status .mg-pill .mg-ic { width: 1.5em; height: 1.5em; }
.mg-timer b { font: 700 1.25em/1 var(--disp) !important; font-variant-numeric: tabular-nums; }
.mg-timer.hurry { animation: mgHurry .5s ease-in-out infinite alternate; background: #FFE3E6; }
@keyframes mgHurry { to { transform: scale(1.06); } }
.mg-bossbar { flex: 1 1 auto; min-width: 0; flex-direction: column !important; align-items: stretch !important; gap: .25em !important; padding: .35em .9em !important; }
.mg-bossbar span { display: flex; justify-content: space-between; font: 900 max(12px, .78em)/1 var(--body); }
.mg-bossbar span em { font: 700 1.05em/1 var(--disp); font-style: normal; color: #D9466A; }
.mg-bossbar i { display: block; height: .8em; border-radius: 99px; background: #EEE6F2; box-shadow: inset 0 0 0 1.5px rgba(91, 63, 55, .3); overflow: hidden; }
.mg-bossbar i em { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #FFD08A, #FF8FA3); transition: width .4s cubic-bezier(.2, .8, .2, 1); }
.mg-bossbar.hit { animation: mgShakeX .3s; }
@keyframes mgShakeX { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.mg-wind { background: #E4F5FF !important; animation: mgPulse .8s ease-in-out infinite alternate; }
@keyframes mgPulse { to { transform: scale(1.05); } }

/* ───── スキル ───── */
.mg-skills {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 0 2.6cqw max(1.6cqw, env(safe-area-inset-bottom));
    font-size: clamp(12.5px, 3.2cqw, 17px);
}
.mg-skills .mg-gauge { display: none; }   /* ゲージは箱の台座の上に描く */
.mg-gauge { position: relative; height: 1.5em; margin: 0 1.5cqw 1.6cqw; border-radius: 99px; background: rgba(255, 253, 249, .9); box-shadow: 0 0 0 2px rgba(91, 63, 55, .35); overflow: hidden; }
.mg-gauge i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #BFF0DC, #8FD3FF); transition: width .35s; }
.mg-gauge span { position: relative; display: block; text-align: center; font: 700 max(12px, .72em)/1.5em var(--body); color: var(--ink); }
.mg-skill-row { display: flex; gap: 2cqw; }
.mg-skill {
    position: relative; flex: 1; min-width: 0; cursor: pointer;
    min-height: max(48px, 12.4cqw); border-radius: 22px; border: 3px solid #fff;
    background: linear-gradient(180deg, #FFFDF9, #FFF1E8);
    box-shadow: 0 0 0 2.5px var(--ink), 0 .26em 0 2.5px #E7C8B8;
    display: flex; align-items: center; justify-content: center; gap: .3em; padding: .2em .4em;
}
.mg-skill:active { transform: translateY(.15em); box-shadow: 0 0 0 2.5px var(--ink), 0 .08em 0 2.5px #E7C8B8; }
.mg-skill-ic { width: 2.3em; height: 2.3em; flex: none; }
.mg-skill-ic > * { width: 100%; height: 100%; }
.mg-skill b { font: 900 .98em/1.1 var(--body); white-space: nowrap; }
.mg-skill em {
    position: absolute; top: -.55em; right: -.3em; min-width: 1.6em; height: 1.6em; border-radius: 99px; padding: 0 .35em;
    background: #FF7F8E; color: #fff; font: 700 max(12px, .9em)/1.6em var(--disp); font-style: normal; box-shadow: 0 0 0 2.5px #fff, 0 0 0 4px var(--ink);
}
.mg-skill.zero { filter: grayscale(1) opacity(.5); }
.mg-skill.zero em { background: #B9AFB2; }
.mg-skill.got { animation: mgGot .6s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes mgGot { 40% { transform: scale(1.12) translateY(-.3em); } }
.mg-skill.hl { animation: mgHl 1s ease-in-out infinite; z-index: 2; }
@keyframes mgHl { 50% { box-shadow: 0 0 0 2.5px var(--ink), 0 .26em 0 2.5px #E7C8B8, 0 0 0 8px rgba(255, 127, 142, .55); transform: translateY(-.15em); } }
.mg-restbar {
    position: absolute; left: 6cqw; right: 6cqw; top: 31%;
    display: flex; align-items: center; justify-content: space-between; gap: 2cqw;
    background: #F1ECFF; border-radius: 999px; padding: .6em .6em .6em 1.4em; box-shadow: var(--puff);
    font: 700 clamp(13px, 3.9cqw, 19px)/1.3 var(--body); animation: mgEnter .3s both;
}
.mg-restbar p { margin: 0; }
.mg-restbar b { color: #7A5BE0; }

/* ───── 案内・お知らせ ───── */
.mg-tut {
    position: absolute; left: 4cqw; right: 4cqw; top: 34%;
    display: flex; align-items: center; gap: 2cqw; pointer-events: none;
    animation: mgEnter .4s both;
}
.mg-tut canvas { width: 15cqw; height: 15cqw; flex: none; animation: mgBob 1.6s ease-in-out infinite; }
@keyframes mgBob { 50% { transform: translateY(-1.2cqw); } }
.mg-tut-text {
    flex: 1; margin: 0; text-align: left; background: var(--paper); border-radius: 20px; padding: 2.4cqw 3.4cqw;
    box-shadow: var(--puff); font: 700 clamp(12px, 3.7cqw, 18px)/1.6 var(--body); word-break: keep-all; overflow-wrap: anywhere;
}
.mg-tut-text b { color: #D9466A; }
@media (hover: none) { .mg-tut-text .mg-kb { display: none; } }   /* スマホではキーボードの説明を省き、案内を短くする */
.mg-toast {
    position: absolute; left: 50%; top: 27%; transform: translateX(-50%);
    background: var(--paper); border-radius: 999px; padding: .5em 1.2em; white-space: nowrap; box-shadow: var(--puff);
    font: 900 clamp(12px, 3.6cqw, 17px)/1.2 var(--body); pointer-events: none;
}
.mg-toast.on { animation: mgToast 1.5s ease forwards; }
.mg-toast b { color: #D9466A; }
.mg-toast i { font: 700 max(12px, .8em)/1 var(--disp); font-style: normal; color: #fff; background: #FF7F8E; border-radius: 99px; padding: .25em .5em; margin-right: .4em; }
@keyframes mgToast { 0% { opacity: 0; transform: translate(-50%, -2cqw) scale(.9); } 14%, 80% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -2cqw); } }
.mg-banner {
    position: absolute; left: 0; right: 0; top: 40%;
    display: flex; flex-direction: column; align-items: center; gap: 1.2cqw; pointer-events: none;
}
.mg-banner.on { animation: mgBanner 1.8s ease forwards; }
.mg-banner.long.on { animation-duration: 2.6s; }
.mg-banner small {
    font: 900 clamp(13px, 4.2cqw, 22px)/1.25 var(--body); letter-spacing: .04em;
    background: var(--paper); padding: .35em 1.1em; border-radius: 999px; box-shadow: var(--puff);
}
.mg-banner small:empty { display: none; }
@keyframes mgBanner { 0% { opacity: 0; transform: scale(1.5); } 12% { opacity: 1; transform: scale(.95); } 20% { transform: scale(1); } 82% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.94) translateY(-4cqw); } }
.mg-word { width: 70cqw; height: auto; display: block; filter: drop-shadow(0 1cqw 1.4cqw rgba(175, 110, 90, .3)); }
.mg-word-txt {
    display: inline-block; font: 700 clamp(36px, 14cqw, 76px)/1 var(--disp); letter-spacing: .02em;
    color: #FFB3C4; -webkit-text-stroke: .06em var(--ink); paint-order: stroke fill;
    text-shadow: .05em 0 0 #fff, -.05em 0 0 #fff, 0 .05em 0 #fff, 0 -.05em 0 #fff, .04em .04em 0 #fff, -.04em .04em 0 #fff, .04em -.04em 0 #fff, -.04em -.04em 0 #fff, 0 .13em 0 #F4A3A3, 0 .22em .25em rgba(175, 110, 90, .3);
}
.mg-word-txt.j { font-family: var(--body); font-weight: 900; font-size: clamp(28px, 10cqw, 54px); }
.mg-word-txt.mint { color: #A6EBD4; }
.mg-word-txt.butter { color: #FFE38E; }
.mg-word-txt.lav { color: #D7CCFF; }

/* ───── 昇格カットイン ───── */
.mg-cutin { position: absolute; inset: 0; cursor: pointer; background: rgba(255, 247, 238, .55); animation: mgFade .2s both; }
@keyframes mgFade { from { opacity: 0; } }
.mg-cutin.out { animation: mgFadeOut .25s forwards; }
@keyframes mgFadeOut { to { opacity: 0; } }
.mg-cut-band {
    position: absolute; left: -10%; right: -10%; top: 30%; height: 42%;
    background: linear-gradient(100deg, #fff 0 4%, var(--c2) 4% 30%, var(--c) 30% 100%);
    transform: rotate(-8deg); box-shadow: 0 0 0 4px #fff, 0 0 0 7px rgba(91, 63, 55, .7);
    animation: mgBand .45s cubic-bezier(.2, 1, .3, 1) both;
}
@keyframes mgBand { from { transform: rotate(-8deg) translateX(-110%); } }
.mg-cut-rays {
    position: absolute; left: 50%; top: 50%; width: 160cqw; height: 160cqw; margin: -80cqw 0 0 -80cqw;
    background: repeating-conic-gradient(rgba(255, 255, 255, .55) 0 8deg, transparent 8deg 20deg);
    -webkit-mask: radial-gradient(circle, #000 20%, transparent 62%); mask: radial-gradient(circle, #000 20%, transparent 62%);
    animation: mgRays 6s linear infinite;
}
@keyframes mgRays { to { transform: rotate(360deg); } }
.mg-cut-cv { position: absolute; left: 50%; top: 13%; width: 62cqw; height: 62cqw; margin-left: -31cqw; animation: mgCutBall .6s cubic-bezier(.34, 1.56, .64, 1) .12s both; }
@keyframes mgCutBall { from { transform: translateX(60cqw) scale(.4) rotate(30deg); opacity: 0; } }
.mg-cut-text { position: absolute; left: 0; right: 0; top: 58%; display: flex; flex-direction: column; align-items: center; gap: 1.2cqw; animation: mgEnter .4s .3s both; }
.mg-cut-word .mg-word { width: 66cqw; }
.mg-cut-name { margin: 0; font: 900 clamp(18px, 6cqw, 32px)/1.2 var(--body); color: #fff; -webkit-text-stroke: .16em var(--ink); paint-order: stroke fill; text-shadow: 0 .12em 0 var(--ink); }
.mg-cut-name b { font-size: 1.35em; color: #FFF3B0; }
.mg-cut-say { margin: 0; background: var(--paper); border-radius: 18px; padding: .5em 1.2em; box-shadow: var(--puff); font: 900 clamp(13px, 4cqw, 20px)/1.4 var(--body); }
.mg-cut-new { margin: 0; font: 900 clamp(12px, 3.3cqw, 15px)/1 var(--body); color: #fff; background: #FF7F8E; border-radius: 99px; padding: .45em 1em; box-shadow: 0 0 0 2.5px #fff; }

/* ───── タイトル ───── */
.mg-title {
    justify-content: flex-end; gap: 2.4cqw; padding-bottom: max(4.6cqw, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(255, 247, 238, 0) 44%, rgba(255, 247, 238, .9) 60%, rgba(255, 247, 238, .97));
}
.mg-logo-wrap { margin-top: 11cqw; margin-bottom: auto; width: 90cqw; animation: mgFloat 3.4s ease-in-out infinite; filter: drop-shadow(0 1.2cqw 1.6cqw rgba(175, 110, 90, .28)); }
.mg-logo { width: 100%; height: auto; display: block; }
.mg-logo-text svg { width: 100%; height: auto; display: block; overflow: visible; }
@keyframes mgFloat { 0%, 100% { transform: translateY(0) scale(1, 1); } 45% { transform: translateY(-1.6cqw) scale(1.01, .99); } 55% { transform: translateY(-1.6cqw) scale(.99, 1.01); } }
.mg-catch { margin: 0; font: 900 clamp(15px, 4.8cqw, 26px)/1.5 var(--body); letter-spacing: .04em; word-break: keep-all; text-shadow: 0 0 .3em #fff, 0 0 .6em #fff, 0 0 1em #fff; background: rgba(255, 250, 244, .92); border-radius: 20px; padding: .35em 1em; box-shadow: 0 0 1.2em 1em rgba(255, 250, 244, .7); }
.mg-parade { width: 100%; height: auto; display: block; margin: -2cqw 0 -3cqw; }
.mg-title-btns { display: flex; flex-direction: column; gap: 2.8cqw; align-items: center; }
.mg-title-btns .mg-btn-main { font-size: clamp(18px, 6.6cqw, 34px); padding: .5em 3em .55em; animation: mgPulse2 1.6s ease-in-out infinite; }
@keyframes mgPulse2 { 50% { transform: scale(1.05); } }
.mg-title-btns .mg-row { gap: 2cqw; flex-wrap: nowrap; }
.mg-title-btns .mg-row .mg-btn { padding-left: .9em; padding-right: .9em; letter-spacing: 0; }
.mg-title-stat { margin: 0; font: 700 clamp(12px, 3.2cqw, 15px)/1.4 var(--body); color: var(--ink-s); }
.mg-title-stat:empty { display: none; }
.mg-title-stat b { font-family: var(--disp); color: #D9466A; }
.mg-note { margin: 0; font-size: clamp(12px, 3cqw, 14px); color: var(--mute); line-height: 1.6; word-break: keep-all; }
.mg-demo-tag {
    position: absolute; top: max(3cqw, env(safe-area-inset-top)); left: 3cqw;
    font: 600 clamp(12px, 2.8cqw, 14px)/1 var(--disp); letter-spacing: .2em;
    background: var(--ink); color: #fff; padding: .6em 1em; border-radius: 999px;
}
.mg-demo-tag::before { content: ""; display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: #FF9DB5; margin-right: .6em; animation: mgBlink 1s steps(2) infinite; }
@keyframes mgBlink { 50% { opacity: 0; } }
.mg-sound {
    position: absolute; top: max(3cqw, env(safe-area-inset-top)); right: 3cqw; min-height: 44px;
    cursor: pointer; border: 0; background: var(--paper); box-shadow: var(--puff);
    border-radius: 999px; padding: .5em 1.1em; font: 700 clamp(12px, 3.2cqw, 16px)/1 var(--disp);
}

/* ───── シーズン選択 ───── */
.mg-stage-list { width: 100%; display: flex; flex-direction: column; gap: 3.4cqw; padding-bottom: 5cqw; }
.mg-scard {
    position: relative; overflow: hidden; cursor: pointer; text-align: left; border: 0;
    min-height: 33cqw; border-radius: 24px; padding: 3cqw 3.6cqw;
    background: var(--bgimg, none) center 18% / cover no-repeat, var(--bgfb);
    box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px rgba(91, 63, 55, .8), 0 .5em 1em rgba(175, 110, 90, .25);
    display: grid; grid-template-columns: 1fr auto; gap: .3em 2cqw; align-content: end;
    transition: transform .12s;
    animation: mgEnter .45s cubic-bezier(.22, 1.2, .36, 1) both;
}
.mg-scard:nth-child(2) { animation-delay: .05s; } .mg-scard:nth-child(3) { animation-delay: .1s; }
.mg-scard:nth-child(4) { animation-delay: .15s; } .mg-scard:nth-child(5) { animation-delay: .2s; } .mg-scard:nth-child(6) { animation-delay: .25s; }
.mg-scard::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 253, 249, .96) 38%, rgba(255, 253, 249, .35)); }
.mg-scard > * { position: relative; }
.mg-scard:active { transform: scale(.98); }
.mg-scard-season { grid-column: 1; display: flex; align-items: center; gap: .5em; font: 600 clamp(12px, 3.2cqw, 15px)/1 var(--disp); letter-spacing: .14em; color: var(--c); }
.mg-scard-season i { font: 900 1em/1 var(--body); font-style: normal; color: #fff; background: var(--c); border-radius: 99px; padding: .3em .7em; letter-spacing: .04em; }
.mg-scard-name { grid-column: 1; font: 900 clamp(17px, 5.6cqw, 28px)/1.2 var(--body); }
.mg-scard-goal { grid-column: 1; font: 700 clamp(12px, 3.3cqw, 15px)/1.4 var(--body); color: var(--ink-s); }
.mg-scard-stars { grid-column: 1; display: flex; gap: .2em; align-items: center; }
.mg-scard-stars .mg-ic { width: 6.4cqw; height: 6.4cqw; }
.mg-scard-stars small { font: 700 clamp(12px, 3.2cqw, 15px)/1 var(--disp); color: var(--ink-s); margin-left: .5em; }
.mg-scard-face { position: absolute !important; right: 2cqw; bottom: 1cqw; width: 27cqw; height: 27cqw; object-fit: contain; border-radius: 50%; animation: mgBob 2.6s ease-in-out infinite; }
.mg-scard.locked { cursor: default; filter: grayscale(.75); }
.mg-scard-lock { position: absolute !important; inset: 0; display: flex; align-items: center; justify-content: center; gap: .5em; background: rgba(245, 240, 242, .9); font: 900 clamp(13px, 4cqw, 19px)/1.3 var(--body); }
.mg-scard-lock .mg-ic { width: 9cqw; height: 9cqw; }
.mg-scard.final { --bgfb: linear-gradient(120deg, #FFE3EC, #FFF3CF 50%, #E2F1FF); }
.mg-scard.endless { min-height: 26cqw; }

/* ───── お題カード ───── */
.mg-intro { background: rgba(255, 240, 232, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); overflow-y: auto; touch-action: pan-y; justify-content: safe center; }
.mg-intro-card {
    width: 100%; flex: none; background: var(--paper); border-radius: 28px; padding: 4cqw 4.4cqw 2cqw;
    box-shadow: 0 0 0 4px #fff, 0 0 0 6.5px rgba(91, 63, 55, .8), 0 1em 2em rgba(175, 110, 90, .3);
    display: flex; flex-direction: column; gap: 2.4cqw; align-items: center;
    animation: mgPop .5s cubic-bezier(.34, 1.4, .64, 1) both;
}
@keyframes mgPop { from { transform: scale(.85) translateY(5cqw); opacity: 0; } }
.mg-intro-season { margin: 0; font: 600 clamp(12px, 3.4cqw, 16px)/1 var(--disp); letter-spacing: .2em; color: var(--c); }
.mg-intro-name { margin: 0; font: 900 clamp(22px, 7.4cqw, 38px)/1.2 var(--body); color: #fff; -webkit-text-stroke: .15em var(--ink); paint-order: stroke fill; text-shadow: 0 .1em 0 var(--c), 0 .16em 0 var(--ink); }
.mg-intro-team { width: 100%; display: flex; gap: 3cqw; align-items: center; text-align: left; background: var(--cl); border-radius: 20px; padding: 2cqw 3cqw 2cqw 2cqw; }
.mg-intro-team img { width: 20cqw; height: 20cqw; flex: none; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px var(--c); }
.mg-intro-team small { display: block; font: 900 clamp(12px, 3.6cqw, 17px)/1.2 var(--body); color: var(--ink); margin-bottom: .3em; }
.mg-intro-team p { margin: 0; font: 500 clamp(12px, 3.3cqw, 15px)/1.55 var(--body); }
.mg-intro-mates { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2cqw; flex: none; }
.mg-intro-mates img { width: 11cqw !important; height: 11cqw !important; }
.mg-intro-lead { margin: 0; text-align: left; font: 700 clamp(12px, 3.7cqw, 17px)/1.65 var(--body); word-break: keep-all; overflow-wrap: anywhere; }
.mg-intro-goal { width: 100%; display: flex; align-items: center; gap: 3cqw; background: #FFF5D6; border-radius: 20px; padding: 1.6cqw 3cqw 1.6cqw 1.6cqw; text-align: left; }
.mg-intro-goal canvas { width: 19cqw; height: 19cqw; flex: none; }
.mg-intro-goal small { display: block; font: 600 clamp(12px, 3cqw, 14px)/1 var(--disp); letter-spacing: .16em; color: var(--mute); }
.mg-intro-goal b { display: block; font: 900 clamp(15px, 4.8cqw, 24px)/1.3 var(--body); margin: .2em 0; }
.mg-intro-goal span { display: flex; gap: .3em; align-items: center; font: 700 clamp(12px, 3.2cqw, 15px)/1.4 var(--body); color: var(--ink-s); }
.mg-intro-goal span .mg-ic { width: 1.4em; height: 1.4em; flex: none; }
.mg-missions { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 1.4cqw; }
.mg-missions li { display: flex; align-items: center; gap: 2cqw; background: #FFF4EE; border-radius: 999px; padding: .4em 1em .4em .4em; text-align: left; font: 700 clamp(12px, 3.5cqw, 16px)/1.3 var(--body); }
.mg-missions li .mg-ic { width: 7cqw; height: 7cqw; flex: none; }
.mg-missions li span { flex: 1; }
.mg-missions li b { font: 700 max(12px, .8em)/1 var(--disp); color: #fff; background: #FF7F8E; border-radius: 999px; padding: .4em .7em; }
.mg-intro .mg-btn-main { font-size: clamp(17px, 5.8cqw, 30px); padding: .5em 3em .55em; margin-top: 1cqw; }

/* ───── あそびかた ───── */
.mg-steps { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 2.2cqw; }
.mg-steps li { display: flex; align-items: center; gap: 3cqw; text-align: left; background: var(--paper); border-radius: 22px; padding: 2.4cqw 3.4cqw; box-shadow: var(--puff); }
.mg-steps i { flex: none; width: 9.4cqw; height: 9.4cqw; border-radius: 50%; display: grid; place-content: center; font: 700 clamp(14px, 4.6cqw, 24px)/1 var(--disp); font-style: normal; color: #fff; background: #FF9DB5; box-shadow: 0 0 0 2.5px #fff, 0 0 0 4.5px var(--ink); }
.mg-steps li:nth-child(2) i { background: #7FC8FF; } .mg-steps li:nth-child(3) i { background: #A68BFF; }
.mg-steps span { font: 500 clamp(12px, 3.3cqw, 15px)/1.55 var(--body); color: var(--ink-s); word-break: keep-all; overflow-wrap: anywhere; }
.mg-steps b { display: block; font: 900 clamp(13px, 4.1cqw, 19px)/1.4 var(--body); color: var(--ink); }
.mg-chain { width: 100%; height: auto; display: block; }
.mg-skill-help { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.6cqw; }
.mg-skill-help li { display: flex; align-items: center; gap: 2.4cqw; font: 500 clamp(12px, 3.4cqw, 15px)/1.5 var(--body); }
.mg-skill-help .mg-ic { width: 10cqw; height: 10cqw; flex: none; }
.mg-skill-help b { display: block; font: 900 clamp(13px, 3.9cqw, 18px)/1.3 var(--body); }
.mg-jobs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8cqw; }
.mg-jobs span { display: flex; align-items: center; gap: .45em; background: #FFF4EE; border-radius: 999px; padding: .45em .7em; font: 900 clamp(12px, 3.2cqw, 15px)/1.2 var(--body); white-space: nowrap; }
.mg-jobs span::before { content: ""; flex: none; width: 1.15em; height: 1.15em; border-radius: 50%; background: #fff; border: .3em solid var(--c); box-shadow: 0 0 0 2px var(--ink); }
.mg-howto .mg-btn-main { margin: 1cqw 0 5cqw; padding-left: 3em; padding-right: 3em; }

/* ───── 図鑑 ───── */
.mg-tabs { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6cqw; }
.mg-tab { cursor: pointer; min-height: 44px; border: 3px solid #fff; border-radius: 16px; background: var(--paper); box-shadow: 0 0 0 2.5px rgba(91, 63, 55, .5); font: 900 clamp(12px, 3.3cqw, 15px)/1.2 var(--body); padding: .4em .2em; display: flex; flex-direction: column; align-items: center; gap: .2em; }
.mg-tab small { font: 700 max(12px, .85em)/1 var(--disp); color: var(--mute); }
.mg-tab.on { background: var(--c); color: #fff; box-shadow: 0 0 0 2.5px var(--ink), 0 .2em 0 2.5px rgba(91, 63, 55, .4); }
.mg-tab.on small { color: #fff; }
.mg-zk-head { width: 100%; display: flex; gap: 3cqw; align-items: center; text-align: left; background: var(--cl); border-radius: 22px; padding: 2.4cqw 3cqw 2.4cqw 2.4cqw; box-shadow: var(--puff); }
.mg-zk-head img { width: 21cqw; height: 21cqw; flex: none; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px var(--c); }
.mg-zk-head b { display: block; font: 900 clamp(15px, 4.8cqw, 23px)/1.25 var(--body); }
.mg-zk-head p { margin: .3em 0 0; font: 500 clamp(12px, 3.3cqw, 15px)/1.55 var(--body); }
.mg-zk-grid { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6cqw; }
.mg-zk-cell { cursor: pointer; border: 0; background: var(--paper); border-radius: 16px; box-shadow: 0 0 0 2px rgba(91, 63, 55, .22); padding: 1cqw .4cqw 1.4cqw; display: flex; flex-direction: column; align-items: center; gap: .3em; min-height: 44px; }
.mg-zk-cell canvas { width: 100%; height: auto; display: block; }
.mg-zk-cell span { font: 900 12px/1.2 var(--body); letter-spacing: -.06em; text-align: center; overflow-wrap: anywhere; }
.mg-zk-cell.off span { color: #B9AFB2; }
.mg-zk-cell.new { box-shadow: 0 0 0 2.5px #FF7F8E; }
.mg-zk-detail { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 6cqw; background: rgba(255, 240, 232, .8); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.mg-zk-card { width: 100%; background: var(--paper); border-radius: 26px; padding: 4cqw; display: flex; flex-direction: column; align-items: center; gap: 1.8cqw; box-shadow: 0 0 0 4px #fff, 0 0 0 6.5px var(--c, var(--ink)); animation: mgPop .4s cubic-bezier(.34, 1.4, .64, 1) both; }
.mg-zk-card canvas { width: 48cqw; height: 48cqw; }
.mg-zk-job { margin: 0; font: 900 clamp(12px, 3.6cqw, 17px)/1 var(--body); color: #fff; background: var(--c); border-radius: 99px; padding: .4em 1em; }
.mg-zk-name { margin: 0; font: 900 clamp(22px, 7cqw, 36px)/1.2 var(--body); color: #fff; -webkit-text-stroke: .15em var(--ink); paint-order: stroke fill; text-shadow: 0 .1em 0 var(--c), 0 .16em 0 var(--ink); }
.mg-zk-say { margin: 0; font: 900 clamp(13px, 3.9cqw, 18px)/1.4 var(--body); color: var(--ink-s); }
.mg-zk-desc { margin: 0 0 1cqw; text-align: left; font: 500 clamp(13px, 3.8cqw, 17px)/1.75 var(--body); background: #FFF6F0; border-radius: 16px; padding: 2.4cqw 3cqw; }

/* ───── 自己ベスト ───── */
.mg-ranking { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.4cqw; }
.mg-ranking li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2cqw; background: #FFF6F0; border-radius: 18px; padding: 1.2cqw 2.4cqw 1.2cqw 1.2cqw; }
.mg-ranking li .mg-ic { width: 9cqw; height: 9cqw; }
.mg-ranking li b { display: block; font: 900 clamp(14px, 4.2cqw, 20px)/1.2 var(--body); }
.mg-ranking li small { font: 700 clamp(12px, 2.9cqw, 13px)/1.3 var(--body); color: var(--mute); }
.mg-ranking li em { font: 700 clamp(14px, 4.2cqw, 20px)/1 var(--disp); font-style: normal; }
.mg-ranking li.empty { display: block; text-align: center; font: 700 clamp(12px, 3.4cqw, 15px)/1.6 var(--body); color: var(--mute); padding: 3cqw; }
.mg-ranking li.me { box-shadow: 0 0 0 2.5px #FF7F8E; background: #FFF0F3; }
.mg-season-rec { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.2cqw; }
.mg-season-rec li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 2cqw; font: 700 clamp(12px, 3.5cqw, 16px)/1.3 var(--body); padding: .5em .2em; border-bottom: 2px dashed #F0DDD5; }
.mg-season-rec li:last-child { border: 0; }
.mg-season-rec li i { font-style: normal; color: var(--c); font-family: var(--disp); letter-spacing: .08em; margin-right: .4em; }
.mg-season-rec li span { display: flex; gap: .1em; }
.mg-season-rec li span .mg-ic { width: 5cqw; height: 5cqw; }
.mg-season-rec li em { font: 700 1em/1 var(--disp); font-style: normal; min-width: 4.4em; text-align: right; }

/* ───── 一時停止 ───── */
.mg-pause { background: rgba(255, 244, 236, .94); gap: 3.6cqw; }
.mg-pause-head { margin: 0 0 2cqw; font: 700 clamp(40px, 14cqw, 72px)/1 var(--disp); color: #fff; -webkit-text-stroke: .08em var(--ink); paint-order: stroke fill; text-shadow: 0 .08em 0 var(--sakura), 0 .12em 0 var(--ink); }
.mg-pause .mg-btn { min-width: 72cqw; }

/* ───── リザルト ───── */
.mg-result { background: rgba(255, 246, 238, .94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); justify-content: flex-start; overflow-y: auto; gap: 2.4cqw; touch-action: pan-y; padding-top: max(6cqw, env(safe-area-inset-top)); }
.mg-result > * { flex: none; }
.mg-res-head { animation: mgPop .6s cubic-bezier(.34, 1.56, .64, 1) both; }
.mg-res-head .mg-word { width: 78cqw; }
.mg-res-stage { margin: -1cqw 0 0; font: 900 clamp(12px, 3.7cqw, 17px)/1.4 var(--body); color: var(--ink-s); }
.mg-res-stage i { font: 600 max(12px, .9em)/1 var(--disp); font-style: normal; letter-spacing: .12em; color: var(--c); margin-right: .4em; }
.mg-res-score { display: flex; align-items: baseline; gap: .6em; }
.mg-res-score small { font: 600 clamp(12px, 3.2cqw, 15px)/1 var(--disp); letter-spacing: .2em; color: var(--mute); }
.mg-res-score b { font: 700 clamp(34px, 11cqw, 58px)/1 var(--disp); font-variant-numeric: tabular-nums; color: #fff; -webkit-text-stroke: .08em var(--ink); paint-order: stroke fill; text-shadow: 0 .08em 0 #F4A3A3; }
.mg-res-record { margin: -1cqw 0 0; font: 700 clamp(14px, 4.6cqw, 22px)/1 var(--disp); color: #fff; background: linear-gradient(90deg, #FF9DB5, #FFB683); border-radius: 99px; padding: .4em 1.2em; box-shadow: var(--puff); animation: mgPop .5s cubic-bezier(.34, 1.56, .64, 1) 1.3s both; }
.mg-res-missions li { background: var(--paper); box-shadow: 0 0 0 2px rgba(91, 63, 55, .15); }
.mg-res-missions li .mg-ic { transition: transform .3s; }
.mg-res-missions li.done .mg-ic { animation: mgStar .5s cubic-bezier(.34, 1.56, .64, 1) backwards; animation-delay: calc(var(--i) * .3s + .5s); }
@keyframes mgStar { from { transform: scale(0) rotate(-90deg); } }
.mg-res-reach { width: 100%; display: flex; align-items: center; gap: 3cqw; background: var(--paper); border-radius: 22px; padding: 1cqw 3.4cqw 1cqw 1cqw; box-shadow: var(--puff); text-align: left; }
.mg-res-reach canvas { width: 30cqw; height: auto; flex: none; animation: mgBob 2.4s ease-in-out infinite; }
.mg-res-reach small { font: 700 clamp(12px, 3.2cqw, 15px)/1 var(--body); color: var(--mute); }
.mg-res-title { margin: .25em 0; font: 900 clamp(22px, 7.4cqw, 40px)/1.15 var(--body); color: #fff; -webkit-text-stroke: .15em var(--ink); paint-order: stroke fill; text-shadow: 0 .1em 0 var(--job, var(--sakura)), 0 .16em 0 var(--ink); word-break: keep-all; }
.mg-res-step { margin: 0; font: 600 clamp(12px, 3.6cqw, 17px)/1 var(--disp); letter-spacing: .14em; color: var(--mute); }
.mg-res-step b { font-size: 1.5em; color: #D9466A; letter-spacing: 0; }
.mg-res-zukan { margin: 0; font: 900 clamp(12px, 3.6cqw, 17px)/1.4 var(--body); background: #FFF0F3; border-radius: 999px; padding: .5em 1.2em; box-shadow: 0 0 0 2px #FF9DB5; }
.mg-res-rank { width: 100%; background: var(--paper); border-radius: 22px; padding: 2.4cqw 3cqw; box-shadow: var(--puff); }
.mg-res-rank > p { margin: 0 0 1.6cqw; font: 900 clamp(14px, 4.4cqw, 21px)/1.3 var(--body); }
.mg-res-rank > p b { color: #D9466A; font-family: var(--disp); font-size: 1.3em; }
.mg-res-btns { display: flex; flex-direction: column; gap: 3cqw; align-items: center; padding-bottom: 4cqw; }
.mg-res-btns > .mg-btn { min-width: 74cqw; }
.mg-res-btns-top { padding: 1cqw 0; }
.mg-res-btns-top .mg-btn-main { min-width: 82cqw; font-size: clamp(15px, 5cqw, 26px); }
.mg-res-btns-top .mg-row .mg-btn { padding-left: 1em; padding-right: 1em; letter-spacing: 0; }
.mg-res-match { width: 100%; background: var(--paper); border-radius: 24px; padding: 3.6cqw 4cqw; text-align: left; box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px var(--job, var(--ink)), 0 .6em 1.2em rgba(175, 110, 90, .2); }
.mg-res-lead { margin: 0 0 1.6cqw; font: 700 clamp(12px, 3.6cqw, 17px)/1.4 var(--body); color: var(--mute); }
.mg-res-job { display: flex; align-items: center; gap: 3cqw; }
.mg-res-job img { width: 24cqw; height: 24cqw; border-radius: 50%; object-fit: cover; background: #FFF6F0; flex: none; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--job, var(--ink)); }
.mg-res-job > div { min-width: 0; }
.mg-res-type { margin: 0 0 .35em; font: 900 clamp(12px, 3.2cqw, 15px)/1.3 var(--body); color: var(--job, var(--ink)); filter: brightness(.85); }
.mg-res-name { margin: 0; font: 900 clamp(18px, 5.6cqw, 29px)/1.25 var(--body); word-break: keep-all; overflow-wrap: anywhere; }
.mg-res-reason { margin: 2.6cqw 0 1cqw; font: 900 clamp(13px, 3.9cqw, 18px)/1.65 var(--body); background: #FFF6EC; border-radius: 16px; padding: 2cqw 3cqw; }
.mg-res-desc { margin: 1.6cqw 0 2.4cqw; font: 500 clamp(13px, 3.7cqw, 17.5px)/1.75 var(--body); }
.mg-res-barlead { margin: 0 0 1cqw; font: 900 clamp(12px, 3.2cqw, 15px)/1.4 var(--body); }
.mg-res-bars { display: flex; flex-direction: column; gap: 1.2cqw; }
.mg-res-bar { display: grid; grid-template-columns: 9.4em 1fr 3.4em; align-items: center; gap: .8em; font: 700 clamp(12px, 3cqw, 14px)/1 var(--body); }
.mg-res-bar i { height: 1.1em; background: #F3EBEB; border-radius: 999px; overflow: hidden; box-shadow: inset 0 0 0 1.5px rgba(91, 63, 55, .15); }
.mg-res-bar em { display: block; height: 100%; border-radius: inherit; width: 0; transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.mg-res-bar span:last-child { text-align: right; font-family: var(--disp); }
.mg-res-small { margin: 2cqw 0 0; font-size: clamp(12px, 2.8cqw, 13.6px); color: var(--mute); line-height: 1.6; }

.mg-loading { position: absolute; inset: 0; display: grid; place-content: center; gap: 2cqw; justify-items: center; background: var(--cream); font: 600 clamp(12px, 3cqw, 15px)/1 var(--disp); letter-spacing: .3em; transition: opacity .4s; }
.mg-loading i { width: 12cqw; height: 11cqw; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #FFC6D6 60%); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink); animation: mgSquish .6s ease-in-out infinite alternate; }
@keyframes mgSquish { from { transform: translateY(0) scale(1.12, .88); } to { transform: translateY(-5cqw) scale(.94, 1.06); } }
.mg-loading.off { opacity: 0; pointer-events: none; }

/* ───── 専用画像の部品（届いているときだけ。.ui-img は game.js が付ける） ───── */
.ui-img .mg-btn-main, .ui-img .mg-btn-sub {
    background: none; box-shadow: none;
    border-style: solid; border-color: transparent; border-width: 1.05em;
    border-image: url(assets/f_pill_peach.webp) 86 fill / 1.05em stretch;
    padding: 0 1.1em .12em;
    filter: drop-shadow(0 .3em .5em rgba(217, 102, 124, .3));
}
.ui-img .mg-btn-sub { border-image-source: url(assets/f_pill_cream.webp); filter: drop-shadow(0 .25em .4em rgba(175, 110, 90, .22)); }
.ui-img .mg-btn-main:active, .ui-img .mg-btn-sub:active { box-shadow: none; }
.ui-img .mg-btn-s { border-width: .9em; border-image-width: .9em; padding: 0 .5em .1em; }
.ui-img .mg-title-btns .mg-btn-main { padding: 0 2.2em .12em; }
/* 画数の多い漢字の見出しは、白い文字＋太い茶色のふちだとつぶれるので「茶色の文字＋白いふち」にする */
.mg-intro-name, .mg-zk-name, .mg-res-title, .mg-page-title, .mg-cut-name, .mg-h2 {
    color: var(--ink); -webkit-text-stroke: .2em #fff; paint-order: stroke fill;
    text-shadow: 0 .1em 0 var(--c, #FFB0C2), 0 .18em .3em rgba(175, 110, 90, .35);
}
.mg-res-title { text-shadow: 0 .1em 0 var(--job, #FFB0C2), 0 .18em .3em rgba(175, 110, 90, .35); }
.mg-cut-name b { color: var(--ink); }
.ui-img .mg-btn-main { color: #fff; -webkit-text-stroke: .2em #D9506E; paint-order: stroke fill; text-shadow: 0 .1em 0 #B83E5C; }

@media (prefers-reduced-motion: reduce) {
    .mg-logo-wrap, .mg-title-btns .mg-btn-main, .mg-scard-face, .mg-tut canvas, .mg-res-reach canvas, .mg-cut-rays { animation: none; }
}

/* STEP UP TEAM の追加分 */
.mg-dots-more { font: 700 max(12px, .82em)/1 var(--body); color: #D9466A; margin-left: .3em; white-space: nowrap; }