:root {
  color-scheme: light dark;

  /* Base colors */
  --color-active: #3399dd;
  --color-positive: #1b5e20;
  --color-negative: #7f0202;
  --color-special: #ff903a;
  --color-surface: white;
  --color-bg: #fafafa;
  --color-border: #ccc;
  --color-muted: #666;
  --color-text: #212121;

  /* Grid */
  --grid-size: 7;
  --stone-size: 60px;

  /* Spacing: sm for inner padding/gaps, lg for section-level spacing */
  --space-sm: 8px;
  --space-lg: 24px;

  /* Border radius */
  --radius: 6px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-active: #4da8e8;
    --color-positive: #4caf50;
    --color-negative: #ef5350;
    --color-special: #ffb74d;
    --color-surface: #2a2a2a;
    --color-bg: #1a1a1a;
    --color-border: #444;
    --color-muted: #999;
    --color-text: #e0e0e0;
  }
}

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

body {
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  display: flex;
  justify-content: center;
  padding: var(--space-lg);
}

znum-app {
  display: block;
  max-width: 600px;
  width: 100%;
}

/* App Header */
.app-header {
  text-align: center;
  padding: var(--space-sm) 0;
  cursor: pointer;

  &:hover .app-logo {
    color: color-mix(in srgb, var(--color-active) 70%, var(--color-text));
  }
}

.app-logo {
  display: inline-block;
  height: 2rem;
  width: auto;
  color: var(--color-active);
}

/* Shared UI button base */
button {
  padding: var(--space-sm) var(--space-lg);
  cursor: pointer;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius);

  &:hover {
    background: color-mix(in srgb, var(--color-surface) 85%, var(--color-border));
  }
}

/* Shared text input base */
input[type="text"] {
  width: 100%;
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
}

/* Game Board */
.game-board {
  display: grid;
  grid-template-columns: repeat(var(--grid-size), var(--stone-size));
  grid-template-rows: repeat(var(--grid-size), var(--stone-size));
  gap: 2px;
  margin: var(--space-lg) auto;
  width: fit-content;
}

/* Game Stone */
game-stone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--stone-size);
  height: var(--stone-size);
  background: color-mix(in srgb, var(--color-border) 50%, var(--color-surface));
  border: 1px solid var(--color-border);
  font-weight: bold;
  user-select: none;

  &.active {
    background: var(--color-active);
    color: var(--color-surface);
    cursor: pointer;

    &:hover {
      filter: brightness(1.1);
    }
  }

  &.picked {
    background: var(--color-border);
    opacity: 0.3;
    border-color: transparent;
  }

  &.positive {
    color: var(--color-positive);

    &.active {
      color: var(--color-surface);
    }
  }

  &.negative {
    color: var(--color-negative);
  }

  &.special {
    color: var(--color-special);
  }
}

/* Score Bar */
.score-bar {
  display: flex;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-sm);
}

.player-score {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-sm);
  background: color-mix(in srgb, var(--color-border) 25%, var(--color-surface));
  border-radius: var(--radius);
  flex: 1;

  &.current {
    background: var(--color-active);
    color: var(--color-surface);
    font-weight: bold;
  }
}

.player-name {
  flex: 1;
}

.player-score-value {
  font-size: 1.4em;
  font-weight: bold;
}

/* Main Menu */
.main-menu {
  text-align: center;
  padding: var(--space-lg) 0;

  & button {
    display: block;
    width: 200px;
    margin: var(--space-sm) auto;
  }

  & .how-to-play-btn {
    margin-top: var(--space-lg);
    border: none;
    background: none;
    color: var(--color-muted);
    width: auto;

    &:hover {
      background: none;
      color: var(--color-active);
    }
  }
}

/* How to Play */
.how-to-play {
  display: block;
  padding: var(--space-lg) 0;

  & h2 {
    text-align: center;
    margin-bottom: var(--space-lg);
  }

  & section {
    margin-bottom: var(--space-lg);
  }

  & h3 {
    margin-bottom: var(--space-sm);
  }

  & p {
    margin-bottom: var(--space-sm);
    line-height: 1.5;
  }

  & dl {
    margin: var(--space-sm) 0;
  }

  & dt {
    font-weight: bold;
    margin-top: var(--space-sm);
  }

  & dd {
    margin-left: var(--space-lg);
    line-height: 1.5;
  }

  & button {
    display: block;
    margin: var(--space-lg) auto 0;
  }
}

/* Player Setup */
.player-setup {
  text-align: center;
  padding: var(--space-lg) 0;

  & h2 {
    margin-bottom: var(--space-lg);
  }

  & .input-group {
    margin: var(--space-sm) auto;
    max-width: 300px;

    & label {
      display: block;
      margin-bottom: var(--space-sm);
      text-align: left;
    }
  }

  & button {
    display: block;
    margin: var(--space-lg) auto 0;
  }
}

/* Game Screen */
game-screen {
  display: block;
}

.status-message {
  text-align: center;
  padding: var(--space-sm);
  min-height: 2.25em;
  font-style: italic;
  color: var(--color-muted);
}

/* Game Over Dialog */
.game-over-dialog {
  border: none;
  margin: auto;
  padding: var(--space-lg);
  border-radius: var(--radius);
  text-align: center;
  min-width: 300px;
  background: var(--color-surface);
  color: var(--color-text);

  &::backdrop {
    background: rgba(0, 0, 0, 0.5);
  }

  & h2 {
    margin-bottom: var(--space-sm);
  }

  & p {
    margin-bottom: var(--space-lg);
    color: var(--color-muted);
  }

  & button {
    margin: var(--space-sm);
  }
}

/* Network Lobby */
.network-lobby {
  display: block;
  text-align: center;
  padding: var(--space-lg) 0;

  & h2 {
    margin-bottom: var(--space-lg);
  }

  & .share-url {
    margin: var(--space-lg) auto;
    max-width: 400px;

    & input {
      text-align: center;
    }
  }

  & button {
    margin-top: var(--space-sm);
  }

  & .secondary-btn {
    background: none;
    border: none;
    color: var(--color-muted);

    &:hover {
      background: none;
      color: var(--color-active);
    }
  }
}

/* Connection Log (inside network lobby) */
.connection-log-details {
  margin: var(--space-lg) auto 0;
  max-width: 460px;
  text-align: left;

  & summary {
    cursor: pointer;
    color: var(--color-muted);
    text-align: center;
    padding: var(--space-sm);
    user-select: none;
  }
}

.connection-log {
  max-height: 180px;
  overflow-y: auto;
  background: color-mix(in srgb, var(--color-bg) 60%, var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-sm);
  font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  font-size: 0.8em;
  line-height: 1.6;
}

.log-entry {
  white-space: pre-wrap;
  word-break: break-word;
}

.log-info {
  color: var(--color-muted);
}

.log-success {
  color: var(--color-positive);
}

.log-warn {
  color: var(--color-special);
}

.log-error {
  color: var(--color-negative);
}

/* Disconnection Dialog */
.disconnect-dialog {
  border: none;
  margin: auto;
  color: var(--color-surface);
  background: transparent;
  text-align: center;

  &::backdrop {
    background: rgba(0, 0, 0, 0.7);
  }

  & p {
    font-size: 1.25em;
    margin-bottom: var(--space-sm);
  }

  & button {
    margin-top: var(--space-lg);
  }
}