:root {
  --paper: #f2ecdc;
  --paper-deep: #e9e0c9;
  --paper-line: #c9bfa0;
  --ink-graphite: #2c2a24;
  --ink-graphite-soft: #5a5647;
  --ink-blue: #2b4c7e;
  --ink-blue-soft: #6a86b3;
  --ink-red: #a13d2f;
  --ink-red-soft: #c67f72;
  --accent-gold: #b8912a;
  --card-shadow: 0 2px 0 rgba(44, 42, 36, 0.08), 0 10px 22px rgba(44, 42, 36, 0.12);
  --radius: 3px;
}

* { box-sizing: border-box; }

/* The `hidden` attribute must always win over any display rule below.
   Without this, elements styled with display:flex/grid stay visible
   even when marked hidden, causing modals/views to stack on screen. */
[hidden] { display: none !important; }


html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink-graphite);
  font-family: 'Inter', sans-serif;
  background-image:
    linear-gradient(var(--paper-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-line) 1px, transparent 1px);
  background-size: 28px 28px;
  background-attachment: fixed;
}

.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 20px 64px;
  min-height: 100vh;
}

/* ---------- Header ---------- */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--ink-graphite);
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 12px;
}

.brand { display: flex; align-items: center; gap: 12px; }

.brand-text h1 {
  font-family: 'Kalam', cursive;
  font-size: 2rem;
  margin: 0;
  line-height: 1;
  color: var(--ink-graphite);
}

.brand-text p {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: var(--ink-graphite-soft);
  letter-spacing: 0.02em;
}

.header-meta { display: flex; gap: 10px; align-items: center; }

.badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  padding: 5px 10px;
  border: 1.5px solid var(--ink-graphite);
  border-radius: 999px;
  background: var(--paper-deep);
}

.badge-me { border-color: var(--ink-blue); color: var(--ink-blue); }

/* ---------- Generic elements ---------- */
h2 {
  font-family: 'Kalam', cursive;
  font-size: 1.35rem;
  margin: 0;
}

.hint { color: var(--ink-graphite-soft); font-size: 0.85rem; }

.btn {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 10px 18px;
  border-radius: var(--radius);
  border: 2px solid var(--ink-graphite);
  background: var(--paper);
  color: var(--ink-graphite);
  cursor: pointer;
  transition: transform 0.08s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-small { padding: 6px 12px; font-size: 0.75rem; }

.btn-primary { background: var(--ink-blue); border-color: var(--ink-blue); color: var(--paper); }
.btn-secondary { background: var(--paper-deep); }
.btn-ghost { background: transparent; border-color: var(--paper-line); color: var(--ink-graphite-soft); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

input[type="text"] {
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  padding: 12px 14px;
  border: none;
  border-bottom: 2px solid var(--ink-graphite);
  background: transparent;
  color: var(--ink-graphite);
  margin-bottom: 16px;
}
input[type="text"]:focus { outline: none; border-bottom-color: var(--ink-blue); }

.index-card {
  background: var(--paper);
  border: 1.5px solid var(--ink-graphite);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: 24px;
  position: relative;
}

.card-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-red-soft);
  margin: 0 0 8px;
}

.error-text { color: var(--ink-red); font-size: 0.85rem; margin-top: 8px; }

/* ---------- Views ---------- */
.view-center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

.nickname-card { max-width: 380px; width: 100%; }

/* ---------- Lobby ---------- */
.lobby-grid {
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  gap: 20px;
  align-items: start;
}

@media (max-width: 860px) {
  .lobby-grid { grid-template-columns: 1fr; }
}

.panel {
  background: var(--paper);
  border: 1.5px solid var(--ink-graphite);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: 16px;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 8px;
  flex-wrap: wrap;
}

.pin {
  font-family: 'JetBrains Mono', monospace;
  background: var(--ink-red);
  color: var(--paper);
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
}

.roster-list, .honor-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.roster-list li, .honor-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px dashed var(--paper-line);
  font-size: 0.88rem;
}

.roster-list .status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-blue-soft);
  display: inline-block;
  margin-right: 6px;
}
.roster-list .status-dot.busy { background: var(--ink-red-soft); }

.roster-list button {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  padding: 4px 8px;
  border: 1.5px solid var(--ink-graphite);
  background: var(--paper-deep);
  border-radius: 3px;
  cursor: pointer;
}
.roster-list button:disabled { opacity: 0.4; cursor: not-allowed; }

.honor-list { counter-reset: rank; }
.honor-list li::before {
  counter-increment: rank;
  content: counter(rank) ".";
  font-family: 'JetBrains Mono', monospace;
  color: var(--accent-gold);
  margin-right: 8px;
  font-weight: 700;
}
.honor-list .champ-count {
  font-family: 'JetBrains Mono', monospace;
  color: var(--ink-graphite-soft);
  font-size: 0.78rem;
}

.empty-note { color: var(--ink-graphite-soft); font-size: 0.82rem; padding: 6px 2px; }

/* ---------- Corkboard / tournament cards ---------- */
.corkboard {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tournament-card {
  background: var(--paper-deep);
  border: 1.5px solid var(--ink-graphite);
  border-radius: 2px;
  padding: 12px 14px;
  cursor: pointer;
  transform: rotate(var(--tilt, -0.6deg));
  transition: transform 0.12s ease;
}
.tournament-card:nth-child(even) { --tilt: 0.6deg; }
.tournament-card:hover { transform: rotate(0deg) translateY(-2px); }

.tournament-card h3 {
  font-family: 'Kalam', cursive;
  margin: 0 0 4px;
  font-size: 1.05rem;
}

.tournament-card .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--ink-graphite-soft);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.status-pill {
  display: inline-block;
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
}
.status-pill.waiting { background: #ddd4b0; color: var(--ink-graphite); }
.status-pill.ongoing { background: var(--ink-blue); color: var(--paper); }
.status-pill.finished { background: var(--accent-gold); color: var(--paper); }

/* ---------- Game board ---------- */
.game-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; }

.game-info {
  width: 100%;
  max-width: 620px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.player-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.95rem;
}
.player-tag .mark {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 2px solid currentColor;
}
.player-x { color: var(--ink-blue); }
.player-o { color: var(--ink-red); }

.series-score {
  font-family: 'JetBrains Mono', monospace;
  background: var(--paper-deep);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 0.85rem;
}

.game-status { text-align: center; }
.mode-label { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-graphite-soft); margin: 0; }
#gameStatusText { margin: 2px 0 0; font-weight: 600; }

.board-wrap {
  border: 2px solid var(--ink-graphite);
  border-radius: 3px;
  background: var(--paper);
  padding: 4px;
  box-shadow: var(--card-shadow);
  max-width: 100%;
  overflow: auto;
}

.board {
  display: grid;
  grid-template-columns: repeat(15, 28px);
  grid-template-rows: repeat(15, 28px);
}

@media (max-width: 560px) {
  .board { grid-template-columns: repeat(15, 22px); grid-template-rows: repeat(15, 22px); }
}

.cell {
  border: 1px solid var(--paper-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Kalam', cursive;
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}
.cell.filled { cursor: default; }
.cell.x-mark { color: var(--ink-blue); }
.cell.o-mark { color: var(--ink-red); }
.cell.win-cell { background: rgba(184, 145, 42, 0.28); }
.cell:not(.filled):hover { background: var(--paper-deep); }

/* ---------- Modals ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(44, 42, 36, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}
.modal-card { max-width: 380px; width: 100%; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink-graphite);
  color: var(--paper);
  padding: 10px 18px;
  border-radius: 4px;
  font-size: 0.85rem;
  z-index: 60;
}

/* ---------- Tournament detail ---------- */
.round-block { margin-bottom: 18px; }
.round-block h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-graphite-soft);
  margin-bottom: 8px;
}
.match-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px dashed var(--paper-line);
  font-size: 0.88rem;
}
.match-row .winner { color: var(--ink-blue); font-weight: 700; }
.match-row .vs { color: var(--ink-graphite-soft); font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; }

/* ---------- Result banner (never overlaps the board) ---------- */
/* This sits in normal document flow above the board, so the finished
   position stays fully visible while the result is shown. */
.result-banner {
  width: 100%;
  max-width: 620px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: var(--paper-deep);
  border: 2px solid var(--ink-graphite);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}

.result-banner.win { border-color: var(--accent-gold); }
.result-banner.lose { border-color: var(--ink-red-soft); }

.result-text { flex: 1 1 200px; }

#resultHeadline {
  font-family: 'Kalam', cursive;
  font-size: 1.25rem;
  margin: 0;
  line-height: 1.2;
}

.result-sub {
  margin: 4px 0 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--ink-graphite-soft);
}

.result-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.waiting-note {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--ink-graphite-soft);
  align-self: center;
}

/* ---------- Tournament table (seat) rows ---------- */
.match-row.my-match {
  background: var(--paper-deep);
  border-left: 3px solid var(--ink-blue);
  padding-left: 8px;
}

.match-actions { display: flex; align-items: center; gap: 8px; }

.seat-note {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--ink-graphite-soft);
}

/* ---------- Game picker ---------- */
.picker-wrap { width: 100%; max-width: 640px; }
.center-label { text-align: center; }

.game-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 12px;
}
@media (max-width: 560px) {
  .game-cards { grid-template-columns: 1fr; }
}

.game-card {
  background: var(--paper);
  border: 1.5px solid var(--ink-graphite);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: 22px 18px;
  cursor: pointer;
  text-align: center;
  font-family: 'Inter', sans-serif;
  transition: transform 0.12s ease;
}
.game-card:hover { transform: translateY(-3px); }
.game-icon { width: 84px; height: 84px; }
.game-card h3 {
  font-family: 'Kalam', cursive;
  font-size: 1.3rem;
  margin: 8px 0 4px;
  color: var(--ink-graphite);
}
.game-card p { margin: 0; font-size: 0.8rem; color: var(--ink-graphite-soft); }

/* ---------- Hall bar ---------- */
.hall-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 10px;
}
.hall-label {
  font-family: 'Kalam', cursive;
  font-size: 1.15rem;
}

/* ---------- Captured pieces tray (co tuong) ---------- */
.captured-tray {
  width: 100%;
  max-width: 620px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--paper-deep);
  border: 1.5px dashed var(--paper-line);
  border-radius: var(--radius);
  min-height: 46px;
}
.tray-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-graphite-soft);
  white-space: nowrap;
}
.tray-pieces { display: flex; flex-wrap: wrap; gap: 5px; }
.tray-empty { font-size: 0.75rem; color: var(--ink-graphite-soft); font-style: italic; }

.tray-piece {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Kalam', serif;
  font-size: 0.85rem;
  font-weight: 700;
  border: 1.5px solid currentColor;
  background: var(--paper);
}
.tray-piece.red { color: var(--ink-red); }
.tray-piece.black { color: var(--ink-graphite); }

/* ---------- Xiangqi board ---------- */
.xiangqi-wrap {
  position: relative;
  background: var(--paper);
  border: 2px solid var(--ink-graphite);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: 8px;
  overflow: auto;
  max-width: 100%;
}

.xq-board { position: relative; }
.xq-grid-svg { position: absolute; inset: 0; pointer-events: none; }

.xq-point {
  position: absolute;
  width: 40px; height: 40px;
  margin-left: -20px; margin-top: -20px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  border-radius: 50%;
}
@media (max-width: 560px) {
  .xq-point { width: 30px; height: 30px; margin-left: -15px; margin-top: -15px; }
}

.xq-piece {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Kalam', serif;
  font-size: 1rem;
  font-weight: 700;
  background: var(--paper);
  border: 2px solid currentColor;
  box-shadow: 0 1px 3px rgba(44,42,36,0.3);
  user-select: none;
}
@media (max-width: 560px) {
  .xq-piece { width: 26px; height: 26px; font-size: 0.8rem; }
}
.xq-piece.red { color: var(--ink-red); }
.xq-piece.black { color: var(--ink-graphite); }

.xq-point.selected .xq-piece {
  background: var(--accent-gold);
  color: var(--paper);
  border-color: var(--accent-gold);
}

/* The piece sits in the flex centre; move markers are absolutely positioned
   overlays. They must NOT be flex items, or they get pushed beside the piece
   and squashed into an ellipse instead of sitting on top of it. */
.xq-piece { position: relative; z-index: 1; }

.xq-point.movable::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(43, 76, 126, 0.5);
  z-index: 2;
  pointer-events: none;
}

/* Capturable enemy piece: a ring drawn around the piece, not beside it. */
.xq-point.movable.capture::after {
  width: 36px;
  height: 36px;
  background: transparent;
  border: 3px solid var(--ink-red);
  box-sizing: border-box;
}
@media (max-width: 560px) {
  .xq-point.movable::after { width: 11px; height: 11px; }
  .xq-point.movable.capture::after { width: 28px; height: 28px; }
}

/* Highlight of the previous move: a soft ring, so an empty square is never
   mistaken for a piece. */
.xq-point.last-move::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(184, 145, 42, 0.18);
  border: 1.5px solid rgba(184, 145, 42, 0.55);
  box-sizing: border-box;
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 560px) {
  .xq-point.last-move::before { width: 28px; height: 28px; }
}
.xq-point.in-check .xq-piece {
  border-color: var(--ink-red);
  box-shadow: 0 0 0 3px rgba(161, 61, 47, 0.35);
}

.check-banner {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--ink-red);
  font-weight: 700;
}