/* CAREER JUMP（作り込み版）— クレイアニメ調（粘土のおもちゃの世界）。明るい昼の配色 */
:root {
    --ink: #3A2B22;
    --mute: #7A6658;
    --cream: #FFF6E6;
    --paper: #FFFBF3;
    --grass: #62C95A;
    --sky: #6EC6FF;
    --sun: #FFD23F;
    --terra: #E07A4F;
    --red: #E63946;
    --disp: "Fredoka", "M PLUS Rounded 1c", sans-serif;
    --body: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { background: #DDF0FF; color: var(--ink); font-family: var(--body); font-weight: 500; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
button { font: inherit; color: inherit; }
.cj-backdrop { position: fixed; inset: 0; background: radial-gradient(circle at 20% 15%, #FFF3C4 0 12%, transparent 40%), radial-gradient(circle at 85% 80%, #CFF1C9 0 10%, transparent 45%), linear-gradient(180deg, #CDEBFF, #FFF6E6); }
.cj-stage { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden; background: #EAF6FF; border-radius: 26px; box-shadow: 0 0 0 6px #fff, 0 0 0 9px rgba(58, 43, 34, .12), 0 30px 80px rgba(58, 43, 34, .25); container-type: size; }
.cj-stage.cj-full { border-radius: 0; box-shadow: none; }
.cj-stage [hidden] { display: none !important; }
.cj-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ───── 粘土の部品 ───── */
.cj-clay {
    background: linear-gradient(180deg, #fff, #FFF1DC);
    border-radius: 999px;
    box-shadow: inset 0 -.32em 0 rgba(224, 122, 79, .22), inset 0 .18em 0 rgba(255, 255, 255, .9), 0 .28em 0 rgba(58, 43, 34, .25), 0 .5em 1em rgba(58, 43, 34, .12);
}
.cj-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4em;
    cursor: pointer; text-decoration: none; border: 0; min-height: 44px;
    font: 800 clamp(14px, 4.4cqw, 22px)/1.2 var(--body); letter-spacing: .05em; word-break: keep-all;
    padding: .7em 1.6em .8em; border-radius: 999px; color: var(--ink);
    background: linear-gradient(180deg, #fff, #FFEBD0);
    box-shadow: inset 0 -.3em 0 rgba(224, 122, 79, .25), inset 0 .16em 0 #fff, 0 .3em 0 #C9A88C, 0 .55em 1em rgba(58, 43, 34, .16);
    transition: transform .1s, box-shadow .1s;
}
.cj-btn:active { transform: translateY(.2em); box-shadow: inset 0 -.2em 0 rgba(224, 122, 79, .25), 0 .1em 0 #C9A88C; }
.cj-btn-main { color: #fff; text-shadow: 0 .08em 0 rgba(120, 40, 10, .45); background: linear-gradient(180deg, #FF9C6E, var(--terra) 60%, #D0603A); box-shadow: inset 0 -.32em 0 rgba(120, 40, 10, .25), inset 0 .18em 0 rgba(255, 255, 255, .55), 0 .32em 0 #A44A28, 0 .6em 1.2em rgba(224, 122, 79, .35); }
.cj-btn-main:active { box-shadow: inset 0 -.2em 0 rgba(120, 40, 10, .25), 0 .12em 0 #A44A28; }
.cj-btn-green { color: #fff; text-shadow: 0 .08em 0 rgba(20, 80, 20, .45); background: linear-gradient(180deg, #8FE07F, var(--grass) 60%, #45A93E); box-shadow: inset 0 -.32em 0 rgba(20, 80, 20, .22), inset 0 .18em 0 rgba(255, 255, 255, .55), 0 .32em 0 #2F7F2A, 0 .6em 1.2em rgba(98, 201, 90, .35); }
.cj-btn-s { font-size: clamp(12px, 3.5cqw, 17px); padding: .55em 1.1em .65em; }
.cj-link { color: var(--ink); font: 700 clamp(12px, 3.4cqw, 15px)/1 var(--body); text-decoration: underline; background: none; border: 0; padding: .7em .4em; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; }
.cj-screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqw; padding: max(4cqw, env(safe-area-inset-top)) 5cqw max(4cqw, env(safe-area-inset-bottom)); text-align: center; }
.cj-scroll { overflow-y: auto; touch-action: pan-y; justify-content: flex-start; }
.cj-scroll > * { flex: none; }
.cj-h2 { margin: 0; font: 700 clamp(26px, 8.6cqw, 46px)/1.1 var(--disp); letter-spacing: .02em; color: #fff; -webkit-text-stroke: .14em var(--ink); paint-order: stroke fill; text-shadow: 0 .1em 0 var(--ink), 0 .18em .2em rgba(58, 43, 34, .25); }
/* 漢字の見出しは太いふちでつぶれるので、色文字＋白い縁取り＋影で起こす */
.cj-h2.jp { font-family: var(--body); font-weight: 900; color: var(--terra); -webkit-text-stroke: 0; text-shadow: 0 0 .06em #fff, 0 .05em 0 #fff, 0 .1em 0 #E9B98A, 0 .16em .16em rgba(58, 43, 34, .22); letter-spacing: .04em; }
.cj-topbar { width: 100%; display: flex; align-items: center; gap: 2cqw; }
.cj-back { width: 12cqw; height: 12cqw; min-width: 44px; min-height: 44px; border-radius: 50%; border: 0; cursor: pointer; font: 700 7cqw/1 var(--disp); padding-bottom: .1em; }
.cj-topbar .cj-h2 { flex: 1; text-align: left; font-size: clamp(20px, 6.4cqw, 34px); }
.cj-sound { position: absolute; top: max(3cqw, env(safe-area-inset-top)); right: 3cqw; min-height: 44px; border: 0; cursor: pointer; padding: .5em 1em; font: 700 clamp(12px, 3.4cqw, 16px)/1 var(--disp); }
.cj-sound-inline { position: static; }

/* ───── HUD ───── */
.cj-hud { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 1.2cqw; padding: max(2cqw, env(safe-area-inset-top)) 2cqw 0; pointer-events: none; font-size: clamp(12px, 3cqw, 16px); }
.cj-pill { display: flex; align-items: center; gap: .45em; white-space: nowrap; padding: .45em .9em .5em; }
.cj-pill small { font: 600 max(12px, .7em)/1 var(--disp); color: var(--terra); letter-spacing: .04em; }
.cj-pill b { font: 700 1.15em/1 var(--disp); font-variant-numeric: tabular-nums; }
.cj-hud-stage b { font-family: var(--body); font-weight: 900; font-size: 1em; max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
.cj-hud-stage .cj-id { background: var(--grass); color: #fff; border-radius: 999px; padding: .2em .5em; font: 700 max(12px, .85em)/1 var(--disp); }
.cj-lives { gap: .2em; padding: .5em .7em; }
.cj-lives i { width: 1.1em; height: 1em; background: #FF5A6E; clip-path: path('M8 14 C-4 6 1 -2 8 3 C15 -2 20 6 8 14Z'); display: block; transform: scale(1.1); }
.cj-lives i { clip-path: none; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15), inset 0 2px 0 rgba(255, 255, 255, .5); }
.cj-lives i.off { background: #DDD3C8; }
.cj-grow { flex: 1 1 0; min-width: 0; }
.cj-icon { width: 2.8em; height: 2.8em; min-width: 44px; min-height: 44px; border-radius: 50%; border: 0; cursor: pointer; pointer-events: auto; font: 700 1em/1 var(--disp); }
.cj-sub { position: absolute; left: 2cqw; right: 2cqw; top: calc(max(2cqw, env(safe-area-inset-top)) + 12.6cqw); display: flex; align-items: center; gap: 1.2cqw; pointer-events: none; font-size: clamp(12px, 3cqw, 16px); }
.cj-coins { display: flex; gap: .8cqw; }
.cj-chip { display: flex; align-items: center; gap: .2em; padding: .2em .55em .2em .2em; font: 700 1em/1 var(--disp); transition: transform .14s; }
.cj-chip img { width: 1.8em; height: 1.8em; display: block; }
.cj-chip b { min-width: 1.2em; text-align: right; font-variant-numeric: tabular-nums; }
.cj-chip.pop { transform: scale(1.18); }
.cj-score { font-size: .95em; }
.cj-medals { display: flex; gap: .2em; padding: .25em .5em; }
.cj-medals i { width: 1.8em; height: 1.8em; display: block; }
.cj-medals img { width: 100%; height: 100%; filter: grayscale(1) opacity(.3); transition: filter .3s, transform .3s; }
.cj-medals i.m1 img { filter: grayscale(.4) opacity(.65); }
.cj-medals i.m2 img { filter: none; animation: cjPop .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes cjPop { from { transform: scale(0) rotate(-40deg); } }
.cj-power { position: absolute; left: 50%; bottom: calc(var(--pad-h, 19%) + 1.4cqw); transform: translateX(-50%); display: flex; align-items: center; gap: .4em; padding: .3em .9em .3em .3em; pointer-events: none; font: 800 clamp(12px, 3.3cqw, 16px)/1.15 var(--body); white-space: nowrap; border: 3px solid var(--c, #D9CBBB); }
.cj-power img { width: 2.2em; height: 2.2em; display: block; }
.cj-power span { display: flex; flex-direction: column; text-align: left; }
.cj-power small { font-size: max(12px, .72em); color: var(--mute); font-weight: 700; }
.cj-power .cj-pw-none { color: var(--mute); padding: .3em .2em; font-weight: 700; }
.cj-power.pop { animation: cjPowerPop .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes cjPowerPop { 0% { transform: translateX(-50%) scale(.6); } 100% { transform: translateX(-50%) scale(1); } }
.cj-bossbar { position: absolute; left: 50%; transform: translateX(-50%); top: calc(max(2cqw, env(safe-area-inset-top)) + 24cqw); display: flex; align-items: center; gap: .6em; padding: .4em .9em; pointer-events: none; font: 900 clamp(12px, 3.6cqw, 18px)/1 var(--body); white-space: nowrap; }
.cj-bossbar b { color: var(--red); }
.cj-bossbar span { display: flex; gap: .2em; }
.cj-bossbar span i { width: 1.6em; height: .9em; border-radius: 999px; background: linear-gradient(180deg, #FF8A93, var(--red)); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); }
.cj-bossbar span i.off { background: #E4DDD3; box-shadow: none; }

/* ───── 操作ボタン ───── */
.cj-pad { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 4cqw max(2cqw, env(safe-area-inset-bottom)); pointer-events: none; }
.cj-move { display: flex; gap: 2.6cqw; pointer-events: auto; padding: 2cqw; margin: -2cqw; touch-action: none; }
.cj-key {
    width: 20cqw; height: 20cqw; min-width: 56px; min-height: 56px; display: grid; place-items: center; border-radius: 50%;
    background: radial-gradient(circle at 50% 32%, #fff, #FFEAD2 75%);
    box-shadow: inset 0 -.9cqw 0 rgba(224, 122, 79, .28), inset 0 .5cqw 0 #fff, 0 1.3cqw 0 #C9A88C, 0 2.4cqw 3cqw rgba(58, 43, 34, .22);
    font: 700 6.6cqw/1 var(--disp); color: var(--ink); transition: transform .06s, box-shadow .06s; touch-action: none;
}
.cj-key.on { transform: translateY(1cqw); box-shadow: inset 0 -.6cqw 0 rgba(224, 122, 79, .28), 0 .3cqw 0 #C9A88C; background: radial-gradient(circle at 50% 32%, #FFFBE0, #FFE39A 75%); }
.cj-right { display: flex; align-items: flex-end; gap: 2.4cqw; pointer-events: none; }
.cj-act { pointer-events: auto; cursor: pointer; width: 18cqw; height: 18cqw; margin-bottom: 9cqw; background: radial-gradient(circle at 50% 30%, #A8DCFF, #4DB0FF 72%); color: #fff; box-shadow: inset 0 -.9cqw 0 rgba(20, 60, 120, .25), inset 0 .5cqw 0 rgba(255, 255, 255, .6), 0 1.3cqw 0 #2577C9, 0 2.4cqw 3cqw rgba(58, 43, 34, .22); }
.cj-act b { font: 800 3.4cqw/1.1 var(--body); text-shadow: 0 .1em 0 rgba(20, 60, 120, .5); }
.cj-act.dim { filter: saturate(.25) brightness(1.08); opacity: .75; }
.cj-act.door { animation: cjPulse 1s ease-in-out infinite; background: radial-gradient(circle at 50% 30%, #A6EE9A, var(--grass) 72%); box-shadow: inset 0 -.9cqw 0 rgba(20, 80, 20, .25), 0 1.3cqw 0 #2F7F2A; }
.cj-jump { pointer-events: auto; cursor: pointer; width: 27cqw; height: 27cqw; background: radial-gradient(circle at 50% 30%, #FFB48F, var(--terra) 72%); color: #fff; box-shadow: inset 0 -1cqw 0 rgba(120, 40, 10, .25), inset 0 .5cqw 0 rgba(255, 255, 255, .55), 0 1.4cqw 0 #A44A28, 0 2.4cqw 3cqw rgba(58, 43, 34, .22); }
.cj-jump b { font: 700 5.2cqw/1 var(--disp); text-shadow: 0 .1em 0 rgba(120, 40, 10, .5); }
.cj-jump b::before { content: "▲"; display: block; font-size: .7em; margin-bottom: .15em; }
.cj-jump.on, .cj-act.on { transform: translateY(1cqw); }

/* ───── 案内・告知 ───── */
.cj-tip { position: absolute; left: 3cqw; right: 3cqw; top: calc(max(2cqw, env(safe-area-inset-top)) + 24cqw); display: flex; gap: 2cqw; align-items: flex-start; pointer-events: none; animation: cjIn .4s cubic-bezier(.34, 1.56, .64, 1); }
.cj-tip img { width: 15cqw; height: 15cqw; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 0 0 3px var(--ink); flex: none; background: var(--cream); }
.cj-tip div { flex: 1; background: var(--paper); border-radius: 20px; padding: 2cqw 3cqw; text-align: left; box-shadow: 0 0 0 3px var(--ink), 0 .35em 0 var(--ink); }
.cj-tip small { display: block; font: 800 clamp(12px, 2.8cqw, 13px)/1.2 var(--body); color: var(--terra); margin-bottom: .2em; }
.cj-tip p { margin: 0; font: 700 clamp(13px, 3.8cqw, 18px)/1.55 var(--body); word-break: keep-all; overflow-wrap: anywhere; }
@keyframes cjIn { from { opacity: 0; transform: translateY(-3cqw) scale(.94); } }
.cj-banner { position: absolute; left: 0; right: 0; top: 30%; display: flex; flex-direction: column; align-items: center; gap: .3em; pointer-events: none; animation: cjBanner 2.2s ease forwards; }
.cj-banner small { font: 700 clamp(12px, 3.6cqw, 18px)/1 var(--disp); letter-spacing: .2em; color: #fff; background: var(--terra); padding: .45em 1.1em; border-radius: 999px; box-shadow: 0 .2em 0 #A44A28; }
.cj-banner b { font: 900 clamp(30px, 10.5cqw, 58px)/1.1 var(--body); letter-spacing: .03em; color: #fff; -webkit-text-stroke: .09em var(--ink); paint-order: stroke fill; text-shadow: 0 .07em 0 var(--ink), 0 .2em .3em rgba(58, 43, 34, .25); text-align: center; padding: 0 4cqw; word-break: keep-all; }
.cj-banner span { font: 800 clamp(13px, 4cqw, 20px)/1.2 var(--body); background: var(--paper); border-radius: 999px; padding: .35em 1em; box-shadow: 0 0 0 3px var(--ink), 0 .2em 0 var(--ink); }
.cj-banner span:empty { display: none; }
@keyframes cjBanner { 0% { opacity: 0; transform: scale(1.5); } 12% { opacity: 1; transform: scale(1); } 84% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.9) translateY(-4cqw); } }
.cj-bigword { position: absolute; left: 0; right: 0; top: 22%; display: flex; justify-content: center; pointer-events: none; animation: cjWord 2.4s ease forwards; }
.cj-bigword img { width: 80cqw; height: auto; }
@keyframes cjWord { 0% { opacity: 0; transform: scale(.3) rotate(-8deg); } 14% { opacity: 1; transform: scale(1.08) rotate(2deg); } 22% { transform: scale(1) rotate(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: scale(1.05); } }
.cj-word { font: 700 clamp(48px, 18cqw, 96px)/1 var(--disp); color: #fff; -webkit-text-stroke: .1em var(--ink); paint-order: stroke fill; text-shadow: 0 .06em 0 var(--ink), 0 .12em 0 var(--ink), 0 .2em .2em rgba(58, 43, 34, .3); letter-spacing: .02em; display: inline-block; transform: rotate(-4deg); }
.cj-word-clear, .cj-word-goal { color: var(--sun); }
.cj-word-nicetry { color: var(--sky); font-size: clamp(40px, 14cqw, 80px); }
.cj-word-boss { color: #FF8574; }
.cj-goalmsg { position: absolute; left: 4cqw; right: 4cqw; bottom: 8%; text-align: center; pointer-events: none; animation: cjIn .7s cubic-bezier(.34, 1.56, .64, 1) backwards; }
.cj-goalmsg b { font: 900 clamp(20px, 7.4cqw, 40px)/1.4 var(--body); letter-spacing: .04em; color: #fff; -webkit-text-stroke: .12em var(--terra); paint-order: stroke fill; text-shadow: 0 .08em 0 #A44A28, 0 .15em .2em rgba(58, 43, 34, .25); word-break: keep-all; }

/* ───── タイトル ───── */
.cj-title { justify-content: flex-end; gap: 2.4cqw; padding-bottom: max(5cqw, env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(255, 246, 230, 0) 52%, rgba(255, 246, 230, .88) 66%, rgba(255, 246, 230, .97)); }
.cj-logo-wrap { margin-bottom: auto; margin-top: 13cqw; width: 88cqw; display: flex; justify-content: center; animation: cjFloat 3.2s ease-in-out infinite; }
.cj-logo { width: 88cqw; height: auto; filter: drop-shadow(0 1.4cqw 2cqw rgba(58, 43, 34, .22)); }
@keyframes cjFloat { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-1.6cqw) rotate(1deg); } }
.cj-logo-text { margin: 0; display: flex; flex-direction: column; align-items: center; line-height: .95; }
.cj-logo-text span { font: 700 12cqw/1 var(--disp); color: var(--sun); -webkit-text-stroke: .12em var(--ink); paint-order: stroke fill; text-shadow: 0 .07em 0 var(--ink), 0 .14em .1em rgba(58, 43, 34, .3); letter-spacing: .06em; }
.cj-logo-text b { display: flex; gap: .5cqw; font: 700 28cqw/1 var(--disp); }
.cj-logo-text b i { font-style: normal; -webkit-text-stroke: .08em var(--ink); paint-order: stroke fill; text-shadow: 0 .05em 0 var(--ink), 0 .09em 0 var(--ink), 0 .14em .12em rgba(58, 43, 34, .3); animation: cjHop 1.8s ease-in-out infinite; }
.cj-logo-text b i:nth-child(1) { color: var(--grass); }
.cj-logo-text b i:nth-child(2) { color: var(--sky); animation-delay: .15s; }
.cj-logo-text b i:nth-child(3) { color: var(--sun); animation-delay: .3s; }
.cj-logo-text b i:nth-child(4) { color: var(--terra); animation-delay: .45s; }
@keyframes cjHop { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-3.2cqw); } }
.cj-catch { margin: 0; font: 900 clamp(15px, 5cqw, 27px)/1.45 var(--body); letter-spacing: .04em; word-break: keep-all; text-shadow: 0 0 .3em #fff, 0 0 .6em #fff; }
.cj-title-btns { display: flex; flex-direction: column; gap: 2.8cqw; align-items: center; }
.cj-title-btns .cj-btn-main { font-size: clamp(18px, 6.4cqw, 32px); padding: .55em 2.6em .65em; animation: cjPulse 1.6s ease-in-out infinite; }
.cj-row { display: flex; gap: 2.4cqw; justify-content: center; flex-wrap: wrap; }
@keyframes cjPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.cj-tstats { display: flex; gap: 3cqw; justify-content: center; font: 700 clamp(13px, 3.8cqw, 19px)/1 var(--disp); }
.cj-tstats:empty { display: none; }
.cj-tstats span { display: flex; align-items: center; gap: .3em; }
.cj-tstats img { width: 1.5em; height: 1.5em; }
.cj-note { margin: 0; font-size: clamp(12px, 3cqw, 14px); color: var(--mute); line-height: 1.6; word-break: keep-all; font-weight: 700; }
.cj-demo { position: absolute; top: max(3cqw, env(safe-area-inset-top)); left: 3cqw; font: 600 clamp(12px, 2.8cqw, 14px)/1 var(--disp); letter-spacing: .18em; background: var(--ink); color: #fff; padding: .7em 1.1em; border-radius: 999px; }
.cj-demo::before { content: ""; display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: #FF8574; margin-right: .6em; animation: cjBlink 1s steps(2) infinite; }
@keyframes cjBlink { 50% { opacity: 0; } }

/* ───── あそびかた ───── */
.cj-howto, .cj-dex, .cj-buddy-sc { background: linear-gradient(180deg, rgba(221, 240, 255, .97), rgba(255, 246, 230, .98) 40%); }
.cj-card { width: 100%; background: var(--paper); border-radius: 22px; padding: 3cqw 3.6cqw; text-align: left; box-shadow: 0 0 0 3px var(--ink), 0 .35em 0 var(--ink); }
.cj-how-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2cqw; }
.cj-how-list li { display: grid; grid-template-columns: 11cqw 1fr; gap: .2em 2.6cqw; align-items: center; font: 600 clamp(12px, 3.4cqw, 16px)/1.5 var(--body); }
.cj-how-list li img { grid-row: span 2; width: 11cqw; height: 11cqw; }
.cj-how-list li b { font-weight: 900; color: var(--c, var(--ink)); }
.cj-how-list li span { color: var(--ink); word-break: keep-all; overflow-wrap: anywhere; }
.cj-how-keys { display: flex; flex-wrap: wrap; gap: 1.6cqw; align-items: center; font: 700 clamp(12px, 3.4cqw, 16px)/1.5 var(--body); }
.cj-how-keys kbd { font: 700 1em/1 var(--disp); padding: .45em .7em; border-radius: 12px; background: #fff; box-shadow: 0 0 0 2px var(--ink), 0 .2em 0 var(--ink); }
.cj-card h3 { margin: 0 0 1.6cqw; font: 900 clamp(15px, 4.4cqw, 21px)/1.3 var(--body); color: var(--terra); }
.cj-card p { margin: 0; font: 600 clamp(12px, 3.5cqw, 16.5px)/1.65 var(--body); word-break: keep-all; overflow-wrap: anywhere; }

/* ───── ワールドマップ ───── */
.cj-map { padding: 0; justify-content: flex-start; gap: 0; background: linear-gradient(180deg, #BFE6FF 0%, #E8F7FF 22%, #FFE7C2 46%, #C9EFB6 70%, #9EDB8C 100%); }
.cj-map-top { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; align-items: center; gap: 2cqw; padding: max(3cqw, env(safe-area-inset-top)) 3cqw 0; }
.cj-map-top .cj-pill { font-size: clamp(12px, 3.4cqw, 17px); }
.cj-map-top .cj-pill img { width: 1.5em; height: 1.5em; }
.cj-map-area { position: absolute; left: 0; right: 0; top: 0; height: 64%; background: center / cover no-repeat; }
.cj-map-area::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, .4)); }
.cj-map-area svg { position: absolute; inset: 9% 0 0; width: 100%; height: 91%; overflow: visible; }
.cj-path-bg { fill: none; stroke: #fff; stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-width: 22px; opacity: .9; }
.cj-path { fill: none; stroke: #E9B98A; stroke-width: 10px; stroke-dasharray: 2 18; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cj-nodes { position: absolute; inset: 9% 0 0; }
.cj-wlabel { position: absolute; transform: translate(0, -50%); font: 900 clamp(12px, 3.2cqw, 15px)/1.2 var(--body); background: rgba(255, 251, 243, .92); padding: .35em .8em; border-radius: 999px; box-shadow: 0 0 0 2.5px var(--wc), 0 .2em 0 rgba(58, 43, 34, .2); white-space: nowrap; pointer-events: none; }
.cj-wlabel small { display: block; font: 600 max(12px, .74em)/1.1 var(--disp); color: var(--mute); letter-spacing: .1em; }
.cj-node { position: absolute; transform: translate(-50%, -50%); width: 15cqw; height: 15cqw; min-width: 48px; min-height: 48px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
    background: radial-gradient(circle at 50% 30%, #fff, #FFEBD0 70%); box-shadow: inset 0 -.8cqw 0 rgba(224, 122, 79, .3), 0 0 0 .9cqw var(--wc), 0 1.4cqw 0 .9cqw rgba(58, 43, 34, .25); display: grid; place-items: center; transition: transform .15s; }
.cj-node b { font: 700 clamp(13px, 4.2cqw, 22px)/1 var(--disp); }
.cj-node b img { width: 7cqw; height: 7cqw; }
.cj-node.boss { width: 18cqw; height: 18cqw; background: radial-gradient(circle at 50% 30%, #FFD9CF, #FF9C84 70%); }
.cj-node.boss::before { content: "BOSS"; position: absolute; top: -3.4cqw; font: 700 clamp(12px, 2.6cqw, 13px)/1 var(--disp); color: #fff; background: var(--red); padding: .3em .6em; border-radius: 999px; letter-spacing: .1em; }
.cj-node.locked { filter: grayscale(.85); opacity: .75; }
.cj-node.clear b { color: #2E7D32; }
.cj-node.sel { transform: translate(-50%, -50%) scale(1.15); }
.cj-node-stars { position: absolute; bottom: -4.6cqw; display: flex; gap: .2cqw; }
.cj-node-stars img { width: 4.6cqw; height: 4.6cqw; }
.cj-token { position: absolute; width: 15cqw; height: 15cqw; object-fit: contain; transform: translate(-50%, -128%); pointer-events: none; transition: left .45s cubic-bezier(.34, 1.4, .64, 1), top .45s cubic-bezier(.34, 1.4, .64, 1); animation: cjBob 1s ease-in-out infinite; filter: drop-shadow(0 1cqw 1cqw rgba(58, 43, 34, .3)); }
@keyframes cjBob { 50% { margin-top: -1.6cqw; } }
.cj-map-panel { position: absolute; left: 3cqw; right: 3cqw; width: auto; bottom: max(3cqw, env(safe-area-inset-bottom)); z-index: 3; display: flex; flex-direction: column; gap: 1.8cqw; text-align: left; }
.cj-mp-w { margin: 0; font: 600 clamp(12px, 3cqw, 14px)/1.2 var(--disp); color: var(--terra); letter-spacing: .06em; }
.cj-mp-n { margin: 0; font: 900 clamp(17px, 5.2cqw, 26px)/1.25 var(--body); }
.cj-missions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1cqw; }
.cj-missions li { display: flex; align-items: center; gap: 1.6cqw; font: 700 clamp(12px, 3.5cqw, 16px)/1.3 var(--body); color: var(--mute); }
.cj-missions li.done { color: var(--ink); }
.cj-missions li img { width: 6cqw; height: 6cqw; flex: none; }
.cj-missions li span { flex: 1; }
.cj-missions li b { font: 700 max(12px, .8em)/1 var(--disp); color: #fff; background: var(--red); border-radius: 999px; padding: .35em .6em; }
.cj-mp-m { display: flex; align-items: center; gap: 1cqw; font: 700 clamp(12px, 3.2cqw, 15px)/1 var(--body); color: var(--mute); }
.cj-mp-m i { width: 7cqw; height: 7cqw; display: block; }
.cj-mp-m i img { width: 100%; height: 100%; filter: grayscale(1) opacity(.3); }
.cj-mp-m i.on img { filter: none; }
.cj-mp-m span { margin-left: auto; }
.cj-mp-btns { display: flex; gap: 2cqw; align-items: center; }
.cj-mp-btns .cj-btn-main { flex: 1; }

/* ───── 相棒えらび ───── */
.cj-buddy-sc { gap: 2.4cqw; }
.cj-buddy-lead { margin: 0; font: 700 clamp(12px, 3.6cqw, 17px)/1.5 var(--body); color: var(--mute); }
.cj-buddies { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.cj-buddy { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1cqw; padding: 3cqw 2.4cqw 3.4cqw; border: 0; border-radius: 22px; cursor: pointer; text-align: center;
    background: linear-gradient(180deg, var(--l), #fff 60%); box-shadow: 0 0 0 3px var(--ink), 0 .35em 0 var(--ink); transition: transform .12s; }
.cj-buddy:active { transform: translateY(.2em); box-shadow: 0 0 0 3px var(--ink), 0 .12em 0 var(--ink); }
.cj-buddy.rec { box-shadow: 0 0 0 4px var(--c), 0 0 0 7px var(--ink), 0 .45em 0 var(--ink); }
.cj-buddy em { position: absolute; top: -2.6cqw; font: 900 clamp(12px, 2.8cqw, 13px)/1 var(--body); font-style: normal; color: #fff; background: var(--c); border-radius: 999px; padding: .45em .9em; box-shadow: 0 .15em 0 var(--ink); white-space: nowrap; }
.cj-buddy > img { width: 22cqw; height: 22cqw; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 0 0 3px var(--c); background: #fff; }
.cj-buddy b { font: 900 clamp(13px, 3.9cqw, 19px)/1.25 var(--body); word-break: keep-all; }
.cj-buddy-ab { display: inline-flex; align-items: center; gap: .3em; font: 800 clamp(12px, 3.5cqw, 17px)/1 var(--body); color: var(--c); }
.cj-buddy-ab img { width: 1.6em; height: 1.6em; }
.cj-buddy small { font: 600 clamp(12px, 3cqw, 14px)/1.5 var(--body); color: var(--mute); word-break: normal; line-break: strict; }

/* ───── 一時停止 ───── */
.cj-pause { background: rgba(255, 246, 230, .94); gap: 4cqw; }

/* ───── 結果 ───── */
.cj-result { background: rgba(255, 246, 230, .96); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); gap: 2.4cqw; padding-top: max(6cqw, env(safe-area-inset-top)); }
.cj-res-head { margin: 0; min-height: 22cqw; display: flex; align-items: center; justify-content: center; }
.cj-res-head img { width: 76cqw; height: auto; display: block; animation: cjIn .6s cubic-bezier(.34, 1.56, .64, 1); }
.cj-res-stage { margin: -1cqw 0 0; font: 900 clamp(13px, 4cqw, 19px)/1.4 var(--body); word-break: keep-all; color: var(--mute); }
.cj-res-stage.win { color: var(--terra); }
.cj-res-score { display: flex; align-items: baseline; gap: .6em; }
.cj-res-score small { font: 600 clamp(12px, 3cqw, 15px)/1 var(--disp); letter-spacing: .2em; color: var(--mute); }
.cj-res-score b { font: 700 clamp(30px, 10cqw, 52px)/1 var(--disp); font-variant-numeric: tabular-nums; }
.cj-res-record { margin: -1.4cqw 0 0; font: 700 clamp(16px, 5.4cqw, 28px)/1 var(--disp); color: var(--sun); -webkit-text-stroke: .12em var(--ink); paint-order: stroke fill; text-shadow: 0 .08em 0 var(--ink); animation: cjIn .6s cubic-bezier(.34, 1.56, .64, 1) .8s backwards; }
.cj-res-stats { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; }
.cj-res-stats li { display: flex; flex-direction: column; gap: .35em; padding: .55em .3em .6em; border-radius: 18px; }
.cj-res-stats small { font: 700 clamp(12px, 2.8cqw, 13px)/1 var(--body); color: var(--mute); }
.cj-res-stats b { font: 700 clamp(16px, 5cqw, 25px)/1 var(--disp); font-variant-numeric: tabular-nums; }
.cj-res-miss { width: 100%; }
.cj-res-miss li img { animation: cjStar .5s cubic-bezier(.34, 1.56, .64, 1) backwards; }
.cj-res-miss li:nth-child(2) img { animation-delay: .25s; }
.cj-res-miss li:nth-child(3) img { animation-delay: .5s; }
@keyframes cjStar { from { transform: scale(0) rotate(-90deg); } }
.cj-dexnew { margin: 0; width: 100%; padding: .7em 1em; border-radius: 16px; background: #FFF2C7; box-shadow: 0 0 0 2.5px #F2A900; font: 700 clamp(12px, 3.4cqw, 16px)/1.5 var(--body); text-align: left; }
.cj-dexnew b { display: block; color: #9A6B00; }
.cj-res-btns { display: flex; flex-direction: column; gap: 2.6cqw; align-items: center; width: 100%; }
.cj-res-btns .cj-btn { min-width: 72cqw; }
.cj-res-match { width: 100%; text-align: left; }
.cj-res-lead { margin: 0 0 1.6cqw; font: 800 clamp(12px, 3.6cqw, 17px)/1.4 var(--body); color: var(--mute); }
.cj-res-job { display: flex; align-items: center; gap: 3cqw; }
.cj-res-job img { width: 23cqw; height: 23cqw; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 0 0 3px var(--ink); background: var(--cream); flex: none; }
.cj-res-job > div { min-width: 0; }
.cj-res-type { margin: 0 0 .3em; font: 800 clamp(12px, 3cqw, 14px)/1.3 var(--body); color: var(--terra); }
.cj-res-name { margin: 0; font: 900 clamp(18px, 5.4cqw, 28px)/1.25 var(--body); word-break: keep-all; overflow-wrap: anywhere; }
.cj-res-reason { margin: 2.4cqw 0 1cqw; font: 800 clamp(13px, 3.8cqw, 18px)/1.6 var(--body); color: var(--terra); }
.cj-res-desc { margin: 0 0 2.4cqw; font: 600 clamp(13px, 3.6cqw, 17px)/1.7 var(--body); }
.cj-res-bars { display: flex; flex-direction: column; gap: 1.2cqw; }
.cj-res-bar { display: grid; grid-template-columns: 1.5em 9.6em 1fr; align-items: center; gap: .5em; font: 700 clamp(12px, 3cqw, 14px)/1 var(--body); }
.cj-res-bar img { width: 1.5em; height: 1.5em; }
.cj-res-bar span { white-space: nowrap; }
.cj-res-bar i { height: 1.1em; background: rgba(58, 43, 34, .08); border-radius: 999px; overflow: hidden; }
.cj-res-bar em { display: block; height: 100%; width: 0; border-radius: inherit; transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.cj-res-small { margin: 2cqw 0 0; font: 600 clamp(12px, 2.8cqw, 13.6px)/1.6 var(--body); color: var(--mute); }
.cj-links { display: flex; flex-direction: column; align-items: center; gap: 2.4cqw; width: 100%; padding-bottom: 4cqw; }
.cj-links .cj-btn { min-width: 72cqw; }

/* ───── 職種図鑑 ───── */
.cj-dex { gap: 2.6cqw; }
.cj-tabs { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6cqw; }
.cj-tabs button { min-height: 44px; display: flex; flex-direction: column; align-items: center; gap: .2em; border: 0; border-radius: 16px; cursor: pointer; padding: .5em .2em; font: 800 clamp(12px, 3.2cqw, 15px)/1.1 var(--body); background: #fff; box-shadow: 0 0 0 2.5px rgba(58, 43, 34, .25), 0 .2em 0 rgba(58, 43, 34, .25); }
.cj-tabs button img { width: 2em; height: 2em; }
.cj-tabs button small { font: 600 max(12px, .8em)/1 var(--disp); color: var(--mute); }
.cj-tabs button.on { background: var(--c); color: #fff; box-shadow: 0 0 0 3px var(--ink), 0 .25em 0 var(--ink); }
.cj-tabs button.on small { color: #fff; }
.cj-dex-head { width: 100%; display: flex; gap: 3cqw; align-items: center; padding: 3cqw; border-radius: 22px; background: linear-gradient(180deg, var(--l), #fff); box-shadow: 0 0 0 3px var(--ink), 0 .35em 0 var(--ink); text-align: left; }
.cj-dex-head > img { width: 22cqw; height: 22cqw; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 0 0 3px var(--c); }
.cj-dex-head small { font: 700 clamp(12px, 3cqw, 14px)/1.3 var(--body); color: var(--mute); }
.cj-dex-head b { display: block; font: 900 clamp(18px, 5.4cqw, 28px)/1.25 var(--body); }
.cj-dex-head span { display: inline-flex; align-items: center; gap: .3em; font: 800 clamp(12px, 3.5cqw, 17px)/1.2 var(--body); color: var(--c); }
.cj-dex-head span img { width: 1.6em; height: 1.6em; }
.cj-dex-desc { margin: 0; font: 600 clamp(12.5px, 3.6cqw, 17px)/1.7 var(--body); text-align: left; }
.cj-dex-cards { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 2.4cqw; }
.cj-dex-cards li { text-align: left; padding: 3cqw 3.6cqw; border-radius: 20px; background: #F2ECE4; color: var(--mute); box-shadow: 0 0 0 2.5px rgba(58, 43, 34, .2); }
.cj-dex-cards li.open { background: #fff; color: var(--ink); box-shadow: 0 0 0 3px var(--c), 0 .3em 0 var(--ink); animation: cjIn .4s cubic-bezier(.34, 1.56, .64, 1) backwards; }
.cj-dex-cards em { font: 600 clamp(12px, 2.8cqw, 13px)/1 var(--disp); font-style: normal; letter-spacing: .14em; color: var(--c); }
.cj-dex-cards b { display: block; margin: .3em 0; font: 900 clamp(15px, 4.4cqw, 21px)/1.3 var(--body); }
.cj-dex-cards p { margin: 0; font: 600 clamp(12px, 3.5cqw, 16.5px)/1.6 var(--body); }
.cj-dex-cards i { display: block; height: .7em; margin-top: .6em; border-radius: 999px; background: rgba(58, 43, 34, .1); overflow: hidden; }
.cj-dex-cards s { display: block; height: 100%; background: var(--c); border-radius: inherit; }

/* ───── エンディング ───── */
.cj-ending { background: radial-gradient(circle at 50% 30%, rgba(255, 243, 196, .97), rgba(255, 246, 230, .97) 60%); gap: 3.4cqw; }
.cj-end-team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2cqw; width: 100%; }
.cj-end-team figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .4em; animation: cjBob 1.2s ease-in-out infinite; }
.cj-end-team figure:nth-child(2) { animation-delay: .2s; } .cj-end-team figure:nth-child(3) { animation-delay: .4s; } .cj-end-team figure:nth-child(4) { animation-delay: .6s; }
.cj-end-team img { width: 18cqw; height: 18cqw; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 0 0 3px var(--c); background: #fff; }
.cj-end-team figcaption { font: 800 clamp(12px, 2.7cqw, 13px)/1.3 var(--body); word-break: keep-all; overflow-wrap: anywhere; }
.cj-end-msg { margin: 0; font: 600 clamp(13px, 3.8cqw, 18px)/1.75 var(--body); }

/* ───── 画面の切り替え・読み込み ───── */
.cj-wipe { position: absolute; inset: 0; z-index: 20; pointer-events: none; background: radial-gradient(circle at 50% 50%, #FFD9A8, #FFE9C9 60%); clip-path: circle(0% at 50% 50%); }
.cj-wipe.in { pointer-events: auto; clip-path: circle(80% at 50% 50%); transition: clip-path .34s cubic-bezier(.6, 0, .4, 1); }
.cj-wipe.out { clip-path: circle(0% at 50% 50%); transition: clip-path .4s cubic-bezier(.6, 0, .4, 1); }
.cj-loading { position: absolute; inset: 0; z-index: 30; display: grid; place-content: center; gap: 2cqw; justify-items: center; background: var(--cream); font: 600 clamp(12px, 3cqw, 15px)/1 var(--disp); letter-spacing: .3em; transition: opacity .4s; }
.cj-loading i { width: 10cqw; height: 10cqw; border-radius: 50%; background: var(--terra); animation: cjBounce .6s ease-in-out infinite alternate; }
@keyframes cjBounce { to { transform: translateY(-4cqw); } }
.cj-loading.off { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .cj-logo-wrap, .cj-title-btns .cj-btn-main, .cj-logo-text b i, .cj-token, .cj-end-team figure { animation: none; } }