/* nestoe: 3x3, 5 sizes (xs,s,m,l,xl), bigger overtakes */

:root {
  --bg: #1a1b26;
  --surface: #24283b;
  --border: #414868;
  --text: #c0caf5;
  --p1: #7aa2f7;
  --p2: #f7768e;
  --accent: #bb9af7;
  --cell-size: 100px;
  --link: #5ba3ff;
  --link-hover: #b89aff;
}

/* Light theme */
body.theme-light {
  --bg: #e8e8e8;
  --surface: #f5f5f5;
  --border: #ccc;
  --text: #333;
  --p1: #2563eb;
  --p2: #dc2626;
  --accent: #7c3aed;
  --link: #1e40af;
  --link-hover: #5b21b6;
}
body.theme-light a {
  color: var(--link);
}
body.theme-light a:hover {
  color: var(--link-hover);
}

/* Theme color presets (accent + p1/p2 + link) - dark base */
body.theme-color-ocean { --p1: #7dcfff; --p2: #ff9e64; --accent: #73daca; --link: #5bc8e8; --link-hover: #9ee5e8; }
body.theme-color-ocean.theme-light { --p1: #0ea5e9; --p2: #f97316; --accent: #14b8a6; --link: #0c7a9e; --link-hover: #0d9488; }
body.theme-color-forest { --p1: #9ece6a; --p2: #e0af68; --accent: #b9f27c; --link: #7bc04a; --link-hover: #c3e88d; }
body.theme-color-forest.theme-light { --p1: #22c55e; --p2: #d97706; --accent: #84cc16; --link: #15803d; --link-hover: #65a30d; }
body.theme-color-sunset { --p1: #ff9e64; --p2: #bb9af7; --accent: #f7768e; --link: #f0886a; --link-hover: #f8a8c4; }
body.theme-color-sunset.theme-light { --p1: #ea580c; --p2: #7c3aed; --accent: #e11d48; --link: #c2410c; --link-hover: #be123c; }
body.theme-color-berry { --p1: #bb9af7; --p2: #f7768e; --accent: #7aa2f7; --link: #8b9cf7; --link-hover: #c4a8ff; }
body.theme-color-berry.theme-light { --p1: #8b5cf6; --p2: #dc2626; --accent: #2563eb; --link: #1d4ed8; --link-hover: #6d28d9; }

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Top navbar */
.top-navbar {
  flex-shrink: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0.5rem 1rem;
}

.top-navbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: nowrap;
}

.top-navbar-brand {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.top-navbar-brand:hover {
  color: var(--text);
  text-decoration: none;
}

.top-navbar-logo {
  display: block;
  height: 40px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  padding-top: 8px;
}

/* Hamburger toggle - hidden on desktop */
.top-nav-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.top-nav-toggle-label {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
}

.top-nav-toggle-label:hover {
  background: var(--border);
}

.top-nav-toggle-icon {
  display: block;
  width: 1.25rem;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor;
}

.top-navbar-collapse {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: nowrap;
  flex: 1;
  min-width: 0;
}

.top-navbar-menu {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: nowrap;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.top-nav-link {
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  font-size: 0.9rem;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

.top-nav-link:hover {
  background: var(--border);
  color: var(--accent);
  text-decoration: none;
}

.top-nav-link-sm {
  font-size: 0.85rem;
}

.top-nav-link-with-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.top-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  color: var(--bg);
  background: var(--p2);
  border-radius: 999px;
}

.top-navbar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.top-nav-user {
  font-size: 0.9rem;
  opacity: 0.9;
  margin-right: 0.25rem;
}

/* Nav dropdown: Games */
.top-nav-dropdown {
  position: relative;
  display: inline-block;
}

.top-nav-dropdown-trigger {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  font-size: 0.9rem;
}

.top-nav-dropdown-trigger:hover {
  background: var(--border);
  color: var(--accent);
}

.top-nav-dropdown-menu {
  display: none;
  position: fixed;
  min-width: 10rem;
  padding: 0.35rem 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  z-index: 1100;
  flex-direction: column;
  gap: 0;
}

.top-nav-dropdown.is-open .top-nav-dropdown-menu {
  display: flex;
}

.top-nav-dropdown-menu .top-nav-link {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 0;
  white-space: nowrap;
  border: none;
}

.top-nav-dropdown-menu .top-nav-link:hover {
  background: var(--border);
}

/* Responsive: mobile first - hamburger + collapsible menu */
@media (max-width: 768px) {
  .top-navbar-inner {
    flex-wrap: wrap;
  }

  .top-nav-toggle-label {
    display: flex;
  }

  .top-navbar-collapse {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
    margin-top: 0.25rem;
  }

  .top-nav-toggle-input:checked ~ .top-navbar-collapse {
    display: flex;
  }

  .top-navbar-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    flex: none;
    overflow-x: visible;
  }

  .top-nav-dropdown {
    display: block;
    width: 100%;
  }

  .top-nav-dropdown-trigger {
    width: 100%;
    text-align: left;
    display: block;
    padding: 0.6rem 0.75rem;
  }

  .top-nav-dropdown:hover .top-nav-dropdown-menu {
    display: none;
  }

  .top-nav-dropdown-menu {
    position: static;
    margin-top: 0;
    padding: 0 0 0.35rem 0;
    min-width: 0;
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: transparent;
    display: none;
    padding-left: 1rem;
  }

  .top-nav-dropdown.is-open .top-nav-dropdown-menu {
    display: flex;
  }

  .top-nav-link {
    display: block;
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
  }

  .top-navbar-right {
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
    margin-top: 0.5rem;
    flex-direction: column;
    align-items: stretch;
  }

  .top-navbar-right .top-nav-link {
    text-align: left;
  }

  .top-nav-user {
    padding: 0.5rem 0.75rem 0;
    margin-right: 0;
  }
}

@media (min-width: 769px) {
  .top-nav-toggle-label {
    display: none;
  }
}

/* Main content area below navbar */
.app-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  padding: 1rem;
  box-sizing: border-box;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--link);
  text-underline-offset: 0.15em;
  font-weight: 600;
}

a:hover {
  color: var(--link-hover);
  text-decoration-color: var(--link-hover);
}

/* UI links: no underline/bold (nav, buttons, table actions) */
a.top-nav-link,
a.btn,
.share-link,
.game-list a {
  text-decoration: none;
  font-weight: inherit;
}

.app {
  max-width: 720px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.app-container .app {
  padding: 1.5rem;
}

/* Responsive: main app body and content */
@media (max-width: 768px) {
  .app-container {
    padding: 0.75rem;
  }
  .app-container .app {
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  .app-container {
    padding: 0.5rem;
  }
  .app-container .app {
    padding: 0.75rem;
  }
}

/* Page header (below navbar, inside .app) */
.page-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.page-header h1 {
  margin: 0 0 0.25rem 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--accent);
}

.tagline {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.85;
}

.site-logo {
  display: block;
  width: 300px;
  height: auto;
  margin: 0 auto 0.25rem auto;
}

/* Legacy: pages without app-container (e.g. auth) still use header */
header:not(.top-navbar) {
  text-align: center;
  margin-bottom: 1.5rem;
}

header:not(.top-navbar) h1,
.page-header h1 {
  margin: 0 0 0.25rem 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--accent);
}

.btn-outline {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  text-decoration: none;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  font-size: 0.85rem;
}

.btn-outline:hover {
  background: var(--accent);
  color: var(--bg);
}

.btn-outline:disabled:hover,
.btn-outline[disabled]:hover {
  background: transparent;
  color: var(--accent);
  cursor: auto;
}

/* Auth pages: login & register (no navbar) */
body.auth-page {
  justify-content: center;
  align-items: center;
}

.auth-page .app {
  max-width: 380px;
}

.auth-box {
  background: var(--surface);
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid var(--border);
}

.send-request-box {
  margin-bottom: 1.5rem;
}

.auth-box h2 {
  margin: 0 0 1rem 0;
  font-size: 1.25rem;
  color: var(--accent);
}

/* Profile page: same width as dashboard, card uses dashboard-section */
.profile-page .app {
  max-width: 720px;
}

.profile-display-name {
  margin: 0 0 0.25rem 0;
  font-size: 1.5rem;
  color: var(--accent);
}

.profile-card h2.profile-display-name {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}

.profile-username {
  margin: 0 0 1rem 0;
  font-size: 0.95rem;
}

.profile-stats {
  margin: 1rem 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1.25rem;
  align-items: baseline;
}

.profile-stats dt {
  margin: 0;
  font-weight: 600;
  opacity: 0.9;
  min-width: 0;
}

.profile-stats dd {
  margin: 0;
}

.profile-actions {
  margin: 1rem 0 0 0;
}

/* Profile games graph (wins vs losses) */
.profile-games-graph {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.profile-graph-title {
  margin: 0 0 0.75rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  opacity: 0.95;
}

.profile-bar-chart {
  margin-bottom: 0.5rem;
}

.profile-bar-stack {
  display: flex;
  width: 100%;
  height: 1.75rem;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
}

.profile-bar {
  display: block;
  height: 100%;
  min-width: 2px;
  transition: width 0.3s ease;
}

.profile-bar-wins {
  background: var(--p1);
}

.profile-bar-losses {
  background: var(--p2);
}

.profile-graph-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  opacity: 0.9;
}

.profile-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.profile-legend-swatch {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 4px;
}

.profile-legend-wins {
  background: var(--p1);
}

.profile-legend-losses {
  background: var(--p2);
}

.profile-graph-empty {
  margin: 0;
  font-size: 0.9rem;
}

.rules-content {
  max-width: 560px;
}

.rules-content h2 {
  margin-top: 1.25rem;
}

.rules-content h2:first-child {
  margin-top: 0;
}

.rules-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0 1rem 0;
  font-size: 0.9rem;
}

.rules-table th,
.rules-table td {
  padding: 0.4rem 0.6rem;
  text-align: left;
  border: 1px solid var(--border);
}

.rules-table th {
  background: var(--bg);
  color: var(--accent);
  font-weight: 600;
}

.rules-table tbody tr:nth-child(even) {
  background: var(--bg);
}

.rules-list {
  margin: 0.5rem 0 1rem 0;
  padding-left: 1.25rem;
}

.rules-list li {
  margin: 0.35rem 0;
}

.auth-form label {
  display: block;
  margin-top: 0.75rem;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.auth-form label:first-of-type {
  margin-top: 0;
}

.auth-form input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
}

.auth-form input:focus {
  outline: none;
  border-color: var(--accent);
}

.auth-form select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
}

.auth-form select:focus {
  outline: none;
  border-color: var(--accent);
}

.auth-form select:hover {
  border-color: var(--accent);
}

/* Global select (e.g. in dashboard-section, settings) */
select {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
}

select:focus {
  outline: none;
  border-color: var(--accent);
}

select:hover {
  border-color: var(--accent);
}

.auth-form .btn-block {
  width: 100%;
  margin-top: 1.25rem;
  padding: 0.6rem;
}

.auth-error {
  color: var(--p2);
  font-size: 0.9rem;
  margin: 0 0 0.75rem 0;
}

.auth-success {
  color: #9ece6a;
  font-size: 0.9rem;
  margin: 0 0 0.75rem 0;
}

.auth-footer {
  margin: 1rem 0 0 0;
  font-size: 0.9rem;
  text-align: center;
}

.auth-footer a {
  color: var(--accent);
  text-decoration: none;
}

.auth-footer a:hover {
  text-decoration: underline;
}

.game-area {
  position: relative;
  background: var(--surface);
  border-radius: 12px;
  padding: 1.25rem;
  border: 1px solid var(--border);
  /* Disable text selection and tap highlight */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.turn-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.you-are {
  font-size: 0.85rem;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  font-weight: 600;
}

.turn-bar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.you-are.player1 { color: var(--p1); }
.you-are.player2 { color: var(--p2); }
.you-are.muted { font-weight: normal; opacity: 0.85; }

.turn-label {
  font-weight: 600;
}

.turn-value {
  font-weight: 700;
}

.turn-value.player1 { color: var(--p1); }
.turn-value.player2 { color: var(--p2); }

.winner-msg {
  font-weight: 700;
  color: var(--accent);
}

.winner-msg:empty { display: none; }

/* When game over: you-are on the left, winner message on the right */
.turn-bar.game-over {
  position: relative;
}

.turn-bar.game-over .turn-label,
.turn-bar.game-over .turn-value {
  display: none;
}

.turn-bar.game-over .turn-bar-right {
  margin-left: auto;
}

/* 3x3 board */
.board-wrap {
  position: relative;
  width: fit-content;
  margin: 0 auto 1.25rem;
}

.board {
  display: grid;
  grid-template-columns: repeat(3, var(--cell-size));
  grid-template-rows: repeat(3, var(--cell-size));
  gap: 6px;
  margin: 0;
  width: fit-content;
  background: var(--border);
  padding: 6px;
  border-radius: 10px;
}

.cell {
  position: relative;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.cell:hover:not(.disabled) {
  background: #2a2d3e;
  border-color: var(--accent);
}

.cell.disabled {
  cursor: default;
  opacity: 0.7;
}

.cell.drag-over {
  background: var(--accent);
  opacity: 0.5;
  border-radius: 6px;
}

.cell.drag-over::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 2px dashed var(--text);
  border-radius: 4px;
  pointer-events: none;
}

.cell .piece {
  --piece-bw: 2px;
  --piece-bc: rgba(0,0,0,0.25);
  border-radius: 50%;
  border: var(--piece-bw) solid var(--piece-bc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #1a1b26;
  text-transform: uppercase;
  font-size: 0.65rem;
}

.cell .piece.player1 { background: var(--piece-p1, var(--p1)); }
.cell .piece.player2 { background: var(--piece-p2, var(--p2)); }

/* Piece shape overrides (body class from settings) */
body.piece-shape-square .cell .piece,
body.piece-shape-square .piece-opt {
  border-radius: 0;
}
body.piece-shape-rounded .cell .piece,
body.piece-shape-rounded .piece-opt {
  border-radius: 12%;
}

/* Piece border width (body class) */
body.piece-border-none .cell .piece,
body.piece-border-none .piece-opt { --piece-bw: 0; --piece-bc: transparent; border-color: transparent; }
body.piece-border-thin .cell .piece,
body.piece-border-thin .piece-opt { --piece-bw: 2px; }
body.piece-border-medium .cell .piece,
body.piece-border-medium .piece-opt { --piece-bw: 3px; }
body.piece-border-thick .cell .piece,
body.piece-border-thick .piece-opt { --piece-bw: 4px; }

/* Piece sizes on board */
.cell .piece.size-xs { width: 22px; height: 22px; font-size: 0.5rem; }
.cell .piece.size-s  { width: 32px; height: 32px; }
.cell .piece.size-m  { width: 44px; height: 44px; font-size: 0.7rem; }
.cell .piece.size-l  { width: 58px; height: 58px; font-size: 0.8rem; }
.cell .piece.size-xl { width: 74px; height: 74px; font-size: 0.9rem; }

/* Piece selection panels */
.pieces-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.pieces-panel {
  background: var(--bg);
  border-radius: 8px;
  padding: 0.75rem;
  border: 1px solid var(--border);
}

.pieces-panel h3 {
  margin: 0 0 0.5rem 0;
  font-size: 0.95rem;
}

.pieces-panel.player1 h3 { color: var(--p1); }
.pieces-panel.player2 h3 { color: var(--p2); }

.player-status {
  display: block;
  font-size: 0.75rem;
  margin: 0 0 0.4rem 0;
  opacity: 0.9;
}

.player-status.status-active {
  color: var(--accent);
}

.player-status.status-away {
  color: var(--text);
  opacity: 0.7;
}

.pieces-panel.not-your-panel {
  opacity: 0.45;
  pointer-events: none;
}

.pieces-panel.not-your-panel .piece-opt {
  cursor: default;
}

.piece-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.piece-opt {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: var(--piece-bw, 2px) solid var(--piece-bc, transparent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #1a1b26;
  transition: transform 0.1s, border-color 0.15s;
}

.piece-opt:hover:not(.used) {
  transform: scale(1.08);
  border-color: var(--text);
}

.piece-opt.used {
  opacity: 0.35;
  cursor: not-allowed;
}

.piece-opt[draggable="true"] {
  cursor: grab;
}

.piece-opt[draggable="true"]:active {
  cursor: grabbing;
}

.piece-opt.dragging {
  opacity: 0.5;
}

/* Touch drag ghost (mobile) */
.piece-drag-ghost {
  position: fixed;
  width: 44px;
  height: 44px;
  left: 0;
  top: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #1a1b26;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.piece-drag-ghost.player1 { background: var(--piece-p1, var(--p1)); }
.piece-drag-ghost.player2 { background: var(--piece-p2, var(--p2)); }

.piece-opt.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}

.pieces-panel.player1 .piece-opt:not(.used) { background: var(--piece-p1, var(--p1)); }
.pieces-panel.player2 .piece-opt:not(.used) { background: var(--piece-p2, var(--p2)); }

.piece-opt.drag-disabled {
  pointer-events: none;
  cursor: default;
}

.actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.practice-rules-btn {
  margin-left: auto;
}

.rewatch-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.rewatch-move-label {
  font-size: 0.9rem;
  opacity: 0.9;
  min-width: 8rem;
  text-align: center;
}

.game-id-row {
  margin-top: 0.75rem;
  width: 100%;
}

.game-id-row .game-id {
  display: block;
  width: 100%;
}

.go-to-new-game-wrap {
  display: block;
  margin-top: 0.5rem;
}

.share-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  font-size: 0.9rem;
}

.share-row .share-label {
  opacity: 0.85;
  margin-right: 0.25rem;
}

.share-row .share-link {
  text-decoration: none;
  color: inherit;
}

.share-row .share-copied-toast {
  font-size: 0.85rem;
  opacity: 0.9;
  margin-left: 0.25rem;
}

.share-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.share-modal-actions .share-link {
  text-decoration: none;
  color: inherit;
}

.btn {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-size: 0.95rem;
}

.btn-primary {
  background: var(--accent);
  color: var(--bg);
}

.btn-primary:hover {
  filter: brightness(1.1);
}

.btn-danger {
  background: var(--p2, #f7768e);
  color: var(--bg);
}

.btn-danger:hover {
  filter: brightness(1.1);
}

.auth-box-danger {
  border-color: var(--p2, #f7768e);
}

.auth-box-danger h2 {
  color: var(--p2, #f7768e);
}

.game-id {
  font-size: 0.85rem;
  opacity: 0.8;
  width: 100%;
}

.reset-request-prompt {
  margin-top: 0.75rem;
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.reset-request-prompt span {
  margin-right: 0.25rem;
}

/* Placement confirmation modal (hovers over the board only) */
.placement-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1rem;
  border-radius: 10px;
  min-height: 120px;
}

.placement-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 320px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.placement-modal-title {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
  color: var(--text);
}

.placement-modal-message {
  margin: 0 0 1.25rem 0;
  color: var(--text);
  opacity: 0.9;
}

.placement-modal-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.practice-rules-modal {
  max-width: 520px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.practice-rules-content {
  overflow-y: auto;
  max-height: 60vh;
  margin: 0.5rem 0 0 0;
  padding-right: 0.25rem;
}

.practice-rules-content h4 {
  margin: 1rem 0 0.35rem 0;
  font-size: 1rem;
  color: var(--accent);
}

.practice-rules-content h4:first-child {
  margin-top: 0;
}

.practice-rules-content p,
.practice-rules-content ul,
.practice-rules-content ol {
  margin: 0 0 0.5rem 0;
  font-size: 0.9rem;
  color: var(--text);
  opacity: 0.95;
}

.practice-rules-content .rules-table {
  width: 100%;
  margin: 0.25rem 0 0.5rem 0;
  font-size: 0.9rem;
  border-collapse: collapse;
}

.practice-rules-content .rules-table th,
.practice-rules-content .rules-table td {
  padding: 0.35rem 0.5rem;
  text-align: left;
  border: 1px solid var(--border);
}

.practice-rules-content .rules-list {
  padding-left: 1.25rem;
}

/* New game waiting modal (over game area) */
.new-game-waiting-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 1rem;
  border-radius: 12px;
}

/* New game request modal (over game area) */
.new-game-request-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 1rem;
  border-radius: 12px;
}

/* Reset board request modal (over game area) */
.reset-request-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 1rem;
  border-radius: 12px;
}

/* Leave game confirmation modal (over game area) */
.leave-game-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 1rem;
  border-radius: 12px;
}

.error-toast {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--p2);
  color: var(--bg);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  z-index: 100;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Dashboard & settings - use full width up to same max */
.dashboard-page .app,
.auth-page.dashboard-page .app {
  max-width: 720px;
}

.dashboard-section {
  background: var(--surface);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
}

.dashboard-section h2 {
  margin: 0 0 0.75rem 0;
  font-size: 1.1rem;
  color: var(--accent);
}

.score-card .score-stats {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.score-box {
  text-align: center;
  min-width: 4rem;
}

.score-value {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--accent);
}

.score-label {
  font-size: 0.85rem;
  opacity: 0.85;
}

.game-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.game-list li {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}

.game-list li:last-child {
  border-bottom: none;
}

.game-list a {
  color: var(--accent);
  text-decoration: none;
}

.game-list a:hover {
  text-decoration: underline;
}

/* Keep primary button link text visible (same as button bg = accent) */
.game-list a.btn-primary {
  color: var(--bg);
  text-decoration: none;
}

.game-list a.btn-primary:hover {
  color: var(--bg);
  text-decoration: none;
}

.muted {
  color: var(--text);
  opacity: 0.75;
  margin: 0;
}

.muted a {
  color: var(--link);
  opacity: 1;
}

.muted a:hover {
  color: var(--link-hover);
}

.auth-form .checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  cursor: pointer;
}

.auth-form .checkbox-label input[type="checkbox"] {
  width: auto;
}

/* Active users list */
.user-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.user-row:last-child {
  border-bottom: none;
}

.user-info {
  flex: 1;
  min-width: 120px;
}

.user-username {
  font-size: 0.85rem;
  opacity: 0.8;
  margin-left: 0.25rem;
}

.user-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.friend-remove-form {
  display: inline-block;
  margin: 0;
}

.user-actions-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.active-users-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.active-users-search-label,
.active-users-filter-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.active-users-search {
  min-width: 12rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
}

.active-users-search:focus {
  outline: none;
  border-color: var(--accent);
}

.active-users-filter {
  min-width: 8rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.95rem;
  cursor: pointer;
}

.active-users-count {
  font-size: 0.85rem;
  margin-left: auto;
}

/* Active users page: full width and responsive */
body.active-users-page .app-container {
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
  padding: 1rem;
  box-sizing: border-box;
}

body.active-users-page .app-container .app.active-users-app {
  max-width: none;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 1rem 0;
}

body.active-users-page .dashboard-section {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

body.active-users-page .table-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  border: 1px solid var(--border);
  margin-top: 0.5rem;
  box-sizing: border-box;
}

body.active-users-page #active-users-table {
  width: 100%;
  min-width: 480px;
  table-layout: auto;
}

body.active-users-page .active-users-toolbar {
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  body.active-users-page .app-container {
    padding: 0.5rem;
    width: 100%;
  }

  body.active-users-page .app-container .app.active-users-app {
    padding: 0.75rem 0;
    width: 100%;
  }

  body.active-users-page .dashboard-section {
    padding: 0.75rem 0.5rem;
    width: 768px;
  }

  body.active-users-page .table-wrap {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 8px;
  }

  body.active-users-page #active-users-table {
    font-size: 0.85rem;
    min-width: 420px;
    width: 100%;
  }

  body.active-users-page .admin-table th,
  body.active-users-page .admin-table td {
    padding: 0.5rem 0.6rem;
  }

  body.active-users-page .user-actions-cell {
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  body.active-users-page .active-users-toolbar {
    flex-direction: row;
    flex-wrap: wrap;
  }

  body.active-users-page .active-users-search {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  body.active-users-page .active-users-filter {
    min-width: 0;
    flex: 1 1 auto;
  }

  body.active-users-page .active-users-count {
    flex: 1 1 100%;
  }
}

@media (max-width: 480px) {
  body.active-users-page .app-container {
    padding: 0.25rem;
    width: 100%;
  }

  body.active-users-page .app-container .app.active-users-app {
    padding: 0.5rem 0;
    width: 100%;
  }

  body.active-users-page .dashboard-section {
    padding: 0.5rem 0.25rem;
    width: 100%;
  }

  body.active-users-page .table-wrap {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
  }

  body.active-users-page #active-users-table {
    font-size: 0.8rem;
    min-width: 320px;
    width: 100%;
  }

  body.active-users-page .admin-table th,
  body.active-users-page .admin-table td {
    padding: 0.4rem 0.5rem;
  }

  body.active-users-page .active-users-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  body.active-users-page .active-users-search-label,
  body.active-users-page .active-users-filter-label {
    margin-bottom: 0.15rem;
  }

  body.active-users-page .active-users-search,
  body.active-users-page .active-users-filter {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  body.active-users-page .active-users-count {
    margin-left: 0;
  }
}

.badge {
  font-size: 0.8rem;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  background: var(--border);
  color: var(--text);
}

.badge-friend {
  background: var(--accent);
  color: var(--bg);
}

.badge-active {
  background: var(--success-bg, #1a3d1a);
  color: var(--success, #7dd87d);
  font-size: 0.75rem;
}

.last-seen {
  font-size: 0.85rem;
  color: var(--text);
  opacity: 0.9;
}

.badge-user {
  background: var(--border);
  color: var(--text);
}

.badge-admin {
  background: var(--p2);
  color: var(--bg);
}

.badge-blocked {
  background: var(--p2);
  color: var(--bg);
  font-size: 0.75rem;
}

.admin-user-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.admin-block-form {
  display: inline-block;
  margin: 0;
}

.admin-table,
.table-wrap {
  width: 100%;
  overflow-x: auto;
}

.admin-table {
  border-collapse: collapse;
  font-size: 0.9rem;
}

.admin-table th,
.admin-table td {
  padding: 0.5rem 0.6rem;
  text-align: left;
  border: 1px solid var(--border);
}

.admin-table th {
  background: var(--bg);
  color: var(--accent);
  font-weight: 600;
}

.admin-table tbody tr:nth-child(even) {
  background: var(--bg);
}

.admin-table .btn-sm {
  white-space: nowrap;
}

/* Admin section: full-width body and responsive layout */
body.admin-page {
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  box-sizing: border-box;
}

body.admin-page .app-container {
  align-items: stretch;
  justify-content: flex-start;
  flex: 1;
  width: 100%;
  max-width: 100%;
  padding: 1rem;
  box-sizing: border-box;
}

body.admin-page .app-container .app {
  max-width: none;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

body.admin-page .app-container .app.dashboard-page {
  max-width: none;
}

body.admin-page .dashboard-section {
  width: 100%;
  max-width: 100%;
  padding: 1.25rem;
  box-sizing: border-box;
}

body.admin-page .page-header {
  max-width: 100%;
}

body.admin-page .table-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  border: 1px solid var(--border);
  margin: 0.5rem 0;
  box-sizing: border-box;
}

body.admin-page .admin-table {
  width: 100%;
  min-width: 600px;
}

body.admin-page .admin-table th,
body.admin-page .admin-table td {
  padding: 0.85rem 1.25rem;
}

body.admin-page .auth-form .btn,
body.admin-page .dashboard-section .btn {
  margin-top: 0.25rem;
}

@media (max-width: 768px) {
  body.admin-page .app-container {
    padding: 0.5rem;
  }

  body.admin-page .app-container .app {
    padding: 1rem;
  }

  body.admin-page .dashboard-section {
    padding: 0.75rem 1rem;
  }

  body.admin-page .dashboard-section h2 {
    font-size: 1.1rem;
  }

  body.admin-page .table-wrap {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    width: calc(100% + 1rem);
    max-width: calc(100% + 1rem);
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  body.admin-page .admin-table {
    font-size: 0.8rem;
    min-width: 520px;
  }

  body.admin-page .admin-table th,
  body.admin-page .admin-table td {
    padding: 0.7rem 0.9rem;
  }

  body.admin-page .auth-form label,
  body.admin-page .auth-form input,
  body.admin-page .auth-form select {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  body.admin-page .auth-form .btn {
    margin-left: 0;
    margin-top: 0.5rem;
  }

  body.admin-page .game-list li {
    padding: 0.5rem 0;
  }
}

@media (max-width: 480px) {
  body.admin-page .app-container {
    padding: 0.25rem;
  }

  body.admin-page .app-container .app {
    padding: 0.75rem;
  }

  body.admin-page .table-wrap {
    margin-left: -0.25rem;
    margin-right: -0.25rem;
    width: calc(100% + 0.5rem);
    max-width: calc(100% + 0.5rem);
  }

  body.admin-page .admin-table {
    font-size: 0.75rem;
    min-width: 380px;
  }

  body.admin-page .admin-table th,
  body.admin-page .admin-table td {
    padding: 0.6rem 0.75rem;
  }
}

.badge-turn {
  background: var(--p1);
  color: var(--bg);
}

.badge-waiting {
  background: var(--border);
  color: var(--text);
}

.open-games-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.open-game-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.open-game-row:last-child {
  border-bottom: none;
}

.open-game-info {
  flex: 1;
  min-width: 120px;
}

.past-games-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.past-game-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.past-game-row:last-child {
  border-bottom: none;
}

.past-game-info {
  flex: 1;
  min-width: 120px;
}

.past-game-date {
  color: var(--muted);
  font-size: 0.9rem;
  margin-left: 0.5rem;
}

.badge-won {
  background: var(--success-bg, #1a3d1a);
  color: var(--success, #7dd87d);
}

.badge-lost {
  background: var(--error-bg, #3d1a1a);
  color: var(--error, #e88);
}

.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
}

.request-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.request-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.request-row:last-child {
  border-bottom: none;
}

.request-from {
  flex: 1;
  min-width: 120px;
}

.request-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}