/* TASK DROP 作り込み版 — おもちゃのブロックの世界（つやのあるプラスチック・ポッチ・原色・昼の光） */
:root {
    --ink: #262833;
    --mute: #6A6E7C;
    --cream: #FFF9EE;
    --red: #E63946; --red-l: #FF6B76; --red-d: #A91D2A;
    --blue: #2F9BFF; --blue-l: #7CC4FF; --blue-d: #1663B8;
    --violet: #8B5CF6; --violet-l: #B79BFF; --violet-d: #5B30C9;
    --yellow: #FFC23C; --yellow-l: #FFE08A; --yellow-d: #C08300;
    --green: #2BB673; --green-l: #6FDCA4; --green-d: #17864F;
    --plastic-d: #D3D8E2;
    --td-disp: "Rubik", "M PLUS Rounded 1c", sans-serif;
    --td-body: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
    --bg-title: url(assets/bg.webp);
}
* { 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(--td-body); font-weight: 700;
    touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
button { font: inherit; color: inherit; }
img { -webkit-user-drag: none; }
.td-backdrop {
    position: fixed; inset: -40px;
    background: var(--bg-title) center / cover, #CFEAFF;
    filter: blur(22px) saturate(1.15) brightness(1.04);
    transform: scale(1.05);
}
.td-stage {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
    overflow: hidden; background: var(--cream);
    border-radius: 22px;
    box-shadow: 0 0 0 1px rgba(38, 40, 51, .08), 0 30px 80px rgba(38, 40, 51, .25);
    container-type: size;
}
.td-stage.td-full { border-radius: 0; box-shadow: none; }
.td-stage [hidden] { display: none !important; }
.td-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* ───── ブロックのボタン（上にポッチが並ぶ） ───── */
.td-btn {
    --c: #FFFFFF; --cl: #FFFFFF; --cd: #C3CAD7; --tc: var(--ink);
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .4em;
    min-height: 44px; padding: .5em 1.3em .55em; margin-top: 9px;
    border: 0; border-radius: 12px; cursor: pointer; text-decoration: none;
    font: 900 clamp(14px, 4.2cqw, 21px)/1.2 var(--td-body); letter-spacing: .05em; color: var(--tc);
    background: linear-gradient(180deg, var(--cl), var(--c) 60%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -4px 0 rgba(0, 0, 0, .1), 0 6px 0 var(--cd), 0 11px 18px rgba(38, 40, 51, .18);
    transition: transform .08s, box-shadow .08s, filter .2s;
    word-break: keep-all;
}
.td-btn::before {
    content: ""; position: absolute; left: 14%; right: 14%; top: -7px; height: 8px; pointer-events: none;
    background:
        radial-gradient(ellipse 8px 7px at 50% 100%, var(--cl) 0 92%, transparent 100%) center bottom / 24px 8px repeat-x;
    filter: drop-shadow(0 -1px 0 rgba(38, 40, 51, .1));
}
.td-btn:active { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(0, 0, 0, .1), 0 2px 0 var(--cd), 0 4px 8px rgba(38, 40, 51, .18); }
.td-btn:disabled { filter: grayscale(.9) opacity(.55); cursor: default; }
.td-btn-red { --c: var(--red); --cl: var(--red-l); --cd: var(--red-d); --tc: #fff; text-shadow: 0 2px 0 rgba(120, 10, 20, .35); }
.td-btn-blue { --c: var(--blue); --cl: var(--blue-l); --cd: var(--blue-d); --tc: #fff; text-shadow: 0 2px 0 rgba(10, 50, 120, .3); }
.td-btn-green { --c: var(--green); --cl: var(--green-l); --cd: var(--green-d); --tc: #fff; text-shadow: 0 2px 0 rgba(10, 80, 40, .3); }
.td-btn-yellow { --c: var(--yellow); --cl: var(--yellow-l); --cd: var(--yellow-d); --tc: var(--ink); }
.td-btn-white { --c: #FFFFFF; --cl: #FFFFFF; --cd: #C3CAD7; --tc: var(--ink); }
.td-btn-big { font-size: clamp(19px, 6.6cqw, 34px); padding: .4em 2.2em .45em; border-radius: 16px; }
.td-btn-big::before { top: -9px; height: 10px; background-size: 30px 10px; background-image: radial-gradient(ellipse 10px 9px at 50% 100%, var(--cl) 0 92%, transparent 100%); }
.td-row { display: flex; gap: 2.4cqw; justify-content: center; flex-wrap: wrap; }
.td-link { color: var(--ink); font: 800 clamp(12px, 3.4cqw, 15px)/1 var(--td-body); padding: .8em .6em; display: inline-block; }
.td-link-btn { background: none; border: 0; text-decoration: underline; cursor: pointer; }

/* プラスチックのカード */
.td-card {
    position: relative; background: #fff; border-radius: 18px;
    box-shadow: inset 0 -4px 0 #E8EBF2, 0 5px 0 var(--plastic-d), 0 14px 26px rgba(38, 40, 51, .13);
}

/* 大きな英字（後ろに白フチ・濃い縁・影の層を重ねる） */
.td-head-word {
    position: relative; margin: 0; padding: .06em .14em;
    font: 900 clamp(32px, 11cqw, 60px)/1.05 var(--td-disp); font-style: italic; letter-spacing: .01em;
    background: linear-gradient(180deg, #FFE98A 6%, var(--yellow) 40%, #FF8A3D 72%, var(--red) 98%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.td-head-word::before {
    content: attr(data-t); position: absolute; inset: 0; z-index: -1; padding: inherit;
    color: #fff; -webkit-text-stroke: .16em #fff; background: none;
    filter: drop-shadow(.03em 0 0 var(--ink)) drop-shadow(-.03em 0 0 var(--ink)) drop-shadow(0 -.03em 0 var(--ink)) drop-shadow(0 .09em 0 var(--ink)) drop-shadow(0 .14em .14em rgba(38, 40, 51, .28));
}
.td-head-word.blue { background-image: linear-gradient(180deg, #BDE6FF 6%, var(--blue) 50%, var(--violet) 98%); }
.td-head-word.green { background-image: linear-gradient(180deg, #D9FFE9 6%, var(--green) 52%, var(--blue-d) 98%); }

/* 日本語の大きな見出し（白フチ＋濃い縁） */
.td-jhead {
    margin: 0; font: 900 clamp(22px, 7.6cqw, 40px)/1.2 var(--td-body); letter-spacing: .08em;
    color: #fff; -webkit-text-stroke: .16em var(--ink); paint-order: stroke fill;
    text-shadow: 0 .12em 0 var(--ink);
}

/* ───── HUD ───── */
.td-hud {
    position: absolute; left: 0; right: 0; top: 0;
    display: flex; align-items: center; gap: 1.2cqw;
    padding: max(2.2cqw, env(safe-area-inset-top)) 2.2cqw 0;
    pointer-events: none; font-size: clamp(12px, 3.1cqw, 17px);
}
.td-chip {
    flex: none; display: flex; align-items: baseline; gap: .45em; white-space: nowrap;
    background: #fff; border-radius: 10px; padding: .4em .75em .45em;
    box-shadow: inset 0 -3px 0 #E8EBF2, 0 3px 0 var(--plastic-d), 0 6px 12px rgba(38, 40, 51, .12);
}
.td-chip small { font: 800 max(12px, .6em)/1 var(--td-disp); letter-spacing: .1em; color: var(--mute); }
.td-chip b { font: 800 1.25em/1 var(--td-disp); font-variant-numeric: tabular-nums; }
.td-chip-stage { background: var(--ink); box-shadow: 0 3px 0 #11121A, 0 6px 12px rgba(38, 40, 51, .16); }
.td-chip-stage small { color: #FFE08A; }
.td-chip-stage b { color: #fff; }
.td-chip-score { flex: 0 1 auto; min-width: 0; }
.td-grow { flex: 1 1 0; min-width: 0; }
.td-round {
    pointer-events: auto; cursor: pointer; flex: none; position: relative;
    width: max(44px, 2.8em); height: max(44px, 2.8em); border: 0; border-radius: 50%;
    background: radial-gradient(circle at 40% 32%, #fff, #EEF1F6 70%);
    box-shadow: inset 0 -3px 0 #DDE1EA, 0 4px 0 var(--plastic-d), 0 8px 14px rgba(38, 40, 51, .16);
    display: flex; align-items: center; justify-content: center; gap: 18%;
}
.td-round i { display: block; width: 14%; height: 36%; background: var(--ink); border-radius: 3px; }
.td-round:active { transform: translateY(3px); }

/* ───── 操作ボタン（丸いポッチのブロック） ───── */
.td-dock {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; justify-content: space-between; align-items: flex-end;
    padding: 0 2.4cqw max(2.4cqw, env(safe-area-inset-bottom));
}
.td-key {
    cursor: pointer; touch-action: none; width: 14.6cqw; min-width: 44px; padding: 0; border: 0; background: none;
    display: flex; flex-direction: column; align-items: center; gap: .7cqw;
}
.td-key svg {
    width: 14.6cqw; height: 14.6cqw; min-width: 44px; min-height: 44px; display: block; border-radius: 50%;
    background: radial-gradient(circle at 42% 34%, #fff, #EDF0F5 72%);
    box-shadow: inset 0 -4px 0 #DADFE8, 0 1.2cqw 0 var(--plastic-d), 0 2cqw 3cqw rgba(38, 40, 51, .16);
    fill: none; stroke: var(--ink); stroke-width: 4.6; stroke-linecap: round; stroke-linejoin: round;
    transition: transform .07s, box-shadow .07s;
}
.td-key span { white-space: nowrap; font: 900 clamp(12px, 2.7cqw, 14px)/1 var(--td-body); letter-spacing: .04em; background: rgba(255, 255, 255, .92); border-radius: 999px; padding: .25em .6em .3em; box-shadow: 0 1px 3px rgba(38, 40, 51, .12); }
.td-key-hold span { font-family: var(--td-disp); font-weight: 800; }
.td-key.on svg, .td-key:active svg { transform: translateY(1cqw); box-shadow: inset 0 -2px 0 #DADFE8, 0 .2cqw 0 var(--plastic-d), 0 .6cqw 1cqw rgba(38, 40, 51, .16); }
.td-key-rot svg { background: radial-gradient(circle at 42% 34%, var(--red-l), var(--red) 72%); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .14), 0 1.2cqw 0 var(--red-d), 0 2cqw 3cqw rgba(230, 57, 70, .3); stroke: #fff; }
.td-key-rot.on svg, .td-key-rot:active svg { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .14), 0 .2cqw 0 var(--red-d); }
.td-key-hard svg { background: radial-gradient(circle at 42% 34%, var(--blue-l), var(--blue) 72%); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .14), 0 1.2cqw 0 var(--blue-d), 0 2cqw 3cqw rgba(47, 155, 255, .3); stroke: #fff; }
.td-key-hard.on svg, .td-key-hard:active svg { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .14), 0 .2cqw 0 var(--blue-d); }
.td-key-hold.off svg { opacity: .45; }

/* ───── 共通の画面 ───── */
.td-screen {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3cqw; text-align: center;
    padding: max(4cqw, env(safe-area-inset-top)) 5cqw max(4cqw, env(safe-area-inset-bottom));
    isolation: isolate;
}
.td-screen.td-in { animation: tdScreenIn .38s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes tdScreenIn { from { opacity: 0; transform: translateY(3cqw) scale(.98); } }
.td-menu {
    justify-content: flex-start; overflow-y: auto; overflow-x: hidden; touch-action: pan-y;
    background: linear-gradient(180deg, rgba(255, 249, 238, .72), rgba(255, 249, 238, .93) 26%, rgba(255, 249, 238, .97)), var(--bg-title) center / cover, var(--cream);
    gap: 3cqw;
}
.td-menu > * { flex: none; }
.td-modal { background: rgba(255, 249, 238, .82); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); overflow-y: auto; touch-action: pan-y; justify-content: safe center; }
.td-topbar { width: 100%; display: flex; align-items: center; gap: 2.4cqw; }
.td-back {
    flex: none; width: max(44px, 11cqw); height: max(44px, 11cqw); cursor: pointer; border: 0; border-radius: 12px;
    background: #fff; font: 900 7cqw/1 var(--td-disp); padding-bottom: .12em;
    box-shadow: inset 0 -3px 0 #E8EBF2, 0 4px 0 var(--plastic-d), 0 8px 14px rgba(38, 40, 51, .14);
}
.td-back:active { transform: translateY(3px); }
.td-screen-title { flex: 1; margin: 0; text-align: left; font: 900 clamp(18px, 6cqw, 30px)/1.1 var(--td-body); letter-spacing: .04em; white-space: nowrap; }
.td-star-pill { flex: none; display: flex; align-items: center; gap: .3em; font: 800 clamp(13px, 4cqw, 20px)/1 var(--td-disp); background: #fff; border-radius: 999px; padding: .45em .8em .45em .5em; box-shadow: 0 3px 0 var(--plastic-d); }
.td-star-pill small { font-size: max(12px, .7em); color: var(--mute); }
.td-star { display: inline-block; width: 1.25em; height: 1.25em; flex: none; background: center / contain no-repeat; }
.td-star:not(.img) { background: none; position: relative; }
.td-star:not(.img)::before { content: "★"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--yellow); font-size: 1.15em; line-height: 1; -webkit-text-stroke: .06em var(--yellow-d); }
.td-star.off { filter: grayscale(1) opacity(.35); }

/* ───── タイトル ───── */
.td-title {
    justify-content: flex-end; gap: 2.2cqw; padding-bottom: max(4cqw, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(255, 249, 238, .62), rgba(255, 249, 238, 0) 24%, rgba(255, 249, 238, 0) 46%, rgba(255, 249, 238, .9) 60%, rgba(255, 249, 238, .97));
}
.td-title-logo { margin-top: 9cqw; margin-bottom: auto; width: 90cqw; display: flex; justify-content: center; animation: tdFloat 3.4s ease-in-out infinite; }
.td-title-img { width: 90cqw; height: auto; filter: drop-shadow(0 1.6cqw 2cqw rgba(38, 40, 51, .22)); }
@keyframes tdFloat { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-1.6cqw) rotate(1deg); } }
/* 題字の画像が無いときの代わり: 1文字ずつおもちゃのブロックにして、上から落として積む */
.td-logo-text { display: flex; flex-direction: column; align-items: center; gap: 2.2cqw; }
.td-logo-text p { margin: 0; display: flex; gap: 1.4cqw; }
.td-logo-text i {
    --c: var(--red); --cl: var(--red-l); --cd: var(--red-d);
    position: relative; display: grid; place-items: center; font-style: normal;
    width: 14cqw; height: 14cqw; border-radius: 2.2cqw;
    font: 900 10cqw/1 var(--td-disp); color: #fff;
    text-shadow: 0 .06em 0 var(--cd), 0 .1em .08em rgba(0, 0, 0, .18);
    background: linear-gradient(180deg, var(--cl), var(--c) 62%);
    box-shadow: inset 0 .5cqw 0 rgba(255, 255, 255, .5), inset 0 -.9cqw 0 rgba(0, 0, 0, .12), 0 1.4cqw 0 var(--cd), 0 2.6cqw 3cqw rgba(38, 40, 51, .22);
    animation: tdLetterDrop .7s cubic-bezier(.3, 1.4, .5, 1) backwards;
}
.td-logo-text i::before {
    content: ""; position: absolute; top: -2.2cqw; left: 18%; right: 18%; height: 2.4cqw;
    background: radial-gradient(ellipse 2.6cqw 2.3cqw at 50% 100%, var(--cl) 0 92%, transparent 100%) center bottom / 50% 100% repeat-x;
}
.td-logo-row2 i { width: 19cqw; height: 19cqw; font-size: 14cqw; border-radius: 3cqw; }
.td-logo-text p i:nth-child(4n+1) { --c: var(--red); --cl: var(--red-l); --cd: var(--red-d); }
.td-logo-text p i:nth-child(4n+2) { --c: var(--blue); --cl: var(--blue-l); --cd: var(--blue-d); }
.td-logo-text p i:nth-child(4n+3) { --c: var(--yellow); --cl: var(--yellow-l); --cd: var(--yellow-d); color: #fff; }
.td-logo-text p i:nth-child(4n+4) { --c: var(--green); --cl: var(--green-l); --cd: var(--green-d); }
.td-logo-row1 i:nth-child(1) { animation-delay: .05s; transform: rotate(-4deg); }
.td-logo-row1 i:nth-child(2) { animation-delay: .12s; transform: rotate(3deg); }
.td-logo-row1 i:nth-child(3) { animation-delay: .19s; transform: rotate(-2deg); }
.td-logo-row1 i:nth-child(4) { animation-delay: .26s; transform: rotate(4deg); }
.td-logo-row2 i:nth-child(1) { animation-delay: .4s; transform: rotate(3deg); }
.td-logo-row2 i:nth-child(2) { animation-delay: .48s; transform: rotate(-3deg); }
.td-logo-row2 i:nth-child(3) { animation-delay: .56s; transform: rotate(2deg); }
.td-logo-row2 i:nth-child(4) { animation-delay: .64s; transform: rotate(-4deg); }
@keyframes tdLetterDrop { 0% { opacity: 0; translate: 0 -40cqw; } 70% { opacity: 1; translate: 0 1cqw; } 100% { translate: 0 0; } }
.td-logo-text span {
    margin-top: 1cqw; padding: .45em 1.2em .5em; border-radius: 999px; background: #fff;
    font: 900 clamp(13px, 4.2cqw, 24px)/1 var(--td-body); letter-spacing: .3em; color: var(--red-d);
    box-shadow: 0 .8cqw 0 var(--plastic-d), 0 1.6cqw 2.4cqw rgba(38, 40, 51, .14);
}
.td-demo-tag {
    position: absolute; top: max(3cqw, env(safe-area-inset-top)); left: 3cqw;
    font: 800 clamp(12px, 2.8cqw, 14px)/1 var(--td-disp); letter-spacing: .2em;
    background: var(--ink); color: #fff; padding: .7em 1em; border-radius: 999px;
}
.td-demo-tag::before { content: ""; display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: var(--red-l); margin-right: .6em; animation: tdBlink 1s steps(2) infinite; }
@keyframes tdBlink { 50% { opacity: 0; } }
.td-sound {
    position: absolute; top: max(3cqw, env(safe-area-inset-top)); right: 3cqw;
    min-width: 44px; min-height: 36px; cursor: pointer; border: 0; border-radius: 999px; background: #fff;
    padding: .55em 1em; font: 800 clamp(12px, 3cqw, 15px)/1 var(--td-disp);
    box-shadow: inset 0 -3px 0 #E8EBF2, 0 3px 0 var(--plastic-d), 0 6px 12px rgba(38, 40, 51, .14);
}
.td-sound.off { color: var(--mute); }
.td-sound-inline { position: static; margin-top: 1cqw; }
.td-title-crew { position: absolute; left: 0; right: 0; bottom: 40cqh; height: 0; pointer-events: none; }
.td-title-crew img {
    position: absolute; bottom: 0; width: 22cqw; height: auto;
    filter: drop-shadow(0 1.2cqw 1.2cqw rgba(38, 40, 51, .2));
    animation: tdHop 1.8s ease-in-out infinite;
}
.td-title-crew img:nth-child(1) { left: 0; animation-delay: 0s; }
.td-title-crew img:nth-child(2) { left: 16cqw; animation-delay: .45s; width: 18cqw; }
.td-title-crew img:nth-child(3) { right: 16cqw; animation-delay: .9s; width: 18cqw; }
.td-title-crew img:nth-child(4) { right: 0; animation-delay: 1.35s; }
.td-title-crew img.face { border-radius: 50%; background: #fff; border: max(2px, .6cqw) solid #fff; }
@keyframes tdHop { 0%, 60%, 100% { transform: translateY(0) scale(1, 1); } 70% { transform: translateY(0) scale(1.06, .94); } 82% { transform: translateY(-5cqw) scale(.96, 1.05); } 92% { transform: translateY(0) scale(1.04, .96); } }
.td-title-panel { display: flex; flex-direction: column; align-items: center; gap: 2.4cqw; width: 100%; }
.td-catch { margin: 0; font: 900 clamp(15px, 4.7cqw, 25px)/1.45 var(--td-body); letter-spacing: .04em; word-break: keep-all; text-shadow: 0 0 .3em #fff, 0 0 .6em #fff; }
.td-title-panel .td-btn-big { animation: tdPulse 1.6s ease-in-out infinite; }
@keyframes tdPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.td-title-panel .td-row .td-btn { min-width: 32cqw; }
.td-title-stats { margin: 0; display: flex; gap: 2.4cqw; justify-content: center; align-items: center; font: 800 clamp(12px, 3.3cqw, 16px)/1 var(--td-disp); color: var(--mute); }
.td-title-stats b { color: var(--ink); }
.td-title-stats span { display: inline-flex; align-items: center; gap: .3em; }
.td-note { margin: 0; font: 700 clamp(12px, 2.9cqw, 14px)/1.6 var(--td-body); color: var(--mute); word-break: keep-all; }

/* ───── ステージ選択 ───── */
.td-ch { width: 100%; text-align: left; }
.td-ch-head { display: flex; align-items: center; gap: 2.4cqw; margin: 1cqw 0 2cqw; }
.td-ch-art { flex: none; width: 17cqw; height: 17cqw; border-radius: 14px; background: #fff center / cover no-repeat; box-shadow: 0 3px 0 var(--plastic-d); display: grid; place-items: center; overflow: hidden; }
.td-ch-art.ph { background: linear-gradient(135deg, var(--c1), var(--c2)); }
.td-ch-art.ph::after { content: attr(data-n); font: 900 9cqw/1 var(--td-disp); color: #fff; text-shadow: 0 .06em 0 rgba(0, 0, 0, .2); }
.td-ch-head p { margin: 0; }
.td-ch-en { font: 800 clamp(12px, 2.8cqw, 14px)/1 var(--td-disp); letter-spacing: .16em; color: var(--red-d); }
.td-ch-name { font: 900 clamp(17px, 5.4cqw, 27px)/1.2 var(--td-body); margin-top: .2em !important; }
.td-ch-lead { font: 700 clamp(12px, 3.2cqw, 15px)/1.4 var(--td-body); color: var(--mute); margin-top: .2em !important; }
.td-stages { display: flex; flex-direction: column; gap: 2.4cqw; }
.td-st {
    position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1cqw 3cqw;
    width: 100%; min-height: 19cqw; padding: 2.4cqw 3cqw; cursor: pointer; text-align: left; border: 0;
    background: #fff; border-radius: 16px;
    box-shadow: inset 0 -4px 0 #E8EBF2, 0 5px 0 var(--plastic-d), 0 10px 18px rgba(38, 40, 51, .1);
    transition: transform .1s;
}
.td-st:active { transform: translateY(3px); }
.td-st-no {
    --c: var(--blue); --cl: var(--blue-l); --cd: var(--blue-d);
    grid-row: span 2; width: 14cqw; height: 14cqw; border-radius: 12px; display: grid; place-items: center;
    font: 900 clamp(14px, 4.6cqw, 23px)/1 var(--td-disp); color: #fff;
    background: linear-gradient(180deg, var(--cl), var(--c) 62%);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14), 0 3px 0 var(--cd);
}
.td-st.boss .td-st-no { --c: var(--red); --cl: var(--red-l); --cd: var(--red-d); }
.td-st-name { font: 900 clamp(14px, 4.4cqw, 21px)/1.25 var(--td-body); }
.td-st-tag { display: inline-block; margin-left: .4em; font: 800 clamp(12px, 2.5cqw, 12px)/1 var(--td-disp); letter-spacing: .08em; color: #fff; background: var(--red); padding: .35em .55em; border-radius: 6px; vertical-align: .15em; }
.td-st-tag.t-time { background: var(--blue); } .td-st-tag.t-dig { background: #8A8F9C; } .td-st-tag.t-color { background: var(--blue-d); } .td-st-tag.t-mode { background: var(--green); }
.td-st-sub { font: 700 clamp(12px, 3cqw, 14px)/1.35 var(--td-body); color: var(--mute); }
.td-st-stars { grid-row: span 2; display: flex; flex-direction: column; align-items: flex-end; gap: .6cqw; }
.td-st-stars > span { display: flex; gap: .2em; font-size: clamp(13px, 4.2cqw, 21px); }
.td-st-best { font: 800 clamp(12px, 2.7cqw, 13px)/1 var(--td-disp); color: var(--mute); white-space: nowrap; }
.td-st.locked { cursor: default; filter: grayscale(.8); opacity: .75; }
.td-st.locked::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(240, 242, 246, .55); }
.td-lock { position: absolute; right: 3cqw; top: 50%; translate: 0 -50%; z-index: 2; display: flex; align-items: center; gap: .3em; font: 900 clamp(12px, 3.2cqw, 15px)/1 var(--td-body); color: var(--ink); background: #fff; padding: .5em .8em; border-radius: 999px; box-shadow: 0 3px 0 var(--plastic-d); }
.td-lock i { width: 1.2em; height: 1.2em; background: center / contain no-repeat; display: inline-block; }
.td-st.next-up { box-shadow: inset 0 -4px 0 #E8EBF2, 0 5px 0 var(--plastic-d), 0 0 0 3px var(--yellow), 0 10px 18px rgba(38, 40, 51, .1); animation: tdNext 1.6s ease-in-out infinite; }
@keyframes tdNext { 50% { box-shadow: inset 0 -4px 0 #E8EBF2, 0 5px 0 var(--plastic-d), 0 0 0 5px var(--yellow-l), 0 10px 18px rgba(38, 40, 51, .1); } }

/* ───── ステージ紹介 ───── */
.td-intro-card { width: 100%; max-width: 92cqw; padding: 5cqw 5cqw 4.4cqw; display: flex; flex-direction: column; gap: 2.2cqw; text-align: left; }
.td-intro-no { margin: 0; font: 800 clamp(12px, 3.2cqw, 15px)/1 var(--td-disp); letter-spacing: .18em; color: var(--red-d); }
.td-intro-name { margin: 0; font: 900 clamp(22px, 7.4cqw, 38px)/1.2 var(--td-body); }
.td-intro-goal { margin: 0; padding: .7em .9em; border-radius: 12px; background: #FFF4D6; font: 900 clamp(13px, 4cqw, 19px)/1.5 var(--td-body); word-break: keep-all; overflow-wrap: anywhere; }
.td-intro-gim { margin: 0; font: 700 clamp(12px, 3.5cqw, 16px)/1.6 var(--td-body); color: var(--mute); word-break: keep-all; overflow-wrap: anywhere; }
.td-missions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.4cqw; }
.td-missions li { display: flex; align-items: center; gap: 2cqw; background: #F5F7FB; border-radius: 999px; padding: .45em 1em .45em .5em; font: 800 clamp(12px, 3.5cqw, 16px)/1.3 var(--td-body); }
.td-missions li .td-star { font-size: 1.15em; }
.td-missions li span { flex: 1; }
.td-missions li b { font: 800 max(12px, .8em)/1 var(--td-disp); color: #fff; background: var(--red); border-radius: 999px; padding: .35em .6em; }
.td-missions li.done { background: #FFF4D6; }
.td-advice { display: flex; gap: 2.4cqw; align-items: center; }
.td-advice img { flex: none; width: 15cqw; height: 15cqw; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 max(2px, .6cqw) var(--c, var(--blue)); }
.td-advice p { position: relative; margin: 0; flex: 1; background: #F5F7FB; border-radius: 14px; padding: .7em .9em; font: 700 clamp(12px, 3.5cqw, 16px)/1.55 var(--td-body); word-break: keep-all; overflow-wrap: anywhere; }
.td-advice p::before { content: ""; position: absolute; left: -1.6cqw; top: 50%; translate: 0 -50%; border: 1.6cqw solid transparent; border-right-color: #F5F7FB; border-left: 0; }
.td-intro-best { margin: 0; font: 800 clamp(12px, 3.2cqw, 15px)/1.4 var(--td-disp); color: var(--mute); }
.td-intro-card .td-row { margin-top: 1cqw; flex-wrap: nowrap; }
.td-intro-card .td-row .td-btn { flex: 1; }

/* ───── あそびかた・図鑑 ───── */
.td-sec { width: 100%; padding: 3.6cqw 4cqw; text-align: left; }
.td-sec h3 { margin: 0 0 2cqw; display: flex; align-items: center; gap: .5em; font: 900 clamp(15px, 4.8cqw, 23px)/1.2 var(--td-body); }
.td-sec h3::before { content: ""; width: .9em; height: .9em; border-radius: 4px; background: var(--c, var(--red)); box-shadow: 0 2px 0 rgba(0, 0, 0, .15); }
.td-sec p, .td-sec li { margin: 0 0 .7em; font: 700 clamp(12px, 3.5cqw, 16px)/1.65 var(--td-body); word-break: keep-all; overflow-wrap: anywhere; }
.td-sec ul { margin: 0; padding-left: 1.2em; }
.td-sec em { font-style: normal; color: var(--red-d); font-weight: 900; }
.td-ctrl { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; }
.td-ctrl > div { background: #F5F7FB; border-radius: 12px; padding: 2cqw 2.4cqw; }
.td-ctrl p { margin: 0 0 .5em; font-size: clamp(12px, 3.1cqw, 14px); }
.td-ctrl-head { font: 800 clamp(12px, 3.2cqw, 15px)/1 var(--td-disp) !important; letter-spacing: .14em; color: var(--red-d); }
kbd { display: inline-block; margin-right: .35em; padding: .1em .45em .16em; background: #fff; border-radius: 6px; box-shadow: 0 2px 0 var(--plastic-d), 0 0 0 1.5px #C9CFDA inset; font: 800 max(12px, .92em)/1.25 var(--td-body); }
.td-skill-list { display: flex; flex-direction: column; gap: 1.6cqw; }
.td-skill-row { display: flex; gap: 2.4cqw; align-items: center; }
.td-skill-row img { flex: none; width: 13cqw; height: 13cqw; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 max(2px, .6cqw) var(--c); }
.td-skill-row p { margin: 0 !important; }
.td-skill-row b { color: var(--c); }
.td-tabs { width: 100%; display: flex; gap: 2cqw; }
.td-tabs button { flex: 1; min-height: 44px; cursor: pointer; border: 0; border-radius: 12px; background: #fff; font: 900 clamp(13px, 4cqw, 19px)/1 var(--td-body); box-shadow: 0 4px 0 var(--plastic-d); color: var(--mute); }
.td-tabs button.on { background: var(--ink); color: #fff; box-shadow: 0 4px 0 #11121A; }
.td-dexjob { width: 100%; padding: 3.4cqw 3.6cqw 3.6cqw; text-align: left; }
.td-dexjob-top { display: flex; gap: 3cqw; align-items: center; }
.td-dexjob-top img.face { flex: none; width: 20cqw; height: 20cqw; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 max(3px, .8cqw) var(--c); }
.td-dexjob-top p { margin: 0; }
.td-dexjob-en { font: 800 clamp(12px, 2.8cqw, 13px)/1 var(--td-disp); letter-spacing: .16em; color: var(--c); }
.td-dexjob-name { font: 900 clamp(17px, 5.4cqw, 27px)/1.2 var(--td-body); margin-top: .15em !important; }
.td-dexjob-prog { margin-top: .5em !important; font: 800 clamp(12px, 3cqw, 14px)/1.3 var(--td-body); color: var(--mute); }
.td-bar { display: block; height: 2cqw; min-height: 7px; border-radius: 999px; background: #EDF0F5; overflow: hidden; margin-top: .4em; }
.td-bar em { display: block; height: 100%; border-radius: inherit; background: var(--c); width: 0; transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.td-dexjob-scene { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; margin-top: 2.4cqw; background: #F5F7FB; }
.td-pages { display: flex; flex-direction: column; gap: 1.6cqw; margin-top: 2.4cqw; }
.td-page { border-radius: 12px; padding: 2.2cqw 2.8cqw; background: #F5F7FB; }
.td-page h4 { margin: 0 0 .3em; font: 900 clamp(12px, 3.6cqw, 17px)/1.3 var(--td-body); color: var(--c); }
.td-page p { margin: 0; font: 700 clamp(12px, 3.5cqw, 16px)/1.65 var(--td-body); word-break: keep-all; overflow-wrap: anywhere; }
.td-page.locked { display: flex; align-items: center; gap: 2cqw; color: var(--mute); }
.td-page.locked h4 { color: var(--mute); margin: 0; }
.td-page.locked small { margin-left: auto; font: 800 clamp(12px, 2.9cqw, 13px)/1.2 var(--td-body); }
.td-page.skill { background: #FFF4D6; }
.td-techs { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; }
.td-tech { padding: 2.6cqw; text-align: left; display: flex; flex-direction: column; gap: 1cqw; }
.td-tech-art { height: 14cqw; display: grid; place-items: center; }
.td-tech-art { overflow: hidden; }
.td-tech-art img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.td-tech-art .txt { font: 900 clamp(14px, 4.6cqw, 22px)/1.05 var(--td-disp); font-style: italic; color: var(--red); -webkit-text-stroke: .1em #fff; paint-order: stroke fill; text-shadow: 0 .12em 0 rgba(38, 40, 51, .25); text-align: center; word-break: keep-all; }
.td-tech b { font: 900 clamp(12px, 3.6cqw, 17px)/1.3 var(--td-body); }
.td-tech p { margin: 0; font: 700 clamp(12px, 3cqw, 14px)/1.55 var(--td-body); color: var(--mute); word-break: keep-all; overflow-wrap: anywhere; }
.td-tech.locked .td-tech-art { filter: grayscale(1) opacity(.3); }
.td-tech.locked b { color: var(--mute); }

/* ───── チュートリアルの吹き出し ───── */
.td-tut {
    position: absolute; left: 3cqw; right: 3cqw; top: 30%;
    display: flex; gap: 2cqw; align-items: flex-start; pointer-events: none;
    animation: tdTutIn .4s cubic-bezier(.3, 1.5, .5, 1);
}
@keyframes tdTutIn { from { opacity: 0; transform: translateY(-3cqw) scale(.96); } }
.td-tut-face { width: 18cqw; height: 18cqw; flex: none; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 max(3px, .8cqw) var(--c, var(--red)), 0 6px 12px rgba(38, 40, 51, .2); }
.td-tut-box { flex: 1; pointer-events: auto; background: #fff; border-radius: 16px; padding: 2.4cqw 3cqw 2.2cqw; text-align: left; box-shadow: 0 5px 0 var(--plastic-d), 0 12px 24px rgba(38, 40, 51, .18); }
.td-tut-step { margin: 0 0 .3em; font: 800 clamp(12px, 2.6cqw, 13px)/1 var(--td-disp); letter-spacing: .16em; color: var(--red-d); }
.td-tut-text { margin: 0; font: 800 clamp(13px, 3.9cqw, 19px)/1.55 var(--td-body); word-break: keep-all; overflow-wrap: anywhere; }
.td-tut-btns { display: flex; gap: 2cqw; justify-content: flex-end; margin-top: 1.4cqw; }
.td-mini { min-height: 40px; min-width: 44px; cursor: pointer; border: 0; border-radius: 10px; padding: .4em 1em; background: #EEF1F6; font: 900 clamp(12px, 3.3cqw, 16px)/1 var(--td-body); box-shadow: 0 3px 0 var(--plastic-d); }
.td-mini-go { background: var(--red); color: #fff; box-shadow: 0 3px 0 var(--red-d); }

/* ───── 特技のカットイン ───── */
.td-cutin { position: absolute; left: 0; right: 0; top: 34%; height: 30cqw; pointer-events: none; overflow: hidden; }
.td-cutin-band {
    position: absolute; inset: 4cqw 0; display: flex; align-items: center; gap: 4cqw; padding-left: 8cqw;
    background: linear-gradient(100deg, var(--c) 0 62%, var(--cl) 62% 66%, var(--c) 66%);
    box-shadow: 0 1cqw 0 var(--cd), 0 2cqw 4cqw rgba(38, 40, 51, .25);
    transform: skewY(-4deg);
    animation: tdCut .95s cubic-bezier(.2, .9, .3, 1) forwards;
}
.td-cutin-band img { width: 30cqw; height: 30cqw; margin-top: -6cqw; object-fit: cover; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1cqw #fff; transform: skewY(4deg); }
.td-cutin-band p { margin: 0; transform: skewY(4deg); text-align: left; color: #fff; }
.td-cutin-band small { display: block; font: 800 clamp(12px, 3.4cqw, 17px)/1 var(--td-disp); letter-spacing: .16em; opacity: .92; }
.td-cutin-band b { display: block; margin-top: .15em; font: 900 clamp(24px, 8.6cqw, 46px)/1.1 var(--td-body); -webkit-text-stroke: .12em var(--cd); paint-order: stroke fill; text-shadow: 0 .1em 0 var(--cd); }
.td-cutin-band.dark-text b { color: #fff; }
@keyframes tdCut { 0% { transform: skewY(-4deg) translateX(-110%); } 22% { transform: skewY(-4deg) translateX(0); } 78% { transform: skewY(-4deg) translateX(2%); opacity: 1; } 100% { transform: skewY(-4deg) translateX(110%); opacity: .2; } }

/* ───── 一時停止 ───── */
.td-pause-card { width: 100%; max-width: 80cqw; padding: 6cqw 5cqw 5cqw; display: flex; flex-direction: column; align-items: stretch; gap: 1.6cqw; }
.td-pause-card .td-head-word { align-self: center; margin-bottom: 1cqw; }
.td-pause-goal { margin: 0 0 1cqw; font: 800 clamp(12px, 3.6cqw, 17px)/1.5 var(--td-body); color: var(--mute); }
.td-pause-card .td-sound-inline { align-self: center; }

/* ───── リザルト ───── */
.td-result { padding-top: max(6cqw, env(safe-area-inset-top)); gap: 2.6cqw; }
.td-res-head { height: 26cqw; width: 100%; display: grid; place-items: center; }
.td-res-head img { max-width: 86cqw; max-height: 26cqw; object-fit: contain; animation: tdPop .6s cubic-bezier(.34, 1.56, .64, 1); filter: drop-shadow(0 1cqw 1.4cqw rgba(38, 40, 51, .2)); }
.td-res-head .td-head-word { animation: tdPop .6s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes tdPop { from { opacity: 0; transform: scale(.4) rotate(-8deg); } }
.td-res-stage { margin: -1.4cqw 0 0; font: 900 clamp(13px, 4cqw, 19px)/1.4 var(--td-body); word-break: keep-all; }
.td-res-stage small { display: block; font: 700 .82em/1.5 var(--td-body); color: var(--mute); }
.td-res-score { width: 100%; padding: 3cqw 4cqw 3.4cqw; }
.td-res-score small { font: 800 clamp(12px, 3cqw, 15px)/1 var(--td-disp); letter-spacing: .24em; color: var(--mute); }
.td-res-score > b { display: block; margin-top: .1em; font: 900 clamp(40px, 14cqw, 74px)/1 var(--td-disp); font-variant-numeric: tabular-nums; color: var(--ink); }
.td-res-best { margin: .5em 0 0; font: 800 clamp(12px, 3.2cqw, 15px)/1.3 var(--td-disp); color: var(--mute); }
.td-res-record { position: absolute; right: -1cqw; top: -3cqw; margin: 0; font: 900 clamp(12px, 3.6cqw, 18px)/1 var(--td-disp); font-style: italic; color: #fff; background: linear-gradient(90deg, var(--red), #FF8A3D); padding: .45em .9em; border-radius: 999px; transform: rotate(6deg); box-shadow: 0 3px 0 var(--red-d); animation: tdPop .6s cubic-bezier(.34, 1.56, .64, 1) 1.1s backwards; }
.td-res-missions { width: 100%; }
.td-res-missions li { background: #fff; box-shadow: 0 3px 0 var(--plastic-d); }
.td-res-missions li .td-star { transition: transform .3s; }
.td-res-missions li.pop .td-star { animation: tdStar .55s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes tdStar { 0% { transform: scale(0) rotate(-120deg); } 70% { transform: scale(1.5) rotate(10deg); } 100% { transform: scale(1); } }
.td-res-stats { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; }
.td-res-stats div { background: #fff; border-radius: 12px; padding: 1.8cqw 1cqw; box-shadow: 0 3px 0 var(--plastic-d); min-width: 0; }
.td-res-stats small { display: block; font: 800 clamp(12px, 2.6cqw, 12px)/1.2 var(--td-body); color: var(--mute); }
.td-res-stats b { display: block; margin-top: .3em; font: 900 clamp(14px, 4.6cqw, 22px)/1 var(--td-disp); font-variant-numeric: tabular-nums; }
.td-res-unlock { width: 100%; margin: 0; padding: .8em 1em; border-radius: 14px; background: linear-gradient(90deg, #FFF4D6, #E2F7EC); font: 900 clamp(12px, 3.6cqw, 17px)/1.5 var(--td-body); box-shadow: 0 3px 0 var(--plastic-d); word-break: keep-all; overflow-wrap: anywhere; }
.td-res-btns-top { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1cqw; }
.td-res-btns-top > .td-btn { min-width: 80cqw; }
.td-res-btns-top .td-row { flex-wrap: nowrap; gap: 2cqw; width: 100%; }
.td-res-btns-top .td-row .td-btn { flex: 1; padding-left: .3em; padding-right: .3em; font-size: clamp(12px, 3.6cqw, 17px); }
.td-res-match { width: 100%; padding: 3.6cqw 4cqw; text-align: left; }
.td-res-lead { margin: 0 0 1.6cqw; font: 800 clamp(12px, 3.6cqw, 17px)/1.4 var(--td-body); color: var(--mute); }
.td-res-job { display: flex; align-items: center; gap: 3cqw; }
.td-res-job img { width: 24cqw; height: 24cqw; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 max(3px, .9cqw) var(--c, var(--red)); flex: none; }
.td-res-job > div { min-width: 0; }
.td-res-type { margin: 0 0 .35em; font: 900 clamp(12px, 3.2cqw, 15px)/1.3 var(--td-body); letter-spacing: .04em; color: var(--c, var(--red)); }
.td-res-name { margin: 0; font: 900 clamp(18px, 5.6cqw, 28px)/1.25 var(--td-body); word-break: keep-all; overflow-wrap: anywhere; }
.td-res-reason { margin: 2.6cqw 0 0; padding: .7em .9em; border-radius: 12px; background: #FFF4D6; font: 900 clamp(13px, 3.8cqw, 18px)/1.6 var(--td-body); word-break: keep-all; overflow-wrap: anywhere; }
.td-res-desc { margin: 2cqw 0; font: 700 clamp(13px, 3.6cqw, 17px)/1.75 var(--td-body); }
.td-res-cap { margin: 0 0 1.2cqw; font: 800 clamp(12px, 3cqw, 14px)/1.3 var(--td-body); color: var(--mute); }
.td-res-bars { display: flex; flex-direction: column; gap: 1.2cqw; }
.td-res-bar { display: grid; grid-template-columns: 9.2em 1fr 3.2em; align-items: center; gap: .7em; font: 800 clamp(12px, 3cqw, 14px)/1 var(--td-body); }
.td-res-bar i { height: 1.1em; background: #EDF0F5; border-radius: 999px; overflow: hidden; }
.td-res-bar em { display: block; height: 100%; border-radius: inherit; width: 0; transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.td-res-bar span:last-child { text-align: right; font-family: var(--td-disp); }
.td-res-small { margin: 2cqw 0 0; font: 700 clamp(12px, 2.8cqw, 13.5px)/1.6 var(--td-body); color: var(--mute); }
.td-res-links { display: flex; flex-direction: column; gap: 2.6cqw; align-items: center; padding: 1cqw 0 5cqw; width: 100%; }
.td-res-links .td-btn { min-width: 76cqw; }

/* ───── 画面の切り替え（ブロックの柱が落ちて開く） ───── */
.td-wipe { position: absolute; inset: 0; display: flex; pointer-events: none; z-index: 50; }
.td-wipe i {
    flex: 1; height: 100%; transform: translateY(-104%);
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .5) 0 24%, rgba(0, 0, 0, .08) 25% 30%, transparent 31%) center top / 100% 16.6cqw, var(--c);
    box-shadow: inset -3px 0 0 rgba(0, 0, 0, .08);
}
.td-wipe i:nth-child(1) { --c: var(--red); } .td-wipe i:nth-child(2) { --c: var(--blue); } .td-wipe i:nth-child(3) { --c: var(--yellow); }
.td-wipe i:nth-child(4) { --c: var(--green); } .td-wipe i:nth-child(5) { --c: var(--violet); } .td-wipe i:nth-child(6) { --c: #fff; }
.td-wipe.in { pointer-events: auto; }
.td-wipe.in i { animation: tdWipeIn .3s cubic-bezier(.5, 0, .75, 0) forwards; }
.td-wipe.out i { transform: translateY(0); animation: tdWipeOut .34s cubic-bezier(.25, 1, .5, 1) forwards; }
.td-wipe i:nth-child(2) { animation-delay: .03s !important; } .td-wipe i:nth-child(3) { animation-delay: .06s !important; }
.td-wipe i:nth-child(4) { animation-delay: .09s !important; } .td-wipe i:nth-child(5) { animation-delay: .12s !important; } .td-wipe i:nth-child(6) { animation-delay: .15s !important; }
@keyframes tdWipeIn { to { transform: translateY(0); } }
@keyframes tdWipeOut { to { transform: translateY(104%); } }

.td-loading { position: absolute; inset: 0; z-index: 60; display: grid; place-content: center; gap: 4cqw; justify-items: center; background: var(--cream); font: 800 clamp(12px, 3cqw, 15px)/1 var(--td-disp); letter-spacing: .3em; transition: opacity .4s; }
.td-loading-bricks { display: flex; gap: 2cqw; }
.td-loading-bricks i { width: 8cqw; height: 8cqw; border-radius: 1.6cqw; background: var(--c); box-shadow: 0 1cqw 0 rgba(0, 0, 0, .16); animation: tdBounce .6s ease-in-out infinite alternate; }
.td-loading-bricks i:nth-child(1) { --c: var(--red); } .td-loading-bricks i:nth-child(2) { --c: var(--blue); animation-delay: .1s; }
.td-loading-bricks i:nth-child(3) { --c: var(--yellow); animation-delay: .2s; } .td-loading-bricks i:nth-child(4) { --c: var(--green); animation-delay: .3s; }
@keyframes tdBounce { to { transform: translateY(-4cqw); } }
.td-loading.off { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    .td-title-logo, .td-title-panel .td-btn-big, .td-title-crew img, .td-st.next-up { animation: none; }
}

/* ───────── PROJECT FIT（ここから下は PROJECT FIT だけの見た目） ───────── */
.fp-logo .td-logo-row1 { gap: 1cqw; }
.fp-logo .td-logo-row1 i { width: 11.6cqw; height: 11.6cqw; font-size: 8.6cqw; border-radius: 1.8cqw; }
.fp-logo .td-logo-row2 i { width: 22cqw; height: 22cqw; font-size: 16cqw; border-radius: 3.4cqw; }
.fp-logo .td-logo-row1 i:nth-child(5) { animation-delay: .33s; transform: rotate(-3deg); }
.fp-logo .td-logo-row1 i:nth-child(6) { animation-delay: .4s; transform: rotate(2deg); }
.fp-logo .td-logo-row1 i:nth-child(7) { animation-delay: .47s; transform: rotate(-2deg); }
.fp-logo .td-logo-row2 i:nth-child(1) { animation-delay: .6s; }
.fp-logo .td-logo-row2 i:nth-child(2) { animation-delay: .68s; }
.fp-logo .td-logo-row2 i:nth-child(3) { animation-delay: .76s; }
.fp-dock { justify-content: center; gap: 7cqw; }
.fp-dock .td-key { width: 17cqw; }
.td-key-hint svg { background: radial-gradient(circle at 42% 34%, var(--yellow-l), var(--yellow) 72%); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .1), 0 1.2cqw 0 var(--yellow-d), 0 2cqw 3cqw rgba(255, 194, 60, .3); stroke: #fff; }
.td-key-hint.on svg, .td-key-hint:active svg { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .1), 0 .2cqw 0 var(--yellow-d); }
.td-key.off svg { opacity: .45; }
.fp-gallery { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6cqw; }
.fp-art { display: flex; flex-direction: column; align-items: center; gap: 1cqw; padding: 2.6cqw 1.6cqw 2.2cqw; text-align: center; }
.fp-art img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #FFFDF6; border-radius: 2cqw; box-shadow: inset 0 0 0 .5cqw #FFC23C; }
.fp-art b { font: 900 clamp(12px, 3cqw, 15px)/1.3 var(--td-body); }
.fp-art span { font: 900 clamp(12px, 3cqw, 15px)/1 var(--td-body); color: #E8A400; letter-spacing: .1em; }
.fp-art.locked img { box-shadow: inset 0 0 0 .5cqw #D3D8E2; opacity: .7; }
.fp-art.locked span { color: var(--mute); letter-spacing: 0; font-size: clamp(12px, 2.6cqw, 13px); }

/* 縦の短い画面のチュートリアル: 顔を外した小さな吹き出し（上のパネルも盤面も隠さない） */
.td-tut.td-tut-compact .td-tut-face { display: none; }
.td-tut.td-tut-compact .td-tut-box { padding: 1.8cqw 2.6cqw 1.6cqw; }
.td-tut.td-tut-compact .td-tut-btns { margin-top: .8cqw; }
.td-tut.td-tut-compact .td-tut-text { word-break: normal; overflow-wrap: normal; line-break: strict; }

/* ブロック玩具のポッチ（円柱の突起）に見える飾りを出さない: ボタンの上の列・題字の上・画面切り替えの柱の丸 */
.td-btn::before, .td-btn-big::before, .td-logo-text i::before { content: none; }
.td-wipe i { background: var(--c); }

/* 大きな英字（STAGE CLEAR! など）。文字の画像をやめてコードで描く: 1字ずつ赤・青・黄・緑、白い太フチ、下向きの厚み、明るいグラデーション */
.fw-word {
    margin: 0; display: flex; flex-direction: column; align-items: center; gap: .02em;
    font: 900 clamp(30px, 11cqw, 58px)/.98 var(--td-disp); letter-spacing: .02em;
    filter: drop-shadow(0 .08em .1em rgba(38, 40, 51, .22));
}
.fw-word > span { display: flex; }
.fw-word i {
    position: relative; display: inline-block; font-style: normal; color: var(--c);
    -webkit-text-stroke: .2em #fff; paint-order: stroke fill;
    text-shadow: 0 .03em 0 var(--cd), 0 .06em 0 var(--cd), 0 .09em 0 var(--cd), 0 .11em 0 #fff, 0 .13em 0 #fff;
}
.fw-word i::after {
    content: attr(data-l); position: absolute; inset: 0;
    color: transparent; -webkit-text-stroke: 0; text-shadow: none;
    background: linear-gradient(180deg, var(--cl) 12%, var(--c) 62%); -webkit-background-clip: text; background-clip: text;
}
.fw-word.mini { font-size: clamp(13px, 5cqw, 26px); }
.td-res-head .fw-word { animation: tdPop .6s cubic-bezier(.34, 1.56, .64, 1); }