:root {
  --font-body: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-logo: Georgia, 'Times New Roman', serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.75rem;

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

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 9999px;

  --icon-sm: 18px;
  --icon-md: 24px;
  --icon-lg: 32px;

  --btn-height: 48px;
  --btn-height-sm: 36px;
  --btn-height-xs: 28px;

  --neo-bg: #303446;
  --neo-text: #c6d0f5;
  --neo-text-muted: #a5adce;
  --board-line: #636880;
  --ui-accent: #8bd5ca;
  --ui-accent-strong: #91d7e3;
  --ui-accent-muted: rgba(139, 213, 202, 0.18);
  --ui-scroll-track: rgba(54, 58, 79, 0.58);
  --ui-scroll-thumb: rgba(139, 213, 202, 0.52);
  --ui-scroll-thumb-hover: rgba(145, 215, 227, 0.76);

  --neo-raised-fill: #303446;
  --neo-raised-highlight: rgba(255, 255, 255, 0.04);
  --neo-raised-shadow: rgba(0, 0, 0, 0.15);
  --neo-raised-drop-soft: rgba(0, 0, 0, 0.2);
  --neo-raised-drop-deep: rgba(0, 0, 0, 0.4);

  --neo-sunken-fill: rgba(0, 0, 0, 0.15);
  --neo-sunken-hole: rgba(0, 0, 0, 0.3);
  --neo-sunken-depth: rgba(0, 0, 0, 0.45);
  --neo-sunken-edge-top: rgba(0, 0, 0, 0.25);
  --neo-sunken-edge-bottom: rgba(255, 255, 255, 0.05);

  --toggle-night-icon: #babbf1;
  --toggle-night-icon-muted: #737994;
  --toggle-day-icon-muted: #838ba7;
  --toggle-day-icon: #e5c890;
  --toggle-icon-shadow: rgba(0, 0, 0, 0.28);

  --stone-p1-bg: linear-gradient(135deg, #8caaee 0%, #85c1dc 100%);
  --stone-p2-bg: linear-gradient(135deg, #f4b8e4 0%, #eebebe 100%);
  --stone-p1-color: #8caaee;
  --stone-p2-color: #f4b8e4;
}

html[data-theme='light'] {
  --neo-bg: #eff1f5;
  --neo-text: #4c4f69;
  --neo-text-muted: #6c6f85;
  --board-line: #9da4bd;
  --ui-accent: #179299;
  --ui-accent-strong: #04a5e5;
  --ui-accent-muted: rgba(23, 146, 153, 0.14);
  --ui-scroll-track: rgba(204, 208, 218, 0.62);
  --ui-scroll-thumb: rgba(23, 146, 153, 0.44);
  --ui-scroll-thumb-hover: rgba(4, 165, 229, 0.68);

  --neo-raised-fill: #eff1f5;
  --neo-raised-highlight: #ffffff;
  --neo-raised-shadow: rgba(76, 79, 105, 0.1);
  --neo-raised-drop-soft: rgba(76, 79, 105, 0.12);
  --neo-raised-drop-deep: rgba(76, 79, 105, 0.2);

  --neo-sunken-fill: rgba(204, 208, 218, 0.35);
  --neo-sunken-hole: rgba(76, 79, 105, 0.12);
  --neo-sunken-depth: rgba(76, 79, 105, 0.18);
  --neo-sunken-edge-top: rgba(76, 79, 105, 0.12);
  --neo-sunken-edge-bottom: #ffffff;

  --stone-p1-bg: linear-gradient(135deg, #1e66f5 0%, #209fb5 100%);
  --stone-p2-bg: linear-gradient(135deg, #ea76cb 0%, #dd7878 100%);
  --stone-p1-color: #1e66f5;
  --stone-p2-color: #ea76cb;
}

html,
body {
  margin: 0;
  padding: 0;
  background-color: var(--neo-bg);
  color: var(--neo-text);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  min-height: 100vh;
  position: relative;
  transition: background-color 300ms ease-out, color 300ms ease-out;
}

body:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feTurbulence type="fractalNoise" baseFrequency="5" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noiseFilter)" opacity="0.25"/></svg>');
  background-repeat: repeat;
  opacity: 0.15;
  transition: opacity 300ms ease-out;
  pointer-events: none;
}

html[data-theme='light'] body:before {
  opacity: 0.25;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-6) var(--space-6) 0;
  box-sizing: border-box;
  position: relative;
  z-index: 10;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  padding: 0;
  border-radius: 0;
  color: var(--neo-text);
  background: transparent;
  box-shadow: none;
}

.brand-mark__text {
  font-family: var(--font-logo);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
}

.brand-mark:hover {
  color: var(--ui-accent);
  filter: none;
}

.brand-mark:active {
  transform: none;
  box-shadow: none;
}

.header-actions {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  justify-items: center;
  gap: var(--space-4);
  height: var(--btn-height);
}

.header-rules-btn {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: var(--btn-height-sm);
  min-height: var(--btn-height-sm);
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  box-sizing: border-box;
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--neo-text);
  line-height: 1;
  transform: translateY(-3px);
}

.header-rules-btn svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
  color: var(--ui-accent);
}

.header-rules-btn span {
  line-height: 1;
}

.header-rules-btn:active {
  transform: translateY(0);
}

#content {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 88px);
  padding: var(--space-8) var(--space-6) 48px;
  box-sizing: border-box;
}

.neo-sunken {
  background-color: var(--neo-sunken-fill);
  box-shadow:
    inset 0 0 0.8em var(--neo-sunken-hole),
    inset 0 0.5em 0.4em var(--neo-sunken-hole),
    inset 0 2em 1em var(--neo-sunken-depth),
    0 -0.25em 0.25em var(--neo-sunken-edge-top),
    0 0.25em 0.25em var(--neo-sunken-edge-bottom);
}

.neo-raised {
  background-color: var(--neo-raised-fill);
  box-shadow:
    inset 0 0.25em 0.25em var(--neo-raised-highlight),
    inset 0 -0.25em 0.25em var(--neo-raised-shadow),
    0 0.6em 0.4em var(--neo-raised-drop-soft),
    0 1.25em 1em var(--neo-raised-drop-deep);
}

#setup {
  width: min(100%, 560px);
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  text-align: left;
  background-color: var(--neo-sunken-fill);
  box-shadow:
    inset 0 0 0.8em var(--neo-sunken-hole),
    inset 0 0.5em 0.4em var(--neo-sunken-hole),
    inset 0 2em 1em var(--neo-sunken-depth),
    0 -0.25em 0.25em var(--neo-sunken-edge-top),
    0 0.25em 0.25em var(--neo-sunken-edge-bottom);
  transform-origin: 50% 55%;
  transition: opacity 260ms ease, transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 260ms ease;
}

#setup.setup--leaving {
  opacity: 0;
  filter: blur(5px);
  transform: translateY(12px) scale(0.92);
  pointer-events: none;
}

.setup-header {
  margin-bottom: var(--space-5);
  text-align: center;
}

.setup-header h1 {
  margin: var(--space-2) 0 0;
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--neo-text);
}

#setup label {
  color: var(--neo-text-muted);
}

.mode-select {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.mode-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 118px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-3);
  border-radius: var(--radius-lg);
  color: var(--neo-text-muted);
  background-color: var(--neo-raised-fill);
  box-shadow:
    inset 0 0.12em 0.12em var(--neo-raised-highlight),
    inset 0 -0.12em 0.12em var(--neo-raised-shadow),
    0 0.42em 0.32em var(--neo-raised-drop-soft),
    0 0.75em 0.56em var(--neo-raised-drop-deep);
  cursor: pointer;
  transition: color 160ms ease, filter 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.mode-card:hover {
  filter: brightness(1.04);
}

.mode-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mode-card__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background-color: var(--neo-sunken-fill);
  box-shadow:
    inset 0 0 0.5em var(--neo-sunken-hole),
    inset 0 0.28em 0.24em var(--neo-sunken-depth);
}

.mode-card__icon svg {
  width: var(--icon-md);
  height: var(--icon-md);
  color: var(--ui-accent);
}

.mode-card__text {
  min-width: 0;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 800;
  color: inherit;
}

.mode-card:has(input:checked) {
  color: var(--neo-text);
  background-color: var(--neo-sunken-fill);
  box-shadow:
    inset 0 0 0.72em var(--neo-sunken-hole),
    inset 0 0.42em 0.34em var(--neo-sunken-depth),
    0 -0.08em 0.08em var(--neo-sunken-edge-top),
    0 0.08em 0.08em var(--neo-sunken-edge-bottom);
  transform: translateY(1px);
}

.mode-card:has(input:checked) .mode-card__icon {
  background-color: var(--neo-raised-fill);
  box-shadow:
    inset 0 0.12em 0.12em var(--neo-raised-highlight),
    inset 0 -0.12em 0.12em var(--neo-raised-shadow),
    0 0.25em 0.18em var(--neo-raised-drop-soft);
}

.hint-start-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 66px;
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  color: var(--neo-text-muted);
  background-color: var(--neo-raised-fill);
  box-shadow:
    inset 0 0.12em 0.12em var(--neo-raised-highlight),
    inset 0 -0.12em 0.12em var(--neo-raised-shadow),
    0 0.42em 0.32em var(--neo-raised-drop-soft),
    0 0.75em 0.56em var(--neo-raised-drop-deep);
  cursor: pointer;
  transition: color 160ms ease, filter 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.hint-start-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.hint-start-option:hover {
  filter: brightness(1.04);
}

.hint-start-option:has(input:checked) {
  color: var(--neo-text);
  background-color: var(--neo-sunken-fill);
  box-shadow:
    inset 0 0 0.72em var(--neo-sunken-hole),
    inset 0 0.42em 0.34em var(--neo-sunken-depth),
    0 -0.08em 0.08em var(--neo-sunken-edge-top),
    0 0.08em 0.08em var(--neo-sunken-edge-bottom);
  transform: translateY(1px);
}

.hint-start-option:has(input:checked) .mode-card__icon {
  background-color: var(--neo-raised-fill);
  box-shadow:
    inset 0 0.12em 0.12em var(--neo-raised-highlight),
    inset 0 -0.12em 0.12em var(--neo-raised-shadow),
    0 0.25em 0.18em var(--neo-raised-drop-soft);
}

.depth-control {
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
}

.depth-control__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

#depth-value {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  min-width: 38px;
  padding: 5px 9px;
  border-radius: 11px;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-weight: 800;
  color: var(--ui-accent);
  background-color: var(--neo-raised-fill);
  box-shadow:
    inset 0 0.1em 0.1em var(--neo-raised-highlight),
    inset 0 -0.1em 0.1em var(--neo-raised-shadow),
    0 0.2em 0.16em var(--neo-raised-drop-soft);
}

input[type='range'] {
  width: 100%;
  height: 28px;
  margin: 0;
  padding: 0;
  background: transparent;
  accent-color: var(--ui-accent);
  cursor: pointer;
  appearance: none;
}

input[type='range']::-webkit-slider-runnable-track {
  height: 7px;
  border-radius: 99px;
  background-color: var(--ui-scroll-track);
  box-shadow:
    inset 0 0 0.35em var(--neo-sunken-hole),
    inset 0 1px 2px var(--neo-sunken-depth);
}

input[type='range']::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -7.5px;
  border: 0;
  border-radius: 50%;
  background-color: var(--ui-accent);
  box-shadow:
    0 0.3em 0.25em var(--neo-raised-drop-soft),
    inset rgba(255, 255, 255, 0.34) 0 2px 3px,
    inset rgba(0, 0, 0, 0.2) 0 -2px 3px;
  appearance: none;
}

input[type='range']::-moz-range-track {
  height: 7px;
  border-radius: 99px;
  background-color: var(--ui-scroll-track);
  box-shadow:
    inset 0 0 0.35em var(--neo-sunken-hole),
    inset 0 1px 2px var(--neo-sunken-depth);
}

input[type='range']::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background-color: var(--ui-accent);
  box-shadow:
    0 0.3em 0.25em var(--neo-raised-drop-soft),
    inset rgba(255, 255, 255, 0.34) 0 2px 3px,
    inset rgba(0, 0, 0, 0.2) 0 -2px 3px;
}

button,
input[type='number'] {
  border: none;
  outline: none;
  font: inherit;
  border-radius: var(--radius-sm);
  padding: 0 var(--space-6);
  min-height: var(--btn-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--neo-text);
  background-color: var(--neo-raised-fill);
  box-shadow:
    inset 0 0.15em 0.15em var(--neo-raised-highlight),
    inset 0 -0.15em 0.15em var(--neo-raised-shadow),
    0 0.4em 0.3em var(--neo-raised-drop-soft),
    0 0.8em 0.6em var(--neo-raised-drop-deep);
  transition: all 150ms ease-out;
  cursor: pointer;
}

button:hover,
input[type='number']:hover {
  filter: brightness(1.05);
}

button:active {
  box-shadow:
    inset 0 0.15em 0.15em var(--neo-sunken-hole),
    inset 0 0.4em 0.3em var(--neo-sunken-depth),
    0 0.1em 0.1em var(--neo-sunken-edge-bottom);
  transform: translateY(2px);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow:
    inset 0 0.15em 0.15em var(--neo-raised-highlight),
    inset 0 -0.15em 0.15em var(--neo-raised-shadow),
    0 0.4em 0.3em var(--neo-raised-drop-soft),
    0 0.8em 0.6em var(--neo-raised-drop-deep);
}

#start-btn {
  width: 100%;
}

input[type='number'] {
  background-color: var(--neo-sunken-fill);
  box-shadow:
    inset 0 0.15em 0.15em var(--neo-sunken-hole),
    inset 0 0.4em 0.3em var(--neo-sunken-depth),
    0 0.1em 0.1em var(--neo-sunken-edge-bottom);
  color: var(--neo-text);
  width: 80px;
  text-align: center;
  padding: 8px;
}

@media (max-width: 620px) {
  .header {
    padding: var(--space-4) var(--space-4) 0;
  }

  .brand-mark__text {
    font-size: var(--text-lg);
  }

  .header-actions {
    gap: var(--space-3);
  }

  .header-rules-btn {
    width: 40px;
    height: var(--btn-height-sm);
    min-height: var(--btn-height-sm);
    padding: 0;
    border-radius: var(--radius-md);
  }

  .header-rules-btn span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  #content {
    padding: var(--space-6) var(--space-4) var(--space-8);
  }

  #setup {
    padding: var(--space-5);
  }

  .mode-select {
    grid-template-columns: 1fr;
  }

  .mode-card {
    min-height: 74px;
    flex-direction: row;
    justify-content: flex-start;
    padding: var(--space-3) var(--radius-md);
  }

  .mode-card__text {
    text-align: left;
  }
}