/* TEAM MATCH 作り込み版 — 神戸の制作現場の職種タイル（明るい昼・パステル） */
:root {
    --c-ink: #5B2B3B;          /* 濃い色のフチ */
    --c-ink2: #8A5566;
    --c-mute: #8C6A76;
    --c-base: #FFF6EC;
    --c-white: #FFFDF8;
    --c-pink: #FF7FB8;
    --c-pink-l: #FFD3E6;
    --c-red: #F0435A;
    --c-red-d: #C42346;
    --c-blue: #2E9BFF;
    --c-purple: #9A5CF6;
    --c-gold: #FFC23C;
    --c-mint: #2CC79A;
    --f-en: "Fredoka", "M PLUS Rounded 1c", sans-serif;
    --f-ja: "M PLUS Rounded 1c", "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: #FFEAF2; color: var(--c-ink);
    font-family: var(--f-ja); font-weight: 700;
    touch-action: none; user-select: none; -webkit-user-select: none; overscroll-behavior: none;
}
button { font: inherit; color: inherit; }
.m3-backdrop {
    position: fixed; inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .9) 0 6%, transparent 7%) 0 0 / 120px 120px,
        radial-gradient(circle at 70% 60%, rgba(255, 194, 60, .25) 0 5%, transparent 6%) 0 0 / 150px 150px,
        repeating-linear-gradient(135deg, #FFE3EE 0 28px, #FFF1F6 28px 56px);
}
.m3-stage {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
    overflow: hidden; background: var(--c-base);
    border-radius: 24px;
    box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--c-pink-l), 0 30px 80px rgba(150, 60, 90, .28);
    container-type: size;
}
.m3-stage.m3-full { border-radius: 0; box-shadow: none; }
.m3-stage [hidden] { display: none !important; }
.m3-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.m3-stage canvas.m3-fly { pointer-events: none; z-index: 5; }

/* ───── 飾り文字（白の太フチ＋濃い影＋グラデーション） ───── */
.m3-deco { position: relative; display: inline-block; margin: 0; font-family: var(--f-en); font-weight: 700; line-height: 1.05; white-space: nowrap; letter-spacing: .01em; }
.m3-deco::before {
    content: attr(data-t); position: absolute; left: 0; top: 0;
    color: #fff; -webkit-text-stroke: .22em #fff;
    filter: drop-shadow(0 .08em 0 var(--c-ink)) drop-shadow(0 .18em .14em rgba(150, 60, 90, .25));
}
.m3-deco > span {
    position: relative; display: inline-block;
    background: linear-gradient(180deg, #FFB3D4 0%, #FF6FA8 45%, #F0435A 55%, #FF8FBF 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    -webkit-text-stroke: .04em var(--c-ink);
}
.m3-deco.gold > span { background-image: linear-gradient(180deg, #FFF3A6 0%, #FFD23F 45%, #FFA21E 55%, #FFD86B 100%); }
.m3-deco.blue > span { background-image: linear-gradient(180deg, #B8E6FF 0%, #5DB8FF 45%, #2E7BFF 55%, #9A5CF6 100%); }

/* ───── ボタン（赤と白） ───── */
.m3-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4em;
    cursor: pointer; text-decoration: none; min-height: 44px;
    font: 800 clamp(14px, 4.4cqw, 22px)/1.2 var(--f-ja); letter-spacing: .06em; word-break: keep-all;
    border-radius: 999px; padding: .7em 2em .75em;
    transition: transform .12s, filter .12s;
}
.m3-btn:active { transform: scale(.94); }
.m3-btn-main {
    color: #fff; border: 3px solid var(--c-ink);
    background: linear-gradient(180deg, #FF9CC6 0%, #FF5C8D 45%, #F0435A 55%, #FF6F96 100%);
    box-shadow: inset 0 .25em 0 rgba(255, 255, 255, .55), inset 0 -.2em 0 rgba(150, 20, 60, .25), 0 .3em 0 var(--c-ink), 0 .7em 1.2em rgba(240, 67, 90, .3);
    text-shadow: 0 .08em 0 rgba(120, 20, 50, .5);
}
.m3-btn-sub {
    color: var(--c-ink); border: 3px solid var(--c-ink);
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF6EC 55%, #FFE6EF 100%);
    box-shadow: inset 0 .2em 0 #fff, 0 .28em 0 var(--c-ink);
}
.m3-btn-s { font-size: clamp(12px, 3.5cqw, 17px); padding: .55em 1.2em .6em; }
.m3-btn[disabled] { filter: grayscale(1) opacity(.5); cursor: default; }
.m3-row { display: flex; gap: 2.4cqw; justify-content: center; flex-wrap: wrap; }
.m3-link { color: var(--c-ink); font: 700 clamp(12px, 3.4cqw, 15px)/1 var(--f-ja); }
.m3-link-btn { background: none; border: 0; padding: .6em; min-height: 44px; text-decoration: underline; cursor: pointer; }
.m3-mini { cursor: pointer; border: 2px solid var(--c-ink); background: #fff; border-radius: 999px; padding: .3em .9em; min-height: 36px; font: 800 clamp(11px, 3.2cqw, 15px)/1 var(--f-ja); }
/* 届いた絵を使うときの枠 */
.art-btn .m3-btn-main { border: 0; border-image: url(assets/btn_main.webp) 40% 30% fill / 1.1em 2.2em stretch; background: none; box-shadow: 0 .5em .8em rgba(240, 67, 90, .25); }
/* 白いボタンは、画像を伸ばすと縁にピンクの点が出るため、コードの描き方のまま使う */

.m3-chip {
    display: inline-flex; align-items: center; gap: .3em; white-space: nowrap;
    background: #fff; border: 2.5px solid var(--c-ink); border-radius: 999px; padding: .3em .8em .3em .45em;
    font: 700 clamp(12px, 3.6cqw, 18px)/1 var(--f-en); box-shadow: 0 .18em 0 var(--c-ink);
}
.m3-chip small { font: 700 .72em/1 var(--f-ja); color: var(--c-mute); }
.m3-coin-ico { width: 1.4em; height: 1.4em; display: block; }

/* ───── 画面の共通 ───── */
.m3-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)) 5cqw max(4cqw, env(safe-area-inset-bottom));
    text-align: center;
}
.m3-screen.enter { animation: m3ScreenIn .4s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes m3ScreenIn { from { opacity: 0; transform: scale(1.04); } }
.m3-scroll { justify-content: flex-start; overflow-y: auto; touch-action: pan-y; }
.m3-scroll > * { flex: none; }
.m3-topbar { width: 100%; display: flex; align-items: center; gap: 2cqw; }
.m3-back {
    flex: none; width: max(44px, 11cqw); height: max(44px, 11cqw); border-radius: 50%; cursor: pointer;
    background: #fff; border: 3px solid var(--c-ink); box-shadow: 0 .2em 0 var(--c-ink);
    font: 700 max(22px, 6cqw)/1 var(--f-en); padding-bottom: .12em;
}
.m3-screen-title { flex: 1; margin: 0; text-align: left; font: 800 clamp(16px, 5cqw, 26px)/1.1 var(--f-ja); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m3-head { font-size: clamp(30px, 10cqw, 54px); font-family: var(--f-ja); font-weight: 800; }

/* ───── HUD ───── */
.m3-hud {
    position: absolute; left: 3cqw; right: 3cqw; top: 2cqw; height: 11.6cqw; z-index: 3;
    display: flex; align-items: center; gap: 2cqw; pointer-events: none;
    font-size: clamp(10px, 3.3cqw, 17px);
}
.m3-moves, .m3-scorebox {
    height: 100%; background: #fff; border: 3px solid var(--c-ink); border-radius: 18px; box-shadow: 0 .25em 0 var(--c-ink);
}
.m3-moves { flex: none; width: 24cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1em; background: linear-gradient(180deg, #FFF 0%, #FFEAF2 100%); }
.m3-moves small { font: 800 .72em/1 var(--f-ja); color: var(--c-mute); }
.m3-moves b { font: 700 2.3em/1 var(--f-en); color: var(--c-red-d); font-variant-numeric: tabular-nums; }
.m3-moves.low b { animation: m3Throb .6s ease-in-out infinite; color: #E11D48; }
.m3-moves.bump b { animation: m3Bump .3s ease; }
@keyframes m3Throb { 50% { transform: scale(1.18); } }
@keyframes m3Bump { 40% { transform: scale(1.32); } }
.m3-scorebox { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: .35em; padding: 0 3cqw; }
.m3-score-row { display: flex; align-items: baseline; gap: .6em; }
.m3-score-row small { font: 700 .7em/1 var(--f-en); letter-spacing: .14em; color: var(--c-mute); }
.m3-score-row b { font: 700 1.6em/1 var(--f-en); font-variant-numeric: tabular-nums; }
.m3-progbar { position: relative; height: 1.1em; }
.m3-progbar i { position: absolute; left: 0; right: 0; top: .2em; height: .7em; border-radius: 999px; background: #F6E4EA; overflow: hidden; border: 2px solid var(--c-ink); }
.m3-progbar em { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #FFD23F, #FF7FB8); transition: width .3s; }
.m3-progbar span { position: absolute; top: -.32em; transform: translateX(-50%); font-size: 1.3em; line-height: 1; color: #E9D5DC; -webkit-text-stroke: 1.5px var(--c-ink); transition: color .3s, transform .3s; }
.m3-progbar span.on { color: var(--c-gold); transform: translateX(-50%) scale(1.2); }
.m3-icon {
    pointer-events: auto; cursor: pointer; flex: none;
    width: max(44px, 11.6cqw); height: 100%; border-radius: 18px;
    background: #fff; border: 3px solid var(--c-ink); box-shadow: 0 .25em 0 var(--c-ink);
    font: 700 1.3em/1 var(--f-en);
}

/* お題 */
.m3-goals {
    position: absolute; left: 3cqw; right: 3cqw; top: 15cqw; height: max(23.3cqw, 114px); z-index: 3;
    background: linear-gradient(180deg, #FFFFFF, #FFF3F7); border: 3px solid var(--c-ink); border-radius: 20px;
    box-shadow: 0 .3em 0 var(--c-ink);
    padding: 1.2cqw 1.8cqw 1.4cqw; display: flex; flex-direction: column; gap: .8cqw; pointer-events: none;
}
.m3-goals-head { margin: 0; display: flex; align-items: center; gap: .6em; font: 800 clamp(10px, 3cqw, 15px)/1.2 var(--f-ja); white-space: nowrap; overflow: hidden; }
.m3-goals-head b { flex: none; color: #fff; background: var(--c-red); border: 2px solid var(--c-ink); border-radius: 999px; padding: .15em .7em .2em; font: 700 1em/1.2 var(--f-en); letter-spacing: .06em; }
.m3-goals-head span { overflow: hidden; text-overflow: ellipsis; }
.m3-goal-row { flex: 1; display: flex; gap: 1.2cqw; justify-content: center; min-height: 0; }
.m3-goal {
    position: relative; flex: 1 1 0; max-width: 22.5cqw; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3cqw;
    padding: .6cqw .4cqw; border-radius: 14px;
    background: color-mix(in srgb, var(--c) 13%, #fff); border: 2px solid color-mix(in srgb, var(--c) 50%, #fff);
}
.m3-goal-ico { position: relative; width: 8.4cqw; height: 8.4cqw; flex: none; }
.m3-goal-ico > img { width: 100%; height: 100%; display: block; object-fit: contain; }
.m3-goal-ico > img.face { border-radius: 50%; object-fit: cover; background: #fff; border: 2px solid var(--c); }
.m3-goal-ico .badge { position: absolute; right: -2.4cqw; bottom: -.8cqw; width: 5.6cqw; height: 5.6cqw; border: 0; background: none; filter: drop-shadow(0 1px 2px rgba(91, 43, 59, .35)); }
.m3-goal-name { margin: 0; font: 800 clamp(8px, 2.4cqw, 12px)/1.1 var(--f-ja); color: color-mix(in srgb, var(--c) 60%, #5B2B3B); white-space: nowrap; }
.m3-goal-num { margin: 0; display: flex; align-items: baseline; gap: .15em; white-space: nowrap; }
.m3-goal-num small { font: 700 clamp(8px, 2.1cqw, 11px)/1 var(--f-ja); color: var(--c-mute); }
.m3-goal-num b { font: 700 clamp(14px, 4.6cqw, 25px)/1 var(--f-en); font-variant-numeric: tabular-nums; }
.m3-goal-ok {
    position: absolute; right: .5cqw; top: .4cqw; width: 4.8cqw; height: 4.8cqw; border-radius: 50%;
    display: grid; place-content: center; font: 700 3.2cqw/1 var(--f-en); font-style: normal;
    color: #fff; background: var(--c-mint); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--c-ink);
    transform: scale(0); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.m3-goal.done .m3-goal-ok { transform: scale(1); }
.m3-goal.done .m3-goal-num { opacity: .35; }
.m3-goal.pop .m3-goal-ico { animation: m3GoalPop .28s ease; }
@keyframes m3GoalPop { 40% { transform: scale(1.2); } }

/* 下の段（吹き出し・メンバー・道具） */
.m3-bottom { position: absolute; left: 2.4cqw; right: 2.4cqw; top: 150cqw; height: 30cqw; z-index: 3; display: flex; flex-direction: column; gap: 1cqw; pointer-events: none; }
.m3-say {
    position: relative; margin: 0; height: 9cqw; flex: none;
    display: flex; align-items: center; gap: 1.6cqw;
    background: #fff; border: 3px solid var(--c-ink); border-radius: 16px; padding: 0 2.6cqw 0 1cqw;
    box-shadow: 0 .22em 0 var(--c-ink);
    font: 700 clamp(10px, 3.1cqw, 15px)/1.4 var(--f-ja); text-align: left; line-break: strict;
}
.m3-say img { width: 6.8cqw; height: 6.8cqw; flex: none; border-radius: 50%; object-fit: cover; border: 2px solid var(--c-ink); background: var(--c-base); }
.m3-say span { flex: 1; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.m3-say b { color: var(--c-red-d); }
.m3-say.on { animation: m3In .32s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes m3In { from { opacity: 0; transform: translateY(-1.5cqw) scale(.97); } }
.m3-bot-row { flex: 1; display: flex; gap: 1.6cqw; align-items: flex-end; min-height: 0; }
.m3-crew { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: space-between; position: relative; }
.m3-crew::after { content: ""; position: absolute; left: -1cqw; right: -1cqw; bottom: 0; height: 4cqw; border-radius: 12px 12px 0 0; background: linear-gradient(180deg, #FFD3E6, #FFB7D3); border: 3px solid var(--c-ink); border-bottom: 0; z-index: 2; }
.m3-mate { position: relative; width: 25%; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.m3-mate img { width: 112%; height: 112%; object-fit: contain; object-position: center bottom; transform-origin: 50% 100%; transition: transform .2s; margin-bottom: -.5cqw; }
.m3-mate img.face { position: relative; z-index: 3; width: 88%; height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 3px solid var(--c); background: #fff; margin-bottom: 4.6cqw; box-shadow: 0 .25em 0 var(--c-ink); }
.m3-mate.p-cheer img { animation: m3Cheer .5s ease-in-out 2; }
.m3-mate.p-win img { animation: m3Cheer .6s ease-in-out infinite; }
.m3-mate.p-worried img { animation: m3Worry 1.2s ease-in-out infinite; }
.m3-mate.p-idle img { animation: m3Idle 2.4s ease-in-out infinite; }
.m3-mate:nth-child(2) img { animation-delay: -.6s; }
.m3-mate:nth-child(3) img { animation-delay: -1.2s; }
.m3-mate:nth-child(4) img { animation-delay: -1.8s; }
@keyframes m3Cheer { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-4cqw) scale(1.06, .96); } 60% { transform: translateY(-4cqw) rotate(-3deg); } }
@keyframes m3Worry { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-.6cqw) rotate(-2deg); } 75% { transform: translateX(.6cqw) rotate(2deg); } }
@keyframes m3Idle { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-.6cqw) scaleY(1.015); } }
.m3-boosts { flex: none; display: flex; gap: 1.2cqw; padding-bottom: .4cqw; }
.m3-boost {
    pointer-events: auto; cursor: pointer; position: relative;
    width: max(44px, 12.6cqw); height: max(44px, 12.6cqw); border-radius: 20px; padding: 0;
    background: linear-gradient(180deg, #FFFFFF, #FFE9F1); border: 3px solid var(--c-ink); box-shadow: 0 .22em 0 var(--c-ink);
    display: grid; place-items: center;
}
.m3-boost img { width: 78%; height: 78%; object-fit: contain; }
.m3-boost b { position: absolute; right: -1cqw; top: -1.2cqw; min-width: 5cqw; height: 5cqw; padding: 0 .3em; border-radius: 999px; display: grid; place-content: center; background: var(--c-red); color: #fff; border: 2px solid var(--c-ink); font: 700 clamp(10px, 3cqw, 14px)/1 var(--f-en); }
.m3-boost.zero b { background: #fff; color: var(--c-ink); }
.m3-boost.zero b::before { content: "+"; }
.m3-boost.zero b > span { display: none; }
.m3-boost.on { background: linear-gradient(180deg, #FFF3A6, #FFC23C); animation: m3Throb .7s ease-in-out infinite; }
.m3-boost:active { transform: scale(.93); }
.m3-boostmode {
    position: absolute; left: 6cqw; right: 6cqw; top: 40cqw; z-index: 6;
    display: flex; align-items: center; justify-content: space-between; gap: 2cqw;
    background: #FFF3A6; border: 3px solid var(--c-ink); border-radius: 999px; padding: .6em .7em .6em 1.2em;
    font: 800 clamp(11px, 3.4cqw, 16px)/1.3 var(--f-ja); box-shadow: 0 .22em 0 var(--c-ink);
    animation: m3In .3s ease;
}

/* ───── 告知 ───── */
.m3-banner {
    position: absolute; left: 0; right: 0; top: 44%; z-index: 7;
    display: flex; flex-direction: column; align-items: center; gap: .3em;
    pointer-events: none; animation: m3Banner 1.7s ease forwards;
}
.m3-banner small { font: 700 clamp(11px, 3.4cqw, 17px)/1 var(--f-en); letter-spacing: .24em; color: #fff; background: var(--c-red); padding: .45em 1em; border-radius: 999px; border: 2px solid var(--c-ink); }
.m3-banner small:empty { display: none; }
.m3-banner b {
    font: 800 clamp(28px, 10.5cqw, 58px)/1.15 var(--f-ja); letter-spacing: .02em;
    color: #fff; -webkit-text-stroke: .08em var(--c-ink); paint-order: stroke fill;
    text-shadow: 0 .09em 0 var(--c-ink), 0 .2em .3em rgba(150, 60, 90, .3);
}
@keyframes m3Banner { 0% { opacity: 0; transform: scale(1.6); } 14% { opacity: 1; transform: scale(1); } 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.9) translateY(-4cqw); } }

/* ───── タイトル ───── */
.m3-title {
    justify-content: flex-end; gap: 2.2cqw; padding-bottom: max(4cqw, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(255, 246, 236, 0) 0%, rgba(255, 246, 236, .15) 36%, rgba(255, 246, 236, .85) 58%, rgba(255, 246, 236, .97) 70%);
}
.m3-logo-wrap { margin-bottom: auto; margin-top: 10cqw; width: 88cqw; display: flex; justify-content: center; }
.m3-logo { width: 88cqw; height: auto; filter: drop-shadow(0 1.4cqw 2cqw rgba(150, 60, 90, .25)); animation: m3Float 3.2s ease-in-out infinite; }
@keyframes m3Float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-1.6cqw) rotate(1deg); } }
.m3-logo-text { display: none; flex-direction: column; align-items: center; animation: m3Float 3.2s ease-in-out infinite; }
.m3-nologo .m3-logo-text { display: flex; }
.m3-lt-team { font-size: 13cqw; transform: rotate(-4deg); }
.m3-lt-team > span { background-image: linear-gradient(180deg, #B8E6FF 0%, #5DB8FF 45%, #2E7BFF 55%, #9A5CF6 100%); }
.m3-lt-match { font-size: 21cqw; transform: rotate(-4deg); margin-top: -2cqw; }
.m3-lt-ja {
    margin-top: 1.2cqw; font: 800 5cqw/1 var(--f-ja); letter-spacing: .3em; padding: .45em .6em .45em .9em;
    color: #fff; background: linear-gradient(180deg, #FF8FBF, #F0435A); border: 3px solid var(--c-ink); border-radius: 999px; transform: rotate(-3deg);
    box-shadow: 0 .22em 0 var(--c-ink);
}
.m3-title-crew { display: flex; justify-content: center; gap: 1cqw; width: 100%; height: 26cqw; margin-bottom: -1cqw; }
.m3-title-crew img { height: 100%; width: 22cqw; object-fit: contain; object-position: center bottom; animation: m3Hop 1.4s ease-in-out infinite; transform-origin: 50% 100%; }
.m3-title-crew img.face { width: 19cqw; height: 19cqw; align-self: flex-end; border-radius: 50%; object-fit: cover; border: 3px solid var(--c-ink); background: #fff; }
.m3-title-crew img:nth-child(2) { animation-delay: .2s; }
.m3-title-crew img:nth-child(3) { animation-delay: .4s; }
.m3-title-crew img:nth-child(4) { animation-delay: .6s; }
@keyframes m3Hop { 0%, 60%, 100% { transform: translateY(0) scale(1); } 30% { transform: translateY(-3cqw) scale(1.04, .97); } }
.m3-catch { margin: 0; font: 800 clamp(14px, 4.3cqw, 23px)/1.5 var(--f-ja); letter-spacing: .03em; word-break: keep-all; text-shadow: 0 0 .3em #fff, 0 0 .6em #fff; }
.m3-title-btns { display: flex; flex-direction: column; gap: 2.6cqw; align-items: center; }
.m3-title-btns > .m3-btn-main { font-size: clamp(18px, 6.4cqw, 32px); padding: .5em 2.8em .55em; animation: m3Pulse 1.6s ease-in-out infinite; }
@keyframes m3Pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.m3-title-stats { display: flex; gap: 2.4cqw; justify-content: center; }
.m3-note { margin: 0; font: 700 clamp(10px, 2.9cqw, 13px)/1.6 var(--f-ja); color: var(--c-mute); word-break: keep-all; }
.m3-demo-tag {
    position: absolute; top: max(3cqw, env(safe-area-inset-top)); left: 3cqw;
    font: 700 clamp(10px, 2.8cqw, 14px)/1 var(--f-en); letter-spacing: .2em;
    background: var(--c-ink); color: #fff; padding: .6em 1em; border-radius: 999px;
}
.m3-demo-tag::before { content: ""; display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: var(--c-pink); margin-right: .6em; animation: m3Blink 1s steps(2) infinite; }
@keyframes m3Blink { 50% { opacity: 0; } }
.m3-sound {
    position: absolute; top: max(3cqw, env(safe-area-inset-top)); right: 3cqw; z-index: 2;
    cursor: pointer; min-height: 44px; min-width: 44px; border-radius: 999px; padding: .4em 1em;
    background: #fff; border: 3px solid var(--c-ink); box-shadow: 0 .2em 0 var(--c-ink); font: 700 clamp(11px, 3.2cqw, 15px)/1 var(--f-en);
}

/* ───── 案件ボード（章ごとの列に、案件のカードを並べる） ───── */
.m3-map { justify-content: flex-start; gap: 1.6cqw; padding-left: 3cqw; padding-right: 3cqw; }
.m3-map-area { position: relative; flex: 1; width: 100%; min-height: 0; }
.m3-board { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: none; }
.m3-board::-webkit-scrollbar { display: none; }
.m3-lanes { display: flex; flex-direction: column; gap: 2.4cqw; padding: .5cqw .5cqw 3cqw; }
.m3-lane {
    position: relative; background: #FFFFFF; border: 3px solid var(--c-ink); border-radius: 18px;
    box-shadow: 0 .25em 0 var(--c-ink); padding: 0 2cqw 2cqw; overflow: hidden;
    background-image: linear-gradient(rgba(46, 155, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(46, 155, 255, .07) 1px, transparent 1px);
    background-size: 4cqw 4cqw;
}
.m3-lane-head {
    margin: 0 -2cqw 1.8cqw; padding: 1.2cqw 2.4cqw; display: flex; align-items: baseline; gap: 1.6cqw;
    background: var(--sc); color: #fff; border-bottom: 3px solid var(--c-ink);
    font: 800 max(13px, 3.8cqw)/1.2 var(--f-ja); text-shadow: 0 .08em 0 rgba(91, 43, 59, .45); white-space: nowrap;
}
.m3-lane-head small { font: 700 max(12px, 2.8cqw)/1 var(--f-en); letter-spacing: .1em; opacity: .95; }
.m3-lane-head span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.m3-lane-head em { font: 800 max(12px, 2.8cqw)/1 var(--f-ja); font-style: normal; background: rgba(255, 255, 255, .92); color: var(--c-ink); border-radius: 999px; padding: .35em .7em; text-shadow: none; }
.m3-lane-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; }
.m3-job {
    position: relative; cursor: pointer; text-align: left; min-height: 44px;
    display: flex; flex-direction: column; gap: .7cqw; padding: 1.6cqw 2cqw 1.6cqw 3.2cqw;
    background: #FFFDF5; border: 2.5px solid var(--c-ink); border-radius: 10px; box-shadow: 0 .18em 0 var(--c-ink);
    font: 700 max(12px, 3cqw)/1.3 var(--f-ja); color: var(--c-ink);
}
.m3-job::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1.4cqw; background: var(--sc); border-radius: 8px 0 0 8px; }
.m3-job .no { font: 700 max(12px, 2.7cqw)/1 var(--f-en); color: var(--c-mute); letter-spacing: .06em; }
.m3-job .nm { font: 800 max(12px, 3.2cqw)/1.25 var(--f-ja); min-height: 2.5em; }
.m3-job .meta { display: flex; align-items: center; justify-content: space-between; gap: 1cqw; }
.m3-job .st { font: 800 max(12px, 2.6cqw)/1 var(--f-ja); font-style: normal; border-radius: 999px; padding: .3em .6em; background: #F1E8EE; color: var(--c-mute); white-space: nowrap; }
.m3-job .days { font: 700 max(12px, 2.5cqw)/1 var(--f-ja); color: var(--c-mute); }
.m3-job .pad { width: 5cqw; height: 5cqw; }
.m3-job.done .st { background: #2CC79A; color: #fff; }
.m3-job.next { background: #FFF6D6; animation: m3JobNext 1.2s ease-in-out infinite; }
.m3-job.next .st { background: var(--c-red); color: #fff; }
.m3-job.open .st { background: #2E9BFF; color: #fff; }
.m3-job.lock { cursor: default; background: #F6F2F5; color: #9C8592; box-shadow: 0 .18em 0 #C9B6C0; border-color: #B59EAA; }
.m3-job.lock::before { background: #D8CBE2; }
.m3-job.big { grid-column: 1 / -1; }
.m3-job:active { transform: translateY(.15em); box-shadow: 0 .05em 0 var(--c-ink); }
@keyframes m3JobNext { 50% { transform: translateY(-.5cqw); box-shadow: 0 .35em 0 var(--c-ink); } }
.m3-map-foot { width: 100%; display: flex; gap: 1.6cqw; justify-content: center; padding-bottom: .5cqw; }
.m3-map-foot .m3-btn { flex: 1; padding-left: .4em; padding-right: .4em; letter-spacing: 0; }

/* ───── ポップアップ ───── */
.m3-modal {
    position: absolute; inset: 0; z-index: 20;
    display: flex; align-items: center; justify-content: center; padding: 5cqw;
    background: rgba(255, 220, 232, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    animation: m3Fade .2s ease;
}
@keyframes m3Fade { from { opacity: 0; } }
.m3-panel {
    width: 100%; max-height: 100%; overflow-y: auto; touch-action: pan-y;
    background: linear-gradient(180deg, #FFFFFF, #FFF6EC); border: 4px solid var(--c-ink); border-radius: 26px;
    box-shadow: 0 0 0 5px #fff inset, 0 .4em 0 var(--c-ink), 0 1em 2em rgba(150, 60, 90, .25);
    padding: 5cqw 5cqw 4cqw; text-align: center;
    animation: m3Pop .35s cubic-bezier(.34, 1.56, .64, 1);
}
.art-panel .m3-panel { border: 6cqw solid transparent; border-image: url(assets/panel.webp) 22% fill / 7cqw stretch; background: none; box-shadow: none; padding: 1cqw 2cqw 1cqw; filter: drop-shadow(0 1em 1.6em rgba(150, 60, 90, .22)); }
@keyframes m3Pop { from { opacity: 0; transform: scale(.8); } }
.m3-panel-head { font-size: clamp(28px, 9.5cqw, 50px); margin-bottom: 2cqw; }
.m3-modal-btns { display: flex; flex-direction: column; gap: 2.6cqw; align-items: center; margin-top: 3cqw; }
.m3-modal-btns .m3-btn { min-width: 62cqw; }
.m3-intro-ch { margin: 0; font: 800 clamp(10px, 3cqw, 14px)/1.3 var(--f-ja); color: var(--c-mute); }
.m3-intro-no { margin: .4em 0 0; font: 700 clamp(14px, 4.4cqw, 22px)/1 var(--f-en); letter-spacing: .16em; color: var(--c-red-d); }
.m3-intro-name { margin: .3em 0 .8em; font: 800 clamp(18px, 6cqw, 30px)/1.3 var(--f-ja); word-break: keep-all; }
.m3-intro-gim { display: flex; align-items: center; gap: 3cqw; text-align: left; background: #FFF3A6; border: 2.5px solid var(--c-ink); border-radius: 16px; padding: 2cqw 3cqw; margin-bottom: 2.4cqw; }
.m3-intro-gim img { width: 15cqw; height: 15cqw; flex: none; object-fit: contain; }
.m3-intro-gim p { margin: 0; font: 700 clamp(11px, 3.4cqw, 16px)/1.55 var(--f-ja); }
.m3-intro-gim p b { display: block; color: var(--c-red-d); font-size: 1.1em; }
.m3-sub-head { margin: 0 0 1.4cqw; font: 800 clamp(12px, 3.6cqw, 17px)/1 var(--f-ja); }
.m3-sub-head small { color: var(--c-mute); margin-left: .5em; }
.m3-intro-goals { display: flex; justify-content: center; gap: 2cqw; flex-wrap: wrap; margin-bottom: 2.6cqw; }
.m3-intro-goals div { display: flex; flex-direction: column; align-items: center; gap: .2em; font: 700 clamp(14px, 4.4cqw, 22px)/1 var(--f-en); }
.m3-intro-goals img { width: 12cqw; height: 12cqw; object-fit: contain; }
.m3-intro-goals img.face { border-radius: 50%; object-fit: cover; border: 2px solid var(--c-ink); background: #fff; }
.m3-intro-goals small { font: 700 clamp(9px, 2.6cqw, 12px)/1 var(--f-ja); color: var(--c-mute); }
.m3-missions { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 1.2cqw; }
.m3-missions li { display: flex; align-items: center; gap: 2cqw; background: #fff; border: 2px solid #F1D9E2; border-radius: 999px; padding: .4em 1em .4em .5em; text-align: left; font: 700 clamp(11px, 3.4cqw, 16px)/1.3 var(--f-ja); }
.m3-missions li i { font-style: normal; font-size: 1.4em; line-height: 1; color: #EBD9DF; -webkit-text-stroke: 1.5px var(--c-ink); flex: none; }
.m3-missions li.done i { color: var(--c-gold); }
.m3-missions li.fresh i { animation: m3Check .6s cubic-bezier(.34, 1.56, .64, 1) backwards; }
.m3-missions li span { flex: 1; }
.m3-missions li b { font: 700 .8em/1 var(--f-en); color: #fff; background: var(--c-red); border-radius: 999px; padding: .35em .6em; }
@keyframes m3Check { from { transform: scale(0) rotate(-120deg); } }
.m3-intro-best { margin: 2cqw 0 0; font: 700 clamp(11px, 3.2cqw, 15px)/1 var(--f-ja); color: var(--c-mute); }
.m3-shop-coins { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4em; margin: 0 0 3cqw; font: 700 clamp(18px, 6cqw, 30px)/1 var(--f-en); }
.m3-shop-coins small { flex-basis: 100%; font: 700 clamp(10px, 3cqw, 13px)/1.4 var(--f-ja); color: var(--c-mute); }
.m3-shop-list { display: flex; flex-direction: column; gap: 2cqw; }
.m3-shop-item { display: flex; align-items: center; gap: 2.6cqw; text-align: left; background: #fff; border: 2.5px solid var(--c-ink); border-radius: 18px; padding: 2cqw 2.6cqw; }
.m3-shop-item img { width: 14cqw; height: 14cqw; flex: none; object-fit: contain; }
.m3-shop-item div { flex: 1; min-width: 0; }
.m3-shop-item p { margin: 0; font: 700 clamp(10px, 3cqw, 14px)/1.45 var(--f-ja); color: var(--c-mute); }
.m3-shop-item p b { display: block; color: var(--c-ink); font-size: 1.15em; }
.m3-shop-item p em { font-style: normal; color: var(--c-red-d); }
.m3-shop-item .m3-btn { flex: none; padding: .45em .9em .5em; font-size: clamp(12px, 3.6cqw, 17px); gap: .25em; }
.m3-shop-item .m3-btn img { width: 1.3em; height: 1.3em; }
.m3-cont-text { margin: 0; font: 700 clamp(13px, 4cqw, 19px)/1.6 var(--f-ja); }
.m3-cont-text b { color: var(--c-red-d); }

/* ───── あそびかた ───── */
.m3-howto { background: linear-gradient(180deg, rgba(255, 243, 247, .96), rgba(255, 246, 236, .97)); gap: 2.4cqw; }
.m3-how { width: 100%; display: flex; flex-direction: column; gap: 2cqw; }
.m3-how-card { display: flex; align-items: center; gap: 3cqw; text-align: left; background: #fff; border: 3px solid var(--c-ink); border-radius: 18px; padding: 2cqw 3cqw; box-shadow: 0 .25em 0 var(--c-ink); animation: m3In .4s ease backwards; }
.m3-how-card:nth-child(2) { animation-delay: .05s; } .m3-how-card:nth-child(3) { animation-delay: .1s; } .m3-how-card:nth-child(4) { animation-delay: .15s; } .m3-how-card:nth-child(5) { animation-delay: .2s; } .m3-how-card:nth-child(6) { animation-delay: .25s; }
.m3-how-art { flex: none; width: 27cqw; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6cqw; }
.m3-how-art img { width: 8.4cqw; height: 8.4cqw; object-fit: contain; }
.m3-how-art img.big { width: 12cqw; height: 12cqw; }
.m3-how-art img.face { border-radius: 50%; border: 2px solid var(--c-ink); object-fit: cover; background: #fff; }
.m3-how-art span { font: 700 3.6cqw/1 var(--f-en); color: var(--c-red-d); }
.m3-how-card p { margin: 0; font: 700 clamp(11px, 3.4cqw, 16px)/1.55 var(--f-ja); line-break: strict; }
.m3-how-card p b { color: var(--c-red-d); }
.m3-how-card p small { display: block; font-weight: 500; color: var(--c-mute); font-size: .9em; margin-top: .2em; }

/* ───── 職種図鑑 ───── */
.m3-zukan { background: linear-gradient(180deg, rgba(255, 243, 247, .97), rgba(255, 246, 236, .98)); gap: 2.4cqw; }
.m3-zukan-lead { margin: 0; font: 700 clamp(11px, 3.3cqw, 15px)/1.5 var(--f-ja); color: var(--c-mute); }
.m3-zukan-tabs { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6cqw; }
.m3-ztab { cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .3em; padding: 1.4cqw .4cqw; min-height: 44px; border-radius: 16px; background: #fff; border: 2.5px solid var(--c-ink); box-shadow: 0 .2em 0 var(--c-ink); font: 800 clamp(9px, 2.7cqw, 13px)/1.2 var(--f-ja); }
.m3-ztab img { width: 13cqw; height: 13cqw; border-radius: 50%; object-fit: cover; border: 2px solid var(--c); background: var(--c-base); }
.m3-ztab small { font: 700 .9em/1 var(--f-en); color: var(--c-mute); }
.m3-ztab.on { background: color-mix(in srgb, var(--c) 18%, #fff); transform: translateY(-.6cqw); box-shadow: 0 .35em 0 var(--c-ink); }
.m3-zukan-body { width: 100%; display: flex; flex-direction: column; gap: 2.4cqw; padding-bottom: 4cqw; }
.m3-zhead { display: flex; align-items: center; gap: 3cqw; text-align: left; background: #fff; border: 3px solid var(--c-ink); border-radius: 20px; padding: 2.4cqw 3cqw; box-shadow: 0 .25em 0 var(--c-ink); }
.m3-zhead img { width: 26cqw; height: 26cqw; flex: none; object-fit: contain; object-position: center bottom; }
.m3-zhead img.face { width: 22cqw; height: 22cqw; border-radius: 50%; object-fit: cover; border: 3px solid var(--c); background: var(--c-base); }
.m3-zhead h3 { margin: 0; font: 800 clamp(17px, 5.4cqw, 28px)/1.25 var(--f-ja); }
.m3-zhead p { margin: .3em 0 0; font: 700 clamp(10px, 3cqw, 14px)/1.4 var(--f-ja); color: var(--c-mute); }
.m3-zhead .bar { margin-top: 1.4cqw; height: 2.2cqw; border-radius: 999px; background: #F6E4EA; border: 2px solid var(--c-ink); overflow: hidden; }
.m3-zhead .bar em { display: block; height: 100%; background: var(--c); }
.m3-zpage { text-align: left; background: #fff; border: 3px solid var(--c-ink); border-radius: 20px; padding: 3cqw 3.6cqw; box-shadow: 0 .25em 0 var(--c-ink); }
.m3-zpage h4 { margin: 0 0 .6em; display: flex; align-items: center; gap: .5em; font: 800 clamp(13px, 4.2cqw, 20px)/1.3 var(--f-ja); }
.m3-zpage h4 small { font: 700 .75em/1 var(--f-en); color: #fff; background: var(--c); border: 2px solid var(--c-ink); border-radius: 999px; padding: .25em .6em; }
.m3-zpage p { margin: 0; font: 500 clamp(12px, 3.6cqw, 17px)/1.75 var(--f-ja); }
.m3-zpage ol { margin: 0; padding: 0; list-style: none; counter-reset: zs; display: flex; flex-direction: column; gap: 1.2cqw; }
.m3-zpage ol li { counter-increment: zs; display: flex; gap: .6em; align-items: flex-start; font: 500 clamp(12px, 3.5cqw, 16px)/1.55 var(--f-ja); }
.m3-zpage ol li::before { content: counter(zs); flex: none; width: 1.6em; height: 1.6em; border-radius: 50%; display: grid; place-content: center; background: var(--c); color: #fff; font: 700 .9em/1 var(--f-en); border: 2px solid var(--c-ink); }
.m3-zpage img.scene { width: 100%; height: auto; border-radius: 14px; margin-bottom: 2cqw; display: block; }
.m3-zpage.locked { background: repeating-linear-gradient(135deg, #FFF6F9 0 14px, #FCEBF1 14px 28px); text-align: center; color: var(--c-mute); }
.m3-zpage.locked h4 { justify-content: center; color: var(--c-mute); }
.m3-zpage.locked p { font-weight: 700; }
.m3-zpage.fresh { animation: m3Pop .5s cubic-bezier(.34, 1.56, .64, 1); }

/* ───── 結果 ───── */
.m3-result { background: linear-gradient(180deg, rgba(255, 243, 247, .95), rgba(255, 246, 236, .97)); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); gap: 2.2cqw; padding-top: max(6cqw, env(safe-area-inset-top)); }
.m3-res-head { margin: 0; min-height: 20cqw; display: flex; align-items: center; justify-content: center; }
.m3-res-head .m3-deco { font-size: clamp(36px, 13cqw, 70px); font-style: italic; animation: m3Zoom .6s cubic-bezier(.34, 1.56, .64, 1); }
.m3-res-head img { width: 78cqw; height: auto; display: block; animation: m3Zoom .6s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes m3Zoom { from { opacity: 0; transform: scale(2) rotate(-6deg); } }
.m3-res-stage { margin: -1cqw 0 0; font: 800 clamp(12px, 3.6cqw, 17px)/1.5 var(--f-ja); color: var(--c-mute); word-break: keep-all; }
.m3-res-stage b { color: var(--c-red-d); }
.m3-res-eval { display: flex; gap: 2cqw; align-items: flex-end; }
.m3-res-eval i { font-style: normal; font-size: clamp(38px, 13cqw, 70px); line-height: 1; color: #EBD9DF; -webkit-text-stroke: 3px var(--c-ink); transition: color .2s; }
.m3-res-eval i:nth-child(2) { font-size: clamp(46px, 16cqw, 86px); }
.m3-res-eval i.on { color: var(--c-gold); animation: m3EvalPop .6s cubic-bezier(.34, 1.56, .64, 1); text-shadow: 0 0 .3em rgba(255, 210, 60, .8); }
@keyframes m3EvalPop { 0% { transform: scale(0) rotate(-140deg); } 70% { transform: scale(1.3) rotate(10deg); } }
.m3-res-score { display: flex; align-items: baseline; gap: .6em; }
.m3-res-score small { font: 700 clamp(11px, 3cqw, 15px)/1 var(--f-en); letter-spacing: .2em; color: var(--c-mute); }
.m3-res-score b { font: 700 clamp(30px, 10cqw, 52px)/1 var(--f-en); font-variant-numeric: tabular-nums; }
.m3-res-best { margin: -1cqw 0 0; font: 700 clamp(11px, 3.2cqw, 15px)/1.3 var(--f-ja); color: var(--c-mute); }
.m3-res-best b { color: #fff; background: var(--c-red); border: 2px solid var(--c-ink); border-radius: 999px; padding: .2em .7em; font: 700 1em/1.2 var(--f-en); letter-spacing: .08em; animation: m3Pop .5s cubic-bezier(.34, 1.56, .64, 1) 1.3s backwards; }
.m3-res-reward { margin: 0; font: 800 clamp(12px, 3.6cqw, 17px)/1.6 var(--f-ja); }
.m3-res-reward:empty { display: none; }
.m3-res-reward span { display: inline-flex; align-items: center; gap: .3em; background: #FFF3A6; border: 2px solid var(--c-ink); border-radius: 999px; padding: .2em .8em; margin: .2em; }
.m3-res-reward img { width: 1.4em; height: 1.4em; }
.m3-res-match { width: 100%; background: #fff; border: 3px solid var(--c-ink); border-radius: 22px; padding: 3.4cqw 4cqw; text-align: left; box-shadow: 0 .3em 0 var(--c-ink); }
.m3-res-lead { margin: 0 0 1.6cqw; font: 700 clamp(12px, 3.6cqw, 17px)/1.4 var(--f-ja); color: var(--c-mute); }
.m3-res-job { display: flex; align-items: center; gap: 3cqw; }
.m3-res-job img { width: 24cqw; height: 24cqw; border-radius: 50%; object-fit: cover; object-position: center top; border: 3px solid var(--c-ink); background: var(--c-base); flex: none; }
.m3-res-job > div { min-width: 0; }
.m3-res-type { margin: 0 0 .3em; font: 800 clamp(11px, 3cqw, 14px)/1.3 var(--f-ja); letter-spacing: .06em; color: var(--c-red-d); }
.m3-res-name { margin: 0; font: 800 clamp(18px, 5.4cqw, 29px)/1.25 var(--f-ja); word-break: keep-all; overflow-wrap: anywhere; }
.m3-res-reason { margin: 2.4cqw 0 0; padding: 1.6cqw 2.4cqw; background: #FFF3F7; border-radius: 12px; font: 800 clamp(12px, 3.6cqw, 17px)/1.6 var(--f-ja); }
.m3-res-desc { margin: 1.6cqw 0 2cqw; font: 500 clamp(12px, 3.6cqw, 17px)/1.7 var(--f-ja); }
.m3-res-bars { display: flex; flex-direction: column; gap: 1.2cqw; }
.m3-res-bar { display: grid; grid-template-columns: 9.6em 1fr 3em; white-space: nowrap; align-items: center; gap: .7em; font: 700 clamp(10px, 3cqw, 14px)/1 var(--f-ja); }
.m3-res-bar i { height: 1.1em; background: #F6E4EA; border-radius: 999px; overflow: hidden; }
.m3-res-bar em { display: block; height: 100%; border-radius: inherit; width: 0; transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.m3-res-bar span:last-child { text-align: right; font-family: var(--f-en); }
.m3-res-zukan { margin-top: 2.6cqw; width: 100%; }
.m3-res-small { margin: 2cqw 0 0; font: 500 clamp(10px, 2.8cqw, 13px)/1.6 var(--f-ja); color: var(--c-mute); }
.m3-res-btns { display: flex; flex-direction: column; gap: 2.6cqw; align-items: center; padding-bottom: 4cqw; }
.m3-res-btns .m3-btn { min-width: 72cqw; }
.m3-res-btns-top { padding-bottom: 0; }
.m3-res-btns-top .m3-row .m3-btn { min-width: 34cqw; }

/* ───── 幕・読み込み ───── */
.m3-curtain { position: absolute; inset: 0; z-index: 40; pointer-events: none; background: radial-gradient(circle, #FFB3D4 0 30%, #FF7FB8 31% 33%, #FFD3E6 34% 100%); clip-path: circle(0% at 50% 50%); transition: clip-path .34s cubic-bezier(.6, 0, .4, 1); }
.m3-curtain.on { clip-path: circle(80% at 50% 50%); pointer-events: auto; }
.m3-loading { position: absolute; inset: 0; z-index: 50; display: grid; place-content: center; gap: 2cqw; justify-items: center; background: var(--c-base); font: 700 clamp(12px, 3cqw, 15px)/1 var(--f-en); letter-spacing: .3em; transition: opacity .4s; }
.m3-loading i { width: 10cqw; height: 10cqw; border-radius: 26%; background: linear-gradient(180deg, #FF9CC6, #F0435A); border: 3px solid var(--c-ink); animation: m3Bounce .6s ease-in-out infinite alternate; }
@keyframes m3Bounce { to { transform: translateY(-4cqw) rotate(20deg); } }
.m3-loading.off { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    .m3-logo, .m3-logo-text, .m3-title-btns > .m3-btn-main, .m3-title-crew img, .m3-mate img { animation: none !important; }
}

/* ───── 審査 r1 の対応: スマホ幅（375px）でも文字を12px未満にしない ───── */
.m3-chip small, .m3-moves small, .m3-score-row small, .m3-ztab small, .m3-goal-num small, .m3-how-card p small { font-size: max(12px, .72em); }
.m3-note { font-size: max(12px, 2.9cqw); }
.m3-demo-tag { font-size: max(12px, 2.8cqw); }
.m3-intro-ch { font-size: max(12px, 3cqw); }
.m3-sub-head small, .m3-intro-goals small { font-size: max(12px, 2.6cqw); }
.m3-goals-head { font-size: max(12px, 3cqw); }
.m3-goal-name { font-size: max(12px, 2.4cqw); }
.m3-say { font-size: max(12px, 3.1cqw); height: auto; min-height: 9cqw; padding-top: .3em; padding-bottom: .3em; }
.m3-boost b { font-size: max(12px, 3cqw); }
.m3-ztab { font-size: max(12px, 2.7cqw); }
.m3-zhead p { font-size: max(12px, 3cqw); }
.m3-res-small { font-size: max(12px, 2.8cqw); }
.m3-missions li b, .m3-zpage h4 small { font-size: max(12px, .8em); }
.m3-res-score small, .m3-res-type, .m3-res-bar, .m3-shop-coins small, .m3-shop-item p, .m3-intro-best { font-size: max(12px, 3cqw); }
/* 立ち絵を丸い顔アイコンにするときは、頭が入るように上を合わせて切り抜く */
img.bust { object-fit: cover; object-position: center top; }
/* 案件ボードの見出しは、背景の上でも読めるよう白い札にのせる */
.m3-map-title { flex: 0 1 auto; background: #fff; border: 3px solid var(--c-ink); border-radius: 999px; padding: .3em .9em .35em; box-shadow: 0 .2em 0 var(--c-ink); }
/* タイトルの4人は、キャッチコピーの札を腰の高さに重ねて足元を隠し、宙に浮いて見えないようにする（空の枠に見えないよう、札には必ず文字が入る） */
.m3-title-crew { position: relative; }
.m3-title-crew img { position: relative; z-index: 0; }
.m3-title > .m3-catch { position: relative; z-index: 1; margin-top: -9cqw; width: 92cqw; box-sizing: border-box; padding: .45em .8em .5em; background: linear-gradient(180deg, #FFFFFF, #FFEAF2); border: 3px solid var(--c-ink); border-radius: 16px; box-shadow: 0 .2em 0 var(--c-ink); text-shadow: none; }

/* ───── 納期と作業（左上の札） ───── */
.m3-moves { gap: .15em; padding-top: .1em; }
.m3-moves small { white-space: nowrap; }
.m3-moves b { display: flex; align-items: baseline; gap: .12em; font-size: 1.75em; line-height: 1; }
.m3-moves b i { font: 800 .36em/1 var(--f-ja); font-style: normal; color: var(--c-mute); }
/* ───── 依頼メモ（お題の下の帯） ───── */
.m3-memo {
    position: absolute; left: 3cqw; right: 3cqw; top: 66cqw; height: 7.2cqw; z-index: 3; pointer-events: none;
    display: flex; align-items: center; gap: 1.6cqw; padding: 0 1.2cqw 0 0;
    background: #FFFBEA; border: 3px solid var(--c-ink); border-radius: 14px; box-shadow: 0 .2em 0 var(--c-ink); overflow: hidden;
    font: 800 max(12px, 3.2cqw)/1.2 var(--f-ja); color: var(--c-ink);
}
.m3-memo small { flex: none; align-self: stretch; display: grid; place-content: center; padding: 0 1.6cqw; background: var(--mc, #FF7FB8); color: #fff; font: 800 max(12px, 2.6cqw)/1.1 var(--f-ja); text-shadow: 0 .08em 0 rgba(91, 43, 59, .4); border-right: 3px solid var(--c-ink); white-space: nowrap; }
.m3-memo span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m3-memo b { flex: none; font: 700 max(13px, 3.6cqw)/1 var(--f-en); background: #fff; border: 2px solid var(--c-ink); border-radius: 999px; padding: .2em .6em; font-variant-numeric: tabular-nums; }
.m3-memo.done { background: #E3FAF1; }
.m3-memo.done b { background: #2CC79A; color: #fff; font-family: var(--f-ja); font-size: max(12px, 3cqw); }
.m3-memo.pop { animation: m3MemoPop .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes m3MemoPop { from { transform: translateY(-1.4cqw) scale(.96); opacity: .3; } }
/* ───── メンバーと出番ゲージ ───── */
button.m3-mate { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; pointer-events: auto; }
.m3-gauge { position: absolute; left: 9%; right: 9%; bottom: .7cqw; height: 2.4cqw; z-index: 4; border-radius: 999px; background: #fff; border: 2px solid var(--c-ink); overflow: hidden; }
.m3-gauge em { display: block; height: 100%; width: 0; background: var(--c); transition: width .3s; }
.m3-ready { position: absolute; left: 50%; top: 4%; z-index: 5; transform: translateX(-50%) scale(0); transition: transform .2s; white-space: nowrap;
    font: 800 max(12px, 2.8cqw)/1 var(--f-ja); color: #fff; background: var(--c); border: 2px solid var(--c-ink); border-radius: 999px; padding: .3em .6em; box-shadow: 0 .15em 0 var(--c-ink); }
.m3-mate.ready .m3-ready { transform: translateX(-50%) scale(1); animation: m3Ready .9s ease-in-out infinite; }
.m3-mate.ready .m3-gauge { box-shadow: 0 0 0 2px #fff, 0 0 1.4cqw 1cqw var(--c); }
.m3-mate.ready img { filter: drop-shadow(0 0 1.2cqw var(--c)); }
.m3-mate.aim .m3-ready { background: var(--c-gold); color: var(--c-ink); }
.m3-mate:focus-visible { outline: 3px dashed var(--c-ink); outline-offset: -3px; border-radius: 12px; }
@keyframes m3Ready { 50% { transform: translateX(-50%) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .m3-mate.ready .m3-ready, .m3-job.next, .m3-memo.pop { animation: none !important; } }
/* ───── 検品1周目の直し ───── */
/* 左上: 日数が主（「2日目 / 5日」）、今日の作業は小さな点 */
.m3-hud::before { content: ""; position: absolute; left: -3cqw; right: -3cqw; top: -3cqw; bottom: -1.6cqw; z-index: -1; background: linear-gradient(180deg, #FFF7FA 70%, rgba(255, 247, 250, 0)); }
.m3-moves { gap: .3em; padding-top: 0; }
.m3-moves b { display: flex; align-items: baseline; gap: .2em; font: 800 1.45em/1 var(--f-ja); color: var(--c-red-d); white-space: nowrap; }
.m3-moves b small { font: 800 max(12px, .5em)/1 var(--f-ja); color: var(--c-mute); }
.m3-work { display: flex; gap: .3em; align-items: center; justify-content: center; height: .7em; }
.m3-work i { width: .62em; height: .62em; border-radius: 50%; border: 2px solid var(--c-ink); background: #fff; box-sizing: border-box; }
.m3-work i.on { background: var(--c-gold); }
.m3-moves.low b { animation: none; color: #E11D48; }
/* 下の段: 道具をなくし、4人が横いっぱい。ゲージはカウンターの上に全部見えるように置く */
.m3-bot-row { gap: 0; }
.m3-crew { padding: 0 1cqw; }
.m3-crew::after { height: 5.4cqw; }
.m3-mate img { margin-bottom: 3cqw; }
.m3-mate img.face { margin-bottom: 6cqw; }
.m3-gauge { left: 14%; right: 14%; bottom: 1.3cqw; height: 2.8cqw; z-index: 4; }
.m3-ready { top: 0; }
.m3-moves { width: 28cqw; }
.m3-moves b { font-size: 1.2em; }
.m3-bottom { justify-content: space-between; }
.m3-say { z-index: 5; }
.m3-bot-row { flex: 1 1 auto; height: auto; max-height: 34cqw; min-height: 0; }
/* ───── 検品2周目の直し ───── */
/* T1: 先方の評価（OK／満足／大満足）の札 */
.m3-res-eval { gap: 1.6cqw; align-items: center; }
.m3-res-eval i, .m3-res-eval i:nth-child(2) { font: 800 clamp(14px, 4.6cqw, 24px)/1 var(--f-ja); font-style: normal; color: #B59EAA; -webkit-text-stroke: 0; text-shadow: none;
    background: #fff; border: 3px solid #E5D3DB; border-radius: 999px; padding: .5em .9em; white-space: nowrap; }
.m3-res-eval i:nth-child(3) { font-size: clamp(16px, 5.4cqw, 28px); }
.m3-res-eval i.on { color: #fff; background: var(--c-red); border-color: var(--c-ink); box-shadow: 0 .18em 0 var(--c-ink); text-shadow: none; animation: m3EvalPop .5s cubic-bezier(.34, 1.56, .64, 1); }
.m3-res-eval i.on:nth-child(1) { background: #2E9BFF; }
.m3-res-eval i.on:nth-child(2) { background: #2CC79A; }
.m3-res-voice { margin: 0; max-width: 86cqw; font: 700 max(12px, 3.4cqw)/1.5 var(--f-ja); color: var(--c-ink); background: #FFFBEA; border: 2px solid #F1D9A8; border-radius: 14px; padding: .5em .9em; }
.m3-res-voice:empty { display: none; }
.m3-res-voice small { display: block; font: 800 max(12px, 2.8cqw)/1.2 var(--f-ja); color: var(--c-mute); }
.m3-missions li i { -webkit-text-stroke: 0; font: 800 1.1em/1 var(--f-ja); color: #fff; background: #E5D3DB; border-radius: 50%; width: 1.5em; height: 1.5em; display: grid; place-content: center; }
.m3-missions li.done i { color: #fff; background: #2CC79A; }
.m3-job .eval { font: 800 max(12px, 2.6cqw)/1 var(--f-ja); color: var(--c-mute); white-space: nowrap; }
.m3-job .eval.lv1, .m3-job .eval.lv2, .m3-job .eval.lv3 { color: #fff; border-radius: 999px; padding: .3em .6em; }
.m3-job .eval.lv1 { background: #2E9BFF; }
.m3-job .eval.lv2 { background: #2CC79A; }
.m3-job .eval.lv3 { background: var(--c-red); }
.m3-progbar span { font: 800 max(10px, .62em)/1 var(--f-ja); -webkit-text-stroke: 0; color: var(--c-mute); background: #fff; border: 2px solid var(--c-ink); border-radius: 999px; padding: .15em .35em; top: -.25em; }
.m3-progbar span.on { color: #fff; background: var(--c-red); transform: translateX(-50%) scale(1.08); }
/* T2: 出番のお知らせは文節で2行、小さめの文字で左右に余白 */
.m3-banner b > span { display: block; white-space: nowrap; text-align: center; }
.m3-banner.small { left: 12cqw; right: 12cqw; }
.m3-banner.small b { font-size: clamp(22px, 7.4cqw, 40px); line-height: 1.2; }
/* 検品3周目: 出番のお知らせは「だれの出番」の小さな札＋技名1行。盤面の上端に寄せる */
.m3-banner.small { gap: .2em; animation-name: m3BannerTop; }
.m3-banner.small small { font: 800 max(12px, 3cqw)/1 var(--f-ja); letter-spacing: .08em; padding: .35em .9em; }
.m3-banner.small b { font-size: clamp(20px, 6.4cqw, 34px); line-height: 1.1; }
@keyframes m3BannerTop { 0% { opacity: 0; transform: translateY(-2cqw); } 12% { opacity: 1; transform: none; } 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-2cqw); } }
.m3-res-voice { text-wrap: balance; line-break: strict; }
/* 検品4周目: 出番のお知らせは「だれの出番」＋技名を横1行の帯に（依頼メモと工程の列のあいだ） */
.m3-banner.small { flex-direction: row; justify-content: center; align-items: center; gap: .5em; left: 6cqw; right: 6cqw; }
.m3-banner.small small { flex: none; }
.m3-banner.small b { font-size: clamp(16px, 5cqw, 26px); line-height: 1.1; -webkit-text-stroke: .1em var(--c-ink); }
/* 吹き出しは行の長さをそろえ、1〜2文字だけの行を作らない */
.m3-say span { text-wrap: pretty; }