/* CREW CARDS 作り込み版 — 明るく豪華なトレカ風ファンタジー（ロイヤルバイオレット・金・白・紅・空色） */
:root {
    --ink: #2A2140;
    --mute: #6B6383;
    --cream: #FFFBF2;
    --parch: #FFF3D6;
    --violet: #6A3FD6;
    --violet-d: #4A2A9E;
    --violet-l: #A88BFF;
    --gold: #F5C542;
    --gold-d: #C98A00;
    --gold-l: #FFF3B0;
    --crimson: #E63946;
    --sky: #4FB3FF;
    --teal: #14B8A6;
    --green: #2FBF71;
    --disp: "Cinzel", "Shippori Mincho B1", serif;
    --mincho: "Shippori Mincho B1", "Zen Kaku Gothic New", serif;
    --body: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
    --goldgrad: linear-gradient(160deg, #FFF7CF 0%, #F5C542 28%, #FFF0A8 48%, #D99A10 72%, #FFE58A 100%);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { background: #F3EEFF; color: var(--ink); font-family: var(--body); font-weight: 500; touch-action: none; user-select: none; -webkit-user-select: none; overscroll-behavior: none; }
button { font: inherit; color: inherit; }
img { -webkit-user-drag: none; user-select: none; }
.cc-backdrop { position: fixed; inset: -40px; background: radial-gradient(circle at 30% 20%, #FFFFFF, #E8E0FF 45%, #CFE9FF 100%); }
.cc-backdrop::after { content: ""; position: absolute; inset: 0; background: url(assets/bg_ch1.webp) center top / cover; opacity: .35; filter: blur(26px) saturate(1.2); }
.cc-stage { position: fixed; inset: 0; height: 100vh; height: 100dvh; overflow: hidden; background: var(--cream); container-type: size; }
@media (min-width: 600px) {
    .cc-stage { inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); height: min(calc(100dvh - 48px), 960px); width: calc(min(calc(100dvh - 48px), 960px) * .5); border-radius: 22px; box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(245, 197, 66, .7), 0 30px 80px rgba(74, 42, 158, .28); }
}
.cc-stage [hidden] { display: none !important; }

/* ───── 共通 ───── */
.cc-scr { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; z-index: 10; overflow: hidden; }
.cc-scroll { overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.cc-pad { padding: max(3.4cqw, env(safe-area-inset-top)) 4.4cqw max(5cqw, env(safe-area-inset-bottom)); }
.cc-row { display: flex; gap: 2.4cqw; justify-content: center; flex-wrap: wrap; }
.cc-grow { flex: 1; }
.cc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4em; cursor: pointer; text-decoration: none;
    min-height: 44px; padding: .55em 1.3em; border-radius: 14px; border: 3px solid transparent;
    font: 900 clamp(13px, 3.9cqw, 19px)/1.2 var(--body); letter-spacing: .05em; word-break: keep-all; text-align: center;
    transition: transform .12s, filter .2s;
}
.cc-btn:active { transform: translateY(2px) scale(.97); }
.cc-btn-main {
    color: #fff; text-shadow: 0 .08em 0 rgba(40, 15, 100, .55);
    background: linear-gradient(180deg, #9A7BFF, #6A3FD6 55%, #5530B8) padding-box, var(--goldgrad) border-box;
    box-shadow: 0 .28em 0 #3B2190, 0 .6em 1.2em rgba(106, 63, 214, .35), inset 0 .12em 0 rgba(255, 255, 255, .35);
}
.cc-btn-red { background: linear-gradient(180deg, #FF7A85, #E63946 55%, #C1121F) padding-box, var(--goldgrad) border-box; box-shadow: 0 .28em 0 #8E0E19, 0 .6em 1.2em rgba(230, 57, 70, .35), inset 0 .12em 0 rgba(255, 255, 255, .35); }
.cc-btn-sub { color: var(--violet-d); background: linear-gradient(180deg, #FFFFFF, #FFF6E0) padding-box, var(--goldgrad) border-box; box-shadow: 0 .24em 0 #C9A04A, 0 .4em .9em rgba(106, 63, 214, .15); }
.cc-btn-xl { font-size: clamp(18px, 6cqw, 30px); padding: .45em 2.2em .5em; border-radius: 18px; }
.cc-btn:disabled { filter: grayscale(.9) opacity(.5); cursor: default; }
.cc-link { color: var(--violet-d); font: 700 clamp(12px, 3.4cqw, 15px)/1.2 var(--body); background: none; border: 0; padding: .7em .4em; text-decoration: underline; cursor: pointer; min-height: 44px; }
.cc-back { width: 44px; height: 44px; flex: none; border-radius: 50%; cursor: pointer; font: 900 22px/1 var(--disp); color: var(--violet-d); background: linear-gradient(#fff, #fff) padding-box, var(--goldgrad) border-box; border: 3px solid transparent; box-shadow: 0 3px 0 #C9A04A; }
.cc-topbar { width: 100%; display: flex; align-items: center; gap: 2.4cqw; flex: none; }
.cc-scr-title { flex: 1; margin: 0; font: 800 clamp(17px, 5.4cqw, 28px)/1.1 var(--mincho); color: var(--violet-d); text-align: left; }
.cc-scr-title small { display: block; font: 700 clamp(12px, 3.2cqw, 14px)/1 var(--disp); letter-spacing: .2em; color: var(--gold-d); margin-bottom: .3em; }
.cc-panel { background: linear-gradient(#fff, #fff) padding-box, var(--goldgrad) border-box; border: 3px solid transparent; border-radius: 18px; box-shadow: 0 .3em 0 rgba(201, 138, 0, .55), 0 .8em 1.6em rgba(74, 42, 158, .12); }
.cc-h2 { margin: 0 0 .6em; font: 800 clamp(15px, 4.6cqw, 22px)/1.3 var(--mincho); color: var(--violet-d); }

/* 金の文字（見出し・演出） */
.cc-gold {
    font-family: var(--disp); font-weight: 900; letter-spacing: .04em; line-height: 1;
    background: linear-gradient(180deg, #FFFDF0 0%, #FFE27A 30%, #F2B21C 55%, #FFE9A0 75%, #D08A00 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    -webkit-text-stroke: .035em #7A3FD0;
    filter: drop-shadow(0 .05em 0 #fff) drop-shadow(0 .09em 0 #5B2DBF) drop-shadow(0 .2em .25em rgba(91, 45, 191, .35));
}
.cc-word { display: block; text-align: center; font-size: clamp(30px, 11cqw, 60px); white-space: nowrap; }
.cc-word-sm { font-size: clamp(22px, 8cqw, 44px); }
.cc-wordimg { width: 86cqw; height: auto; display: block; margin: 0 auto; }

/* ───── カード ───── */
.cc-card {
    --c: var(--crimson);
    position: relative; flex: none; width: 7.4em; height: 10.6em; font-size: 3.75cqw;
    border-radius: .72em; background: var(--goldgrad);
    box-shadow: 0 .12em 0 #B07A00, 0 .5em 1em rgba(74, 42, 158, .25);
    font-family: var(--body); color: var(--ink); text-align: center; cursor: pointer;
}
.cc-card.rar-basic { background: linear-gradient(160deg, #FFFFFF 0%, #D9DEEA 30%, #FFFFFF 50%, #B7BECF 75%, #F2F4F8 100%); box-shadow: 0 .12em 0 #8E95A8, 0 .5em 1em rgba(74, 42, 158, .2); }
.cc-card.rar-rare { background: linear-gradient(160deg, #FFF7CF, #F5C542 20%, #FF9FD0 38%, #9FD8FF 55%, #F5C542 75%, #FFF3B0); background-size: 220% 220%; animation: ccFoil 4s linear infinite; }
@keyframes ccFoil { to { background-position: 220% 220%; } }
.cc-card.rar-status { background: linear-gradient(160deg, #F2F2F5, #C9CAD6 50%, #EDEDF2); }
.cc-card-in { position: absolute; inset: .26em; border-radius: .52em; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 34%, #fff) 0%, #FFFBF2 58%, #FFF3D6 100%); }
.cc-card-art { position: absolute; left: .3em; right: .3em; top: .3em; height: 4.55em; border-radius: .42em; overflow: hidden; background: color-mix(in srgb, var(--c) 30%, #fff); box-shadow: 0 0 0 .1em #fff, 0 0 0 .2em color-mix(in srgb, var(--c) 70%, #C98A00); }
.cc-card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-card-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.cc-card-name {
    position: absolute; left: .05em; right: .05em; top: 4.62em; height: 1.42em; z-index: 3;
    display: grid; place-content: center; padding: 0 .9em;
    font: 800 .86em/1 var(--mincho); color: #fff; letter-spacing: .02em; white-space: nowrap;
    background: linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c) 60%, color-mix(in srgb, var(--c) 80%, #000));
    clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%);
    text-shadow: 0 .08em 0 rgba(0, 0, 0, .3);
}
.cc-card-name.long { font-size: .74em; }
.cc-card-name.xlong { font-size: .64em; }
.job-sales .cc-card-name { color: #3D2600; text-shadow: 0 .06em 0 rgba(255, 255, 255, .5); }
.cc-card-text {
    position: absolute; left: .55em; right: .55em; top: 6.25em; bottom: 1.05em; z-index: 3;
    display: flex; align-items: center; justify-content: center;
    font: 700 .7em/1.32 var(--body); color: #3A3150; word-break: keep-all; overflow-wrap: anywhere;
}
.cc-card-text em { font-style: normal; font-family: var(--disp); font-weight: 900; font-size: 1.18em; color: var(--ink); }
.cc-card-text em.up { color: #0E9F57; }
.cc-card-text em.down { color: #C1121F; }
.cc-card-text k, .cc-term { color: var(--violet); font-weight: 900; }
.cc-card-cost {
    position: absolute; left: -.42em; top: -.42em; z-index: 4; width: 2.05em; height: 2.05em; border-radius: 50%;
    display: grid; place-content: center;
    background: radial-gradient(circle at 34% 28%, #FFFFFF 0 8%, #B9A4FF 22%, #6A3FD6 60%, #3B2190) padding-box, var(--goldgrad) border-box;
    border: .16em solid transparent; box-shadow: 0 .1em 0 #8A5A00, 0 .2em .4em rgba(59, 33, 144, .35);
    font: 900 1.2em/1 var(--disp); color: #fff; text-shadow: 0 .06em 0 #2A1470;
}
.cc-card-foot { position: absolute; left: 0; right: 0; bottom: .3em; z-index: 3; display: flex; justify-content: center; align-items: center; gap: .3em; font: 900 .5em/1 var(--body); color: var(--mute); letter-spacing: .1em; }
.cc-card-foot i { width: .9em; height: .9em; transform: rotate(45deg); border-radius: .15em; background: var(--c); box-shadow: 0 0 0 .14em #fff, 0 0 0 .26em rgba(201, 138, 0, .7); }
.rar-rare .cc-card-foot i { background: linear-gradient(135deg, #FF9FD0, #9FD8FF); }
.cc-card-up { position: absolute; right: .5em; top: .5em; z-index: 4; font: 900 .62em/1 var(--disp); color: #fff; background: #0E9F57; border-radius: 999px; padding: .3em .55em; box-shadow: 0 0 0 .14em #fff; }
.cc-card.no { filter: saturate(.35) brightness(1.02); }
.cc-card.no .cc-card-cost { background: radial-gradient(circle at 34% 28%, #fff, #C9CAD6 55%, #8E8FA3) padding-box, var(--goldgrad) border-box; }
.job-movie { --c: #E63946; }
.job-web { --c: #2F9BFF; }
.job-game { --c: #8B5CF6; }
.job-sales { --c: #F0A500; }
.job-team { --c: #14B8A6; }
.job-status { --c: #8E8FA3; }
.cc-card.back { background: var(--goldgrad); }
.cc-card.back .cc-card-in { background: repeating-linear-gradient(45deg, #7B52E8 0 .6em, #6A3FD6 .6em 1.2em); display: grid; place-content: center; }
.cc-card.back .cc-card-in::after { content: "?"; font: 900 3.4em/1 var(--disp); color: #FFE27A; text-shadow: 0 .05em 0 #3B2190; }

/* ───── タイトル ───── */
.cc-title { justify-content: flex-start; padding: max(10cqw, env(safe-area-inset-top)) 4cqw max(4cqw, env(safe-area-inset-bottom)); gap: 2cqw; }
.cc-title-bg { position: absolute; inset: 0; z-index: -1; background: url(assets/bg_ch1.webp) center top / auto 58% no-repeat; }
.cc-title-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 251, 242, .1) 0%, rgba(243, 238, 255, .55) 38%, #FBF8FF 62%, var(--cream)); }
.cc-title-logo { position: relative; z-index: 2; margin-top: 2cqw; }
.cc-logo { width: 86cqw; height: auto; display: block; filter: drop-shadow(0 1.4cqw 2cqw rgba(74, 42, 158, .25)); animation: ccFloat 3.4s ease-in-out infinite; }
.cc-logo-text { margin: 4cqw 0 0; display: flex; flex-direction: column; align-items: center; font-size: clamp(42px, 15cqw, 84px); animation: ccFloat 3.4s ease-in-out infinite; }
.cc-logo-text .cc-big { font-size: 1.3em; margin-top: -.1em; }
.cc-logo-text small { margin-top: .3em; font: 800 clamp(13px, 4cqw, 20px)/1 var(--mincho); letter-spacing: .4em; color: #fff; background: linear-gradient(180deg, #9A7BFF, #6A3FD6); padding: .5em 1.2em .5em 1.6em; border-radius: 999px; box-shadow: 0 0 0 3px var(--gold); }
@keyframes ccFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.4cqw); } }
.cc-title-fan { position: absolute; left: 0; right: 0; top: 70cqw; height: 60cqw; z-index: 1; pointer-events: none; }
.cc-title-fan .cc-card { position: absolute; left: 50%; top: 0; font-size: max(18.4px, 4.9cqw); transform-origin: 50% 160%; transition: transform 1.2s cubic-bezier(.34, 1.3, .64, 1); }
.cc-title-fan .cc-card.flip { animation: ccFlip .8s ease-in-out; }
@keyframes ccFlip { 50% { scale: 0 1; } }
.cc-title-crew { position: relative; z-index: 2; display: flex; gap: 1.6cqw; margin-top: auto; }
.cc-title-crew img { width: 17cqw; height: 17cqw; border-radius: 50%; object-fit: cover; object-position: 50% 15%; background: #fff; border: 3px solid #fff; box-shadow: 0 0 0 3px var(--c), 0 .6em 1em rgba(74, 42, 158, .2); animation: ccBob 2.6s ease-in-out infinite; }
.cc-title-crew img:nth-child(2) { animation-delay: -.6s; }
.cc-title-crew img:nth-child(3) { animation-delay: -1.2s; }
.cc-title-crew img:nth-child(4) { animation-delay: -1.8s; }
@keyframes ccBob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-1.6cqw) rotate(2deg); } }
.cc-catch { position: relative; z-index: 2; margin: 1cqw 0 0; text-align: center; font: 800 clamp(14px, 4.4cqw, 22px)/1.5 var(--mincho); color: var(--violet-d); text-shadow: 0 0 .4em #fff, 0 0 .8em #fff; }
.cc-title-btns { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 2.4cqw; align-items: center; width: 100%; }
.cc-title-btns .cc-btn-main { animation: ccPulse 1.8s ease-in-out infinite; }
.cc-title-btns .cc-row { gap: 1.6cqw; flex-wrap: nowrap; }
.cc-title-btns .cc-btn-sub { font-size: clamp(12px, 3.3cqw, 16px); padding: .4em .8em; }
@keyframes ccPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.cc-title-stat { margin: 0; font: 700 clamp(12px, 3cqw, 14px)/1.4 var(--body); color: var(--mute); }
.cc-title-stat b { font-family: var(--disp); color: var(--gold-d); }
.cc-note { position: relative; z-index: 2; margin: 1.6cqw 0 0; text-align: center; font-size: clamp(12px, 3.2cqw, 13.5px); color: var(--mute); line-height: 1.6; word-break: keep-all; }
.cc-demo-tag { position: absolute; z-index: 3; top: max(3cqw, env(safe-area-inset-top)); left: 3cqw; font: 900 clamp(12px, 3.2cqw, 13px)/1 var(--disp); letter-spacing: .2em; background: var(--violet-d); color: #FFE27A; padding: .7em 1em; border-radius: 999px; box-shadow: 0 0 0 2px var(--gold); }
.cc-demo-tag::before { content: ""; display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: #FF7A85; margin-right: .6em; animation: ccBlink 1s steps(2) infinite; }
@keyframes ccBlink { 50% { opacity: 0; } }
.cc-sound { position: absolute; z-index: 3; top: max(2.4cqw, env(safe-area-inset-top)); right: 3cqw; min-width: 44px; min-height: 44px; cursor: pointer; padding: 0 .9em; border-radius: 999px; font: 900 clamp(12px, 3.2cqw, 14px)/1 var(--disp); color: var(--violet-d); background: linear-gradient(#fff, #fff) padding-box, var(--goldgrad) border-box; border: 3px solid transparent; }

/* ───── 章をえらぶ ───── */
.cc-chapters { background: linear-gradient(180deg, #E9E1FF, var(--cream) 45%); }
.cc-chlist { width: 100%; display: flex; flex-direction: column; gap: 3cqw; }
.cc-ch {
    position: relative; overflow: hidden; cursor: pointer; text-align: left; width: 100%;
    min-height: 34cqw; border-radius: 18px; padding: 3cqw 4cqw; border: 3px solid transparent;
    background: center 30% / cover no-repeat padding-box, var(--goldgrad) border-box;
    box-shadow: 0 .3em 0 rgba(201, 138, 0, .6), 0 .6em 1.4em rgba(74, 42, 158, .15);
    display: grid; grid-template-columns: 1fr auto; align-content: end; gap: .2em 2cqw;
}
.cc-ch::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 251, 242, .97) 38%, rgba(255, 251, 242, .3)); }
.cc-ch > * { position: relative; }
.cc-ch:active { transform: scale(.985); }
.cc-ch-no { grid-column: 1; font: 900 clamp(12px, 3cqw, 14px)/1 var(--disp); letter-spacing: .18em; color: var(--gold-d); }
.cc-ch-name { grid-column: 1; font: 800 clamp(17px, 5.6cqw, 28px)/1.15 var(--mincho); color: var(--violet-d); }
.cc-ch-stars { grid-column: 1; display: flex; gap: .15em; font-size: clamp(16px, 5cqw, 24px); line-height: 1; }
.cc-star { color: #D8D2E8; }
.cc-star.on { color: #F5B700; text-shadow: 0 0 .3em rgba(245, 183, 0, .6), 0 .06em 0 #A86E00; }
.cc-ch-best { grid-column: 1; font: 700 clamp(12px, 3.2cqw, 13px)/1.2 var(--body); color: var(--mute); }
.cc-ch-best b { font-family: var(--disp); color: var(--ink); }
.cc-ch-boss { position: absolute !important; right: 1cqw; bottom: 0; width: 30cqw; height: 30cqw; object-fit: contain; filter: drop-shadow(0 .6cqw 1cqw rgba(74, 42, 158, .3)); animation: ccBob 3s ease-in-out infinite; }
.cc-ch.locked { cursor: default; filter: grayscale(.8); }
.cc-ch.locked .cc-ch-boss { filter: brightness(0) opacity(.18); animation: none; }
.cc-ch-lock { position: absolute !important; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(245, 243, 250, .9); font: 900 clamp(12px, 3.8cqw, 18px)/1.4 var(--body); color: var(--mute); text-align: center; }
.cc-ch-tag { grid-column: 1; justify-self: start; font: 900 clamp(12px, 3.2cqw, 13px)/1 var(--body); color: #fff; background: var(--crimson); border-radius: 999px; padding: .4em .8em; }
.cc-hard { width: 100%; display: flex; align-items: center; gap: 3cqw; padding: 3cqw 4cqw; text-align: left; cursor: pointer; }
.cc-hard b { font: 800 clamp(14px, 4.2cqw, 19px)/1.2 var(--mincho); color: var(--crimson); }
.cc-hard p { margin: .2em 0 0; font: 700 clamp(12px, 3.1cqw, 14px)/1.5 var(--body); color: var(--mute); }
.cc-toggle { flex: none; width: 15cqw; height: 8cqw; min-height: 30px; border-radius: 999px; background: #D8D2E8; position: relative; transition: background .2s; }
.cc-toggle::after { content: ""; position: absolute; left: .5cqw; top: .5cqw; bottom: .5cqw; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); transition: left .2s; }
.cc-toggle.on { background: var(--crimson); }
.cc-toggle.on::after { left: calc(100% - 7.5cqw); }

/* ───── 出発の準備・報酬（カードをえらぶ） ───── */
.cc-prep, .cc-reward { background: radial-gradient(circle at 50% 30%, #FFFFFF, #F1EAFF 60%, #E4F2FF); }
.cc-step { font: 900 clamp(12px, 3.2cqw, 13px)/1 var(--disp); letter-spacing: .2em; color: var(--gold-d); margin: 0; }
.cc-lead { margin: 0; text-align: center; font: 700 clamp(13px, 3.8cqw, 18px)/1.6 var(--body); }
.cc-lead b { color: var(--violet); }
.cc-picks { display: flex; flex-wrap: wrap; justify-content: center; gap: 3cqw 2.2cqw; padding: 3cqw 0 1cqw; }
.cc-picks .cc-card { font-size: max(18.4px, 4.9cqw); transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s; animation: ccDeal .5s cubic-bezier(.34, 1.4, .64, 1) backwards; }
.cc-picks.two .cc-card { font-size: max(18.4px, 5.1cqw); }
.cc-picks .cc-card:nth-child(2) { animation-delay: .08s; }
.cc-picks .cc-card:nth-child(3) { animation-delay: .16s; }
.cc-picks .cc-card:nth-child(4) { animation-delay: .24s; }
@keyframes ccDeal { from { opacity: 0; transform: translateY(20cqw) rotate(12deg) scale(.6); } }
.cc-picks .cc-card.sel { transform: translateY(-2.4cqw) scale(1.06); box-shadow: 0 .12em 0 #B07A00, 0 0 0 .3em #fff, 0 0 0 .55em var(--gold), 0 0 2em rgba(245, 197, 66, .9); }
.cc-relics-pick { width: 100%; display: flex; flex-direction: column; gap: 2.4cqw; }
.cc-relic-opt { display: flex; align-items: center; gap: 3cqw; padding: 2.6cqw 3.4cqw; text-align: left; cursor: pointer; width: 100%; }
.cc-relic-opt img, .cc-relic-ic { width: 15cqw; height: 15cqw; flex: none; object-fit: contain; }
.cc-relic-opt b { display: block; font: 800 clamp(14px, 4.4cqw, 20px)/1.25 var(--mincho); color: var(--violet-d); }
.cc-relic-opt > div span { display: block; margin-top: .25em; font: 700 clamp(12px, 3.5cqw, 16px)/1.5 var(--body); }
.cc-relic-opt.sel { box-shadow: 0 .3em 0 rgba(201, 138, 0, .6), 0 0 0 .3em var(--gold), 0 0 1.6em rgba(245, 197, 66, .7); }
.cc-actions { display: flex; flex-direction: column; align-items: center; gap: 1.6cqw; margin-top: auto; padding-top: 2cqw; }

/* ───── 冒険中の上の帯 ───── */
.cc-runbar { width: 100%; flex: none; display: flex; align-items: center; gap: 1.6cqw; padding: max(2.4cqw, env(safe-area-inset-top)) 3cqw 2cqw; background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .82)); box-shadow: 0 2px 0 rgba(245, 197, 66, .6); position: relative; z-index: 5; }
.cc-rb-hp { display: flex; align-items: center; gap: .3em; font: 900 clamp(12px, 3.6cqw, 17px)/1 var(--disp); color: var(--crimson); }
.cc-rb-hp i, .cc-rb-coin i { width: 1.3em; height: 1.3em; display: inline-block; flex: none; }
.cc-rb-hp i { background: radial-gradient(circle at 35% 30%, #FFB3B8, #E63946 60%); clip-path: path('M10 18 C-6 6 2 -4 10 3 C18 -4 26 6 10 18Z'); transform: scale(1.0); }
.cc-rb-coin { display: flex; align-items: center; gap: .3em; font: 900 clamp(12px, 3.6cqw, 17px)/1 var(--disp); color: var(--gold-d); }
.cc-rb-coin i { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF6C0, #F5C542 55%, #C98A00); box-shadow: inset 0 0 0 2px #FFE27A; }
.cc-rb-relics { flex: 1; min-width: 0; display: flex; gap: .6cqw; overflow: hidden; }
.cc-rb-relics img { width: 7.6cqw; height: 7.6cqw; min-width: 26px; min-height: 26px; flex: none; cursor: pointer; }
.cc-rb-btn { flex: none; min-width: 44px; min-height: 40px; border-radius: 12px; cursor: pointer; display: flex; align-items: center; gap: .3em; padding: 0 .6em; font: 900 clamp(12px, 3.2cqw, 14px)/1 var(--body); color: var(--violet-d); background: linear-gradient(#fff, #fff) padding-box, var(--goldgrad) border-box; border: 2px solid transparent; }
.cc-rb-btn b { font-family: var(--disp); }

/* ───── マップ ───── */
.cc-map { background: var(--parch); }
.cc-map-head { width: 100%; flex: none; text-align: center; padding: 2cqw 4cqw 1cqw; position: relative; z-index: 3; }
.cc-map-head .cc-step { margin-bottom: .3em; }
.cc-map-head h2 { margin: 0; font: 800 clamp(16px, 5cqw, 24px)/1.2 var(--mincho); color: var(--violet-d); }
.cc-map-scroll { flex: 1; width: 100%; min-height: 0; position: relative; }
.cc-map-board { position: relative; width: 100%; }
.cc-map-board::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .7), transparent 40%), repeating-linear-gradient(0deg, rgba(201, 138, 0, .06) 0 2px, transparent 2px 9cqw), repeating-linear-gradient(90deg, rgba(201, 138, 0, .05) 0 2px, transparent 2px 9cqw); pointer-events: none; }
.cc-map-bg { position: absolute; left: 0; right: 0; top: 0; height: 70cqw; background: center 30% / cover no-repeat; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); mask-image: linear-gradient(180deg, #000 30%, transparent); opacity: .85; }
.cc-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cc-map-svg path { fill: none; stroke: rgba(106, 63, 214, .28); stroke-width: 4; stroke-dasharray: 2 10; stroke-linecap: round; }
.cc-map-svg path.on { stroke: var(--gold-d); stroke-width: 6; stroke-dasharray: none; filter: drop-shadow(0 0 4px rgba(245, 197, 66, .8)); }
.cc-map-svg path.done { stroke: var(--violet); stroke-width: 5; stroke-dasharray: none; }
.cc-node { position: absolute; width: 17cqw; height: 17cqw; min-width: 52px; min-height: 52px; transform: translate(-50%, -50%); border: 0; padding: 0; background: none; cursor: default; display: flex; flex-direction: column; align-items: center; }
.cc-node img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 .6cqw .8cqw rgba(74, 42, 158, .25)); }
.cc-node span { position: absolute; top: 100%; margin-top: -.6cqw; white-space: nowrap; font: 900 clamp(12px, 3.2cqw, 13px)/1 var(--body); color: var(--violet-d); background: rgba(255, 255, 255, .92); padding: .3em .6em; border-radius: 999px; }
.cc-node.boss { width: 26cqw; height: 26cqw; }
.cc-node.off { filter: grayscale(.6) opacity(.55); }
.cc-node.done { filter: grayscale(.2) opacity(.85); }
.cc-node.done::after { content: "✓"; position: absolute; right: -1cqw; top: -1cqw; width: 6.4cqw; height: 6.4cqw; min-width: 22px; min-height: 22px; display: grid; place-content: center; border-radius: 50%; background: var(--violet); color: #fff; font: 900 12px/1 var(--disp); box-shadow: 0 0 0 2px #fff; }
.cc-node.can { cursor: pointer; animation: ccNode 1.2s ease-in-out infinite; }
.cc-node.can::before { content: ""; position: absolute; inset: -14%; border-radius: 50%; border: 3px solid var(--gold); box-shadow: 0 0 1em rgba(245, 197, 66, .9); animation: ccRing 1.2s ease-out infinite; }
@keyframes ccNode { 50% { transform: translate(-50%, -50%) scale(1.08); } }
@keyframes ccRing { from { transform: scale(.8); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
.cc-node.here::before { content: ""; position: absolute; inset: -8%; border-radius: 50%; box-shadow: 0 0 0 4px var(--violet), 0 0 1.4em rgba(106, 63, 214, .6); }
.cc-map-me { position: absolute; width: 13cqw; height: 13cqw; transform: translate(-50%, -100%); border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 3px var(--gold), 0 .4em .8em rgba(74, 42, 158, .3); object-fit: cover; object-position: 50% 15%; background: #fff; transition: left .6s cubic-bezier(.5, 0, .3, 1), top .6s cubic-bezier(.5, 0, .3, 1); z-index: 4; pointer-events: none; }
.cc-map-floor { position: absolute; left: 2.6cqw; transform: translateY(-50%); font: 900 clamp(12px, 3.2cqw, 13px)/1 var(--disp); color: rgba(106, 63, 214, .5); }
.cc-map-foot { width: 100%; flex: none; text-align: center; padding: 2cqw 4cqw max(3cqw, env(safe-area-inset-bottom)); font: 700 clamp(12px, 3.5cqw, 16px)/1.4 var(--body); background: linear-gradient(0deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .8)); box-shadow: 0 -2px 0 rgba(245, 197, 66, .5); position: relative; z-index: 3; }
.cc-map-foot b { color: var(--violet); }

/* ───── バトル ───── */
.cc-battle { background: url(assets/bg_ch1.webp) center top / auto 60% no-repeat, var(--cream); background-size: auto 60%; }
.cc-battle::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255, 251, 242, 0) 44%, rgba(255, 251, 242, .92) 57%, var(--cream) 63%); }
.cc-battle.shake { animation: ccShake .35s; }
.cc-battle.shake2 { animation: ccShake2 .5s; }
@keyframes ccShake { 20% { transform: translate(-1.4cqw, .6cqw); } 40% { transform: translate(1.2cqw, -.6cqw); } 60% { transform: translate(-.8cqw, .4cqw); } 80% { transform: translate(.6cqw, 0); } }
@keyframes ccShake2 { 10% { transform: translate(-2.4cqw, 1cqw) rotate(-.6deg); } 30% { transform: translate(2.2cqw, -1cqw) rotate(.6deg); } 50% { transform: translate(-1.6cqw, .6cqw); } 70% { transform: translate(1cqw, -.4cqw); } 90% { transform: translate(-.4cqw, 0); } }
.cc-hud { width: 100%; flex: none; display: flex; align-items: center; gap: 1.4cqw; padding: max(2cqw, env(safe-area-inset-top)) 2.6cqw 0; position: relative; z-index: 5; font-size: clamp(12px, 3.2cqw, 15px); }
.cc-pill { display: flex; align-items: baseline; gap: .4em; padding: .5em .9em; border-radius: 999px; white-space: nowrap; background: linear-gradient(rgba(255, 255, 255, .94), rgba(255, 255, 255, .94)) padding-box, var(--goldgrad) border-box; border: 2px solid transparent; box-shadow: 0 3px 8px rgba(74, 42, 158, .12); font: 800 1em/1 var(--mincho); color: var(--violet-d); }
.cc-pill small { font: 900 max(12px, .62em)/1 var(--disp); letter-spacing: .14em; color: var(--gold-d); }
.cc-pill b { font: 900 1.2em/1 var(--disp); color: var(--ink); }
.cc-icon { width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font: 900 15px/1 var(--disp); color: var(--violet-d); background: linear-gradient(#fff, #fff) padding-box, var(--goldgrad) border-box; border: 3px solid transparent; box-shadow: 0 3px 0 #C9A04A; }
.cc-enemy { flex: 1 1 auto; min-height: 0; width: 100%; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 4cqw .6cqw; z-index: 2; }
.cc-enemy-body { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: flex-end; justify-content: center; position: relative; }
.cc-enemy-img { max-width: 60cqw; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; filter: drop-shadow(0 2cqw 2cqw rgba(74, 42, 158, .25)); animation: ccIdle 2.8s ease-in-out infinite; transform-origin: 50% 90%; }
.cc-enemy.boss .cc-enemy-img { max-width: 76cqw; }
@keyframes ccIdle { 0%, 100% { translate: 0 0; scale: 1 1; } 50% { translate: 0 -1.4cqw; scale: 1.02 .98; } }
.cc-enemy-img.hit { animation: ccHit .32s; }
.cc-enemy-img.hitstop { animation: ccHitStop .42s; }
@keyframes ccHit { 0% { filter: brightness(2.4) drop-shadow(0 0 0 #fff); transform: translateX(0) scale(1.04); } 30% { transform: translateX(2cqw) rotate(2deg); } 60% { transform: translateX(-1.6cqw) rotate(-1deg); } 100% { transform: none; } }
@keyframes ccHitStop { 0%, 30% { filter: brightness(3) saturate(0); transform: scale(1.1) rotate(-3deg); } 55% { transform: translateX(3cqw) scale(1.02) rotate(3deg); } 80% { transform: translateX(-2cqw); } 100% { transform: none; } }
.cc-enemy-img.lunge { animation: ccLunge .45s cubic-bezier(.5, -.4, .5, 1.6); }
@keyframes ccLunge { 40% { transform: translateY(-2cqw) scale(.96); } 70% { transform: translateY(10cqw) scale(1.12); } 100% { transform: none; } }
.cc-enemy-img.enter { animation: ccEnter .8s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes ccEnter { from { transform: translateY(-30cqw) scale(.4); opacity: 0; } }
.cc-enemy-img.down { animation: ccDown 1s ease-in forwards; }
@keyframes ccDown { 30% { transform: scale(1.12) rotate(-4deg); filter: brightness(2); } 100% { transform: translateY(6cqw) scale(.15) rotate(40deg); opacity: 0; } }
.cc-intent { position: absolute; top: 1.4cqw; right: 3.4cqw; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: .25em; max-width: 46cqw; padding: .45em .9em .55em; border-radius: 16px; background: linear-gradient(#fff, #fff) padding-box, var(--goldgrad) border-box; border: 3px solid transparent; box-shadow: 0 .25em 0 rgba(201, 138, 0, .7), 0 .5em 1em rgba(74, 42, 158, .15); font-size: clamp(12px, 3.3cqw, 16px); animation: ccIn .4s cubic-bezier(.34, 1.56, .64, 1); }
.cc-intent-cap { font: 900 max(12px, .66em)/1 var(--body); color: var(--gold-d); letter-spacing: .12em; }
.cc-intent > small:last-child { font: 800 max(12px, .76em)/1.3 var(--body); color: var(--mute); text-align: center; }
.cc-intent-icons { display: flex; gap: .5em; align-items: center; flex-wrap: wrap; justify-content: center; }
.cc-ic { display: inline-flex; align-items: center; gap: .2em; font: 900 1.3em/1 var(--disp); }
.cc-ic i { width: 1.3em; height: 1.3em; border-radius: 50%; background: center / 66% no-repeat; flex: none; box-shadow: 0 0 0 .1em #fff, 0 0 0 .2em rgba(201, 138, 0, .7); }
.cc-ic small { font-size: max(12px, .62em); }
.cc-ic.atk { color: #C1121F; } .cc-ic.atk i { background-color: var(--crimson); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M14.5 2.5 21 3l.5 6.5-9.3 9.3 1.7 1.7-1.4 1.4-2.5-2.5-3 3-1.4-1.4 3-3L6 15.5l1.4-1.4 1.7 1.7z'/%3E%3C/svg%3E"); }
.cc-ic.def { color: #1662B8; } .cc-ic.def i { background-color: var(--sky); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5z'/%3E%3C/svg%3E"); }
.cc-ic.buff { color: #5B2DBF; } .cc-ic.buff i { background-color: var(--violet); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 3 4 12h5v9h6v-9h5z'/%3E%3C/svg%3E"); }
.cc-ic.debuff { color: #B54708; } .cc-ic.debuff i { background-color: #FF8A3C; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2c3 4 6 6.5 6 11a6 6 0 0 1-12 0c0-2.4 1-4 2.5-5.5C9 10 10 11 11 11c0-3 .5-6 1-9z'/%3E%3C/svg%3E"); }
.cc-intent.act { animation: ccPop .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes ccPop { 40% { transform: scale(1.25); } }
.cc-enemy-plate { flex: none; width: 84cqw; display: flex; flex-direction: column; align-items: center; gap: .9cqw; position: relative; z-index: 2; }
.cc-enemy-name { margin: 0; font: 800 clamp(15px, 4.9cqw, 25px)/1.1 var(--mincho); color: var(--violet-d); letter-spacing: .04em; -webkit-text-stroke: .26em #fff; paint-order: stroke fill; text-shadow: 0 .1em .3em rgba(74, 42, 158, .35); }
.cc-enemy-name em { font-style: normal; font: 900 max(12px, .55em)/1 var(--disp); -webkit-text-stroke: 0; color: #fff; background: var(--crimson); padding: .35em .6em; border-radius: 999px; vertical-align: .35em; margin-left: .3em; text-shadow: none; }
.cc-hpline { display: flex; align-items: center; gap: 1.2cqw; width: 100%; }
.cc-bar { flex: 1; position: relative; height: clamp(16px, 5cqw, 26px); border-radius: 999px; background: linear-gradient(#fff, #fff) padding-box, var(--goldgrad) border-box; border: 3px solid transparent; overflow: hidden; box-shadow: 0 .14em 0 rgba(201, 138, 0, .6); }
.cc-bar em { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 999px; background: linear-gradient(180deg, #FF9AA2, var(--crimson)); transition: width .35s cubic-bezier(.2, .8, .2, 1); }
.cc-bar em::after { content: ""; position: absolute; left: 0; right: 0; top: 12%; height: 30%; border-radius: 999px; background: rgba(255, 255, 255, .45); }
.cc-bar-player em { background: linear-gradient(180deg, #8EF0B8, var(--green)); }
.cc-bar span { position: absolute; inset: 0; display: grid; place-content: center; font: 900 clamp(12px, 3.2cqw, 15px)/1 var(--disp); color: var(--ink); text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; }
.cc-shield { flex: none; min-width: 2.3em; height: 2.4em; padding: 0 .2em; display: grid; place-content: center; font: 900 clamp(12px, 3.6cqw, 18px)/1 var(--disp); color: #fff; background: linear-gradient(180deg, #8CCBFF, var(--sky) 50%, #1F7FD6); clip-path: polygon(50% 0, 100% 14%, 100% 55%, 50% 100%, 0 55%, 0 14%); text-shadow: 0 .08em 0 rgba(0, 0, 0, .3); animation: ccIn .3s cubic-bezier(.34, 1.56, .64, 1); }
.cc-status { display: flex; gap: 1cqw; flex-wrap: wrap; justify-content: center; min-height: 1.6em; }
.cc-player .cc-status { justify-content: flex-start; }
.cc-st { display: inline-flex; align-items: center; gap: .3em; font: 900 clamp(12px, 3.2cqw, 13px)/1 var(--body); color: #fff; border-radius: 999px; padding: .4em .7em; white-space: nowrap; animation: ccIn .3s cubic-bezier(.34, 1.56, .64, 1); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9); cursor: help; }
.cc-st b { font-family: var(--disp); }
.st-str { background: linear-gradient(180deg, #FF8A8A, #E63946); }
.st-vuln { background: linear-gradient(180deg, #FFB86B, #F07800); }
.st-burn { background: linear-gradient(180deg, #FF9F45, #E2470F); }
.st-boost { background: linear-gradient(180deg, #B99BFF, #6A3FD6); }
.st-combo { background: linear-gradient(180deg, #B99BFF, #8B5CF6); }
.st-power { background: linear-gradient(180deg, #FFE27A, #D99A10); color: #3D2600; }
.st-energy { background: linear-gradient(180deg, #8CCBFF, #2F9BFF); }
.st-hint { background: none; color: var(--mute); box-shadow: none; font-weight: 700; padding-left: 0; }
.cc-target-ring { position: absolute; left: 50%; top: 50%; width: 64cqw; height: 64cqw; margin: -32cqw 0 0 -32cqw; border-radius: 50%; border: 1.2cqw dashed var(--gold); opacity: 0; transform: scale(.8); transition: opacity .15s, transform .2s; pointer-events: none; z-index: 1; }
.cc-enemy.target .cc-target-ring { opacity: .85; transform: scale(1); animation: ccSpin 6s linear infinite; }
@keyframes ccSpin { to { rotate: 360deg; } }
.cc-enemy.target .cc-enemy-img { filter: drop-shadow(0 0 2.4cqw rgba(245, 197, 66, .95)); }
.cc-player { width: 100%; flex: none; display: flex; align-items: center; gap: 2cqw; padding: .6cqw 3.4cqw 0; position: relative; z-index: 3; }
.cc-player.target .cc-bar { box-shadow: 0 .14em 0 rgba(201, 138, 0, .6), 0 0 0 .5em rgba(79, 179, 255, .4); }
.cc-crew { display: flex; flex: none; }
.cc-crew img { width: 8.6cqw; height: 8.6cqw; border-radius: 50%; border: 2px solid #fff; object-fit: cover; object-position: 50% 15%; box-shadow: 0 0 0 2px var(--c, var(--gold)); background: #fff; }
.cc-crew img + img { margin-left: -2.6cqw; }
.cc-crew.hurt img { animation: ccNo .4s; }
.cc-player-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .8cqw; }
.cc-hand { width: 100%; flex: none; height: max(229px, 61cqw); position: relative; z-index: 6; }
.cc-hand .cc-card { position: absolute; left: 0; bottom: 2.2cqw; transform-origin: 50% 100%; transform: translate(var(--x, 0px), calc(var(--y, 0px) - var(--lift, 0px))) rotate(var(--r, 0deg)) scale(var(--s, 1)); transition: transform .28s cubic-bezier(.2, .8, .2, 1), filter .2s; cursor: grab; touch-action: none; font-size: max(18.4px, 4.9cqw); }
@media (hover: hover) { .cc-hand .cc-card:not(.sel):not(.drag):hover { --lift: 4cqw; z-index: 30 !important; } }
.cc-hand .cc-card.sel { --lift: 9cqw; --s: 1.12; --r: 0deg !important; z-index: 40 !important; box-shadow: 0 .12em 0 #B07A00, 0 0 0 .22em #fff, 0 0 0 .42em var(--gold), 0 0 1.6em rgba(245, 197, 66, .9); }
.cc-hand .cc-card.drag { transition: none; z-index: 50 !important; cursor: grabbing; transform: translate(var(--dx), var(--dy)) rotate(0deg) scale(1.15); }
.cc-hand .cc-card.drag.ready { transform: translate(var(--dx), var(--dy)) rotate(0deg) scale(.95); box-shadow: 0 0 0 .3em #fff, 0 0 0 .55em var(--gold), 0 0 2em rgba(245, 197, 66, 1); }
.cc-hand .cc-card.fly { transition: transform .26s cubic-bezier(.5, 0, .8, .4), opacity .26s; opacity: 0; z-index: 50 !important; }
.cc-hand .cc-card.in { transition: none; transform: translate(-10cqw, 30cqw) rotate(-30deg) scale(.4); opacity: 0; }
.cc-hand .cc-card.shake { animation: ccNo .35s; }
@keyframes ccNo { 25% { translate: -1.2cqw 0; } 50% { translate: 1.2cqw 0; } 75% { translate: -.6cqw 0; } }
.cc-hand .cc-card.out { transition: transform .3s ease-in, opacity .3s; transform: translate(80cqw, 20cqw) rotate(30deg) scale(.5) !important; opacity: 0; }
.cc-bottom { width: 100%; flex: none; display: flex; align-items: center; gap: 2cqw; padding: 0 3cqw max(3cqw, env(safe-area-inset-bottom)); position: relative; z-index: 7; }
.cc-energy { flex: none; width: 17cqw; height: 17cqw; min-width: 56px; min-height: 56px; display: flex; align-items: center; justify-content: center; position: relative; font-family: var(--disp); color: #fff; background: radial-gradient(circle at 34% 28%, #FFFFFF 0 7%, #C3B0FF 20%, #6A3FD6 62%, #3B2190) padding-box, var(--goldgrad) border-box; border: 4px solid transparent; border-radius: 50%; box-shadow: 0 .25em 0 #8A5A00, 0 0 0 .4em rgba(245, 197, 66, .3), 0 0 1.4em rgba(106, 63, 214, .5); margin-top: -3cqw; text-shadow: 0 .06em 0 #2A1470; }
.cc-energy b { font: 900 8cqw/1 var(--disp); }
.cc-energy small { font: 900 max(12px, 3.4cqw)/1 var(--disp); align-self: flex-end; margin-bottom: 4.4cqw; opacity: .9; }
.cc-energy span { position: absolute; bottom: -1.8cqw; left: 50%; transform: translateX(-50%); font: 900 clamp(12px, 3.2cqw, 13px)/1 var(--body); color: #3D2600; background: var(--goldgrad); padding: .35em .8em; border-radius: 999px; white-space: nowrap; text-shadow: none; }
.cc-energy.empty { filter: saturate(.25) brightness(1.08); }
.cc-energy.pop { animation: ccPop .45s cubic-bezier(.34, 1.56, .64, 1); }
.cc-piles { display: flex; flex-direction: column; gap: .8cqw; flex: none; }
.cc-pilebox { display: flex; align-items: center; gap: .4em; min-height: 22px; font: 700 clamp(12px, 3.2cqw, 13px)/1 var(--body); color: var(--mute); background: rgba(255, 255, 255, .95); border-radius: 999px; padding: .35em .7em; border: 2px solid rgba(201, 138, 0, .35); cursor: pointer; }
.cc-pilebox b { font: 900 1.15em/1 var(--disp); color: var(--ink); }
.cc-pilebox small, .cc-foe small { font-size: max(12px, .9em); }
.cc-hint { flex: 1; min-width: 0; margin: 0; font: 700 clamp(12px, 3.2cqw, 14px)/1.4 var(--body); color: var(--mute); text-align: center; word-break: keep-all; overflow-wrap: anywhere; }
.cc-hint b { color: var(--violet); }
.cc-end { flex: none; min-width: 21cqw; min-height: 52px; font-size: clamp(12px, 3.7cqw, 17px); line-height: 1.15; padding: .3em .7em; }
.cc-end.go { animation: ccPulse 1s ease-in-out infinite; }
.cc-chain { position: absolute; z-index: 60; right: 4cqw; top: 42%; pointer-events: none; text-align: right; }
.cc-chain b { display: block; font-size: clamp(30px, 11cqw, 60px); font-style: italic; }
.cc-chain small { display: block; margin-top: .2em; font: 900 clamp(12px, 3.3cqw, 16px)/1 var(--body); color: var(--violet-d); text-shadow: 0 0 .3em #fff, 0 0 .3em #fff; }
.cc-chain.pop { animation: ccChain .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes ccChain { from { transform: scale(1.8) rotate(-6deg); opacity: 0; } }
.cc-pops { position: absolute; inset: 0; pointer-events: none; z-index: 61; overflow: hidden; }
.cc-pop { position: absolute; transform: translate(-50%, -50%); font: 900 clamp(26px, 10cqw, 54px)/1 var(--disp); color: #fff; -webkit-text-stroke: .12em var(--violet-d); paint-order: stroke fill; text-shadow: 0 .08em 0 var(--violet-d); animation: ccFloatUp 1s ease-out forwards; white-space: nowrap; }
.cc-pop.dmg { color: #FFE27A; }
.cc-pop.big { font-size: clamp(36px, 14cqw, 76px); color: #FFF3B0; animation-duration: 1.2s; }
.cc-pop.hurt { color: #FF8A8A; -webkit-text-stroke-color: #8E0E19; text-shadow: 0 .08em 0 #8E0E19; }
.cc-pop.blk { color: #BFE3FF; font-size: clamp(18px, 6.2cqw, 32px); }
.cc-pop.heal { color: #A8F5C8; }
.cc-pop.txt { font: 900 clamp(15px, 5cqw, 26px)/1.1 var(--body); color: var(--violet-d); -webkit-text-stroke: .24em #fff; text-shadow: 0 .06em .2em rgba(74, 42, 158, .4); }
.cc-pop.txt.hurt { color: #C1121F; -webkit-text-stroke-color: #fff; text-shadow: 0 .06em .2em rgba(142, 14, 25, .4); }
@keyframes ccFloatUp { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.5); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 30% { transform: translate(-50%, -55%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -160%) scale(1); } }
.cc-flash { position: absolute; inset: 0; pointer-events: none; z-index: 59; background: radial-gradient(circle, rgba(255, 107, 107, 0) 40%, rgba(255, 107, 107, .45)); opacity: 0; }
.cc-flash.on { animation: ccFlash .45s ease-out; }
.cc-flash.white { background: rgba(255, 255, 255, .7); }
@keyframes ccFlash { 20% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ccIn { from { opacity: 0; transform: translateY(-2cqw) scale(.9); } }

/* ───── 報酬・お店・休憩・イベント・宝箱 ───── */
.cc-shop, .cc-rest, .cc-event, .cc-treasure { background: radial-gradient(circle at 50% 20%, #FFFFFF, #F6F0FF 55%, #FFF3D6); }
.cc-body { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2.6cqw; padding: 3cqw 4.4cqw max(5cqw, env(safe-area-inset-bottom)); }
.cc-coins-got { display: flex; align-items: center; gap: .4em; font: 900 clamp(20px, 7cqw, 34px)/1 var(--disp); color: var(--gold-d); }
.cc-coins-got i { width: 1.2em; height: 1.2em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF6C0, #F5C542 55%, #C98A00); box-shadow: inset 0 0 0 3px #FFE27A; animation: ccSpinY 1s ease-out; }
@keyframes ccSpinY { from { transform: rotateY(720deg) scale(.4); } }
.cc-gotrelic { width: 100%; display: flex; align-items: center; gap: 3cqw; padding: 2.4cqw 3.4cqw; text-align: left; animation: ccIn .5s cubic-bezier(.34, 1.56, .64, 1) .3s backwards; }
.cc-gotrelic img { width: 14cqw; height: 14cqw; flex: none; }
.cc-gotrelic small { display: block; font: 900 clamp(12px, 3.2cqw, 13px)/1 var(--body); color: var(--gold-d); letter-spacing: .1em; }
.cc-gotrelic b { display: block; margin: .2em 0; font: 800 clamp(14px, 4.4cqw, 20px)/1.2 var(--mincho); color: var(--violet-d); }
.cc-gotrelic span { font: 700 clamp(12px, 3.4cqw, 15px)/1.5 var(--body); }
.cc-npc { display: flex; align-items: flex-end; gap: 2.6cqw; width: 100%; }
.cc-npc img { width: 20cqw; height: 20cqw; border-radius: 50%; object-fit: cover; object-position: 50% 15%; border: 3px solid #fff; box-shadow: 0 0 0 3px var(--gold); background: #fff; flex: none; }
.cc-say { position: relative; flex: 1; padding: 2.4cqw 3.4cqw; font: 700 clamp(12px, 3.6cqw, 16px)/1.55 var(--body); text-align: left; }
.cc-shop-grid { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 3.6cqw 5cqw; }
.cc-ware { display: flex; flex-direction: column; align-items: center; gap: 1.4cqw; background: none; border: 0; padding: 0; cursor: pointer; }
.cc-ware .cc-card { font-size: max(18.4px, 4.9cqw); }
.cc-price { display: inline-flex; align-items: center; gap: .3em; font: 900 clamp(12px, 3.7cqw, 17px)/1 var(--disp); color: var(--gold-d); background: #fff; border-radius: 999px; padding: .35em .8em; box-shadow: 0 0 0 2px rgba(201, 138, 0, .4); }
.cc-price i { width: 1em; height: 1em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF6C0, #F5C542 55%, #C98A00); }
.cc-ware.cant .cc-price { color: #B0A8C4; }
.cc-ware.sold { opacity: .25; pointer-events: none; }
.cc-shop-relics { width: 100%; display: flex; flex-direction: column; gap: 2cqw; }
.cc-shop-relics .cc-relic-opt .cc-price { margin-left: auto; flex: none; }
.cc-rest-opts { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.cc-rest-opt { display: flex; flex-direction: column; align-items: center; gap: 1.4cqw; padding: 4cqw 2cqw; cursor: pointer; text-align: center; }
.cc-rest-opt img { width: 26cqw; height: 26cqw; object-fit: contain; animation: ccBob 3s ease-in-out infinite; }
.cc-rest-opt b { font: 800 clamp(16px, 5cqw, 24px)/1.2 var(--mincho); color: var(--violet-d); }
.cc-rest-opt span { font: 700 clamp(12px, 3.3cqw, 15px)/1.5 var(--body); color: var(--mute); }
.cc-rest-opt:disabled { filter: grayscale(1) opacity(.5); }
.cc-ev-art { width: 100%; height: 44cqw; border-radius: 18px; background: center / cover no-repeat; position: relative; overflow: hidden; flex: none; }
.cc-ev-art img { position: absolute; left: 50%; bottom: 4%; width: 34cqw; height: 34cqw; transform: translateX(-50%); object-fit: contain; filter: drop-shadow(0 1cqw 1.6cqw rgba(74, 42, 158, .3)); animation: ccBob 3s ease-in-out infinite; }
.cc-ev-title { margin: 0; font: 800 clamp(18px, 5.6cqw, 28px)/1.2 var(--mincho); color: var(--violet-d); text-align: center; }
.cc-ev-text { margin: 0; font: 500 clamp(13px, 3.8cqw, 17px)/1.75 var(--body); text-align: left; width: 100%; }
.cc-ev-opts { width: 100%; display: flex; flex-direction: column; gap: 2.4cqw; }
.cc-ev-opt { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: .2em; padding: 2.6cqw 4cqw; text-align: left; cursor: pointer; }
.cc-ev-opt b { font: 800 clamp(14px, 4.4cqw, 20px)/1.2 var(--mincho); color: var(--violet-d); }
.cc-ev-opt span { font: 700 clamp(12px, 3.3cqw, 15px)/1.5 var(--body); color: var(--mute); }
.cc-chest { width: 56cqw; height: 56cqw; object-fit: contain; cursor: pointer; animation: ccBob 2.4s ease-in-out infinite; filter: drop-shadow(0 2cqw 2cqw rgba(74, 42, 158, .25)); }
.cc-chest.open { animation: ccOpen .6s cubic-bezier(.34, 1.56, .64, 1) forwards; }
@keyframes ccOpen { 40% { transform: scale(1.2) rotate(-4deg); } 100% { transform: scale(.85); opacity: .6; } }

/* ───── 結果 ───── */
.cc-result { background: radial-gradient(circle at 50% 10%, #FFFFFF, #F1EAFF 50%, #E4F2FF); }
.cc-result .cc-body { gap: 2.6cqw; padding-top: max(6cqw, env(safe-area-inset-top)); }
.cc-res-sub { margin: -1cqw 0 0; text-align: center; font: 800 clamp(13px, 3.9cqw, 18px)/1.5 var(--mincho); color: var(--violet-d); }
.cc-res-route { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .8cqw; }
.cc-res-route img { width: 8.6cqw; height: 8.6cqw; }
.cc-res-route i { width: 2cqw; height: 2px; background: rgba(106, 63, 214, .3); }
.cc-res-score { display: flex; align-items: baseline; justify-content: center; gap: .5em; flex-wrap: wrap; }
.cc-res-score small { font: 900 clamp(12px, 3cqw, 15px)/1 var(--disp); letter-spacing: .2em; color: var(--gold-d); }
.cc-res-score b { font: 900 clamp(30px, 10cqw, 52px)/1 var(--disp); color: var(--ink); font-variant-numeric: tabular-nums; }
.cc-new { align-self: center; font: 900 clamp(12px, 3.2cqw, 13px)/1 var(--disp); letter-spacing: .12em; color: #fff; background: var(--crimson); border-radius: 999px; padding: .45em .8em; animation: ccPop .6s cubic-bezier(.34, 1.56, .64, 1) 1.3s backwards; }
.cc-res-best { margin: -1.6cqw 0 0; font: 900 clamp(12px, 3cqw, 14px)/1 var(--disp); color: var(--mute); letter-spacing: .06em; }
.cc-missions { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 1.4cqw; }
.cc-missions li { display: flex; align-items: center; gap: 2cqw; background: #fff; border-radius: 999px; padding: .5em 1em .5em .6em; text-align: left; font: 700 clamp(12px, 3.5cqw, 16px)/1.3 var(--body); box-shadow: 0 0 0 2px rgba(201, 138, 0, .25); }
.cc-missions li .cc-star { font-size: 1.5em; line-height: 1; }
.cc-missions li.done .cc-star { color: #F5B700; text-shadow: 0 .06em 0 #A86E00; animation: ccStarIn .5s cubic-bezier(.34, 1.56, .64, 1) backwards; }
.cc-missions li:nth-child(2).done .cc-star { animation-delay: .25s; }
.cc-missions li:nth-child(3).done .cc-star { animation-delay: .5s; }
@keyframes ccStarIn { from { transform: scale(0) rotate(-90deg); } }
.cc-missions li span:not(.cc-star) { flex: 1; }
.cc-missions li b { font: 900 max(12px, .78em)/1 var(--disp); color: #fff; background: var(--crimson); border-radius: 999px; padding: .35em .6em; }
.cc-unlocks { width: 100%; display: flex; flex-direction: column; gap: 1.4cqw; }
.cc-unlock { display: flex; align-items: center; gap: 2cqw; padding: 2cqw 3cqw; font: 800 clamp(12px, 3.5cqw, 16px)/1.4 var(--body); color: var(--violet-d); text-align: left; animation: ccIn .5s cubic-bezier(.34, 1.56, .64, 1) backwards; }
.cc-unlock::before { content: "NEW"; flex: none; font: 900 max(12px, .7em)/1 var(--disp); color: #fff; background: var(--crimson); border-radius: 999px; padding: .4em .6em; }
.cc-match { width: 100%; padding: 3.6cqw 4cqw; text-align: left; }
.cc-match-lead { margin: 0 0 1.6cqw; font: 800 clamp(12px, 3.6cqw, 17px)/1.4 var(--body); color: var(--mute); }
.cc-match-lead b { font-family: var(--disp); color: var(--ink); }
.cc-match-job { display: flex; align-items: center; gap: 3cqw; }
.cc-match-job img { width: 24cqw; height: 24cqw; border-radius: 50%; object-fit: cover; object-position: 50% 15%; border: 3px solid #fff; box-shadow: 0 0 0 3px var(--gold); background: var(--cream); flex: none; }
.cc-match-type { margin: 0 0 .3em; font: 900 clamp(12px, 3cqw, 14px)/1.3 var(--body); letter-spacing: .08em; color: var(--crimson); }
.cc-match-name { margin: 0; font: 800 clamp(18px, 5.4cqw, 28px)/1.25 var(--mincho); color: var(--violet-d); word-break: keep-all; }
.cc-match-why { margin: 2.6cqw 0 0; padding: .7em .9em; border-radius: 12px; background: #F4EEFF; font: 700 clamp(12px, 3.5cqw, 16px)/1.6 var(--body); color: var(--violet-d); }
.cc-match-desc { margin: 2cqw 0; font: 500 clamp(13px, 3.7cqw, 17px)/1.75 var(--body); }
.cc-bars { display: flex; flex-direction: column; gap: 1.2cqw; }
.cc-barrow { display: grid; grid-template-columns: 9.2em 1fr 3em; align-items: center; gap: .8em; font: 700 clamp(12px, 3.2cqw, 14px)/1 var(--body); }
.cc-barrow i { height: 1.1em; background: rgba(106, 63, 214, .1); border-radius: 999px; overflow: hidden; }
.cc-barrow em { display: block; height: 100%; border-radius: inherit; width: 0; transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.cc-barrow span:last-child { text-align: right; font-family: var(--disp); font-weight: 900; }
.cc-small { margin: 2cqw 0 0; font-size: clamp(12px, 3.2cqw, 13.5px); color: var(--mute); line-height: 1.6; }
.cc-stack { display: flex; height: clamp(16px, 5cqw, 26px); border-radius: 999px; overflow: hidden; background: linear-gradient(#fff, #fff) padding-box, var(--goldgrad) border-box; border: 3px solid transparent; }
.cc-stack i { height: 100%; }
.cc-legend { display: flex; flex-wrap: wrap; gap: .5em 1em; margin-top: 1.6cqw; font: 700 clamp(12px, 3.2cqw, 14px)/1.2 var(--body); }
.cc-legend span { display: inline-flex; align-items: center; gap: .35em; }
.cc-legend span::before { content: ""; width: .9em; height: .9em; border-radius: 3px; background: var(--c); }
.cc-legend b { font-family: var(--disp); }
.cc-subhead { margin: 3cqw 0 1.2cqw; font: 900 clamp(12px, 3.4cqw, 16px)/1.3 var(--body); color: var(--violet-d); }
.cc-subhead b { font-family: var(--disp); color: var(--crimson); }
.cc-chips { display: flex; flex-wrap: wrap; gap: 1.4cqw; }
.cc-chip { display: inline-flex; align-items: center; gap: .4em; font: 800 clamp(12px, 3.2cqw, 14px)/1 var(--body); background: color-mix(in srgb, var(--c) 14%, #fff); border: 2px solid var(--c); border-radius: 999px; padding: .4em .8em .4em .4em; }
.cc-chip i { width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-content: center; font: 900 max(12px, .8em)/1 var(--disp); font-style: normal; }
.cc-chip b { font-family: var(--disp); color: var(--mute); font-size: max(12px, .9em); }
.cc-chip.up { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0E9F57; }
.cc-res-btns { display: flex; flex-direction: column; gap: 2.6cqw; align-items: center; width: 100%; }
.cc-res-btns .cc-btn { min-width: 72cqw; }

/* ───── 図鑑・あそびかた ───── */
.cc-book, .cc-jobs, .cc-howto { background: linear-gradient(180deg, #E9E1FF, var(--cream) 40%); }
.cc-tabs { display: flex; gap: 1.4cqw; width: 100%; flex: none; }
.cc-tab { flex: 1; min-height: 44px; border-radius: 12px; cursor: pointer; font: 900 clamp(12px, 3.5cqw, 16px)/1 var(--body); color: var(--violet-d); background: #fff; border: 2px solid rgba(201, 138, 0, .4); }
.cc-tab.on { color: #fff; background: linear-gradient(180deg, #9A7BFF, #6A3FD6); border-color: var(--gold); }
.cc-progress { width: 100%; display: flex; align-items: center; gap: 2cqw; font: 900 clamp(12px, 3.2cqw, 15px)/1 var(--disp); color: var(--violet-d); }
.cc-progress i { flex: 1; height: 1em; border-radius: 999px; background: rgba(106, 63, 214, .12); overflow: hidden; }
.cc-progress em { display: block; height: 100%; background: var(--goldgrad); border-radius: inherit; }
.cc-grid { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 3cqw 2cqw; justify-items: center; padding: 1cqw 0 4cqw; }
.cc-grid .cc-card { font-size: max(18.4px, 4.9cqw); }
.cc-grid-relic { width: 100%; display: flex; flex-direction: column; gap: 2cqw; }
.cc-foes { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; }
.cc-foe { display: flex; flex-direction: column; align-items: center; gap: .6em; padding: 2cqw 1cqw; text-align: center; font: 800 clamp(12px, 3.2cqw, 13px)/1.3 var(--body); color: var(--violet-d); }
.cc-foe img { width: 22cqw; height: 22cqw; object-fit: contain; }
.cc-foe.unk img { filter: brightness(0) opacity(.15); }
.cc-foe small { font-weight: 700; color: var(--mute); }
.cc-jobcard { width: 100%; padding: 3.4cqw 4cqw; text-align: left; }
.cc-jobcard header { display: flex; align-items: center; gap: 3cqw; margin-bottom: 2cqw; }
.cc-jobcard header img { width: 19cqw; height: 19cqw; border-radius: 50%; object-fit: cover; object-position: 50% 15%; border: 3px solid #fff; box-shadow: 0 0 0 3px var(--c); background: #fff; flex: none; }
.cc-jobcard header b { display: block; font: 800 clamp(16px, 5cqw, 24px)/1.2 var(--mincho); color: var(--violet-d); }
.cc-jobcard header small { display: block; margin-top: .3em; font: 700 clamp(12px, 3.1cqw, 14px)/1.4 var(--body); color: var(--mute); }
.cc-page { margin-top: 1.6cqw; padding: 2.2cqw 3cqw; border-radius: 12px; background: #FBF8FF; border-left: 5px solid var(--c); }
.cc-page b { display: block; font: 900 clamp(12px, 3.5cqw, 16px)/1.3 var(--body); color: var(--ink); margin-bottom: .3em; }
.cc-page p { margin: 0; font: 500 clamp(12px, 3.5cqw, 16px)/1.7 var(--body); }
.cc-page.locked { background: #F2F0F7; border-left-color: #C9C4D9; color: var(--mute); }
.cc-page.locked p { font-weight: 700; }
.cc-howbox { width: 100%; padding: 3.4cqw 4cqw; text-align: left; }
.cc-howbox p, .cc-howbox li { font: 500 clamp(12.5px, 3.6cqw, 16.5px)/1.75 var(--body); margin: 0; }
.cc-howbox ul { margin: 0; padding-left: 1.2em; }
.cc-howbox b { color: var(--violet); }
.cc-terms { display: grid; grid-template-columns: auto 1fr; gap: .6em 1em; font: 500 clamp(12px, 3.4cqw, 16px)/1.6 var(--body); }
.cc-terms dt { font-weight: 900; color: var(--violet); white-space: nowrap; }
.cc-terms dd { margin: 0; }
.cc-nodes-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw; }
.cc-nodes-legend span { display: flex; align-items: center; gap: .5em; font: 700 clamp(12px, 3.2cqw, 15px)/1.35 var(--body); }
.cc-nodes-legend img { width: 10cqw; height: 10cqw; flex: none; }

/* ───── 重なる画面（モーダル・案内・告知） ───── */
.cc-modal { position: absolute; inset: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 3cqw; padding: max(5cqw, env(safe-area-inset-top)) 4.4cqw max(5cqw, env(safe-area-inset-bottom)); background: rgba(243, 238, 255, .93); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); overflow-y: auto; touch-action: pan-y; animation: ccFade .25s; }
.cc-modal > * { flex: none; }
@keyframes ccFade { from { opacity: 0; } }
.cc-bigwrap { display: flex; justify-content: center; padding: 2cqw 0; }
.cc-modal .cc-bigcard { font-size: 7.2cqw; animation: ccDeal .45s cubic-bezier(.34, 1.4, .64, 1); cursor: default; }
.cc-modal .cc-grid .cc-card { font-size: max(18.4px, 4.9cqw); }
.cc-terms-box { width: 100%; padding: 3cqw 4cqw; text-align: left; font: 500 clamp(12px, 3.5cqw, 16px)/1.6 var(--body); }
.cc-terms-box p { margin: 0 0 .4em; }
.cc-terms-box b { color: var(--violet); }
.cc-arrow { font: 900 7cqw/1 var(--disp); color: var(--gold-d); }
.cc-compare { display: flex; align-items: center; gap: 2cqw; }
.cc-compare .cc-card { font-size: max(18.4px, 4.9cqw); cursor: default; }
.cc-coach { position: absolute; left: 3cqw; right: 3cqw; z-index: 75; display: flex; gap: 2cqw; align-items: flex-start; pointer-events: none; animation: ccIn .35s cubic-bezier(.34, 1.56, .64, 1); }
.cc-coach img { width: 17cqw; height: 17cqw; flex: none; border-radius: 50%; object-fit: cover; object-position: 50% 15%; background: #fff; border: 3px solid #fff; box-shadow: 0 0 0 3px var(--gold); }
.cc-coach-box { flex: 1; padding: 2.4cqw 3.2cqw; text-align: left; pointer-events: auto; }
.cc-coach-step { margin: 0 0 .3em; font: 900 clamp(12px, 3.2cqw, 13px)/1 var(--disp); letter-spacing: .16em; color: var(--gold-d); }
.cc-coach-text { margin: 0; font: 700 clamp(12.5px, 3.7cqw, 17px)/1.6 var(--body); word-break: keep-all; overflow-wrap: anywhere; }
.cc-coach-text b { color: var(--violet); }
.cc-coach-btns { display: flex; justify-content: flex-end; gap: 2cqw; margin-top: 1.4cqw; }
.cc-coach-btns .cc-btn { min-height: 40px; padding: .3em 1em; font-size: clamp(12px, 3.4cqw, 15px); }
.cc-banner { position: absolute; left: 0; right: 0; top: 28%; z-index: 70; display: flex; flex-direction: column; align-items: center; gap: .8em; pointer-events: none; animation: ccBanner 2s ease forwards; }
.cc-banner small { font: 900 clamp(12px, 3.4cqw, 16px)/1 var(--disp); letter-spacing: .3em; color: #fff; background: linear-gradient(180deg, #9A7BFF, #6A3FD6); padding: .55em 1.3em; border-radius: 999px; box-shadow: 0 0 0 3px var(--gold); }
.cc-banner p { margin: 0; font: 800 clamp(13px, 4cqw, 19px)/1.4 var(--mincho); color: var(--violet-d); background: linear-gradient(#fff, #fff) padding-box, var(--goldgrad) border-box; border: 3px solid transparent; border-radius: 999px; padding: .45em 1.3em; max-width: 92cqw; text-align: center; }
.cc-banner p:empty { display: none; }
.cc-banner .cc-name { font: 800 clamp(26px, 9cqw, 48px)/1.1 var(--mincho); color: var(--violet-d); -webkit-text-stroke: .22em #fff; paint-order: stroke fill; text-shadow: 0 .08em 0 var(--gold), 0 0 .6em rgba(245, 197, 66, .8); text-align: center; }
@keyframes ccBanner { 0% { opacity: 0; transform: scale(1.5); } 12% { opacity: 1; transform: scale(1); } 82% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.92) translateY(-4cqw); } }
.cc-toast { position: absolute; left: 50%; bottom: 30%; z-index: 90; transform: translateX(-50%); max-width: 88cqw; padding: .7em 1.2em; border-radius: 14px; font: 800 clamp(12px, 3.6cqw, 16px)/1.5 var(--body); color: #fff; background: rgba(74, 42, 158, .95); box-shadow: 0 0 0 2px var(--gold); text-align: center; pointer-events: none; animation: ccToast 2.2s ease forwards; }
@keyframes ccToast { 0% { opacity: 0; transform: translate(-50%, 2cqw); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
.cc-fxc { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 65; }
.cc-wipe { position: absolute; inset: 0; z-index: 95; pointer-events: none; background: radial-gradient(circle at 50% 50%, #FFFFFF, #CDBBFF 60%, #9A7BFF); clip-path: circle(0% at 50% 50%); }
.cc-wipe::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(245, 197, 66, .3) 0 5cqw, transparent 5cqw 14cqw); }
.cc-wipe.in { pointer-events: auto; animation: ccWipeIn .28s ease-in forwards; }
.cc-wipe.out { animation: ccWipeOut .32s ease-out forwards; }
@keyframes ccWipeIn { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(80% at 50% 50%); } }
@keyframes ccWipeOut { from { clip-path: circle(80% at 50% 50%); } to { clip-path: circle(0% at 50% 50%); } }
.cc-loading { position: absolute; inset: 0; z-index: 100; display: grid; place-content: center; gap: 2cqw; justify-items: center; background: var(--cream); font: 900 clamp(12px, 3cqw, 15px)/1 var(--disp); letter-spacing: .3em; color: var(--violet-d); transition: opacity .4s; }
.cc-loading i { width: 10cqw; height: 14cqw; border-radius: 8px; background: var(--goldgrad); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--violet); animation: ccFlip 1s ease-in-out infinite; }
.cc-loading.off { opacity: 0; pointer-events: none; }

/* 縦が短い画面（375×667 など） */
@container (min-aspect-ratio: 9 / 17) {
    .cc-title-fan { top: 30cqw; opacity: .5; }
    .cc-title-fan .cc-card { font-size: max(18.4px, 4.9cqw); }
    .cc-title-crew img { width: 14cqw; height: 14cqw; }
    .cc-hand { height: max(229px, 61cqw); }
    .cc-hand .cc-card { font-size: max(18.4px, 4.9cqw); }
    .cc-intent { font-size: clamp(12px, 3cqw, 14px); }
    .cc-enemy-img { max-width: 52cqw; }
}
/* 高さが足りない画面では、飾りのカード扇がロゴや文字に重なるので出さない（文字を12px以上に保ったまま縮められないため） */
@container (max-height: 720px) {
    .cc-title-fan { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .cc-logo, .cc-logo-text, .cc-title-btns .cc-btn-main, .cc-enemy-img, .cc-title-crew img, .cc-end.go, .cc-node.can, .cc-card.rar-rare { animation: none !important; }
}

/* ───── 専用画像のカード枠をかぶせた版（枠の窓・名前帯・文字欄に合わせて配置） ───── */
.cc-card.framed { width: 7.2em; height: 11.8em; background: none !important; box-shadow: none; filter: drop-shadow(0 .14em .1em rgba(140, 90, 0, .45)) drop-shadow(0 .45em .7em rgba(74, 42, 158, .22)); animation: none; }
.cc-card.framed .cc-card-in { inset: 1.5% 2%; border-radius: .6em; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 40%, #fff), color-mix(in srgb, var(--c) 18%, #fff)); }
.cc-card.framed .cc-card-art { left: 10.5%; right: 10.5%; top: 13.5%; height: 41%; border-radius: 0; box-shadow: none; }
.cc-card.framed .cc-card-name { top: 55.2%; height: 5.6%; left: 9%; right: 9%; padding: 0; background: none; clip-path: none; color: var(--c); filter: brightness(.72) saturate(1.3); text-shadow: none; font-size: .84em; letter-spacing: -.02em; }
.cc-card.framed.job-sales .cc-card-name { color: #A86A00; filter: none; }
.cc-card.framed .cc-card-name.long { font-size: .72em; }
.cc-card.framed .cc-card-name.xlong { font-size: .66em; letter-spacing: -.05em; }
.cc-card.framed .cc-card-text { top: 62.6%; bottom: 8.6%; left: 11.5%; right: 10.5%; font-size: .66em; line-height: 1.22; }
.cc-card.framed .cc-card-cost { left: -.04em; top: .02em; width: 1.62em; height: 1.62em; font-size: 1.05em; border-width: .12em; }
.cc-card.framed .cc-card-foot { left: auto; right: 12.5%; top: 14.8%; bottom: auto; z-index: 3; gap: .25em; padding: .25em .55em; border-radius: 999px; background: var(--c); color: #fff; font-size: .66em; letter-spacing: .06em; box-shadow: 0 0 0 .18em rgba(255, 255, 255, .85); }
.cc-card.framed.job-sales .cc-card-foot { color: #3D2600; }
.cc-card.framed .cc-card-foot i { display: none; }
.cc-card.framed .cc-card-type { display: none; }
.cc-card.framed .cc-card-up { right: 9%; top: auto; bottom: 7.5%; font-size: .66em; }
.cc-card.back { width: 7.2em; height: 11.8em; }
.cc-btn-xl.plate { border: 0; background: url(assets/ui_plate.webp) center / 100% 100% no-repeat; box-shadow: none; filter: drop-shadow(0 .3em .5em rgba(74, 42, 158, .35)); padding: .7em 2.6em .8em; min-width: 62cqw; }

/* ───── 案件の工程表（分かれ道のマップの代わり。上から順に工程を進む） ───── */
.cc-plan-sub { margin: .35em 0 0; font: 800 clamp(12px, 3.4cqw, 15px)/1 var(--body); color: var(--gold-d); letter-spacing: .12em; }
.cc-plan { position: relative; width: 100%; padding: 3cqw 4cqw 6cqw 4cqw; display: flex; flex-direction: column; gap: 3cqw; }
.cc-plan::before { content: ""; position: absolute; inset: 0; background: var(--bg) center 20% / cover no-repeat; opacity: .22; -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); pointer-events: none; }
.cc-plan::after { content: ""; position: absolute; left: calc(4cqw + 9cqw); top: 6cqw; bottom: 8cqw; width: 4px; border-radius: 4px; background: repeating-linear-gradient(180deg, rgba(106, 63, 214, .3) 0 8px, transparent 8px 14px); pointer-events: none; }
.cc-plan-row { position: relative; z-index: 1; display: flex; align-items: stretch; gap: 3cqw; }
.cc-plan-step { flex: none; width: 18cqw; min-width: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3em; padding: 2cqw 1cqw; border-radius: 16px; background: #fff; border: 3px solid rgba(106, 63, 214, .25); text-align: center; position: relative; }
.cc-plan-no { font: 900 clamp(12px, 3cqw, 13px)/1 var(--disp); letter-spacing: .08em; color: var(--gold-d); }
.cc-plan-step b { font: 800 clamp(13px, 3.8cqw, 17px)/1.25 var(--mincho); color: var(--violet-d); }
.cc-plan-me { position: absolute; right: -4cqw; top: -4cqw; width: 11cqw; height: 11cqw; min-width: 36px; min-height: 36px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 0 0 3px var(--gold), 0 .3em .6em rgba(74, 42, 158, .3); background: #fff; }
.cc-plan-opts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2cqw; }
.cc-plan-opt { display: flex; align-items: center; gap: 2.4cqw; width: 100%; min-height: 48px; padding: 1.8cqw 2.6cqw; text-align: left; border-radius: 16px; border: 3px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(160deg, #E9E2FF, #CFC2FF) border-box; box-shadow: 0 .25em 0 rgba(106, 63, 214, .18); cursor: default; font: inherit; color: var(--ink); }
.cc-plan-opt img { width: 12cqw; height: 12cqw; min-width: 40px; min-height: 40px; flex: none; object-fit: contain; }
.cc-plan-opt b { display: block; font: 800 clamp(14px, 4.2cqw, 19px)/1.2 var(--mincho); color: var(--violet-d); }
.cc-plan-opt small { display: block; margin-top: .2em; font: 700 clamp(12px, 3.2cqw, 14px)/1.4 var(--body); color: var(--mute); }
.cc-plan-row.later { opacity: .55; }
.cc-plan-row.later .cc-plan-opt img { filter: grayscale(.5); }
.cc-plan-row.done .cc-plan-step { background: var(--violet); border-color: var(--violet); }
.cc-plan-row.done .cc-plan-step b, .cc-plan-row.done .cc-plan-no { color: #fff; }
.cc-plan-row.done .cc-plan-opt { opacity: .45; }
.cc-plan-row.done .cc-plan-opt.chosen { opacity: 1; background: linear-gradient(#fff, #fff) padding-box, var(--goldgrad) border-box; }
.cc-plan-row.done .cc-plan-opt.chosen::after { content: "✓"; margin-left: auto; flex: none; width: 7cqw; height: 7cqw; min-width: 26px; min-height: 26px; display: grid; place-content: center; border-radius: 50%; background: var(--violet); color: #fff; font: 900 clamp(13px, 3.6cqw, 16px)/1 var(--body); }
.cc-plan-row.now .cc-plan-step { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245, 197, 66, .45), 0 0 1.2em rgba(245, 197, 66, .55); }
.cc-plan-opt.can { cursor: pointer; background: linear-gradient(#fff, #fff) padding-box, var(--goldgrad) border-box; box-shadow: 0 .3em 0 rgba(201, 138, 0, .55), 0 0 1em rgba(245, 197, 66, .55); animation: ccPlanGlow 1.4s ease-in-out infinite; }
.cc-plan-opt.can:active, .cc-plan-opt.go { transform: translateY(.2em) scale(.98); }
.cc-plan-row.boss .cc-plan-opt img { width: 15cqw; height: 15cqw; }
@keyframes ccPlanGlow { 50% { box-shadow: 0 .3em 0 rgba(201, 138, 0, .55), 0 0 1.8em rgba(245, 197, 66, .85); } }
@media (prefers-reduced-motion: reduce) { .cc-plan-opt.can { animation: none; } }

/* ───── 工程表: 担当の候補（職種の顔・相手） ───── */
.cc-plan-opt img.cc-plan-who { width: 12cqw; height: 12cqw; min-width: 40px; min-height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; background: #fff; border: 2px solid #fff; box-shadow: 0 0 0 3px var(--c); }
.cc-plan-opt .cc-plan-tag { display: inline-block; margin: 0 0 .3em; padding: .25em .65em; border-radius: 999px; background: var(--c); color: #fff; font: 900 12px/1 var(--body); }
.cc-plan-opt.elite .cc-plan-tag { background: var(--crimson); }
.cc-plan-opt.boss .cc-plan-tag { background: var(--gold-d); }
.cc-plan-opt em { display: inline-block; margin-top: .35em; font: 900 12px/1 var(--body); font-style: normal; color: #B54708; background: #FFE8CC; padding: .3em .65em; border-radius: 999px; }
.cc-plan-opt.tired { filter: saturate(.75); }
.cc-plan-opts.four { display: grid; grid-template-columns: 1fr 1fr; }
.cc-plan-opts.four .cc-plan-opt { flex-direction: column; align-items: center; text-align: center; gap: 1.2cqw; padding: 2cqw 1.6cqw; }
.cc-plan-row.boss .cc-plan-opt img.cc-plan-who { width: 12cqw; height: 12cqw; }
.cc-res-route img { border-radius: 50%; object-fit: cover; object-position: 50% 15%; background: #fff; box-shadow: 0 0 0 2px var(--c, var(--gold)); }

/* ───── 制作ライン: 依頼メモ・今日の負担 ───── */
.cc-memo { position: absolute; top: 1.6cqw; right: 3.4cqw; z-index: 3; max-width: 52cqw; display: flex; flex-direction: column; gap: .3em; padding: .7em .85em .65em; text-align: left; border: 0; border-radius: 3px 3px 16px 3px; background: linear-gradient(180deg, #FFF9C4, #FFE98A); box-shadow: 0 .35em .7em rgba(120, 90, 0, .25); transform: rotate(1.6deg); font: inherit; font-size: clamp(12px, 3.3cqw, 16px); color: var(--ink); cursor: pointer; animation: ccIn .4s cubic-bezier(.34, 1.56, .64, 1); }
.cc-memo::before { content: ""; position: absolute; top: -.55em; left: 50%; width: 3.6em; height: 1.1em; margin-left: -1.8em; background: rgba(255, 255, 255, .75); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); transform: rotate(-4deg); }
.cc-memo-cap { font: 900 max(12px, .72em)/1 var(--body); color: #8A5A00; letter-spacing: .12em; }
.cc-memo b { font: 800 1.05em/1.3 var(--mincho); }
.cc-memo-sub { font: 700 max(12px, .74em)/1.4 var(--body); color: #6B5200; }
.cc-memo.ok { background: linear-gradient(180deg, #E2FCEC, #A8EEC6); }
.cc-memo.ok::after { content: "OK"; position: absolute; right: -.7em; bottom: -1.1em; width: 2.4em; height: 2.4em; display: grid; place-content: center; border-radius: 50%; border: 3px solid #0E9F57; background: #fff; color: #0E9F57; font: 900 1.05em/1 var(--disp); transform: rotate(-12deg); box-shadow: 0 .2em .4em rgba(14, 159, 87, .3); }
.cc-memo.stamp { animation: ccPop .5s cubic-bezier(.34, 1.56, .64, 1); }
.cc-memo.ng { animation: ccNo .4s; }
.cc-press { flex: none; display: flex; align-items: center; gap: .35em; padding: .25em .7em .25em .3em; border-radius: 999px; background: linear-gradient(180deg, #FFE4E7, #FFC6CC); border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(230, 57, 70, .45); color: #8E0E19; cursor: help; }
.cc-press i { width: 1.9em; height: 1.9em; flex: none; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='13' r='8' fill='none' stroke='%23E63946' stroke-width='2.4'/%3E%3Cpath d='M12 9v4.5l3 2' fill='none' stroke='%23E63946' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M9 2h6' stroke='%23E63946' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 72% no-repeat; }
.cc-press span { display: flex; flex-direction: column; gap: .15em; }
.cc-press small { font: 800 12px/1 var(--body); }
.cc-press b { font: 900 clamp(15px, 4.6cqw, 22px)/1 var(--disp); }
.cc-press s { font-size: .68em; opacity: .55; margin-right: .2em; }
.cc-press.act { animation: ccPop .45s cubic-bezier(.34, 1.56, .64, 1); }
.cc-crew { align-items: center; }
.cc-lead-tag { margin-left: 1.4cqw; display: flex; flex-direction: column; align-items: flex-start; gap: .15em; font: 800 12px/1 var(--body); color: var(--mute); }
.cc-lead-tag b { font: 900 clamp(13px, 3.8cqw, 17px)/1.1 var(--body); color: var(--c); }

/* ───── 制作ライン: 作業席と見込み ───── */
.cc-line { width: 100%; flex: none; padding: 1.4cqw 3cqw 0; position: relative; z-index: 6; }
.cc-desks { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 2cqw; }
.cc-desk { position: relative; height: max(92px, 24cqw); border-radius: 14px; border: 2px dashed rgba(106, 63, 214, .38); background: rgba(255, 255, 255, .88); display: flex; align-items: center; justify-content: center; transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s; }
.cc-desk.on { border-style: solid; border-color: transparent; }
.cc-desk.want { border-color: var(--c); border-style: solid; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.cc-desk-no { position: absolute; left: .45em; top: .4em; z-index: 3; display: flex; align-items: center; gap: .3em; font: 900 12px/1 var(--body); color: var(--mute); text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
.cc-desk-no em { font-style: normal; color: #fff; background: var(--c); border-radius: 999px; padding: .2em .5em; text-shadow: none; }
.cc-desk.on .cc-desk-no { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.cc-desk-empty { font: 800 clamp(12px, 3.4cqw, 15px)/1 var(--body); color: rgba(106, 63, 214, .5); }
.cc-mini { --c: var(--violet); position: absolute; inset: 0; border-radius: 13px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: .2em; padding: .45em .5em; background: var(--art) center 30% / cover no-repeat, #fff; box-shadow: inset 0 0 0 3px var(--c), 0 .2em .5em rgba(74, 42, 158, .2); cursor: pointer; text-align: left; }
.cc-mini::before { content: ""; position: absolute; inset: 30% 0 0; background: linear-gradient(180deg, transparent, rgba(30, 20, 60, .85)); }
.cc-mini > * { position: relative; }
.cc-mini b { font: 900 clamp(12px, 3.3cqw, 15px)/1.15 var(--body); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-mini span { font: 900 clamp(13px, 3.8cqw, 18px)/1.05 var(--body); color: #FFE27A; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.cc-mini span small { font-size: 12px; color: #fff; margin-left: .2em; }
.cc-mini.trouble { --c: #8E8FA3; filter: grayscale(.4); }
.cc-desk-x { position: absolute; right: .35em; top: .35em; z-index: 4; font: 900 clamp(13px, 3.6cqw, 16px)/1 var(--disp); color: #3D2600; background: var(--goldgrad); border-radius: 999px; padding: .25em .5em; box-shadow: 0 0 0 2px #fff; }
.cc-desk.act { transform: translateY(-1.6cqw) scale(1.06); box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--gold), 0 0 1.6em rgba(245, 197, 66, .9); z-index: 2; }
.cc-desk.done:not(.act) .cc-mini { filter: saturate(.55) brightness(.95); }
.cc-forecast { margin: 1.4cqw 0 0; min-height: 1.45em; text-align: center; font: 700 clamp(12px, 3.3cqw, 15px)/1.45 var(--body); color: var(--ink); }
.cc-forecast small { margin-right: .5em; font-size: 1em; font-weight: 900; color: var(--gold-d); }
.cc-forecast i { font-style: normal; color: rgba(106, 63, 214, .35); margin: 0 .25em; }
.cc-forecast b { font-family: var(--disp); font-weight: 900; }
.cc-forecast .ok { color: #0E9F57; font-weight: 900; }
.cc-forecast .ng { color: #C1121F; font-weight: 900; }
.cc-forecast b.hurt { color: #C1121F; }
.cc-forecast b.safe { color: #0E9F57; }
.cc-forecast b.safe, .cc-forecast .ok, .cc-forecast .ng { white-space: nowrap; }

/* ───── 制作ライン: チーム（全員が見える。休み中は暗く） ───── */
.cc-roster { width: 100%; flex: none; display: flex; gap: 2.2cqw; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 3cqw 3cqw 3.2cqw; position: relative; z-index: 6; transition: opacity .2s; }
.cc-roster .cc-card { font-size: max(18.4px, 4.9cqw); flex: none; scroll-snap-align: start; touch-action: pan-x; transition: transform .2s cubic-bezier(.34, 1.56, .64, 1); }
.cc-roster .cc-card:active { transform: scale(.96); }
.cc-roster .cc-card.off > :not(.cc-off) { filter: grayscale(.9); opacity: .5; }
.cc-roster .cc-card.seat > :not(.cc-seat) { opacity: .45; }
.cc-roster .cc-card.lead { box-shadow: 0 .12em 0 #B07A00, 0 0 0 .14em #fff, 0 0 0 .3em var(--c), 0 .5em 1em rgba(74, 42, 158, .25); }
.cc-roster .cc-card.lead::after { content: "担当 +2"; position: absolute; left: 50%; bottom: -.5em; transform: translateX(-50%); z-index: 5; font: 900 max(12px, .55em)/1 var(--body); color: #fff; background: var(--c); padding: .3em .65em; border-radius: 999px; white-space: nowrap; box-shadow: 0 0 0 2px #fff; }
.cc-roster .cc-card.job-sales.lead::after { color: #3D2600; }
.cc-off, .cc-seat { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%) rotate(-8deg); z-index: 6; font: 900 max(12px, .62em)/1 var(--body); color: #fff; background: rgba(42, 33, 64, .88); padding: .5em .85em; border-radius: 999px; white-space: nowrap; box-shadow: 0 0 0 2px #fff; }
.cc-off b { font-family: var(--disp); font-size: 1.2em; }
.cc-seat { background: var(--violet); transform: translate(-50%, -50%); }
.cc-roster.dim { opacity: .5; pointer-events: none; }
/* 休みの札: 丸い玉ではなく、横長の札（「休1」など） */
.cc-card-rest { width: auto; min-width: 2.6em; height: 1.75em; padding: 0 .45em; border-radius: .45em; font: 900 .78em/1 var(--body); letter-spacing: .02em; background: linear-gradient(180deg, #FFFFFF, #E9E2FF) padding-box, var(--goldgrad) border-box; color: var(--violet-d); text-shadow: none; }
.cc-card-rest.wide { font-size: .74em; }
.cc-card-rest { white-space: nowrap; display: grid; place-content: center; }
.cc-card.no .cc-card-rest { background: linear-gradient(180deg, #FFFFFF, #E9E2FF) padding-box, var(--goldgrad) border-box; }
.cc-end.idle { filter: saturate(.3) brightness(1.08); opacity: .7; }
.cc-clear { flex: none; min-width: 18cqw; min-height: 52px; font-size: clamp(12px, 3.4cqw, 15px); line-height: 1.15; padding: .3em .6em; }

/* ───── 勝ったあと: 担当した職種が育つ ───── */
.cc-growbox { width: 100%; flex: none; display: flex; align-items: center; gap: 3cqw; padding: 3cqw 3.4cqw; border-left: 6px solid var(--c); text-align: left; }
.cc-growbox img { width: 18cqw; height: 18cqw; min-width: 60px; min-height: 60px; flex: none; border-radius: 50%; object-fit: cover; object-position: 50% 15%; background: #fff; border: 3px solid #fff; box-shadow: 0 0 0 3px var(--c); }
.cc-growbox ul { margin: 0; padding-left: 1.1em; font: 700 clamp(12px, 3.6cqw, 16px)/1.6 var(--body); }
.cc-growbox b { color: var(--violet-d); }
.cc-plan-opt img.cc-plan-foe { width: 12cqw; height: 12cqw; min-width: 40px; min-height: 40px; margin-left: auto; object-fit: contain; filter: drop-shadow(0 .15em .2em rgba(74, 42, 158, .25)); }
.cc-plan-opts.four .cc-plan-opt img.cc-plan-foe { display: none; }
.cc-plan-step b { word-break: keep-all; font-size: clamp(12px, 3.4cqw, 16px); }

/* ───── 相棒の先輩（職種の先輩の絵を丸く見せる） ───── */
.cc-buddy-opt img { border-radius: 50%; object-fit: cover; background: #FFF6E0; border: 3px solid #fff; box-shadow: 0 0 0 3px var(--gold); }
.cc-rb-relics img.cc-rb-buddy { border-radius: 50%; object-fit: cover; background: #fff; border: 2px solid #fff; box-shadow: 0 0 0 2px var(--gold); }