/* =====================================================================
 *  classic.css — 经典中国风主题（登录 / 大厅 / 对局 / 棋盘共用）
 * ===================================================================== */
:root {
  --gold: #d4af37;
  --gold-l: #f0d88a;
  --red: #9e1b1b;
  --red-d: #7a1212;
  --ink: #3a2311;
  --paper: #f7ecd8;
  --paper-d: #e6d0a6;
  --wood-1: #8a5a2b;
  --wood-2: #5d3516;
  --wood-3: #3a200b;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body.classic {
  font-family: 'STKaiti', 'KaiTi', 'Kaiti SC', 'FangSong', 'SimSun', serif;
  color: var(--paper);
  min-height: 100vh;
  background:
    radial-gradient(1100px 700px at 85% -10%, rgba(212, 175, 55, .16), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(158, 27, 27, .18), transparent 60%),
    repeating-linear-gradient(88deg, rgba(0, 0, 0, .05) 0 3px, transparent 3px 9px),
    linear-gradient(180deg, #7a4a1f 0%, #5d3516 32%, #4a2a10 68%, #3a200b 100%);
  background-attachment: fixed;
}

/* ---------------- 灯笼（登录页装饰） ---------------- */
.lantern { position: fixed; top: -8px; z-index: 5; width: 64px; height: 84px; animation: swing 5.5s linear infinite; transform-origin: top center; pointer-events: none; }
.lantern.left { left: 6%; }
.lantern.right { right: 6%; animation-delay: -2.7s; }
.lantern::before { content: ''; position: absolute; top: -30px; left: 50%; width: 2px; height: 34px; background: var(--gold); transform: translateX(-50%); }
.lantern .body {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 28%, #ffd9a0, #e0392f 58%, #a02020);
  border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
  box-shadow: 0 6px 24px rgba(224, 57, 47, .45), inset 0 -6px 14px rgba(0, 0, 0, .3);
}
.lantern .body::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 10px, rgba(120, 20, 20, .5) 10px 12px);
  border-radius: inherit;
}
.lantern .cap { position: absolute; top: -5px; left: 50%; width: 70px; height: 10px; transform: translateX(-50%); background: linear-gradient(180deg, var(--gold-l), var(--gold) 60%, #8a6a1f); border-radius: 4px; }
.lantern .tassel { position: absolute; bottom: -26px; left: 50%; width: 2px; height: 22px; background: var(--gold); transform: translateX(-50%); }
.lantern .tassel::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 12px; height: 10px; background: var(--red); border-radius: 0 0 6px 6px; }
@keyframes swing { 0%, 100% { transform: rotate(-3.5deg); } 50% { transform: rotate(3.5deg); } }

/* ---------------- 登录页 ---------------- */
.hero { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 24px 16px 60px; }
.hero-title { text-align: center; margin-bottom: 34px; position: relative; }
.hero-title h1 {
  font-size: clamp(2.6rem, 8vw, 5.2rem);
  font-weight: 700; letter-spacing: .18em; padding-left: .18em;
  background: linear-gradient(180deg, #f9e9a8 5%, #d4af37 55%, #8a6a1f 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .55));
}
.hero-title .sub { margin-top: 10px; font-size: clamp(1rem, 2.6vw, 1.3rem); letter-spacing: .9em; padding-left: .9em; color: var(--gold-l); text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.hero-title .cloud { position: absolute; width: 90px; height: 22px; top: -34px; left: 50%; transform: translateX(-50%); opacity: .8; }
.hero-title .cloud::before, .hero-title .cloud::after {
  content: ''; position: absolute; background: rgba(240, 216, 138, .9);
  border-radius: 50% 50% 40% 40%;
}
.hero-title .cloud::before { width: 46px; height: 26px; left: 0; bottom: 0; }
.hero-title .cloud::after { width: 40px; height: 22px; right: 0; bottom: 0; }

.auth-card {
  width: min(430px, 94vw);
  background: linear-gradient(180deg, #f8eeda, #ecd8b0 60%, #e0c693);
  color: var(--ink);
  border: 3px solid #4a2a10;
  outline: 3px solid var(--gold);
  outline-offset: -9px;
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55), inset 0 0 60px rgba(122, 18, 18, .08);
  padding: 30px 30px 26px;
  animation: rise .7s linear both;
}
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.auth-tabs { display: flex; gap: 14px; justify-content: center; margin-bottom: 24px; }
.auth-tabs button {
  font-family: inherit; font-size: 1.15rem; letter-spacing: .35em; padding: 7px 22px 7px 26px;
  background: transparent; border: 2px solid #8a6a1f; color: #6b4c12; border-radius: 6px;
  cursor: pointer; transition: all .25s linear;
}
.auth-tabs button.active { background: linear-gradient(180deg, #b32727, #8b1a1a); border-color: var(--gold); color: var(--gold-l); box-shadow: 0 4px 14px rgba(139, 26, 26, .5); }
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.field label { display: block; font-size: .95rem; letter-spacing: .3em; color: #6b4c12; margin-bottom: 6px; }
.field input {
  width: 100%; font-family: inherit; font-size: 1.05rem; padding: 10px 14px;
  background: rgba(255, 252, 242, .85); color: var(--ink);
  border: 2px solid #b3955a; border-radius: 6px; outline: none;
  transition: border-color .2s linear, box-shadow .2s linear;
}
.field input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(158, 27, 27, .18); }
.btn-seal {
  font-family: inherit; font-size: 1.12rem; letter-spacing: .5em; padding: 11px 0 11px .5em;
  background: linear-gradient(180deg, #b32727, #8b1a1a); color: var(--gold-l);
  border: 2px solid var(--gold); border-radius: 7px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(90, 12, 12, .45);
  transition: filter .2s linear, transform .2s linear;
}
.btn-seal:hover { filter: brightness(1.15); transform: translateY(-1px); }
.btn-seal:active { transform: translateY(1px); }
.btn-seal:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.form-msg { min-height: 20px; font-size: .92rem; text-align: center; letter-spacing: .1em; }
.form-msg.err { color: #a01818; }
.form-msg.ok { color: #2c6e2c; }
.auth-foot { margin-top: 14px; text-align: center; font-size: .85rem; color: #8a6a1f; letter-spacing: .2em; }

/* ---------------- 通用按钮 / 输入 ---------------- */
.btn {
  font-family: inherit; font-size: .98rem; letter-spacing: .22em; padding: 8px 20px 8px 22px;
  background: linear-gradient(180deg, #b32727, #8b1a1a); color: var(--gold-l);
  border: 2px solid var(--gold); border-radius: 6px; cursor: pointer;
  transition: filter .2s linear, transform .2s linear;
}
.btn:hover { filter: brightness(1.12); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.ghost { background: rgba(247, 236, 216, .12); border-color: var(--gold); color: var(--gold-l); }
.btn.gold { background: linear-gradient(180deg, #e8c96e, #c9a13a); color: #3a2311; border-color: #8a6a1f; }

/* ---------------- 顶部栏 ---------------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 22px;
  background: linear-gradient(180deg, rgba(58, 32, 11, .92), rgba(74, 42, 16, .92));
  border-bottom: 3px solid var(--gold);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .4);
}
.topbar .brand { font-size: 1.5rem; letter-spacing: .3em; color: var(--gold-l); text-shadow: 0 1px 3px #000; }
.topbar .brand small { font-size: .85rem; color: var(--gold); margin-left: 8px; letter-spacing: .15em; }
.topbar .user-box { display: flex; align-items: center; gap: 12px; font-size: 1rem; color: var(--gold-l); letter-spacing: .12em; }
.topbar .user-box .uname { border: 2px solid var(--gold); border-radius: 20px; padding: 4px 16px; background: rgba(212, 175, 55, .12); }

/* ---------------- 大厅 ---------------- */
.lobby-wrap { max-width: 1080px; margin: 26px auto; padding: 0 16px; display: grid; grid-template-columns: 1fr 340px; gap: 22px; align-items: start; }
@media (max-width: 900px) { .lobby-wrap { grid-template-columns: 1fr; } }
.scroll-panel {
  background: linear-gradient(180deg, #f8eeda, #e6d0a6);
  color: var(--ink);
  border: 3px solid #4a2a10; border-radius: 10px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .45), inset 0 0 46px rgba(122, 18, 18, .07);
  overflow: hidden;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 18px;
  background: linear-gradient(180deg, #9e1b1b, #7a1212);
  color: var(--gold-l); letter-spacing: .3em; font-size: 1.05rem;
  border-bottom: 2px solid var(--gold);
}
.room-table { width: 100%; border-collapse: collapse; }
.room-table th {
  padding: 9px 10px; text-align: left; font-weight: 600; font-size: .92rem;
  color: #6b4c12; letter-spacing: .18em; border-bottom: 2px solid #b3955a;
  background: rgba(212, 175, 55, .14);
}
.room-table td { padding: 9px 10px; border-bottom: 1px solid rgba(139, 106, 31, .35); font-size: .98rem; }
.room-table tbody tr { transition: background .2s linear; }
.room-table tbody tr:hover { background: rgba(212, 175, 55, .2); }
.room-table .empty { text-align: center; padding: 34px 10px; color: #8a6a1f; letter-spacing: .25em; }
.pill {
  display: inline-block; padding: 2px 12px; border-radius: 12px; font-size: .82rem; letter-spacing: .12em;
  border: 1px solid currentColor;
}
.pill.wait { color: #8a6a1f; }
.pill.play { color: #a01818; }
.pill.ready { color: #2c6e2c; }
.side-card { display: flex; flex-direction: column; gap: 16px; }
.card-paper {
  background: linear-gradient(180deg, #f8eeda, #e6d0a6); color: var(--ink);
  border: 3px solid #4a2a10; border-radius: 10px; padding: 16px 18px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .4), inset 0 0 40px rgba(122, 18, 18, .07);
}
.card-paper h3 { font-size: 1.05rem; letter-spacing: .3em; color: var(--red-d); border-bottom: 2px solid var(--gold); padding-bottom: 8px; margin-bottom: 12px; }
.card-paper .row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: .98rem; }
.card-paper .row b { color: var(--red-d); }
.room-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.hint-text { font-size: .82rem; color: #8a6a1f; letter-spacing: .1em; line-height: 1.7; }

/* 模态 */
.modal-mask {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(20, 10, 4, .55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .25s linear;
}
.modal-mask.show { opacity: 1; pointer-events: auto; }
.modal-box {
  width: min(420px, 92vw);
  background: linear-gradient(180deg, #f8eeda, #e6d0a6); color: var(--ink);
  border: 3px solid #4a2a10; border-radius: 12px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
  padding: 24px 26px;
  transform: translateY(16px); transition: transform .25s linear;
}
.modal-mask.show .modal-box { transform: none; }
.modal-box h3 { letter-spacing: .35em; color: var(--red-d); margin-bottom: 16px; text-align: center; }
.modal-box .field { margin-bottom: 14px; }

/* ---------------- 对局页 ---------------- */
.game-wrap { max-width: 1180px; margin: 22px auto; padding: 0 16px; display: grid; grid-template-columns: minmax(0, 640px) 1fr; gap: 24px; align-items: start; }
@media (max-width: 1000px) { .game-wrap { grid-template-columns: 1fr; } }
.board-frame {
  position: relative;
  background: linear-gradient(180deg, #6b4018, #4a2a10);
  border: 3px solid var(--gold); border-radius: 14px;
  padding: 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
}
.board-frame::before {
  content: ''; position: absolute; inset: 8px;
  border: 1px solid rgba(212, 175, 55, .5); border-radius: 8px; pointer-events: none;
}
.board-side { display: flex; flex-direction: column; gap: 14px; }
.pcard {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, #f8eeda, #e6d0a6); color: var(--ink);
  border: 3px solid #4a2a10; border-radius: 10px; padding: 10px 16px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .4);
  transition: box-shadow .25s linear;
}
.pcard.acting { box-shadow: 0 0 0 3px var(--gold), 0 10px 26px rgba(0, 0, 0, .4); }
.pcard .dot {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; color: #f7ecd8;
}
.pcard.red .dot { background: radial-gradient(circle at 35% 30%, #d04949, #9e1b1b); border: 2px solid #5d3516; }
.pcard.black .dot { background: radial-gradient(circle at 35% 30%, #4a4a4a, #161616); border: 2px solid #5d3516; }
.pcard .pname { font-size: 1.05rem; letter-spacing: .15em; }
.pcard .pstate { margin-left: auto; font-size: .85rem; color: #8a6a1f; letter-spacing: .1em; }
.turn-bar {
  text-align: center; font-size: 1.05rem; letter-spacing: .4em;
  padding: 10px 8px; color: var(--gold-l);
  background: rgba(58, 32, 11, .6); border: 2px solid var(--gold); border-radius: 8px;
}
.turn-bar .check { color: #ff5a4a; animation: blink 1s linear infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.steps-bar {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  padding: 9px 12px; font-size: .95rem; letter-spacing: .12em; color: var(--gold-l);
  background: rgba(122, 18, 18, .5); border: 2px solid var(--gold); border-radius: 8px;
}
.steps-bar b { color: #ffd76a; font-size: 1.15rem; }
.history-panel { max-height: 380px; overflow-y: auto; }
.history-panel .hrow { display: flex; gap: 10px; padding: 5px 4px; font-size: .96rem; border-bottom: 1px dashed rgba(139, 106, 31, .4); }
.history-panel .hrow .idx { color: #8a6a1f; min-width: 34px; }
.history-panel .hrow .mv-red { color: var(--red-d); min-width: 110px; }
.history-panel .hrow .mv-black { color: #202020; min-width: 110px; }
.history-panel .empty { text-align: center; color: #8a6a1f; letter-spacing: .25em; padding: 30px 0; }
.actions-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------------- 棋盘（对局页与后台共用） ---------------- */
.xq-board {
  container-type: inline-size;
  position: relative; width: 100%; aspect-ratio: 9 / 10;
  background: #e8c98f;
  border: 5px solid #6b4018; border-radius: 6px;
  box-shadow: inset 0 0 30px rgba(90, 50, 15, .45), 0 10px 30px rgba(0, 0, 0, .5);
  overflow: hidden;
  user-select: none;
}
.xq-grid {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(11.111% - 1px), #6b4c26 calc(11.111% - 1px) 11.111%),
    repeating-linear-gradient(0deg, transparent 0 calc(10% - 1px), #6b4c26 calc(10% - 1px) 10%);
}
.xq-grid::before, .xq-grid::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.xq-river {
  position: absolute; left: 0; right: 0; top: 45%; height: 10%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14%;
  font-size: clamp(12px, 4.6cqw, 30px);
  letter-spacing: .4em; color: #6b4c26;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
  background: linear-gradient(180deg, rgba(232, 201, 143, .95), rgba(232, 201, 143, .95));
  pointer-events: none; z-index: 1;
}
.xq-diag { position: absolute; border-top: 2px solid #6b4c26; transform-origin: 0 0; pointer-events: none; z-index: 1; }
.xq-cell { position: relative; }
.xq-mark {
  position: absolute; width: 9.1%; height: 8%; border-radius: 6px;
  background: rgba(255, 205, 60, .35); pointer-events: none; z-index: 1;
}
.xq-mark.from { background: rgba(255, 205, 60, .28); }
.xq-mark.to { background: rgba(255, 205, 60, .45); }
.xq-mark.sel { background: rgba(90, 180, 90, .4); }
.xq-hint {
  position: absolute; width: 4.6%; height: 4%; border-radius: 50%;
  background: rgba(38, 130, 60, .65); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2cqw; line-height: 1; pointer-events: none; z-index: 1;
}
.xq-piece {
  position: absolute; width: 9.7%; height: 8.6%;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #f6d9a8, #c98d4b 68%, #8a5a2b);
  border: 2px solid #5d3a16;
  box-shadow: inset 0 -3px 5px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .45);
  font-size: clamp(14px, 5.6cqw, 34px); line-height: 1;
  font-family: 'STKaiti', 'KaiTi', 'SimSun', serif;
  z-index: 2; cursor: pointer;
  transition: transform .15s linear, box-shadow .15s linear;
}
.xq-piece.red { color: #7a1212; text-shadow: 1px 1px 0 rgba(255, 255, 255, .4); }
.xq-piece.black { color: #161616; text-shadow: 1px 1px 0 rgba(255, 255, 255, .35); }
.xq-piece:hover { transform: translateY(-2px); }
.xq-piece.selected { box-shadow: 0 0 0 3px var(--gold), 0 0 14px rgba(212, 175, 55, .9), inset 0 -3px 5px rgba(0, 0, 0, .3); transform: scale(1.06); z-index: 3; }
.xq-piece.checked { animation: danger 1s linear infinite; }
@keyframes danger { 0%, 100% { box-shadow: 0 0 0 2px #e03030, 0 0 10px rgba(224, 48, 48, .8); } 50% { box-shadow: 0 0 0 5px #e03030, 0 0 22px rgba(224, 48, 48, 1); } }
.xq-coord { position: absolute; font-size: clamp(8px, 2.6cqw, 15px); color: #6b4c26; opacity: .75; pointer-events: none; z-index: 1; }
.xq-over {
  position: absolute; inset: 0; z-index: 5;
  background: rgba(40, 20, 5, .72); backdrop-filter: blur(3px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
.xq-over-result { font-size: clamp(28px, 9cqw, 56px); letter-spacing: .3em; color: var(--gold-l); text-shadow: 0 3px 12px #000; }
.xq-over-reason { font-size: clamp(14px, 3.4cqw, 22px); letter-spacing: .4em; color: #e8c98f; }

/* 等待对局开始 */
.waiting-overlay {
  position: absolute; inset: 0; z-index: 5;
  background: rgba(40, 20, 5, .78); backdrop-filter: blur(4px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  text-align: center; padding: 20px;
}
.waiting-overlay .big { font-size: clamp(20px, 6cqw, 38px); letter-spacing: .4em; color: var(--gold-l); }
.waiting-overlay .sub { font-size: clamp(13px, 3cqw, 19px); letter-spacing: .2em; color: #e8c98f; line-height: 2; }
.waiting-overlay .btn { font-size: 1rem; }

/* ---------------- 服务器连接失败红色横幅 ---------------- */
#xq-conn-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  background: linear-gradient(180deg, #c22a2a, #8b1a1a);
  color: #ffe9e0; text-align: center; padding: 13px 18px;
  font-size: 1.05rem; letter-spacing: .22em; font-weight: 600;
  box-shadow: 0 4px 20px rgba(160, 24, 24, .55), inset 0 1px 0 rgba(255, 255, 255, .18);
  transform: translateY(-100%);
  transition: transform .35s linear;
  font-family: inherit;
  border-bottom: 2px solid var(--gold);
}
#xq-conn-banner.show { transform: none; }

/* ---------------- 通用提示 / 确认 ---------------- */
#xq-toast { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast-item {
  padding: 10px 26px; border-radius: 8px; font-size: .95rem; letter-spacing: .12em;
  color: #fff; background: rgba(30, 30, 40, .85); border: 1px solid rgba(255, 255, 255, .25);
  opacity: 0; transform: translateY(-12px); transition: all .3s linear;
  max-width: 80vw; text-align: center;
}
.toast-item.show { opacity: 1; transform: none; }
.toast-item.error { background: rgba(160, 24, 24, .9); border-color: #ff9a8a; }
.toast-item.ok { background: rgba(30, 110, 50, .9); border-color: #9af0b0; }
#xq-confirm { position: fixed; inset: 0; z-index: 210; display: none; }
#xq-confirm.show { display: block; }
#xq-confirm .cf-mask { position: absolute; inset: 0; background: rgba(10, 5, 2, .55); backdrop-filter: blur(3px); }
#xq-confirm .cf-card {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(400px, 90vw);
  background: linear-gradient(180deg, #f8eeda, #e6d0a6); color: var(--ink);
  border: 3px solid #4a2a10; border-radius: 12px; padding: 24px 26px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}
#xq-confirm h3 { letter-spacing: .3em; color: var(--red-d); text-align: center; margin-bottom: 12px; }
#xq-confirm p { font-size: 1rem; line-height: 1.8; text-align: center; margin-bottom: 18px; word-break: break-all; }
#xq-confirm .cf-btns { display: flex; gap: 12px; justify-content: center; }
#xq-confirm .cf-ok { font-family: inherit; letter-spacing: .3em; padding: 8px 24px; background: linear-gradient(180deg, #b32727, #8b1a1a); color: var(--gold-l); border: 2px solid var(--gold); border-radius: 6px; cursor: pointer; }
#xq-confirm .cf-no { font-family: inherit; letter-spacing: .3em; padding: 8px 24px; background: transparent; color: #6b4c12; border: 2px solid #8a6a1f; border-radius: 6px; cursor: pointer; }