:root {
  color-scheme: dark;

  /* Void + Liquid Glass */
  --bg-void: #07080c;
  --bg-panel: rgba(18, 20, 28, 0.55);
  --bg-elevated: rgba(28, 30, 40, 0.45);
  --bg-well: rgba(0, 0, 0, 0.28);
  --bg-key-top: rgba(255, 255, 255, 0.1);
  --bg-key-bot: rgba(255, 255, 255, 0.04);
  --bg-key-solid-top: #2a2d36;
  --bg-key-solid-bot: #1a1c22;

  --glass-fill: rgba(255, 255, 255, 0.07);
  --glass-fill-strong: rgba(255, 255, 255, 0.11);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-highlight: rgba(255, 255, 255, 0.32);
  --glass-blur: 36px;
  --glass-saturate: 1.45;

  --text: #f4f6fb;
  --text-secondary: #d0d6e0;
  --text-muted: #9aa3b5;
  --text-faint: #6b7385;

  --border: rgba(255, 255, 255, 0.12);
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.22);

  --accent: #7c9cff;
  --accent-deep: #5b78e8;
  --accent-hover: #9ab0ff;
  --accent-soft: rgba(124, 156, 255, 0.18);

  --danger: #ff6363;
  --danger-soft: rgba(255, 99, 99, 0.22);
  --success: #34d399;
  --warn: #ffbc33;

  --focus: #c4d0ff;

  --orb-a: rgba(100, 140, 255, 0.28);
  --orb-b: rgba(160, 120, 255, 0.18);

  /* Number colors — cool, desaturated, still distinct */
  --num-1: #7aa2ff;
  --num-2: #3dba8b;
  --num-3: #e86a7a;
  --num-4: #8b87d6;
  --num-5: #c9a227;
  --num-6: #4cb8c9;
  --num-7: #c8cdd6;
  --num-8: #8a8f98;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans TC",
    "PingFang TC", "Microsoft JhengHei", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid cell — overridden by board formula via --cols/--rows */
  --cols: 9;
  --rows: 9;
  --cell-gap: 3px;
  --chrome-x: clamp(1.5rem, 4vw, 4rem);
  /* HUD + controls + foot + padding + page margin — keep whole console on-screen */
  --chrome-y: clamp(15rem, 34vh, 20rem);
  --cell-size: clamp(
    22px,
    min(
      calc((100vw - var(--chrome-x)) / var(--cols) - var(--cell-gap)),
      calc((100dvh - var(--chrome-y)) / var(--rows) - var(--cell-gap))
    ),
    120px
  );

  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --ui-title: clamp(0.95rem, 0.85rem + 0.35vw, 1.2rem);
  --ui-body: clamp(0.75rem, 0.7rem + 0.2vw, 0.9rem);
  --ui-stat: clamp(1.05rem, 0.95rem + 0.4vw, 1.45rem);
  --ui-label: clamp(0.6rem, 0.55rem + 0.15vw, 0.7rem);

  --shadow-console:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 -1px 0 rgba(0, 0, 0, 0.25) inset,
    0 24px 64px rgba(0, 0, 0, 0.55),
    0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-key:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 -1px 0 rgba(0, 0, 0, 0.35) inset,
    0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-key-hover:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 -1px 0 rgba(0, 0, 0, 0.3) inset,
    0 0 0 1px rgba(255, 255, 255, 0.12);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: var(--font);
  font-feature-settings: "cv01", "ss03";
  font-weight: 400;
  color: var(--text);
  background: var(--bg-void);
  line-height: 1.45;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

button {
  font: inherit;
  font-feature-settings: "cv01", "ss03";
  color: inherit;
  cursor: pointer;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: var(--ui-title);
  font-weight: 510;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--text);
}

h2 {
  font-size: clamp(1.15rem, 1rem + 0.4vw, 1.45rem);
  font-weight: 590;
  letter-spacing: -0.02em;
}