/*
  ターゲットナビ（ラウンドタブ）。SHUN さん作「ターゲットナビ完全版」の見た目を移植したもの。
  - 変数はすべて --tn-* で自前に持つ（アプリの styles.css とぶつけない）。
  - 画面の枠・ボタン・答えの色はアプリの配色（紺・金・クリーム）に合わせた。
    グリーンの図の色（芝・砂・ペナルティ）は元のまま。
  - ライト/ダーク: 端末設定（prefers-color-scheme）に追従し、
    :root[data-theme="light"|"dark"] の手動切替を優先する。
*/
:root{
  --tn-paper:#faf5ec; --tn-surface:#ffffff; --tn-surface-2:#f4ecdd;
  --tn-ink:#2d1e14; --tn-ink-2:#5b4838;
  --tn-line:#eadfcc; --tn-line-2:#d8c7a6;
  --tn-deep:#1a2742; --tn-soft:#f6eedd; --tn-fill:#c9a961;
  --tn-red:#b3261e; --tn-on-deep:#ffffff;
  --tn-shadow:0 1px 2px rgba(45,30,20,.05), 0 10px 26px -18px rgba(45,30,20,.3);
  --tn-round:"Hiragino Maru Gothic ProN","Hiragino Sans",sans-serif;
  --tn-sans:var(--font-gothic, "Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --tn-paper:#10151f; --tn-surface:#18202e; --tn-surface-2:#202a3b;
    --tn-ink:#f2ebdc; --tn-ink-2:#c8bea9;
    --tn-line:#2a3446; --tn-line-2:#3c4860;
    --tn-deep:#d4ad53; --tn-soft:#27231a; --tn-fill:#9c7f3c;
    --tn-red:#f19282; --tn-on-deep:#1a2742;
    --tn-shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 26px -18px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --tn-paper:#10151f; --tn-surface:#18202e; --tn-surface-2:#202a3b;
  --tn-ink:#f2ebdc; --tn-ink-2:#c8bea9;
  --tn-line:#2a3446; --tn-line-2:#3c4860;
  --tn-deep:#d4ad53; --tn-soft:#27231a; --tn-fill:#9c7f3c;
  --tn-red:#f19282; --tn-on-deep:#1a2742;
  --tn-shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 26px -18px rgba(0,0,0,.8);
}
:root{
  --tn-rough:#d9eacd; --tn-rough-dot:rgba(62,120,58,.17);
  --tn-green:#a9dca0; --tn-green-edge:#5aa653;
  --tn-pen-band:#d0463b; --tn-pen-edge:#b93a30; --tn-pen-glow:#ff5a4b; --tn-pen-ink:#ffffff; --tn-pen-badge:#c92d24; --tn-pen-hatch:#ffffff; --tn-pen-ui:#b8342c;
  --tn-app-band:#437d4a; --tn-app-edge:#2f6136; --tn-app-glow:#ff8a1f; --tn-app-ink:#ffffff; --tn-app-badge:#de711d; --tn-app-hatch:#ffffff; --tn-app-ui:#b4520e; --tn-app-tuft:#8fc48a;
  --tn-bun-band:#f0d9a2; --tn-bun-edge:#c9a55a; --tn-bun-glow:#f5b300; --tn-bun-ink:#5b4410; --tn-bun-badge:#daae25; --tn-bun-hatch:#8a6a1f; --tn-bun-ui:#8a6a0e; --tn-bun-dot:#c9a55a;
  --tn-fwy-band:#c6e8b6; --tn-fwy-edge:#5f9f55; --tn-fwy-glow:transparent; --tn-fwy-ink:#23502c; --tn-fwy-badge:#858485; --tn-fwy-hatch:#2f6b3a; --tn-fwy-ui:#4c6b57; --tn-fwy-stripe:rgba(255,255,255,.5);
  --tn-ez1-band:#d2eee8; --tn-ez1-edge:#58a99a; --tn-ez1-glow:transparent; --tn-ez1-ink:#1d5a50; --tn-ez1-badge:#2c9c8b; --tn-ez1-hatch:#1d5a50; --tn-ez1-ui:#237a6e;
  --tn-ez2-band:#bfe2ee; --tn-ez2-edge:#4b98b6; --tn-ez2-glow:transparent; --tn-ez2-ink:#1a4d61; --tn-ez2-badge:#2b80a8; --tn-ez2-hatch:#1a4d61; --tn-ez2-ui:#1f6a8a;
  --tn-badge-ring:#ffffff; --tn-badge-num:#ffffff; --tn-badge-num-edge:rgba(20,30,40,.45);
  --tn-circle:#2f6fa3; --tn-circle-fill:rgba(47,111,163,.10);
  --tn-pinring:#dc6b61; --tn-pinring-fill:rgba(208,70,59,.07); --tn-pin-text:#b8342c;
  --tn-ink-map:#1a2742; --tn-flag:#d0463b; --tn-cup:#ffffff;
  --tn-dir:#3d5260; --tn-halo:rgba(255,255,255,.86); --tn-pill:rgba(255,255,255,.93);
  --tn-edit:#1c3d5a; --tn-edit-under:rgba(255,255,255,.95);
  --tn-why-bg:#fff3c7; --tn-thumb-shadow:rgba(0,0,0,.3);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --tn-rough:#15271c; --tn-rough-dot:rgba(150,210,150,.10);
    --tn-green:#2e5c36; --tn-green-edge:#6cbf63;
    --tn-pen-band:#d64a3e; --tn-pen-edge:#e2685d; --tn-pen-glow:#ff6a5a; --tn-pen-ink:#ffffff; --tn-pen-badge:#c92d24; --tn-pen-hatch:#ffffff; --tn-pen-ui:#f19282;
    --tn-app-band:#24472a; --tn-app-edge:#4f8a55; --tn-app-glow:#ff9d4a; --tn-app-ink:#ffffff; --tn-app-badge:#de711d; --tn-app-hatch:#ffffff; --tn-app-ui:#f0a060; --tn-app-tuft:#3f7446;
    --tn-bun-band:#cdb57a; --tn-bun-edge:#e6d198; --tn-bun-glow:#f2c94c; --tn-bun-ink:#2e2206; --tn-bun-badge:#daae25; --tn-bun-hatch:#5e4712; --tn-bun-ui:#e2c064; --tn-bun-dot:#a8904f;
    --tn-fwy-band:#4a7d50; --tn-fwy-edge:#8fd185; --tn-fwy-glow:transparent; --tn-fwy-ink:#ffffff; --tn-fwy-badge:#858485; --tn-fwy-hatch:#ffffff; --tn-fwy-ui:#a9cdb3; --tn-fwy-stripe:rgba(255,255,255,.12);
    --tn-ez1-band:#2b6258; --tn-ez1-edge:#6fc6b5; --tn-ez1-glow:transparent; --tn-ez1-ink:#ffffff; --tn-ez1-badge:#2c9c8b; --tn-ez1-hatch:#ffffff; --tn-ez1-ui:#86d6c7;
    --tn-ez2-band:#285a70; --tn-ez2-edge:#6cbcd8; --tn-ez2-glow:transparent; --tn-ez2-ink:#ffffff; --tn-ez2-badge:#2b80a8; --tn-ez2-hatch:#ffffff; --tn-ez2-ui:#8ccbe3;
    --tn-badge-ring:#ffffff; --tn-badge-num:#ffffff; --tn-badge-num-edge:rgba(20,30,40,.45);
    --tn-circle:#8ccaf2; --tn-circle-fill:rgba(140,202,242,.12);
    --tn-pinring:#f19a90; --tn-pinring-fill:rgba(241,154,144,.08); --tn-pin-text:#f5a89e;
    --tn-ink-map:#eef4f8; --tn-flag:#ff6b5b; --tn-cup:#e3efe4;
    --tn-dir:#b6c7d2; --tn-halo:rgba(13,26,19,.86); --tn-pill:rgba(13,26,19,.9);
    --tn-edit:#f4f8fb; --tn-edit-under:rgba(8,16,12,.9);
    --tn-why-bg:#3a3316; --tn-thumb-shadow:rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --tn-rough:#15271c; --tn-rough-dot:rgba(150,210,150,.10);
  --tn-green:#2e5c36; --tn-green-edge:#6cbf63;
  --tn-pen-band:#d64a3e; --tn-pen-edge:#e2685d; --tn-pen-glow:#ff6a5a; --tn-pen-ink:#ffffff; --tn-pen-badge:#c92d24; --tn-pen-hatch:#ffffff; --tn-pen-ui:#f19282;
  --tn-app-band:#24472a; --tn-app-edge:#4f8a55; --tn-app-glow:#ff9d4a; --tn-app-ink:#ffffff; --tn-app-badge:#de711d; --tn-app-hatch:#ffffff; --tn-app-ui:#f0a060; --tn-app-tuft:#3f7446;
  --tn-bun-band:#cdb57a; --tn-bun-edge:#e6d198; --tn-bun-glow:#f2c94c; --tn-bun-ink:#2e2206; --tn-bun-badge:#daae25; --tn-bun-hatch:#5e4712; --tn-bun-ui:#e2c064; --tn-bun-dot:#a8904f;
  --tn-fwy-band:#4a7d50; --tn-fwy-edge:#8fd185; --tn-fwy-glow:transparent; --tn-fwy-ink:#ffffff; --tn-fwy-badge:#858485; --tn-fwy-hatch:#ffffff; --tn-fwy-ui:#a9cdb3; --tn-fwy-stripe:rgba(255,255,255,.12);
  --tn-ez1-band:#2b6258; --tn-ez1-edge:#6fc6b5; --tn-ez1-glow:transparent; --tn-ez1-ink:#ffffff; --tn-ez1-badge:#2c9c8b; --tn-ez1-hatch:#ffffff; --tn-ez1-ui:#86d6c7;
  --tn-ez2-band:#285a70; --tn-ez2-edge:#6cbcd8; --tn-ez2-glow:transparent; --tn-ez2-ink:#ffffff; --tn-ez2-badge:#2b80a8; --tn-ez2-hatch:#ffffff; --tn-ez2-ui:#8ccbe3;
  --tn-badge-ring:#ffffff; --tn-badge-num:#ffffff; --tn-badge-num-edge:rgba(20,30,40,.45);
  --tn-circle:#8ccaf2; --tn-circle-fill:rgba(140,202,242,.12);
  --tn-pinring:#f19a90; --tn-pinring-fill:rgba(241,154,144,.08); --tn-pin-text:#f5a89e;
  --tn-ink-map:#eef4f8; --tn-flag:#ff6b5b; --tn-cup:#e3efe4;
  --tn-dir:#b6c7d2; --tn-halo:rgba(13,26,19,.86); --tn-pill:rgba(13,26,19,.9);
  --tn-edit:#f4f8fb; --tn-edit-under:rgba(8,16,12,.9);
  --tn-why-bg:#3a3316; --tn-thumb-shadow:rgba(0,0,0,.55);
}
[data-tn-k="pen"]{--tn-k:var(--tn-pen-band); --tn-k-edge:var(--tn-pen-edge); --tn-k-glow:var(--tn-pen-glow); --tn-k-ink:var(--tn-pen-ink); --tn-k-badge:var(--tn-pen-badge); --tn-k-hatch:var(--tn-pen-hatch); --tn-k-ui:var(--tn-pen-ui)}
[data-tn-k="app"]{--tn-k:var(--tn-app-band); --tn-k-edge:var(--tn-app-edge); --tn-k-glow:var(--tn-app-glow); --tn-k-ink:var(--tn-app-ink); --tn-k-badge:var(--tn-app-badge); --tn-k-hatch:var(--tn-app-hatch); --tn-k-ui:var(--tn-app-ui)}
[data-tn-k="bun"]{--tn-k:var(--tn-bun-band); --tn-k-edge:var(--tn-bun-edge); --tn-k-glow:var(--tn-bun-glow); --tn-k-ink:var(--tn-bun-ink); --tn-k-badge:var(--tn-bun-badge); --tn-k-hatch:var(--tn-bun-hatch); --tn-k-ui:var(--tn-bun-ui)}
[data-tn-k="fwy"]{--tn-k:var(--tn-fwy-band); --tn-k-edge:var(--tn-fwy-edge); --tn-k-glow:var(--tn-fwy-glow); --tn-k-ink:var(--tn-fwy-ink); --tn-k-badge:var(--tn-fwy-badge); --tn-k-hatch:var(--tn-fwy-hatch); --tn-k-ui:var(--tn-fwy-ui)}
[data-tn-k="ez1"]{--tn-k:var(--tn-ez1-band); --tn-k-edge:var(--tn-ez1-edge); --tn-k-glow:var(--tn-ez1-glow); --tn-k-ink:var(--tn-ez1-ink); --tn-k-badge:var(--tn-ez1-badge); --tn-k-hatch:var(--tn-ez1-hatch); --tn-k-ui:var(--tn-ez1-ui)}
[data-tn-k="ez2"]{--tn-k:var(--tn-ez2-band); --tn-k-edge:var(--tn-ez2-edge); --tn-k-glow:var(--tn-ez2-glow); --tn-k-ink:var(--tn-ez2-ink); --tn-k-badge:var(--tn-ez2-badge); --tn-k-hatch:var(--tn-ez2-hatch); --tn-k-ui:var(--tn-ez2-ui)}
.tn{display:flex; flex-direction:column; gap:12px}
.tn [hidden]{display:none !important}
.tn p{margin:0}
.tn button{font-family:inherit}
.tn-h{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px}
.tn-lead{font-size:14.5px; line-height:1.8; color:var(--tn-ink-2); text-wrap:pretty; word-break:auto-phrase}
.tn-card{background:var(--tn-surface); border:1px solid var(--tn-line); border-radius:16px; box-shadow:var(--tn-shadow); overflow:hidden}
.tn-nw{white-space:nowrap}
.tn-panels{display:grid; grid-template-columns:minmax(0,1fr); gap:10px}
@media (min-width:700px){ .tn-panels{grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start} }
.tn-panel{--tn-pc:var(--tn-deep); display:flex; flex-direction:column; gap:9px; padding:10px 12px 12px; border-radius:16px; background:var(--tn-surface);
  border:1.5px solid var(--tn-line-2); border-color:color-mix(in srgb, var(--tn-pc) 36%, var(--tn-line)); box-shadow:var(--tn-shadow);
  transition:border-color .15s ease, box-shadow .15s ease}
.tn-panel-obs{--tn-pc:var(--tn-k-ui)}
.tn-panel.is-active{border-color:var(--tn-pc); box-shadow:0 0 0 1.5px var(--tn-pc), var(--tn-shadow)}
.tn-panel-h{display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; min-height:26px}
.tn-panel-t{font-family:var(--tn-round); font-weight:800; font-size:18px; line-height:1.3; color:var(--tn-pc)}
.tn-now{flex:none; padding:1px 8px; border-radius:999px; background:var(--tn-pc); color:var(--tn-on-deep);
  font-family:var(--tn-round); font-weight:800; font-size:11px; line-height:1.6; letter-spacing:.06em}
.tn-panel .tn-panel-s{margin-left:auto; font-family:var(--tn-round); font-weight:800; font-size:13px; line-height:1.4; color:var(--tn-ink-2); text-align:right; font-variant-numeric:tabular-nums}
.tn-fld{display:flex; flex-direction:column; gap:5px}
.tn-fld-h{font-family:var(--tn-round); font-weight:800; font-size:12.5px; line-height:1.4; color:var(--tn-ink-2)}
.tn-seg{display:grid; gap:6px}
.tn-seg3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tn-seg4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tn-opt{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-width:0; min-height:46px; padding:4px 2px;
  border-radius:12px; border:1.5px solid var(--tn-line-2); background:var(--tn-surface); color:var(--tn-ink-2);
  font-family:var(--tn-round); font-weight:800; font-size:clamp(12.5px,3.6vw,14.5px); line-height:1.2; white-space:nowrap;
  cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .15s ease, border-color .15s ease, color .15s ease}
.tn-opt svg{display:block; width:18px; height:18px; flex:none}
.tn-opt[aria-pressed="true"]{background:var(--tn-deep); border-color:var(--tn-deep); color:var(--tn-on-deep)}
.tn-ic-g{fill:none; stroke:currentColor; stroke-width:1.6}
.tn-ic-p{fill:var(--tn-k-badge)}
.tn-ic-d{fill:currentColor}
.tn-opt[aria-pressed="true"] .tn-ic-p{fill:currentColor}
.tn-bdg{display:inline-flex; align-items:center; justify-content:center; flex:none; min-width:18px; height:18px; padding:0 3px; border-radius:9px; background:var(--tn-k-badge);
  font-family:var(--tn-round); font-weight:800; font-size:11.5px; line-height:1; color:var(--tn-badge-num); white-space:nowrap;
  box-shadow:0 0 0 1.5px var(--tn-badge-ring); text-shadow:0 0 2px var(--tn-badge-num-edge); font-variant-numeric:tabular-nums}
.tn-sidegrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-areas:". b ." "l g r" ". f ."; gap:6px; align-items:stretch}
.tn-sidegrid [data-side="back"]{grid-area:b} .tn-sidegrid [data-side="front"]{grid-area:f}
.tn-sidegrid [data-side="left"]{grid-area:l} .tn-sidegrid [data-side="right"]{grid-area:r}
.tn-sidegrid-g{grid-area:g; display:flex; align-items:center; justify-content:center; min-height:46px}
.tn-sidegrid-g svg{display:block; width:100%; max-width:96px; height:auto}
.tn-sidegrid-g ellipse{fill:var(--tn-green); stroke:var(--tn-green-edge); stroke-width:1.6}
.tn-sidegrid-g text{font-family:var(--tn-round); font-weight:800; font-size:10px; fill:var(--tn-ink-map)}
.tn-side{gap:3px}
.tn-side-l{display:inline-flex; align-items:center; gap:5px}
.tn-side[aria-pressed="true"]{background:var(--tn-k-ui); border-color:var(--tn-k-ui); color:var(--tn-on-deep)}
.tn-sc{gap:3px; padding:5px 3px; min-height:52px}
.tn-sc-pt{display:inline-flex; align-items:center; gap:2px; font-size:12.5px; line-height:1}
.tn-sc-name{white-space:normal; text-align:center; line-height:1.25; font-size:.94em}
.tn-sc[aria-pressed="true"]{background:var(--tn-k-ui); border-color:var(--tn-k-ui); color:var(--tn-on-deep)}
.tn-desc-row{display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px}
.tn-desc{flex:1 1 auto; min-width:0; font-size:12.5px; line-height:1.5; color:var(--tn-ink-2); word-break:auto-phrase}
.tn-reset{flex:none; display:inline-flex; align-items:center; min-height:44px; margin-right:-4px; padding:0 4px; border:0; background:transparent; color:var(--tn-ink-2);
  font-family:var(--tn-round); font-weight:800; font-size:12px; line-height:1; cursor:pointer; -webkit-tap-highlight-color:transparent}
.tn-reset span{display:inline-block; padding:6px 11px; border-radius:999px; border:1.5px solid var(--tn-line-2); background:var(--tn-surface-2); white-space:nowrap}
.tn-reset:disabled{cursor:default}
.tn-reset:disabled span{opacity:.45}
.tn-dist-row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.tn-val{display:flex; align-items:baseline; justify-content:center; gap:6px; font-family:var(--tn-round); font-weight:800; color:var(--tn-ink)}
.tn-val-v{font-size:clamp(30px,8.6vw,38px); line-height:1.15; font-variant-numeric:tabular-nums}
.tn-val-u{font-size:15px; color:var(--tn-ink-2)}
.tn-nudge{flex:none; min-width:54px; min-height:44px; padding:0 10px; border-radius:12px; border:1.5px solid var(--tn-fill); background:var(--tn-surface); color:var(--tn-deep);
  font-family:var(--tn-round); font-weight:800; font-size:16px; line-height:1; cursor:pointer; -webkit-tap-highlight-color:transparent}
.tn-nudge:disabled{opacity:.4; cursor:default}
.tn-range{-webkit-appearance:none; appearance:none; width:100%; height:32px; margin:0; background:transparent; cursor:pointer}
.tn-range::-webkit-slider-runnable-track{height:8px; border-radius:999px; background:var(--tn-line-2)}
.tn-range::-moz-range-track{height:8px; border-radius:999px; background:var(--tn-line-2)}
.tn-range::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:28px; height:28px; margin-top:-10px; border-radius:50%; background:var(--tn-deep); border:3px solid var(--tn-surface); box-shadow:0 1px 4px var(--tn-thumb-shadow)}
.tn-range::-moz-range-thumb{width:28px; height:28px; box-sizing:border-box; border-radius:50%; background:var(--tn-deep); border:3px solid var(--tn-surface); box-shadow:0 1px 4px var(--tn-thumb-shadow)}
.tn-ticks{position:relative; height:13px; margin-top:-4px}
.tn-ticks span{position:absolute; top:0; left:calc(14px + (100% - 28px) * var(--tn-f)); transform:translateX(-50%);
  font-family:var(--tn-round); font-weight:800; font-size:11px; line-height:1; color:var(--tn-ink-2); font-variant-numeric:tabular-nums}
.tn-opt:focus-visible,.tn-nudge:focus-visible,.tn-reset:focus-visible{outline:2px solid var(--tn-deep); outline-offset:2px}
.tn-range:focus-visible{outline:2px solid var(--tn-deep); outline-offset:4px; border-radius:8px}
@media (hover:hover){
  .tn-opt:hover{border-color:var(--tn-fill)}
  .tn-side:hover,.tn-sc:hover{border-color:var(--tn-k-ui)}
  .tn-reset:not(:disabled):hover span{border-color:var(--tn-k-ui)}
}
.tn-fig{margin:0; display:flex; flex-direction:column; gap:7px; padding:0 0 12px}
.tn-map{display:flex; justify-content:center; border-bottom:1px solid var(--tn-line);
  background-color:var(--tn-rough); background-image:radial-gradient(var(--tn-rough-dot) 1px, transparent 1.6px); background-size:10px 10px}
.tn-svg{display:block; width:100%; max-width:470px; height:auto; overflow:hidden; -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none; touch-action:manipulation}
.tn-hint{font-size:12.5px; line-height:1.6; color:var(--tn-ink-2); text-align:center; padding:0 14px}
.tn-svg *{pointer-events:none}
.tn-svg .tn-hit{fill:transparent; pointer-events:all; cursor:pointer}
.tn-svg text{font-family:var(--tn-round); font-weight:800}
.tn-green{fill:var(--tn-green); stroke:var(--tn-green-edge); stroke-width:2.5}
.tn-sec-fill{fill:var(--tn-k); stroke:var(--tn-k-edge); stroke-width:1.5; stroke-linejoin:round; transition:fill .2s ease, stroke .2s ease}
.tn-sec-glow{fill:var(--tn-k-glow); stroke:var(--tn-k-glow); stroke-width:4; opacity:.7}
.tn-glow-w{visibility:hidden}
.tn-sec.is-hot .tn-glow-w{visibility:visible}   
.tn-tuft{fill:none; stroke:var(--tn-app-tuft); stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round}
.tn-sanddot{fill:var(--tn-bun-dot)}
.tn-mow{fill:var(--tn-fwy-stripe)}
.tn-edit-under{fill:none; stroke:var(--tn-edit-under); stroke-width:6; stroke-linejoin:round}
.tn-edit{fill:none; stroke:var(--tn-edit); stroke-width:2.6; stroke-linejoin:round}
.tn-badge{fill:var(--tn-k-badge); stroke:var(--tn-badge-ring); stroke-width:1.8}
.tn-badge-num{font-size:11.5px; fill:var(--tn-badge-num); paint-order:stroke fill; stroke:var(--tn-badge-num-edge); stroke-width:1.6px; stroke-linejoin:round}
.tn-cup{fill:var(--tn-cup); stroke:var(--tn-ink-map); stroke-width:1.3; opacity:.42; transition:opacity .2s ease}
.tn-pinopt.is-on .tn-cup{opacity:1}
.tn-pinring{fill:var(--tn-pinring-fill); stroke:var(--tn-pinring); stroke-width:2.2; stroke-dasharray:5 4}
.tn-pinring-in{stroke:var(--tn-k-ink); stroke-width:2.2; stroke-dasharray:5 4}
.tn-hatch-line{fill:var(--tn-k-hatch); opacity:.45}
.tn-aimring{fill:var(--tn-circle-fill); stroke:var(--tn-circle); stroke-width:2.4; stroke-dasharray:7 5}
.tn-x-under{fill:none; stroke:var(--tn-halo); stroke-width:7; stroke-linecap:round}
.tn-x{fill:none; stroke:var(--tn-ink-map); stroke-width:3.4; stroke-linecap:round}
.tn-hole{fill:var(--tn-ink-map)}
.tn-pole{stroke:var(--tn-ink-map); stroke-width:2; stroke-linecap:round}
.tn-cloth{fill:var(--tn-flag); stroke:var(--tn-halo); stroke-width:1.2; stroke-linejoin:round}
.tn-t-dir{font-size:13.5px; fill:var(--tn-dir)}
.tn-t-aim{font-size:12.5px; fill:var(--tn-ink-map)}
.tn-pill{fill:var(--tn-pill)}
.tn-t-circ{font-size:11px; fill:var(--tn-circle)}
.tn-t-pin{font-size:11px; fill:var(--tn-pin-text)}
.tn-t-go{font-size:11.5px; fill:var(--tn-dir)}
.tn-halo{paint-order:stroke fill; stroke:var(--tn-halo); stroke-width:3.2px; stroke-linejoin:round}
.tn-golfer{fill:var(--tn-ink-map); opacity:.72}
.tn-club{stroke:var(--tn-ink-map); stroke-width:2; stroke-linecap:round; opacity:.72}
.tn-arrow{stroke:var(--tn-dir); stroke-width:2.4; stroke-linecap:round}
.tn-arrowhead{fill:var(--tn-dir)}
@media (hover:hover){
  .tn-pinopt:hover .tn-cup{opacity:.9}
}
@keyframes tn-glow{0%,100%{opacity:.95} 50%{opacity:.1}}
@media (prefers-reduced-motion: no-preference){
  .tn-sec-glow{animation:tn-glow 2.4s ease-in-out infinite}
}
@media (prefers-reduced-motion: reduce){
  .tn-opt,.tn-cup,.tn-panel,.tn-sec-fill{transition:none}
}
.tn-out{display:flex; flex-direction:column; gap:9px; margin:0 14px 16px; padding:14px 15px; border-radius:14px; background:var(--tn-soft); border:1.5px solid var(--tn-fill)}
.tn-say{display:flex; flex-direction:column; gap:6px}
.tn-ans{font-family:var(--tn-round); font-weight:800; font-size:clamp(20px,5.8vw,24px); line-height:1.45; color:var(--tn-deep)}
.tn-warn{font-size:13.5px; line-height:1.7; font-weight:700; color:var(--tn-red); word-break:auto-phrase}
.tn-why{font-size:13px; line-height:1.7; color:var(--tn-deep); word-break:auto-phrase}
.tn-tbl-w{border-radius:10px; overflow:hidden; border:1px solid var(--tn-line); background:var(--tn-surface)}
.tn-tbl{width:100%; border-collapse:collapse; table-layout:fixed; font-size:13px; line-height:1.45; color:var(--tn-ink)}
.tn-tbl caption{caption-side:top; text-align:left; padding:7px 8px 5px; font-family:var(--tn-round); font-weight:800; font-size:12.5px; line-height:1.4; color:var(--tn-ink-2); background:var(--tn-surface)}
.tn-tbl col.tn-col-dir{width:14%} .tn-tbl col.tn-col-sc{width:13%} .tn-tbl col.tn-col-need{width:33%} .tn-tbl col.tn-col-edge{width:40%}
.tn-tbl th,.tn-tbl td{padding:6px 5px; border-top:1px solid var(--tn-line); text-align:left; vertical-align:middle; font-variant-numeric:tabular-nums}
.tn-tbl thead th{font-family:var(--tn-round); font-weight:800; font-size:11px; line-height:1.35; color:var(--tn-ink-2); background:var(--tn-surface-2); word-break:auto-phrase}
.tn-tbl thead small{display:block; font-size:10px; font-weight:800}
.tn-tbl tbody th{font-family:var(--tn-round); font-weight:800; font-size:13.5px}
.tn-tbl tr.is-why th,.tn-tbl tr.is-why td,.tn-tbl tr.is-short th,.tn-tbl tr.is-short td{background:var(--tn-why-bg); font-weight:700}
.tn-c-need{font-size:12px; white-space:nowrap}
.tn-edge-v{font-family:var(--tn-round); font-weight:800; font-size:14px}
.tn-flag{display:inline-block; margin-left:5px; padding:1px 7px; border-radius:999px; background:var(--tn-deep); color:var(--tn-on-deep);
  font-family:var(--tn-round); font-weight:800; font-size:10.5px; line-height:1.55; white-space:nowrap; vertical-align:1px}
.tn-tbl tr.is-short .tn-flag{background:var(--tn-red)}
.tn-note{display:flex; flex-direction:column; gap:6px; font-size:13px; line-height:1.75; color:var(--tn-ink-2); text-wrap:pretty; word-break:auto-phrase}
.tn-note-h{font-family:var(--tn-round); font-weight:800; font-size:12.5px; color:var(--tn-ink-2)}
.tn-legend{margin:0; padding:0; list-style:none; display:grid; grid-template-columns:minmax(0,1fr); gap:3px 14px}
@media (min-width:560px){ .tn-legend{grid-template-columns:repeat(2,minmax(0,1fr))} }
.tn-legend li{display:flex; align-items:center; gap:8px; line-height:1.5}
/* ラウンドタブの外枠（元ページの body・h2 に当たる部分） */
.tn{box-sizing:border-box; max-width:672px; margin-inline:auto; padding:16px 16px 40px; background:var(--tn-paper);
  color:var(--tn-ink); font-family:var(--tn-sans); font-size:15px; line-height:1.85; -webkit-font-smoothing:antialiased}
.tn *,.tn *::before,.tn *::after{box-sizing:border-box}
.tn-h{font-family:var(--tn-round); font-weight:800; font-size:19px; line-height:1.5; margin:0; color:var(--tn-ink)}
.tn-note ul{margin:0}

/* ================================================================
   見出しの案切り替えと別案（案1〜案4）— 2026-09-27 UI 検討用（tabs/round-variants.js）
   ================================================================ */
.tn-host,.tn-body{display:flex; flex-direction:column; gap:12px}
.tn-top{display:flex; flex-direction:column; gap:8px; padding-bottom:12px; border-bottom:1px solid var(--tn-line)}
.tn-switch{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; padding:3px; border-radius:14px; background:var(--tn-surface-2); border:1px solid var(--tn-line)}
.tn-switch-b{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-width:0; min-height:48px; padding:4px 2px; border:0; border-radius:11px; background:transparent; color:var(--tn-ink-2)}
.tn-switch-no{font-family:var(--tn-round); font-weight:800; font-size:14px; line-height:1.2}
.tn-switch-name{font-size:10.5px; line-height:1.2; white-space:nowrap}
.tn-switch-b[aria-checked="true"]{background:var(--tn-deep); color:var(--tn-on-deep); box-shadow:var(--tn-shadow)}
.tn-switch-note{font-size:12.5px; line-height:1.6; color:var(--tn-ink-2); text-wrap:pretty; word-break:auto-phrase}

.tn-switch-b,.tv-step,.tv-dchip,.tv-chip,.tv1-pick-x,.tv2-cell,.tv-pin,.tv4-step,.tv4-dot,.tv4-a,.tv4-skip,.tv4-link,.tv4-next{
  -webkit-appearance:none; appearance:none; cursor:pointer; -webkit-tap-highlight-color:transparent; font-family:inherit}
.tn-switch-b:focus-visible,.tv-step:focus-visible,.tv-dchip:focus-visible,.tv-chip:focus-visible,.tv1-pick-x:focus-visible,.tv2-cell:focus-visible,.tv-pin:focus-visible,
.tv4-step:focus-visible,.tv4-dot:focus-visible,.tv4-a:focus-visible,.tv4-skip:focus-visible,.tv4-link:focus-visible,.tv4-next:focus-visible,.tv-ruler:focus-visible{outline:2px solid var(--tn-deep); outline-offset:2px}

/* 共通 */
.tv-hint{font-size:13px; line-height:1.65; color:var(--tn-ink-2); text-wrap:pretty; word-break:auto-phrase}
.tv-lab{font-family:var(--tn-round); font-weight:800; font-size:13px; color:var(--tn-ink-2)}
.tv-out .tn-out{margin:10px 12px 0; padding:10px 13px; gap:6px}
.tv-out .tn-ans{font-size:clamp(18px,5.2vw,22px)}
.tv-out .tn-why{display:none}   /* 別案は答えを短く（理由の説明は今の形で見られる） */
.tv-ic-line{fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round}
.tv-chip{display:flex; align-items:center; gap:6px; min-width:0; min-height:46px; padding:4px 8px;
  border-radius:12px; border:1.5px solid var(--tn-line-2); background:var(--tn-surface); color:var(--tn-ink); font-size:12px; font-weight:700; line-height:1.2; text-align:left}
.tv-chip-name{display:flex; flex-direction:column; min-width:0}
.tv-chip[aria-pressed="true"]{background:var(--tn-k-ui); border-color:var(--tn-k-ui); color:var(--tn-on-deep)}
.tv-chip[aria-pressed="true"] .tn-bdg{box-shadow:0 0 0 1.5px var(--tn-surface)}

/* 距離（±と、よく使う距離） */
.tv-dist-w{display:flex; flex-direction:column; gap:8px; padding:12px 12px 14px}
.tv-dist{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:6px}
.tv-dist-steps{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:5px}
.tv-step{min-width:0; min-height:46px; padding:0 2px; white-space:nowrap; letter-spacing:-.02em; border-radius:12px; border:1.5px solid var(--tn-fill); background:var(--tn-surface); color:var(--tn-deep);
  font-family:var(--tn-round); font-weight:800; font-size:15px; font-variant-numeric:tabular-nums}
.tv-step:disabled{opacity:.4; cursor:default}
.tv-dist-val{display:flex; align-items:baseline; justify-content:center; gap:4px; margin:0; color:var(--tn-deep); font-family:var(--tn-round); font-weight:800; white-space:nowrap}
.tv-dist-v{font-size:28px; line-height:1; font-variant-numeric:tabular-nums}
.tv-dist-l,.tv-dist-u{font-size:11px; color:var(--tn-ink-2)}
.tv-dist.is-big .tv-step{min-height:54px; font-size:16px}
.tv-dist.is-big .tv-dist-v{font-size:34px}
.tv-dchips{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px}
.tv-dchips::-webkit-scrollbar{display:none}
.tv-dchip{flex:1 1 0; min-width:0; min-height:40px; padding:0 8px; border-radius:999px; border:1px solid var(--tn-line-2); background:var(--tn-surface); color:var(--tn-ink);
  font-weight:700; font-size:14px; font-variant-numeric:tabular-nums}
.tv-dchip[aria-pressed="true"]{background:var(--tn-deep); border-color:var(--tn-deep); color:var(--tn-on-deep)}

/* 距離（横になぞる目盛り）。.tv-ruler-i の幅は round-variants.js の ITEM と同じ */
.tv-ruler-w{display:flex; flex-direction:column; gap:6px; min-width:0}
.tv-ruler-box{position:relative}
.tv-ruler{display:flex; align-items:flex-start; height:50px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none;
  padding:0 calc(50% - 7px); border-radius:10px; background:var(--tn-surface-2); -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain}
.tv-ruler::-webkit-scrollbar{display:none}
.tv-ruler-i{flex:none; position:relative; width:14px; height:100%; scroll-snap-align:center}
.tv-ruler-i::before{content:""; position:absolute; left:50%; top:0; width:1.5px; height:11px; background:var(--tn-line-2); transform:translateX(-50%)}
.tv-ruler-i.is-mid::before{height:17px; background:var(--tn-ink-2)}
.tv-ruler-i.is-major::before{height:23px; background:var(--tn-ink)}
.tv-ruler-n{position:absolute; left:50%; top:26px; transform:translateX(-50%); font-size:11px; font-weight:700; color:var(--tn-ink-2); font-variant-numeric:tabular-nums}
.tv-ruler-mark{position:absolute; left:50%; top:-3px; bottom:-3px; width:3px; margin-left:-1.5px; border-radius:2px; background:var(--tn-red); pointer-events:none}

/* ピン（グリーンの形の中に9つの点） */
.tv-pins{display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); width:128px; height:100px; padding:6px 14px;
  border-radius:50%; background:var(--tn-green); border:2px solid var(--tn-green-edge)}
.tv-pin{display:grid; place-items:center; min-width:0; padding:0; border:0; background:transparent}
.tv-pin-dot{width:14px; height:14px; border-radius:50%; background:var(--tn-cup); border:2px solid var(--tn-green-edge)}
.tv-pin[aria-pressed="true"] .tv-pin-dot{width:20px; height:20px; background:var(--tn-flag); border-color:var(--tn-cup)}
.tv-pins.is-big{width:100%; max-width:330px; height:230px; margin:0 auto; padding:16px 30px}
.tv-pins.is-big .tv-pin{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--tn-ink-map); font-size:12.5px; font-weight:800}
.tv-pins.is-big .tv-pin-dot{width:24px; height:24px}
.tv-pins.is-big .tv-pin[aria-pressed="true"] .tv-pin-dot{width:30px; height:30px}

/* 案1 図をタップ */
.tv1-stage{position:relative}
.tv1-pick{position:absolute; left:8px; right:8px; bottom:8px; display:flex; flex-direction:column; gap:6px; padding:8px; border-radius:14px;
  background:var(--tn-surface); border:1px solid var(--tn-line-2); box-shadow:0 10px 28px -10px rgba(0,0,0,.45)}
.tv1-pick.is-top{top:8px; bottom:auto}
.tv1-pick-h{display:flex; align-items:center; justify-content:space-between; gap:8px; padding-left:4px}
.tv1-pick-t{font-family:var(--tn-round); font-weight:800; font-size:15px; color:var(--tn-deep)}
.tv1-pick-x{display:grid; place-items:center; width:36px; height:36px; border-radius:50%; border:0; background:var(--tn-surface-2); color:var(--tn-ink-2)}
.tv1-pick-x svg{width:16px; height:16px}
.tv1-pick-row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px}

/* 案2 一覧で選ぶ */
.tv2-map .tn-svg{max-width:240px}
.tv2-grid{display:flex; flex-direction:column; gap:5px; padding:10px 8px 10px}
.tv2-row{display:grid; grid-template-columns:50px repeat(6,minmax(0,1fr)); gap:4px; align-items:center}
.tv2-lab{display:flex; align-items:center; gap:3px; font-family:var(--tn-round); font-weight:800; font-size:13.5px; color:var(--tn-ink); white-space:nowrap}
.tv2-lab svg{width:16px; height:16px; flex:none}
.tv2-hc{display:flex; flex-direction:column; align-items:center; gap:2px; min-width:0}
.tv2-hn{font-size:9.5px; line-height:1.15; color:var(--tn-ink-2); text-align:center; white-space:nowrap; letter-spacing:-.02em}
.tv2-cell{min-width:0; min-height:44px; padding:0; border-radius:10px; border:1.5px solid var(--tn-line); background:var(--tn-surface); color:var(--tn-ink-2);
  font-family:var(--tn-round); font-weight:800; font-size:15px}
.tv2-cell[aria-checked="true"]{background:var(--tn-k-badge); border-color:var(--tn-k-badge); color:#fff}
.tv2-bottom{display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:center; padding:10px 12px 12px}
.tv2-pinbox{display:flex; flex-direction:column; align-items:center; gap:4px}

/* 案3 スタンプ */
.tv3-pal{display:flex; flex-direction:column; gap:8px; padding:10px 8px}
.tv3-pal-row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px}
.tv3-hint{font-size:12.5px; line-height:1.6; color:var(--tn-ink-2); padding:0 4px; text-wrap:pretty; word-break:auto-phrase}

/* 案4 2画面 */
.tv4-steps{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.tv4-step{display:flex; align-items:center; justify-content:center; gap:6px; min-height:44px; border-radius:12px; border:1.5px solid var(--tn-line-2); background:var(--tn-surface);
  color:var(--tn-ink-2); font-family:var(--tn-round); font-weight:800; font-size:14px}
.tv4-step-n{display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--tn-surface-2); font-size:12px}
.tv4-step[aria-current="step"]{background:var(--tn-deep); border-color:var(--tn-deep); color:var(--tn-on-deep)}
.tv4-step[aria-current="step"] .tv4-step-n{background:var(--tn-on-deep); color:var(--tn-deep)}
.tv4-hole,.tv4-shot{display:flex; flex-direction:column; gap:12px}
.tv4-dots{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px}
.tv4-dot{display:flex; flex-direction:column; align-items:center; gap:2px; min-width:0; min-height:50px; padding:5px 2px; border-radius:10px; border:1.5px solid var(--tn-line);
  background:var(--tn-surface); color:var(--tn-ink-2); font-size:11.5px; font-weight:700}
.tv4-dot[aria-current="true"]{border-color:var(--tn-deep); color:var(--tn-deep); box-shadow:0 0 0 1.5px var(--tn-deep)}
.tv4-dot-v{font-family:var(--tn-round); font-weight:800; font-size:13px; color:var(--tn-ink); white-space:nowrap}
.tv4-dot-v[data-tn-k]{color:var(--tn-k-ui)}
.tv4-q{display:flex; flex-direction:column; gap:12px; padding:14px 12px}
.tv4-q-h{display:flex; align-items:center; gap:10px}
.tv4-q-ic{flex:none; color:var(--tn-deep)}
.tv4-q-ic svg{display:block; width:44px; height:44px}
.tv4-q-t{font-family:var(--tn-round); font-weight:800; font-size:20px; line-height:1.35; color:var(--tn-deep)}
.tv4-answers{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.tv4-a{display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; column-gap:8px; row-gap:2px; align-items:center; min-height:74px; padding:9px 10px;
  text-align:left; border-radius:14px; border:2px solid var(--tn-line-2); border-left:7px solid var(--tn-k-badge); background:var(--tn-surface); color:var(--tn-ink)}
.tv4-a .tn-bdg{grid-row:1 / span 2; min-width:26px; height:26px; border-radius:13px; font-size:14px}
.tv4-a-name{font-family:var(--tn-round); font-weight:800; font-size:15px; line-height:1.3}
.tv4-a-word{font-size:11px; line-height:1.4; color:var(--tn-ink-2)}
.tv4-a[aria-pressed="true"]{background:var(--tn-k-ui); border-color:var(--tn-k-ui); color:var(--tn-on-deep)}
.tv4-a[aria-pressed="true"] .tv4-a-word{color:inherit; opacity:.85}
.tv4-skip{align-self:center; min-height:40px; padding:0 14px; border:0; background:transparent; color:var(--tn-ink-2); text-decoration:underline; font-size:13px}
.tv4-sumrow{display:flex; align-items:center; gap:8px}
.tv4-sum{flex:1; min-width:0; font-size:13px; font-weight:700; line-height:1.5; color:var(--tn-ink-2)}
.tv4-link{flex:none; min-height:38px; padding:0 14px; border-radius:999px; border:1.5px solid var(--tn-fill); background:var(--tn-surface); color:var(--tn-deep); font-weight:800; font-size:13px}
.tv4-next{min-height:48px; border-radius:14px; border:1.5px dashed var(--tn-line-2); background:transparent; color:var(--tn-ink-2); font-weight:700; font-size:14px}