/* TAP TAP STUDIO 作り込み版 — おもちゃのミニチュアジオラマ調（赤・金・クリーム・ティール・キャンディピンク） */
:root {
    --ink: #2A2433;
    --mute: #6A6273;
    --cream: #FFF6E6;
    --cream2: #FFEBC8;
    --red: #E63946;
    --red-d: #B8141F;
    --gold: #FFC23C;
    --gold-d: #C98A00;
    --teal: #1FB7AA;
    --teal-d: #11857B;
    --pink: #FF7EB6;
    --blue: #2F9BFF;
    --violet: #8B5CF6;
    --disp: "Fredoka", "M PLUS Rounded 1c", sans-serif;
    --body: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
    /* ゲーム中の区切り（game.js の REGION_PLAY と合わせる） */
    --hud-h: 21%;
    --shop-top: 58%;
}
* { 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;
}
button { font: inherit; color: inherit; }
.tt-backdrop {
    position: fixed; inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 126, 182, .12) 0 8%, transparent 9%) 0 0 / 120px 120px,
        radial-gradient(circle at 70% 70%, rgba(31, 183, 170, .1) 0 6%, transparent 7%) 0 0 / 120px 120px,
        linear-gradient(160deg, #FFF3D6, #FFE3EE 50%, #E3F7F4);
}
.tt-stage {
    position: fixed; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    background: var(--cream);
    border-radius: 24px;
    box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--red), 0 30px 80px rgba(42, 36, 51, .28);
    container-type: size;
}
.tt-stage.tt-full { border-radius: 0; box-shadow: none; }
.tt-stage [hidden] { display: none !important; }
.tt-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer; }

/* ───── ゲーム調の文字（金の面・赤いフチ・クリームの外フチ・ティールの影） ───── */
.tt-deco {
    position: relative; display: inline-block;
    font: 700 1em/1.05 var(--disp); letter-spacing: .02em; white-space: nowrap;
    color: var(--cream); -webkit-text-stroke: .36em var(--cream);
    text-shadow: 0 .14em 0 var(--teal-d), 0 .24em .3em rgba(42, 36, 51, .22);
    padding: 0 .14em;
}
.tt-deco::before, .tt-deco::after { content: attr(data-text); position: absolute; left: 0; top: 0; padding: 0 .14em; text-shadow: none; }
.tt-deco::before { color: var(--red-d); -webkit-text-stroke: .2em var(--red-d); }
.tt-deco::after {
    -webkit-text-stroke: 0; color: transparent;
    background-image: linear-gradient(180deg, #FFF9D2 0%, #FFE07A 30%, #FFC23C 55%, #FF9A2E 100%);
    -webkit-background-clip: text; background-clip: text;
}

/* ───── 共通の画面・ボタン ───── */
.tt-screen {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2.6cqw;
    padding: max(4cqw, env(safe-area-inset-top)) 5cqw max(4cqw, env(safe-area-inset-bottom));
    text-align: center;
}
.tt-sheet {
    justify-content: flex-start; overflow-y: auto; touch-action: pan-y;
    background:
        radial-gradient(circle, rgba(255, 194, 60, .22) 0 2px, transparent 3px) 0 0 / 22px 22px,
        rgba(255, 246, 230, .97);
    padding-top: max(4cqw, env(safe-area-inset-top));
    animation: ttSheetIn .35s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes ttSheetIn { from { opacity: 0; transform: translateY(4cqh) scale(.98); } to { opacity: 1; transform: none; } }
.tt-btn {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .1em;
    min-height: 44px;
    cursor: pointer; text-decoration: none;
    border-radius: 999px;
    padding: .78em 2.1em .82em;
    font: 900 clamp(14px, 4.4cqw, 22px)/1.15 var(--body);
    letter-spacing: .05em; word-break: keep-all;
    border: 3px solid var(--ink);
    transition: transform .1s;
}
.tt-btn:active { transform: translateY(.18em) scale(.97); }
.tt-btn-main {
    color: #fff;
    background: linear-gradient(180deg, #FF7A84 0%, var(--red) 55%, #D62839 100%);
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, .5), 0 .3em 0 var(--ink), 0 .7em 1.4em rgba(230, 57, 70, .3);
    text-shadow: 0 2px 0 var(--red-d);
}
.tt-btn-sub { color: var(--ink); background: linear-gradient(180deg, #fff, var(--cream2)); box-shadow: inset 0 3px 0 #fff, 0 .26em 0 var(--ink); }
.tt-btn-teal { color: #fff; background: linear-gradient(180deg, #5FE0D3, var(--teal) 60%, var(--teal-d)); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), 0 .26em 0 var(--ink); text-shadow: 0 2px 0 var(--teal-d); }
.tt-btn-s { font-size: clamp(12px, 3.5cqw, 17px); padding: .55em 1.2em .6em; }
.tt-row { display: flex; gap: 2.4cqw; justify-content: center; flex-wrap: wrap; }
.tt-link { color: var(--ink); font: 800 clamp(12px, 3.4cqw, 15px)/1 var(--body); min-height: 44px; display: inline-flex; align-items: center; }
.tt-link-btn { background: none; border: 0; padding: .4em .8em; text-decoration: underline; cursor: pointer; }
.tt-note { margin: 0; font: 700 clamp(11px, 2.9cqw, 14px)/1.6 var(--body); color: var(--mute); word-break: keep-all; }
.tt-topbar { width: 100%; display: flex; align-items: center; gap: 2.4cqw; }
.tt-back {
    flex: none; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
    border: 3px solid var(--ink); background: #fff; box-shadow: 0 3px 0 var(--ink);
    font: 700 26px/1 var(--disp); padding-bottom: 4px;
}
.tt-screen-title { flex: 1; margin: 0; text-align: left; font: 900 clamp(18px, 5.6cqw, 28px)/1.2 var(--body); }
.tt-know { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; background: #fff; border: 2.5px solid var(--ink); border-radius: 14px; padding: .35em .7em; box-shadow: 0 3px 0 var(--ink); }
.tt-know b { font: 700 clamp(16px, 5cqw, 24px)/1 var(--disp); color: var(--teal-d); }
.tt-know small { font: 800 clamp(9px, 2.4cqw, 12px)/1.2 var(--body); color: var(--mute); }
.tt-lead { margin: 0; font: 700 clamp(12px, 3.4cqw, 16px)/1.6 var(--body); color: #4A4255; text-align: left; width: 100%; }

/* ───── ゲーム中の表示 ───── */
.tt-hud {
    position: absolute; left: 0; right: 0; top: 0; height: var(--hud-h);
    display: flex; flex-direction: column; align-items: center;
    padding: max(2cqw, env(safe-area-inset-top)) 2.6cqw 0;
    pointer-events: none;
    font-size: min(3.3cqw, 1.9cqh);
}
.tt-hud-row { width: 100%; display: flex; align-items: center; gap: 1.6cqw; }
.tt-icon {
    pointer-events: auto; cursor: pointer; flex: none;
    width: max(44px, 2.8em); height: max(44px, 2.8em); border-radius: 50%;
    border: 3px solid var(--ink); background: #fff; box-shadow: 0 3px 0 var(--ink);
    font: 700 1.05em/1 var(--disp);
}
.tt-icon.off { color: #B0A9B8; text-decoration: line-through; }
.tt-chip {
    display: flex; flex-direction: column; align-items: flex-start; gap: .15em; line-height: 1;
    background: rgba(255, 255, 255, .94); border: 2.5px solid var(--ink); border-radius: 14px;
    padding: .38em .75em .42em; box-shadow: 0 3px 0 var(--ink); white-space: nowrap; min-width: 0;
}
.tt-chip small { font: 800 .7em/1 var(--body); color: var(--red-d); letter-spacing: .06em; }
.tt-chip b { font: 700 1.08em/1 var(--disp); font-variant-numeric: tabular-nums; }
.tt-chip-ch { overflow: hidden; }
.tt-chip-ch b { font: 900 1em/1.1 var(--body); overflow: hidden; text-overflow: ellipsis; max-width: 40cqw; }
.tt-grow { flex: 1; }
.tt-points { margin-top: .3em; display: flex; flex-direction: column; align-items: center; }
.tt-points small { font: 900 .82em/1 var(--body); letter-spacing: .14em; background: var(--ink); color: #fff; border-radius: 999px; padding: .35em 1em; }
.tt-points b {
    margin: .02em 0 0;
    font: 700 min(12.5cqw, 6.2cqh)/1.05 var(--disp); font-variant-numeric: tabular-nums;
    color: #FFE06B;
    -webkit-text-stroke: .14em var(--red-d); paint-order: stroke fill;
    text-shadow: 0 .06em 0 var(--red-d), 0 .1em 0 #fff, 0 .14em .2em rgba(42, 36, 51, .25);
}
.tt-points span {
    font: 700 1em/1 var(--disp);
    background: var(--teal); color: #fff; border: 2.5px solid var(--ink); border-radius: 999px;
    padding: .3em .95em .32em; box-shadow: 0 .16em 0 var(--ink);
}
.tt-fever { margin-top: .5em; width: 78%; display: flex; align-items: center; gap: .6em; }
.tt-fever-label { font: 700 .9em/1 var(--disp); color: var(--pink); -webkit-text-stroke: .18em #fff; paint-order: stroke fill; letter-spacing: .06em; }
.tt-fever i { flex: 1; height: .9em; background: rgba(255, 255, 255, .8); border: 2.5px solid var(--ink); border-radius: 999px; overflow: hidden; }
.tt-fever em { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--pink)); }
.tt-fever.on em { background: repeating-linear-gradient(90deg, var(--pink) 0 10px, #FFD1E6 10px 20px); animation: ttStripe .4s linear infinite; }
.tt-fever.on .tt-fever-label { color: #fff; -webkit-text-stroke: .18em var(--pink); animation: ttBeat .3s ease-in-out infinite alternate; }
@keyframes ttStripe { to { background-position: 20px 0; } }
@keyframes ttBeat { to { transform: scale(1.15); } }
.tt-combo { min-width: 4.6em; font: 700 1em/1 var(--disp); color: var(--red); text-align: left; -webkit-text-stroke: .16em #fff; paint-order: stroke fill; }
.tt-combo.pop { animation: ttCombo .18s ease-out; }
@keyframes ttCombo { from { transform: scale(1.5); } }
.tt-buffs {
    position: absolute; left: 2.6cqw; top: calc(var(--hud-h) + 1cqw);
    display: flex; flex-direction: column; align-items: flex-start; gap: 1cqw; pointer-events: none;
    font-size: min(3cqw, 1.7cqh);
}
.tt-buff { font: 900 1em/1 var(--body); color: #fff; border: 2.5px solid var(--ink); border-radius: 999px; padding: .4em .8em; box-shadow: 0 2px 0 var(--ink); animation: ttPop .35s cubic-bezier(.34, 1.56, .64, 1); }
.tt-buff b { font-family: var(--disp); margin-left: .3em; }
.tt-goal {
    position: absolute; left: 2.6cqw; right: 2.6cqw; bottom: calc(100% - var(--shop-top) + 1.6cqw);
    display: flex; flex-direction: column; align-items: stretch; gap: 1.2cqw;
    font-size: min(3.2cqw, 1.8cqh);
}
.tt-goal-info { background: rgba(255, 255, 255, .94); border: 2.5px solid var(--ink); border-radius: 14px; padding: .5em .8em .6em; box-shadow: 0 3px 0 var(--ink); pointer-events: none; }
.tt-goal-info p { margin: 0 0 .35em; display: flex; justify-content: space-between; gap: .5em; font: 800 1em/1.2 var(--body); }
.tt-goal-info p b { font: 700 1em/1.2 var(--disp); white-space: nowrap; }
.tt-goal-info p b.ok { color: var(--teal-d); }
.tt-goal-info i { display: block; height: .75em; background: rgba(42, 36, 51, .1); border-radius: 999px; overflow: hidden; }
.tt-goal-info em { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--red)); transition: width .2s; }
.tt-btn-boss {
    font-size: min(4.2cqw, 2.4cqh); padding: .45em 1em .5em; color: #fff;
    background: linear-gradient(180deg, #FFD86B, var(--gold) 45%, #F29A13); border-color: var(--ink);
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, .6), 0 .26em 0 var(--ink), 0 0 0 .3em rgba(255, 255, 255, .7);
    text-shadow: 0 2px 0 #B66A00; animation: ttPulse 1s ease-in-out infinite;
}
.tt-btn-boss small { font: 900 .78em/1 var(--body); }
.tt-btn-boss b { font: 900 1em/1.2 var(--body); }
.tt-btn-boss.cool { animation: none; filter: saturate(.4) brightness(1.05); }
@keyframes ttPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.tt-boss {
    position: absolute; left: 2.6cqw; right: 2.6cqw; top: calc(var(--hud-h) + .6cqw);
    background: #fff; border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 4px 0 var(--ink);
    padding: .5em .8em .55em; pointer-events: none; font-size: min(3.2cqw, 1.8cqh);
    animation: ttPop .4s cubic-bezier(.34, 1.56, .64, 1);
}
.tt-boss::before { content: ""; position: absolute; left: 10px; right: 10px; top: -8px; height: 10px; background: radial-gradient(circle, #FFF2A8 0 35%, var(--gold) 36% 55%, transparent 58%) 0 0 / 16px 10px repeat-x; }
.tt-boss-top { display: flex; align-items: center; gap: .6em; text-align: left; }
.tt-boss-top div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15em; }
.tt-boss-top small { font: 800 .78em/1.1 var(--body); color: var(--mute); }
.tt-boss-top b { font: 900 1.05em/1.2 var(--body); }
.tt-boss-time { flex: none; min-width: 2.4em; text-align: center; font: 700 1.6em/1 var(--disp); color: #fff; background: var(--red); border: 2.5px solid var(--ink); border-radius: 12px; padding: .15em .3em; }
.tt-boss-time.hurry { animation: ttBeat .25s ease-in-out infinite alternate; }
.tt-boss-bar { margin-top: .45em; display: flex; align-items: center; gap: .5em; }
.tt-boss-bar i { position: relative; flex: 1; height: 1.1em; background: rgba(42, 36, 51, .1); border: 2.5px solid var(--ink); border-radius: 999px; overflow: hidden; }
.tt-boss-bar em { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: repeating-linear-gradient(135deg, var(--teal) 0 10px, #4FD8CB 10px 20px); }
.tt-boss-bar u { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-right: 3px dashed rgba(42, 36, 51, .5); }
.tt-boss-bar span { font: 700 1.1em/1 var(--disp); min-width: 3em; text-align: right; }
.tt-boss-phases { display: flex; gap: .4em; margin-top: .4em; }
.tt-boss-phases span { flex: 1; font: 900 .78em/1 var(--body); padding: .35em .2em; border-radius: 999px; background: #EEE8F2; color: var(--mute); }
.tt-boss-phases span.on { background: var(--gold); color: var(--ink); }
.tt-boss-phases span.done { background: var(--teal); color: #fff; }
.tt-boss-tip { margin: .4em 0 0; font: 700 .78em/1.3 var(--body); color: var(--red-d); }
.tt-tapcue {
    position: absolute; left: 50%; top: 38%;
    display: flex; flex-direction: column; align-items: center;
    pointer-events: none; animation: ttCue 1s ease-in-out infinite;
}
.tt-tapcue-hand { display: block; width: 18cqw; height: 18cqw; }
.tt-tapcue-hand img, .tt-tapcue-hand svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 .6cqw .8cqw rgba(42, 36, 51, .3)); }
.tt-tapcue b { font: 700 clamp(18px, 6cqw, 30px)/1 var(--disp); color: #fff; -webkit-text-stroke: .2em var(--red); paint-order: stroke fill; }
@keyframes ttCue { 0%, 100% { transform: translate(-50%, 0) scale(1); } 50% { transform: translate(-50%, -2cqw) scale(1.06); } }
.tt-hint {
    position: absolute; left: 2.6cqw; right: 2.6cqw; bottom: calc(100% - var(--shop-top) + 15cqw);
    display: flex; align-items: center; gap: 2cqw; pointer-events: none;
    font-size: min(3.4cqw, 1.95cqh);
    animation: ttPop .4s cubic-bezier(.34, 1.56, .64, 1);
}
.tt-hint-face { flex: none; width: 15cqw; height: 15cqw; border-radius: 50%; border: 3px solid var(--ink); background: var(--gold) center / cover; overflow: hidden; box-shadow: 0 3px 0 var(--ink); }
.tt-hint-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 4%; display: block; }
.tt-hint p { position: relative; flex: 1; margin: 0; background: #fff; border: 3px solid var(--ink); border-radius: 16px; padding: .6em .85em; box-shadow: 0 3px 0 var(--ink); font: 800 1em/1.5 var(--body); text-align: left; }
.tt-hint p::before { content: ""; position: absolute; left: -11px; top: 50%; width: 14px; height: 14px; background: #fff; border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: translateY(-50%) rotate(45deg); }
.tt-hint p b { color: var(--red); }
.tt-glow { position: relative; z-index: 2; animation: ttGlow .8s ease-in-out infinite alternate; }
@keyframes ttGlow { from { box-shadow: 0 0 0 3px var(--gold), 0 .22em 0 var(--ink); } to { box-shadow: 0 0 0 6px var(--pink), 0 .22em 0 var(--ink); } }

/* ───── お店 ───── */
.tt-shop {
    position: absolute; left: 0; right: 0; top: var(--shop-top); bottom: 0;
    display: flex; flex-direction: column; gap: .9cqh;
    background: linear-gradient(180deg, #fff, var(--cream) 30%);
    border-top: 3px solid var(--ink);
    border-radius: 24px 24px 0 0;
    padding: 1.2cqh 2.6cqw max(1.2cqh, env(safe-area-inset-bottom));
    box-shadow: 0 -10px 30px rgba(42, 36, 51, .12);
}
.tt-shop::before { content: ""; position: absolute; left: 22px; right: 22px; top: -9px; height: 12px; background: radial-gradient(circle, #FFF2A8 0 35%, var(--gold) 36% 55%, transparent 58%) 0 0 / 18px 12px repeat-x; }
.tt-tabs { display: flex; gap: 2cqw; flex: none; }
.tt-tab {
    flex: 1; position: relative; cursor: pointer; min-height: 36px;
    border: 2.5px solid var(--ink); border-radius: 999px;
    background: #fff; padding: .45em .4em .5em;
    font: 900 min(3.7cqw, 2.1cqh)/1.1 var(--body); letter-spacing: .04em;
}
.tt-tab.on { background: var(--red); color: #fff; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35); }
.tt-dot { position: absolute; top: -.3em; right: .7em; width: .85em; height: .85em; border-radius: 50%; background: var(--pink); border: 2px solid #fff; animation: ttBeat .5s ease-in-out infinite alternate; }
.tt-seat { margin: 0; flex: none; font: 800 min(2.9cqw, 1.65cqh)/1.2 var(--body); color: var(--mute); text-align: center; }
.tt-seat b { font-family: var(--disp); color: var(--ink); }
.tt-seat.full { color: var(--red-d); }
.tt-list { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .8cqh; overflow-y: auto; touch-action: pan-y; padding: 0 .4cqw .6cqh; }
.tt-crew {
    flex: 1 1 0; min-height: 46px; max-height: 24cqw;
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.8cqw;
    background: #fff; border: 2.5px solid var(--ink); border-radius: 18px;
    box-shadow: 0 .2em 0 var(--ink);
    padding: .25em 1.2cqw .25em 1.4cqw;
    font-size: min(3.25cqw, 1.62cqh);
}
.tt-crew.got { animation: ttGot .45s ease-out; }
@keyframes ttGot { 0% { background: #FFF4C9; transform: scale(1.03); } 100% { background: #fff; transform: scale(1); } }
.tt-face {
    position: relative; flex: none;
    width: min(12.5cqw, 6.6cqh); aspect-ratio: 1;
    border-radius: 50%; border: 3px solid var(--c);
    background: radial-gradient(circle at 50% 35%, #fff, var(--t));
    overflow: visible;
}
.tt-face > img { position: absolute; inset: 3%; width: 94%; height: 94%; border-radius: 50%; object-fit: cover; }
.tt-face > img.fig { inset: 3%; width: 94%; height: 94%; border-radius: 50%; object-fit: cover; object-position: 50% 3%; }
.tt-face .tt-stars { position: absolute; left: 50%; bottom: -.55em; transform: translateX(-50%); font: 700 .78em/1 var(--disp); color: var(--gold); -webkit-text-stroke: .2em var(--ink); paint-order: stroke fill; white-space: nowrap; letter-spacing: -.08em; }
.tt-ctxt { min-width: 0; display: flex; flex-direction: column; gap: .12em; text-align: left; }
.tt-ctxt b { font: 900 1.08em/1.1 var(--body); word-break: keep-all; overflow-wrap: anywhere; }
.tt-ctxt small { font: 700 .82em/1.2 var(--body); color: var(--mute); }
.tt-ranks { display: flex; gap: .3em; flex-wrap: wrap; }
.tt-ranks span { font: 700 .8em/1 var(--disp); padding: .18em .4em; border-radius: 999px; background: #F2ECF5; color: var(--mute); }
.tt-ranks span.has { background: var(--c); color: #fff; }
.tt-ctxt em { font: 700 .86em/1.05 var(--disp); font-style: normal; color: var(--cd); }
.tt-acts { display: flex; gap: 1.2cqw; }
.tt-act {
    min-width: 4.9em; min-height: 44px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .12em;
    border: 2.5px solid var(--ink); border-radius: 14px; padding: .3em .4em;
    font: 900 .82em/1.05 var(--body); color: #fff;
    background: linear-gradient(180deg, #FF7A84, var(--red) 60%, #D62839); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 .2em 0 var(--ink);
    transition: transform .08s;
}
.tt-act b { font: 700 1.15em/1 var(--disp); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tt-act i { font: 700 .9em/1 var(--disp); font-style: normal; color: #FFE680; }
.tt-act.promo { background: linear-gradient(180deg, #5FE0D3, var(--teal) 60%, var(--teal-d)); }
.tt-act:active { transform: translateY(.12em); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 .08em 0 var(--ink); }
.tt-act.cant { background: #EEEAF1; color: #9C95A5; box-shadow: 0 .2em 0 #C9C3CF; border-color: #B9B2C0; }
.tt-act.cant i { color: #B8B0BF; }
.tt-act.full { background: #FFE3E6; color: var(--red-d); box-shadow: 0 .2em 0 #F3B7BD; border-color: #E8A0A8; }
.tt-act.no, .tt-node.no, .tt-chcard.no, .tt-res-card.no, .tt-btn.no { animation: ttNo .3s; }
@keyframes ttNo { 25% { transform: translateX(-1.2cqw); } 75% { transform: translateX(1.2cqw); } }
.tt-tree { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .7cqh; overflow-y: auto; touch-action: pan-y; }
.tt-tree-info { margin: 0; min-height: 2.6em; font: 800 min(2.9cqw, 1.65cqh)/1.3 var(--body); background: #fff; border: 2px dashed rgba(42, 36, 51, .3); border-radius: 12px; padding: .4em .7em; text-align: left; display: flex; align-items: center; }
.tt-tree-grid { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto repeat(3, minmax(44px, 1fr)); gap: .6cqh 1.4cqw; min-height: 0; }
.tt-tree-col { font: 900 min(2.7cqw, 1.5cqh)/1 var(--body); color: #fff; background: var(--c); border: 2px solid var(--ink); border-radius: 999px; padding: .3em .2em; text-align: center; }
.tt-node {
    position: relative; cursor: pointer; min-height: 44px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1em;
    background: #fff; border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: 0 .18em 0 var(--ink);
    padding: .2em .1em; font-size: min(2.6cqw, 1.45cqh);
}
.tt-node::before { content: ""; position: absolute; left: 50%; top: -.8cqh; height: .8cqh; border-left: 3px solid var(--ink); }
.tt-node.t1::before { display: none; }
.tt-node .ico { width: 3.2em; height: 3.2em; flex: none; display: grid; place-items: center; }
.tt-node .ico img, .tt-node .ico svg { width: 100%; height: 100%; object-fit: contain; }
.tt-node b { font: 900 .92em/1.1 var(--body); word-break: keep-all; overflow-wrap: anywhere; text-align: center; }
.tt-node .st { font: 700 .95em/1 var(--disp); color: var(--red-d); }
.tt-node.ok { background: #FFF4D2; }
.tt-node.ok .st { color: #fff; background: var(--red); border-radius: 999px; padding: .15em .4em; }
.tt-node.done { background: #DDF7F3; border-color: var(--teal-d); }
.tt-node.done .st { color: var(--teal-d); }
.tt-node b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tt-node.lock { opacity: .55; }
.tt-node.lock .ico { filter: grayscale(1); }
.tt-node.got { animation: ttGot .45s ease-out; }

/* ───── 告知・トースト ───── */
.tt-banner {
    position: absolute; left: 0; right: 0; top: 30%;
    display: flex; flex-direction: column; align-items: center; gap: 1.6cqw;
    pointer-events: none; text-align: center; z-index: 5;
    animation: ttBanner 2s ease-in-out forwards;
}
.tt-banner-img img { display: block; width: 74cqw; height: auto; filter: drop-shadow(0 1cqw 1.2cqw rgba(42, 36, 51, .25)); }
.tt-banner .tt-deco { font-size: clamp(28px, 10cqw, 54px); }
.tt-banner .tt-deco.long { font-size: clamp(22px, 7.4cqw, 40px); }
.tt-banner small {
    font: 900 clamp(13px, 4cqw, 20px)/1.4 var(--body);
    background: #fff; border: 3px solid var(--ink); border-radius: 999px;
    padding: .35em 1.1em .4em; box-shadow: 0 3px 0 var(--ink);
    max-width: 92cqw; word-break: keep-all;
}
.tt-banner small:empty { display: none; }
@keyframes ttBanner {
    0% { opacity: 0; transform: scale(.4) rotate(-6deg); }
    14% { opacity: 1; transform: scale(1.1) rotate(2deg); }
    22% { transform: scale(1) rotate(0); }
    82% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.05) translateY(-3cqw); }
}
@keyframes ttPop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.tt-toasts { position: absolute; left: 0; right: 0; bottom: max(3cqw, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 1cqw; pointer-events: none; z-index: 9; }
.tt-toast {
    display: flex; align-items: center; gap: .6em;
    background: var(--ink); color: #fff; border: 3px solid var(--gold); border-radius: 999px;
    padding: .5em 1.1em; font: 800 clamp(12px, 3.4cqw, 16px)/1.3 var(--body);
    animation: ttToast 3.2s ease-in-out forwards; max-width: 92cqw;
}
.tt-toast b { color: var(--gold); }
.tt-toast small { font: 700 .82em/1 var(--disp); color: #9FF0E8; }
@keyframes ttToast { 0% { opacity: 0; transform: translateY(-4cqw); } 10%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-2cqw); } }

/* ───── タイトル ───── */
.tt-title {
    justify-content: space-between; gap: 1.6cqw;
    padding-top: max(11cqw, env(safe-area-inset-top));
    background: linear-gradient(180deg, rgba(255, 246, 230, 0) 62%, rgba(255, 246, 230, .9) 72%, rgba(255, 246, 230, .98));
}
.tt-logo-wrap { width: min(90cqw, 44cqh); display: flex; justify-content: center; }
.tt-logo { width: 100%; height: auto; filter: drop-shadow(0 1.4cqw 2cqw rgba(42, 36, 51, .22)); animation: ttFloat 3.2s ease-in-out infinite; }
.tt-logo-text { margin: 2cqw 0 0; display: flex; flex-direction: column; align-items: center; transform: rotate(-4deg); animation: ttFloat 3.2s ease-in-out infinite; }
.tt-logo-text .tt-l1 { font-size: clamp(30px, 11cqw, 56px); margin-left: -16cqw; }
.tt-logo-text .tt-l1::after { background-image: linear-gradient(180deg, #fff 0%, #C8FFF7 45%, var(--teal) 100%); }
.tt-logo-text .tt-l2 { font-size: clamp(50px, 19cqw, 98px); margin-top: -.06em; }
@keyframes ttFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.6cqw; } }
.tt-title-foot { display: flex; flex-direction: column; align-items: center; gap: min(2.2cqw, 1.2cqh); }
.tt-catch { margin: 0; font: 900 min(4.4cqw, 2.5cqh)/1.5 var(--body); letter-spacing: .03em; word-break: keep-all; text-shadow: 0 0 .3em #fff, 0 0 .6em #fff, 0 0 .9em #fff; }
.tt-title .tt-btn-main { font-size: min(6.4cqw, 3.5cqh); padding: .62em 3em .66em; animation: ttPulse 1.6s ease-in-out infinite; }
.tt-meta { margin: 0; display: flex; gap: .6em; flex-wrap: wrap; justify-content: center; font: 800 min(3.1cqw, 1.75cqh)/1 var(--body); }
.tt-meta span { background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: .35em .8em; }
.tt-meta b { font-family: var(--disp); color: var(--red-d); margin-left: .25em; }
.tt-title .tt-link { min-height: 36px; }
.tt-demo-tag {
    position: absolute; top: max(3cqw, env(safe-area-inset-top)); left: 3cqw;
    font: 700 clamp(10px, 2.8cqw, 14px)/1 var(--disp); letter-spacing: .2em;
    background: var(--ink); color: #fff; padding: .6em 1em; border-radius: 999px;
}
.tt-demo-tag::before { content: ""; display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: var(--pink); margin-right: .6em; animation: ttBlink 1s steps(2) infinite; }
@keyframes ttBlink { 50% { opacity: 0; } }
.tt-sound {
    position: absolute; top: max(3cqw, env(safe-area-inset-top)); right: 3cqw;
    min-height: 44px; cursor: pointer; border: 3px solid var(--ink); background: #fff; box-shadow: 0 3px 0 var(--ink);
    border-radius: 999px; padding: .4em 1em; font: 700 clamp(12px, 3.2cqw, 16px)/1 var(--disp);
}

/* ───── 章をえらぶ ───── */
.tt-lap { margin: 0; width: 100%; font: 800 clamp(12px, 3.3cqw, 16px)/1.4 var(--body); color: var(--mute); text-align: left; }
.tt-lap b { color: var(--red-d); font-family: var(--disp); }
.tt-chapters { width: 100%; display: flex; flex-direction: column; gap: 2.4cqw; }
.tt-chcard {
    position: relative; width: 100%; cursor: pointer; text-align: left;
    display: grid; grid-template-columns: 26cqw 1fr; gap: 3cqw; align-items: center;
    background: #fff; border: 3px solid var(--ink); border-radius: 20px; box-shadow: 0 .28em 0 var(--ink);
    padding: 2cqw 3cqw 2cqw 2cqw; font-size: clamp(12px, 3.4cqw, 16px);
    transition: transform .1s;
}
.tt-chcard:active { transform: translateY(.15em); }
.tt-chthumb { width: 26cqw; aspect-ratio: 1; border-radius: 14px; background: linear-gradient(180deg, #BFEFFF, #FFF3DD 70%); display: grid; place-items: center; overflow: hidden; border: 2px solid rgba(42, 36, 51, .15); }
.tt-chthumb img, .tt-chthumb canvas { width: 100%; height: 100%; object-fit: contain; display: block; }
.tt-chinfo { display: flex; flex-direction: column; gap: .3em; min-width: 0; }
.tt-chinfo small { font: 700 .82em/1 var(--disp); color: var(--red-d); letter-spacing: .1em; }
.tt-chinfo b { font: 900 1.2em/1.2 var(--body); }
.tt-chinfo p { margin: 0; font: 700 .86em/1.45 var(--body); color: #4A4255; }
.tt-chstars { font: 700 1.3em/1 var(--disp); letter-spacing: .05em; color: #DDD6E2; -webkit-text-stroke: .1em var(--ink); paint-order: stroke fill; }
.tt-chstars i { font-style: normal; color: var(--gold); }
.tt-chbest { font: 700 .86em/1 var(--disp); color: var(--teal-d); }
.tt-chcard.lock { cursor: default; background: #F3EEF4; }
.tt-chcard.lock .tt-chthumb { filter: grayscale(1) opacity(.5); }
.tt-chcard.lock::after { content: attr(data-lock); position: absolute; right: 3cqw; top: 2.4cqw; font: 900 .8em/1 var(--body); background: var(--ink); color: #fff; border-radius: 999px; padding: .4em .8em; }
.tt-chcard.new { animation: ttGlow .8s ease-in-out infinite alternate; }
.tt-reborn { width: 100%; background: linear-gradient(180deg, #E3FBF8, #C9F3EE); border: 3px solid var(--ink); border-radius: 20px; padding: 3cqw 4cqw; box-shadow: 0 .28em 0 var(--ink); display: flex; flex-direction: column; gap: 2cqw; align-items: center; }
.tt-reborn p { margin: 0; font: 700 clamp(12px, 3.3cqw, 15px)/1.6 var(--body); text-align: left; }

/* ───── あそびかた ───── */
.tt-how-head { margin: 1cqw 0 0; font-size: clamp(28px, 9.6cqw, 50px); }
.tt-steps { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 2cqw; counter-reset: st; }
.tt-steps li {
    counter-increment: st; display: flex; align-items: center; gap: 3cqw; text-align: left;
    background: #fff; border: 2.5px solid var(--ink); border-radius: 18px; padding: 2cqw 3cqw; box-shadow: 0 .22em 0 var(--ink);
    font-size: clamp(12px, 3.4cqw, 16px);
}
.tt-steps li > div { display: flex; flex-direction: column; gap: .3em; min-width: 0; }
.tt-steps li b { font: 900 1.12em/1.25 var(--body); }
.tt-steps li b::before { content: counter(st); display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; margin-right: .4em; border-radius: 50%; background: var(--red); color: #fff; font: 700 .85em/1 var(--disp); vertical-align: .1em; }
.tt-steps li span { font: 700 .9em/1.55 var(--body); color: #4A4255; }
.tt-step-ico { flex: none; width: 16cqw; height: 16cqw; display: grid; place-items: center; border-radius: 18px; background: var(--cream2); overflow: hidden; }
.tt-step-ico img, .tt-step-ico svg { width: 86%; height: 86%; object-fit: contain; }
.tt-goal-card {
    width: 100%; background: linear-gradient(180deg, #FFF6D8, #FFE3A8); border: 2.5px solid var(--ink); border-radius: 18px;
    padding: 2.4cqw 4cqw 2.8cqw; box-shadow: 0 .22em 0 var(--ink); font-size: clamp(12px, 3.5cqw, 17px);
}
.tt-goal-card small { display: inline-block; font: 700 .85em/1 var(--disp); letter-spacing: .2em; background: var(--ink); color: #fff; border-radius: 999px; padding: .45em 1em; }
.tt-goal-card p { margin: .5em 0 .3em; font: 900 1.1em/1.5 var(--body); word-break: keep-all; }
.tt-goal-card p b { color: var(--red-d); }
.tt-goal-card span { font: 700 .86em/1.5 var(--body); color: #4A4255; }

/* ───── 職種図鑑 ───── */
.tt-dex-tabs { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6cqw; }
.tt-dex-tab { min-height: 44px; cursor: pointer; border: 2.5px solid var(--ink); border-radius: 14px; background: #fff; font: 900 clamp(11px, 3.1cqw, 15px)/1.2 var(--body); box-shadow: 0 3px 0 var(--ink); padding: .3em .2em; }
.tt-dex-tab.on { background: var(--c); color: #fff; }
.tt-dex-body { width: 100%; display: flex; flex-direction: column; gap: 2.4cqw; text-align: left; font-size: clamp(12px, 3.4cqw, 16px); }
.tt-dex-head { border: 3px solid var(--ink); border-radius: 20px; background: linear-gradient(180deg, #fff, var(--t)); padding: 3cqw 4cqw; box-shadow: 0 .26em 0 var(--ink); }
.tt-dex-head small { font: 700 .85em/1 var(--disp); letter-spacing: .14em; color: var(--cd); }
.tt-dex-head h2 { margin: .2em 0 .4em; font: 900 1.5em/1.2 var(--body); }
.tt-dex-head p { margin: 0; font: 700 .95em/1.7 var(--body); }
.tt-dex-sub { margin: .4em 0 0; font: 900 1em/1.3 var(--body); }
.tt-career { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.tt-career li { list-style: none; background: #fff; border: 2.5px solid var(--ink); border-radius: 16px; padding: 2cqw 1.6cqw; display: flex; flex-direction: column; align-items: center; gap: .4em; text-align: center; box-shadow: 0 .2em 0 var(--ink); }
.tt-career ul, ul.tt-career { margin: 0; padding: 0; }
.tt-career .pic { width: 100%; aspect-ratio: 1; border-radius: 12px; background: radial-gradient(circle at 50% 40%, #fff, var(--t)); display: grid; place-items: center; overflow: hidden; }
.tt-career .pic img { width: 92%; height: 92%; object-fit: contain; }
.tt-career .pic img.bust { width: 80%; height: 80%; border-radius: 50%; object-fit: cover; border: 3px solid var(--r); }
.tt-career li i { font: 700 .95em/1 var(--disp); font-style: normal; color: var(--gold); -webkit-text-stroke: .16em var(--ink); paint-order: stroke fill; }
.tt-career li b { font: 900 .85em/1.3 var(--body); word-break: keep-all; }
.tt-career li span { font: 700 .76em/1.5 var(--body); color: #4A4255; text-align: left; }
.tt-career li.lock .pic { filter: brightness(0) opacity(.18); }
.tt-career li.lock b { color: var(--mute); }
.tt-dex-box { background: #fff; border: 2.5px solid var(--ink); border-radius: 16px; padding: 2.4cqw 3.4cqw; box-shadow: 0 .2em 0 var(--ink); }
.tt-dex-box h3 { margin: 0 0 .4em; font: 900 1em/1.3 var(--body); color: var(--cd); }
.tt-dex-box p { margin: 0; font: 700 .92em/1.7 var(--body); }
.tt-tools { display: flex; flex-wrap: wrap; gap: .5em; }
.tt-tools span { display: inline-flex; align-items: center; gap: .3em; background: var(--t); border-radius: 999px; padding: .3em .8em .3em .3em; font: 800 .86em/1.2 var(--body); }
.tt-tools span img, .tt-tools span svg { width: 1.8em; height: 1.8em; object-fit: contain; }
.tt-dex-note { margin: 0; font: 700 .8em/1.6 var(--body); color: var(--mute); }

/* ───── 研究所・実績 ───── */
.tt-lab-grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; }
.tt-res-card {
    position: relative; display: flex; flex-direction: column; gap: .35em; text-align: left; cursor: pointer;
    background: #fff; border: 2.5px solid var(--ink); border-radius: 18px; padding: 2.4cqw 2.8cqw; box-shadow: 0 .22em 0 var(--ink);
    font-size: clamp(11px, 3.2cqw, 15px); min-height: 44px;
}
.tt-res-card b { font: 900 1.08em/1.25 var(--body); }
.tt-res-card .lv { display: flex; gap: .25em; }
.tt-res-card .lv i { width: 1.1em; height: .5em; border-radius: 999px; background: #E7E1EB; }
.tt-res-card .lv i.on { background: var(--teal); }
.tt-res-card p { margin: 0; font: 700 .86em/1.45 var(--body); color: #4A4255; }
.tt-res-card .next { color: var(--teal-d); }
.tt-res-card .cost { align-self: flex-start; font: 700 1em/1 var(--disp); color: #fff; background: var(--teal); border: 2px solid var(--ink); border-radius: 999px; padding: .3em .8em; }
.tt-res-card.cant .cost { background: #E7E1EB; color: var(--mute); border-color: #BDB5C3; }
.tt-res-card.max .cost { background: var(--gold); color: var(--ink); }
.tt-res-card.req { opacity: .6; }
.tt-res-card.got { animation: ttGot .45s ease-out; }
.tt-ach-list { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 1.6cqw; }
.tt-ach-list li { display: grid; grid-template-columns: 2.4em 1fr auto; gap: .8em; align-items: center; text-align: left; background: #fff; border: 2.5px solid var(--ink); border-radius: 16px; padding: .55em .9em; box-shadow: 0 .18em 0 var(--ink); font-size: clamp(12px, 3.3cqw, 15px); }
.tt-ach-list li .ic { width: 2.4em; height: 2.4em; display: grid; place-items: center; border-radius: 50%; background: #EFEAF2; }
.tt-ach-list li .ic img, .tt-ach-list li .ic svg { width: 80%; height: 80%; object-fit: contain; filter: grayscale(1) opacity(.4); }
.tt-ach-list li.done .ic { background: var(--gold); }
.tt-ach-list li.done .ic img, .tt-ach-list li.done .ic svg { filter: none; }
.tt-ach-list li b { display: block; font: 900 1em/1.3 var(--body); }
.tt-ach-list li span { font: 700 .82em/1.4 var(--body); color: var(--mute); }
.tt-ach-list li em { font: 700 .9em/1 var(--disp); font-style: normal; color: var(--teal-d); white-space: nowrap; }
.tt-ach-list li:not(.done) b { color: var(--mute); }

/* ───── 一時停止 ───── */
.tt-pause { background: rgba(255, 246, 230, .93); gap: 4cqw; }
.tt-pause-head { margin: 0; font-size: clamp(34px, 12cqw, 60px); }
.tt-pause .tt-btn { min-width: 62cqw; }

/* ───── 結果 ───── */
.tt-result { gap: 2.2cqw; padding-top: max(6cqw, env(safe-area-inset-top)); }
.tt-res-head { margin: 0; min-height: 12cqw; display: flex; justify-content: center; font-size: clamp(20px, 7cqw, 40px); animation: ttPop .6s cubic-bezier(.34, 1.56, .64, 1); }
.tt-res-head img { width: 70cqw; height: auto; aspect-ratio: 640 / 381; object-fit: contain; display: block; flex: none; }
/* 縦に並ぶ画面（結果・図鑑など）で、中身が縦につぶれないようにする */
.tt-sheet > * { flex-shrink: 0; }
.tt-res-ch { margin: -.5cqw 0 0; font: 900 clamp(13px, 3.9cqw, 18px)/1.4 var(--body); }
.tt-res-grow { margin: 0; font: 800 clamp(12px, 3.5cqw, 16px)/1.5 var(--body); color: #fff; background: var(--teal); border: 2.5px solid var(--ink); border-radius: 999px; padding: .35em 1.1em; box-shadow: 0 3px 0 var(--ink); word-break: keep-all; }
.tt-res-grow:empty { display: none; }
.tt-res-scores { display: flex; gap: 3cqw; width: 100%; }
.tt-res-scores > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .35em; background: #fff; border: 2.5px solid var(--ink); border-radius: 18px; padding: 2cqw 1cqw 2.2cqw; box-shadow: 0 .2em 0 var(--ink); }
.tt-res-scores small { font: 800 clamp(10px, 2.8cqw, 14px)/1 var(--body); letter-spacing: .1em; color: var(--mute); }
.tt-res-scores b { font: 700 clamp(22px, 7.6cqw, 40px)/1 var(--disp); font-variant-numeric: tabular-nums; }
.tt-res-best { margin: 0; font: 800 clamp(12px, 3.4cqw, 16px)/1.3 var(--body); }
.tt-res-best .new { display: inline-block; margin-left: .5em; background: var(--pink); color: #fff; border-radius: 999px; padding: .2em .7em; font: 700 .9em/1.2 var(--disp); animation: ttPop .5s cubic-bezier(.34, 1.56, .64, 1) .6s backwards; }
.tt-res-missions { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 1.2cqw; }
.tt-res-missions li { display: flex; align-items: center; gap: .6em; text-align: left; background: #fff; border: 2px solid rgba(42, 36, 51, .2); border-radius: 999px; padding: .4em 1em .4em .5em; font: 800 clamp(12px, 3.4cqw, 15px)/1.3 var(--body); }
.tt-res-missions li i { flex: none; width: 1.7em; height: 1.7em; display: grid; place-items: center; font: 700 1.1em/1 var(--disp); font-style: normal; color: #D9D2DE; -webkit-text-stroke: .1em var(--ink); paint-order: stroke fill; }
.tt-res-missions li.done i { color: var(--gold); animation: ttStar .5s cubic-bezier(.34, 1.56, .64, 1) backwards; }
.tt-res-missions li:nth-child(2).done i { animation-delay: .25s; }
.tt-res-missions li:nth-child(3).done i { animation-delay: .5s; }
@keyframes ttStar { 0% { transform: scale(0) rotate(-90deg); } 100% { transform: scale(1) rotate(0); } }
.tt-res-missions li span { flex: 1; }
.tt-res-missions li b { font: 700 .8em/1 var(--disp); color: #fff; background: var(--pink); border-radius: 999px; padding: .3em .6em; }
.tt-res-know { display: flex; align-items: baseline; gap: .5em; font: 800 clamp(12px, 3.4cqw, 16px)/1 var(--body); }
.tt-res-know b { font: 700 clamp(22px, 7cqw, 34px)/1 var(--disp); color: var(--teal-d); }
.tt-res-know small { color: var(--mute); }
.tt-res-achs { width: 100%; display: flex; flex-wrap: wrap; gap: 1.2cqw; justify-content: center; }
.tt-res-achs span { font: 800 clamp(11px, 3cqw, 14px)/1.2 var(--body); background: var(--ink); color: #fff; border: 2px solid var(--gold); border-radius: 999px; padding: .4em .9em; }
.tt-res-match { width: 100%; background: #fff; border: 3px solid var(--ink); border-radius: 22px; padding: 3.4cqw 4cqw; text-align: left; box-shadow: 0 .3em 0 var(--ink); display: flex; flex-direction: column; gap: 1.6cqw; }
.tt-res-lead { margin: 0; font: 800 clamp(12px, 3.6cqw, 17px)/1.4 var(--body); color: var(--mute); }
.tt-res-job { display: flex; align-items: center; gap: 3cqw; }
.tt-res-face { flex: none; width: 26cqw; height: 26cqw; border-radius: 50%; border: 3px solid var(--ink); background: radial-gradient(circle at 50% 35%, #fff, var(--t, var(--cream2))); overflow: hidden; display: grid; place-items: end center; }
.tt-res-face img { width: 100%; height: 100%; object-fit: cover; }
.tt-res-face img.fig { width: 100%; height: 100%; object-fit: cover; object-position: 50% 3%; }
.tt-res-job > div { min-width: 0; }
.tt-res-type { margin: 0 0 .3em; font: 800 clamp(11px, 3cqw, 14px)/1.2 var(--body); letter-spacing: .06em; color: var(--red-d); }
.tt-res-name { margin: 0; font: 900 clamp(17px, 5.2cqw, 28px)/1.25 var(--body); word-break: keep-all; overflow-wrap: anywhere; }
.tt-res-reason { margin: 0; font: 800 clamp(13px, 3.7cqw, 17.6px)/1.65 var(--body); background: var(--cream2); border-radius: 14px; padding: .6em .8em; }
.tt-res-desc { margin: 0; font: 700 clamp(13px, 3.6cqw, 17px)/1.75 var(--body); }
.tt-res-team-head { margin: .6cqw 0 0; font: 900 clamp(12px, 3.6cqw, 17px)/1.3 var(--body); }
.tt-res-team { display: flex; flex-direction: column; gap: 1.2cqw; }
.tt-team-row { display: grid; grid-template-columns: 2.4em minmax(0, 8.4em) 1fr 2.8em; align-items: center; gap: .55em; font: 800 clamp(11px, 3cqw, 14px)/1.2 var(--body); }
.tt-team-row img { width: 2.4em; height: 2.4em; border-radius: 50%; object-fit: cover; border: 2.5px solid var(--c); background: var(--cream); }
.tt-team-row .nm { display: flex; flex-direction: column; gap: .15em; word-break: keep-all; }
.tt-team-row .nm small { font: 700 .9em/1 var(--disp); color: var(--mute); letter-spacing: -.02em; }
.tt-team-row i { height: 1em; background: rgba(42, 36, 51, .08); border-radius: 999px; overflow: hidden; }
.tt-team-row em { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--c); transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.tt-team-row .pc { text-align: right; font-family: var(--disp); }
.tt-team-row.top .nm { color: var(--red-d); }
.tt-team-note { margin: 0; font: 700 clamp(10px, 2.7cqw, 13px)/1.4 var(--body); color: var(--mute); text-align: right; }
.tt-res-small { margin: 0; font: 700 clamp(11px, 2.8cqw, 13.6px)/1.6 var(--body); color: var(--mute); }
.tt-res-match .tt-btn-teal { align-self: center; }
.tt-res-btns { display: flex; flex-direction: column; gap: 2.6cqw; align-items: center; padding-bottom: 4cqw; }
.tt-res-btns .tt-btn { min-width: 72cqw; }
.tt-res-btns-top { padding-bottom: 0; width: 100%; }
.tt-res-btns-top .tt-btn-main { min-width: 80cqw; }
.tt-res-btns-top .tt-row .tt-btn { min-width: 0; }

/* ───── 画面の切り替え（金と赤の幕） ───── */
.tt-curtain {
    position: absolute; inset: 0; z-index: 20; pointer-events: none;
    background:
        radial-gradient(circle, #FFF2A8 0 3px, transparent 4px) 0 0 / 26px 26px,
        repeating-linear-gradient(90deg, var(--red) 0 7cqw, #F25A63 7cqw 14cqw);
    clip-path: circle(0% at 50% 50%);
    transition: clip-path .32s cubic-bezier(.6, 0, .4, 1);
}
.tt-curtain.on { clip-path: circle(80% at 50% 50%); pointer-events: auto; }

.tt-loading { position: absolute; inset: 0; z-index: 30; display: grid; place-content: center; gap: 2cqw; justify-items: center; background: var(--cream); font: 700 clamp(12px, 3cqw, 15px)/1 var(--disp); letter-spacing: .3em; transition: opacity .4s; }
.tt-loading i { width: 10cqw; height: 10cqw; border-radius: 50%; background: var(--red); border: 3px solid var(--ink); animation: ttBounce .6s ease-in-out infinite alternate; }
@keyframes ttBounce { from { transform: translateY(0); } to { transform: translateY(-3cqw); } }
.tt-loading.off { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    .tt-logo, .tt-logo-text, .tt-title .tt-btn-main, .tt-tapcue, .tt-btn-boss, .tt-sheet { animation: none; }
}

/* ───── スマホ（幅375px）でも文字を12px未満にしない。大きい画面の値は元のまま ───── */
.tt-chip small { font-size: max(12px, .7em); }
.tt-points small { font-size: max(12px, .82em); }
.tt-fever-label { font-size: max(12px, .9em); }
.tt-buffs { font-size: max(12px, min(3cqw, 1.7cqh)); }
.tt-boss { font-size: max(12px, min(3.2cqw, 1.8cqh)); }
.tt-boss-top small, .tt-boss-phases span, .tt-boss-tip { font-size: max(12px, .78em); }
.tt-seat { font-size: max(12px, min(2.9cqw, 1.65cqh)); }
.tt-face .tt-stars { font-size: max(12px, .78em); }
.tt-ranks span { font-size: max(12px, .8em); }
.tt-ctxt em { font-size: max(12px, .86em); }
.tt-ctxt small { font-size: max(12px, .82em); }
.tt-act { font-size: max(12px, .82em); }
.tt-act i { font-size: max(12px, .9em); }
.tt-tree-info { font-size: max(12px, min(2.9cqw, 1.65cqh)); }
.tt-tree-col { font-size: max(12px, min(2.7cqw, 1.5cqh)); }
.tt-tree-grid { flex: 1 0 auto; }
.tt-node b { font-size: max(12px, .92em); white-space: normal; text-overflow: clip; }
.tt-node .st { font-size: max(12px, .95em); }
.tt-toast small { font-size: max(12px, .82em); }
.tt-demo-tag { font-size: clamp(12px, 2.8cqw, 14px); }
.tt-meta { font-size: max(12px, min(3.1cqw, 1.75cqh)); }
.tt-note { font-size: clamp(12px, 2.9cqw, 14px); }
.tt-know small { font-size: 12px; }
.tt-chinfo small { font-size: max(12px, .82em); }
.tt-chinfo p { font-size: max(12px, .86em); }
.tt-chcard.lock::after { font-size: max(12px, .8em); }
.tt-steps li span { font-size: max(12px, .9em); }
.tt-goal-card small { font-size: max(12px, .85em); }
.tt-goal-card span { font-size: max(12px, .86em); }
.tt-dex-tab { font-size: clamp(12px, 3.1cqw, 15px); }
.tt-dex-head small { font-size: max(12px, .85em); }
.tt-career li i { font-size: max(12px, .95em); }
.tt-career li b { font-size: max(12px, .85em); }
.tt-career li span { font-size: max(12px, .76em); }
.tt-dex-box p { font-size: max(12px, .92em); }
.tt-tools span { font-size: max(12px, .86em); }
.tt-dex-note { font-size: max(12px, .8em); }
.tt-res-card { font-size: clamp(12px, 3.2cqw, 15px); }
.tt-res-card p { font-size: max(12px, .86em); }
.tt-ach-list li span { font-size: max(12px, .82em); }
.tt-ach-list li em { font-size: max(12px, .9em); }
.tt-res-scores small { font-size: clamp(12px, 2.8cqw, 14px); }
.tt-res-best .new { font-size: max(12px, .9em); }
.tt-res-missions li b { font-size: max(12px, .8em); }
.tt-res-know small { font-size: max(12px, .85em); }
.tt-res-achs span { font-size: clamp(12px, 3cqw, 14px); }
.tt-res-type { font-size: clamp(12px, 3cqw, 14px); }
.tt-team-row { font-size: clamp(12px, 3cqw, 14px); }
.tt-team-row .nm small { font-size: max(12px, .9em); }
.tt-team-row img.fig { object-position: 50% 3%; }
.tt-team-note { font-size: clamp(12px, 2.7cqw, 13px); }
.tt-res-small { font-size: clamp(12px, 2.8cqw, 13.6px); }
/* お店の上の電球を、端で切らずに並べる */
.tt-shop::before { background-repeat: space no-repeat; }
/* 案内の吹き出しが出ている間は、TAP! の手を吹き出しより上へ */
.tt-stage:has(.tt-hint:not([hidden])) .tt-tapcue { top: 23%; }