/* CREW MEMORY 作り込み版 — 和モダンの札（花札の意匠・和紙・朱と金と青緑）。明るい昼の配色 */
:root {
    --ink: #2B2420;
    --mute: #6E6259;
    --washi: #FBF4E4;
    --washi2: #F3E7CF;
    --shu: #E2452C;
    --shu-d: #B8301C;
    --gold: #C9A04A;
    --gold-l: #F0D58A;
    --teal: #1E8C8C;
    --teal-l: #8FD3CC;
    --sakura: #F4B6C2;
    --disp: "Shippori Mincho B1", "Hiragino Mincho ProN", serif;
    --body: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
    --tex: radial-gradient(circle at 17% 23%, rgba(201, 160, 74, .09) 0 1.4px, transparent 2px) 0 0 / 19px 21px,
           radial-gradient(circle at 63% 71%, rgba(43, 36, 32, .04) 0 1px, transparent 1.6px) 0 0 / 13px 17px,
           radial-gradient(circle at 40% 50%, rgba(226, 69, 44, .035) 0 1px, transparent 1.5px) 0 0 / 23px 29px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { background: var(--washi); 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; }
p, h1, h2, ul, ol { margin: 0; }
.cm-backdrop {
    position: fixed; inset: 0;
    background: var(--tex), radial-gradient(circle at 20% 15%, #FFF9EC, transparent 40%), linear-gradient(160deg, #F6EBD3, #FBF4E4 45%, #E6F2EE);
}
.cm-backdrop::before { content: ""; position: absolute; inset: 0; opacity: .5;
    background: radial-gradient(circle at 50% 100%, transparent 0 34%, rgba(30, 140, 140, .14) 35% 40%, transparent 41% 54%, rgba(30, 140, 140, .1) 55% 60%, transparent 61%) 0 0 / 120px 60px; }
.cm-stage {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
    overflow: hidden; background: var(--washi);
    border-radius: 22px; box-shadow: 0 0 0 1px rgba(43, 36, 32, .1), 0 0 0 7px rgba(201, 160, 74, .35), 0 30px 80px rgba(43, 36, 32, .22);
    container-type: size;
}
.cm-stage.cm-full { border-radius: 0; box-shadow: none; }
.cm-stage [hidden] { display: none !important; }
.cm-world { position: absolute; inset: 0; }
.cm-fx { position: absolute; inset: 0; z-index: 60; width: 100%; height: 100%; pointer-events: none; }

/* ───── 背景（画像が無いときは CSS で描く） ───── */
.cm-bg { position: absolute; inset: 0; background: var(--tex), var(--washi); transition: opacity .4s; }
.cm-bg::before, .cm-bg::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; }
.cm-bg.bg-title {
    background:
        radial-gradient(circle at 72% 15%, #FFFBEA 0 7%, #FFE9A6 7.3% 9.6%, rgba(255, 233, 166, 0) 13%),
        radial-gradient(ellipse at 10% 22%, rgba(255, 255, 255, .9) 0 6%, transparent 6.5%),
        radial-gradient(ellipse at 22% 20%, rgba(255, 255, 255, .85) 0 5%, transparent 5.5%),
        radial-gradient(ellipse at 84% 30%, rgba(255, 247, 222, .9) 0 5%, transparent 5.5%),
        var(--tex),
        linear-gradient(180deg, #C8EAF0 0%, #E3F4F1 24%, #FBF4E4 44%, var(--washi) 100%);
}
.cm-bg.bg-title::before { top: 30%; height: 13%;
    background: radial-gradient(circle at 50% 100%, var(--teal) 0 15%, #fff 16% 22%, var(--teal-l) 23% 34%, #fff 35% 40%, #5FB8B3 41% 52%, #fff 53% 58%, transparent 59%) 0 0 / 42px 21px;
    -webkit-mask: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); mask: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); opacity: .85; }
.cm-bg.bg-title::after { top: 0; height: 30%;
    background:
        radial-gradient(circle at 8% 12%, #fff 0 2.2%, var(--sakura) 2.3% 3.2%, transparent 3.4%),
        radial-gradient(circle at 15% 6%, #fff 0 1.8%, var(--sakura) 1.9% 2.6%, transparent 2.8%),
        radial-gradient(circle at 4% 24%, var(--shu) 0 1.6%, transparent 1.8%),
        radial-gradient(circle at 93% 9%, #fff 0 2.2%, var(--sakura) 2.3% 3.2%, transparent 3.4%),
        radial-gradient(circle at 87% 4%, var(--shu) 0 1.5%, transparent 1.7%),
        radial-gradient(circle at 97% 20%, #fff 0 1.8%, var(--sakura) 1.9% 2.6%, transparent 2.8%); }
.cm-bg.bg-play {
    background:
        radial-gradient(ellipse at 12% 0%, rgba(240, 213, 138, .55) 0 9%, transparent 9.5%),
        radial-gradient(ellipse at 26% 1%, rgba(240, 213, 138, .45) 0 7%, transparent 7.5%),
        radial-gradient(ellipse at 82% 0%, rgba(240, 213, 138, .5) 0 9%, transparent 9.5%),
        var(--tex), linear-gradient(180deg, #FFF8EA, var(--washi) 30%, #F7EEDB);
}
.cm-bg.bg-play::before { bottom: 0; height: 9%; opacity: .45;
    background: radial-gradient(circle at 50% 100%, var(--teal-l) 0 15%, transparent 16% 22%, var(--teal-l) 23% 30%, transparent 31% 38%, var(--teal-l) 39% 46%, transparent 47%) 0 0 / 46px 23px; }
.cm-bg.bg-play::after { top: 0; height: 18%;
    background: radial-gradient(circle at 6% 30%, #fff 0 3%, var(--sakura) 3.1% 4.4%, transparent 4.6%), radial-gradient(circle at 13% 12%, var(--shu) 0 2%, transparent 2.2%), radial-gradient(circle at 95% 60%, #fff 0 2.6%, var(--sakura) 2.7% 3.8%, transparent 4%); }
.has-bg_title .cm-bg.bg-title { background: url(assets/bg_title.webp) center top / cover no-repeat, var(--washi); }
.has-bg_play .cm-bg.bg-play { background: url(assets/bg_play.webp) center / cover no-repeat, var(--washi); }
.has-bg_title .cm-bg.bg-title::before, .has-bg_title .cm-bg.bg-title::after,
.has-bg_play .cm-bg.bg-play::before, .has-bg_play .cm-bg.bg-play::after { display: none; }

/* ───── 画面とボタン ───── */
.cm-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)) 5.5cqw max(4cqw, env(safe-area-inset-bottom));
    text-align: center;
}
.cm-enter { animation: cmEnter .42s cubic-bezier(.2, .9, .3, 1.15) both; }
@keyframes cmEnter { from { opacity: 0; transform: translateY(4cqw) scale(.985); } }
.cm-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; cursor: pointer; text-decoration: none; color: var(--ink);
    font: 800 clamp(14px, 4.3cqw, 22px)/1.2 var(--disp); letter-spacing: .08em; word-break: keep-all;
    border-radius: 999px; padding: .55em 1.8em .6em; transition: transform .12s, filter .12s;
}
.cm-btn:active { transform: scale(.95); }
.cm-btn:focus-visible, .cm-icon:focus-visible, .cm-sound:focus-visible, .cm-backbtn:focus-visible, .cm-tab:focus-visible, .cm-stage-card:focus-visible, .cm-dex-tile:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.cm-btn-main {
    color: #FFF8E8; border: 2px solid var(--gold);
    background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .45), transparent 55%), linear-gradient(180deg, #F0604A, var(--shu) 55%, var(--shu-d));
    box-shadow: inset 0 0 0 2px rgba(255, 238, 200, .55), 0 .3em 0 #8E2414, 0 .7em 1.4em rgba(226, 69, 44, .3);
    text-shadow: 0 .06em 0 rgba(120, 20, 10, .5);
}
.cm-btn-sub {
    background: var(--tex), linear-gradient(180deg, #FFFDF6, var(--washi2));
    border: 2px solid var(--gold); box-shadow: inset 0 0 0 3px var(--washi), inset 0 0 0 4px var(--teal-l), 0 .25em 0 #A9833A;
}
.cm-btn-big { font-size: clamp(19px, 6.6cqw, 34px); padding: .45em 2.6em .5em; animation: cmPulse 1.8s ease-in-out infinite; }
@keyframes cmPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.cm-row { display: flex; gap: 2.4cqw; justify-content: center; flex-wrap: wrap; }
.cm-link { color: var(--ink); font: 700 clamp(12px, 3.5cqw, 15px)/1 var(--body); padding: .9em .6em; min-height: 44px; display: inline-flex; align-items: center; }
.cm-link-btn { background: none; border: 0; text-decoration: underline; cursor: pointer; }
.cm-sound {
    min-height: 44px; min-width: 64px; cursor: pointer; border-radius: 999px;
    background: rgba(255, 253, 246, .92); border: 2px solid var(--gold); padding: 0 .9em;
    font: 800 clamp(11px, 3.2cqw, 15px)/1 var(--body); box-shadow: 0 .2em 0 #A9833A;
}
.cm-sound-inline { margin-top: 1cqw; }
.cm-topbar { width: 100%; display: flex; align-items: center; gap: 2cqw; flex: none; }
.cm-backbtn {
    flex: none; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; padding-bottom: .12em;
    font: 800 26px/1 var(--disp); color: var(--shu-d);
    background: radial-gradient(circle at 40% 30%, #fff, var(--washi2)); border: 2px solid var(--gold); box-shadow: 0 .18em 0 #A9833A;
}
.cm-screen-title {
    flex: 1; text-align: left; font: 800 clamp(20px, 6.6cqw, 34px)/1 var(--disp); letter-spacing: .12em;
    color: var(--ink); text-shadow: 0 .06em 0 #fff, 0 0 .4em #fff;
}
.cm-chip { display: inline-flex; align-items: center; gap: .35em; padding: .45em .9em; border-radius: 999px; background: rgba(255, 253, 246, .92); border: 2px solid var(--gold); font: 800 clamp(12px, 3.6cqw, 17px)/1 var(--disp); }
.cm-star-ico { display: inline-block; width: 1.15em; height: 1.15em; flex: none; background: linear-gradient(160deg, #FFE48A, #E0A92A); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.has-ui_goldstar .cm-star-ico { background: url(assets/ui_goldstar.webp) center / contain no-repeat; clip-path: none; }
.cm-panel {
    position: relative; width: 100%;
    background: var(--tex), linear-gradient(180deg, #FFFDF7, var(--washi));
    border: 2px solid var(--gold); border-radius: 20px;
    box-shadow: inset 0 0 0 4px var(--washi), inset 0 0 0 5.5px rgba(226, 69, 44, .55), 0 .5em 1.4em rgba(43, 36, 32, .16);
    padding: 5cqw 5cqw 4.4cqw;
}
.cm-panel::before, .cm-panel::after { content: ""; position: absolute; width: 9cqw; height: 9cqw; pointer-events: none;
    background: radial-gradient(circle at 30% 30%, var(--sakura) 0 18%, transparent 19%), radial-gradient(circle at 62% 46%, #fff 0 14%, var(--sakura) 15% 22%, transparent 23%), radial-gradient(circle at 36% 70%, var(--shu) 0 10%, transparent 11%); }
.cm-panel::before { left: -1.5cqw; top: -1.5cqw; }
.cm-panel::after { right: -1.5cqw; bottom: -1.5cqw; transform: rotate(180deg); }

/* ───── タイトル ───── */
.cm-title { justify-content: flex-start; gap: 2.2cqw; padding-top: max(3cqw, env(safe-area-inset-top)); }
.cm-topline { width: 100%; display: flex; align-items: center; justify-content: space-between; flex: none; }
.cm-tag { font: 800 clamp(10px, 2.7cqw, 13px)/1 var(--body); letter-spacing: .18em; color: var(--washi); background: var(--teal); padding: .7em 1.1em; border-radius: 999px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); }
.cm-logo-wrap { width: min(86cqw, 44cqh); aspect-ratio: 3 / 2; display: grid; place-items: center; flex: none; margin-top: -1cqw; animation: cmFloat 3.6s ease-in-out infinite; }
.cm-logo { width: 100%; height: auto; display: block; filter: drop-shadow(0 1.2cqw 1.6cqw rgba(43, 36, 32, .18)); }
.cm-wordmark { display: none; }
.cm-logo-wrap.no-logo .cm-logo { display: none; }
.cm-logo-wrap.no-logo .cm-wordmark { display: flex; }
@keyframes cmFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.2cqw); } }
/* ロゴ画像が無いときの題字: 1文字ずつ札に刷った意匠 */
.cm-wordmark { flex-direction: column; align-items: center; gap: 1.4cqw; font-size: min(10.4cqw, 5.6cqh); }
.cm-wm-row { display: flex; gap: .12em; perspective: 600px; }
.cm-wm-row i {
    display: grid; place-items: center; width: 1.12em; height: 1.48em; font: 800 1em/1 var(--disp); font-style: normal;
    color: var(--shu-d); border-radius: .14em;
    background: var(--tex), linear-gradient(180deg, #FFFDF5, var(--washi2));
    border: .045em solid var(--ink);
    box-shadow: inset 0 0 0 .07em var(--washi), inset 0 0 0 .1em var(--gold), 0 .07em 0 var(--ink), 0 .16em .2em rgba(43, 36, 32, .2);
    transform: rotate(var(--r, 0deg)) translateY(var(--y, 0));
    animation: cmLetter 6s ease-in-out infinite; animation-delay: var(--d, 0s);
}
.cm-wm-row i:nth-child(odd) { --r: -4deg; }
.cm-wm-row i:nth-child(even) { --r: 3deg; --y: .06em; }
.cm-wm-s { font-size: .62em; }
.cm-wm-s i { color: var(--washi); background: linear-gradient(160deg, #2BA3A0, var(--teal)); box-shadow: inset 0 0 0 .07em var(--teal), inset 0 0 0 .1em var(--gold-l), 0 .07em 0 var(--ink), 0 .16em .2em rgba(43, 36, 32, .2); }
.cm-wm-row i:nth-child(2) { --d: .4s; } .cm-wm-row i:nth-child(3) { --d: 1.6s; } .cm-wm-row i:nth-child(4) { --d: 2.4s; } .cm-wm-row i:nth-child(5) { --d: 3.2s; } .cm-wm-row i:nth-child(6) { --d: 4s; }
.cm-wm-row:not(.cm-wm-s) i:nth-child(4) { color: var(--washi); background: linear-gradient(160deg, #F26A50, var(--shu)); box-shadow: inset 0 0 0 .07em var(--shu), inset 0 0 0 .1em var(--gold-l), 0 .07em 0 var(--ink), 0 .16em .2em rgba(43, 36, 32, .2); }
@keyframes cmLetter { 0%, 84%, 100% { transform: rotate(var(--r, 0deg)) translateY(var(--y, 0)) rotateY(0); } 90% { transform: rotate(var(--r, 0deg)) translateY(calc(var(--y, 0) - .12em)) rotateY(180deg); } 96% { transform: rotate(var(--r, 0deg)) translateY(var(--y, 0)) rotateY(360deg); } }
.cm-wordmark small { font: 800 .26em/1 var(--disp); letter-spacing: .5em; padding: .5em 1em .5em 1.5em; color: var(--washi); background: var(--shu); border-radius: 999px; box-shadow: inset 0 0 0 .12em var(--gold-l); }

.cm-fan { position: relative; width: 92cqw; --cw: min(22cqw, 10.5cqh); --ch: calc(var(--cw) * 1.4); height: calc(var(--cw) * 1.62); flex: none; margin-top: auto; }
.cm-fan .cm-card { position: absolute; left: 50%; top: 0; margin-left: calc(var(--cw) / -2); cursor: default; }
.cm-fan .cm-card:nth-child(1) { translate: calc(var(--cw) * -1.42) 10%; rotate: -11deg; }
.cm-fan .cm-card:nth-child(2) { translate: calc(var(--cw) * -.49) 0; rotate: -3.5deg; }
.cm-fan .cm-card:nth-child(3) { translate: calc(var(--cw) * .49) 0; rotate: 3.5deg; }
.cm-fan .cm-card:nth-child(4) { translate: calc(var(--cw) * 1.42) 10%; rotate: 11deg; }
.cm-catch { font: 800 clamp(15px, 4.5cqw, 24px)/1.6 var(--disp); letter-spacing: .06em; word-break: keep-all; text-shadow: 0 0 .3em #fff, 0 0 .6em #fff; margin-top: auto; }
.cm-title-btns { display: flex; flex-direction: column; gap: 2.4cqw; align-items: center; flex: none; }
.cm-title-btns .cm-row .cm-btn { min-width: 36cqw; padding-left: 1.2em; padding-right: 1.2em; font-size: clamp(13px, 3.9cqw, 19px); }
.cm-title-stats { display: flex; gap: 3cqw; justify-content: center; flex: none; }
.cm-title-stats span { display: inline-flex; align-items: center; gap: .4em; padding: .4em 1em; border-radius: 999px; background: rgba(255, 253, 246, .85); border: 1.5px solid rgba(201, 160, 74, .7); font: 700 clamp(12px, 3.4cqw, 16px)/1 var(--body); }
.cm-title-stats b { font: 800 1.1em/1 var(--disp); }
.cm-note { font-size: clamp(11px, 3cqw, 14px); color: var(--mute); line-height: 1.6; word-break: keep-all; flex: none; }

/* ───── 札（3D で裏返る） ───── */
.cm-card {
    position: relative; display: block; flex: none; width: var(--cw); height: var(--ch);
    padding: 0; border: 0; background: none; cursor: pointer; perspective: 900px; touch-action: manipulation; border-radius: 9%;
}
.cm-card:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.cm-card-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.34, 1.4, .55, 1); }
.cm-card.up .cm-card-in, .cm-card.got .cm-card-in { transform: rotateY(180deg); }
.cm-back, .cm-face {
    position: absolute; inset: 0; border-radius: 9% / 6.5%; border: 2px solid var(--ink); overflow: hidden;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    container-type: inline-size;
}
/* 裏の柄 */
.cm-back { box-shadow: inset 0 0 0 4px var(--washi), inset 0 0 0 5.5px var(--gold), 0 3px 0 rgba(43, 36, 32, .85); background-color: var(--shu); }
.cm-back.bk-plum { background:
    radial-gradient(circle at 25% 25%, #fff 0 5%, var(--sakura) 5.5% 8%, transparent 8.5%) 0 0 / 50% 34%,
    radial-gradient(circle at 75% 75%, var(--sakura) 0 4%, transparent 4.5%) 0 0 / 50% 34%,
    radial-gradient(circle at 70% 25%, rgba(255, 255, 255, .5) 0 2.4%, transparent 2.8%) 0 0 / 50% 34%,
    linear-gradient(160deg, #F06046, var(--shu) 55%, #CF3721); }
.cm-back.bk-wave { background:
    radial-gradient(circle at 50% 100%, #fff 0 12%, var(--teal) 13% 20%, var(--washi) 21% 27%, var(--teal) 28% 35%, rgba(255, 255, 255, .7) 36% 41%, transparent 42%) 0 0 / 34% 17%,
    radial-gradient(circle at 50% 100%, #fff 0 12%, var(--teal) 13% 20%, var(--washi) 21% 27%, var(--teal) 28% 35%, rgba(255, 255, 255, .7) 36% 41%, transparent 42%) 17% 8.5% / 34% 17%,
    linear-gradient(160deg, #36A8A3, var(--teal)); }
.cm-back.bk-fuji { background:
    radial-gradient(ellipse at 50% 30%, #fff 0 9%, transparent 9.5%) 0 0 / 25% 22%,
    radial-gradient(ellipse at 50% 70%, #D8C9FF 0 12%, transparent 12.5%) 0 0 / 25% 22%,
    linear-gradient(160deg, #A07CFA, #7C4DEB); }
.cm-back.bk-yamabuki { background:
    radial-gradient(ellipse at 30% 40%, #FFF6DC 0 12%, transparent 12.5%) 0 0 / 46% 26%,
    radial-gradient(ellipse at 52% 36%, #FFF6DC 0 10%, transparent 10.5%) 0 0 / 46% 26%,
    radial-gradient(circle at 80% 80%, rgba(226, 69, 44, .7) 0 4%, transparent 4.5%) 0 0 / 46% 26%,
    linear-gradient(160deg, #FFD15C, #F2AE16); }
.cm-back.bk-img { background-size: cover; background-position: center; box-shadow: 0 3px 0 rgba(43, 36, 32, .85); }
.cm-back.bk-img .cm-back-crest { display: none; }
.cm-back-crest { width: 52cqi; height: 52cqi; border-radius: 50%; filter: drop-shadow(0 2px 0 rgba(43, 36, 32, .35)); }
.cm-back-crest svg, .cm-back-crest img { width: 100%; height: 100%; display: block; }
/* 表 */
.cm-face { transform: rotateY(180deg); background: var(--tex), linear-gradient(180deg, #FFFDF6, var(--washi)); box-shadow: inset 0 0 0 3.5px var(--washi), inset 0 0 0 5px var(--gold), 0 3px 0 rgba(43, 36, 32, .85); padding: 9% 5% 7%; gap: 2cqi; }
.has-ui_card .cm-face { background: url(assets/ui_card.webp) center / 100% 100% no-repeat; box-shadow: 0 3px 0 rgba(43, 36, 32, .85); }
.cm-f-tag { position: absolute; left: 7cqi; top: 7cqi; font: 900 9.5cqi/1 var(--body); color: #fff; background: var(--shu); padding: 2.6cqi 4.4cqi; border-radius: 99px; z-index: 1; }
.cm-f-name { font: 900 13cqi/1.15 var(--body); word-break: keep-all; text-align: center; letter-spacing: -.02em; }
.cm-f-art { display: grid; place-items: center; flex: none; }
.cm-f-art svg, .cm-f-art img { width: 100%; height: 100%; display: block; object-fit: contain; }
.cm-f-mark { position: absolute; right: 5cqi; top: 5cqi; width: 26cqi; height: 26cqi; opacity: 0; scale: .3; transition: opacity .3s, scale .45s cubic-bezier(.34, 1.56, .64, 1); z-index: 2; }
.cm-f-mark svg, .cm-f-mark img { width: 100%; height: 100%; display: block; }
.cm-card.got .cm-f-mark { opacity: 1; scale: 1; }
.cm-f-person { padding: 0; justify-content: flex-start; }
.cm-f-person .cm-f-art { width: 100%; flex: 1; min-height: 0; background: radial-gradient(circle at 50% 60%, #fff 0 34%, var(--jl) 35%); position: relative; overflow: hidden; }
.cm-f-person .cm-f-art::before { content: ""; position: absolute; inset: 0; opacity: .5; background: radial-gradient(circle at 50% 100%, transparent 0 30%, var(--jc) 31% 33%, transparent 34% 44%, var(--jc) 45% 47%, transparent 48%) 0 0 / 34cqi 17cqi; }
.cm-f-person .cm-f-art img { position: relative; width: 86cqi; height: 86cqi; border-radius: 50%; object-fit: cover; margin-top: 8cqi; border: 2px solid var(--ink); box-shadow: 0 0 0 4cqi rgba(255, 255, 255, .7); }
.cm-f-person .cm-f-name { width: 100%; padding: 4cqi 2cqi 5cqi; background: var(--jc); color: var(--jbt, #fff); font-size: 12.5cqi; border-top: 2px solid var(--ink); }
.cm-f-tool .cm-f-art { width: 74cqi; height: 74cqi; }
.cm-f-tool .cm-f-tag { background: var(--shu); }
.cm-f-role { padding: 18% 8% 9%; background: var(--tex), linear-gradient(180deg, #F2FAF7, #FFFDF6); }
.cm-f-role::before { content: ""; position: absolute; inset: 9cqi 7cqi; border: 1.5px solid rgba(226, 69, 44, .55); border-radius: 6cqi; pointer-events: none; }
.cm-f-role .cm-f-tag { background: var(--teal); }
.cm-f-verse { writing-mode: vertical-rl; display: flex; gap: 3cqw; font: 800 min(15.5cqw, calc(92cqw / var(--vl, 6)))/1.1 var(--disp); letter-spacing: .04em; color: var(--ink); white-space: nowrap; }
.cm-f-verse span:first-child { color: var(--shu-d); }
/* 盤の札は、スマホでも文字を12px以上で出す（入りきらない「しごと」の文は、次の行へ折り返す） */
.cm-grid .cm-f-tag { font-size: max(12px, 9.5cqi); padding: .2em .45em; left: 4cqi; top: 4cqi; }
.cm-grid .cm-f-name { font-size: max(12px, 13cqi); line-height: 1.1; }
.cm-grid .cm-f-person .cm-f-name { font-size: max(12px, 12.5cqi); letter-spacing: -.06em; padding-left: 0; padding-right: 0; }
.cm-f-name.cm-f-long > span { display: block; }
.cm-grid .cm-f-person .cm-f-name.cm-f-long { letter-spacing: -.1em; }
.cm-grid .cm-f-tool .cm-f-art { width: min(74cqi, calc(100cqi * 1.4 - 52px)); height: min(74cqi, calc(100cqi * 1.4 - 52px)); }
.cm-grid .cm-f-role { padding: max(18px, 14%) 6% 6%; }
.cm-grid .cm-f-verse { display: block; height: 100%; width: max-content; max-width: 100%; font-size: max(12px, min(15.5cqw, calc(92cqw / var(--vl, 6)))); line-height: 1.15; white-space: normal; line-break: strict; }
.cm-grid .cm-f-verse span { display: block; }
.cm-grid .cm-f-verse span + span { margin-block-start: .25em; }
.cm-f-lantern { background: radial-gradient(circle at 50% 45%, #FFF1C4, var(--washi) 60%); }
.cm-f-lantern .cm-f-art { width: 78cqi; height: 78cqi; }
.cm-f-lantern .cm-f-name { font-family: var(--disp); color: var(--shu-d); }
/* 金札 */
.cm-card.gold .cm-face { background: linear-gradient(135deg, #FFF8DA, #F6DC8E 45%, #FFF5CF 60%, #EFCB6A); box-shadow: inset 0 0 0 3.5px #FFF3C4, inset 0 0 0 6px #D8A52E, 0 3px 0 rgba(43, 36, 32, .85); }
.cm-card.gold .cm-face::after { content: ""; position: absolute; inset: -20%; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .85) 50%, transparent 60%); animation: cmShine 2.4s ease-in-out infinite; pointer-events: none; }
@keyframes cmShine { from { transform: translateX(-60%); } to { transform: translateX(60%); } }
.cm-card.gold .cm-f-tag { background: #B98712; }
/* そろった・まちがい・配る・案内 */
.cm-card.got .cm-face { box-shadow: inset 0 0 0 3.5px var(--washi), inset 0 0 0 5px var(--gold), 0 3px 0 rgba(43, 36, 32, .85), 0 0 0 3px var(--jc), 0 0 16px 2px var(--jc); }
.cm-card.got.gold .cm-face { box-shadow: inset 0 0 0 3.5px #FFF3C4, inset 0 0 0 6px #D8A52E, 0 3px 0 rgba(43, 36, 32, .85), 0 0 0 3px #E8B731, 0 0 18px 3px #FFD45C; }
.cm-card.got { cursor: default; }
.cm-card.pop { animation: cmGot .62s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes cmGot { 0% { scale: 1; } 30% { scale: 1.16; rotate: -3deg; } 65% { scale: .97; } 100% { scale: 1; } }
.cm-card.miss { animation: cmShake .42s ease; }
@keyframes cmShake { 20% { translate: -8% 0; } 40% { translate: 6% 0; } 60% { translate: -4% 0; } 80% { translate: 2% 0; } }
.cm-card.deal { animation: cmDeal .5s cubic-bezier(.34, 1.4, .64, 1) backwards; animation-delay: var(--d, 0ms); }
@keyframes cmDeal { from { opacity: 0; scale: .3; rotate: -20deg; translate: 0 -60%; } }
.cm-card.guide::after { content: ""; position: absolute; inset: -6px; border-radius: 12%; border: 3px solid var(--gold); box-shadow: 0 0 0 3px rgba(255, 255, 255, .8), 0 0 18px var(--gold-l); animation: cmGuide 1s ease-in-out infinite; pointer-events: none; }
@keyframes cmGuide { 50% { transform: scale(1.06); opacity: .6; } }
.cm-card.flash .cm-face { animation: cmFlash .35s ease-out; }
@keyframes cmFlash { 0% { filter: brightness(1.8); } 100% { filter: brightness(1); } }
.cm-cloud { position: absolute; inset: -8% -10%; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .35s, transform .5s; display: grid; place-items: center; }
.cm-cloud svg, .cm-cloud img { width: 100%; height: 100%; display: block; object-fit: contain; }
.cm-card.clouded .cm-cloud { opacity: 1; }
.cm-card.puff .cm-cloud { opacity: 0; transform: scale(1.5) translateY(-10%); }

/* ───── プレイ画面 ───── */
.cm-play { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; }
.cm-hud { flex: none; display: flex; align-items: stretch; gap: 1.4cqw; padding: max(2.2cqw, env(safe-area-inset-top)) 2.4cqw 0; font-size: clamp(10px, 3.1cqw, 16px); }
.cm-hud-stage { flex: 1; min-width: 0; display: flex; align-items: center; gap: 1.6cqw; padding: .3em .8em .3em .3em; border-radius: 999px; background: rgba(255, 253, 246, .94); border: 2px solid var(--gold); }
.cm-hud-crest { width: 2.7em; height: 2.7em; flex: none; display: block; }
.cm-hud-crest svg, .cm-hud-crest img { width: 100%; height: 100%; display: block; }
.cm-hud-stage div { min-width: 0; text-align: left; }
.cm-hud-stage small { display: block; font: 700 .72em/1.1 var(--body); color: var(--shu-d); letter-spacing: .1em; }
.cm-hud-stage b { display: block; font: 800 1.08em/1.2 var(--disp); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-hud-box { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 3.9em; padding: .25em .7em; border-radius: 14px; background: rgba(255, 253, 246, .94); border: 2px solid var(--gold); }
.cm-hud-box small { font: 700 .66em/1.1 var(--body); color: var(--mute); letter-spacing: .08em; }
.cm-hud-box b { font: 800 1.3em/1.05 var(--disp); font-variant-numeric: tabular-nums; }
.cm-hud-time { min-width: 4.6em; }
.cm-hud-time.warn { background: #FFE7E1; border-color: var(--shu); animation: cmWarn .5s ease-in-out infinite alternate; }
.cm-hud-time.warn b { color: var(--shu-d); }
@keyframes cmWarn { to { transform: scale(1.06); } }
.cm-icon { flex: none; width: 46px; height: 46px; align-self: center; border-radius: 50%; cursor: pointer; font: 800 15px/1 var(--disp); background: radial-gradient(circle at 40% 30%, #fff, var(--washi2)); border: 2px solid var(--gold); box-shadow: 0 .16em 0 #A9833A; }
.cm-info { flex: none; display: flex; align-items: center; gap: 2cqw; padding: 1.8cqw 3cqw 0; }
.cm-slots { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: .9cqw; }
.cm-slots i { width: 3.4cqw; height: 3.4cqw; max-width: 16px; max-height: 16px; border-radius: 50%; background: rgba(255, 255, 255, .9); border: 1.5px solid rgba(201, 160, 74, .9); transition: background .3s, transform .3s; }
.cm-slots i.on { background: var(--c); border-color: var(--ink); transform: scale(1.15); }
.cm-slots-txt { font: 800 clamp(11px, 3.3cqw, 16px)/1.2 var(--disp); text-align: left; }
.cm-score { display: flex; align-items: baseline; gap: .4em; padding: .3em .9em; border-radius: 999px; background: rgba(255, 253, 246, .94); border: 2px solid var(--gold); }
.cm-score small { font: 700 clamp(10px, 2.8cqw, 13px)/1 var(--body); color: var(--mute); }
.cm-score b { font: 800 clamp(14px, 4.4cqw, 22px)/1 var(--disp); font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; }
.cm-score.bump b { animation: cmBump .35s ease; }
@keyframes cmBump { 40% { transform: scale(1.25); color: var(--shu-d); } }
.cm-subbar { flex: none; padding: 1.6cqw 3cqw 0; }
.cm-req, .cm-boss { display: flex; align-items: center; gap: 2cqw; padding: .35em .8em .35em .4em; border-radius: 14px; background: rgba(255, 253, 246, .95); border: 2px solid var(--shu); position: relative; overflow: hidden; font-size: clamp(11px, 3.3cqw, 16px); }
.cm-req-ico, .cm-boss-ico { width: 2.6em; height: 2.6em; flex: none; display: block; }
.cm-req-ico svg, .cm-req-ico img, .cm-boss-ico svg, .cm-boss-ico img { width: 100%; height: 100%; display: block; }
.cm-req p, .cm-boss p { flex: 1; min-width: 0; text-align: left; }
.cm-req small, .cm-boss small { display: block; font: 800 .72em/1.1 var(--body); color: var(--shu-d); letter-spacing: .14em; }
.cm-req b { display: block; font: 800 1.08em/1.25 var(--disp); }
.cm-req-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(226, 69, 44, .15); }
.cm-req-bar em { display: block; height: 100%; width: 100%; background: var(--shu); transform-origin: left; }
.cm-req.pop { animation: cmBump .45s ease; }
.cm-boss { border-color: var(--gold); }
.cm-boss p i { display: block; height: 1.1em; margin-top: .25em; border-radius: 99px; background: rgba(43, 36, 32, .08); overflow: hidden; border: 1.5px solid rgba(201, 160, 74, .8); }
.cm-boss p i em { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--shu), var(--gold-l)); transition: width .5s cubic-bezier(.2, .8, .2, 1); border-radius: inherit; }
.cm-boss b { font: 800 1.1em/1 var(--disp); }
.cm-board { flex: 1; min-height: 0; display: grid; place-items: center; padding: 2cqw 2.6cqw; position: relative; }
.cm-grid { display: grid; justify-content: center; align-content: center; }
.cm-bubble { flex: none; display: flex; align-items: flex-end; gap: 2cqw; height: 25cqw; min-height: 86px; padding: 0 3cqw max(2.6cqw, env(safe-area-inset-bottom)); }
.cm-bubble-face { width: 15cqw; height: 15cqw; min-width: 52px; min-height: 52px; flex: none; border-radius: 50%; overflow: hidden; background: var(--washi); border: 2px solid var(--gold); box-shadow: 0 0 0 3px #fff, 0 .2em .5em rgba(43, 36, 32, .2); display: block; }
.cm-bubble-face img, .cm-bubble-face svg { width: 100%; height: 100%; display: block; object-fit: cover; }
.cm-bubble-box { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: .25em; overflow: hidden; text-align: left;
    background: var(--tex), linear-gradient(180deg, #FFFDF7, var(--washi)); border: 2px solid var(--gold); border-radius: 16px; padding: 1.8cqw 3cqw; box-shadow: inset 0 0 0 3px var(--washi), inset 0 0 0 4px rgba(226, 69, 44, .4), 0 .3em .8em rgba(43, 36, 32, .12); }
.cm-bubble-title { font: 800 clamp(13px, 4cqw, 20px)/1.3 var(--disp); color: var(--bc, var(--ink)); word-break: keep-all; overflow-wrap: anywhere; }
.cm-bubble-text { font: 700 clamp(12px, 3.4cqw, 16.5px)/1.55 var(--body); line-break: strict; }
.cm-bubble.pop .cm-bubble-box, .cm-bubble.pop .cm-bubble-face { animation: cmPopIn .36s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes cmPopIn { from { transform: scale(.9) translateY(2cqw); opacity: .4; } }
.cm-bubble-bar { display: none; height: 6px; border-radius: 99px; background: rgba(43, 36, 32, .1); overflow: hidden; }
.cm-bubble-bar::after { content: ""; display: block; height: 100%; background: linear-gradient(90deg, var(--gold-l), var(--shu)); transform-origin: left; }
.cm-bubble.peek .cm-bubble-bar { display: block; }
.cm-bubble.peek .cm-bubble-bar::after { animation: cmBar var(--dur, 2s) linear forwards; }
@keyframes cmBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.cm-bubble.peek .cm-bubble-title { font-size: clamp(18px, 6cqw, 30px); color: var(--shu-d); letter-spacing: .1em; }
.cm-world.shake { animation: cmShakeW .32s linear; }
@keyframes cmShakeW { 20% { transform: translate(-1.2cqw, .4cqw); } 40% { transform: translate(1cqw, -.5cqw); } 60% { transform: translate(-.6cqw, .3cqw); } 80% { transform: translate(.4cqw, 0); } }
.cm-world.shake-l { animation: cmShakeW .5s linear; }

/* 点数の飛び出し・連続 */
.cm-pop {
    position: absolute; z-index: 40; pointer-events: none; white-space: nowrap; translate: -50% -50%;
    font: 800 clamp(16px, 5cqw, 26px)/1 var(--disp); color: var(--washi);
    -webkit-text-stroke: .16em var(--ink); paint-order: stroke fill; text-shadow: 0 .1em 0 var(--ink);
    animation: cmFloatUp 1s ease-out forwards;
}
.cm-pop.gold { color: #FFD45C; }
.cm-pop.combo { font-size: clamp(20px, 7cqw, 36px); color: #FFE27A; }
.cm-pop.combo small { display: block; font-size: .55em; color: var(--washi); text-align: center; margin-top: .15em; }
@keyframes cmFloatUp { 0% { opacity: 0; transform: scale(.4); } 18% { opacity: 1; transform: scale(1.15); } 32% { transform: scale(1); } 100% { opacity: 0; transform: translateY(-9cqw); } }
.cm-swirl { position: absolute; z-index: 40; pointer-events: none; width: 26cqw; height: 26cqw; translate: -50% -50%; animation: cmSwirl .8s ease-out forwards; }
.cm-swirl svg, .cm-swirl img { width: 100%; height: 100%; display: block; }
@keyframes cmSwirl { from { opacity: 0; transform: scale(.4) rotate(0); } 30% { opacity: 1; } to { opacity: 0; transform: scale(1.3) rotate(320deg); } }
.cm-wave-fx { position: absolute; z-index: 40; pointer-events: none; left: -30%; width: 160%; height: 18cqw; translate: 0 -50%; animation: cmWaveFx .9s ease-in-out forwards;
    background: radial-gradient(circle at 50% 100%, rgba(30, 140, 140, .55) 0 15%, rgba(255, 255, 255, .8) 16% 22%, rgba(143, 211, 204, .7) 23% 34%, rgba(255, 255, 255, .7) 35% 41%, transparent 42%) 0 100% / 12cqw 6cqw repeat-x; }
@keyframes cmWaveFx { from { transform: translateX(-60%); opacity: 0; } 30% { opacity: 1; } to { transform: translateX(30%); opacity: 0; } }

/* ───── 告知・演出の文字 ───── */
.cm-banner { position: absolute; z-index: 45; left: 0; right: 0; top: 38%; display: flex; flex-direction: column; align-items: center; gap: .35em; pointer-events: none; animation: cmBanner 1.5s ease forwards; }
.cm-banner small { font: 800 clamp(12px, 3.6cqw, 18px)/1 var(--body); letter-spacing: .2em; color: var(--washi); background: var(--teal); padding: .5em 1.2em; border-radius: 999px; }
.cm-banner small:empty { display: none; }
.cm-banner b { position: relative; font: 800 clamp(30px, 11cqw, 58px)/1.1 var(--disp); letter-spacing: .08em; color: var(--washi); padding: .12em 1em .18em;
    background: linear-gradient(180deg, #F0604A, var(--shu) 60%, var(--shu-d)); border-top: 3px solid var(--gold); border-bottom: 3px solid var(--gold);
    text-shadow: 0 .06em 0 rgba(90, 15, 5, .5); box-shadow: 0 .2em .5em rgba(43, 36, 32, .2);
    clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%); }
@keyframes cmBanner { 0% { opacity: 0; transform: scaleX(.3); } 14% { opacity: 1; transform: scaleX(1); } 78% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1) translateY(-4cqw); } }
.cm-word { position: absolute; z-index: 46; left: 4cqw; right: 4cqw; top: 33%; display: grid; place-items: center; pointer-events: none; animation: cmWordIn 1.9s cubic-bezier(.34, 1.56, .64, 1) forwards; }
.cm-word img { width: 92cqw; max-width: 100%; height: auto; display: block; filter: drop-shadow(0 1cqw 1.6cqw rgba(43, 36, 32, .22)); }
.cm-word b { position: relative; font: 800 clamp(40px, 15cqw, 84px)/1 var(--disp); letter-spacing: .04em; color: transparent;
    background: linear-gradient(180deg, #FFE27A, #F2A71B 45%, var(--shu) 100%); -webkit-background-clip: text; background-clip: text;
    -webkit-text-stroke: .02em var(--ink); filter: drop-shadow(.04em 0 0 var(--washi)) drop-shadow(-.04em 0 0 var(--washi)) drop-shadow(0 .04em 0 var(--washi)) drop-shadow(0 -.04em 0 var(--washi)) drop-shadow(0 .08em 0 var(--ink)); }
.cm-word.teal b { background-image: linear-gradient(180deg, #CFF3EE, #4CB7B1 50%, var(--teal)); }
.cm-word small { display: block; margin-top: .6em; font: 800 clamp(13px, 4cqw, 20px)/1 var(--disp); color: var(--shu-d); letter-spacing: .2em; text-shadow: 0 0 .3em #fff, 0 0 .5em #fff; }
@keyframes cmWordIn { 0% { opacity: 0; transform: scale(.3) rotate(-6deg); } 22% { opacity: 1; transform: scale(1) rotate(0); } 82% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.08); } }

/* ───── 章のはじめ ───── */
.cm-intro { background: rgba(251, 244, 228, .72); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); z-index: 30; overflow-y: auto; justify-content: safe center; touch-action: pan-y; }
.cm-intro-panel { display: flex; flex-direction: column; align-items: center; gap: 2cqw; text-align: center; }
.cm-intro-scene { width: 100%; aspect-ratio: 16 / 7; border-radius: 14px; overflow: hidden; display: grid; place-items: center; position: relative; border: 2px solid var(--gold); background: var(--scene-bg, linear-gradient(180deg, #CDEBF0, #FBF4E4)); }
.cm-intro-scene img.cm-scene-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-intro-scene .cm-scene-crest { width: 28%; aspect-ratio: 1; filter: drop-shadow(0 .4em .5em rgba(43, 36, 32, .2)); animation: cmFloat 3s ease-in-out infinite; }
.cm-intro-scene .cm-scene-crest svg, .cm-intro-scene .cm-scene-crest img { width: 100%; height: 100%; display: block; }
.cm-intro-label { font: 800 clamp(12px, 3.6cqw, 17px)/1 var(--body); letter-spacing: .3em; color: var(--washi); background: var(--shu); padding: .5em 1.2em .5em 1.5em; border-radius: 999px; margin-top: 1cqw; }
.cm-intro-name { font: 800 clamp(26px, 9cqw, 48px)/1.15 var(--disp); letter-spacing: .14em; }
.cm-intro-job { font: 800 clamp(13px, 4cqw, 19px)/1.3 var(--body); color: var(--jt, var(--teal)); }
.cm-intro-job:empty { display: none; }
.cm-intro-lead { font: 700 clamp(13px, 3.7cqw, 17px)/1.65 var(--body); line-break: strict; }
.cm-intro-rules { list-style: none; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 1.6cqw; }
.cm-intro-rules li { display: flex; gap: 2.4cqw; align-items: center; text-align: left; padding: 2cqw 3cqw; border-radius: 14px; background: rgba(255, 255, 255, .75); border: 1.5px solid rgba(201, 160, 74, .65); }
.cm-intro-rules li i { width: 11cqw; height: 11cqw; flex: none; display: block; }
.cm-intro-rules li i svg, .cm-intro-rules li i img { width: 100%; height: 100%; display: block; }
.cm-intro-rules li b { display: block; font: 800 clamp(13px, 3.9cqw, 18px)/1.3 var(--disp); color: var(--shu-d); }
.cm-intro-rules li span { display: block; font: 700 clamp(12px, 3.4cqw, 15.5px)/1.55 var(--body); line-break: strict; }
.cm-intro-panel .cm-row { margin-top: 1cqw; }
.cm-intro-panel .cm-btn-main { min-width: 40cqw; }

/* ミッション（★） */
.cm-missions { list-style: none; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 1.3cqw; }
.cm-missions li { display: flex; align-items: center; gap: 2cqw; background: rgba(255, 255, 255, .82); border: 1.5px solid rgba(201, 160, 74, .6); border-radius: 999px; padding: .45em 1em .45em .55em; text-align: left; font: 700 clamp(12px, 3.5cqw, 16px)/1.3 var(--body); }
.cm-missions li .cm-star-ico { width: 6.6cqw; height: 6.6cqw; filter: grayscale(1) opacity(.3); }
.cm-missions li.done .cm-star-ico { filter: none; animation: cmStar .5s cubic-bezier(.34, 1.56, .64, 1) backwards; }
.cm-missions li:nth-child(2).done .cm-star-ico { animation-delay: .25s; }
.cm-missions li:nth-child(3).done .cm-star-ico { animation-delay: .5s; }
@keyframes cmStar { from { transform: scale(0) rotate(-120deg); } }
.cm-missions li span { flex: 1; }
.cm-missions li em { font: 800 .92em/1 var(--disp); font-style: normal; color: var(--mute); }
.cm-missions li.done em { color: var(--shu-d); }
.cm-missions li strong { font: 900 .72em/1 var(--body); color: #fff; background: var(--shu); border-radius: 99px; padding: .35em .6em; }
.cm-missions-s li { font-size: clamp(11px, 3.2cqw, 15px); }

/* ───── そろったときの仕事紹介 ───── */
.cm-cine { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; padding: 6cqw; background: rgba(251, 244, 228, .88); cursor: pointer; }
.cm-cine-rays { position: absolute; left: 50%; top: 44%; width: 170cqw; height: 170cqw; translate: -50% -50%; opacity: .6; pointer-events: none;
    background: radial-gradient(circle, rgba(255, 241, 196, .95) 0 18%, rgba(240, 213, 138, .45) 34%, transparent 60%); }
@keyframes cmRays { to { transform: rotate(360deg); } }
.cm-cine-panel { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2cqw; animation: cmEnter .45s cubic-bezier(.2, .9, .3, 1.2) both; }
.cm-cine-new { font: 800 clamp(13px, 4cqw, 19px)/1 var(--body); letter-spacing: .3em; color: var(--washi); background: var(--shu); padding: .55em 1.3em .55em 1.6em; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--gold-l); }
.cm-cine-new.known { background: var(--teal); }
.cm-cine-cards { display: flex; align-items: center; gap: 3cqw; --cw: 30cqw; --ch: calc(var(--cw) * 1.4); }
.cm-cine-slot { width: var(--cw); height: var(--ch); }
.cm-cine-slot .cm-card { cursor: default; }
.cm-cine-slot:first-child .cm-card { animation: cmCineL .6s cubic-bezier(.34, 1.4, .64, 1) both; }
.cm-cine-slot:last-child .cm-card { animation: cmCineR .6s cubic-bezier(.34, 1.4, .64, 1) both; }
@keyframes cmCineL { from { translate: -40cqw 0; rotate: -20deg; opacity: 0; } }
@keyframes cmCineR { from { translate: 40cqw 0; rotate: 20deg; opacity: 0; } }
.cm-cine-x { font: 800 clamp(20px, 7cqw, 36px)/1 var(--disp); color: var(--gold); text-shadow: 0 .06em 0 var(--ink); }
.cm-cine-crew { width: 26cqw; height: 26cqw; margin-top: -12cqw; border-radius: 50%; overflow: hidden; border: 3px solid var(--gold); background: var(--washi); box-shadow: 0 0 0 4px #fff, 0 .4em 1em rgba(43, 36, 32, .2); position: relative; z-index: 2; animation: cmEnter .5s .2s cubic-bezier(.2, .9, .3, 1.3) both; }
.cm-cine-crew img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-cine-job { font: 800 clamp(12px, 3.6cqw, 17px)/1 var(--body); color: var(--jt, var(--teal)); letter-spacing: .1em; }
.cm-cine-title { font: 800 clamp(19px, 6.4cqw, 32px)/1.3 var(--disp); letter-spacing: .06em; word-break: keep-all; }
.cm-cine-text { font: 700 clamp(13px, 3.9cqw, 18px)/1.7 var(--body); line-break: strict; max-width: 88cqw; padding: 2.4cqw 4cqw; border-radius: 14px; background: rgba(255, 255, 255, .85); border: 1.5px solid rgba(201, 160, 74, .7); }
.cm-cine-tap { font: 700 clamp(11px, 3cqw, 14px)/1 var(--body); color: var(--mute); animation: cmBlink 1.2s ease-in-out infinite; }
@keyframes cmBlink { 50% { opacity: .35; } }

/* ───── 一時停止 ───── */
.cm-pause { background: rgba(251, 244, 228, .8); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); z-index: 35; }
.cm-pause-panel { display: flex; flex-direction: column; align-items: center; gap: 3cqw; padding: 7cqw 6cqw; }
.cm-pause-panel .cm-btn { min-width: 60cqw; }
.cm-big { font: 800 clamp(28px, 9cqw, 48px)/1 var(--disp); letter-spacing: .2em; color: var(--shu-d); }

/* ───── 結果 ───── */
.cm-result { background: var(--tex), rgba(251, 244, 228, .96); justify-content: flex-start; overflow-y: auto; gap: 2.6cqw; touch-action: pan-y; padding-top: max(6cqw, env(safe-area-inset-top)); z-index: 32; }
.cm-result > * { flex: none; }
.cm-res-head { min-height: 22cqw; display: grid; place-items: center; width: 100%; animation: cmEnter .6s cubic-bezier(.34, 1.56, .64, 1) both; }
.cm-res-head img { width: 70cqw; height: auto; display: block; }
.cm-res-head b { position: relative; font: 800 clamp(36px, 13cqw, 70px)/1 var(--disp); letter-spacing: .04em; color: transparent;
    background: linear-gradient(180deg, #FFE27A, #F2A71B 45%, var(--shu)); -webkit-background-clip: text; background-clip: text;
    -webkit-text-stroke: .02em var(--ink); filter: drop-shadow(.04em 0 0 var(--washi)) drop-shadow(-.04em 0 0 var(--washi)) drop-shadow(0 .04em 0 var(--washi)) drop-shadow(0 -.04em 0 var(--washi)) drop-shadow(0 .08em 0 var(--ink)); }
.cm-res-head.teal b { background-image: linear-gradient(180deg, #CFF3EE, #4CB7B1 50%, var(--teal)); }
.cm-res-stage { font: 800 clamp(13px, 3.9cqw, 18px)/1.4 var(--disp); color: var(--mute); letter-spacing: .08em; margin-top: -1cqw; }
.cm-res-scorebox { display: flex; align-items: center; gap: 5cqw; }
.cm-hanko { width: 21cqw; height: 21cqw; border-radius: 12%; display: grid; place-items: center; rotate: -8deg;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .25), transparent 50%), var(--shu);
    box-shadow: inset 0 0 0 1.4cqw var(--shu), inset 0 0 0 1.9cqw rgba(255, 240, 220, .85), 0 .3em .6em rgba(184, 48, 28, .35);
    animation: cmStamp .5s .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.has-ui_hanko .cm-hanko { background: url(assets/ui_hanko.webp) center / contain no-repeat; box-shadow: none; }
.cm-hanko b { font: 800 13cqw/1 var(--disp); color: #FFF4E6; }
.cm-hanko.fail { background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .25), transparent 50%), var(--teal); box-shadow: inset 0 0 0 1.4cqw var(--teal), inset 0 0 0 1.9cqw rgba(230, 255, 250, .85), 0 .3em .6em rgba(30, 140, 140, .35); }
@keyframes cmStamp { 0% { opacity: 0; transform: scale(2.4); } 60% { opacity: 1; transform: scale(.92); } 100% { transform: scale(1); } }
.cm-res-score { display: flex; flex-direction: column; align-items: flex-start; }
.cm-res-score small { font: 800 clamp(11px, 3.2cqw, 15px)/1 var(--body); letter-spacing: .3em; color: var(--mute); }
.cm-res-score b { font: 800 clamp(34px, 11cqw, 58px)/1.05 var(--disp); font-variant-numeric: tabular-nums; }
.cm-res-record { font: 800 clamp(11px, 3.2cqw, 15px)/1 var(--body); color: var(--washi); background: var(--shu); padding: .4em .8em; border-radius: 99px; letter-spacing: .1em; animation: cmEnter .5s 1.2s both; }
.cm-res-record img { height: 9cqw; width: auto; display: block; }
.cm-res-break { list-style: none; padding: 0; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 1cqw 3cqw; }
.cm-res-break li { display: flex; justify-content: space-between; gap: 1em; font: 700 clamp(11px, 3.2cqw, 15px)/1.5 var(--body); border-bottom: 1px dashed rgba(201, 160, 74, .7); padding: .2em .2em; }
.cm-res-break li b { font: 800 1.05em/1.5 var(--disp); }
.cm-res-new { width: 100%; text-align: left; }
.cm-res-new > p { font: 800 clamp(12px, 3.6cqw, 17px)/1.3 var(--disp); color: var(--shu-d); margin-bottom: 1.4cqw; letter-spacing: .08em; }
.cm-res-newcards { display: flex; gap: 2cqw; overflow-x: auto; padding: 1cqw .5cqw 2cqw; touch-action: pan-x; --cw: 17cqw; --ch: calc(var(--cw) * 1.4); }
.cm-res-newcards .cm-card { cursor: default; animation: cmEnter .4s both; }
.cm-res-btns { display: flex; flex-direction: column; gap: 2.6cqw; align-items: center; padding-bottom: 4cqw; width: 100%; }
.cm-res-btns > .cm-btn { min-width: 74cqw; }
.cm-res-btns-top { padding-bottom: 0; }
.cm-res-btns-top .cm-btn-main { min-width: 80cqw; }
.cm-res-btns-top .cm-row .cm-btn { min-width: 38cqw; padding-left: 1em; padding-right: 1em; }
.cm-res-match { position: relative; width: 100%; text-align: left;
    background: var(--tex), linear-gradient(180deg, #FFFDF7, var(--washi)); border: 2px solid var(--gold); border-radius: 20px; padding: 4cqw 4.4cqw 3cqw;
    box-shadow: inset 0 0 0 4px var(--washi), inset 0 0 0 5.5px rgba(30, 140, 140, .5), 0 .4em 1em rgba(43, 36, 32, .12); }
.cm-res-lead { margin-bottom: 1.8cqw; font: 700 clamp(12px, 3.6cqw, 17px)/1.4 var(--body); color: var(--mute); }
.cm-res-job { display: flex; align-items: center; gap: 3.4cqw; }
.cm-res-job img { width: 24cqw; height: 24cqw; border-radius: 50%; object-fit: cover; border: 3px solid var(--gold); background: var(--jl, var(--washi)); flex: none; box-shadow: 0 0 0 3px #fff; }
.cm-res-job > div { min-width: 0; }
.cm-res-type { margin-bottom: .35em; font: 800 clamp(11px, 3.1cqw, 14px)/1.3 var(--body); letter-spacing: .1em; color: var(--jt, var(--shu-d)); }
.cm-res-name { font: 800 clamp(17px, 5.2cqw, 28px)/1.25 var(--disp); white-space: nowrap; letter-spacing: -.01em; }
.cm-res-reason { margin: 2.6cqw 0 0; padding: 2.2cqw 3cqw; border-radius: 12px; background: var(--jl, #FFF2CF); font: 800 clamp(13px, 3.7cqw, 17px)/1.6 var(--body); line-break: strict; }
.cm-res-desc { margin: 2.2cqw 0; font: 500 clamp(13px, 3.7cqw, 17px)/1.75 var(--body); line-break: strict; }
.cm-res-barhead { font: 800 clamp(12px, 3.4cqw, 16px)/1.3 var(--disp); margin-bottom: 1.4cqw; }
.cm-res-bars { display: flex; flex-direction: column; gap: 1.3cqw; }
.cm-res-bar { display: grid; grid-template-columns: 9.2em 1fr 3.9em; align-items: center; gap: .6em; font: 700 clamp(10.5px, 2.9cqw, 14px)/1 var(--body); white-space: nowrap; }
.cm-res-bar i { height: 1.1em; background: rgba(43, 36, 32, .07); border-radius: 999px; overflow: hidden; }
.cm-res-bar em { display: block; height: 100%; border-radius: inherit; width: 0; transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.cm-res-bar span:last-child { text-align: right; color: var(--mute); }
.cm-res-bar.top span:first-child { font-weight: 900; }
.cm-res-bar.none { opacity: .45; }
.cm-res-small { margin: 2.2cqw 0 0; font-size: clamp(11px, 2.8cqw, 13.5px); color: var(--mute); line-height: 1.6; }

/* ───── 札の巻物（ステージ選択） ───── */
.cm-select, .cm-dexscr, .cm-howto { justify-content: flex-start; overflow-y: auto; touch-action: pan-y; gap: 3cqw; padding-top: max(3cqw, env(safe-area-inset-top)); background: var(--tex), linear-gradient(180deg, rgba(222, 242, 240, .9), rgba(251, 244, 228, .96) 30%); }
.cm-select > *, .cm-dexscr > *, .cm-howto > * { flex: none; }
.cm-select-lead { font: 700 clamp(12px, 3.5cqw, 16px)/1.5 var(--body); color: var(--mute); }
.cm-stage-list { width: 100%; display: flex; flex-direction: column; gap: 2.8cqw; padding-bottom: 4cqw; }
.cm-stage-card {
    position: relative; display: grid; grid-template-columns: 31cqw 1fr; gap: 3cqw; align-items: center; text-align: left; cursor: pointer; width: 100%;
    padding: 2.2cqw; border-radius: 18px; color: var(--ink); font: inherit;
    background: var(--tex), linear-gradient(90deg, #FFFDF7, var(--washi)); border: 2px solid var(--gold);
    box-shadow: inset 0 0 0 3px var(--washi), inset 0 0 0 4px rgba(226, 69, 44, .35), 0 .3em 0 #A9833A; transition: transform .12s;
}
.cm-stage-card:active { transform: scale(.98); }
.cm-stage-scene { width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; border: 1.5px solid var(--gold); display: grid; place-items: center; background: var(--scene-bg, linear-gradient(180deg, #CDEBF0, #FBF4E4)); }
.cm-stage-scene img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-stage-scene .cm-scene-crest { width: 62%; aspect-ratio: 1; }
.cm-stage-scene .cm-scene-crest svg, .cm-stage-scene .cm-scene-crest img { width: 100%; height: 100%; display: block; }
.cm-stage-info { min-width: 0; display: flex; flex-direction: column; gap: .3em; }
.cm-stage-label { font: 800 clamp(11px, 3cqw, 14px)/1 var(--body); letter-spacing: .2em; color: var(--shu-d); }
.cm-stage-name { font: 800 clamp(17px, 5.4cqw, 27px)/1.15 var(--disp); letter-spacing: .08em; }
.cm-stage-job { font: 700 clamp(11px, 3.1cqw, 14px)/1.3 var(--body); color: var(--jt, var(--teal)); }
.cm-stage-meta { display: flex; align-items: center; gap: 2cqw; margin-top: .2em; }
.cm-stage-stars { display: flex; gap: .15em; }
.cm-stage-stars .cm-star-ico { width: 5.6cqw; height: 5.6cqw; }
.cm-stage-stars .cm-star-ico.off { filter: grayscale(1) opacity(.28); }
.cm-stage-best { font: 700 clamp(11px, 3cqw, 14px)/1 var(--body); color: var(--mute); }
.cm-stage-best b { font-family: var(--disp); color: var(--ink); }
.cm-stage-card.locked { cursor: default; filter: grayscale(.8); opacity: .75; }
.cm-stage-lock { position: absolute; inset: 0; border-radius: 16px; display: flex; align-items: center; justify-content: center; gap: .5em; background: rgba(245, 240, 230, .72); font: 800 clamp(12px, 3.6cqw, 17px)/1.4 var(--body); color: var(--ink); }
.cm-stage-lock i { width: 1.4em; height: 1.6em; display: inline-block; background: linear-gradient(180deg, #E8C366, #C9A04A); border-radius: 3px; position: relative; top: .15em; }
.cm-stage-lock i::before { content: ""; position: absolute; left: 22%; right: 22%; top: -.55em; height: .7em; border: .16em solid #C9A04A; border-bottom: 0; border-radius: .5em .5em 0 0; }
.cm-stage-card .cm-new { position: absolute; right: -1cqw; top: -1.6cqw; font: 900 clamp(10px, 2.8cqw, 13px)/1 var(--body); color: #fff; background: var(--shu); padding: .45em .8em; border-radius: 99px; animation: cmPulse 1.4s ease-in-out infinite; }

/* ───── 図鑑 ───── */
.cm-tabs { display: flex; gap: 2cqw; width: 100%; }
.cm-tab { flex: 1; min-height: 46px; cursor: pointer; border-radius: 14px; font: 800 clamp(14px, 4.2cqw, 20px)/1 var(--disp); letter-spacing: .2em; background: rgba(255, 253, 246, .9); border: 2px solid rgba(201, 160, 74, .7); color: var(--mute); }
.cm-tab.on { background: var(--shu); color: var(--washi); border-color: var(--gold); box-shadow: inset 0 0 0 2px rgba(255, 238, 200, .5); }
.cm-dex-body { width: 100%; padding-bottom: 5cqw; }
.cm-dex-sum { display: flex; justify-content: center; gap: 2cqw; flex-wrap: wrap; margin-bottom: 3cqw; }
.cm-dex-sum span { padding: .45em 1em; border-radius: 99px; background: rgba(255, 255, 255, .85); border: 1.5px solid rgba(201, 160, 74, .6); font: 700 clamp(11px, 3.2cqw, 15px)/1.2 var(--body); }
.cm-dex-sum b { font-family: var(--disp); }
.cm-dex-jobs { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.cm-dex-tile { position: relative; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1.4cqw; padding: 3cqw 2cqw 2.6cqw; border-radius: 18px; font: inherit; color: var(--ink);
    background: var(--tex), linear-gradient(180deg, var(--jl), #FFFDF7 70%); border: 2px solid var(--gold); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .7), 0 .25em 0 #A9833A; }
.cm-dex-tile img { width: 28cqw; height: 28cqw; border-radius: 50%; object-fit: cover; border: 3px solid var(--jc); background: #fff; }
.cm-dex-tile b { font: 800 clamp(13px, 4cqw, 19px)/1.25 var(--disp); word-break: keep-all; }
.cm-dex-tile small { font: 700 clamp(11px, 3cqw, 14px)/1 var(--body); color: var(--jt); }
.cm-dex-tile i { display: block; width: 80%; height: 6px; border-radius: 99px; background: rgba(43, 36, 32, .08); overflow: hidden; }
.cm-dex-tile i em { display: block; height: 100%; background: var(--jc); border-radius: inherit; }
.cm-dex-tile .cm-dex-crest { position: absolute; left: 2cqw; top: 2cqw; width: 9cqw; height: 9cqw; }
.cm-dex-tile .cm-dex-crest svg, .cm-dex-tile .cm-dex-crest img { width: 100%; height: 100%; display: block; }
.cm-dex-trend { margin-top: 3cqw; padding: 3cqw 3.4cqw; border-radius: 16px; background: rgba(255, 255, 255, .8); border: 1.5px solid rgba(201, 160, 74, .6); text-align: left; font: 700 clamp(12px, 3.4cqw, 16px)/1.6 var(--body); }
.cm-dex-trend b { font-family: var(--disp); color: var(--shu-d); }
.cm-dex-group { margin-bottom: 4cqw; text-align: left; }
.cm-dex-group > p { font: 800 clamp(14px, 4.2cqw, 20px)/1.2 var(--disp); margin-bottom: 2cqw; letter-spacing: .1em; display: flex; align-items: center; gap: .5em; }
.cm-dex-group > p small { font: 700 .7em/1 var(--body); color: var(--mute); letter-spacing: 0; }
.cm-dex-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4cqw; --cw: 19.5cqw; --ch: calc(var(--cw) * 1.4); justify-items: center; }
.cm-dex-grid .cm-card .cm-back-crest { width: 46cqi; height: 46cqi; }
.cm-dex-grid .cm-card.unknown .cm-back { filter: grayscale(.85) brightness(1.1); }
.cm-dex-grid .cm-card .cm-goldmark { position: absolute; right: -4px; top: -4px; z-index: 4; width: 30%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF4C0, #E2AE2C); border: 1.5px solid var(--ink); }
/* くわしい画面（モーダル） */
.cm-modal { position: absolute; inset: 0; z-index: 55; display: grid; place-items: center; padding: 5cqw; background: rgba(251, 244, 228, .82); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.cm-modal-panel { position: relative; width: 100%; max-height: 100%; overflow-y: auto; touch-action: pan-y; animation: cmEnter .35s both;
    background: var(--tex), linear-gradient(180deg, #FFFDF7, var(--washi)); border: 2px solid var(--gold); border-radius: 20px; padding: 6cqw 5cqw 5cqw;
    box-shadow: inset 0 0 0 4px var(--washi), inset 0 0 0 5.5px rgba(226, 69, 44, .5), 0 .6em 1.6em rgba(43, 36, 32, .2); }
.cm-modal-close { position: absolute; right: 2cqw; top: 2cqw; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--gold); background: #fff; cursor: pointer; font: 800 22px/1 var(--disp); z-index: 2; }
.cm-modal-body { display: flex; flex-direction: column; align-items: center; gap: 2.6cqw; text-align: center; }
.cm-modal-card { --cw: 40cqw; --ch: calc(var(--cw) * 1.4); }
.cm-modal-card .cm-card { cursor: default; animation: cmFlipIn .7s cubic-bezier(.34, 1.4, .55, 1) both; }
@keyframes cmFlipIn { from { transform: rotateY(-180deg) scale(.8); } }
.cm-modal-kind { font: 800 clamp(11px, 3.2cqw, 15px)/1 var(--body); letter-spacing: .2em; color: var(--washi); background: var(--teal); padding: .45em 1em; border-radius: 99px; }
.cm-modal-title { font: 800 clamp(20px, 6.4cqw, 32px)/1.3 var(--disp); letter-spacing: .06em; }
.cm-modal-sub { font: 800 clamp(12px, 3.6cqw, 17px)/1.3 var(--body); color: var(--jt, var(--shu-d)); }
.cm-modal-text { font: 500 clamp(13px, 3.8cqw, 17.5px)/1.8 var(--body); line-break: strict; text-align: left; }
.cm-modal-meta { font: 700 clamp(11px, 3.1cqw, 14px)/1.4 var(--body); color: var(--mute); }
.cm-job-hero { width: 100%; display: flex; align-items: center; gap: 4cqw; text-align: left; padding: 3cqw; border-radius: 16px; background: var(--jl); }
.cm-job-hero img { width: 26cqw; height: 26cqw; border-radius: 50%; object-fit: cover; border: 3px solid var(--jc); background: #fff; flex: none; }
.cm-job-hero p { font: 800 clamp(11px, 3.1cqw, 14px)/1.3 var(--body); color: var(--jt); letter-spacing: .1em; }
.cm-job-hero h3 { margin: .2em 0 0; font: 800 clamp(14px, 4.4cqw, 23px)/1.25 var(--disp); white-space: nowrap; letter-spacing: -.02em; }
.cm-job-hero > div { min-width: 0; }
.cm-job-sec { width: 100%; text-align: left; }
.cm-job-sec > b { display: block; font: 800 clamp(14px, 4.2cqw, 20px)/1.3 var(--disp); color: var(--shu-d); margin-bottom: 1.4cqw; letter-spacing: .08em; }
.cm-job-sec p { font: 500 clamp(13px, 3.8cqw, 17px)/1.8 var(--body); line-break: strict; }
.cm-job-flow { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 1.4cqw; counter-reset: f; }
.cm-job-flow li { display: grid; grid-template-columns: 8cqw 1fr; gap: 2.4cqw; align-items: center; padding: 1.8cqw 2.6cqw; border-radius: 12px; background: rgba(255, 255, 255, .85); border: 1.5px solid rgba(201, 160, 74, .55); font: 500 clamp(12px, 3.5cqw, 16px)/1.5 var(--body); }
.cm-job-flow li::before { counter-increment: f; content: counter(f); width: 8cqw; height: 8cqw; border-radius: 50%; display: grid; place-items: center; background: var(--jc); color: var(--jbt, #fff); font: 800 clamp(12px, 3.8cqw, 18px)/1 var(--disp); }
.cm-job-flow li b { display: block; font: 800 1.02em/1.3 var(--disp); }
.cm-job-fit { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 1cqw; }
.cm-job-fit li { font: 700 clamp(13px, 3.7cqw, 17px)/1.6 var(--body); padding-left: 1.3em; position: relative; }
.cm-job-fit li::before { content: ""; position: absolute; left: 0; top: .55em; width: .65em; height: .65em; border-radius: 50%; background: var(--jc); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--gold); }
.cm-job-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; --cw: 24cqw; --ch: calc(var(--cw) * 1.4); justify-items: center; }
.cm-job-locked { padding: 2.6cqw 3cqw; border-radius: 12px; background: rgba(43, 36, 32, .05); color: var(--mute); font: 700 clamp(12px, 3.4cqw, 16px)/1.6 var(--body); }

/* ───── あそびかた ───── */
.cm-steps { list-style: none; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 2.4cqw; }
.cm-steps li { display: flex; align-items: flex-start; gap: 3cqw; text-align: left; padding: 3cqw 3.4cqw; border-radius: 18px;
    background: var(--tex), linear-gradient(180deg, #FFFDF7, var(--washi)); border: 2px solid var(--gold); box-shadow: inset 0 0 0 3px var(--washi), inset 0 0 0 4px rgba(226, 69, 44, .3); }
.cm-steps li > b { flex: none; width: 9cqw; height: 9cqw; border-radius: 50%; display: grid; place-items: center; background: var(--shu); color: var(--washi); font: 800 clamp(14px, 4.6cqw, 23px)/1 var(--disp); box-shadow: inset 0 0 0 2px var(--gold-l); }
.cm-steps li:nth-child(2) > b { background: var(--teal); }
.cm-steps li:nth-child(4) > b { background: #8B5CF6; }
.cm-steps li:nth-child(5) > b { background: #C9A04A; }
.cm-steps li > div { flex: 1; min-width: 0; }
.cm-steps p { font: 700 clamp(13px, 3.8cqw, 17.5px)/1.65 var(--body); line-break: strict; }
.cm-steps em { font-style: normal; color: var(--shu-d); font-weight: 900; }
.cm-example { display: flex; align-items: center; justify-content: center; gap: 2cqw; margin-top: 2cqw; --cw: 18cqw; --ch: calc(var(--cw) * 1.4); }
.cm-example .cm-card { cursor: default; }
.cm-example .cm-x { font: 800 clamp(16px, 6cqw, 30px)/1 var(--disp); color: var(--gold); }
.cm-ex-cap { text-align: center; font-size: clamp(12px, 3.3cqw, 15px) !important; color: var(--mute); margin-top: 1cqw; }
.cm-howto .cm-btn-main { min-width: 60cqw; margin-bottom: 4cqw; }

.cm-loading { position: absolute; z-index: 80; inset: 0; display: grid; place-content: center; gap: 2cqw; justify-items: center; background: var(--tex), var(--washi); font: 800 clamp(12px, 3cqw, 15px)/1 var(--disp); letter-spacing: .4em; transition: opacity .4s; }
.cm-loading i { width: 10cqw; height: 14cqw; border-radius: 1.4cqw; background: var(--shu); box-shadow: inset 0 0 0 .8cqw var(--washi), inset 0 0 0 1.1cqw var(--gold); animation: cmLoadFlip 1s ease-in-out infinite; }
@keyframes cmLoadFlip { 50% { transform: rotateY(180deg); background: var(--teal); } }
.cm-loading.off { opacity: 0; pointer-events: none; }

/* ───── 専用画像が届いたときの見た目（manifest.js の READY にある画像だけ has-◯◯ が付く） ───── */
/* 人物: 画像に金の丸枠が描かれているので、CSS の枠は外して大きく出す */
.has-portrait_movie .cm-f-person .cm-f-art img { width: 96cqi; height: 96cqi; margin-top: 4cqi; border: 0; border-radius: 0; box-shadow: none; object-fit: contain; filter: drop-shadow(0 1cqi 1.4cqi rgba(43, 36, 32, .2)); }
.has-portrait_movie .cm-f-person .cm-f-art::before { opacity: .25; }
.has-portrait_movie .cm-res-job img, .has-portrait_movie .cm-dex-tile img { border: 0; box-shadow: none; background: none; object-fit: contain; }
.has-joy_movie .cm-cine-crew { width: 30cqw; height: 30cqw; border-radius: 0; border: 0; box-shadow: none; background: none; overflow: visible; margin-top: -3cqw; filter: drop-shadow(0 .5em .6em rgba(43, 36, 32, .25)); }
.has-joy_movie .cm-cine-crew img { object-fit: contain; }
.has-joy_movie .cm-job-hero img { border: 0; border-radius: 0; background: none; object-fit: contain; width: 30cqw; height: 30cqw; }
/* 道具の絵は札いっぱいに */
.has-tool_camera .cm-f-tool .cm-f-art { width: 86cqi; height: 80cqi; }
/* 札の裏: 画像のふちをそのまま見せる */
.cm-back.bk-img { border: 0; border-radius: 7% / 5%; background-color: transparent; background-size: 100% 100%; box-shadow: 0 3px 0 rgba(43, 36, 32, .55), 0 4px 8px rgba(43, 36, 32, .18); }
/* はんこ: 画像は朱の枠だけなので、文字を朱で入れる */
.has-ui_hanko .cm-hanko { box-shadow: none; background: url(assets/ui_hanko.webp) center / contain no-repeat, radial-gradient(circle, #FFFBF2 0 60%, transparent 61%) center / 100% 100% no-repeat; }
.has-ui_hanko .cm-hanko b { color: var(--shu-d); }
.has-ui_hanko .cm-hanko.fail { background: url(assets/ui_hanko.webp) center / contain no-repeat; filter: hue-rotate(175deg) saturate(.8); }
/* 錠前 */
.has-ui_lock .cm-stage-lock i { width: 2.1em; height: 2.6em; top: 0; background: url(assets/ui_lock.webp) center / contain no-repeat; border-radius: 0; }
.has-ui_lock .cm-stage-lock i::before { display: none; }
/* 告知の帯をリボンの画像に */
.has-ui_ribbon .cm-banner b { clip-path: none; border: 0; box-shadow: none; padding: .3em 1.6em .55em; background: url(assets/ui_ribbon.webp) center / 100% 100% no-repeat;
    filter: drop-shadow(0 .12em .25em rgba(43, 36, 32, .25)); font-size: clamp(26px, 9.4cqw, 50px); }
/* ボタンを漆塗りの画像に（両端の丸みを保ったまま横に伸ばす） */
.has-ui_btn_main .cm-btn-main { background: none; border: 0 solid transparent; box-shadow: none; border-width: 0 1.5em; border-image: url(assets/ui_btn_main.webp) 0 90 fill / 0 1.5em stretch; padding-left: .6em; padding-right: .6em; filter: drop-shadow(0 .3em .45em rgba(184, 48, 28, .35)); }
.has-ui_btn_sub .cm-btn-sub { background: none; border: 0 solid transparent; box-shadow: none; border-width: 0 1.4em; border-image: url(assets/ui_btn_sub.webp) 0 90 fill / 0 1.4em stretch; padding-left: .5em; padding-right: .5em; filter: drop-shadow(0 .2em .3em rgba(169, 131, 58, .35)); }
/* 結果の扇の飾り・水引 */
/* 得点の右横の飾りは梅の花（扇は放射状で旭日旗に見えるおそれがあるため使わない） */
.has-fx_plum .cm-res-scorebox::after { content: ""; width: 12cqw; height: 12cqw; flex: none; background: url(assets/fx_plum.webp) center / contain no-repeat; rotate: 12deg; }
.cm-res-unlock { font: 800 clamp(13px, 3.9cqw, 18px)/1.4 var(--disp); color: var(--washi); background: var(--teal); padding: .5em 1.2em; border-radius: 999px; letter-spacing: .06em; animation: cmEnter .5s 1.4s both; }
.has-fx_mizuhiki .cm-res-match::before { content: ""; position: absolute; right: 2cqw; top: -5cqw; width: 18cqw; height: 18cqw; background: url(assets/fx_mizuhiki.webp) center / contain no-repeat; }

@media (prefers-reduced-motion: reduce) {
    .cm-logo-wrap, .cm-btn-big, .cm-wm-row i, .cm-cine-rays, .cm-card.gold .cm-face::after { animation: none !important; }
    .cm-card-in { transition-duration: .2s; }
}