:root {
  --bg: #14161b;
  --panel: #1c1f26;
  --panel-2: #232733;
  --border: #343a46;
  --text: #e8ecf3;
  --muted: #96a0b0;
  --light: #eedcbc;
  --dark: #966948;
  --white-piece: #f4eee2;
  --white-edge: #786c5c;
  --black-piece: #2c2e36;
  --black-edge: #0c0d11;
  --gold: #ecbe50;
  --green: #5ac882;
  --danger: #e65a5a;
  --accent: #42b07a;
  --radius: 14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(1100px 680px at 14% -8%, #242c3a 0%, transparent 62%),
    radial-gradient(900px 620px at 88% 108%, #1e2b25 0%, transparent 66%),
    var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, 0.035) 25%, transparent 25% 75%, rgba(255, 255, 255, 0.035) 75%),
    linear-gradient(45deg, rgba(255, 255, 255, 0.035) 25%, transparent 25% 75%, rgba(255, 255, 255, 0.035) 75%);
  background-size: 160px 160px;
  background-position: 0 0, 80px 80px;
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 12%, transparent 78%);
  mask-image: radial-gradient(circle at 50% 45%, #000 12%, transparent 78%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 88%, rgba(236, 190, 80, 0.10), transparent 26%),
    radial-gradient(circle at 94% 8%, rgba(66, 176, 122, 0.12), transparent 30%),
    radial-gradient(circle at 50% 120%, rgba(0, 0, 0, 0.55), transparent 55%);
}

@media (max-width: 900px) {
  body::before {
    background-size: 110px 110px;
    background-position: 0 0, 55px 55px;
  }
}

button { font: inherit; color: inherit; cursor: pointer; }

.hidden { display: none !important; }

.screen {
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(16px, 3vw, 40px);
}

/* ---------------------------------------------------------------- auth */

.auth {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vh, 30px);
  max-width: 900px;
  margin: 0 auto;
}

.auth-head { text-align: center; max-width: 640px; }

.auth-head h1 {
  margin: 0;
  font-size: clamp(28px, 5vw, 46px);
  letter-spacing: 0.02em;
}

.auth-card {
  width: min(100%, 440px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(18px, 3vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.tab {
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: 10px 8px;
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
}

.tab.active { background: var(--panel-2); color: var(--text); }

.field { display: flex; flex-direction: column; gap: 6px; }

.field span { color: var(--muted); font-size: 13px; }

.field input {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
}

.field input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: transparent;
}

.auth-error { min-height: 16px; margin: -2px 0 0; color: var(--danger); font-size: 13px; }

/* ---------------------------------------------------------------- menu */

.menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.4vh, 26px);
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-height: 880px) {
  .menu { justify-content: flex-start; }
}

.menu-head { text-align: center; max-width: 760px; }

.menu-head h1 {
  margin: 0;
  font-size: clamp(28px, 5vw, 46px);
  letter-spacing: 0.02em;
}

.lead {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: clamp(14px, 1.7vw, 17px);
  line-height: 1.5;
}

.profile-card { width: min(100%, 620px); }

.board-card { width: min(100%, 620px); padding-top: clamp(14px, 2vw, 20px); }

.lb-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.lb-head h3 { margin: 0; font-size: clamp(17px, 2vw, 20px); }

.lb-scroll { overflow-x: auto; }

.lb {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(12px, 1.4vw, 14px);
}

.lb th {
  text-align: left;
  font-weight: 600;
  color: var(--muted);
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.lb td {
  padding: 7px 8px;
  border-bottom: 1px solid rgba(52, 58, 70, 0.55);
  white-space: nowrap;
}

.lb tbody tr:last-child td { border-bottom: none; }

.lb .rank { width: 34px; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }
.lb .num { text-align: right; font-variant-numeric: tabular-nums; }
.lb .wins { color: var(--text); font-weight: 700; }
.lb .games { color: var(--muted); }
.lb .name { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }

.lb .rank.m1 { color: var(--gold); font-weight: 800; }
.lb .rank.m2 { color: #c8d0dc; font-weight: 800; }
.lb .rank.m3 { color: #c98f63; font-weight: 800; }

.lb .acts { text-align: right; }

.lb .watch { margin-left: 0; }

.lb .live {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(90, 200, 130, 0.55);
  animation: live-pulse 1.8s infinite;
  vertical-align: 1px;
}

@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(90, 200, 130, 0.5); }
  70% { box-shadow: 0 0 0 7px rgba(90, 200, 130, 0); }
  100% { box-shadow: 0 0 0 0 rgba(90, 200, 130, 0); }
}

.lb tr.you td { background: rgba(66, 176, 122, 0.12); }
.lb tr.you td:first-child { border-radius: 7px 0 0 7px; }
.lb tr.you td:last-child { border-radius: 0 7px 7px 0; }

.lb-empty { text-align: center; color: var(--muted); padding: 16px 8px; }

.lb-me {
  margin: 2px 0 0;
  padding: 8px 10px;
  border: 1px dashed var(--border);
  border-radius: 9px;
  color: var(--muted);
  font-size: 13px;
}

.lb-me b { color: var(--text); }

/* ---------------------------------------------------------------- admin */

.admin-card { width: min(100%, 760px); }

.admin-table .id { color: var(--muted); width: 46px; }
.admin-table .acts { text-align: right; white-space: nowrap; }
.admin-table tr.banned .name { color: var(--muted); text-decoration: line-through; }

.badge {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  vertical-align: 1px;
}

.badge.you { background: rgba(66, 176, 122, 0.18); color: var(--green); }
.badge.admin { background: rgba(236, 190, 80, 0.16); color: var(--gold); }
.badge.banned { background: rgba(230, 90, 90, 0.16); color: var(--danger); }

.mini {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 4px 8px;
  margin-left: 5px;
  font-size: 12px;
  color: var(--muted);
}

.mini:hover { border-color: var(--accent); color: var(--text); }
.mini.danger { color: #d98c8c; }
.mini.danger:hover { border-color: var(--danger); color: var(--danger); }

.deleted-head { margin-top: 14px; }
.admin-table tr.deleted .name { color: var(--muted); }

.profile-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.profile-top h3 { margin: 0; font-size: clamp(20px, 2.4vw, 26px); }

.muted { margin: 4px 0 0; color: var(--muted); font-size: 13px; }

.profile-card .rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 22px;
}

.profile-card .actions { display: flex; gap: 10px; margin-top: 6px; }

.profile-card .actions .primary { flex: 1; margin-top: 0; }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(16px, 2vw, 24px);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card h3 { margin: 0; font-size: clamp(17px, 2vw, 21px); }

.card .row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: clamp(12px, 1.4vw, 14px);
  color: var(--muted);
}

.card .row b { color: var(--text); font-weight: 600; }

.footnote { color: var(--muted); font-size: 13px; text-align: center; margin: 0; }

/* ---------------------------------------------------------------- game */

.game {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 26vw, 360px);
  gap: clamp(16px, 2.4vw, 32px);
  align-items: center;
  align-content: center;
  justify-content: center;
  max-width: 1180px;
  margin: 0 auto;
}

.board-area {
  display: flex;
  justify-content: center;
  position: relative;
}

.board.spectator .cell.last-move::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 3px rgba(236, 190, 80, 0.55);
  pointer-events: none;
}

.board-area::before {
  content: "";
  position: absolute;
  inset: -6% -4%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(236, 190, 80, 0.10), transparent 68%);
  filter: blur(18px);
  pointer-events: none;
}

.board {
  position: relative;
  width: min(92vw, calc(100dvh - 96px), 640px);
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 90px rgba(66, 176, 122, 0.08);
  touch-action: manipulation;
  user-select: none;
}

.cells, .pieces {
  position: absolute;
  inset: 0;
}

.cells {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  border-radius: 8px;
  overflow: hidden;
}

.cell {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 3px 5px;
  font-size: clamp(8px, 1.1vw, 12px);
  font-weight: 600;
}

.cell.light { background: var(--light); color: #7a6248; }
.cell.dark { background: var(--dark); color: #e8d6bc; }

.cell.selected { box-shadow: inset 0 0 0 4px var(--green); }
.cell.mandatory::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 3px solid #ff8a5c;
  border-radius: 50%;
}
.cell.target::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26%;
  height: 26%;
  transform: translate(-50%, -50%);
  background: rgba(90, 200, 130, 0.85);
  border: 2px solid #1a3a28;
  border-radius: 50%;
}
.cell.path { box-shadow: inset 0 0 0 3px rgba(236, 190, 80, 0.8); }

.pieces { pointer-events: none; }

.piece {
  position: absolute;
  width: 12.5%;
  height: 12.5%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.piece .body {
  width: 76%;
  height: 76%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35), inset 0 -3px 6px rgba(0, 0, 0, 0.2);
  position: relative;
}

.piece.white .body {
  background: radial-gradient(circle at 35% 30%, #fffdf8, var(--white-piece) 60%, #ddd3c2);
  border: 3px solid var(--white-edge);
}

.piece.black .body {
  background: radial-gradient(circle at 35% 30%, #4a4d58, var(--black-piece) 60%, #1b1c21);
  border: 3px solid var(--black-edge);
}

.piece.king .body::after {
  content: "";
  width: 42%;
  height: 42%;
  background: var(--gold);
  clip-path: polygon(0 100%, 0 25%, 25% 55%, 50% 10%, 75% 55%, 100% 25%, 100% 100%);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}

.piece.moving { z-index: 5; }

.piece.captured { z-index: 4; }

/* --------------------------------------------------------------- panel */

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(16px, 2vw, 22px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.panel-head h2 { margin: 0; font-size: clamp(17px, 1.8vw, 20px); }

.sub { margin: 4px 0 0; color: var(--muted); font-size: 13px; }

.ghost {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

.ghost:hover { border-color: var(--accent); color: var(--text); }

.ghost.danger { color: #d98c8c; }

.ghost.danger:hover, .ghost.danger.armed {
  border-color: var(--danger);
  color: var(--danger);
}

.actions { display: flex; gap: 10px; margin-top: 8px; }

.actions > * { flex: 1; }

.actions .primary { margin-top: 0; }

.status {
  margin: 4px 0 0;
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 700;
}

.status.thinking { color: var(--gold); }
.status.win { color: var(--green); }
.status.lose { color: var(--danger); }
.status.draw { color: var(--gold); }

.note { margin: 0; min-height: 18px; color: #ff9a6c; font-size: 13px; }

.counts {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  margin-top: 2px;
}

.count {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-2);
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.count b {
  color: var(--text);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.count .dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: none;
}

.count .dot.white {
  background: var(--white-piece);
  border: 2px solid var(--white-edge);
}

.count .dot.black {
  background: var(--black-piece);
  border: 2px solid var(--black-edge);
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
  margin: 4px 0 0;
}

.stats div { display: flex; justify-content: space-between; gap: 8px; }
.stats dt { color: var(--muted); font-size: 13px; }
.stats dd { margin: 0; font-size: 13px; font-weight: 600; }

.divider { height: 1px; background: var(--border); margin: 6px 0; }

.line { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }

.primary {
  margin-top: 8px;
  background: var(--accent);
  border: none;
  border-radius: 9px;
  padding: 11px 14px;
  font-weight: 700;
  color: #0e1a13;
}

.primary:hover { filter: brightness(1.08); }

.primary:disabled { opacity: 0.6; cursor: default; filter: none; }

.hint { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }

/* -------------------------------------------------------------- banner */

.banner {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(88vw, 420px);
  background: rgba(16, 18, 24, 0.96);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 20;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.banner.win { border-color: var(--green); }
.banner.lose { border-color: var(--danger); }
.banner.draw { border-color: var(--gold); }

.banner-title { margin: 0; font-size: 26px; font-weight: 800; }
.banner-reason { margin: 0 0 8px; color: var(--muted); font-size: 14px; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 900px) {
  .game {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 12px;
  }

  .board { width: min(94vw, calc(100dvh - 350px), 620px); }

  .panel { order: 2; }

  .menu, .auth { justify-content: flex-start; padding-top: 24px; }
}

@media (max-width: 560px) {
  /* Keep the watch button reachable without horizontal scrolling. */
  #leaderboard .lb .draws,
  #leaderboard .lb .losses,
  #leaderboard .lb .games { display: none; }
}

@media (max-width: 480px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
  .profile-card .rows { grid-template-columns: minmax(0, 1fr); }
  .banner-title { font-size: 21px; }
  .profile-top { flex-direction: column; }
  .counts { gap: 6px; }
  .count { padding: 7px 9px; font-size: 11px; gap: 5px; }
  .count b { font-size: 15px; }
}