/* 結石島：選擇器都加前綴，不影響全站樣式 */
.sg {
    --bg: #e7efe9; --surface: #f8fbf9; --surface-2: #d8e3dc;
    --ink: #16232b; --ink-soft: #4a5f6b; --ink-faint: #536570; --line: #c8d6cd;
    --accent: #0f7a6c; --accent-soft: #e3f2ef; --accent-ink: #0a5f54;
    --stone: #e0a12b; --stone-edge: #a86f10;
    --kidney: #d9978a; --kidney-edge: #a9604f; --sinus: #f4d9cd; --ureter: #c98472;
    --bladder: #f3e6c2; --bladder-edge: #c8a95e; --prostate: #d8b49b; --prostate-edge: #a87e60;
    --body: #c6d6cc;
    --map-bg: #eef5f0; --dot: #dde8e0;
    --scope: #16232b; --laser: #2fbf71; --wave: #3a8fd6; --stent: #3a8fd6; --wound: #c0392b;
    --warn: #9a5c00; --bad: #b03a2e;
    --radius: 14px;
    --shadow: 0 1px 2px rgba(16, 35, 43, 0.05), 0 8px 24px rgba(16, 35, 43, 0.06);
    --font: "Noto Sans TC", "Source Han Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  }
  @media (prefers-color-scheme: dark) {
    .sg {
      --bg: #0f1619; --surface: #172126; --surface-2: #1d2a30;
      --ink: #e7eef1; --ink-soft: #b0c2ca; --ink-faint: #9aa8a5; --line: #2a3940;
      --accent: #4ecdb8; --accent-soft: #16302c; --accent-ink: #7fe0cf;
      --stone: #f0b445; --stone-edge: #c48a22;
      --kidney: #a8685c; --kidney-edge: #d49383; --sinus: #c99a8a; --ureter: #c07d6c;
      --bladder: #4a4535; --bladder-edge: #d6bd7e; --prostate: #6f5a4c; --prostate-edge: #c6a083;
      --body: #2f4048;
      --map-bg: #132026; --dot: #1f2f36;
      --scope: #e7eef1; --laser: #5be39a; --wave: #6fb6f0; --stent: #6fb6f0; --wound: #ff7b6b;
      --warn: #f0b445; --bad: #ff8a7a;
      --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
    }
  }
  .sg, .sg * { box-sizing: border-box; }
  .sg { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); line-height: 1.7; }
  .sg .sg-wrap { max-width: 72rem; margin: 0 auto; padding: .5rem var(--pad) 3rem; }
  .sg .sg-crumb { max-width: 72rem; margin: 0 auto; padding: 1rem var(--pad) 0; }
  .sg .eyebrow { margin: 0; font-size: .8rem; letter-spacing: .12em; color: var(--accent); font-weight: 700; }
  .sg h1 { margin: .2rem 0 .3rem; font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.3; }
  .sg .lede { margin: 0 0 .8rem; color: var(--ink-soft); }
  .sg .er {
    margin: 0 0 1rem; padding: .6rem .9rem; border-radius: 10px; font-size: .92rem;
    background: color-mix(in srgb, var(--bad) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--bad) 35%, var(--line));
  }

  .sg .game { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1rem; align-items: start; }
  @media (max-width: 760px) { .sg .game { grid-template-columns: 1fr; } }

  .sg .field {
    position: relative; background-color: var(--map-bg);
    background-image: radial-gradient(var(--dot) 1.2px, transparent 1.3px); background-size: 18px 18px;
    border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: .75rem;
  }
  @media (min-width: 761px) { .sg .field { position: sticky; top: 1rem; } }
  .sg .field svg { display: block; width: 100%; height: auto; max-height: 68vh; margin: 0 auto; }
  @media (max-width: 760px) { .sg .field svg { max-height: 50vh; } }
  .sg .caption { min-height: 1.6em; margin: .3rem 0 0; text-align: center; font-weight: 700; color: var(--accent-ink); }
  .sg .fig-note { margin: .1rem 0 0; text-align: center; font-size: .78rem; font-weight: 400; color: var(--ink-soft); }
  .sg .mobile-hint { display: none; text-align: center; font-size: .85rem; color: var(--ink-faint); margin: 0; }
  @media (max-width: 760px) { .sg .mobile-hint { display: block; } }
  .sg .mobile-hint[hidden] { display: none; }

  /* 結石血條 */
  .sg .hp { display: flex; align-items: center; gap: .5rem; max-width: 18rem; margin: .4rem auto 0; font-size: .82rem; color: var(--ink-soft); }
  .sg .hp[hidden] { display: none; }
  .sg .hp-bar { flex: 1; height: 10px; border-radius: 99px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--line); }
  .sg .hp-bar i { display: block; height: 100%; width: 100%; background: var(--stone); transition: width .25s; }

  .sg .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem; }
  .sg .panel h2 { margin: 0 0 .3rem; font-size: 1.25rem; }
  .sg .hint { margin: 0 0 .7rem; color: var(--ink-soft); font-size: .95rem; }
  .sg .disclaim { margin: 0 0 .9rem; font-size: .88rem; color: var(--ink-soft); padding: .45rem .7rem; border-left: 3px solid var(--stone); background: var(--bg); border-radius: 0 8px 8px 0; }

  /* 三步進度 */
  .sg .steps { display: flex; gap: .4rem; margin: 0 0 1rem; padding: 0; list-style: none; counter-reset: s; }
  .sg .steps li { flex: 1; text-align: center; font-size: .82rem; font-weight: 700; padding: .3rem .2rem; border-radius: 8px; border: 1px solid var(--line); color: var(--ink-faint); }
  .sg .steps li.on { background: var(--accent); border-color: var(--accent); color: #fff; }
  .sg .steps li.done { color: var(--accent-ink); border-color: var(--accent); }
  @media (prefers-color-scheme: dark) { .sg .steps li.on { color: #0f1619; } }

  .sg .sub { margin: 0 0 .4rem; font-size: 1.05rem; }
  .sg .opts { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
  .sg .opt {
    font: inherit; font-size: .95rem; padding: .45rem .9rem; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  }
  @media (hover: hover) { .sg .opt:hover { border-color: var(--accent); } }
  .sg .opt[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
  .sg .flash-in { animation: sg-flashIn .8s ease; }
  @keyframes sg-flashIn { from { background: var(--accent-soft); } to { background: transparent; } }
  .sg .go {
    font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer;
    border: 0; border-radius: 999px; padding: .6rem 1.3rem;
    background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(15, 122, 108, .25);
  }
  .sg .go:disabled { background: var(--surface-2); color: var(--ink-faint); cursor: not-allowed; box-shadow: none; }
  .sg .go.ghost { background: var(--surface); color: var(--accent-ink); border: 1px solid var(--accent); box-shadow: none; }
  @media (prefers-color-scheme: dark) { .sg .go { color: #0f1619; } .sg .go.ghost { color: var(--accent-ink); } .sg .go:disabled { color: var(--ink-faint); } }
  .sg .row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
  .sg .wait-note { font-size: .85rem; color: var(--ink-faint); }

  .sg .weapons { display: grid; gap: .7rem; }
  .sg .wcard { border: 1px solid var(--line); border-radius: 12px; padding: .7rem .9rem .4rem; background: var(--bg); }
  .sg .wcard.off { border-style: dashed; background: transparent; padding-bottom: .7rem; }
  .sg .wcard.off .wname { color: var(--ink-soft); font-weight: 500; }
  .sg .wtop { display: flex; align-items: baseline; gap: .3rem .5rem; flex-wrap: wrap; margin-bottom: .2rem; }
  .sg .wname { font-weight: 700; font-size: 1.05rem; }
  .sg .pick-tip { margin: .1rem 0 .4rem; font-weight: 700; color: var(--accent-ink); }
  .sg .wpick { font: inherit; font-weight: 700; font-size: 1.08rem; text-align: left; line-height: 1.4; color: var(--accent-ink); background: none; border: 0; display: inline-block; min-height: 44px; padding: .5rem .3rem .5rem 0; margin: -.3rem 0 -.2rem; border-radius: 6px; cursor: pointer; -webkit-tap-highlight-color: transparent; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }
  .sg .wpick::after { content: "›"; font-size: 1.35em; line-height: 1; margin-left: .3em; text-decoration: none; display: inline-block; vertical-align: -.05em; transition: transform .15s; }
  .sg .wpick:active { background: var(--accent-soft); }
  .sg .wpick:hover, .sg .wpick:focus-visible { text-decoration-color: var(--accent); }
  .sg .wpick:hover::after { transform: translateX(3px); }
  .sg .wpick:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
  .sg .badge { font-size: .8rem; font-weight: 700; border-radius: 6px; padding: 0 .45rem; }
  .sg .badge.first { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent-ink); }
  .sg .badge.dr { background: var(--accent); color: var(--surface); }
  .sg .badge.second { background: color-mix(in srgb, var(--warn) 15%, var(--surface)); color: var(--warn); }
  .sg .badge.no, .sg .badge.drless, .sg .badge.na, .sg .badge.notdone { background: color-mix(in srgb, var(--bad) 12%, var(--surface)); color: var(--bad); }
  .sg .odds { margin: .35rem 0 .1rem; font-size: .95rem; }
  .sg .odds b { font-size: 1.15rem; color: var(--accent-ink); }
  .sg .bar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin: .2rem 0 .5rem; }
  .sg .bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
  .sg .costs { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .5rem; padding: 0; list-style: none; }
  .sg .costs li { font-size: .8rem; padding: 0 .45rem; border-radius: 6px; border: 1px solid var(--line); color: var(--ink-soft); background: var(--surface); }
  .sg .wnote { font-size: .88rem; color: var(--ink-soft); margin: .2rem 0 .5rem; }
  .sg .more-info { margin: 0 0 .6rem; font-size: .88rem; color: var(--ink-soft); }
  .sg .more-info summary { cursor: pointer; color: var(--accent-ink); font-weight: 700; }
  .sg .more-info p { margin: .3rem 0; }

  .sg .move { font-size: 1rem; line-height: 1.8; background: var(--bg); border-radius: 10px; padding: .8rem 1rem; }

  .sg .result { border-radius: 12px; padding: .9rem 1rem; margin-bottom: 1rem; border: 1px solid var(--line); }
  .sg .result.win { background: var(--accent-soft); border-color: var(--accent); }
  .sg .result.lose { background: color-mix(in srgb, var(--warn) 10%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
  .sg .result h3 { margin: 0 0 .3rem; font-size: 1.3rem; }
  .sg .result p { margin: .3rem 0; }
  .sg .event { margin: .5rem 0; padding: .5rem .7rem; border-radius: 8px; background: var(--surface); border: 1px dashed color-mix(in srgb, var(--bad) 45%, var(--line)); }
  .sg .small { font-size: .85rem; color: var(--ink-faint); }
  .sg .remind { margin: 0 0 1rem; padding: .55rem .8rem; border-radius: 10px; font-size: .9rem; background: color-mix(in srgb, var(--bad) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--bad) 30%, var(--line)); }
  .sg .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: .5rem; margin: .4rem 0 .8rem; }
  @media (max-width: 560px) { .sg .tiles { grid-template-columns: repeat(2, 1fr); } }
  .sg .tile { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: .45rem .6rem; text-align: center; }
  .sg .tile b { display: block; font-size: 1.25rem; line-height: 1.3; }
  .sg .tile span { font-size: .78rem; color: var(--ink-soft); }
  .sg .more a { color: var(--accent-ink); }
  .sg .note { margin-top: 1.25rem; font-size: .85rem; color: var(--ink-faint); }
  .sg .note summary { cursor: pointer; color: var(--accent-ink); font-weight: 700; }

  /* SVG */
  .sg .body-line { fill: none; stroke: var(--body); stroke-width: 2.5; }
  .sg .enemy-face { fill: #3b2a12; }
  .sg .halo { fill: none; stroke: var(--stone); stroke-width: 2; opacity: .5; transform-box: fill-box; transform-origin: center; animation: sg-pulse 1.6s ease-in-out infinite; }
  @keyframes sg-pulse { 50% { opacity: .1; transform: scale(1.3); } }
  .sg .ring { fill: none; stroke: var(--wave); stroke-width: 2.5; }
  .sg .scope { fill: none; stroke: var(--scope); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
  .sg .stent { fill: none; stroke: var(--stent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 5 3; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff); }
  .sg .tract { stroke: var(--scope); stroke-linecap: round; }
  .sg .wound { stroke: var(--wound); stroke-width: 3.5; stroke-linecap: round; }
  .sg .frag { fill: var(--stone); stroke: var(--stone-edge); stroke-width: 1; }
  .sg .dust { fill: var(--stone); opacity: .8; }
  .sg .flash { fill: var(--laser); }
  .sg .src { fill: var(--wave); opacity: .3; }
  .sg .lbl { font-size: 12px; font-weight: 700; fill: var(--ink-soft); paint-order: stroke; stroke: var(--map-bg); stroke-width: 3px; }
  .sg .pop { font-size: 30px; font-weight: 900; text-anchor: middle; paint-order: stroke; stroke: var(--map-bg); stroke-width: 6px; stroke-linejoin: round; }
  .sg .pop.sm { font-size: 26px; }
  .sg .pop.win { fill: var(--accent); }
  .sg .pop.lose { fill: var(--warn); }
  @media (prefers-reduced-motion: reduce) { .sg .halo { animation: none; } }
  /* 3D 試作：器官改用畫家的 3D 底圖，只留輸尿管由程式畫（動畫要撐直、彎曲） */
  .sg .body-line, .sg #organs > g, .sg #organs > ellipse, .sg #organs > path[d^="M200, .sg 372"] { display: none; }
  .sg #organs > path[stroke="var(--ureter)"] { stroke: #eab4a3; filter: drop-shadow(1.5px 2px 1.5px rgba(110,45,30,.38)); }
  .sg #ureterR, .sg #organs > path[d^="M148, .sg 200"] { stroke-width: 9.5; }
  .sg #urethra { stroke-width: 8.5; }
  .sg .field { background: var(--surface); }
  /* 底圖永遠是淺色：圖上的顏色不跟深色模式走；鏡子改深藍加白邊才醒目 */
  .sg #svg { --ink: #16232b; --ink-soft: #4a5f6b; --accent: #0f7a6c; --accent-ink: #0a5f54; --stone: #e0a12b; --stone-edge: #a86f10;
    --map-bg: #ffffff; --bg: #eef4f1; --scope: #0b4f8f; --laser: #1fae5f; --wave: #2f7fc8; --stent: #2f7fc8; --wound: #c0392b; --warn: #9a5c00; --bad: #b03a2e;
    --kidney: #d9978a; --kidney-edge: #a9604f; --sinus: #f4d9cd; --ureter: #c98472; --bladder: #f3e6c2; --bladder-edge: #c8a95e; --prostate: #d8b49b; --prostate-edge: #a87e60; --body: #c6d6cc; }
  .sg #svg .scope { stroke-width: 5; filter: drop-shadow(0 0 1.2px #fff) drop-shadow(0 0 1.2px #fff) drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
  .sg .field .caption { color: var(--accent-ink); } .sg .field .hp { color: var(--ink-soft); } .sg .field .hp-bar { background: var(--surface-2); border-color: var(--line); }
  .sg #svg .lbl { fill: #16232b; stroke-width: 4px; }
  /* 會動的小東西：結石輕輕晃、會眨眼；尿液一滴一滴流下輸尿管 */
  .sg .bob { animation: sg-bob 1.4s ease-in-out infinite alternate; }
  @keyframes sg-bob { from { transform: translateY(1px) rotate(-4deg); } to { transform: translateY(-1.5px) rotate(4deg); } }
  .sg #face circle { transform-box: fill-box; transform-origin: center; animation: sg-blink 4.2s infinite; }
  @keyframes sg-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
  .sg .hydro-water circle { fill: #ffe58a; fill-opacity: .8; stroke: #d4a017; stroke-width: .8; }
  .sg .drop { fill: #ffe58a; stroke: #d4a017; stroke-width: .7; }
  @media (prefers-reduced-motion: reduce) { .sg .bob, .sg #face circle { animation: none; } .sg #flow { display: none; } }
  .sg #svg .tract { filter: drop-shadow(0 0 1.2px #fff) drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
  /* 結果標題旁固定標「模擬結果」，截圖單獨流傳也看得出不是真實成績 */
  .sg .simtag { display: inline-block; margin-right: .45rem; padding: 0 .45rem; border: 1px solid var(--line); border-radius: 6px; font-size: .72rem; font-weight: 700; color: var(--ink-faint); vertical-align: .2em; }
  .sg .simnote { margin: -.2rem 0 .5rem; font-size: .8rem; color: var(--ink-faint); }

/* 10-25 醫師：武器名稱改成綠底白字按鈕，比較像可以按的武器 */
.sg .wpick { background: var(--accent); color: #fff; text-decoration: none; padding: .45rem 1rem .45rem .95rem; margin: -.2rem 0 .1rem; border-radius: 999px; box-shadow: 0 2px 8px rgba(15, 122, 108, .25); }
.sg .wpick:hover, .sg .wpick:focus-visible { background: var(--accent-ink); }
.sg .wpick:active { background: var(--accent-ink); }
@media (prefers-color-scheme: dark) { .sg .wpick { color: #0f1619; } .sg .wpick:hover, .sg .wpick:focus-visible, .sg .wpick:active { background: var(--accent-ink); } }

/* 10-25 醫師：武器按鈕放在結石圖下方，選的時候看得到結石和積水 */
.sg .quick { margin: .5rem 0 .1rem; text-align: center; }
.sg .quick[hidden] { display: none; }
.sg .quick-h { margin: 0 0 .35rem; font-size: .9rem; font-weight: 700; color: var(--ink-soft); }
.sg .quick-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; }
.sg .qpick { font: inherit; font-weight: 700; font-size: .98rem; line-height: 1.25; cursor: pointer; min-height: 44px; padding: .4rem .95rem; border: 0; border-radius: 14px; background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(15, 122, 108, .25); display: inline-flex; flex-direction: column; align-items: center; -webkit-tap-highlight-color: transparent; }
.sg .qpick small { font-size: .72rem; font-weight: 500; opacity: .9; }
.sg .qpick:hover, .sg .qpick:focus-visible, .sg .qpick:active { background: var(--accent-ink); }
.sg .qpick:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sg .quick-more { margin: .4rem 0 0; font-size: .8rem; color: var(--ink-faint); }
@media (prefers-color-scheme: dark) { .sg .qpick { color: #0f1619; } }
@media (max-width: 760px) { .sg .field svg { max-height: 46vh; } }
@media (max-width: 760px) {
  .sg .quick-row { display: grid; grid-template-columns: 1fr 1fr; }
  .sg .qpick { padding: .35rem .5rem; font-size: .92rem; }
}
/* 捲到結石圖時，留出黏在上方的頁首高度 */
.sg .field { scroll-margin-top: 4.6rem; }
.sg .quick-row { display: grid; grid-template-columns: 1fr 1fr; }
/* 「不建議／醫師較少建議」用淺色外框，不跟建議的選項一樣醒目；單數時最後一顆置中 */
.sg .qpick.soft { background: var(--surface); color: var(--ink-soft); border: 1px solid var(--line); box-shadow: none; }
.sg .qpick.soft:hover, .sg .qpick.soft:focus-visible, .sg .qpick.soft:active { background: var(--bg); color: var(--ink); }
@media (prefers-color-scheme: dark) { .sg .qpick.soft { color: var(--ink-soft); } }
.sg .quick-row .qpick:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; min-width: calc(50% - .25rem); }
/* 設計師 10-25：積水標示放大、小字放大並分輕重、桌機右欄已有詳細卡就不重複 */
.sg #svg .hydro-lbl { font-size: 19px; stroke-width: 5px; fill: #b03a2e; }
.sg .qpick small { font-size: .78rem; opacity: 1; margin-top: .1rem; }
.sg .qpick small.top { background: #f6d58e; color: #4a3000; border-radius: 6px; padding: 0 .4rem; font-weight: 700; }
.sg .quick-more { font: inherit; display: inline-block; margin: .5rem 0 0; padding: .3rem .5rem; min-height: 36px; background: none; border: 0; cursor: pointer; font-size: .88rem; font-weight: 700; color: var(--accent-ink); text-decoration: underline; text-underline-offset: .2em; }
@media (min-width: 761px) { .sg .quick { display: none; } }
.sg .weapons { scroll-margin-top: 5rem; }

/* 從結石島帶島民來（10-27） */
.sg .er-note { margin: 0 0 1rem; padding: .55rem .8rem; border-radius: 10px; background: color-mix(in srgb, var(--bad) 10%, var(--surface)); color: var(--ink); font-weight: 600; border-left: 4px solid var(--bad); }
.sg a.go { display: inline-flex; align-items: center; text-decoration: none; line-height: 1.3; max-width: 100%; text-align: left; }
.sg a.go:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sg .er-note.is-calm { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
/* 音效開關（預覽）：在圖的上方靠右一行，不蓋到器官、不擋在圖和字幕之間；開、關除了顏色，框線和字重也不同 */
.sg .sfx-btn { display: flex; width: fit-content; margin: 0 0 .4rem auto; white-space: nowrap; align-items: center; gap: .3rem; min-height: 44px; padding: .4rem .85rem; font: inherit; font-size: .95rem; border-radius: 99px; border: 1px dashed var(--ink-soft); background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--ink-soft); cursor: pointer; }
.sg .sfx-btn[aria-pressed="true"] { border: 1px solid var(--accent); color: var(--accent-ink); font-weight: 600; background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
/* 第 1 步：圖上可以直接點的器官位置 */
.sg .hot { fill: transparent; stroke: transparent; stroke-width: 2; cursor: pointer; outline: none; }
.sg .hot:focus-visible { fill: color-mix(in srgb, var(--accent) 14%, transparent); stroke: var(--accent); stroke-dasharray: 5 4; }
@media (hover: hover) { .sg .hot:hover { fill: color-mix(in srgb, var(--accent) 14%, transparent); stroke: var(--accent); stroke-dasharray: 5 4; } }
.sg .hot.on { fill: color-mix(in srgb, var(--accent) 10%, transparent); stroke: var(--accent); }
.sg .hot-dot { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 3 3; opacity: .75; pointer-events: none; animation: hot-pulse 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hot-pulse { 0%, 100% { transform: scale(.85); opacity: .45; } 50% { transform: scale(1.15); opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .sg .hot-dot { animation: none; } }