/* 都道府県はめこみ。共通部品（.ui-* / .shell-share）の見た目は /ui.css に任せ、ここでは上書きしない */
.tf {
  /* 色の組（2026-10-23 手直し 3: 地図帳の海）: 地は海の青（彩度 46%・明度 74%）、主なボタンは地図帳の平野の緑（色相 125°）、地方の 8 色は元気な段彩。ホーム（shell.home の theme）と同じ */
  --bg: #9ec9db; --card: #f3f7f8; --ink: #0f2a36; --sub: #23404c; --rule: #8fb2c0; --tray: #9ec9db;
  --sea: #c4dde9; --land: #f7f5ef; --seam: #b9c4c6; --line: #3f5f6b; --accent: #7f2510; --ng: #8a1c2c; --good: #1c5530; --piece: #d3e2e8;
  --ui-red: #2e6b34; --ui-red-ink: #ffffff; --ui-ink: #0f2a36; --ui-sub: #23404c;
  /* ホームと遊んでいる最中の帯の組: 海の青の地・濃い藍の字・深い朱の強調 */
  --paper: #9ec9db; --paper-ink: #0f2a36; --paper-sub: #23404c; --paper-hi: #7f2510; --paper-deep: #2f5563;
  /* 地方の 8 色（地図帳の段彩。はまった県は大きく元気に見せる） */
  --z0: #e8836a; --z1: #74b95a; --z2: #efb73e; --z3: #4fae9e; --z4: #e690a8; --z5: #b6c94a; --z6: #d98e4a; --z7: #8fa0dc;
  background: var(--bg); color: var(--ink); font-family: "Zen Kaku Gothic New", sans-serif;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.tf, .tf * { box-sizing: border-box; }
.tf > * { position: absolute; }
:where(.tf) :where(h1, h2, h3, p, ol, ul) { margin: 0; padding: 0; }

/* ---- 地図 ---- */
.tf .map { display: block; touch-action: none; cursor: grab; }
.tf .map:active { cursor: grabbing; }
.tf .map.still { pointer-events: none; }
.tf .map path, .tf .map rect { vector-effect: non-scaling-stroke; }
.tf .sea { fill: var(--sea); }
.tf .inset { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 5 4; }
.tf .inset-t { fill: var(--line); font-weight: 700; dominant-baseline: hanging; }
.tf .slot { fill: var(--land); stroke: var(--seam); stroke-width: 1; stroke-linejoin: round; }
.tf .lv-beg .slot.z0 { fill: color-mix(in srgb, var(--z0) 22%, var(--land)); }
.tf .lv-beg .slot.z1 { fill: color-mix(in srgb, var(--z1) 22%, var(--land)); }
.tf .lv-beg .slot.z2 { fill: color-mix(in srgb, var(--z2) 22%, var(--land)); }
.tf .lv-beg .slot.z3 { fill: color-mix(in srgb, var(--z3) 22%, var(--land)); }
.tf .lv-beg .slot.z4 { fill: color-mix(in srgb, var(--z4) 22%, var(--land)); }
.tf .lv-beg .slot.z5 { fill: color-mix(in srgb, var(--z5) 22%, var(--land)); }
.tf .lv-beg .slot.z6 { fill: color-mix(in srgb, var(--z6) 22%, var(--land)); }
.tf .lv-beg .slot.z7 { fill: color-mix(in srgb, var(--z7) 22%, var(--land)); }
.tf .lv-adv .slot { stroke: var(--land); stroke-width: 1.2; }
.tf .map .slot.off { fill: #dfe6e8; stroke: #cfd9dc; }
.tf .lake { fill: var(--sea); stroke: var(--line); stroke-width: .8; }
.tf .coast { fill: none; stroke: var(--line); stroke-width: 1.3; stroke-linejoin: round; }
.tf .lv-beg .coast { stroke-width: 1; }
.tf .placed { stroke: var(--land); stroke-width: 1.2; stroke-linejoin: round; }
.tf .placed.z0, .tf .pc.z0 { fill: var(--z0); }
.tf .placed.z1, .tf .pc.z1 { fill: var(--z1); }
.tf .placed.z2, .tf .pc.z2 { fill: var(--z2); }
.tf .placed.z3, .tf .pc.z3 { fill: var(--z3); }
.tf .placed.z4, .tf .pc.z4 { fill: var(--z4); }
.tf .placed.z5, .tf .pc.z5 { fill: var(--z5); }
.tf .placed.z6, .tf .pc.z6 { fill: var(--z6); }
.tf .placed.z7, .tf .pc.z7 { fill: var(--z7); }
/* はまる: 1.08 倍 → 1.0 倍、色が中心から 0.25 秒で広がる */
.tf .placed.pop { transform-box: fill-box; transform-origin: center; animation: tf-pop .25s ease-out; }
@keyframes tf-pop {
  from { transform: scale(1.08); clip-path: circle(0% at 50% 50%); }
  to { transform: scale(1); clip-path: circle(75% at 50% 50%); }
}
.tf .map .slot.flash { animation: tf-fl .36s 5 alternate; }
@keyframes tf-fl { to { fill: var(--accent); } }
.tf .ring { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 9 6; vector-effect: non-scaling-stroke; animation: tf-ring 2s ease-out forwards; }
@keyframes tf-ring { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
.tf .miss { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; }
.tf .labels { fill: var(--ink); stroke: rgba(255, 255, 255, .9); paint-order: stroke; }
.tf .nm { font-weight: 700; text-anchor: middle; dominant-baseline: middle; pointer-events: none; stroke-linejoin: round; }
.tf .nolabel .labels { display: none; }
.tf .map.mini { border-radius: 6px; outline: 1.5px solid var(--line); }

/* ---- 遊ぶ画面 ---- */
.tf .hud { display: flex; align-items: center; gap: 22px; padding: 0 20px; background: var(--card); border-bottom: 1px solid var(--rule); }
.tf .hud .tag { margin-right: auto; }
.tf .hud .hint { margin-right: 4px; }
.tf .stat { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; }
.tf .stat small { font-size: 15px; font-weight: 700; color: var(--sub); }
.tf .stat b { font-size: 32px; font-weight: 900; font-variant-numeric: tabular-nums; }
.tf .stat.x2 small, .tf .stat.x2 b { color: var(--accent); }
.tf.portrait .hud { gap: 16px; padding: 0 14px; }

/* 対戦の帯: 点の順 */
.tf .hud.race .tag { margin-right: 0; }
.tf .stand { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; overflow: hidden; max-height: 70px; }
.tf .stand .sc { display: flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 700; }
.tf .stand .sc b { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
.tf .stand .sc.me { color: var(--accent); }
.tf .nm3 { max-width: 6.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf .dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; flex: none; }
/* 配信の帯: 配信者 32／47 ― みんな 35／47 */
.tf .hud.vs { justify-content: center; gap: 18px; }
.tf .hud.vs .side { display: flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 700; }
.tf .hud.vs .side b { font-size: 34px; font-weight: 900; font-variant-numeric: tabular-nums; }
.tf .hud.vs .dot { width: 18px; height: 18px; }
/* 番号入りの丸（地図の県名の前の①…と対応）。文字色は地の色に合わせて party.js が白か黒を選ぶ */
.tf .dot.num, .tf .hud.vs .dot.num { width: 22px; height: 22px; font-size: 13px; font-weight: 900; font-style: normal; line-height: 22px; text-align: center; }
.tf .vsx { font-size: 28px; color: var(--sub); }
.tf .vpop { z-index: 14; display: flex; align-items: center; gap: 6px; padding: 0 14px; font-size: 20px; background: var(--card); border: 1.5px solid var(--line); border-radius: 6px; opacity: 0; transition: opacity .15s; width: auto !important; max-width: 360px; white-space: nowrap; }
.tf .vpop.on { opacity: 1; }

.tf .zoom { display: flex; flex-direction: column; gap: 10px; z-index: 5; }
.tf .zoom > button { width: 64px; height: 64px; padding: 0; font-size: 30px; }
.tf .zoom > button.small { font-size: 18px; }
.tf .zoom.hint > button { animation: tf-hint .4s 6 alternate; }
@keyframes tf-hint { to { outline: 4px solid var(--accent); } }
/* 上級の初回だけ: 拡大ボタンが光り続ける（押すか 8 秒で消える） */
.tf .zoom.glow > button { animation: tf-glow .7s ease-in-out infinite alternate; }
@keyframes tf-glow { to { background: var(--ui-red); color: var(--ui-red-ink); outline: 4px solid var(--ng); outline-offset: 3px; } }

.tf .msg { display: flex; align-items: center; justify-content: center; padding: 0 18px; font-size: 21px; font-weight: 700; line-height: 1.25; text-align: center; color: var(--ink); background: rgba(243, 247, 248, .95); border-top: 2px solid var(--accent); pointer-events: none; z-index: 4; }
.tf .msg.ok { color: var(--good); }
.tf .msg.ng { color: var(--ng); }
.tf.portrait .msg { font-size: 23px; }

/* 「3 れんさ」「タッチの差！」の帯 */
.tf .banner { display: flex; justify-content: center; align-items: center; pointer-events: none; z-index: 12; }
.tf .ban { font-size: 38px; font-weight: 900; color: var(--accent); background: var(--card); border: 2px solid var(--accent); border-radius: 6px; padding: 4px 28px; animation: tf-ban linear forwards; }
.tf .ban.tie { color: var(--ink); }
@keyframes tf-ban { 0% { opacity: 0; transform: scale(.85); } 15% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }

.tf .tray { display: flex; gap: 12px; padding: 14px; background: var(--tray); }
.tf .tray.col { flex-direction: column; border-left: 1px solid var(--rule); }
.tf .tray.row { flex-direction: row; border-top: 1px solid var(--rule); }
.tf .tray.many { gap: 8px; padding: 10px; }
.tf .tray.done .piece { visibility: hidden; }
.tf .piece { flex: 1; min-width: 0; min-height: 0; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 6px 8px; background: var(--card); border: 1px solid var(--rule); border-radius: 6px; cursor: grab; touch-action: none; transition: filter .15s, opacity .15s; }
.tf .piece.in { animation: tf-in .18s ease-out; }
@keyframes tf-in { from { transform: scale(.85); opacity: .3; } }
.tf .piece .thumb { flex: 1; width: 100%; min-height: 0; pointer-events: none; overflow: visible; }
.tf .pc { stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tf .tray.adv .pc, .tf .ghost.adv .pc, .tf .lv-adv .pc.lg { fill: var(--piece); }
.tf .pname { font-size: 26px; font-weight: 900; line-height: 1.2; pointer-events: none; white-space: nowrap; }
.tf .tray.many .pname { font-size: 21px; }
.tf .tray.many.col .piece { flex-direction: row; gap: 8px; padding: 6px 10px; }
.tf .tray.many.col .piece .thumb { height: 100%; }
.tf .tray.many.col .pname { min-width: 5em; text-align: left; }
.tf .tray.many.col .pkana { display: none; }
.tf .pkana { font-size: 16px; font-weight: 700; color: var(--sub); pointer-events: none; }
.tf .piece.sel { border: 2px solid var(--accent); background: #fbe9e2; }
.tf .piece.lift { opacity: .3; }
.tf .piece.empty { border-color: transparent; background: none; box-shadow: none; cursor: default; }
.tf .piece.shake { animation: tf-shake .15s 2; }
@keyframes tf-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
/* 見ている・終わったあとはつかめない（薄く・押せない印） */
.tf .tray.disabled .piece { filter: grayscale(1); opacity: .4; cursor: not-allowed; }
/* まちがえたら灰色になってつかめない（対戦） */
.tf .tray.locked .piece { filter: grayscale(1); opacity: .45; cursor: not-allowed; }
.tf .lockbar { position: absolute; left: 0; bottom: 0; height: 6px; width: 100%; background: var(--sub); transform-origin: left; animation: tf-lock var(--lock, 2s) linear forwards; }
@keyframes tf-lock { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.tf .ghost { pointer-events: none; z-index: 20; overflow: visible; }
.tf .anchor { fill: var(--ink); }
.tf .pc.lg { fill-opacity: .85; }

/* 虫めがね（直径 160px・3 倍） */
.tf .loupe { z-index: 25; border-radius: 50%; overflow: hidden; pointer-events: none; background: var(--sea); border: 3px solid var(--ink); }
.tf .loupe svg { display: block; }

/* キーボードの照準（矢印で動かし Enter で置く）。中心の点が置く場所 */
.tf .kcur { position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 3px solid var(--ink); border-radius: 50%; pointer-events: none; z-index: 6; }
.tf .kcur[hidden] { display: none; }
.tf .kcur::before, .tf .kcur::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--ink); }
.tf .kcur::before { width: 56px; height: 2px; margin: -1px 0 0 -28px; }
.tf .kcur::after { width: 2px; height: 56px; margin: -28px 0 0 -1px; }

/* ---- 入口・結果（白いカード） ---- */
.tf .pane { display: flex; flex-direction: column; gap: 12px; overflow: auto; z-index: 10; }
.tf .pane > * { flex-shrink: 0; }
.tf .logo { font-size: 38px; line-height: 1.15; }
.tf.portrait .logo { font-size: 44px; }
.tf .lead { font-size: 17px; line-height: 1.5; color: var(--sub); }
.tf .label { font-size: 14px; font-weight: 700; color: var(--sub); }
.tf .seg { display: flex; gap: 8px; }
.tf .seg > button { flex: 1; }
.tf .lvseg { display: flex; gap: 10px; }
.tf .lvcol { flex: 1; display: flex; flex-direction: column; gap: 4px; text-align: center; }
.tf .lvcol small { font-size: 14px; font-weight: 700; color: var(--sub); }
.tf .chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* 範囲の地方 6 つは 3×2 の同じ幅に並べる（全国 47 は上の 1 段） */
.tf .chips:not(.small) { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.tf .chips:not(.small) > button { min-width: 0; padding-left: 4px; padding-right: 4px; }
.tf .chips:not(.small) > .all { grid-column: 1 / -1; }
/* ランキングの地方も同じく 3×2（全国は上の 1 段） */
.tf .chips.small { display: grid; grid-template-columns: repeat(3, 1fr); }
.tf .chips.small > button { min-width: 0; padding-left: 4px; padding-right: 4px; }
.tf .chips.small > button:first-child { grid-column: 1 / -1; }
/* ボタンの下に一言（配信） */
.tf .sbtn { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; }
.tf .sbtn small { font-size: 15px; font-weight: 700; color: var(--sub); }
.tf .go { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.tf .go small { font-size: 18px; font-weight: 700; color: inherit; opacity: 1; letter-spacing: .04em; }
.tf .row2 { display: flex; gap: 10px; }
.tf .row2 > button { flex: 1; }
.tf .counts { font-size: 15px; font-weight: 700; color: var(--sub); text-align: center; }
/* レベル切り替えの選ばれていない側も、押せると分かる濃さの文字に */
.tf .seg > button[aria-pressed="false"], .tf .lvcol > button[aria-pressed="false"] { color: var(--ink); background: var(--card); border: 2px solid var(--ink); }
/* 範囲の『全国 47』は「まずこれ」と分かるよう、1 段まるごと使って大きく */
.tf .chips > .all { flex: 1 0 100%; font-size: 20px; font-weight: 900; padding-top: 10px; padding-bottom: 10px; border: 2px solid var(--accent); }
.tf .chips > .all[aria-pressed="false"] { color: var(--accent); }

/* 2 本指で広げる絵 */
.tf .pinch { z-index: 15; pointer-events: none; background: rgba(243, 247, 248, .85); border-radius: 50%; }
.tf .pinch svg { width: 100%; height: 100%; overflow: visible; }
.tf .pinch .pa { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.tf .pinch .pt { fill: var(--ink); fill-opacity: .75; }
.tf .pinch .pf .pt { animation: tf-pinch 1.2s ease-in-out infinite; }
.tf .pinch .pf:first-child .pt { --dx: -12px; --dy: 12px; }
.tf .pinch .pf:last-child .pt { --dx: 12px; --dy: -12px; }
@keyframes tf-pinch { 0%, 15% { transform: translate(0, 0); } 70%, 100% { transform: translate(var(--dx), var(--dy)); } }

.tf .big2 { font-size: 24px; font-weight: 900; }
.tf .big3 { font-size: 46px; }
.tf .sub { font-size: 21px; font-weight: 700; }
.tf .sub.hi { color: var(--accent); }
.tf .detail { font-size: 17px; font-weight: 700; color: var(--sub); }
.tf .wrong { font-size: 16px; line-height: 1.5; color: var(--sub); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tf .wrong > button { font-size: 16px; min-height: 44px; padding: 4px 12px; }
/* まちがえた県を押すと、結果の地図でその県が光る */
.tf .placed.spot { animation: tf-fl .36s 6 alternate; }

/* ---- 配信の県当て ---- */
.tf .qlist { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.tf .qlist li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; font-size: 26px; font-weight: 900; border: 2px solid var(--rule); border-radius: 6px; }
.tf .qlist .qn { width: 1.4em; color: var(--sub); }
.tf .qlist .qt { flex: 1; }
.tf .qlist b { font-variant-numeric: tabular-nums; }
.tf .qlist li.ok { border-color: var(--good); color: var(--good); }
.tf .qlist li.ng { color: var(--sub); }
.tf .qfoot { font-size: 20px; font-weight: 700; margin-top: auto; }
.tf.qv { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.tf.qv > * { position: static; }
.tf .qbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tf .qbtns > button { font-size: 22px; padding-top: 16px; padding-bottom: 16px; }
.tf .qbtns > .ok { background: var(--good); border-color: var(--good); color: #fff; }
.tf .rank-h { font-size: 17px; margin-bottom: 4px; }
.tf .rank-l { list-style: none; font-size: 16px; }
.tf .rank-l li { display: flex; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--rule); }
.tf .rank-l .rn { width: 2.2em; text-align: right; font-weight: 900; }
.tf .rank-l .nm2 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf .rank-l .sc { font-weight: 700; font-variant-numeric: tabular-nums; }
.tf .rank-l li.me { color: var(--accent); font-weight: 700; }
.tf .rank-l.race { font-size: 20px; }
.tf .muted { color: var(--sub); }
.tf .row { display: flex; gap: 12px; margin-top: auto; }
.tf .row > button { flex: 1; }

/* ---- 部屋: 集まっています・結果 ---- */
.tf .plist { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.tf .pchip { display: flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 700; }
.tf .tog { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 0; font-size: 17px; font-weight: 700; cursor: pointer; }
.tf .tog input { width: 22px; height: 22px; accent-color: var(--accent); }
.tf .center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.tf .vsbox { overflow: hidden; }

/* ---- 詳しく・設定（共通の小さなウィンドウ shell.panel の中） ---- */
.tf .chips.small > button { font-size: 14px; }
.tf .best-t { border-collapse: collapse; font-size: 15px; }
.tf .best-t th, .tf .best-t td { padding: 4px 8px; text-align: left; border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
.tf .weak { list-style: none; columns: 2; font-size: 15px; }
.tf .weak li { display: flex; justify-content: space-between; padding: 2px 12px 2px 0; }
.tf .namef { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 17px; font-weight: 700; }
.tf .namef input { width: 10em; user-select: text; -webkit-user-select: text; }
.tf .tf-rl { font-size: 18px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }

/* ---- 共通の 3 つの画面（shell.home / bar / result）に合わせる ---- */
/* 帯（上の帯と、その下の順位の帯）は地図帳の見出しの紙: ホームと同じ生成りの地に墨の字、下に地図の枠線のような二重線 */
.tf .sh-bar, .tf .hud, .tf .tf-demohead { --ink: var(--paper-ink); --sub: var(--paper-sub); --accent: var(--paper-hi); --ui-ink: var(--paper-ink); --ui-sub: var(--paper-sub); background: var(--paper); color: var(--paper-ink); }
.tf .sh-bar { border-bottom: 4px double var(--paper-deep); }
.tf .hud, .tf .tf-demohead { border-bottom: 1px solid var(--paper-deep); }
/* 紙の地に置く控えめなボタン（相手をさがす・下の段・帯のボタン）: 明るい紙に墨の線 */
.tf .sh-home .ui-btn.sub:not(.sh-box *), .tf .sh-bar .ui-btn.sub { background: var(--card); color: var(--paper-ink); border: 2px solid var(--paper-deep); box-shadow: none; }
.tf .sh-home .ui-btn.sub:not(.sh-box *):hover, .tf .sh-bar .ui-btn.sub:hover { background: #dcebf1; }
/* 地図の上に出る操作のボタンは、控えめな物も紙の地で */
.tf .sh-acts .ui-btn.sub { background: var(--card); color: var(--paper-ink); border: 2px solid var(--paper-deep); box-shadow: none; }
/* 小さなウィンドウは明るい紙。見出しの下に地図の枠線のような二重線 */
.tf .sh-box { --ui-card: #f3f7f8; --ui-ink: #0f2a36; --ui-sub: #23404c; background: #f3f7f8; color: #0f2a36; box-shadow: none; border: 1.5px solid var(--paper-deep); }
.tf .sh-box > header { border-bottom: 4px double var(--rule); }
.tf .sh-box .sh-steps p::before { color: var(--accent); }
/* ホームの題字（shell.home の logo）と背景の経緯線（backdrop） */
.tf .tf-logo { display: block; height: 76px; width: auto; }
.tf .tf-grat { position: absolute; inset: 0; width: 100%; height: 100%; }
.tf .sh-bar .sh-info2 { font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tf .sh-art > .map, .tf .tf-res > .map { position: absolute; }
/* ホームの絵: CPU どうしのデモ（本番の盤を縮めて流す。押しても何も起きない） */
/* 部屋の説明画面（.tf の外）でも同じに出るよう、外枠 .tf-demo 自身に .tf を付けて描く（guide.js） */
.tf.tf-demo { position: absolute; transform-origin: 0 0; pointer-events: none; background: none; }
.tf.tf-demo, .tf.tf-demo * { pointer-events: none !important; }
.tf .tf-demoin { position: absolute; inset: 0; }
.tf .tf-demohead { position: absolute; left: 0; right: 0; top: 0; height: 64px; display: flex; align-items: center; padding: 0 22px; font-size: 26px; font-weight: 900; white-space: nowrap; overflow: hidden; }
/* 遊び方の図（260×160 で描き、外枠 .tf-pfit ごと渡された箱の大きさに縮める。本番の地図・県のコマを小さく） */
.tf.tf-pfit { position: absolute; left: 0; top: 0; width: 260px; height: 160px; transform-origin: 0 0; pointer-events: none; overflow: hidden; background: none; }
.tf .tf-pic { position: absolute; left: 50%; top: 50%; width: 260px; height: 160px; transform: translate(-50%, -50%); pointer-events: none; overflow: hidden; background: var(--sea); }
.tf .tf-pic > *, .tf .tf-pic .loupe > .map { position: absolute; }
.tf .tf-pic .map .labels { font-weight: 900; }
.tf .tf-pic .tray { padding: 4px; gap: 4px; }
.tf .tf-pic .piece { flex: 0 0 48px; padding: 2px; border-radius: 6px; box-shadow: none; }
.tf .tf-pic .pname { font-size: 11px; }
.tf .tf-pic .loupe { border-width: 2px; }
.tf .tf-ov { left: 0; top: 0; overflow: visible; z-index: 30; }
.tf .tf-ov .pr { fill: none; stroke: #d8352a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tf .tf-ov .pf { fill: rgba(255, 255, 255, .7); stroke: #2b2b2e; stroke-width: 1.5; }
.tf .tf-ov .pn { fill: #d8352a; }
.tf .tf-ov .pnt { fill: #fff; font-size: 13px; font-weight: 900; text-anchor: middle; }
.tf .tf-ov .pt, .tf .tf-ov .pbig, .tf .tf-ov .px { fill: #d8352a; font-weight: 900; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.tf .tf-ov .pt { font-size: 15px; }
.tf .tf-ov .pbig { font-size: 24px; text-anchor: middle; font-variant-numeric: tabular-nums; }
.tf .tf-ov .px { font-size: 26px; text-anchor: middle; }
.tf .tf-psc { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 4px 6px; background: var(--card); border: 1px solid var(--rule); border-radius: 6px; font-size: 12px; font-weight: 700; }
.tf .tf-psc div { display: flex; align-items: center; gap: 4px; }
.tf .tf-psc i { width: 8px; height: 8px; border-radius: 50%; }
.tf .tf-psc b { margin-left: auto; }
.tf .tf-pz { display: flex; flex-direction: column; gap: 4px; }
.tf .tf-pz span { display: flex; align-items: center; justify-content: center; height: 26px; background: var(--card); border: 1px solid var(--rule); border-radius: 6px; font-size: 16px; font-weight: 900; }
.tf .tf-pk { flex-direction: row; }
.tf .tf-pk span { flex: 1 1 0; min-width: 0; height: 30px; padding: 0 4px; font-size: 14px; white-space: nowrap; }
.tf .tf-det { display: flex; flex-direction: column; gap: 10px; }
/* ランキング: いまの設定の自己ベストを大きく、完成・CPU 戦 1 位の回数を横に */
.tf .tf-rtop { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: stretch; }
.tf .tf-rbig, .tf .tf-rstat > div { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 14px; background: var(--card); border: 1px solid var(--rule); }
.tf .tf-rbig b { font-size: 44px; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--accent); }
.tf .tf-rbig small, .tf .tf-rstat small { font-size: 14px; color: var(--muted, #6b6b70); }
.tf .tf-rstat { display: flex; flex-direction: column; gap: 8px; }
.tf .tf-rstat b { font-size: 24px; font-variant-numeric: tabular-nums; }
.tf .best-t td.cur { font-weight: 900; color: var(--accent); }
.tf .tf-det h3 { font-size: 18px; margin-top: 4px; }
/* 結果: 左（縦は上）に地図、右に共通の結果 */
.tf .sh-result.tf-res { padding: 16px 20px 16px 576px; gap: 10px; overflow: auto; justify-content: safe center; }
.tf.portrait .sh-result.tf-res { padding: 396px 20px 16px; }
.tf .tf-res h2 { font-size: 60px; line-height: 1; font-variant-numeric: tabular-nums; }
.tf .tf-res ol { min-width: 380px; font-size: 19px; }
.tf .tf-res .wrong { justify-content: center; max-width: 460px; }
.tf .tf-best { font-size: 21px; font-weight: 700; }
.tf .tf-best.hi { color: var(--accent); }
/* ---- 白地図で答えるモード（quiz.js）: トレイの場所に問題を出す ---- */
.tf .tray.tf-q { flex-direction: column; justify-content: center; align-items: stretch; gap: 6px; padding: 18px; background: var(--card); }
.tf .tray.tf-q > * { flex: none; }
.tf .tf-q .qhead { font-size: 16px; font-weight: 700; color: var(--sub); }
.tf .tf-q .qyomi { font-size: 17px; font-weight: 700; color: var(--sub); min-height: 1.3em; }
.tf .tf-q .qbig { font-size: 46px; font-weight: 900; line-height: 1.1; overflow-wrap: anywhere; color: var(--ink); }
.tf .tf-q .qbig.long { font-size: 30px; }
.tf .tf-q .qsmall { font-size: 20px; font-weight: 700; }
.tf .tf-q .qact { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.tf .tf-q .qbtns { grid-template-columns: 1fr; gap: 8px; }
.tf .tf-q .qbtns > button { display: flex; align-items: center; gap: 10px; font-size: 24px; padding: 10px 14px; text-align: left; }
.tf .tf-q .qbtns small { font-size: 14px; font-weight: 700; color: var(--sub); }
.tf .tf-q button.ok { background: var(--good); border-color: var(--good); color: #fff; opacity: 1; }
.tf .tf-q button.ng { background: var(--ng); border-color: var(--ng); color: #fff; opacity: 1; }
.tf .tf-q button.ok small, .tf .tf-q button.ng small { color: inherit; }
.tf.portrait .tray.tf-q { padding: 12px 18px; gap: 2px; }
.tf.portrait .tf-q .qbig { font-size: 40px; }
.tf.portrait .tf-q .qbig.long { font-size: 30px; }
.tf.portrait .tf-q .qact { margin-top: 6px; }
.tf.portrait .tf-q .qbtns { grid-template-columns: 1fr 1fr; }
/* 縦長でも押しやすい高さ（48px 以上。トレイ 280px に 2 段で収まる） */
.tf.portrait .tf-q .qbtns > button { font-size: 22px; padding: 8px 12px; min-height: 48px; }
.tf .map .slot.qspot, .tf .map.lv-adv .slot.qspot { fill: #d9463b; }
.tf .qring { fill: none; stroke: #d9463b; stroke-width: 3; stroke-dasharray: 9 6; vector-effect: non-scaling-stroke; }
/* モードの選び方（設定・記録・ランキング・部屋の集まっています） */
.tf .tf-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.tf .tf-modes > button { min-height: 64px; }
.tf .tf-modes > .ui-btn:not(.sub) small { color: inherit; }
.tf .chips.small.tf-mtabs { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
.tf .chips.small.tf-mtabs > button:first-child { grid-column: auto; }
/* ホームの「モードを選ぶ」（2026-10-31 手直し）: ひとりで遊ぶの下に、いまのモードとほかのモードの数 */
.tf .sh-home .tf-modebtn { width: fit-content; margin-top: 10px; font-size: 18px; padding: 8px 18px; }
.tf .sh-home .tf-modebtn small { font-size: 14px; }
/* 遊び方の図: 地図の右の問題・モードの並び */
.tf .tf-pic .tf-pq { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 4px 6px; background: var(--card); }
.tf .tf-pq b { font-size: 15px; font-weight: 900; line-height: 1.15; overflow-wrap: anywhere; }
.tf .tf-pq small { font-size: 10px; font-weight: 700; color: var(--sub); }
.tf .tf-pq span { font-size: 11px; font-weight: 700; padding: 2px 4px; border: 1px solid var(--rule); border-radius: 4px; background: #fff; }
.tf .tf-pm { display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 10px 40px; background: var(--card); }
.tf .tf-pm > span { position: static; padding: 3px 10px; font-size: 15px; font-weight: 700; border: 1px solid var(--rule); border-radius: 4px; }
.tf .tf-pm > span.on { border: 2px solid #d8352a; color: #d8352a; }
/* CPU 戦: 帯の下の順位の細い帯 */
.tf .hud.tf-strip { gap: 14px; }
.tf .hud.tf-strip .stand { max-height: 44px; flex-wrap: nowrap; gap: 4px 12px; }
.tf .hud.tf-strip .stand .sc { min-width: 0; font-size: 15px; }
.tf .hud.tf-strip .nm3 { max-width: 10em; }
.tf.portrait .hud.tf-strip .stand .sc { font-size: 13px; }
.tf.portrait .hud.tf-strip .nm3 { max-width: 7em; }