/* TEAM DEFENSE — 絵本のファンタジー王国（王家の青・金・あたたかい赤・牧草の緑・羊皮紙） */
:root {
    --ink: #2B2A4C;
    --mute: #6A6580;
    --cream: #FFF6E2;
    --parch: #FBEBC8;
    --parch-d: #EED6A4;
    --blue: #2D5BD0;
    --blue-d: #1E3F99;
    --gold: #F2B633;
    --gold-l: #FFE08A;
    --gold-d: #B9801A;
    --red: #E2453C;
    --red-d: #A82720;
    --green: #5DBB4A;
    --disp: "Cinzel Decorative", "Cinzel", "Zen Maru Gothic", serif;
    --en: "Cinzel", "Zen Maru Gothic", serif;
    --body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
    background: var(--cream); color: var(--ink);
    font-family: var(--body); font-weight: 700;
    touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
button { font: inherit; color: inherit; }
.df-backdrop {
    position: fixed; inset: 0;
    background:
        radial-gradient(circle at 20% 15%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 40%),
        radial-gradient(circle at 80% 85%, rgba(255, 224, 138, .5), rgba(255, 224, 138, 0) 45%),
        linear-gradient(160deg, #DDF0FF, #FFF6E2 45%, #E9F6D8);
}
.df-img-worldmap .df-backdrop { background: url(assets/worldmap.webp) center / cover; filter: blur(18px) saturate(1.1) brightness(1.08); inset: -40px; }
.df-stage {
    --st: 0px; --sb: 0px;
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
    overflow: hidden; background: var(--cream);
    border-radius: 22px;
    box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--gold), 0 30px 80px rgba(43, 42, 76, .28);
    container-type: size;
}
.df-stage.df-full { border-radius: 0; box-shadow: none; }
.df-stage [hidden] { display: none !important; }
.df-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.df-flash { position: absolute; inset: 0; pointer-events: none; background: #fff; opacity: 0; }
.df-flash.on { animation: dfFlash .45s ease-out; }
@keyframes dfFlash { 0% { opacity: .85; } 100% { opacity: 0; } }

/* ───── アイコン（画像が届くまでは CSS の形で出す） ───── */
.df-ico { display: inline-block; width: 1.3em; height: 1.3em; flex: none; vertical-align: -.25em; background-position: center; background-size: contain; background-repeat: no-repeat; }
.df-ico-coin { background-image: radial-gradient(circle at 38% 34%, #FFF6C8 0 12%, rgba(255, 246, 200, 0) 13%), radial-gradient(circle, #FFD45A 0 52%, #E5A21E 53% 66%, #B9801A 67% 70%, transparent 71%); }
.df-ico-heart { background-image: radial-gradient(circle at 30% 34%, #FF8C84 0 26%, transparent 27%), radial-gradient(circle at 70% 34%, #FF8C84 0 26%, transparent 27%), linear-gradient(transparent, transparent); position: relative; }
.df-ico-star { background-image: none; position: relative; }
.df-ico-star::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #FFE38A, #F2B633 60%, #D18E14); clip-path: polygon(50% 2%, 62% 36%, 98% 37%, 69% 59%, 79% 95%, 50% 74%, 21% 95%, 31% 59%, 2% 37%, 38% 36%); }
.df-ico-pause { position: relative; }
.df-ico-pause::before, .df-ico-pause::after { content: ""; position: absolute; top: 12%; bottom: 12%; width: 26%; border-radius: 4px; background: var(--blue); }
.df-ico-pause::before { left: 18%; } .df-ico-pause::after { right: 18%; }
.df-ico-speed { position: relative; }
.df-ico-speed::before { content: ""; position: absolute; inset: 14% 4% 14% 8%; background: currentColor; clip-path: polygon(0 0, 48% 50%, 48% 0, 100% 50%, 48% 100%, 48% 50%, 0 100%); }
.df-ico-sound { position: relative; }
.df-ico-sound::before { content: ""; position: absolute; inset: 14% 22% 10% 22%; background: linear-gradient(180deg, #FFE08A, #F2B633); clip-path: polygon(50% 0, 70% 10%, 82% 40%, 86% 72%, 100% 84%, 0 84%, 14% 72%, 18% 40%, 30% 10%); }
.df-ico-lock { position: relative; }
.df-ico-lock::before { content: ""; position: absolute; left: 18%; right: 18%; top: 44%; bottom: 6%; border-radius: 4px; background: linear-gradient(180deg, #FFD45A, #D18E14); }
.df-ico-lock::after { content: ""; position: absolute; left: 30%; right: 30%; top: 8%; height: 44%; border: .16em solid #C08A1A; border-bottom: 0; border-radius: 1em 1em 0 0; }
.df-img-ico_coin .df-ico-coin { background-image: url(assets/ico_coin.webp); }
.df-img-ico_star .df-ico-star { background-image: url(assets/ico_star.webp); }
.df-img-ico_star .df-ico-star::before { display: none; }
.df-img-ico_pause .df-ico-pause { background-image: url(assets/ico_pause.webp); }
.df-img-ico_pause .df-ico-pause::before, .df-img-ico_pause .df-ico-pause::after { display: none; }
.df-img-ico_speed .df-ico-speed { background-image: url(assets/ico_speed.webp?v=20261106-qa2); }
.df-img-ico_speed .df-ico-speed::before { display: none; }
.df-img-ico_sound .df-ico-sound { background-image: url(assets/ico_sound.webp); }
.df-img-ico_sound .df-ico-sound::before { display: none; }
.df-img-ico_lock .df-ico-lock { background-image: url(assets/ico_lock.webp); }
.df-img-ico_lock .df-ico-lock::before, .df-img-ico_lock .df-ico-lock::after { display: none; }
.df-heart {
    display: inline-block; width: 1.3em; height: 1.2em; flex: none; transition: transform .3s, filter .3s;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 20'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FF8A80'/%3E%3Cstop offset='1' stop-color='%23D8322A'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M11 19C4 14 1 10 1 6.5 1 3.4 3.4 1 6.3 1 8.4 1 10 2.2 11 4 12 2.2 13.6 1 15.7 1 18.6 1 21 3.4 21 6.5 21 10 18 14 11 19Z' fill='url(%23g)' stroke='%23F2B633' stroke-width='1.6'/%3E%3Cellipse cx='6.6' cy='5.6' rx='2.2' ry='1.4' fill='%23fff' opacity='.7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.df-heart.off { filter: grayscale(1) opacity(.4); transform: scale(.85); }
.df-img-ico_heart .df-heart { background-image: url(assets/ico_heart.webp); }

/* ───── 共通のボタン・枠 ───── */
.df-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4em;
    min-height: 44px; cursor: pointer; text-decoration: none; position: relative;
    border-radius: 999px; padding: .55em 1.8em .6em;
    font: 900 clamp(14px, 4.4cqw, 22px)/1.2 var(--body); letter-spacing: .06em; word-break: keep-all;
    transition: transform .12s, filter .12s;
}
.df-btn:active { transform: translateY(.12em) scale(.97); }
.df-btn-main {
    color: #fff; border: 3px solid var(--gold-l);
    background: linear-gradient(180deg, #FF7A6E 0%, var(--red) 55%, #C8322A 100%);
    box-shadow: 0 0 0 3px var(--gold-d), 0 .32em 0 3px var(--red-d), 0 .7em 1.4em rgba(226, 69, 60, .35), inset 0 .2em 0 rgba(255, 255, 255, .35);
    text-shadow: 0 .08em 0 var(--red-d), 0 0 .3em rgba(120, 10, 20, .3);
}
.df-btn-main::after { content: ""; position: absolute; left: 12%; right: 12%; top: 10%; height: 30%; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0)); pointer-events: none; }
.df-btn-sub {
    color: var(--blue-d); border: 3px solid var(--gold);
    background: linear-gradient(180deg, #FFFDF4, var(--parch));
    box-shadow: 0 .28em 0 var(--gold-d), 0 .5em 1em rgba(185, 128, 26, .2), inset 0 0 0 2px #fff;
}
.df-btn-blue {
    color: #fff; border: 3px solid var(--gold-l);
    background: linear-gradient(180deg, #5C86F0, var(--blue) 60%, var(--blue-d));
    box-shadow: 0 0 0 3px var(--gold-d), 0 .3em 0 3px #142C70, inset 0 .2em 0 rgba(255, 255, 255, .3);
    text-shadow: 0 .08em 0 #142C70;
}
.df-row { display: flex; gap: 2.6cqw; justify-content: center; flex-wrap: wrap; }
.df-round {
    width: 12.4cqw; height: 12.4cqw; min-width: 44px; min-height: 44px; border-radius: 50%; cursor: pointer;
    display: grid; place-content: center; padding: 0;
    background: radial-gradient(circle at 40% 30%, #FFFFFF, var(--parch) 70%);
    border: 3px solid var(--gold); box-shadow: 0 .2em 0 var(--gold-d), 0 4px 10px rgba(43, 42, 76, .18);
    font: 900 clamp(18px, 6cqw, 30px)/1 var(--en); color: var(--blue-d);
}
.df-round .df-ico { width: 5.6cqw; height: 5.6cqw; min-width: 20px; min-height: 20px; }
.df-x {
    flex: none; width: 11cqw; height: 11cqw; min-width: 44px; min-height: 44px; border-radius: 50%; cursor: pointer;
    border: 3px solid var(--gold); background: #fff; color: var(--blue-d);
    font: 900 clamp(18px, 5.4cqw, 26px)/1 var(--en); display: grid; place-content: center; padding: 0;
}
.df-card {
    background: linear-gradient(180deg, #FFFDF6, var(--cream));
    border: 3px solid var(--gold); border-radius: 20px;
    box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px rgba(242, 182, 51, .35), 0 .3em 0 var(--gold-d), 0 1em 2em rgba(43, 42, 76, .12);
}
.df-star-pill {
    display: inline-flex; align-items: center; gap: .35em; min-height: 36px;
    padding: .3em .9em; border-radius: 999px; background: linear-gradient(180deg, #fff, var(--parch));
    border: 3px solid var(--gold); box-shadow: 0 .18em 0 var(--gold-d);
    font: 900 clamp(13px, 3.8cqw, 19px)/1 var(--en); color: var(--blue-d); white-space: nowrap;
}
.df-star-pill .df-ico { width: 1.25em; height: 1.25em; }

/* ───── HUD ───── */
.df-hud {
    position: absolute; left: 0; right: 0; top: 0;
    display: flex; align-items: center; gap: 1.2cqw;
    padding: calc(1.6cqw + var(--st)) 2cqw 0;
    pointer-events: none; font-size: clamp(11px, 3.4cqw, 18px);
}
.df-pill {
    display: flex; align-items: center; gap: .4em; white-space: nowrap; flex: none; height: 10.4cqw; min-height: 36px;
    padding: 0 .8em; border-radius: 999px;
    background: linear-gradient(180deg, #FFFFFF, var(--parch));
    border: 3px solid var(--gold); box-shadow: 0 .16em 0 var(--gold-d), 0 4px 10px rgba(43, 42, 76, .14);
}
.df-pill small { font: 900 max(12px, .6em)/1 var(--en); letter-spacing: .12em; color: var(--mute); }
.df-pill b { font: 900 1.25em/1 var(--en); color: var(--blue-d); font-variant-numeric: tabular-nums; }
.df-hearts { gap: .12em; padding: 0 .6em; }
.df-coins b { color: #8A5A00; }
.df-coins .df-ico { width: 1.5em; height: 1.5em; }
.df-coins.bump b { animation: dfBump .35s ease; }
@keyframes dfBump { 40% { transform: scale(1.35); } }
.df-grow { flex: 1 1 0; min-width: 0; }
.df-hud .df-round { pointer-events: auto; width: 11.6cqw; height: 11.6cqw; }

/* ───── ドック ───── */
.df-dock {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: calc(38.89cqw + var(--sb));
    padding: 1.6cqw 2cqw calc(1.4cqw + var(--sb));
    display: flex; flex-direction: column; gap: 1.4cqw;
    background: linear-gradient(180deg, #FFFCF2, var(--parch) 70%, var(--parch-d));
    border-top: 4px solid var(--gold);
    box-shadow: 0 -3px 0 #fff, 0 -10px 26px rgba(43, 42, 76, .12);
    border-radius: 24px 24px 0 0;
    font-size: clamp(10px, 3cqw, 16px);
}
.df-dock-top { display: flex; gap: 1.4cqw; height: 12.2cqw; min-height: 44px; flex: none; }
.df-row-next, .df-row-skill { flex: 1; min-width: 0; display: flex; gap: 1.4cqw; }
.df-preview {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: .5em; overflow: hidden;
    padding: 0 .7em; border-radius: 16px; background: rgba(255, 255, 255, .7); border: 2px dashed rgba(185, 128, 26, .55);
}
.df-preview > small { font: 900 max(12px, .8em)/1 var(--en); letter-spacing: .08em; color: var(--blue-d); white-space: nowrap; }
.df-pv { display: flex; align-items: center; gap: .1em; font: 900 max(12px, 1em)/1 var(--en); color: var(--ink); white-space: nowrap; }
.df-pv img { width: 8.4cqw; height: 8.4cqw; display: block; }
.df-pv em { font-style: normal; font-size: max(12px, .72em); font-family: var(--body); color: #fff; background: var(--blue); border-radius: 999px; padding: .2em .45em; margin-left: .1em; }
.df-pv.boss em { background: var(--red); }
.df-next {
    flex: none; min-width: 27cqw; cursor: pointer; border: 3px solid var(--gold-l); border-radius: 999px;
    background: linear-gradient(180deg, #FF7A6E, var(--red) 60%, #C8322A);
    box-shadow: 0 0 0 2px var(--gold-d), 0 .26em 0 2px var(--red-d);
    color: #fff; font: 900 clamp(12px, 3.6cqw, 19px)/1.05 var(--body); letter-spacing: .02em;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1em; white-space: nowrap;
    text-shadow: 0 .08em 0 var(--red-d); padding: 0 .6em;
}
.df-next small { font: 800 max(12px, .7em)/1 var(--body); opacity: .95; }
.df-next:active { transform: translateY(.12em); }
.df-next.pulse { animation: dfPulse 1.2s ease-in-out infinite; }
.df-speed {
    flex: none; width: 15cqw; min-width: 44px; cursor: pointer; border-radius: 16px;
    border: 3px solid var(--gold); background: linear-gradient(180deg, #fff, var(--parch));
    box-shadow: 0 .22em 0 var(--gold-d); color: var(--blue-d);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .05em;
    font: 900 clamp(12px, 2.8cqw, 14px)/1 var(--en);
}
.df-speed .df-ico { width: 6cqw; height: 4.6cqw; min-width: 20px; min-height: 16px; }
.df-speed.on { background: linear-gradient(180deg, #FFE38A, var(--gold)); color: var(--ink); box-shadow: 0 .22em 0 var(--gold-d), 0 0 0 3px rgba(255, 224, 138, .6); }
.df-skill {
    --c: #E63946; --p: 0;
    flex: 1; min-width: 0; position: relative; cursor: pointer; overflow: hidden;
    border-radius: 16px; border: 3px solid rgba(43, 42, 76, .18); background: #F3EEE4;
    display: flex; align-items: center; justify-content: center; gap: .3em; padding: 0 .2em;
    font: 900 clamp(9px, 2.6cqw, 14px)/1.1 var(--body); color: var(--ink);
    box-shadow: 0 .2em 0 rgba(43, 42, 76, .18);
}
.df-skill::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--p) * 100%); background: color-mix(in srgb, var(--c) 35%, #fff); transition: height .2s linear; }
.df-skill > * { position: relative; }
.df-skill img { width: 6.6cqw; height: 6.6cqw; border-radius: 50%; object-fit: cover; border: 2px solid var(--c); background: #fff; flex: none; }
.df-skill span { overflow: hidden; white-space: nowrap; font-size: .86em; line-height: 1.12; text-align: left; letter-spacing: -.03em; }
/* 必殺技名を12px以上で収めるため、ボタン内の顔は出さず職種の色で見分ける */
.df-skill img { display: none; }
.df-skill span { font-size: max(12px, .86em); text-align: center; }
.df-skill.ready { border-color: var(--c); background: #fff; box-shadow: 0 .2em 0 var(--c), 0 0 0 3px color-mix(in srgb, var(--c) 40%, transparent); animation: dfReady 1s ease-in-out infinite; }
.df-skill.ready::before { height: 100%; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 30%, #fff), color-mix(in srgb, var(--c) 55%, #fff)); }
.df-skill.lock { filter: grayscale(1); opacity: .5; }
@keyframes dfReady { 50% { transform: translateY(-.15em); } }
.df-jobs { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4cqw; }
.df-job {
    --c: #E63946;
    position: relative; cursor: pointer; min-width: 0; overflow: visible;
    background: linear-gradient(180deg, #FFFFFF, var(--cream));
    border: 3px solid var(--gold); border-radius: 16px;
    box-shadow: 0 .26em 0 var(--gold-d), inset 0 .5em 0 color-mix(in srgb, var(--c) 70%, #fff);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5cqw;
    padding: 1.4cqw .3cqw .6cqw;
    transition: transform .12s, box-shadow .12s;
}
.df-job .df-face { width: 10.8cqw; height: 10.8cqw; border-radius: 50%; display: block; object-fit: cover; border: 3px solid var(--c); background: color-mix(in srgb, var(--c) 18%, #fff); }
.df-job-line { display: flex; align-items: center; gap: .25em; white-space: nowrap; }
/* 特性の札は12pxでは名前の横に入らないので、顔の下端に重ねて高さを増やさない */
.df-job-facewrap { position: relative; display: block; line-height: 0; margin-bottom: .45em; }
.df-job-facewrap .df-face { width: 9.6cqw; height: 9.6cqw; }
.df-job-facewrap .df-job-tag { position: absolute; left: 50%; bottom: -.55em; transform: translateX(-50%); white-space: nowrap; line-height: 1; padding: .2em .45em; border: 2px solid #fff; }
.df-job-name { font: 900 clamp(12px, 3.1cqw, 17px)/1 var(--body); }
.df-job-tag { font: 900 12px/1 var(--body); color: #fff; background: var(--c); border-radius: 999px; padding: .3em .45em .32em; }
.df-job[data-job="sales"] .df-job-tag { color: var(--ink); }
.df-job-cost { display: flex; align-items: center; gap: .15em; font: 900 clamp(11px, 3.2cqw, 17px)/1 var(--en); color: #8A5A00; }
.df-job-cost .df-ico { width: 1.25em; height: 1.25em; }
.df-job.sel { transform: translateY(-1.4cqw); border-color: var(--c); box-shadow: 0 .26em 0 var(--c), 0 0 0 4px color-mix(in srgb, var(--c) 35%, transparent), inset 0 .5em 0 var(--c); }
.df-job.sel::after {
    content: "えらび中"; position: absolute; top: -1.6cqw; left: 50%; transform: translate(-50%, -50%);
    font: 900 12px/1 var(--body); color: #fff; background: var(--c); padding: .4em .7em; border-radius: 999px; white-space: nowrap; border: 2px solid #fff;
}
.df-job[data-job="sales"].sel::after { color: var(--ink); }
.df-job.poor .df-job-cost { color: var(--red-d); }
.df-job.poor .df-face { filter: grayscale(.7); opacity: .7; }
.df-glow { animation: dfGlow 1s ease-in-out infinite !important; z-index: 2; }
@keyframes dfGlow { 0%, 100% { box-shadow: 0 0 0 3px #fff, 0 0 0 7px var(--gold), 0 0 22px 10px rgba(255, 224, 138, .9); } 50% { box-shadow: 0 0 0 3px #fff, 0 0 0 9px var(--gold-l), 0 0 32px 16px rgba(255, 224, 138, 1); } }
.df-dock.nudge .df-jobs { animation: dfNudge .5s ease; }
@keyframes dfNudge { 25% { transform: translateY(-1.4cqw); } 60% { transform: translateY(.4cqw); } }

/* ───── 吹き出し・トースト ───── */
.df-hint {
    position: absolute; left: 50%; bottom: calc(38.89cqw + var(--sb) + 3cqw); z-index: 4;
    transform: translateX(-50%); width: max-content; max-width: 92cqw;
    background: #fff; border: 3px solid var(--gold); border-radius: 18px;
    box-shadow: 0 .25em 0 var(--gold-d), 0 .6em 1.4em rgba(43, 42, 76, .18);
    padding: .65em 1.1em; text-align: center;
    font: 900 clamp(12px, 3.6cqw, 18px)/1.5 var(--body); word-break: keep-all; overflow-wrap: anywhere;
    pointer-events: none; animation: dfHint 1.8s ease-in-out infinite;
}
.df-hint::after { content: ""; position: absolute; left: var(--ax, 50%); bottom: -12px; width: 18px; height: 18px; background: #fff; border-right: 3px solid var(--gold); border-bottom: 3px solid var(--gold); transform: translateX(-50%) rotate(45deg); }
.df-hint.top { bottom: auto; top: calc(var(--st) + 16cqw); }
.df-hint.top::after { bottom: auto; top: -12px; transform: translateX(-50%) rotate(-135deg); }
.df-hint b { color: var(--red); }
@keyframes dfHint { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1cqw; } }
.df-toast {
    position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 6;
    width: max-content; max-width: 88cqw;
    background: rgba(30, 63, 153, .94); color: #fff; border-radius: 999px; border: 3px solid var(--gold-l);
    padding: .6em 1.2em; text-align: center;
    font: 700 clamp(12px, 3.5cqw, 17px)/1.4 var(--body); word-break: keep-all; overflow-wrap: anywhere;
    pointer-events: none; animation: dfToast 2s ease forwards;
}
@keyframes dfToast { 0% { opacity: 0; transform: translate(-50%, -30%); } 10% { opacity: 1; transform: translate(-50%, -50%); } 82% { opacity: 1; } 100% { opacity: 0; } }

/* ───── 強化パネル ───── */
.df-pop {
    --c: #E63946;
    position: absolute; width: 74cqw; z-index: 5;
    background: linear-gradient(180deg, #FFFDF6, var(--cream));
    border: 3px solid var(--gold); border-radius: 20px;
    box-shadow: inset 0 0 0 3px #fff, 0 .3em 0 var(--gold-d), 0 1em 2em rgba(43, 42, 76, .22);
    padding: 2.2cqw 2.6cqw 2.4cqw; font-size: clamp(11px, 3.2cqw, 17px);
    animation: dfPopIn .28s cubic-bezier(.34, 1.56, .64, 1);
}
.df-pop.up { translate: 0 -100%; }
@keyframes dfPopIn { from { opacity: 0; scale: .9; } }
.df-pop-head { display: flex; align-items: center; gap: 2cqw; }
.df-pop-head img { width: 12cqw; height: 12cqw; border-radius: 50%; object-fit: cover; border: 3px solid var(--c); flex: none; background: color-mix(in srgb, var(--c) 18%, #fff); }
.df-pop-head div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3em; }
.df-pop-head b { font: 900 1.1em/1.2 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.df-pop-head small { font: 700 max(12px, .85em)/1.2 var(--body); color: var(--mute); }
.df-pop-eff { margin: 1.4cqw 0; font: 700 max(12px, .9em)/1.55 var(--body); background: rgba(255, 255, 255, .8); border: 2px dashed rgba(185, 128, 26, .4); border-radius: 12px; padding: .45em .8em; }
.df-pop-eff em { font-style: normal; color: var(--red); font-weight: 900; }
.df-pop-acts { display: flex; gap: 1.6cqw; }
.df-act {
    flex: 1; min-height: 48px; cursor: pointer; border-radius: 16px; padding: .5em .4em;
    border: 3px solid var(--gold-l); background: linear-gradient(180deg, #FF7A6E, var(--red) 60%, #C8322A); color: #fff;
    box-shadow: 0 0 0 2px var(--gold-d), 0 .24em 0 2px var(--red-d);
    display: flex; flex-direction: column; align-items: center; gap: .25em; text-shadow: 0 .07em 0 var(--red-d);
    font: 900 1em/1.2 var(--body);
}
.df-act small { font: 700 max(12px, .74em)/1.35 var(--body); opacity: .96; }
.df-act .df-cost { display: inline-flex; align-items: center; gap: .15em; font: 900 max(12px, .95em)/1 var(--en); background: rgba(255, 255, 255, .22); border-radius: 999px; padding: .2em .55em; }
.df-act.evo { background: linear-gradient(180deg, #5C86F0, var(--blue) 60%, var(--blue-d)); box-shadow: 0 0 0 2px var(--gold-d), 0 .24em 0 2px #142C70; text-shadow: 0 .07em 0 #142C70; }
.df-act:disabled { cursor: default; filter: grayscale(.85); opacity: .65; }
.df-act.max { background: linear-gradient(180deg, #FFE38A, var(--gold)); color: var(--ink); text-shadow: none; box-shadow: 0 .24em 0 var(--gold-d); }
.df-pop-sell { margin-top: 1.6cqw; width: 100%; min-height: 44px; cursor: pointer; border-radius: 999px; border: 2px solid rgba(43, 42, 76, .2); background: #fff; color: var(--mute); font: 700 max(12px, .85em)/1 var(--body); }

/* ───── 告知・カットイン ───── */
.df-banner {
    position: absolute; left: 0; right: 0; top: 34%; z-index: 3;
    display: flex; flex-direction: column; align-items: center; gap: .35em;
    pointer-events: none; animation: dfBanner 2.1s ease forwards;
}
.df-banner small { font: 900 clamp(12px, 3.6cqw, 18px)/1.2 var(--body); letter-spacing: .1em; color: #fff; background: var(--blue); padding: .5em 1.2em; border-radius: 999px; border: 3px solid var(--gold-l); box-shadow: 0 .15em 0 var(--blue-d); }
.df-banner b {
    font: 900 clamp(36px, 13cqw, 70px)/1 var(--disp); letter-spacing: .02em;
    background: linear-gradient(180deg, #FFF3B8, #FFD24A 45%, #E99A12); -webkit-background-clip: text; background-clip: text; color: transparent;
    -webkit-text-stroke: .045em var(--blue-d);
    filter: drop-shadow(0 .05em 0 #fff) drop-shadow(0 .08em 0 var(--blue-d)) drop-shadow(0 .2em .2em rgba(43, 42, 76, .25));
}
.df-banner span { font: 700 clamp(12px, 3.4cqw, 17px)/1.4 var(--body); color: var(--ink); background: rgba(255, 255, 255, .92); padding: .4em 1em; border-radius: 12px; max-width: 88cqw; text-align: center; }
.df-banner span:empty { display: none; }
.df-banner.red b { background-image: linear-gradient(180deg, #FFD1C8, #FF6B5E 45%, #C8322A); -webkit-text-stroke-color: #5B1010; }
@keyframes dfBanner { 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); } }
.df-cutin { position: absolute; inset: 0; z-index: 7; pointer-events: none; display: grid; align-content: center; }
.df-cutin-band {
    --c: #E63946;
    height: 30cqw; display: flex; align-items: center; gap: 3cqw; padding: 0 6cqw;
    background: linear-gradient(100deg, transparent 0 4%, var(--c) 4% 70%, color-mix(in srgb, var(--c) 60%, #fff) 70% 96%, transparent 96%);
    border-top: 4px solid var(--gold-l); border-bottom: 4px solid var(--gold-l);
    transform: skewY(-6deg); animation: dfCut 1.1s cubic-bezier(.2, .9, .2, 1) forwards;
}
.df-cutin-band img { width: 26cqw; height: 26cqw; border-radius: 50%; object-fit: cover; border: 4px solid #fff; background: #fff; transform: skewY(6deg); flex: none; animation: dfCutFace 1.1s ease forwards; }
.df-cutin-band div { transform: skewY(6deg); color: #fff; display: flex; flex-direction: column; gap: .2em; }
.df-cutin-band small { font: 900 clamp(12px, 3.6cqw, 18px)/1 var(--body); letter-spacing: .08em; text-shadow: 0 2px 0 rgba(43, 42, 76, .35); }
.df-cutin-band b { font: 900 clamp(24px, 8.4cqw, 44px)/1.1 var(--body); -webkit-text-stroke: .05em var(--ink); paint-order: stroke fill; text-shadow: 0 .08em 0 var(--ink); white-space: nowrap; }
@keyframes dfCut { 0% { transform: skewY(-6deg) translateX(110%); } 22% { transform: skewY(-6deg) translateX(0); } 78% { transform: skewY(-6deg) translateX(-3%); opacity: 1; } 100% { transform: skewY(-6deg) translateX(-110%); opacity: 0; } }
@keyframes dfCutFace { 0% { scale: .6; } 30% { scale: 1.08; } 45% { scale: 1; } }

/* ───── 画面（共通） ───── */
.df-screen {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqw;
    padding: calc(4cqw + var(--st)) 5.5cqw calc(4cqw + var(--sb));
    text-align: center;
}
.df-screen.df-in { animation: dfPage .42s cubic-bezier(.2, .9, .3, 1); }
@keyframes dfPage { from { opacity: 0; transform: translateY(3cqw) scale(.98); } }
.df-topbar { width: 100%; display: flex; align-items: center; gap: 2cqw; flex: none; }
.df-screen-title {
    flex: 1; margin: 0; text-align: left; white-space: nowrap;
    font: 900 clamp(18px, 6cqw, 30px)/1 var(--body); color: var(--blue-d);
    text-shadow: 0 2px 0 #fff, 0 0 .4em rgba(255, 255, 255, .9);
}
.df-h2 {
    margin: 0; font: 900 clamp(22px, 7.4cqw, 40px)/1.15 var(--body); letter-spacing: .08em; color: #fff;
    background: linear-gradient(180deg, #5C86F0, var(--blue)); padding: .25em 1.6em .3em;
    clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%);
    text-shadow: 0 .08em 0 var(--blue-d); box-shadow: inset 0 -.15em 0 var(--blue-d);
}
@keyframes dfPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes dfIn { from { opacity: 0; transform: translateY(-2cqw) scale(.96); } }
@keyframes dfFloat { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-1.6cqw) rotate(1deg); } }

/* ───── タイトル ───── */
.df-title {
    justify-content: flex-end; gap: 2.6cqw; padding-bottom: calc(5cqw + var(--sb));
    background: linear-gradient(180deg, rgba(255, 246, 226, .5), rgba(255, 246, 226, 0) 28%, rgba(255, 246, 226, 0) 50%, rgba(255, 246, 226, .9) 66%, rgba(255, 246, 226, .97));
}
.df-logo-wrap { margin: 7cqw 0 auto; display: flex; justify-content: center; width: 100%; font-size: 1rem; }
.df-logo { width: 90cqw; max-width: 90cqw; height: auto; display: block; filter: drop-shadow(0 1.4cqw 2cqw rgba(43, 42, 76, .25)); animation: dfFloat 3.4s ease-in-out infinite; }
/* 題字の画像が無いときの代わり（盾の紋章と金文字） */
.df-logo-text { position: relative; display: flex; flex-direction: column; align-items: center; padding: 6cqw 8cqw 4cqw; animation: dfFloat 3.4s ease-in-out infinite; }
.df-logo-text::before {
    content: ""; position: absolute; left: 50%; top: 0; width: 56cqw; height: 50cqw; translate: -50% 0; z-index: -1;
    background: linear-gradient(180deg, #5C86F0, var(--blue) 55%, var(--blue-d));
    clip-path: path("M0 0 H100 V60 C100 85 70 98 50 100 C30 98 0 85 0 60 Z"); transform-origin: 0 0;
    border-radius: 0; box-shadow: none; opacity: .95;
}
.df-logo-text::before { clip-path: polygon(0 0, 100% 0, 100% 58%, 92% 78%, 74% 92%, 50% 100%, 26% 92%, 8% 78%, 0 58%); outline: 0; }
.df-logo-text::after { content: ""; position: absolute; left: 50%; top: -1cqw; width: 60cqw; height: 54cqw; translate: -50% 0; z-index: -2; background: linear-gradient(180deg, var(--gold-l), var(--gold-d)); clip-path: polygon(0 0, 100% 0, 100% 58%, 92% 78%, 74% 92%, 50% 100%, 26% 92%, 8% 78%, 0 58%); }
.df-lt-team, .df-lt-main {
    display: block; font-family: var(--disp); font-weight: 900; line-height: .95;
    background: linear-gradient(180deg, #FFF6C8, #FFD24A 45%, #E99A12 80%, #C9780A); -webkit-background-clip: text; background-clip: text; color: transparent;
    -webkit-text-stroke: .035em #fff;
    filter: drop-shadow(0 .05em 0 var(--blue-d)) drop-shadow(0 .1em 0 #142C70) drop-shadow(0 .18em .16em rgba(43, 42, 76, .3));
}
.df-lt-team { font-size: 9cqw; letter-spacing: .2em; margin-left: .2em; }
.df-lt-main { font-size: 16cqw; letter-spacing: .01em; }
.df-lt-ja {
    margin-top: 2.6cqw; font: 900 clamp(12px, 3.8cqw, 20px)/1 var(--body); letter-spacing: .2em;
    color: #fff; background: var(--red); padding: .5em 1.2em .55em 1.4em;
    clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%);
}
.df-catch { margin: 0; font: 900 clamp(15px, 4.7cqw, 25px)/1.55 var(--body); letter-spacing: .04em; word-break: keep-all; color: var(--blue-d); text-shadow: 0 0 .3em #fff, 0 0 .6em #fff, 0 2px 0 #fff; }
.df-title-btns { display: flex; flex-direction: column; gap: 3cqw; align-items: center; }
.df-title-btns .df-btn-main { font-size: clamp(18px, 6.6cqw, 32px); padding: .45em 2.8em .5em; animation: dfPulse 1.6s ease-in-out infinite; }
.df-title-btns .df-btn-sub { font-size: clamp(13px, 3.9cqw, 19px); padding: .45em 1.4em .5em; }
.df-note { margin: 0; font: 700 clamp(12px, 3cqw, 14px)/1.6 var(--body); color: var(--mute); word-break: keep-all; }
.df-demo-tag {
    position: absolute; top: calc(3cqw + var(--st)); left: 3cqw;
    font: 900 clamp(12px, 2.8cqw, 14px)/1 var(--en); letter-spacing: .2em;
    background: var(--blue); color: #fff; padding: .6em 1em; border-radius: 999px; border: 2px solid var(--gold-l);
}
.df-demo-tag::before { content: ""; display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: #FF8A80; margin-right: .6em; animation: dfBlink 1s steps(2) infinite; }
@keyframes dfBlink { 50% { opacity: 0; } }
.df-sound { position: absolute; top: calc(2.4cqw + var(--st)); right: 3cqw; }
.df-sound.off { filter: grayscale(1); opacity: .65; }
.df-sound span { position: absolute; inset: 0; }
.df-sound.off span::after { content: ""; position: absolute; left: 20%; right: 20%; top: 50%; height: 3px; background: var(--red); rotate: -40deg; border-radius: 2px; }

/* ───── マップ選択 ───── */
.df-maps { justify-content: flex-start; gap: 2cqw; padding-top: calc(3cqw + var(--st)); background: linear-gradient(180deg, #CDEBFF, #FFF6E2 40%); }
.df-world {
    position: relative; width: 100%; flex: 1; min-height: 0; border-radius: 22px; overflow: hidden;
    border: 4px solid var(--gold); box-shadow: inset 0 0 0 3px #fff, 0 .3em 0 var(--gold-d);
    background:
        radial-gradient(ellipse 60% 18% at 50% 104%, #7FCBF2 0 98%, transparent 100%),
        radial-gradient(ellipse 80% 22% at 50% 100%, #A6DCF7 0 98%, transparent 100%),
        radial-gradient(ellipse 30% 14% at 18% 0%, #8FCB78 0 98%, transparent 100%),
        radial-gradient(ellipse 34% 16% at 52% -2%, #7BBE66 0 98%, transparent 100%),
        radial-gradient(ellipse 30% 14% at 86% 0%, #8FCB78 0 98%, transparent 100%),
        radial-gradient(circle at 30% 40%, rgba(255, 255, 255, .6), transparent 40%),
        linear-gradient(180deg, #F7E8C2, #F3DEB0 60%, #EFD7A2);
}
.df-img-worldmap .df-world { background: url(assets/worldmap.webp) center / 100% 100%; }
.df-world-road { position: absolute; inset: 0; width: 100%; height: 100%; }
.df-world-road path { fill: none; stroke: #B9801A; stroke-width: .7; stroke-dasharray: 1.6 1.4; stroke-linecap: round; vector-effect: none; opacity: .75; }
.df-node {
    position: absolute; translate: -50% -50%; cursor: pointer; background: none; border: 0; padding: 0;
    display: flex; flex-direction: column; align-items: center; gap: .3em; min-width: 44px; min-height: 44px;
    font-size: clamp(11px, 3.2cqw, 16px);
}
.df-node-medal {
    width: 15cqw; height: 15cqw; min-width: 48px; min-height: 48px; border-radius: 50%; display: grid; place-content: center;
    background: radial-gradient(circle at 40% 30%, #6E93F3, var(--blue) 60%, var(--blue-d));
    border: 4px solid var(--gold); box-shadow: 0 0 0 3px #fff, 0 .3em 0 3px var(--gold-d), 0 .6em 1em rgba(43, 42, 76, .25);
    font: 900 clamp(18px, 6.4cqw, 32px)/1 var(--en); color: #fff; text-shadow: 0 .08em 0 var(--blue-d);
}
.df-node.cur .df-node-medal { animation: dfNode 1.2s ease-in-out infinite; }
@keyframes dfNode { 50% { transform: translateY(-1.2cqw) scale(1.06); } }
.df-node.locked .df-node-medal { background: radial-gradient(circle at 40% 30%, #E7E3EF, #B9B4C8); box-shadow: 0 0 0 3px #fff, 0 .3em 0 3px #8D88A0; }
.df-node.locked .df-node-medal .df-ico { width: 6.4cqw; height: 6.4cqw; }
.df-node.endless .df-node-medal { background: radial-gradient(circle at 40% 30%, #FFB27A, var(--red) 60%, var(--red-d)); font-size: clamp(20px, 7cqw, 34px); }
.df-node-name { font: 900 1em/1.15 var(--body); color: var(--ink); background: rgba(255, 253, 244, .94); border: 2px solid var(--gold); border-radius: 999px; padding: .3em .8em; white-space: nowrap; }
.df-node-stars { display: flex; gap: .1em; }
.df-node-stars i { width: 1.15em; height: 1.15em; }
.df-node-stars i.off { filter: grayscale(1) opacity(.35); }
.df-sheet {
    position: absolute; left: 3cqw; right: 3cqw; bottom: calc(3cqw + var(--sb)); z-index: 3;
    padding: 4cqw 4.4cqw 4.4cqw; text-align: left;
    background: linear-gradient(180deg, #FFFDF6, var(--cream)); border: 3px solid var(--gold); border-radius: 22px;
    box-shadow: inset 0 0 0 3px #fff, 0 .3em 0 var(--gold-d), 0 -1em 3em rgba(43, 42, 76, .18);
    animation: dfSheet .35s cubic-bezier(.2, .9, .3, 1); max-height: 80%; overflow-y: auto; touch-action: pan-y;
    display: flex; flex-direction: column; gap: 1.8cqw;
}
@keyframes dfSheet { from { transform: translateY(40%); opacity: 0; } }
.df-sheet-x { position: absolute; right: 3cqw; top: 3cqw; }
.df-sheet-en { margin: 0; font: 900 clamp(12px, 3cqw, 15px)/1 var(--en); letter-spacing: .2em; color: var(--gold-d); }
.df-sheet-name { margin: 0; font: 900 clamp(20px, 6.6cqw, 34px)/1.2 var(--body); color: var(--blue-d); }
.df-sheet-desc { margin: 0; font: 700 clamp(12px, 3.6cqw, 17px)/1.6 var(--body); color: var(--ink); }
.df-sheet-info { display: flex; gap: 2cqw; }
.df-sheet-info span { font: 900 clamp(12px, 3.1cqw, 15px)/1 var(--en); letter-spacing: .1em; color: var(--mute); background: #fff; border: 2px solid var(--parch-d); border-radius: 999px; padding: .5em 1em; }
.df-sheet-info b { color: var(--blue-d); margin-left: .3em; font-size: 1.15em; }
.df-sheet-foes { display: flex; flex-wrap: wrap; gap: 1.4cqw; }
.df-sheet-foes span { display: flex; flex-direction: column; align-items: center; font: 900 12px/1.2 var(--body); width: 14cqw; text-align: center; }
.df-sheet-foes img { width: 11cqw; height: 11cqw; }
.df-sheet-foes em { font-style: normal; color: #fff; background: var(--red); border-radius: 999px; padding: .15em .5em; margin-top: .2em; font-size: 12px; }
.df-missions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.2cqw; width: 100%; }
.df-missions li { display: flex; align-items: center; gap: 2cqw; background: #fff; border: 2px solid var(--parch-d); border-radius: 999px; padding: .45em 1em .45em .6em; font: 700 clamp(12px, 3.5cqw, 16px)/1.3 var(--body); text-align: left; }
.df-missions li .df-ico { width: 6.4cqw; height: 6.4cqw; min-width: 22px; min-height: 22px; filter: grayscale(1) opacity(.35); }
.df-missions li.done .df-ico { filter: none; }
.df-missions li span { flex: 1; }
.df-missions li b { font: 900 max(12px, .78em)/1 var(--en); color: #fff; background: var(--red); border-radius: 999px; padding: .35em .6em; }
.df-sheet .df-btn-main { align-self: center; margin-top: 1cqw; min-width: 64cqw; }

/* ───── あそびかた ───── */
.df-howto { background: linear-gradient(180deg, #DDF0FF, var(--cream) 42%); justify-content: safe center; overflow-y: auto; touch-action: pan-y; gap: 1.8cqw; padding-top: calc(4cqw + var(--st)); }
.df-howto > * { flex: none; }
.df-steps { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 1.4cqw; }
.df-steps li { display: flex; gap: 2.4cqw; align-items: flex-start; text-align: left; background: #fff; border: 3px solid var(--gold); border-radius: 18px; box-shadow: 0 .22em 0 var(--gold-d); padding: 1.6cqw 2.8cqw; }
.df-num { flex: none; width: 7.6cqw; height: 7.6cqw; border-radius: 50%; display: grid; place-content: center; background: var(--blue); color: #fff; border: 2px solid var(--gold-l); font: 900 clamp(13px, 4cqw, 21px)/1 var(--en); }
.df-steps b { display: block; font: 900 clamp(13px, 3.9cqw, 20px)/1.35 var(--body); margin-bottom: .2em; color: var(--blue-d); }
.df-steps p { margin: 0; font: 500 clamp(12px, 3.2cqw, 16px)/1.55 var(--body); color: #3B3A55; }
.df-traits { width: 100%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2cqw; }
.df-trait { display: flex; flex-direction: column; align-items: center; gap: .2em; background: #fff; border: 2px solid var(--parch-d); border-radius: 14px; padding: 1cqw .4cqw; font: 900 clamp(12px, 2.8cqw, 14px)/1.25 var(--body); }
.df-trait img { width: 11cqw; height: 11cqw; display: block; }
.df-trait em { font-style: normal; font-size: 12px; color: #fff; background: var(--red); border-radius: 999px; padding: .2em .55em; }
.df-trait small { font: 700 12px/1.3 var(--body); color: var(--mute); }
.df-howjobs { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 1.4cqw; }
.df-hj { --c: #E63946; display: flex; align-items: center; gap: 1.6cqw; text-align: left; background: #fff; border: 3px solid var(--c); border-radius: 16px; padding: 1.4cqw 1.8cqw; box-shadow: 0 .2em 0 var(--c); }
.df-hj img { width: 9.6cqw; height: 9.6cqw; border-radius: 50%; object-fit: cover; flex: none; background: color-mix(in srgb, var(--c) 18%, #fff); }
.df-hj > div { min-width: 0; }
.df-hj b { display: block; font: 900 clamp(12px, 2.85cqw, 15px)/1.3 var(--body); white-space: nowrap; letter-spacing: -.01em; }
.df-hj small { display: block; font: 700 clamp(12px, 2.65cqw, 14px)/1.4 var(--body); color: var(--mute); }
.df-howto .df-btn-main { margin-top: .6cqw; min-width: 56cqw; }

/* ───── 図鑑 ───── */
.df-dex { justify-content: flex-start; gap: 2.4cqw; padding-top: calc(3cqw + var(--st)); background: linear-gradient(180deg, #E8E0FF, var(--cream) 40%); }
.df-tabs { display: flex; gap: 2cqw; width: 100%; flex: none; }
.df-tab { flex: 1; min-height: 46px; cursor: pointer; border-radius: 999px; border: 3px solid var(--gold); background: #fff; color: var(--blue-d); font: 900 clamp(13px, 4cqw, 20px)/1 var(--body); box-shadow: 0 .2em 0 var(--gold-d); }
.df-tab.on { background: linear-gradient(180deg, #5C86F0, var(--blue)); color: #fff; border-color: var(--gold-l); }
.df-dex-list { width: 100%; flex: 1; min-height: 0; overflow-y: auto; touch-action: pan-y; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; align-content: start; padding: 1cqw .4cqw 3cqw; }
.df-dex-item { cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .4em; padding: 2cqw 1cqw; min-height: 44px; border-radius: 18px; background: #fff; border: 3px solid var(--gold); box-shadow: 0 .22em 0 var(--gold-d); font: 900 clamp(12px, 2.9cqw, 14px)/1.25 var(--body); }
.df-dex-item img { width: 18cqw; height: 18cqw; object-fit: contain; display: block; }
.df-dex-item.face img { border-radius: 50%; object-fit: cover; background: var(--cream); }
.df-dex-item.off { background: #F1EEF6; border-color: #C9C4D8; box-shadow: 0 .22em 0 #A8A2BC; color: var(--mute); }
.df-dex-item.off img { filter: brightness(0) opacity(.18); }
.df-dex-item.new::after { content: "NEW"; font: 900 12px/1 var(--en); color: #fff; background: var(--red); padding: .25em .5em; border-radius: 999px; }
.df-dex-detail {
    position: absolute; inset: calc(3cqw + var(--st)) 3cqw calc(3cqw + var(--sb)); z-index: 3; overflow-y: auto; touch-action: pan-y;
    padding: 5cqw 5cqw 6cqw; text-align: left;
    background: linear-gradient(180deg, #FFFDF6, var(--cream)); border: 3px solid var(--gold); border-radius: 22px;
    box-shadow: inset 0 0 0 3px #fff, 0 .3em 0 var(--gold-d), 0 1em 3em rgba(43, 42, 76, .2);
    animation: dfPage .35s cubic-bezier(.2, .9, .3, 1);
}
.df-dex-detail .df-x { position: sticky; top: 0; float: right; margin: -2cqw -2cqw 0 0; }
.df-dd-head { display: flex; align-items: center; gap: 3cqw; margin-bottom: 3cqw; }
.df-dd-head img { width: 26cqw; height: 26cqw; object-fit: contain; flex: none; }
.df-dd-head img.face { border-radius: 50%; object-fit: cover; border: 4px solid var(--c, var(--gold)); background: #fff; }
.df-dd-type { margin: 0 0 .3em; font: 900 clamp(11px, 3cqw, 14px)/1.2 var(--body); color: var(--red); letter-spacing: .06em; }
.df-dd-name { margin: 0; font: 900 clamp(17px, 5.2cqw, 28px)/1.25 var(--body); color: var(--blue-d); word-break: keep-all; }
.df-dd-head > div { min-width: 0; flex: 1; padding-right: 10cqw; }
.df-dd-h { margin: 3cqw 0 1.2cqw; font: 900 clamp(13px, 3.8cqw, 18px)/1.3 var(--body); color: #fff; background: var(--blue); display: inline-block; padding: .3em 1em; border-radius: 999px; }
.df-dd-p { margin: 0; font: 500 clamp(13px, 3.7cqw, 17px)/1.75 var(--body); }
.df-dd-flow { list-style: none; counter-reset: f; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.2cqw; }
.df-dd-flow li { counter-increment: f; display: flex; align-items: center; gap: 2cqw; font: 700 clamp(12px, 3.5cqw, 16px)/1.4 var(--body); background: #fff; border: 2px solid var(--parch-d); border-radius: 14px; padding: .5em .8em; }
.df-dd-flow li::before { content: counter(f); flex: none; width: 1.8em; height: 1.8em; border-radius: 50%; display: grid; place-content: center; background: var(--gold); color: #fff; font: 900 .9em/1 var(--en); }
.df-dd-evo { display: flex; gap: 2.4cqw; align-items: flex-start; background: #fff; border: 2px solid var(--parch-d); border-radius: 16px; padding: 2cqw; margin-top: 1.4cqw; }
.df-dd-evo img { width: 16cqw; height: 16cqw; object-fit: contain; flex: none; }
.df-dd-evo b { display: block; font: 900 clamp(13px, 3.8cqw, 18px)/1.3 var(--body); color: var(--blue-d); }
.df-dd-evo p { margin: .3em 0 0; font: 500 clamp(12px, 3.4cqw, 16px)/1.6 var(--body); }
.df-dd-evo.off { opacity: .55; }
.df-dd-evo.off img { filter: brightness(0) opacity(.18); }

/* ───── 一時停止 ───── */
.df-pause { background: rgba(255, 246, 226, .95); gap: 4cqw; }
.df-pause .df-btn { min-width: 62cqw; }

/* ───── リザルト ───── */
.df-result {
    background: rgba(255, 246, 226, .96); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    justify-content: flex-start; overflow-y: auto; gap: 2.4cqw; touch-action: pan-y; padding-top: calc(6cqw + var(--st));
}
.df-result > * { flex: none; }
.df-res-head { width: 100%; display: flex; justify-content: center; }
.df-res-head img { width: 84cqw; height: auto; display: block; animation: dfIn .6s cubic-bezier(.34, 1.56, .64, 1); }
.df-res-word {
    font: 900 clamp(34px, 12cqw, 64px)/1 var(--disp);
    background: linear-gradient(180deg, #FFF3B8, #FFD24A 45%, #E99A12); -webkit-background-clip: text; background-clip: text; color: transparent;
    -webkit-text-stroke: .04em var(--blue-d);
    filter: drop-shadow(0 .05em 0 #fff) drop-shadow(0 .08em 0 var(--blue-d)) drop-shadow(0 .2em .2em rgba(43, 42, 76, .25));
    animation: dfIn .6s cubic-bezier(.34, 1.56, .64, 1);
}
.df-res-word.lose { background-image: linear-gradient(180deg, #D8E4FF, #7C9BF5 50%, #3A5FD8); }
.df-res-map { margin: -1cqw 0 0; font: 900 clamp(12px, 3.8cqw, 18px)/1.45 var(--body); color: var(--blue-d); word-break: keep-all; }
.df-res-map em { font-style: normal; color: var(--red); }
.df-res-stars { display: flex; gap: 3cqw; align-items: flex-end; }
.df-res-stars i { width: 15cqw; height: 15cqw; filter: grayscale(1) opacity(.25); transform: scale(.85); transition: filter .2s, transform .3s; }
.df-res-stars i:nth-child(2) { width: 19cqw; height: 19cqw; }
.df-res-stars i.on { filter: none; transform: scale(1); animation: dfStar .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes dfStar { 0% { transform: scale(0) rotate(-90deg); } 70% { transform: scale(1.25) rotate(10deg); } }
.df-res-missions li b { animation: dfIn .4s ease backwards; }
.df-res-score { display: flex; align-items: baseline; gap: .6em; }
.df-res-score small { font: 900 clamp(12px, 3cqw, 15px)/1 var(--en); letter-spacing: .2em; color: var(--mute); }
.df-res-score b { font: 900 clamp(28px, 9.4cqw, 50px)/1 var(--en); color: var(--blue-d); font-variant-numeric: tabular-nums; }
.df-res-break { margin: -1.6cqw 0 0; font: 700 clamp(12px, 3cqw, 14px)/1.5 var(--body); color: var(--mute); }
.df-res-record { margin: 0; font: 900 clamp(18px, 6cqw, 30px)/1 var(--disp); color: var(--red); animation: dfStar .6s cubic-bezier(.34, 1.56, .64, 1); text-shadow: 0 2px 0 #fff; }
.df-res-record img { width: 62cqw; height: auto; display: block; }
.df-res-team, .df-res-match { width: 100%; padding: 3.4cqw 4cqw; text-align: left; }
.df-res-lead { margin: 0 0 1.6cqw; font: 900 clamp(12px, 3.6cqw, 17px)/1.4 var(--body); color: var(--gold-d); }
.df-team-bar { display: flex; height: 3.4cqw; min-height: 12px; border-radius: 999px; overflow: hidden; background: rgba(43, 42, 76, .08); margin-bottom: 2cqw; border: 2px solid #fff; box-shadow: 0 0 0 2px var(--parch-d); }
.df-team-bar i { display: block; height: 100%; }
.df-team-list { display: flex; flex-direction: column; gap: 1.4cqw; }
.df-team-row { --c: #E63946; display: flex; align-items: center; gap: 2.4cqw; padding: 1cqw 2cqw 1cqw 1cqw; border-radius: 999px; background: color-mix(in srgb, var(--c) 10%, #fff); }
.df-team-row img { width: 10.4cqw; height: 10.4cqw; border-radius: 50%; object-fit: cover; border: 3px solid var(--c); background: #fff; flex: none; }
.df-team-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25em; }
.df-team-txt b { font: 900 clamp(12px, 3.6cqw, 18px)/1.2 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.df-team-txt small { font: 700 clamp(12px, 2.9cqw, 14px)/1.25 var(--body); color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.df-team-num { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: .15em; }
.df-team-num small { font: 700 12px/1 var(--body); color: var(--mute); }
.df-team-num b { font: 900 clamp(16px, 5cqw, 26px)/1 var(--en); font-variant-numeric: tabular-nums; }
.df-team-row.off { background: #F4F2F7; }
.df-team-row.off img { filter: grayscale(1); opacity: .5; border-color: #C9C4D8; }
.df-team-row.off b, .df-team-row.off .df-team-num b { color: #9A96AA; }
.df-res-total { margin: 2cqw 0 0; font: 700 clamp(12px, 3.1cqw, 15px)/1.5 var(--body); text-align: center; }
.df-res-job { display: flex; align-items: center; gap: 3cqw; }
.df-res-job img { width: 24cqw; height: 24cqw; border-radius: 50%; object-fit: cover; border: 4px solid var(--gold); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--gold-d); background: var(--cream); flex: none; }
.df-res-job > div { min-width: 0; }
.df-res-type { margin: 0 0 .3em; font: 900 clamp(12px, 3cqw, 14px)/1.2 var(--body); letter-spacing: .06em; color: var(--red); }
.df-res-name { margin: 0; font: 900 clamp(18px, 5.4cqw, 28px)/1.25 var(--body); color: var(--blue-d); word-break: keep-all; overflow-wrap: anywhere; }
.df-res-reason { margin: 2.4cqw 0 0; font: 900 clamp(13px, 3.7cqw, 17px)/1.65 var(--body); background: color-mix(in srgb, var(--gold) 16%, #fff); border-radius: 14px; padding: .6em .9em; border: 2px dashed var(--gold); }
.df-res-desc { margin: 2cqw 0; font: 500 clamp(13px, 3.6cqw, 17px)/1.7 var(--body); }
.df-res-bars { display: flex; flex-direction: column; gap: 1.2cqw; }
.df-res-bar { display: grid; grid-template-columns: 9.4em 1fr 3.4em; align-items: center; gap: .8em; font: 700 clamp(12px, 3cqw, 14px)/1 var(--body); }
.df-res-bar i { height: 1.1em; background: rgba(43, 42, 76, .08); border-radius: 999px; overflow: hidden; }
.df-res-bar em { display: block; height: 100%; border-radius: inherit; width: 0; transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.df-res-bar span:last-child { text-align: right; font-family: var(--en); font-weight: 900; }
.df-res-small { margin: 2cqw 0 0; font: 500 clamp(12px, 2.8cqw, 13.6px)/1.6 var(--body); color: var(--mute); }
.df-res-btns { display: flex; flex-direction: column; gap: 3cqw; align-items: center; padding-bottom: 4cqw; }
.df-res-btns .df-btn { min-width: 72cqw; }
.df-res-btns-top { padding-bottom: 0; gap: 3cqw; }
.df-res-btns-top .df-row .df-btn { min-width: 0; }
.df-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--blue-d); font: 900 clamp(12px, 3.5cqw, 16px)/1 var(--body); }
.df-link-btn { background: none; border: 0; padding: .4em 1em; text-decoration: underline; cursor: pointer; }

/* ───── めくりの幕・読み込み ───── */
.df-wipe { position: absolute; inset: 0; z-index: 9; pointer-events: none; display: grid; place-content: center;
    background: repeating-linear-gradient(90deg, rgba(242, 182, 51, .12) 0 2px, transparent 2px 22px), linear-gradient(180deg, #FFF6E2, #F3DEB0);
    border-bottom: 6px solid var(--gold); }
.df-wipe i { width: 26cqw; height: 30cqw; background: linear-gradient(180deg, #5C86F0, var(--blue) 60%, var(--blue-d)); clip-path: polygon(0 0, 100% 0, 100% 58%, 92% 78%, 74% 92%, 50% 100%, 26% 92%, 8% 78%, 0 58%); box-shadow: inset 0 0 0 4px var(--gold); }
.df-wipe.in { animation: dfWipeIn .32s cubic-bezier(.6, 0, .4, 1) forwards; }
.df-wipe.out { animation: dfWipeOut .38s cubic-bezier(.6, 0, .4, 1) forwards; }
@keyframes dfWipeIn { from { transform: translateY(-102%); } to { transform: translateY(0); } }
@keyframes dfWipeOut { from { transform: translateY(0); } to { transform: translateY(102%); } }
.df-loading { position: absolute; inset: 0; display: grid; place-content: center; gap: 2cqw; justify-items: center; background: var(--cream); font: 900 clamp(12px, 3cqw, 15px)/1 var(--en); letter-spacing: .3em; color: var(--blue-d); transition: opacity .4s; z-index: 10; }
.df-loading i { width: 10cqw; height: 10cqw; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #FFE38A, var(--gold) 60%, var(--gold-d)); animation: dfBounce .6s ease-in-out infinite alternate; }
@keyframes dfBounce { to { transform: translateY(-4cqw); } }
.df-loading.off { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    .df-logo, .df-logo-text, .df-title-btns .df-btn-main, .df-hint, .df-next.pulse, .df-skill.ready, .df-node.cur .df-node-medal { animation: none; }
}

/* ───── 生成した枠の画像に切り替え（届いているときだけ） ───── */
.df-img-fr_btn_red .df-btn-main, .df-img-fr_btn_red .df-next {
    background: none; box-shadow: none; border-style: solid; border-color: transparent;
    border-width: 0 1.2em; border-image: url(assets/fr_btn_red.webp) 0 34% fill / 0 1.2em stretch;
    filter: drop-shadow(0 .3em .5em rgba(168, 39, 32, .35));
}
.df-img-fr_btn_red .df-btn-main::after { display: none; }
.df-img-fr_btn_cream .df-btn-sub {
    background: none; box-shadow: none; border-style: solid; border-color: transparent;
    border-width: 0 1.2em; border-image: url(assets/fr_btn_cream.webp) 0 34% fill / 0 1.2em stretch;
    filter: drop-shadow(0 .25em .4em rgba(185, 128, 26, .3));
}
.df-img-fr_pill .df-pill, .df-img-fr_pill .df-star-pill {
    background: none; box-shadow: none; border-style: solid; border-color: transparent;
    border-width: 0 .9em; border-image: url(assets/fr_pill.webp) 0 30% fill / 0 .9em stretch; padding: 0 .1em;
    filter: drop-shadow(0 2px 4px rgba(43, 42, 76, .18));
}
.df-img-fr_ribbon .df-h2 { background: url(assets/fr_ribbon.webp) center / 100% 100% no-repeat; clip-path: none; box-shadow: none; padding: .3em 2.2em .55em; text-shadow: 0 .08em 0 var(--blue-d), 0 0 .2em rgba(20, 44, 112, .6); }
.df-img-fr_parchment .df-sheet, .df-img-fr_parchment .df-dex-detail { background: linear-gradient(rgba(255, 253, 246, .55), rgba(255, 253, 246, .55)), url(assets/fr_parchment.webp) center / 100% 100%, #FFF6E2; }
.df-img-fr_parchment .df-sheet { padding: 7cqw 7.4cqw 7cqw; }
.df-img-fr_parchment .df-sheet-x { right: 5cqw; top: 5cqw; }
.df-img-fr_parchment .df-dex-detail { padding: 10cqw 10cqw 10cqw; }
.df-img-fr_parchment .df-dex-detail .df-x { margin: -4cqw -4cqw 0 0; }