/* DREAM DASH — 採用向けランゲーム（作り込み版）
   美術: 夏のスポーツアニメ。赤・オレンジ・ターコイズの海・白。ボタンは斜めの板。 */
:root {
    --ink: #1D1E24;
    --mute: #5D6170;
    --cream: #FFF4E8;
    --hot: #F2333F;
    --hot-d: #B5121B;
    --orange: #FF8A1F;
    --teal: #12C6C0;
    --teal-d: #0B8F8B;
    --sky: #CDEBFF;
    --gold: #FFC23C;
    --disp: "Kanit", "M PLUS 1p", sans-serif;
    --body: "M PLUS 1p", "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; overscroll-behavior: none; }
button { font: inherit; color: inherit; }
.dd-backdrop { position: fixed; inset: 0; background: linear-gradient(115deg, #DDF3FF 0 40%, #FFF4E8 40% 62%, #FFE1D1 62%); }
.dd-backdrop::before, .dd-backdrop::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 46px, rgba(255, 255, 255, .55) 46px 50px); }
.dd-backdrop::after { background: linear-gradient(115deg, transparent 54%, rgba(18, 198, 192, .18) 54% 57%, transparent 57% 60%, rgba(242, 51, 63, .14) 60% 62%, transparent 62%); }
.dd-stage { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden; background: var(--sky); border-radius: 20px; box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--hot), 0 30px 80px rgba(29, 30, 36, .22); container-type: size; }
.dd-stage.dd-full { border-radius: 0; box-shadow: none; }
.dd-stage [hidden] { display: none !important; }
.dd-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* ───── ボタン（斜めの板。画像の枠が届いたら .ui-img で差し替わる） ───── */
.dd-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; cursor: pointer; text-decoration: none;
    font: 900 clamp(15px, 4.6cqw, 22px)/1.15 var(--body); letter-spacing: .06em; word-break: keep-all;
    transform: skewX(-12deg); transition: transform .12s, filter .12s;
    border: 0; padding: .55em 1.6em .6em; border-radius: 10px;
}
.dd-btn > span { display: block; transform: skewX(12deg); }
.dd-btn:active { transform: skewX(-12deg) scale(.95); }
.dd-btn-main {
    color: #fff; background: linear-gradient(100deg, var(--hot) 0 55%, var(--orange));
    box-shadow: inset 0 0 0 3px #fff, 0 .28em 0 var(--hot-d), .35em .5em 0 rgba(18, 198, 192, .55);
    text-shadow: 0 .08em 0 rgba(120, 10, 20, .45);
}
.dd-btn-main::after { content: ""; position: absolute; left: 8%; right: 30%; top: 14%; height: 22%; border-radius: 99px; background: rgba(255, 255, 255, .35); pointer-events: none; }
.dd-btn-sub { color: var(--ink); background: #fff; box-shadow: inset 0 0 0 3px var(--hot), 0 .24em 0 var(--hot-d); }
.dd-btn-s { font-size: clamp(12px, 3.6cqw, 17px); padding: .5em 1em .55em; min-height: 44px; }
.ui-img .dd-btn-main { background: none; box-shadow: none; border: 18px solid transparent; border-image: url(assets/ui_btn_red.webp) 30% fill / 18px stretch; padding: .1em 1.2em .2em; filter: drop-shadow(.3em .4em 0 rgba(18, 198, 192, .45)); }
.ui-img .dd-btn-main::after { display: none; }
.ui-img .dd-btn-sub { background: none; box-shadow: none; border: 16px solid transparent; border-image: url(assets/ui_btn_white.webp) 30% fill / 16px stretch; padding: .05em .9em .15em; }
.dd-row { display: flex; gap: 2.4cqw; justify-content: center; flex-wrap: wrap; }
.dd-btn-col { display: flex; flex-direction: column; align-items: center; gap: 3cqw; width: 100%; }
.dd-link { color: var(--ink); font: 800 clamp(12px, 3.4cqw, 15px)/1 var(--body); display: inline-flex; align-items: center; min-height: 44px; padding: 0 .6em; }
.dd-link-btn { background: none; border: 0; text-decoration: underline; text-underline-offset: .25em; cursor: pointer; }
.dd-round {
    flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; pointer-events: auto;
    background: #fff; box-shadow: inset 0 0 0 3px var(--hot), 0 3px 0 var(--hot-d);
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
}
.dd-round i { width: 5px; height: 16px; border-radius: 2px; background: var(--ink); }
.ui-img .dd-round { background: url(assets/ui_round.webp) center / 100% 100% no-repeat; box-shadow: none; }

/* 見出し（白い文字に赤の太フチ、ターコイズの影、少し斜め） */
.dd-head { margin: 0; font: 900 clamp(20px, 6.6cqw, 34px)/1.1 var(--body); letter-spacing: .04em; }
.dd-head > span { display: inline-block; transform: skewX(-10deg); color: #fff; background: linear-gradient(100deg, var(--hot) 0 60%, var(--orange)); padding: .14em .6em .2em; border-radius: 6px; box-shadow: .14em .14em 0 var(--teal); text-shadow: 0 .06em 0 rgba(120, 10, 20, .35); }
.dd-head-xl > span { background: none; box-shadow: none; padding: 0; color: #fff; -webkit-text-stroke: .1em var(--hot); paint-order: stroke fill; text-shadow: .08em .1em 0 var(--teal); }
.dd-head-xl { font: italic 900 clamp(36px, 13cqw, 70px)/1 var(--disp); }

/* ───── HUD ───── */
.dd-hud { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 2cqw; padding: max(2.4cqw, env(safe-area-inset-top)) 2.6cqw 0; pointer-events: none; font-size: clamp(12px, 3.2cqw, 17px); }
.dd-plate { display: flex; align-items: center; gap: .3em; background: rgba(255, 255, 255, .94); border-radius: 10px; padding: .3em .7em; transform: skewX(-10deg); box-shadow: inset 0 0 0 2px #fff, 0 3px 0 rgba(29, 30, 36, .15), 0 0 0 2px var(--hot); white-space: nowrap; }
.dd-plate > * { transform: skewX(10deg); }
.ui-img .dd-plate { background: none; box-shadow: none; border: 10px solid transparent; border-image: url(assets/ui_pill.webp) 40% fill / 10px stretch; padding: 0 .3em; }
.dd-hearts { gap: .15em; }
.dd-hearts img { width: 1.55em; height: 1.55em; display: block; transition: transform .3s; }
.dd-hearts img.off { transform: skewX(10deg) scale(.8); opacity: .7; }
.dd-hearts img.pop { animation: ddHeart .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes ddHeart { 0% { transform: skewX(10deg) scale(1.7) rotate(-14deg); } }
.dd-score { flex: 1; min-width: 0; justify-content: flex-end; }
.dd-score small { font: italic 700 max(12px, .62em)/1 var(--disp); letter-spacing: .12em; color: var(--mute); }
.dd-score b { font: italic 800 1.35em/1 var(--disp); font-variant-numeric: tabular-nums; }
.dd-hud2 { position: absolute; left: 2.6cqw; right: 2.6cqw; top: calc(max(2.4cqw, env(safe-area-inset-top)) + 46px + 1.6cqw); display: flex; flex-direction: column; gap: 1.4cqw; pointer-events: none; font-size: clamp(12px, 3cqw, 15px); }
.dd-prog { display: flex; align-items: center; gap: .6em; background: rgba(255, 255, 255, .88); border-radius: 999px; padding: .32em .8em .32em .4em; box-shadow: 0 2px 0 rgba(29, 30, 36, .12); }
.dd-prog-name { flex: none; font: 900 max(12px, .8em)/1 var(--body); color: #fff; background: var(--hot); border-radius: 999px; padding: .4em .7em; transform: skewX(-10deg); }
.dd-prog-bar { position: relative; flex: 1; min-width: 0; height: 1.3em; display: flex; align-items: center; }
.dd-prog-bar i { display: block; width: 100%; height: .5em; background: rgba(29, 30, 36, .1); border-radius: 999px; overflow: hidden; }
.dd-prog-bar em { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--teal), var(--gold), var(--hot)); border-radius: inherit; }
.dd-prog-dot { position: absolute; left: 0; top: 50%; width: 1.1em; height: 1.1em; margin: -.55em 0 0 -.55em; border-radius: 50%; background: var(--teal); border: .18em solid #fff; box-shadow: 0 0 0 .1em var(--teal-d); }
.dd-prog-flag { position: absolute; right: -.3em; top: 50%; transform: translateY(-50%) skewX(-10deg); font: italic 800 max(12px, .62em)/1 var(--disp); color: #fff; background: var(--ink); border-radius: 4px; padding: .3em .45em; }
.dd-prog b { flex: none; font: italic 800 1em/1 var(--disp); font-variant-numeric: tabular-nums; min-width: 4.6em; text-align: right; }
.dd-bossbar { display: flex; align-items: center; gap: .6em; background: rgba(255, 255, 255, .92); border-radius: 999px; padding: .35em .8em .35em .4em; box-shadow: 0 0 0 2px var(--hot); }
.dd-bossbar span { flex: none; font: 900 max(12px, .8em)/1 var(--body); color: #fff; background: var(--hot); border-radius: 999px; padding: .4em .7em; }
.dd-bossbar i { flex: 1; display: flex; gap: .3em; }
.dd-bossbar i em { flex: 1; height: .8em; border-radius: 3px; background: linear-gradient(90deg, var(--hot), var(--orange)); transform: skewX(-20deg); transition: opacity .3s, transform .3s; }
.dd-bossbar i em.off { opacity: .18; transform: skewX(-20deg) scaleY(.6); }
.dd-powers { display: flex; gap: 1.6cqw; }
.dd-power { position: relative; width: 2.8em; height: 2.8em; border-radius: 50%; background: conic-gradient(var(--teal) calc(var(--p, 1) * 360deg), rgba(255, 255, 255, .6) 0); display: grid; place-items: center; box-shadow: 0 2px 0 rgba(29, 30, 36, .15); }
.dd-power img { width: 78%; height: 78%; border-radius: 50%; background: #fff; padding: 8%; }
.dd-combo { position: absolute; right: 3cqw; top: calc(max(2.4cqw, env(safe-area-inset-top)) + 46px + 13cqw); display: flex; flex-direction: column; align-items: flex-end; pointer-events: none; transform: skewX(-10deg); }
.dd-combo b { font: italic 900 clamp(30px, 11cqw, 58px)/.9 var(--disp); color: #fff; -webkit-text-stroke: .1em var(--hot); paint-order: stroke fill; text-shadow: .06em .08em 0 var(--teal); }
.dd-combo span { font: italic 800 clamp(12px, 3cqw, 15px)/1 var(--disp); letter-spacing: .2em; color: var(--hot); background: #fff; padding: .25em .6em; border-radius: 4px; margin-top: .2em; }
.dd-combo em { font: italic 800 clamp(12px, 3.4cqw, 17px)/1 var(--disp); color: var(--teal-d); margin-top: .3em; font-style: italic; }
.dd-combo.bump b { animation: ddBump .25s ease-out; }
@keyframes ddBump { 0% { transform: scale(1.35); } }

.dd-dock { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 1.4cqw 2.4cqw; align-items: end; padding: 0 2.6cqw max(2.6cqw, env(safe-area-inset-bottom)); pointer-events: none; font-size: clamp(10px, 3cqw, 16px); }
.dd-chips { grid-column: 1; grid-row: 2; display: flex; gap: 1.2cqw; }
.dd-chip { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: .2em; background: rgba(255, 255, 255, .94); border-radius: 8px; padding: .2em .4em .2em .2em; transform: skewX(-10deg); box-shadow: 0 2px 0 rgba(29, 30, 36, .15); transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s; }
.dd-chip > * { transform: skewX(10deg); }
.dd-chip img { width: 2.2em; height: 2.2em; display: block; flex: none; }
.dd-chip b { font: italic 800 1.25em/1 var(--disp); font-variant-numeric: tabular-nums; }
.dd-chip.top { transform: skewX(-10deg) translateY(-1.2cqw); box-shadow: 0 0 0 2.5px var(--job), 0 3px 0 rgba(29, 30, 36, .2); }
.dd-chip.top::after { content: "TOP"; position: absolute; top: -1.15em; left: 50%; transform: translateX(-50%) skewX(10deg); font: italic 800 max(12px, .62em)/1 var(--disp); letter-spacing: .1em; color: #fff; background: var(--hot); border-radius: 4px; padding: .3em .5em; }
.dd-chip.bump img { animation: ddBump .3s ease-out; }
.dd-coinpill { grid-column: 1; grid-row: 1; justify-self: start; display: flex; align-items: center; gap: .3em; background: rgba(255, 255, 255, .94); border-radius: 999px; padding: .15em .8em .15em .2em; box-shadow: 0 2px 0 rgba(29, 30, 36, .15); }
.dd-coinpill img { width: 1.9em; height: 1.9em; }
.dd-coinpill b { font: italic 800 1.25em/1 var(--disp); color: #B86E00; font-variant-numeric: tabular-nums; }
.dd-dash { grid-column: 2; grid-row: 1 / 3; position: relative; pointer-events: auto; cursor: pointer; width: clamp(64px, 21cqw, 104px); height: clamp(64px, 21cqw, 104px); border-radius: 50%; border: 0; padding: 0; background: none; }
.dd-dash-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--orange) 0, var(--hot) calc(var(--g, 0) * 3.6deg), rgba(255, 255, 255, .7) 0); box-shadow: 0 4px 0 rgba(29, 30, 36, .18); }
.dd-dash-face { position: absolute; inset: 9%; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; filter: grayscale(.7); opacity: .85; transition: filter .2s, opacity .2s; }
.dd-dash-face img { width: 52%; height: 52%; }
.dd-dash-face b { font: italic 900 clamp(12px, 3.8cqw, 19px)/1 var(--disp); color: var(--hot); letter-spacing: .04em; }
.dd-dash.ready .dd-dash-face { filter: none; opacity: 1; background: linear-gradient(160deg, #fff 30%, #FFE7D1); }
.dd-dash.ready { animation: ddReady .8s ease-in-out infinite; }
.dd-dash.ready .dd-dash-ring { background: conic-gradient(var(--orange), var(--hot), var(--gold), var(--orange)); box-shadow: 0 0 0 4px rgba(255, 138, 31, .35), 0 4px 0 rgba(29, 30, 36, .18); }
.dd-dash.on .dd-dash-ring { background: var(--teal); }
@keyframes ddReady { 50% { transform: scale(1.08) rotate(-4deg); } }

.dd-tut { position: absolute; left: 6cqw; right: 6cqw; top: 34%; display: flex; align-items: center; gap: 3cqw; background: rgba(255, 255, 255, .96); border-radius: 16px; padding: 3cqw 4cqw; box-shadow: 0 0 0 3px var(--hot), .5em .6em 0 rgba(18, 198, 192, .45); pointer-events: none; animation: ddPop .35s cubic-bezier(.34, 1.56, .64, 1); }
.dd-tut p { margin: 0; font: 900 clamp(14px, 4.4cqw, 22px)/1.5 var(--body); word-break: keep-all; overflow-wrap: anywhere; }
.dd-tut p b { color: var(--hot); }
.dd-tut-ico { flex: none; width: 15cqw; height: 15cqw; position: relative; }
.dd-gest, .dd-tut-ico { --c: var(--hot); }
.dd-tut-ico::before, .dd-gest::before { content: ""; position: absolute; inset: 0; border-radius: 22%; background: #FFF0E4; box-shadow: inset 0 0 0 3px var(--c); }
.dd-tut-ico::after, .dd-gest::after { content: ""; position: absolute; left: 50%; top: 50%; width: 26%; height: 26%; margin: -13% 0 0 -13%; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px #fff; animation: var(--anim, ddGlr) 1.1s ease-in-out infinite; }
.dd-g-lr, .t-lane { --anim: ddGlr; }
.dd-g-up, .t-jump { --anim: ddGup; }
.dd-g-down, .t-slide { --anim: ddGdown; --c: var(--teal); }
.dd-g-dash, .t-dash { --anim: ddGdash; --c: var(--orange); }
@keyframes ddGlr { 0%, 100% { transform: translateX(-90%); } 50% { transform: translateX(90%); } }
@keyframes ddGup { 0% { transform: translateY(80%); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-90%); opacity: 0; } }
@keyframes ddGdown { 0% { transform: translateY(-80%); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(90%); opacity: 0; } }
@keyframes ddGdash { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.7); } }
.dd-toast { position: absolute; left: 50%; top: auto; bottom: calc(max(2.6cqw, env(safe-area-inset-bottom)) + clamp(64px, 21cqw, 104px) + 6cqw); transform: translateX(-50%); margin: 0; width: max-content; max-width: 88cqw; text-align: center; font: 900 clamp(13px, 3.9cqw, 19px)/1.45 var(--body); background: #fff; border-radius: 10px; padding: .55em 1em; box-shadow: inset .35em 0 0 var(--hot), 0 3px 0 rgba(29, 30, 36, .15); pointer-events: none; animation: ddToast 3.2s ease forwards; word-break: keep-all; overflow-wrap: anywhere; }
.dd-toast b { color: var(--hot); }
@keyframes ddToast { 0% { opacity: 0; transform: translate(-50%, -1.5cqw); } 8%, 86% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* ───── 告知・演出の文字 ───── */
.dd-banner { position: absolute; left: 0; right: 0; top: 30%; display: flex; flex-direction: column; align-items: center; gap: .3em; pointer-events: none; animation: ddBanner 1.1s ease forwards; }
.dd-banner.long { animation-duration: 1.9s; }
.dd-banner small { font: 900 clamp(12px, 3.8cqw, 19px)/1 var(--body); letter-spacing: .14em; color: #fff; background: var(--hot); padding: .45em 1.1em; border-radius: 6px; transform: skewX(-12deg); }
.dd-banner small:empty { display: none; }
.dd-banner b { font: italic 900 clamp(48px, 20cqw, 110px)/1 var(--disp); letter-spacing: .01em; color: #fff; -webkit-text-stroke: .08em var(--hot); paint-order: stroke fill; text-shadow: .07em .08em 0 var(--teal), .14em .16em 0 rgba(29, 30, 36, .12); }
.dd-banner.go b { background: linear-gradient(180deg, #FFE45C, var(--orange)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: .05em #fff; text-shadow: none; filter: drop-shadow(.06em .08em 0 var(--hot)); }
.dd-banner.jp b { font: 900 clamp(26px, 9.5cqw, 52px)/1.15 var(--body); transform: skewX(-8deg); }
@keyframes ddBanner { 0% { opacity: 0; transform: scale(1.7) translateX(8cqw); } 16% { opacity: 1; transform: scale(1); } 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.94) translateX(-8cqw); } }
.dd-word { position: absolute; left: 0; right: 0; top: 24%; display: flex; justify-content: center; pointer-events: none; animation: ddWord 1.1s cubic-bezier(.2, .9, .2, 1) forwards; }
.dd-word img { width: 78cqw; height: auto; }
.dd-word b { font: italic 900 clamp(46px, 19cqw, 104px)/1 var(--disp); color: #fff; background: linear-gradient(180deg, #FFE45C, var(--orange) 55%, var(--hot)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: .04em #fff; filter: drop-shadow(.05em .07em 0 var(--teal)); }
@keyframes ddWord { 0% { opacity: 0; transform: translateX(30cqw) skewX(-20deg); } 18% { opacity: 1; transform: translateX(0) skewX(-6deg); } 75% { opacity: 1; transform: translateX(-2cqw); } 100% { opacity: 0; transform: translateX(-30cqw) skewX(-20deg); } }
@keyframes ddPop { from { opacity: 0; transform: scale(.6); } }

/* ───── 画面の共通 ───── */
.dd-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; }
.dd-scroll { overflow-y: auto; justify-content: flex-start; touch-action: pan-y; background: linear-gradient(170deg, #DDF3FF 0, var(--cream) 34%, #FFF 100%); }
.dd-scroll > * { flex: none; }
.dd-scroll::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 52cqw; background: repeating-linear-gradient(115deg, transparent 0 22px, rgba(255, 255, 255, .6) 22px 25px); pointer-events: none; }
.dd-topbar { position: relative; width: 100%; display: flex; align-items: center; gap: 2.4cqw; }
.dd-topbar .dd-head { flex: 1; text-align: left; }
.dd-back { flex: none; width: 46px; height: 46px; border-radius: 12px; border: 0; cursor: pointer; background: #fff; box-shadow: inset 0 0 0 3px var(--hot), 0 3px 0 var(--hot-d); font: 900 28px/1 var(--disp); color: var(--hot); padding-bottom: 4px; transform: skewX(-10deg); }
.dd-wallet, .dd-zcount { flex: none; display: flex; align-items: center; gap: .3em; font: italic 800 clamp(13px, 4cqw, 19px)/1 var(--disp); background: #fff; border-radius: 999px; padding: .25em .8em .25em .3em; box-shadow: 0 2px 0 rgba(29, 30, 36, .12); color: #B86E00; }
.dd-zcount { padding: .45em .9em; color: var(--hot); }
.dd-wallet img { width: 1.7em; height: 1.7em; }
.dd-lead { position: relative; margin: 0; font: 700 clamp(12px, 3.6cqw, 16px)/1.6 var(--body); color: var(--mute); }
.dd-card { position: relative; width: 100%; background: #fff; border-radius: 16px; padding: 3cqw 4cqw; text-align: left; display: flex; flex-direction: column; gap: 1.8cqw; box-shadow: inset .5em 0 0 var(--hot), 0 0 0 2px rgba(29, 30, 36, .06), 0 4px 0 rgba(29, 30, 36, .1); }
.ui-img .dd-card { box-shadow: none; border: 14px solid transparent; border-image: url(assets/ui_panel.webp) 18% fill / 14px stretch; }
.dd-card-head { margin: 0; font: 900 clamp(13px, 4cqw, 19px)/1 var(--body); color: var(--hot); letter-spacing: .08em; }
.dd-star { display: inline-block; width: 1.3em; height: 1.3em; background: var(--gold); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

/* ───── タイトル ───── */
.dd-title { justify-content: flex-end; gap: 2.4cqw; padding-bottom: max(5cqw, env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(255, 244, 232, 0) 50%, rgba(255, 244, 232, .9) 64%, rgba(255, 244, 232, .97)); }
.dd-demo-tag { position: absolute; top: max(3cqw, env(safe-area-inset-top)); left: 3cqw; font: italic 800 clamp(12px, 2.8cqw, 14px)/1 var(--disp); letter-spacing: .18em; background: var(--hot); color: #fff; padding: .6em 1em; border-radius: 6px; transform: skewX(-12deg); }
.dd-demo-tag::before { content: ""; display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: #fff; margin-right: .6em; animation: ddBlink 1s steps(2) infinite; }
@keyframes ddBlink { 50% { opacity: 0; } }
.dd-sound { position: absolute; top: max(3cqw, env(safe-area-inset-top)); right: 3cqw; min-width: 64px; min-height: 44px; cursor: pointer; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 3px var(--teal), 0 3px 0 var(--teal-d); font: italic 800 clamp(12px, 3.2cqw, 16px)/1 var(--disp); padding: 0 .9em; }
.dd-logo-wrap { margin: 13cqw 0 auto; width: 92cqw; display: flex; justify-content: center; animation: ddFloat 3s ease-in-out infinite; }
@keyframes ddFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6cqw); } }
.dd-logo { width: 92cqw; height: auto; filter: drop-shadow(0 1.2cqw 1.6cqw rgba(29, 30, 36, .2)); }
/* 題字の画像が無いときの代わり（斜体の極太・赤橙グラデ・白フチ・ターコイズの影・スピード線） */
.dd-logo-text { position: relative; display: flex; flex-direction: column; align-items: center; transform: rotate(-6deg); }
.dd-logo-text::before { content: ""; position: absolute; left: -6cqw; right: 40%; top: 38%; height: 26%; background: repeating-linear-gradient(180deg, #fff 0 .5cqw, transparent .5cqw 1.6cqw); transform: skewX(-30deg); opacity: .9; }
.dd-lt-a, .dd-lt-b { position: relative; display: block; font: italic 900 15cqw/.86 var(--disp); letter-spacing: -.01em; color: #fff; -webkit-text-stroke: .16em #fff; padding: 0 .1em; filter: drop-shadow(.07em .07em 0 var(--teal)) drop-shadow(0 .12em .1em rgba(29, 30, 36, .2)); }
.dd-lt-b { font-size: 27cqw; margin: -.04em 0 0 10cqw; }
.dd-lt-a::after, .dd-lt-b::after { content: attr(data-t); position: absolute; left: .1em; top: 0; -webkit-text-stroke: .025em var(--hot-d); background: linear-gradient(180deg, #FFE45C 0, var(--orange) 45%, var(--hot) 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dd-lt-sub { margin-top: 1.4cqw; font: 900 clamp(13px, 4.8cqw, 24px)/1 var(--body); letter-spacing: .3em; color: #fff; background: var(--teal); padding: .45em 1.2em .45em 1.5em; transform: skewX(-14deg); box-shadow: .3em .3em 0 var(--hot); }
.dd-catch { margin: 0; font: 900 clamp(15px, 4.8cqw, 26px)/1.45 var(--body); letter-spacing: .04em; word-break: keep-all; text-shadow: 0 0 .3em #fff, 0 0 .6em #fff; }
.dd-title-btns { display: flex; flex-direction: column; gap: 2.4cqw; align-items: center; }
.dd-title-btns .dd-btn-main { font-size: clamp(19px, 6.6cqw, 34px); padding: .45em 2.6em .5em; animation: ddPulse 1.6s ease-in-out infinite; }
@keyframes ddPulse { 0%, 100% { transform: skewX(-12deg) scale(1); } 50% { transform: skewX(-12deg) scale(1.05); } }
.dd-title-btns .dd-row { gap: 1.8cqw; flex-wrap: nowrap; }
.dd-title-btns .dd-btn-s { font-size: clamp(12px, 3.4cqw, 16px); padding: .5em .8em .55em; letter-spacing: .02em; }
.dd-title-stats { display: flex; gap: 3cqw; justify-content: center; font: italic 800 clamp(13px, 3.8cqw, 19px)/1 var(--disp); }
.dd-title-stats span { display: flex; align-items: center; gap: .35em; background: #fff; border-radius: 999px; padding: .2em .8em .2em .25em; box-shadow: 0 2px 0 rgba(29, 30, 36, .12); }
.dd-title-stats img { width: 1.6em; height: 1.6em; }
.dd-title-stats .dd-star { margin-left: .2em; }
.dd-note { margin: 0; font-size: clamp(12px, 3cqw, 14px); font-weight: 700; color: var(--mute); line-height: 1.6; word-break: keep-all; }

/* ───── あそびかた ───── */
.dd-howto { gap: 2.6cqw; }
.dd-how-obs figcaption { white-space: nowrap; }   /* 12px にしたことで「スライディング」が1字だけ折り返すのを防ぐ */
/* 開始ボタンは、スクロールしなくても押せるよう画面の下に貼り付ける */
.dd-howto > .dd-btn-col { position: sticky; bottom: calc(-1 * max(4cqw, env(safe-area-inset-bottom))); z-index: 2; margin-top: auto; padding: 3cqw 0 max(4cqw, env(safe-area-inset-bottom)); background: linear-gradient(rgba(255, 255, 255, 0), #fff 34%); }
.dd-how-row { display: flex; align-items: center; gap: 3cqw; }
.dd-gest { position: relative; flex: none; width: 12cqw; height: 12cqw; min-width: 40px; min-height: 40px; }
.dd-how-row p, .dd-how-text { margin: 0; font: 800 clamp(12px, 3.8cqw, 17px)/1.45 var(--body); word-break: keep-all; overflow-wrap: anywhere; }
.dd-how-row b, .dd-how-text b { color: var(--hot); }
.dd-how-row small { display: block; font: 700 max(12px, .78em)/1.4 var(--body); color: var(--mute); }
.dd-how-obs, .dd-how-icons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.dd-how-icons { grid-template-columns: repeat(4, 1fr); }
.dd-how-obs figure, .dd-how-icons figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .3em; font: 700 clamp(12px, 3cqw, 14px)/1.3 var(--body); text-align: center; }
.dd-how-obs figure { background: #F0F9FF; border-radius: 12px; padding: 1.4cqw .6cqw; }
.dd-how-obs figcaption b { display: block; color: var(--hot); }
.dd-how-obs img { width: 19cqw; height: 19cqw; }
.dd-how-icons img { width: 14cqw; height: 14cqw; }
.dd-how-items { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw; }
.dd-how-item { display: flex; align-items: center; gap: .5em; font: 700 clamp(12px, 3.1cqw, 14px)/1.35 var(--body); background: #FFF6EC; border-radius: 10px; padding: .4em .5em; }
.dd-how-item img { width: 2.4em; height: 2.4em; flex: none; }
.dd-how-item b { display: block; color: var(--hot); }

/* ───── コースをえらぶ ───── */
.dd-select { gap: 3cqw; }
.dd-stage-list { position: relative; width: 100%; display: flex; flex-direction: column; gap: 3cqw; padding-bottom: 4cqw; }
.dd-stage-card { position: relative; overflow: hidden; cursor: pointer; text-align: left; border: 0; min-height: 30cqw; border-radius: 16px; padding: 3cqw 4cqw; background: #fff center / cover no-repeat; display: grid; grid-template-columns: 1fr auto; align-content: end; gap: .3em 2cqw; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--hot), 0 5px 0 5px var(--hot-d); transition: transform .12s; }
.dd-stage-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255, 255, 255, .97) 34%, rgba(255, 255, 255, .55) 62%, rgba(255, 255, 255, 0)); }
.dd-stage-card > * { position: relative; }
.dd-stage-card:active { transform: scale(.98); }
.dd-sc-no { grid-column: 1; justify-self: start; font: italic 800 clamp(12px, 3.2cqw, 15px)/1 var(--disp); letter-spacing: .14em; color: #fff; background: var(--hot); padding: .35em .7em; border-radius: 4px; transform: skewX(-12deg); }
.dd-sc-name { grid-column: 1; font: 900 clamp(18px, 6cqw, 30px)/1.15 var(--body); }
.dd-sc-en { grid-column: 1; font: italic 800 clamp(12px, 3cqw, 14px)/1 var(--disp); letter-spacing: .14em; color: var(--teal-d); }
.dd-sc-stars { grid-column: 1; display: flex; gap: .2em; }
.dd-sc-stars .dd-star { width: 6.4cqw; height: 6.4cqw; }
.dd-sc-stars .dd-star.off { background: #D9DCE2; }
.dd-sc-best { grid-column: 1; font: italic 800 clamp(12px, 3cqw, 14px)/1 var(--disp); color: var(--mute); }
.dd-sc-boss { position: absolute !important; right: 3cqw; bottom: 3cqw; font: italic 900 clamp(12px, 3.6cqw, 17px)/1 var(--disp); color: #fff; background: var(--ink); padding: .4em .7em; border-radius: 6px; transform: skewX(-12deg); }
.dd-stage-card.locked { cursor: default; filter: grayscale(.85); }
.dd-sc-lock { position: absolute !important; inset: 0; display: flex; align-items: center; justify-content: center; gap: .5em; background: rgba(240, 242, 246, .9); font: 900 clamp(13px, 4cqw, 19px)/1.3 var(--body); }
.dd-sc-lock::before { content: ""; width: 1.1em; height: 1em; border-radius: 3px; background: var(--mute); box-shadow: 0 -.55em 0 -.18em #fff, 0 -.55em 0 -.06em var(--mute); }
.dd-stage-card.endless { background-image: linear-gradient(110deg, #FFF0B8, #FFD6DA 50%, #C9F3F1); }

/* ───── トレーニング ───── */
.dd-up-list { position: relative; width: 100%; display: flex; flex-direction: column; gap: 3cqw; padding-bottom: 4cqw; }
.dd-up { display: grid; grid-template-columns: auto 1fr auto; gap: 1cqw 3cqw; align-items: center; text-align: left; background: #fff; border-radius: 16px; padding: 3cqw; box-shadow: inset .45em 0 0 var(--teal), 0 4px 0 rgba(29, 30, 36, .1); }
.dd-up img { grid-row: 1 / 3; width: 15cqw; height: 15cqw; }
.dd-up-name { margin: 0; font: 900 clamp(14px, 4.4cqw, 21px)/1.2 var(--body); }
.dd-up-pips { display: flex; gap: .3em; margin-top: .3em; }
.dd-up-pips i { width: 1.6em; height: .55em; border-radius: 2px; background: #DDE1E7; transform: skewX(-20deg); }
.dd-up-pips i.on { background: linear-gradient(90deg, var(--teal), #6EE7E1); }
.dd-up-eff { margin: 0; grid-column: 2 / 4; font: 700 clamp(12px, 3.3cqw, 15px)/1.45 var(--body); color: var(--mute); }
.dd-up-eff b { color: var(--ink); }
.dd-up-buy { grid-column: 3; grid-row: 1; min-height: 44px; display: flex; align-items: center; gap: .3em; cursor: pointer; border: 0; border-radius: 10px; padding: 0 .9em; background: linear-gradient(100deg, var(--hot), var(--orange)); color: #fff; font: italic 800 clamp(13px, 3.8cqw, 18px)/1 var(--disp); transform: skewX(-10deg); box-shadow: 0 3px 0 var(--hot-d); }
.dd-up-buy img { width: 1.5em; height: 1.5em; }
.dd-up-buy:disabled { filter: grayscale(1); opacity: .5; cursor: default; }
.dd-up-max { grid-column: 3; grid-row: 1; font: italic 900 clamp(13px, 4cqw, 19px)/1 var(--disp); color: var(--teal-d); }
.dd-up.boom { animation: ddBoom .6s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes ddBoom { 40% { transform: scale(1.05) rotate(-1deg); background: #E6FBFA; } }

/* ───── 職種図鑑 ───── */
.dd-ztabs { position: relative; width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6cqw; }
.dd-ztab { min-height: 48px; cursor: pointer; border: 0; border-radius: 12px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15em; padding: .3em .1em; font: 900 clamp(12px, 3cqw, 14px)/1.1 var(--body); box-shadow: 0 3px 0 rgba(29, 30, 36, .12); }
.dd-ztab img { width: 9cqw; height: 9cqw; }
.dd-ztab small { font: italic 800 max(12px, .85em)/1 var(--disp); color: var(--mute); }
.dd-ztab.on { background: var(--job); color: var(--job-ink, #fff); box-shadow: 0 3px 0 rgba(29, 30, 36, .25); transform: translateY(-1cqw); }
.dd-ztab.on small { color: inherit; }
.dd-zbody { position: relative; width: 100%; display: flex; flex-direction: column; gap: 2.6cqw; padding-bottom: 5cqw; }
.dd-zhead { display: flex; align-items: center; gap: 3cqw; text-align: left; background: #fff; border-radius: 16px; padding: 2.6cqw 3cqw; box-shadow: inset 0 -.5em 0 var(--job); }
.dd-zhead img { width: 22cqw; height: 22cqw; border-radius: 50%; object-fit: cover; background: var(--cream); box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--job); flex: none; }
.dd-zhead p { margin: 0; }
.dd-zhead .dd-zname { font: 900 clamp(16px, 5cqw, 24px)/1.2 var(--body); }
.dd-zhead .dd-zsub { font: 700 clamp(12px, 3.2cqw, 15px)/1.5 var(--body); color: var(--mute); margin-top: .3em; }
.dd-zpage { position: relative; text-align: left; background: #fff; border-radius: 14px; padding: 3cqw 4cqw 3cqw 13cqw; box-shadow: 0 3px 0 rgba(29, 30, 36, .1); }
.dd-zpage::before { content: attr(data-n); position: absolute; left: 3cqw; top: 3cqw; width: 7.4cqw; height: 7.4cqw; border-radius: 6px; background: var(--job); color: var(--job-ink, #fff); display: grid; place-items: center; font: italic 900 clamp(13px, 4cqw, 19px)/1 var(--disp); transform: skewX(-10deg); }
.dd-zpage h3 { margin: 0 0 .3em; font: 900 clamp(14px, 4.4cqw, 20px)/1.3 var(--body); }
.dd-zpage p { margin: 0; font: 700 clamp(12px, 3.6cqw, 16px)/1.7 var(--body); color: #34374A; }
.dd-zpage.locked { background: #F1F3F6; }
.dd-zpage.locked h3 { color: var(--mute); }
.dd-zpage.locked p { color: var(--mute); }
.dd-zpage.fresh { animation: ddBoom .8s cubic-bezier(.34, 1.56, .64, 1); box-shadow: 0 0 0 3px var(--job), 0 3px 0 rgba(29, 30, 36, .1); }

/* ───── コースの始まり ───── */
.dd-intro { background: linear-gradient(180deg, rgba(255, 244, 232, .25), rgba(255, 244, 232, .92) 32%, rgba(255, 244, 232, .97)); gap: 2.6cqw; }
.dd-intro-no { margin: 0; font: italic 800 clamp(13px, 4cqw, 19px)/1 var(--disp); letter-spacing: .3em; color: #fff; background: var(--ink); padding: .45em 1em; transform: skewX(-12deg); }
.dd-ribbon { margin: 0; position: relative; font: 900 clamp(26px, 9.2cqw, 48px)/1.15 var(--body); color: #fff; background: linear-gradient(100deg, var(--hot), var(--orange)); padding: .25em 1.1em .3em; transform: skewX(-12deg); box-shadow: .25em .25em 0 var(--teal); animation: ddRibbon .55s cubic-bezier(.2, .9, .2, 1); word-break: keep-all; }
.dd-ribbon > span { display: block; transform: skewX(12deg); text-shadow: 0 .06em 0 rgba(120, 10, 20, .4); }
.ui-img .dd-ribbon { background: none; box-shadow: none; border: 18px solid transparent; border-image: url(assets/ui_ribbon.webp) 30% fill / 18px stretch; }
@keyframes ddRibbon { from { transform: skewX(-12deg) translateX(-110cqw); } }
.dd-intro-en { margin: -1cqw 0 0; font: italic 800 clamp(12px, 3.8cqw, 18px)/1 var(--disp); letter-spacing: .24em; color: var(--teal-d); }
.dd-bubble-row { width: 100%; display: flex; align-items: flex-end; gap: 2.6cqw; text-align: left; animation: ddPop .45s .25s cubic-bezier(.34, 1.56, .64, 1) backwards; }
.dd-face { flex: none; width: 24cqw; height: 24cqw; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--job, var(--hot)); }
.dd-bubble { position: relative; flex: 1; background: #fff; border-radius: 16px; padding: 2.6cqw 3.4cqw; box-shadow: 0 0 0 3px var(--teal), 0 4px 0 rgba(29, 30, 36, .1); }
.dd-bubble::before { content: ""; position: absolute; left: -2.4cqw; bottom: 3cqw; width: 4cqw; height: 4cqw; background: #fff; transform: rotate(45deg); box-shadow: -3px 3px 0 0 var(--teal); }
.ui-img .dd-bubble { box-shadow: none; border: 16px solid transparent; border-image: url(assets/ui_bubble.webp) 30% fill / 16px stretch; }
.dd-bubble p { margin: 0; font: 800 clamp(13px, 4cqw, 18px)/1.6 var(--body); word-break: keep-all; overflow-wrap: anywhere; }
.dd-bubble .dd-bubble-who { font: 900 clamp(12px, 3.2cqw, 14px)/1 var(--body); color: var(--job, var(--hot)); margin-bottom: .45em; filter: brightness(.85); }
.dd-missions { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 1.4cqw; }
.dd-missions li { display: flex; align-items: center; gap: 2cqw; background: #fff; border-radius: 10px; padding: .45em .8em .45em .5em; text-align: left; font: 800 clamp(12px, 3.6cqw, 16px)/1.3 var(--body); box-shadow: 0 2px 0 rgba(29, 30, 36, .1); }
.dd-missions li .dd-star { width: 6.4cqw; height: 6.4cqw; flex: none; background: #D9DCE2; }
.dd-missions li.done .dd-star { background: var(--gold); }
.dd-missions li span { flex: 1; }
.dd-missions li em { font: italic 800 max(12px, .78em)/1 var(--disp); font-style: italic; color: #fff; background: var(--hot); border-radius: 4px; padding: .35em .5em; }
.dd-missions li.fresh .dd-star { animation: ddStar .6s cubic-bezier(.34, 1.56, .64, 1) backwards; }
@keyframes ddStar { from { transform: scale(0) rotate(-120deg); } }

/* ───── 一時停止 ───── */
.dd-pause { background: rgba(255, 244, 232, .94); gap: 4cqw; }
.dd-pause .dd-btn { min-width: 62cqw; }

/* ───── ゴールの演出 ───── */
.dd-clear { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4cqw; padding: 0 6cqw; text-align: center; cursor: pointer; background: radial-gradient(circle at 50% 48%, rgba(255, 255, 255, .95) 0, rgba(255, 255, 255, .72) 36%, rgba(255, 244, 232, 0) 66%); }
.dd-clear > * { animation: ddPop .55s cubic-bezier(.34, 1.56, .64, 1) backwards; }
.dd-clear > :nth-child(2) { animation-delay: .12s; }
.dd-clear > :nth-child(3) { animation-delay: .24s; }
.dd-clear > :nth-child(4) { animation-delay: .34s; }
.dd-clear > :nth-child(5) { animation-delay: 1s; }
.dd-clear-head img { width: 80cqw; height: auto; display: block; }
.dd-clear-head b { display: block; font: italic 900 clamp(44px, 17cqw, 92px)/1 var(--disp); background: linear-gradient(180deg, #FFE45C, var(--orange) 55%, var(--hot)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: .04em #fff; filter: drop-shadow(.05em .07em 0 var(--teal)); transform: skewX(-8deg); }
.dd-clear-head b.jp { font: 900 clamp(30px, 11.5cqw, 62px)/1.1 var(--body); }
.dd-clear-face { width: 44cqw; height: 44cqw; border-radius: 50%; overflow: hidden; background: var(--cream); box-shadow: 0 0 0 2cqw #fff, 0 0 0 3.4cqw var(--job, var(--hot)), 1.8cqw 2.4cqw 0 3.4cqw rgba(18, 198, 192, .5); }
.dd-clear-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dd-clear-name { margin: 3cqw 0 0; font: 900 clamp(16px, 5.6cqw, 30px)/1.2 var(--body); color: var(--job-ink, #fff); background: var(--job, var(--hot)); padding: .35em 1em .4em; transform: skewX(-12deg); box-shadow: .2em .2em 0 var(--ink); word-break: keep-all; }
.dd-clear-line { margin: 0; max-width: 84cqw; font: 800 clamp(13px, 4cqw, 20px)/1.55 var(--body); background: #fff; border-radius: 14px; padding: .6em 1em; box-shadow: 0 0 0 3px var(--teal); word-break: keep-all; overflow-wrap: anywhere; }
.dd-clear-tap { margin: 1cqw 0 0; font: 800 clamp(12px, 3.2cqw, 15px)/1 var(--body); color: var(--mute); animation: ddPop .5s ease 1.2s backwards, ddBlink2 1.4s ease-in-out 1.7s infinite !important; }
@keyframes ddBlink2 { 50% { opacity: .35; } }

/* ───── 結果 ───── */
.dd-result { gap: 2.6cqw; padding-top: max(6cqw, env(safe-area-inset-top)); }
.dd-res-head { position: relative; display: flex; justify-content: center; margin-bottom: 1cqw; }
.dd-res-head img { width: 80cqw; height: auto; display: block; animation: ddPop .6s cubic-bezier(.34, 1.56, .64, 1); }
.dd-res-head b { display: block; font: italic 900 clamp(46px, 18cqw, 96px)/1 var(--disp); background: linear-gradient(180deg, #FFE45C, var(--orange) 55%, var(--hot)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: .04em #fff; filter: drop-shadow(.05em .07em 0 var(--teal)); transform: skewX(-8deg); animation: ddPop .6s cubic-bezier(.34, 1.56, .64, 1); }
.dd-res-head b.try { background: linear-gradient(180deg, #8FF0FF, var(--teal) 50%, #2F9BFF); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(.05em .07em 0 var(--hot)); }
.dd-res-stage { position: relative; margin: -1cqw 0 0; font: 800 clamp(12px, 3.8cqw, 18px)/1.4 var(--body); color: var(--mute); word-break: keep-all; }
.dd-res-score { position: relative; display: flex; align-items: baseline; gap: .6em; }
.dd-res-score small { font: italic 800 clamp(12px, 3cqw, 15px)/1 var(--disp); letter-spacing: .2em; color: var(--mute); }
.dd-res-score b { font: italic 900 clamp(32px, 11cqw, 58px)/1 var(--disp); font-variant-numeric: tabular-nums; color: var(--hot); }
.dd-res-record { margin: -1cqw 0 0; font: italic 900 clamp(15px, 4.8cqw, 23px)/1 var(--disp); letter-spacing: .08em; color: #fff; background: linear-gradient(100deg, var(--gold), var(--orange)); padding: .35em 1em; transform: skewX(-12deg); box-shadow: .2em .2em 0 var(--teal); animation: ddPop .6s cubic-bezier(.34, 1.56, .64, 1) 1.4s backwards; }
.dd-res-break { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4cqw; }
.dd-res-break li { background: #fff; border-radius: 10px; padding: .45em .2em .5em; display: flex; flex-direction: column; gap: .25em; box-shadow: 0 2px 0 rgba(29, 30, 36, .1); }
.dd-res-break small { font: 700 clamp(12px, 2.6cqw, 13px)/1.2 var(--body); color: var(--mute); }
.dd-res-break b { font: italic 800 clamp(14px, 4.4cqw, 22px)/1 var(--disp); font-variant-numeric: tabular-nums; }
.dd-res-break b em { font: 700 max(12px, .58em)/1 var(--body); font-style: normal; margin-left: .1em; }
.dd-res-coins { display: flex; align-items: center; gap: .4em; font: italic 800 clamp(20px, 7cqw, 34px)/1 var(--disp); color: #B86E00; }
.dd-res-coins img { width: 1.5em; height: 1.5em; animation: ddSpin 1.2s ease-out; }
@keyframes ddSpin { from { transform: rotateY(720deg) scale(.4); } }
.dd-res-coins small { font: 700 clamp(12px, 3cqw, 14px)/1 var(--body); color: var(--mute); margin-left: .4em; }
.dd-res-zukan { width: 100%; text-align: left; background: #fff; border-radius: 14px; padding: .7em 1em; font: 800 clamp(12px, 3.6cqw, 16px)/1.55 var(--body); box-shadow: inset .4em 0 0 var(--teal), 0 3px 0 rgba(29, 30, 36, .1); animation: ddPop .5s cubic-bezier(.34, 1.56, .64, 1) 1s backwards; }
.dd-res-zukan b { color: var(--teal-d); }
.dd-res-zukan small { display: block; font: 900 max(12px, .8em)/1.2 var(--body); color: #fff; background: var(--teal); padding: .3em .6em; border-radius: 4px; margin-bottom: .35em; width: max-content; }
.dd-result .dd-btn-col .dd-btn-main { min-width: 78cqw; }
.dd-res-match { width: 100%; background: #fff; border-radius: 18px; padding: 3.4cqw 4cqw; text-align: left; box-shadow: 0 0 0 3px var(--job, var(--hot)), .5em .6em 0 rgba(18, 198, 192, .35); }
.dd-res-lead { margin: 0 0 1.6cqw; font: 800 clamp(12px, 3.6cqw, 17px)/1.4 var(--body); color: var(--mute); }
.dd-res-job { display: flex; align-items: center; gap: 3cqw; }
.dd-res-job img { width: 24cqw; height: 24cqw; border-radius: 50%; object-fit: cover; background: var(--cream); flex: none; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--job, var(--hot)); }
.dd-res-job > div { min-width: 0; }
.dd-res-type { margin: 0 0 .35em; font: 900 clamp(12px, 3cqw, 14px)/1.3 var(--body); color: #fff; background: var(--hot); display: inline-block; padding: .3em .6em; transform: skewX(-10deg); }
.dd-res-name { margin: 0; font: 900 clamp(18px, 5.6cqw, 30px)/1.25 var(--body); word-break: keep-all; overflow-wrap: anywhere; }
.dd-res-reason { margin: 2.6cqw 0 0; font: 900 clamp(13px, 3.9cqw, 18px)/1.65 var(--body); color: var(--ink); background: #FFF6EC; border-radius: 10px; padding: .5em .8em; }
.dd-res-desc { margin: 1.8cqw 0 2.2cqw; font: 500 clamp(13px, 3.7cqw, 17.6px)/1.75 var(--body); }
.dd-res-bars { display: flex; flex-direction: column; gap: 1.2cqw; }
.dd-res-bar { display: grid; grid-template-columns: 8.6em 1fr 3.2em; align-items: center; gap: .7em; font: 800 clamp(12px, 3cqw, 14px)/1 var(--body); }
.dd-res-bar i { height: 1.1em; background: rgba(29, 30, 36, .08); border-radius: 3px; overflow: hidden; transform: skewX(-15deg); }
.dd-res-bar em { display: block; height: 100%; width: 0; transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.dd-res-bar span:last-child { text-align: right; font: italic 800 1em/1 var(--disp); }
.dd-res-small { margin: 2cqw 0 0; font-size: clamp(12px, 2.8cqw, 13.6px); font-weight: 700; color: var(--mute); line-height: 1.6; }
.dd-res-links { padding-bottom: 5cqw; }
.dd-res-links .dd-btn { min-width: 74cqw; }

/* ───── 画面の切り替え（斜めのスピード線が走る） ───── */
.dd-wipe { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 30; }
.dd-wipe:not(.run) { display: none; }
.dd-wipe i { position: absolute; top: -20%; bottom: -20%; width: 46%; left: -140%; transform: skewX(-18deg); }
.dd-wipe.run i { animation-fill-mode: both !important; }
.dd-wipe i:nth-child(1) { background: var(--hot); }
.dd-wipe i:nth-child(2) { background: var(--orange); width: 30%; }
.dd-wipe i:nth-child(3) { background: #fff; width: 22%; }
.dd-wipe i:nth-child(4) { background: var(--teal); width: 34%; }
.dd-wipe i:nth-child(5) { background: var(--hot); width: 40%; }
.dd-wipe.run i { animation: ddWipe .62s cubic-bezier(.6, 0, .3, 1) forwards; }
.dd-wipe.run i:nth-child(2) { animation-delay: .04s; }
.dd-wipe.run i:nth-child(3) { animation-delay: .08s; }
.dd-wipe.run i:nth-child(4) { animation-delay: .12s; }
.dd-wipe.run i:nth-child(5) { animation-delay: .16s; }
@keyframes ddWipe { 0% { left: -140%; } 100% { left: 190%; } }

.dd-loading { position: absolute; inset: 0; display: grid; place-content: center; gap: 2cqw; justify-items: center; background: var(--cream); font: italic 800 clamp(12px, 3cqw, 15px)/1 var(--disp); letter-spacing: .3em; transition: opacity .4s; z-index: 40; }
.dd-loading i { width: 12cqw; height: 6cqw; background: linear-gradient(100deg, var(--hot), var(--orange)); transform: skewX(-18deg); animation: ddRun .5s ease-in-out infinite alternate; }
@keyframes ddRun { to { transform: skewX(-18deg) translateX(6cqw); } }
.dd-loading.off { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    .dd-logo-wrap, .dd-title-btns .dd-btn-main, .dd-dash.ready { animation: none; }
}