/* 中国象棋 · 毛毡绿 + 金框 + 白面板（沿用 hub 视觉）—— 纯积分娱乐，无任何真实货币 */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root { --felt:#1c6b46; --felt-dark:#145034; --panel:#fff; --panel-border:#d9e2dc; --ink:#1c2b24; --accent:#0f8a5f; --accent-dark:#0b6b49; --warn:#c0392b; --gold:#d4a017; --gold-bright:#f3ce62; --gold-deep:#8a6400; --gray:#7a8a80; --bg-deep:#07180f; --grid:rgba(212,160,23,.32); --red:#b02a1e; --blk:#262626; }
html { color-scheme: dark; }
body { font-family: "PingFang SC","Microsoft YaHei","Segoe UI",sans-serif; color:#eaf3ed; min-height:100vh; background: radial-gradient(circle at 12% -8%, rgba(212,160,23,.18), transparent 36%), radial-gradient(circle at 88% 110%, rgba(15,138,95,.25), transparent 40%), linear-gradient(160deg, var(--bg-deep), var(--felt-dark) 55%, var(--bg-deep)); }
.app { max-width: 1120px; margin: 0 auto; padding: 16px 14px 26px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-badge { width:52px; height:52px; border-radius:50%; display:grid; place-items:center; font-size:26px; background:radial-gradient(circle at 35% 30%, #4a6154, var(--ink)); border:2px solid var(--gold); box-shadow:0 0 18px rgba(212,160,23,.35); }
.brand h1 { font-size:22px; letter-spacing:1px; } .brand-en { font-size:12px; color:var(--gold-bright); letter-spacing:3px; margin-left:6px; }
.slogan { font-size:12.5px; color:#b9d2c4; margin-top:3px; } .slogan b { color:var(--gold-bright); }
.topbar-side { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.conn-tag { display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.06); border:1px solid #3d5c4c; color:#cfe3d7; border-radius:999px; padding:6px 12px; font-size:12.5px; cursor:pointer; }
.conn-dot { width:8px; height:8px; border-radius:50%; background:var(--gold); } .conn-tag.on .conn-dot { background:#35d08c; } .conn-tag.off .conn-dot { background:var(--warn); }
.settle-strip { display:flex; gap:8px; }
.settle-item { background:rgba(0,0,0,.28); border:1px solid #2c4a3a; border-radius:10px; padding:6px 10px; text-align:center; min-width:66px; }
.settle-item span { display:block; font-size:11px; color:#9db8aa; } .settle-item strong { font-size:15px; color:var(--gold-bright); font-variant-numeric:tabular-nums; }
.layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:16px; margin-top:16px; align-items:start; }
.board-wrap { display:flex; flex-direction:column; align-items:center; gap:8px; }
.board-caption { font-size:12px; color:#9db8aa; }
/* 棋盘：9×10 毛毡 + 金线（河边与九宫用绝对层） */
.board { position:relative; width:min(94vw, 560px); aspect-ratio:9/10; border-radius:10px; background:repeating-linear-gradient(to right, var(--grid) 0 1px, transparent 1px calc(100%/9)), repeating-linear-gradient(to bottom, var(--grid) 0 1px, transparent 1px calc(100%/10)), radial-gradient(circle at 50% 45%, var(--felt), var(--felt-dark) 85%); box-shadow:0 18px 40px rgba(0,0,0,.45), inset 0 0 0 1px var(--grid); }
.palace { position:absolute; left:33.33%; width:22.23%; height:20%; pointer-events:none; background: linear-gradient(to top right, transparent calc(50% - .5px), var(--grid) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)), linear-gradient(to bottom right, transparent calc(50% - .5px), var(--grid) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)); }
.palace.p-top { top:0; } .palace.p-bot { bottom:0; }
.river { position:absolute; left:0; right:0; top:40%; height:10%; display:flex; align-items:center; justify-content:space-around; font-size:clamp(13px,3.6vw,21px); letter-spacing:2px; color:rgba(243,206,98,.62); font-weight:700; pointer-events:none; text-shadow:0 1px 2px rgba(0,0,0,.5); }
.mk { position:absolute; width:calc(100%/9*.22); aspect-ratio:1; border:1px solid rgba(243,206,98,.5); border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; }
.pc { position:absolute; width:calc(100%/9*.86); aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle at 35% 30%, #ffffff, #ddd8ca 70%, #c8c0ad); border:2px solid rgba(0,0,0,.22); box-shadow:0 3px 8px rgba(0,0,0,.45), inset 0 0 6px rgba(0,0,0,.08); display:grid; place-items:center; font-weight:800; font-size:clamp(13px,3.2vw,27px); user-select:none; cursor:pointer; z-index:3; font-family:"STKaiti","KaiTi",serif; }
.pc.red { color:var(--red); } .pc.blk { color:var(--blk); }
.pc.sel { box-shadow:0 0 0 3px var(--gold), 0 3px 10px rgba(0,0,0,.5); z-index:4; }
.pc.chk { animation:chk 1s ease-in-out infinite; box-shadow:0 0 0 3px var(--warn), 0 0 14px rgba(192,57,43,.8); }
@keyframes chk { 50% { box-shadow:0 0 0 3px rgba(192,57,43,.35), 0 0 6px rgba(192,57,43,.4); } }
.dot { position:absolute; width:calc(100%/9*.3); aspect-ratio:1; border-radius:50%; background:var(--gold-bright); box-shadow:0 0 8px rgba(212,160,23,.8); transform:translate(-50%,-50%); cursor:pointer; z-index:2; }
.lm { position:absolute; width:calc(100%/9*.94); height:calc(100%/10*.94); border:2px dashed rgba(243,206,98,.75); border-radius:6px; transform:translate(-50%,-50%); pointer-events:none; z-index:1; }
.board.locked .pc { cursor:default; }
/* 卡片与控件 */
.side { display:grid; gap:12px; }
.card-panel { background:var(--panel); border:1px solid var(--panel-border); border-radius:14px; padding:13px; color:var(--ink); box-shadow:0 12px 30px rgba(0,0,0,.35); }
.panel-head { display:flex; align-items:center; justify-content:space-between; font-weight:800; font-size:14px; color:var(--accent-dark); border-bottom:1px dashed var(--panel-border); padding-bottom:8px; margin-bottom:10px; }
.status { font-size:13px; font-weight:700; color:var(--gold-deep); } .muted { color:var(--gray); font-weight:600; }
.segmented { display:flex; gap:6px; margin-bottom:10px; }
.seg { flex:1; padding:8px 4px; border-radius:9px; border:1px solid #b9ccc1; background:transparent; color:var(--accent-dark); font-weight:800; font-size:13.5px; cursor:pointer; }
.seg.on { background:linear-gradient(180deg,#f8dc86, var(--gold) 55%, #ac7c08); color:#2f2300; border-color:#ffe8a5; }
.bet-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-bottom:10px; }
.btn { background:var(--accent); color:#fff; border:1px solid transparent; padding:10px 16px; border-radius:10px; font-size:15px; font-weight:700; cursor:pointer; transition:background .15s, transform .15s; }
.btn:hover { background:var(--accent-dark); transform:translateY(-1px); } .btn:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.btn.big { font-size:17px; padding:13px 22px; width:100%; }
.btn.gold { background:linear-gradient(180deg,#f8dc86 0%, var(--gold) 55%, #ac7c08 100%); color:#2f2300; border-color:#ffe8a5; } .btn.gold:hover { background:linear-gradient(180deg,#ffe7a0 0%, #e3b32a 55%, #b9870b 100%); }
.btn.warn { background:var(--gold); color:#332500; } .btn.warn:hover { background:#b58910; }
.btn.ghost { background:transparent; color:var(--accent-dark); border-color:#b9ccc1; } .btn.ghost:hover { background:rgba(15,138,95,.08); }
.btn.small { padding:6px 10px; font-size:13px; border-radius:8px; flex:1; }
.bet-grid .btn { padding:8px 2px; font-size:13px; } .bet-grid .btn.sel { outline:2px solid var(--gold-deep); outline-offset:1px; box-shadow:0 0 10px rgba(212,160,23,.5); }
.hint { font-size:11.5px; color:var(--gray); margin:8px 0 8px; line-height:1.5; }
.ledger { display:grid; gap:6px; font-size:12.5px; border-top:1px dashed var(--panel-border); padding-top:8px; margin-bottom:8px; }
.ledger > div { display:flex; justify-content:space-between; gap:8px; } .ledger span { color:var(--gray); } .ledger strong { font-variant-numeric:tabular-nums; }
.auth-btns { display:flex; gap:8px; margin-top:8px; }
.auth-form { display:grid; gap:8px; }
.auth-form input, #in-code { padding:9px 11px; border:1px solid #b9ccc1; border-radius:9px; font-size:14px; background:#fff; color:var(--ink); width:100%; margin-bottom:8px; }
.auth-info { display:grid; gap:6px; font-size:13.5px; }
.auth-row { display:flex; justify-content:space-between; } .auth-row strong { font-variant-numeric:tabular-nums; }
.seats { display:grid; gap:8px; margin-bottom:8px; }
.seat { display:flex; align-items:center; justify-content:space-between; border:1px solid var(--panel-border); border-radius:10px; padding:8px 10px; font-size:13px; }
.seat .who b { font-size:13.5px; } .seat .who i { font-style:normal; color:var(--gold-deep); margin-left:6px; font-weight:700; } .seat .st { text-align:right; color:var(--gray); font-size:12px; } .seat.turn { border-color:var(--gold); box-shadow:0 0 0 2px rgba(212,160,23,.35); } .seat.off { opacity:.55; }
.fee-row { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-bottom:6px; }
.fee-row button { padding:7px 2px; font-size:12.5px; border-radius:8px; border:1px solid #b9ccc1; background:transparent; color:var(--accent-dark); font-weight:700; cursor:pointer; }
.fee-row button.sel { background:var(--gold); color:#332500; border-color:var(--gold-deep); }
.modal, .toast, .footer { z-index:60; }
.modal { position:fixed; inset:0; background:rgba(4,16,10,.66); backdrop-filter:blur(3px); display:grid; place-items:center; padding:20px; }
.modal[hidden], .card-panel [hidden] { display:none; }
.modal-card { background:var(--panel); color:var(--ink); border:1px solid var(--gold); border-radius:16px; padding:24px 28px; text-align:center; min-width:min(320px,86vw); box-shadow:0 24px 60px rgba(0,0,0,.55); animation:rise .25s ease-out; }
@keyframes rise { from { transform:translateY(14px); opacity:0; } }
.modal-card h2 { font-size:28px; margin-bottom:8px; letter-spacing:4px; } .modal-card h2.win { color:var(--gold-deep); } .modal-card h2.lose { color:var(--warn); } .modal-card h2.draw { color:var(--gray); }
.modal-card p { font-size:14px; color:#4d5c54; margin-bottom:14px; line-height:1.6; } .modal-card p b { color:var(--gold-deep); font-size:17px; }
.modal-btns { display:flex; gap:10px; justify-content:center; }
.toast { position:fixed; left:50%; bottom:34px; transform:translateX(-50%) translateY(20px); background:rgba(12,30,21,.94); color:#f1e6c8; border:1px solid var(--gold-deep); padding:10px 18px; border-radius:10px; font-size:13.5px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:80; max-width:86vw; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.footer { text-align:center; font-size:12.5px; color:#7fa090; padding-top:20px; } .footer b { color:var(--gold-bright); }
@media (max-width:900px) { .layout { grid-template-columns:1fr; } .settle-item strong { font-size:13px; } }