@import url("/shared/fonts/fonts.css?v=20260907");

html {
    touch-action: manipulation;
}

:root {
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #f6f8fa;
    --surface-sunken: #fafbfc;
    --border: #d8dee4;
    --border-strong: #afb8c1;
    --fg: #1f2328;
    --fg-muted: #59636e;
    --fg-subtle: #8b949e;
    --accent: #0969da;
    --accent-hover: #0860c7;
    --success: #1a7f37;
    --success-bg: #dafbe1;
    --info: #0969da;
    --info-bg: #ddf4ff;
    --warn: #9a6700;
    --warn-bg: #fff8c5;
    --danger: #cf222e;
    --danger-bg: #ffebe9;
    --done: #8250df;
    --done-bg: #fbefff;
    --board-bg: #e8c583;
    --board-line: #6b5a3a;
    --board-star: #3a2e1a;
    --stone-black-0: #555;
    --stone-black-1: #000;
    --stone-white-0: #ffffff;
    --stone-white-1: #d5d5d5;
    --stone-outline: #1a1a1a;
    --stone-shadow: rgba(0,0,0,0.18);
    --heat-bg: #ffffff;
    --heat-grid: #e5e7eb;
    --heat-text: #111;
    --heat-text-inv: #ffffff;
    --shadow-xs: 0 1px 0 rgba(27,31,36,0.04);
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
  }
  html[data-theme="dark"] {
    --bg: #0d1117;
    --surface: #161b22;
    --surface-2: #21262d;
    --surface-sunken: #010409;
    --border: #30363d;
    --border-strong: #6e7681;
    --fg: #e6edf3;
    --fg-muted: #9198a1;
    --fg-subtle: #6e7681;
    --accent: #4493f8;
    --accent-hover: #539bff;
    --success: #3fb950;
    --success-bg: #0f2a1a;
    --info: #4493f8;
    --info-bg: #0f2238;
    --warn: #d29922;
    --warn-bg: #2d2200;
    --danger: #f85149;
    --danger-bg: #2d0d10;
    --done: #ab7df8;
    --done-bg: #1f1430;
    --board-bg: #c9a460;
    --board-line: #4a3a1f;
    --board-star: #2a1f0e;
    --stone-black-0: #2a2a2a;
    --stone-black-1: #000;
    --stone-white-0: #fafafa;
    --stone-white-1: #c2c2c2;
    --stone-outline: #000;
    --stone-shadow: rgba(0,0,0,0.35);
    --heat-bg: #0d1117;
    --heat-grid: #30363d;
    --heat-text: #e6edf3;
    --heat-text-inv: #ffffff;
    --shadow-xs: 0 1px 0 rgba(0,0,0,0.3);
  }
  * { box-sizing: border-box; }
  html, body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  body {
    font-family: var(--font-sans);
    font-size: 14px; line-height: 1.5;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "cv11", "ss01", "tnum";
    margin: 0; background: var(--bg); color: var(--fg);
  }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
  }

  .app { max-width: 2000px; margin: 0 auto; padding: 12px 24px 16px; }
  @media (max-width: 720px) {
    .app { padding: 8px 8px 12px; }
  }
  .topbar {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 8px 14px; padding: 8px 14px; margin-bottom: 14px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
  }
  .topbar-actions {
    display: flex; align-items: center; gap: 8px; margin-left: auto;
  }
  @media (max-width: 720px) {
    .brand-title { font-size: 18px; }
    #lang_seg, #theme_seg { display: none; }
    .topbar .topbar-actions { display: none; }
    .topbar .brand { margin-inline: auto; }
  }

  .btn--full { width: 100%; }
  .brand-title {
    font-size: 25px; font-weight: 600; letter-spacing: -0.01em;
    color: var(--fg); text-decoration: none;
  }
  /* On game pages the brand title is a link back to the home page. Give it a
     hover color shift so it reads as interactive (no underline); the plain
     <div> brand on the landing page is a non-link and is unaffected. */
  a.brand-title { transition: color 0.15s ease; }
  a.brand-title:hover { color: var(--accent); }

  /* SkyZero brand wordmark: Manrope 700 (geometric, ascenders sit at cap height
     so the camel-case "SkyZero" tops align), neutral "Sky" + rainbow "Zero".
     Gradient = 120deg (red upper-left -> violet lower-right), red held to 15%,
     vivid 7-stop via OKLab + Catmull-Rom spline, baked into stops. Pure CSS. */
  .brand-wm { font-family: var(--font-brand); font-weight: 700; letter-spacing: -0.01em; }
  .brand-wm .bw-sky { color: var(--fg); }
  .brand-wm .bw-zero {
    background: linear-gradient(120deg,
      #fb3640 0%, #fb3640 15%, #fc5132 21.1%, #fe6f11 27.1%, #ff9200 33.2%,
      #ffbb00 39.3%, #f1d525 45.4%, #a6de58 51.4%, #3ddc84 57.5%, #00d8be 63.6%,
      #00cbf4 69.6%, #3ba9ff 75.7%, #5977ff 81.8%, #7554ff 87.9%, #9f4dff 93.9%,
      #c14bff 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
  /* Game-page topbar brand link: whole link in Manrope; suffix accent on hover. */
  .brand-title { font-family: var(--font-brand); }
  .brand-suffix { color: var(--fg); }
  a.brand-title:hover .brand-suffix { color: var(--accent); }
  .icon-btn {
    width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--fg-muted); cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
  }
  .icon-btn:hover { background: var(--surface-2); color: var(--fg); border-color: var(--border-strong); }
  .icon-btn svg { width: 16px; height: 16px; display: block; }
  .icon-btn .sun-icon,
  .icon-btn .moon-icon,
  .icon-btn .auto-icon { display: none; }
  html[data-theme-mode="light"] .icon-btn .sun-icon,
  html[data-theme-mode="dark"]  .icon-btn .moon-icon,
  html[data-theme-mode="auto"]  .icon-btn .auto-icon { display: inline-block; }
  /* Compact variant — smaller thumbs for the icon / short-label toggles
     (language · theme on the landing page). Inherits the .seg-row track below;
     only the sizing differs. */
  .seg-row.compact { padding: 2px; border-radius: 8px; }
  .seg-row.compact .seg-btn {
    flex: 0 0 auto; min-width: 30px; height: 26px;
    padding: 0 10px; font-size: 12px;
  }
  .seg-row.compact .seg-btn svg { width: 15px; height: 15px; display: block; }

  .seg-row {
    display: flex; gap: 2px; padding: 3px;
    background: var(--surface-sunken);
    border: 1px solid var(--border); border-radius: 9px;
  }
  .seg-btn {
    flex: 1; height: 30px; padding: 0 14px;
    font-size: 13px; font-weight: 600;
    background: transparent; color: var(--fg-muted);
    border: none; border-radius: 6px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s, box-shadow 0.12s;
  }
  .seg-btn:hover { color: var(--fg); }
  .seg-btn:disabled { opacity: 0.45; cursor: not-allowed; }
  .seg-btn:disabled:hover { color: var(--fg-muted); }
  .seg-btn[aria-pressed="true"] {
    background: var(--surface); color: var(--fg);
    box-shadow: 0 1px 2px var(--stone-shadow), 0 0 0 1px var(--border);
  }
  /* Dark mode: the default sunken track (--surface-sunken ≈ #010409) reads as a
     harsh near-black pit against the surface panels, leaving unselected options
     looking too dark. Use a gentler sunken (bg) with a lighter raised thumb. */
  html[data-theme="dark"] .seg-row { background: var(--bg); }
  html[data-theme="dark"] .seg-btn[aria-pressed="true"] { background: var(--surface-2); }

  /* Sliding selection indicator (opt-in via .seg-slide; the thumb element is
     injected by seg-slide.js). The pressed button's raised "thumb" is lifted
     into one shared element that animates between options, instead of each
     button's background snapping on/off. Geometry (left/top/width/height) is set
     inline by the script so it works for unequal-width buttons too. */
  .seg-row.seg-slide { position: relative; }
  .seg-thumb {
    position: absolute; top: 0; left: 0; z-index: 0;
    border-radius: 6px; background: var(--surface);
    box-shadow: 0 1px 2px var(--stone-shadow), 0 0 0 1px var(--border);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }
  html[data-theme="dark"] .seg-thumb { background: var(--surface-2); }
  .seg-row.seg-slide .seg-btn { position: relative; z-index: 1; }
  /* Once the script has injected the shared thumb (-ready), the pressed button
     stops painting its own background/lift; gated so there's no flash of an
     unhighlighted selection before the script runs. */
  .seg-row.seg-slide-ready .seg-btn[aria-pressed="true"] {
    background: transparent; box-shadow: none;
  }
  @media (prefers-reduced-motion: reduce) { .seg-thumb { transition: none; } }

  /* ---------- Buttons ---------- */
  .btn {
    height: 34px; padding: 0 14px; font-size: 13px; font-weight: 500;
    background: var(--surface); color: var(--fg);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    cursor: pointer; white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
  }
  .btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
  .btn:active { background: var(--surface-sunken); }
  /* Shared disabled state for every .btn (each page used to redefine this). The
     ink-fill .primary / danger-ghost variants inherit it too; pointer-events:none
     keeps their hover/active shifts from firing while disabled. */
  .btn:disabled, .btn[disabled] {
    opacity: 0.5; cursor: not-allowed; pointer-events: none;
  }
  /* Primary action = neutral "ink" fill (near-black in light, near-white in
     dark) rather than a saturated accent — keeps colour reserved for the brand
     wordmark and stays symmetric across themes. */
  .btn.primary {
    background: var(--fg); color: var(--bg); border-color: var(--fg);
  }
  .btn.primary:hover {
    background: color-mix(in srgb, var(--fg) 86%, var(--bg));
    border-color: color-mix(in srgb, var(--fg) 86%, var(--bg));
  }
  /* Dark mode: a full-strength near-white fill (--fg ≈ #e6edf3) glares against
     the dark UI, so dim it to a soft light-grey ink that still reads as primary.
     Hover darkens (toward bg), matching the light-theme direction. */
  html[data-theme="dark"] .btn.primary {
    background: color-mix(in srgb, var(--fg) 80%, var(--bg));
    border-color: color-mix(in srgb, var(--fg) 80%, var(--bg));
  }
  html[data-theme="dark"] .btn.primary:hover {
    background: color-mix(in srgb, var(--fg) 66%, var(--bg));
    border-color: color-mix(in srgb, var(--fg) 66%, var(--bg));
  }
  .btn.danger-ghost { color: var(--fg-muted); }
  .btn.danger-ghost:hover { color: var(--danger); border-color: var(--danger); }
  .btn-row { display: flex; flex-wrap: wrap; gap: 8px; }

  .hidden { display: none !important; }