/* =========================================
   五子棋 · 古风棋馆
   Classical / Ink-wash / Rice-paper aesthetic
   ========================================= */

:root {
  --paper:      #f0e4c9;        /* rice paper base */
  --paper-2:    #e6d7b2;        /* darker paper */
  --paper-3:    #d9c495;
  --ink:        #2a2318;        /* deep ink */
  --ink-2:      #4a3b28;
  --ink-3:      #6b5738;
  --muted:      #8b7a58;
  --gold:       #b48b3f;
  --gold-2:     #d4a942;
  --crimson:    #8b1a1e;        /* seal red */
  --crimson-2:  #a02024;
  --jade:       #4a7c59;
  --board:      #d9b382;
  --board-line: #3a2416;
  --shadow:     rgba(42, 35, 24, 0.15);
  --success:    #4a7c59;
  --warn:       #b48b3f;
  --danger:     #8b1a1e;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "STKaiti", "KaiTi", "Kaiti SC", "Noto Serif SC", "楷体", serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  /* rice-paper texture via SVG data-URL */
  background-image:
    radial-gradient(ellipse at 20% 15%, rgba(180,139,63,0.10), transparent 55%),
    radial-gradient(ellipse at 80% 85%, rgba(139,26,30,0.08), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='2' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 0.15  0 0 0 0 0.11  0 0 0 0 0.05  0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Decorative corners ---- */
body::before, body::after {
  content: ""; position: fixed; width: 180px; height: 180px;
  pointer-events: none; opacity: 0.5; z-index: 0;
  background-repeat: no-repeat; background-size: contain;
}
body::before {
  top: 0; left: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M0 0 L200 0 L200 20 L20 20 L20 200 L0 200 Z' fill='%232a2318' opacity='0.15'/%3E%3Cpath d='M10 10 L60 10 M10 10 L10 60' stroke='%23b48b3f' stroke-width='2' opacity='0.6'/%3E%3Ccircle cx='40' cy='40' r='4' fill='%238b1a1e' opacity='0.7'/%3E%3C/svg%3E");
}
body::after {
  bottom: 0; right: 0;
  transform: rotate(180deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M0 0 L200 0 L200 20 L20 20 L20 200 L0 200 Z' fill='%232a2318' opacity='0.15'/%3E%3Cpath d='M10 10 L60 10 M10 10 L10 60' stroke='%23b48b3f' stroke-width='2' opacity='0.6'/%3E%3Ccircle cx='40' cy='40' r='4' fill='%238b1a1e' opacity='0.7'/%3E%3C/svg%3E");
}

.view { min-height: 100vh; padding: 32px 24px 64px; position: relative; z-index: 1; }
.hidden { display: none !important; }

/* ---- Typography ---- */
.title-han {
  font-family: "STZhongsong", "SimSun", "Songti SC", serif;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.15em;
}
h1.title-han { font-size: 36px; }
h2.title-han { font-size: 24px; }
h3.title-han { font-size: 18px; }

.seal {
  display: inline-block;
  background: var(--crimson);
  color: #f5e6c8;
  font-family: "STZhongsong", "SimSun", serif;
  padding: 4px 8px;
  font-size: 12px;
  letter-spacing: 0.3em;
  border-radius: 2px;
  transform: rotate(-2deg);
  box-shadow: 1px 2px 3px var(--shadow);
}
.jinshi {
  font-family: "STZhongsong", "SimSun", serif;
  color: var(--muted);
  letter-spacing: 0.15em;
  font-size: 12px;
}

/* ---- Buttons ---- */
.btn {
  padding: 10px 22px;
  border: 1.5px solid var(--ink-3);
  background: linear-gradient(180deg, var(--paper), var(--paper-2));
  color: var(--ink);
  border-radius: 4px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.1em;
  box-shadow: 0 2px 4px var(--shadow);
}
.btn:hover { background: linear-gradient(180deg, var(--paper-2), var(--paper-3)); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.primary {
  background: linear-gradient(180deg, var(--crimson-2), var(--crimson));
  color: #f5e6c8; border-color: #5a0d10;
}
.btn.primary:hover { background: linear-gradient(180deg, var(--crimson), #6b1418); }
.btn.gold {
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  color: var(--ink); border-color: #7a5a20;
}
.btn.gold:hover { background: linear-gradient(180deg, var(--gold), #8a681c); color: #f5e6c8; }
.btn.ghost { background: rgba(180,160,140,0.25); color: var(--ink-2); border: 1px solid var(--ink-4); padding: 8px 20px; }
.btn.ghost:hover { background: rgba(180,160,140,0.45); }
.btn.small { padding: 6px 14px; font-size: 13px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---- Panels ---- */
.panel {
  background: linear-gradient(180deg, rgba(240,228,201,0.6), rgba(217,196,149,0.4));
  border: 1px solid var(--ink-3);
  border-radius: 6px;
  padding: 20px;
  box-shadow: 0 4px 12px var(--shadow);
  position: relative;
}
.panel-title {
  font-family: "STZhongsong", "SimSun", serif;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: 0.2em;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--ink-3);
  display: flex; justify-content: space-between; align-items: center;
}
.panel-title .count { font-size: 12px; color: var(--muted); letter-spacing: 0.1em; }

/* ---- Login ---- */
#auth-view, #login-view { display: flex; align-items: center; justify-content: center; }

.auth-tabs {
  display: flex; gap: 4px; margin: 20px 0 24px;
  background: rgba(139,122,88,0.15);
  padding: 4px; border-radius: 4px;
}
.auth-tab {
  flex: 1; padding: 10px 14px;
  border: none; background: transparent;
  font-family: inherit; font-size: 15px;
  color: var(--muted); cursor: pointer;
  letter-spacing: 0.2em; border-radius: 3px;
  transition: all 0.2s;
}
.auth-tab.active { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px var(--shadow); }
.auth-panel.hidden { display: none; }


.login-card {
  width: 100%; max-width: 460px;
  background: linear-gradient(180deg, rgba(240,228,201,0.95), rgba(217,196,149,0.85));
  border: 2px solid var(--ink-3);
  border-radius: 8px;
  padding: 48px 40px;
  text-align: center;
  box-shadow: 0 20px 60px var(--shadow);
  position: relative;
}
.login-card::before {
  content: "棋"; position: absolute; top: -18px; right: -18px;
  width: 60px; height: 60px; background: var(--crimson);
  color: #f5e6c8; font-family: "STZhongsong", serif;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; border-radius: 4px; transform: rotate(6deg);
  box-shadow: 2px 4px 8px var(--shadow);
}
.login-card h1 { font-size: 40px; margin-bottom: 8px; }
.login-card .subtitle { color: var(--muted); font-size: 13px; letter-spacing: 0.3em; margin-bottom: 32px; }
.login-form { display: flex; flex-direction: column; gap: 16px; }
.login-form label { text-align: left; font-size: 13px; color: var(--ink-3); letter-spacing: 0.15em; }

input[type=text], input[type=password], input[type=number], textarea, input:not([type]) {
  background: rgba(255, 252, 240, 0.6);
  border: 1px solid var(--ink-3);
  color: var(--ink);
  border-radius: 4px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
input:focus, textarea:focus { border-color: var(--crimson); background: rgba(255, 252, 240, 0.9); }
.error { color: var(--crimson); font-size: 13px; min-height: 18px; }

/* ---- Topbar ---- */
.topbar {
  max-width: 1280px; margin: 0 auto 24px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 8px 4px;
}
.brand {
  display: flex; align-items: center; gap: 14px;
}
.brand h1 { font-size: 28px; }
.brand .brand-sub { color: var(--muted); font-size: 12px; letter-spacing: 0.25em; margin-top: 2px; }

.topbar-right { display: flex; align-items: center; gap: 10px; }

.me-badge {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 14px; background: rgba(255,252,240,0.5);
  border: 1px solid var(--ink-3); border-radius: 4px;
  cursor: pointer; transition: background 0.2s;
}
.me-badge:hover { background: rgba(255,252,240,0.8); }
.me-badge .avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #f5e6c8; font-family: "STZhongsong", serif; font-size: 15px; font-weight: 700;
  border: 1.5px solid var(--ink); box-shadow: 0 1px 3px var(--shadow);
}
.me-badge .info { text-align: left; }
.me-badge .name { font-size: 15px; font-weight: 600; }
.me-badge .rank-line { font-size: 11px; color: var(--muted); letter-spacing: 0.1em; }

/* ---- Lobby layout ---- */
.lobby-grid {
  max-width: 1280px; margin: 0 auto;
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 20px;
}
.lobby-left { display: flex; flex-direction: column; gap: 20px; }
.lobby-right { display: flex; flex-direction: column; gap: 20px; }

/* Player list */
.player-list { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.player-list li {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 4px;
  transition: background 0.15s;
  border-left: 3px solid transparent;
}
.player-list li:hover { background: rgba(180,139,63,0.08); border-left-color: var(--gold); }
.player-list .avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #f5e6c8; font-family: "STZhongsong", serif; font-size: 16px; font-weight: 700;
  border: 2px solid var(--ink); flex-shrink: 0;
  box-shadow: 0 2px 4px var(--shadow);
}
.player-list .info { flex: 1; min-width: 0; }
.player-list .name-row { display: flex; align-items: center; gap: 8px; }
.player-list .name { font-size: 16px; font-weight: 600; }
.player-list .rank-tag {
  background: var(--ink);
  color: var(--gold-2);
  padding: 1px 6px;
  border-radius: 2px;
  font-size: 10px;
  font-family: "STZhongsong", serif;
  letter-spacing: 0.1em;
}
.player-list .rank-tag.qi-sheng { background: var(--crimson); color: #f5e6c8; }
.player-list .sig { font-size: 12px; color: var(--muted); margin-top: 2px; }
.player-list .stat { font-size: 11px; color: var(--ink-3); margin-top: 2px; letter-spacing: 0.08em; }
.player-list .actions { display: flex; gap: 6px; }
.status-idle { color: var(--jade); font-size: 11px; letter-spacing: 0.15em; }
.status-in_game { color: var(--warn); font-size: 11px; letter-spacing: 0.15em; }
.status-spectating { color: var(--muted); font-size: 11px; letter-spacing: 0.15em; }
.role-tag {
  font-size: 10px; color: var(--gold); letter-spacing: 0.15em;
  font-family: "STZhongsong", serif; margin-top: 2px;
}

/* Role selector in profile */
.role-selector { display: flex; gap: 8px; }
.role-btn {
  flex: 1; padding: 10px 16px;
  border: 1.5px solid var(--ink-3); border-radius: 4px;
  background: var(--paper); color: var(--ink);
  font-family: inherit; font-size: 15px; letter-spacing: 0.15em;
  cursor: pointer; transition: all 0.2s;
}
.role-btn:hover { background: var(--paper-2); }
.role-btn.active {
  background: linear-gradient(180deg, var(--crimson-2), var(--crimson));
  color: #f5e6c8; border-color: #5a0d10;
}

/* Game list (ongoing games to watch) */
.game-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.game-list li {
  padding: 12px; border-radius: 4px;
  background: rgba(255, 252, 240, 0.4);
  border: 1px solid var(--paper-3);
  display: flex; justify-content: space-between; align-items: center;
  transition: background 0.15s;
}
.game-list li:hover { background: rgba(255, 252, 240, 0.7); }
.game-list .vs {
  font-family: "STZhongsong", serif; font-size: 14px;
}
.game-list .stone-b, .game-list .stone-w {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid var(--ink); vertical-align: middle;
}
.game-list .stone-b { background: #1a1a1a; }
.game-list .stone-w { background: #f0f0f0; }
.game-list .meta { font-size: 11px; color: var(--muted); margin-top: 3px; letter-spacing: 0.1em; }

/* Leaderboard */
.leaderboard { list-style: none; counter-reset: rk; }
.leaderboard li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px dashed var(--paper-3);
  counter-increment: rk;
}
.leaderboard li:last-child { border-bottom: none; }
.leaderboard li::before {
  content: counter(rk);
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--paper-2); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: "STZhongsong", serif; font-size: 13px;
  flex-shrink: 0;
}
.leaderboard li:nth-child(1)::before { background: var(--crimson); color: #f5e6c8; }
.leaderboard li:nth-child(2)::before { background: var(--gold); color: #f5e6c8; }
.leaderboard li:nth-child(3)::before { background: var(--ink-3); color: #f5e6c8; }
.leaderboard .name { flex: 1; font-weight: 600; }
.leaderboard .pts { font-family: "STZhongsong", serif; color: var(--crimson); font-weight: 700; }

/* Notify feed */
.notify-list { list-style: none; max-height: 180px; overflow-y: auto; }
.notify-list li {
  padding: 6px 4px; font-size: 13px;
  border-bottom: 1px dashed var(--paper-3);
}
.notify-list .time { color: var(--muted); font-size: 11px; margin-right: 6px; font-family: "STZhongsong", serif; }

.world-chat-list { list-style: none; max-height: 280px; overflow-y: auto; }
.world-chat-list li {
  padding: 3px 0; border-bottom: 1px solid var(--ink-a);
  font-size: 12px; line-height: 1.4;
}
.world-chat-list .time { color: var(--muted); font-size: 11px; margin-right: 6px; font-family: "STZhongsong", serif; }

/* ---- Game view ---- */
.game-grid {
  max-width: 1280px; margin: 0 auto;
  display: grid;
  grid-template-columns: 260px minmax(400px, 640px) 320px;
  gap: 20px; align-items: start;
}
.player-card {
  padding: 16px;
  background: linear-gradient(180deg, rgba(240,228,201,0.7), rgba(217,196,149,0.5));
  border: 1px solid var(--ink-3);
  border-radius: 6px;
  text-align: center;
  transition: box-shadow 0.3s;
}
.player-card.active { box-shadow: 0 0 0 2px var(--crimson), 0 4px 12px var(--shadow); }
.player-card .stone { font-size: 28px; margin-bottom: 6px; }
.player-card .avatar-big {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #f5e6c8; font-size: 26px; font-weight: 700; font-family: "STZhongsong", serif;
  border: 2px solid var(--ink); margin: 0 auto 10px;
  box-shadow: 0 3px 8px var(--shadow);
}
.player-card .name { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.player-card .rank { color: var(--crimson); font-family: "STZhongsong", serif; font-size: 13px; letter-spacing: 0.2em; }
.player-card .pts { color: var(--muted); font-size: 12px; margin-top: 8px; letter-spacing: 0.1em; }

.center-col { display: flex; flex-direction: column; gap: 12px; }
.stake-bar {
  background: linear-gradient(180deg, var(--ink), var(--ink-2));
  color: var(--gold-2);
  padding: 10px 20px;
  border-radius: 4px;
  text-align: center;
  font-family: "STZhongsong", serif;
  letter-spacing: 0.25em;
  font-size: 13px;
  border: 1px solid var(--gold);
}
.timer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-3));
  border: 1px solid var(--ink-3);
  border-radius: 4px;
  font-family: "STZhongsong", serif;
  letter-spacing: 0.2em;
  font-size: 15px;
  color: var(--ink);
  transition: all 0.3s;
}
.timer-bar .timer-label {
  font-size: 13px;
  color: var(--ink-3);
}
.timer-bar .timer-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}
.timer-bar.warning {
  background: linear-gradient(180deg, #f5e0c0, #e8c890);
  border-color: var(--crimson);
  color: var(--crimson);
}
.timer-bar.warning .timer-value {
  color: var(--crimson);
}
.timer-bar.warning .timer-label {
  color: var(--crimson-2);
}
.timer-bar.paused {
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  border-color: var(--gold);
  color: var(--gold-2);
}
.timer-bar.paused .timer-value {
  color: var(--gold-2);
}
.timer-bar.pulse {
  animation: timerPulse 1s ease-in-out infinite;
}
@keyframes timerPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139, 26, 30, 0.4); }
  50% { box-shadow: 0 0 12px 4px rgba(139, 26, 30, 0.3); }
}
.board-wrap {
  position: relative;
  aspect-ratio: 1;
  background: linear-gradient(135deg, #dcbe93 0%, #b8905e 100%);
  border-radius: 8px;
  padding: 3.5%;
  box-shadow: 0 20px 60px -10px rgba(42,35,24,0.4),
              inset 0 0 80px rgba(120,70,20,0.2),
              inset 0 0 0 3px rgba(80,45,15,0.4);
}
.board-wrap::before {
  content: ""; position: absolute; inset: 8px;
  border: 1px solid rgba(80,45,15,0.3); border-radius: 4px; pointer-events: none;
}
#board { width: 100%; height: 100%; display: block; cursor: pointer; }

.turn-badge {
  align-self: center;
  padding: 8px 24px;
  background: var(--paper-2); border: 1px solid var(--ink-3);
  color: var(--ink); border-radius: 4px;
  font-family: "STZhongsong", serif;
  letter-spacing: 0.2em; font-size: 14px;
}
.turn-badge.your { background: var(--crimson); color: #f5e6c8; border-color: var(--crimson-2); }
.turn-badge.win { background: var(--gold); color: var(--ink); }
.turn-badge.lose { background: var(--ink); color: var(--gold-2); }
.turn-badge.draw { background: var(--muted); color: #f5e6c8; }

.game-actions { display: flex; gap: 8px; justify-content: center; }

/* Side panels (chat, bets, spectators) */
.side { display: flex; flex-direction: column; gap: 16px; }

.chat-panel { display: flex; flex-direction: column; max-height: 480px; }
.chat-list { list-style: none; flex: 1; overflow-y: auto; padding-right: 4px; }
.chat-list li {
  padding: 6px 4px; font-size: 13px;
  line-height: 1.5;
  border-bottom: 1px dashed rgba(139,122,88,0.2);
}
.chat-list .who { color: var(--crimson); font-weight: 600; margin-right: 6px; font-family: "STZhongsong", serif; }
.chat-list img { max-width: 200px; max-height: 200px; margin-top: 4px; border: 1px solid var(--ink-3); border-radius: 4px; display: block; }
.chat-input { display: flex; gap: 6px; margin-top: 10px; }
.chat-input input { flex: 1; font-size: 13px; padding: 8px; }
.chat-input .icon-btn {
  padding: 6px 10px; background: var(--paper-2); border: 1px solid var(--ink-3);
  border-radius: 4px; cursor: pointer; font-size: 16px;
}
.chat-input .icon-btn:hover { background: var(--paper-3); }

/* Betting panel */
.bet-panel .bet-buttons { display: flex; gap: 8px; margin: 10px 0; }
.bet-panel .bet-buttons button {
  flex: 1; padding: 10px; border-radius: 4px; border: 1.5px solid var(--ink-3);
  font-family: inherit; cursor: pointer; letter-spacing: 0.1em;
  background: var(--paper); transition: all 0.2s;
}
.bet-panel .bet-buttons button.black { color: var(--ink); }
.bet-panel .bet-buttons button.white { color: var(--muted); }
.bet-panel .bet-buttons button.selected { border-color: var(--crimson); background: rgba(139,26,30,0.1); }
.bet-panel .bet-amount { display: flex; gap: 8px; align-items: center; }
.bet-panel .bet-amount input { flex: 1; }
.bet-summary { font-size: 12px; color: var(--muted); margin-top: 10px; text-align: center; }

.spec-count { text-align: center; color: var(--muted); font-size: 12px; }

/* Profile modal */
.modal {
  position: fixed; inset: 0;
  background: rgba(42, 35, 24, 0.65);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; backdrop-filter: blur(6px);
}
.modal-card {
  background: linear-gradient(180deg, var(--paper), var(--paper-2));
  border: 2px solid var(--ink-3);
  border-radius: 8px;
  padding: 32px;
  max-width: 480px; width: calc(100% - 40px);
  max-height: 85vh; overflow-y: auto;
  box-shadow: 0 30px 80px rgba(42,35,24,0.5);
  position: relative;
}
.modal-card::before {
  content: ""; position: absolute; top: 8px; left: 8px; right: 8px; bottom: 8px;
  border: 1px solid var(--ink-3); border-radius: 4px; pointer-events: none;
}
.modal-card h2 { text-align: center; margin-bottom: 20px; }
.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-row label { font-size: 12px; color: var(--ink-3); letter-spacing: 0.15em; }
.color-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.color-picker button {
  width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; transition: transform 0.15s;
}
.color-picker button.selected { border-color: var(--ink); transform: scale(1.15); }
.modal-actions { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }

/* Profile view (history table) */
.history-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.history-table th, .history-table td {
  padding: 8px; text-align: left;
  border-bottom: 1px solid var(--paper-3);
}
.history-table th {
  color: var(--muted); font-weight: normal; letter-spacing: 0.15em;
  font-family: "STZhongsong", serif; font-size: 11px;
}
.history-table .win { color: var(--jade); }
.history-table .loss { color: var(--crimson); }
.history-table .draw { color: var(--muted); }

/* Challenge stake dialog */
.stake-slider { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.stake-slider input[type=range] { flex: 1; }
.stake-slider .val { font-family: "STZhongsong", serif; color: var(--crimson); font-size: 16px; min-width: 50px; text-align: right; }

/* Game type selector */
.gametype-selector { display: flex; gap: 8px; justify-content: center; }
.gametype-btn {
  flex: 1; padding: 10px 16px;
  border: 1.5px solid var(--ink-3); border-radius: 4px;
  background: var(--paper); color: var(--ink);
  font-family: inherit; font-size: 15px; letter-spacing: 0.15em;
  cursor: pointer; transition: all 0.2s;
}
.gametype-btn:hover { background: var(--paper-2); }
.gametype-btn.active {
  background: linear-gradient(180deg, var(--crimson-2), var(--crimson));
  color: #f5e6c8; border-color: #5a0d10;
}
.difficulty-btn {
  flex: 1; padding: 8px 12px;
  border: 1.5px solid var(--ink-3); border-radius: 4px;
  background: var(--paper); color: var(--ink);
  font-family: inherit; font-size: 14px; letter-spacing: 0.1em;
  cursor: pointer; transition: all 0.2s;
}
.difficulty-btn:hover { background: var(--paper-2); }
.difficulty-btn.active {
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  color: #1a1a1a; border-color: #8b6914;
}

/* Xiangqi board */
.xq-board-wrap {
  aspect-ratio: 9 / 10 !important;
  background: linear-gradient(135deg, #f0d9a0 0%, #d4a95a 100%) !important;
}
#xq-board { width: 100%; height: 100%; display: block; cursor: pointer; }

/* Toasts */
.toast-container {
  position: fixed; top: 24px; right: 24px; z-index: 200;
  display: flex; flex-direction: column; gap: 8px;
}
.toast {
  padding: 12px 18px;
  background: linear-gradient(180deg, var(--ink), var(--ink-2));
  color: var(--paper);
  border: 1px solid var(--gold);
  border-radius: 4px;
  font-size: 13px; letter-spacing: 0.1em;
  min-width: 240px; max-width: 340px;
  animation: toast-in 0.3s ease-out;
  box-shadow: 0 8px 24px rgba(42,35,24,0.4);
}
@keyframes toast-in {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Rank-up celebration */
.rankup-anim {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background: rgba(42,35,24,0.7); pointer-events: none;
  animation: rankup-fade 4s forwards;
}
.rankup-anim .word {
  font-family: "STZhongsong", serif; font-size: 96px;
  color: var(--gold-2); letter-spacing: 0.3em;
  text-shadow: 0 0 30px var(--gold), 0 0 60px var(--crimson);
  animation: rankup-scale 4s forwards;
}
@keyframes rankup-fade {
  0% { opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes rankup-scale {
  0% { transform: scale(0.3); }
  30% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* ---- Admin panel ---- */
.admin-card { max-width: 960px !important; }
.admin-table-wrap { max-height: 55vh; overflow: auto; border: 1px solid var(--paper-3); border-radius: 4px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 12px; background: rgba(255,252,240,0.5); }
.admin-table th, .admin-table td { padding: 8px 10px; border-bottom: 1px solid var(--paper-3); text-align: left; white-space: nowrap; }
.admin-table th {
  background: var(--paper-2); color: var(--ink);
  font-family: "STZhongsong", serif; letter-spacing: 0.15em;
  position: sticky; top: 0; z-index: 1;
}
.admin-table tr.banned td { opacity: 0.45; text-decoration: line-through; }
.admin-table tr.admin-row td { color: var(--crimson); font-weight: 600; }
.admin-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.admin-actions button {
  padding: 4px 10px; font-size: 11px; border-radius: 3px;
  border: 1px solid var(--ink-3); background: var(--paper);
  cursor: pointer; font-family: inherit;
}
.admin-actions button:hover { background: var(--paper-2); }
.admin-actions button.danger { background: var(--crimson); color: #f5e6c8; border-color: #5a0d10; }
.admin-actions button.warn { background: var(--gold); color: var(--ink); border-color: #7a5a20; }
.badge-online { display: inline-block; padding: 1px 6px; border-radius: 2px; font-size: 10px; letter-spacing: 0.1em; }
.badge-online.on { background: var(--jade); color: #f5e6c8; }
.badge-online.off { background: var(--muted); color: #f5e6c8; }
.badge-online.banned { background: var(--crimson); color: #f5e6c8; }

/* Responsive */
@media (max-width: 1080px) {
  .game-grid { grid-template-columns: 1fr; }
  .lobby-grid { grid-template-columns: 1fr; }
  body::before, body::after { display: none; }
}

/* AI Player Styles */
.ai-player { border-left: 3px solid var(--gold); background: linear-gradient(135deg, rgba(212,169,66,0.08) 0%, transparent 60%); }
.ai-tag { background: linear-gradient(135deg, #d4a942, #b8860b); color: #1a1a1a; font-weight: 700; letter-spacing: 0.15em; }
.ai-sig { color: var(--gold); font-style: italic; }
.ai-stat { color: var(--gold-2); font-size: 11px; }
.ai-challenge {
  background: linear-gradient(135deg, #d4a942, #b8860b) !important;
  color: #1a1a1a !important;
  border-color: #8b6914 !important;
  font-weight: 700;
  animation: aiGlow 2s ease-in-out infinite;
}
@keyframes aiGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(212,169,66,0.3); }
  50% { box-shadow: 0 0 16px rgba(212,169,66,0.6); }
}


.history-list { display: flex; flex-direction: column; gap: 8px; }
.history-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: rgba(255,252,240,0.5);
  border: 1px solid var(--border);
  border-radius: 6px;
  gap: 12px;
}
.history-item:hover { background: rgba(212,169,66,0.08); }
.history-item .hi-players { flex: 1; min-width: 0; }
.history-item .hi-black { color: #333; font-weight: 600; }
.history-item .hi-white { color: #888; font-weight: 600; }
.history-item .hi-vs { color: var(--gold); margin: 0 4px; font-weight: 700; }
.history-item .hi-info { font-size: 11px; color: var(--jinshi); white-space: nowrap; }
.history-item .hi-result { font-weight: 700; font-size: 12px; white-space: nowrap; }
.history-item .hi-result.win { color: #2d6a4f; }
.history-item .hi-result.loss { color: var(--crimson); }
.history-item .hi-result.draw { color: var(--gold); }

/* Modal overlay (generic centered dialog for stats/history/analysis) */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(42, 35, 24, 0.65);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; backdrop-filter: blur(6px);
}
.modal-overlay .modal-box {
  background: linear-gradient(180deg, var(--paper), var(--paper-2));
  border: 2px solid var(--ink-3);
  border-radius: 8px;
  padding: 24px;
  width: calc(100% - 40px);
  box-shadow: 0 30px 80px rgba(42,35,24,0.5);
  position: relative;
}
.modal-overlay .modal-box::before {
  content: ""; position: absolute; top: 8px; left: 8px; right: 8px; bottom: 8px;
  border: 1px solid var(--ink-3); border-radius: 4px; pointer-events: none;
}
.modal-overlay .modal-box h3 {
  text-align: center; margin-bottom: 16px;
  font-size: 18px; letter-spacing: 0.2em;
}

/* Stats modal */
.stats-box { max-width: 520px; max-height: 85vh; overflow-y: auto; }
.stats-overview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.stats-kv { text-align: center; padding: 12px 8px; background: rgba(255,252,240,0.6); border: 1px solid var(--border); border-radius: 8px; }
.stats-kv .v { font-size: 24px; font-weight: 700; color: var(--dark); }
.stats-kv .l { font-size: 11px; color: var(--jinshi); margin-top: 2px; }
.stats-kv .v.win { color: #2d6a4f; }
.stats-kv .v.loss { color: var(--crimson); }
.stats-section { margin-bottom: 12px; }
.stats-section h4 { font-size: 13px; color: var(--gold); margin: 0 0 6px; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.stats-bar-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 12px; }
.stats-bar-wrap .label { width: 60px; text-align: right; color: var(--jinshi); white-space: nowrap; }
.stats-bar-track { flex: 1; height: 14px; background: rgba(0,0,0,0.06); border-radius: 7px; overflow: hidden; position: relative; }
.stats-bar-fill { height: 100%; border-radius: 7px; transition: width 0.4s; }
.stats-bar-fill.win-bar { background: linear-gradient(90deg, #2d6a4f, #40916c); }
.stats-bar-fill.loss-bar { background: linear-gradient(90deg, #9b2226, #bc4749); }
.stats-bar-fill.draw-bar { background: linear-gradient(90deg, #d4a942, #e2c36a); }
.stats-bar-wrap .n { width: 28px; font-weight: 600; text-align: left; }
.stats-recent { display: flex; flex-wrap: wrap; gap: 3px; }
.stats-recent-dot { width: 18px; height: 18px; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; color: #fff; font-weight: 700; }
.stats-recent-dot.w { background: #40916c; }
.stats-recent-dot.l { background: #bc4749; }
.stats-recent-dot.d { background: #d4a942; }

/* AI difficulty tag in game list */
.ai-tag { font-size: 10px; padding: 2px 6px; border-radius: 3px; color: #fff; font-weight: 600; margin-left: 4px; }
.ai-tag.easy { background: #40916c; }
.ai-tag.medium { background: #d4a942; }
.ai-tag.hard { background: #bc4749; }
/* =========================================
/* ---- 主题切换按钮 ---- */
.theme-toggle {
  position: fixed; top: 16px; right: 16px; z-index: 1000;
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--gold); background: var(--paper-3);
  color: var(--ink); font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s; line-height: 1;
}
.theme-toggle:hover { border-color: var(--gold-2); transform: scale(1.1); }
.theme-toggle:active { transform: scale(0.95); }

/* ---- 博弈分析 ---- */
.analysis-move {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px; margin: 2px 0; border-radius: 4px;
  font-size: 13px;
}
.analysis-move.blunder { background: rgba(139,26,30,0.1); border-left: 3px solid var(--crimson); }
.analysis-move.good { background: rgba(74,124,89,0.1); border-left: 3px solid var(--jade); }
.analysis-move.neutral { border-left: 3px solid var(--muted); }
.analysis-move .am-no { min-width: 28px; color: var(--muted); }
.analysis-move .am-color { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.analysis-move .am-color.black { background: #2a2318; border: 1px solid var(--muted); }
.analysis-move .am-color.white { background: #f0e4c9; border: 1px solid var(--muted); }
.analysis-move .am-score { min-width: 60px; text-align: right; font-weight: 600; }
.analysis-move .am-bar-wrap { flex: 1; height: 8px; background: var(--paper-3); border-radius: 4px; overflow: hidden; }
.analysis-move .am-bar { height: 100%; border-radius: 4px; transition: width 0.3s; }
.analysis-summary {
  font-size: 13px; color: var(--ink-2); margin-bottom: 12px; padding: 8px 12px;
  background: var(--paper-2); border-radius: 6px; text-align: center;
}

/* ---- 聊天表情 ---- */
.emoji-btn {
  width: 36px; height: 36px; border: none; border-radius: 50%;
  background: var(--paper-3); cursor: pointer; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s; flex-shrink: 0;
}
.emoji-btn:hover { transform: scale(1.15); background: var(--paper-2); }
.emoji-picker {
  position: absolute; bottom: 48px; left: 0;
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px;
  padding: 8px; background: var(--paper-2); border: 1px solid var(--gold);
  border-radius: 8px; z-index: 20; width: 280px;
}
.emoji-picker span {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  font-size: 18px; cursor: pointer; border-radius: 4px; transition: background 0.1s;
}
.emoji-picker span:hover { background: var(--paper-3); transform: scale(1.2); }

/* ---- 每日任务 ---- */
.daily-task-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; margin-bottom: 8px;
  background: var(--paper-2); border-radius: 8px;
}
.daily-task-info { flex: 1; }
.daily-task-name { font-weight: 600; font-size: 14px; }
.daily-task-desc { font-size: 12px; color: var(--ink-3); margin: 2px 0 6px; }
.daily-task-bar {
  height: 6px; background: var(--paper-3); border-radius: 3px; overflow: hidden;
}
.daily-task-fill {
  height: 100%; background: var(--gold); border-radius: 3px; transition: width 0.3s;
}
.daily-task-btn { min-width: 64px; text-align: right; }