/* Xiangqi room: ink, jade, warm timber. Scoped by this page-only stylesheet. */
:root { --bg:#111e1b; --surface:#1b2b25; --surface-raised:#24382f; --paper:#f2eddf; --muted:#a6b4a5; --mint:#c7d7b3; --accent:#416a53; --line:#d6d8b51c; }
body { background-image:radial-gradient(ellipse at 65% 0%,#65836222,transparent 58%)!important; }
.chess-intro { width:min(1240px,92vw); margin:12px auto 32px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.chess-intro h1 { font:500 clamp(29px,3.5vw,46px)/1.4 KaiTi,STKaiti,SimSun,serif; margin:0; letter-spacing:3px; }
.chess-intro p { color:var(--muted); font-size:13px; margin:12px 0 0; }
.intro-seal { font:36px KaiTi,serif; color:#c78069; border:2px solid #a85d48; border-radius:4px; padding:8px; transform:rotate(5deg); margin-right:14px; }
#appContent { grid-template-columns:300px minmax(0,1fr)!important; }
#appContent > .panel { border-radius:16px!important; }
#gameArea { background:linear-gradient(140deg,#20352b,#16271f)!important; }
#lobbyEmpty { min-height:580px!important; border:0; gap:6px; }
#lobbyEmpty::before,#lobbyEmpty::after { content:none!important; }
#lobbyEmpty h2 { font:30px KaiTi,STKaiti,SimSun,serif; margin:12px 0 0; }
#lobbyEmpty p { font-size:13px; margin:10px 0 22px; }
.lobby-art { position:relative; width:260px; height:190px; margin-bottom:26px; background:repeating-linear-gradient(0deg,transparent 0 35px,#c6d5a916 35px 36px),repeating-linear-gradient(90deg,transparent 0 35px,#c6d5a916 35px 36px); mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent); }
.lobby-art span { position:absolute; display:grid; place-items:center; top:32px; left:35px; width:100px; height:100px; border:7px double #a54232; outline:5px solid #dcc496; border-radius:50%; color:#a3342b; background:radial-gradient(circle at 30% 20%,#fff4d4,#dac095); box-shadow:3px 8px 0 #987b50,8px 20px 24px #0005; font:58px KaiTi,STKaiti,SimSun,serif; transform:rotate(-15deg); }
.lobby-art span+span { top:80px; left:142px; width:76px; height:76px; font-size:44px; color:#293f38; border-color:#43574a; transform:rotate(12deg); }
.lobby-features { display:flex; gap:22px; margin-top:36px; font-size:11px; color:#829681; }
.lobby-features span::before { content:'◇'; margin-right:6px; color:#c1c99d; }
#roomHeader { border-bottom:1px solid var(--line); padding-bottom:18px; margin-bottom:20px; }
#roomTitle { font-size:19px; margin-bottom:5px; }
#roomActions { margin:0; }
.seat { width:min(100%,540px); margin:auto; display:flex; align-items:center; gap:11px; border:1px solid transparent; padding:10px 12px; border-radius:10px; transition:background .3s,border-color .3s; }
.seat.active { background:#bace9d0c; border-color:#bdce9b38; }
.seat-piece { width:39px; height:39px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; background:#e6d1a8; color:#293f38; border:4px double #536148; font:24px KaiTi,SimSun,serif; }
.seat[data-side=red] .seat-piece { color:#a3342b; border-color:#a85a44; }
.seat strong { display:block; font-size:13px; max-width:250px; overflow-wrap:anywhere; }
.seat small { display:block; color:var(--muted); font-size:11px; }
.seat-state { margin-left:auto; font-size:11px; color:var(--muted); white-space:nowrap; }
.seat.active .seat-state { color:#d8dfad; }
#boardWrap { padding:14px 0!important; }
canvas#boardCanvas { width:min(100%,540px); border:6px solid #694e32; outline:1px solid #ae916046; border-radius:6px!important; box-shadow:0 4px 0 #3f3022,0 18px 34px #0005!important; cursor:pointer; }
.board-help { text-align:center; color:#9baa94; font-size:11px; margin:17px 0 22px; }
#centerBanner { font-family:KaiTi,STKaiti,SimSun,serif; letter-spacing:8px; padding:18px 30px 18px 38px; border-radius:6px; border:1px solid #e1c388; background:linear-gradient(135deg,#963e2ef2,#632c23f5)!important; box-shadow:0 12px 45px #0005; transform:translateY(10px) scale(.9); transition:opacity .25s,transform .35s cubic-bezier(.16,1,.3,1); }
#centerBanner.show { transform:translateY(0) scale(1); }
.infoBlock strong { font-size:12px; letter-spacing:1px; }
#playersInfo,#turnInfo,#sideInfo,#movesList { font-size:12px; color:#c6cfbd; }
#gameInfo { grid-template-columns:1fr 1fr!important; }
#gameMessage { font-size:13px; }
.roomItem { transition:border-color .2s,background .2s; }
.roomItem:hover { border-color:#bace9d55; }
#roomArea { animation:room-enter .4s ease-out; }
@keyframes room-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:900px) { #appContent { grid-template-columns:1fr!important; } #appContent:has(#roomArea[style*="block"]) > .panel:first-child { order:2; } #lobbyEmpty { min-height:420px!important; } .chess-intro { margin-bottom:24px; } }
@media(max-width:540px) { #appContent > #gameArea { padding:12px!important; } .chess-intro h1 { letter-spacing:0; } .intro-seal { font-size:25px; margin-right:0; } .chess-intro p { font-size:11px; } .seat { padding:8px 4px; } .seat strong { max-width:150px; } #gameInfo { grid-template-columns:1fr!important; } .board-help { font-size:10px; } #roomHeader { padding:4px 4px 14px; } .lobby-art { transform:scale(.9); margin-bottom:10px; } }
@media(prefers-reduced-motion:reduce) { #roomArea { animation:none; } }