html, body {
  width: 100%;
  min-height: 100%;
  overflow: hidden;
}

body {
  min-height: 100svh;
  display: flex;
  justify-content: center;
  background: var(--parlor-paper);
}

button { font: inherit; }

.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  place-content: center;
  gap: var(--space-3);
  background: var(--surface-overlay);
  color: var(--parlor-paper);
  text-align: center;
}
.loading-overlay--hidden { display: none; }
.loading-spinner {
  width: 36px;
  height: 36px;
  justify-self: center;
  border: 3px solid var(--brass-300);
  border-radius: 50%;
}

#app {
  width: 100%;
  min-height: 100svh;
  display: flex;
  justify-content: center;
  padding: max(var(--space-5), env(safe-area-inset-top)) max(var(--space-5), env(safe-area-inset-right)) max(var(--space-4), env(safe-area-inset-bottom)) max(var(--space-5), env(safe-area-inset-left));
}

.game-shell {
  width: min(100%, 390px);
  min-height: 0;
  display: flex;
  flex-direction: column;
}

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

.title-copy { min-width: 0; }
.eyebrow {
  margin: 0 0 var(--space-1);
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.game-header h1 { margin: 0; }
.restart {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  padding: var(--space-2);
}
.restart svg { width: 22px; height: 22px; }

.turn {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-card);
  border: var(--border-width-hair) solid var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-flat);
}
.turn-label { font-weight: var(--fw-semibold); }
.turn .tag { flex: none; padding: var(--space-1) var(--space-3); }
.tag--win { background: var(--felt-500); color: var(--piece-light); border-color: var(--felt-300); }

.players {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.player {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  gap: var(--space-2);
  padding: 0 var(--space-1) var(--space-2);
  border-bottom: var(--border-width-hair) solid var(--border-hairline);
  color: var(--fg-secondary);
}
.player.is-active { border-bottom: 2px solid var(--brass-500); color: var(--fg-primary); }
.badge {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  box-shadow: var(--shadow-rest);
}
.badge-x { background: var(--piece-dark); color: var(--piece-light); }
.badge-o { background: var(--piece-light); color: var(--piece-dark); border: 1px solid var(--piece-light-rim); }
.player-name { overflow: hidden; font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-overflow: ellipsis; white-space: nowrap; }

.board-frame {
  width: 100%;
  aspect-ratio: 1;
  padding: clamp(var(--space-2), 2.4vw, var(--space-3));
  background: linear-gradient(180deg, var(--wood-700), var(--wood-900));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised), inset 0 0 0 1px rgba(0, 0, 0, .3);
}
.board {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.cell {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: clamp(46px, 18vw, 76px);
  font-weight: var(--fw-semibold);
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cell::after {
  position: absolute;
  inset: 0;
  border: 3px solid transparent;
  content: "";
  pointer-events: none;
}
.cell--light { background: var(--wood-50); }
.cell--dark { background: var(--wood-500); }
.cell--light::before, .cell--dark::before {
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 80% at 30% 25%, rgba(255,255,255,.06), transparent 60%), radial-gradient(70% 70% at 80% 80%, rgba(0,0,0,.08), transparent 60%);
  content: "";
  pointer-events: none;
}
.cell--x { color: var(--wood-900); text-shadow: 0 1px rgba(255,255,255,.2); }
.cell--o { color: var(--piece-light); text-shadow: 0 1px rgba(0,0,0,.25); }
.cell--empty:enabled::after { border: var(--border-width-hair) solid rgba(184, 137, 62, .36); }
.cell--empty:enabled:focus-visible::after,
.cell--empty:enabled:hover::after { border: var(--border-width-frame) solid rgba(184, 137, 62, .82); }
.cell--empty:enabled:active { background-color: var(--brass-100); }
.cell:disabled { cursor: default; opacity: 1; }
.cell--winner::after { border-color: var(--brass-500); background: rgba(184, 137, 62, .13); }

.hint {
  min-height: 20px;
  margin: var(--space-3) 2px 0;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  text-align: center;
}
.divider {
  height: 1px;
  margin: auto 0 0;
  background: var(--border-hairline);
  opacity: .65;
}

@media (max-height: 700px) {
  #app { padding-top: max(var(--space-3), env(safe-area-inset-top)); padding-bottom: max(var(--space-2), env(safe-area-inset-bottom)); }
  .game-header { margin-bottom: var(--space-3); }
  .game-header h1 { font-size: var(--fs-lg); }
  .turn { min-height: 50px; margin-bottom: var(--space-3); padding-block: var(--space-2); }
  .players { margin-bottom: var(--space-3); }
  .hint { margin-top: var(--space-2); }
  .divider { display: none; }
  .board-frame { width: min(100%, calc(100svh - 260px)); align-self: center; flex: 0 1 auto; }
}

@media (max-width: 360px) {
  #app { padding-inline: var(--space-4); }
  .game-header h1 { font-size: var(--fs-lg); }
  .turn { padding-inline: var(--space-3); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}