/* ZTX Playroom — shared interface. Loaded after the original game layout. */
:root { color-scheme: dark; --bg:#101e29; --surface:#172935; --surface-raised:#203541; --line:#adc5c51f; --paper:#eef4ee; --muted:#a3b8b8; --mint:#a7dcc2; --accent:#217b68; --gold:#e7bb78; --danger:#ef9c91; }
* { box-sizing:border-box; }
html,body { margin:0; padding:0; min-height:100%; background:var(--bg)!important; color:var(--paper)!important; font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif!important; }
body { background-image:radial-gradient(ellipse at 90% 5%,#315e502e,transparent 48%)!important; line-height:1.6; }
a { color:var(--mint); text-underline-offset:4px; }
button,input,select { font:inherit; }
button,a.gameBtn,a.topLink,.button-link { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 16px; border:1px solid transparent; border-radius:10px!important; color:var(--paper); font-size:14px; font-weight:650!important; text-decoration:none; cursor:pointer; transition:background .18s,transform .18s; }
button:hover:not(:disabled),.gameBtn:hover,.topLink:hover,.button-link:hover { filter:brightness(1.12); transform:translateY(-1px); }
button:disabled { opacity:.4; cursor:not-allowed; transform:none; }
:where(a,button,input,select,summary,canvas):focus-visible { outline:3px solid var(--mint)!important; outline-offset:4px; }
.btn-green,.btn-purple { background:var(--accent)!important; color:#fff!important; box-shadow:none!important; }
.btn-blue { background:#315365!important; color:#f1f6f5!important; box-shadow:none!important; }
.btn-gray { background:#b3cec512!important; border:1px solid #aac3c530!important; color:#d4e3df!important; box-shadow:none!important; }
.btn-gold,.btn-yellow { background:#e7bb78!important; color:#2d291b!important; box-shadow:none!important; }
.btn-red { background:#dc797214!important; border:1px solid #dd8b8033!important; color:#ffbbb0!important; box-shadow:none!important; }
input:not([type=checkbox]),select,.createRow input,.roomCreateRow input { width:100%; min-width:0; min-height:45px; padding:11px 13px; border:1px solid #abc0c133!important; border-radius:9px!important; background:#0c1c2699!important; color:var(--paper)!important; outline:none; }
input::placeholder { color:#8ca3a8; }
select option { background:#172935; }
label { font-weight:600!important; font-size:14px; }
.panel,.ai-settings,.ai-table { min-width:0; padding:25px!important; background:var(--surface)!important; border:1px solid var(--line); border-radius:18px!important; box-shadow:0 12px 36px #00000012!important; }
.panel h2,.panel h3 { color:var(--paper); }
.panel h2 { margin:0 0 18px; font-size:21px; font-weight:650; }
.eyebrow { display:block; font-size:11px; letter-spacing:2px; font-weight:700; color:var(--mint); margin-bottom:12px; }
.muted,.hint,.smallText,.miniStats,.roomMeta { color:var(--muted)!important; font-size:13px; opacity:1!important; }
.pill { display:inline-block; padding:5px 12px; border:1px solid var(--line); border-radius:30px; color:var(--muted); font-size:12px; white-space:nowrap; }
.site-header { width:min(1240px,92vw); margin:auto; padding:22px 0; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); }
.site-brand { display:flex; align-items:center; gap:12px; color:var(--paper); text-decoration:none; font-size:18px; font-weight:700; white-space:nowrap; }
.brand-mark { display:grid; place-items:center; width:36px; height:36px; background:var(--mint); color:#17382c; border-radius:11px; font-weight:900; font-size:20px; }
.site-nav { display:flex; gap:5px; flex-wrap:wrap; }
.site-nav a { padding:8px 14px; border-radius:30px; font-size:13px; text-decoration:none; color:var(--muted); }
.site-nav a[aria-current=page] { background:#a7dcc21a; color:var(--mint); }
.site-nav a:hover { background:#ffffff08; color:var(--paper); }
.site-footer { width:min(1240px,92vw); margin:36px auto 0; border-top:1px solid var(--line); padding:24px 0 32px; display:flex; justify-content:space-between; align-items:center; gap:16px; color:var(--muted); font-size:12px; }
.site-footer button { font-size:12px; min-height:36px; }
.wrap { width:min(1240px,92vw)!important; margin:auto; padding:38px 0 12px!important; }
.hero { text-align:left!important; padding:16px 0 34px!important; position:relative; }
.hero h1,.page-intro h1 { font-size:clamp(32px,4.4vw,54px)!important; line-height:1.25; font-weight:650; letter-spacing:-1.5px; margin:0; color:var(--paper)!important; text-shadow:none!important; }
.hero h1::after { display:none!important; }
.hero p,.page-intro p { margin:17px 0 0!important; color:var(--muted)!important; font-weight:400!important; font-size:15px; }
.grid { display:grid; grid-template-columns:minmax(0,1fr) 325px!important; gap:26px!important; margin-top:0!important; align-items:start; }
.account-panel { order:2; }
.games-panel { order:1; background:transparent!important; border:0!important; padding:0!important; box-shadow:none!important; }
.games-panel > h2 { display:flex; align-items:center; justify-content:space-between; margin:0 0 20px; font-size:19px; }
.games-panel > h2::after { content:'02 GAMES / 03 MODES'; font-size:10px; letter-spacing:1.4px; color:var(--muted); }
.gameList { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:20px!important; }
.gameItem { position:relative; display:flex; flex-direction:column; justify-content:space-between; min-width:0; min-height:350px!important; padding:22px!important; overflow:hidden; background:var(--surface)!important; border:1px solid var(--line); border-radius:16px!important; transition:transform .2s,border-color .2s; }
.gameItem:hover { transform:translateY(-3px); border-color:#a7dcc261; }
.gameItem h3 { margin:14px 0 8px; font-size:25px!important; font-weight:600; }
.gameItem p { color:var(--muted)!important; font-size:13px!important; line-height:1.8; margin:0 0 12px; }
.game-art { height:150px; margin:-22px -22px 18px; position:relative; overflow:hidden; }
.chess-art { background:linear-gradient(125deg,#344942,#1e3735); }
.gomoku-art { background:linear-gradient(125deg,#536052,#30473e); }
.game-art::before { content:''; position:absolute; inset:15px -25px; background:repeating-linear-gradient(0deg,transparent 0 27px,#e0d2aa28 28px 29px),repeating-linear-gradient(90deg,transparent 0 27px,#e0d2aa28 28px 29px); transform:rotate(-13deg) scale(1.15); }
.chess-art span { position:absolute; left:30%; top:32px; display:grid; place-items:center; width:83px; height:83px; border-radius:50%; background:#eddfb9; border:6px double #9d6650; color:#964b37; font:42px Georgia,serif; box-shadow:7px 12px 0 #0a1b2940; transform:rotate(-13deg); }
.chess-art span+span { left:60%; top:69px; width:62px; height:62px; font-size:30px; color:#2b413c; border-color:#40574b; }
.gomoku-art span { position:absolute; left:28%; top:35px; width:64px; height:64px; border-radius:50%; background:radial-gradient(circle at 33% 26%,#67716b,#172522 70%); box-shadow:5px 9px 0 #0a1b2940; }
.gomoku-art span+span { left:55%; top:72px; background:radial-gradient(circle at 33% 26%,#fff,#d6dfca 70%); }
.gameItem .gameBtn { width:100%; margin-top:18px; }
.statusLine { margin-top:10px; font-size:11px; color:var(--mint)!important; letter-spacing:.4px; }
.statusLine::before { content:'●'; margin-right:7px; font-size:8px; }
.ai-promo { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; background:linear-gradient(120deg,#25483e,#203541); border:1px solid #a7dcc238; border-radius:16px; padding:24px; }
.ai-promo h3 { font-size:23px; margin:0 0 7px; color:var(--paper); }
.ai-promo p { font-size:13px; color:var(--muted); margin:0; }
.account-panel h2 { font-size:20px; }
.account-panel label { margin:16px 0 7px; display:block; }
.account-panel input { margin-bottom:7px; }
.hint { line-height:1.6; font-size:11px; margin-bottom:10px; }
.rowBtns { gap:9px!important; }
#authMessage { font-size:13px; line-height:1.6; }
#userCard,.statsBlock,.guestNotice { background:#b3cec509!important; border:1px solid var(--line); border-radius:10px!important; }
#identityText,.statsBlockTitle { color:var(--mint)!important; }
.statsLine,.guestNotice { color:#c3d3d1!important; font-size:13px; }
#bootScreen { min-height:60vh!important; color:var(--mint)!important; font-size:20px!important; }
#appTopBar { position:static!important; background:transparent!important; color:var(--paper); border:0!important; box-shadow:none!important; }
.topInner { width:min(1240px,92vw)!important; padding:20px 0!important; }
.badge { font-size:12px; font-weight:500!important; color:var(--muted); background:#b3cec50a!important; border:1px solid var(--line); border-radius:8px!important; padding:9px 12px!important; }
#appContent { display:grid; width:min(1240px,92vw)!important; margin:0 auto 28px!important; grid-template-columns:310px minmax(0,1fr)!important; gap:24px!important; align-items:start; }
#appContent > .panel { padding:22px!important; }
#gameArea { min-height:640px!important; background:#14232e!important; }
#lobbyEmpty { display:flex; flex-direction:column; gap:10px; min-height:580px!important; background:transparent!important; border:1px dashed #b3cec524; border-radius:12px!important; padding:22px; color:var(--muted)!important; font-size:15px!important; font-weight:400!important; }
#lobbyEmpty::before { content:'下一局，等你入座。'; color:var(--paper); font-size:26px; font-weight:600; margin-bottom:8px; }
#lobbyEmpty::after { content:'创建一个房间，再邀请同学加入。'; font-size:12px; color:var(--muted); }
.roomCreateRow,.createRow { flex-wrap:wrap; gap:10px!important; }
.roomCreateRow input,.createRow input { flex:1 1 160px!important; }
.roomCreateRow button,.createRow button { flex:1 0 auto; }
.roomItem { background:#b3cec509!important; border:1px solid var(--line); border-radius:10px!important; padding:14px!important; }
.roomItem:hover { background:#b3cec513!important; }
.roomItemTitle { font-size:15px!important; overflow-wrap:anywhere; }
.roomMeta { line-height:1.8; }
#roomTitle { overflow-wrap:anywhere; }
#roomStatusLine { color:var(--mint)!important; font-size:13px!important; }
#roomActions { display:flex; gap:7px; flex-wrap:wrap; }
#roomActions button { font-size:12px; }
#boardWrap { padding:20px 0!important; }
canvas#boardCanvas,canvas#gomokuCanvas { max-width:100%!important; height:auto!important; border-radius:12px!important; box-shadow:0 15px 35px #0003!important; }
#gameInfo { gap:14px; }
.infoBlock { background:#b3cec509!important; border:1px solid var(--line); border-radius:10px!important; }
.infoBlock strong { color:var(--mint)!important; }
.forbidPanel { background:#e7bb7809!important; border:1px solid #e7bb7829!important; border-radius:10px!important; }
.forbidTitle,.ruleNote strong { color:var(--gold)!important; }
.forbidCheckboxGroup { gap:7px!important; }
.custom-checkbox { padding:6px 8px!important; }
.custom-checkbox input { display:block!important; position:absolute; width:1px; height:1px; opacity:0; }
.custom-checkbox:focus-within { outline:2px solid var(--mint); outline-offset:2px; }
.rules { border-top:1px solid var(--line); padding:16px 0 0; margin:22px 0 14px; color:var(--muted); font-size:13px; }
.rules summary { cursor:pointer; color:var(--paper); font-weight:600; }
.rules p { margin:12px 0; }
.text-link { font-size:13px; display:inline-block; margin-top:10px; }
.connection-note { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; }
.connection-note[data-state=connected] { color:var(--mint); }
.connection-note[data-state=offline] { color:var(--gold); }
.ai-shell { width:min(1240px,92vw); margin:auto; padding:38px 0 12px; }
.page-intro { margin:12px 0 32px; }
.ai-layout { display:grid; grid-template-columns:300px minmax(0,1fr); gap:24px; align-items:start; }
.ai-settings label:not(.toggle-label) { display:block; margin:20px 0 8px; }
.ai-settings .muted { font-size:12px; margin:8px 0 16px; }
.wide { width:100%; }
.action-row { display:flex; flex-wrap:wrap; gap:9px; margin-top:10px; }
.action-row button { flex:1; }
.toggle-label { display:flex; align-items:center; gap:10px; margin-top:22px; cursor:pointer; }
.toggle-label input { accent-color:var(--mint); width:17px; height:17px; }
.table-header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:20px; }
.table-header h2 { margin:0; font-size:21px; }
.table-header .eyebrow { margin-bottom:6px; }
.ai-board-wrap { max-width:660px; margin:auto; }
#aiCanvas { display:block; width:100%; height:auto; border-radius:12px; box-shadow:0 15px 35px #0003; touch-action:manipulation; cursor:crosshair; }
.board-caption { text-align:center; font-size:12px; color:var(--muted); margin:14px 0 22px; }
.move-history { border-top:1px solid var(--line); padding-top:12px; }
.move-history h3 { font-size:14px; margin:0 0 10px; }
#historyList { display:flex; flex-wrap:wrap; gap:7px; list-style:none; max-height:110px; overflow:auto; padding:0; margin:0; }
#historyList li { color:var(--muted); font-size:12px; background:#b3cec509; border-radius:5px; padding:4px 8px; }
dialog { width:min(430px,90vw); border:1px solid #a7dcc240; border-radius:18px; background:var(--surface); color:var(--paper); padding:26px; box-shadow:0 30px 100px #0006; }
dialog::backdrop { background:#081119b8; backdrop-filter:blur(4px); }
dialog h2 { margin-top:0; } dialog p { color:var(--muted); }
@media(max-width:1000px) { .grid { grid-template-columns:minmax(0,1fr) 285px!important; gap:18px!important; } .gameList { gap:14px!important; } .gameItem { padding:18px!important; } .game-art { margin:-18px -18px 18px; } }
@media(max-width:900px) { .grid,#appContent,.ai-layout { grid-template-columns:1fr!important; } .account-panel { order:2; } #gameArea { min-height:0!important; } #lobbyEmpty { min-height:260px!important; } .ai-settings { display:block; } .site-header { flex-wrap:wrap; gap:16px; } .site-nav { width:100%; } #gameInfo { grid-template-columns:1fr!important; } .ai-table { padding:16px!important; } }
@media(max-width:540px) { .site-header { padding:16px 0; } .site-nav { flex-wrap:nowrap; overflow-x:auto; gap:2px; } .site-nav a { white-space:nowrap; padding:8px 10px; font-size:12px; } .wrap,.ai-shell { padding-top:22px!important; } .hero h1,.page-intro h1 { font-size:32px!important; letter-spacing:-.8px; } .gameList { grid-template-columns:1fr!important; } .game-art { height:140px; } .gameItem { min-height:0!important; } .ai-promo { padding:20px; } .site-footer { flex-direction:column; align-items:flex-start; } .panel { padding:18px!important; } .badgeGroup { gap:6px!important; } .badgeGroup button,.badgeGroup .topLink { font-size:12px; padding:9px 10px; } #roomActions { width:100%; } #roomActions button { flex:1; } .table-header { align-items:flex-start; } .table-header h2 { font-size:18px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
/* Unified rule controls: same mint selection and slate surfaces as the rest of the site. */
.forbidPanel { background:var(--surface-raised)!important; border:1px solid var(--line)!important; }
.forbidTitle,.forbidTitle .ruleNote,.forbidPanel .ruleNote strong,#forbidInfo { color:var(--mint)!important; }
.forbidPanel .custom-checkbox { position:relative; color:var(--paper); background:#a7dcc20a!important; border:1px solid var(--line); border-radius:8px; }
.forbidPanel .custom-checkbox:hover { background:#a7dcc21a!important; }
.forbidPanel .custom-checkbox:has(input:checked) { border-color:#a7dcc260; background:#a7dcc21a!important; }
.forbidPanel .checkmark { flex-shrink:0; background:#0c1c26!important; border:1px solid #a3b8b84d; border-radius:5px; }
.forbidPanel .custom-checkbox input:checked + .checkmark { background:var(--mint)!important; border-color:var(--mint); }
.forbidPanel .custom-checkbox input:checked + .checkmark::after { color:#17382c!important; }
.forbidPanel .custom-checkbox.disabled { opacity:.42; }
.forbidPanel .custom-checkbox.disabled:hover { background:#a7dcc20a!important; }
.forbidPanel .ruleNote { border-top:1px solid var(--line); opacity:1; color:var(--muted); line-height:1.85; font-size:12px; }
/* Ink & jade collection — shared across every table. No fonts or media fetched externally. */
:root { color-scheme:dark; --bg:#111e1b; --surface:#1b2b25; --surface-raised:#24382f; --paper:#f2eddf; --muted:#a6b4a5; --mint:#c7d7b3; --accent:#416a53; --line:#d6d8b51c; --gold:#d9bd85; }
body { background-image:radial-gradient(ellipse at 75% 0%,#66845f24,transparent 55%),radial-gradient(ellipse at 0% 55%,#8a70450b,transparent 45%)!important; }
::selection { background:#b5ce9770; color:#fff7de; }
[hidden] { display:none!important; }
.draw-request{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px;margin-bottom:14px;border:1px solid var(--gold);border-radius:10px;font-size:13px}
.site-header { border-bottom-color:#d6d8b51a; }
.brand-mark { background:linear-gradient(145deg,#e4dfb4,#a9bf97); color:#294333; border-radius:7px; box-shadow:0 3px 14px #c7d7b311; }
.site-brand { letter-spacing:.5px; }
.site-nav a[aria-current=page] { background:#d5dfb210; color:#e0e7c4; border:1px solid #d5dfb221; }
.hero,.page-intro { position:relative; padding-right:55px!important; }
.hero::after,.page-intro::after { content:'弈'; position:absolute; right:10px; top:20px; font:34px KaiTi,STKaiti,SimSun,serif; padding:3px 8px; color:#c78069; border:2px solid #a85d48; border-radius:4px; transform:rotate(5deg); }
.hero h1,.page-intro h1 { font-family:KaiTi,STKaiti,SimSun,serif; font-weight:500!important; letter-spacing:2px; }
.eyebrow { color:#bbcca7; font-size:10px; letter-spacing:2.2px; }
.panel,.ai-settings,.ai-table { background:linear-gradient(135deg,#20352b,#192b23)!important; border-color:#c4cfa71c; box-shadow:0 12px 40px #00000015!important; }
#gameArea { background:linear-gradient(140deg,#20352b,#16271f)!important; }
.btn-blue { background:#3b5548!important; color:#f2eddf!important; }
.btn-green,.btn-purple { background:linear-gradient(125deg,#4d775c,#365640)!important; border-color:#a0c49024; }
.btn-gold,.btn-yellow { background:linear-gradient(125deg,#e2cb97,#c5a770)!important; color:#312a1c!important; }
button,.gameBtn,.button-link { transition:transform .2s,filter .2s,box-shadow .2s!important; }
button:hover:not(:disabled),.gameBtn:hover,.button-link:hover { box-shadow:0 5px 18px #0002; }
button:active:not(:disabled),.gameBtn:active { transform:translateY(1px) scale(.98); }
input:not([type=checkbox]),select,.createRow input,.roomCreateRow input { background:#101f18bb!important; border-color:#becfa82b!important; }
input:focus,select:focus { border-color:#b4c78c80!important; box-shadow:0 0 0 3px #a9c48b0c; }
input::placeholder { color:#889783; }
select option { background:#1b2b25; }
.gameItem { border-color:#c4cfa726; background:linear-gradient(135deg,#23392d,#172b22)!important; }
.gameItem::after { content:''; position:absolute; pointer-events:none; inset:0; border-radius:inherit; background:linear-gradient(115deg,transparent 25%,#f7e9b109 45%,#f7e9b11a 50%,transparent 65%); transform:translateX(-125%); }
@media(hover:hover) and (prefers-reduced-motion:no-preference) { .gameItem:hover::after { animation:card-sheen .85s ease-out; } .gameItem:hover .game-art { filter:brightness(1.1); } }
@keyframes card-sheen { to { transform:translateX(125%); } }
.game-art { transition:filter .3s; }
.chess-art { background:linear-gradient(125deg,#435841,#243d30); }
.gomoku-art { background:linear-gradient(125deg,#4a5b40,#2c4132); }
.games-panel > h2::after { content:'03 GAMES / 05 MODES'; color:#8d9d85; }
.ai-promo { background:linear-gradient(125deg,#344833,#21392b); border-color:#c9d4ac29; }
.international-card { grid-column:1/-1; min-height:0!important; display:grid!important; grid-template-columns:minmax(0,1fr) 175px; gap:26px; align-items:center; }
.international-card .game-art { position:absolute; inset:0 0 0 auto; width:48%; height:100%; margin:0; opacity:.16; pointer-events:none; }
.international-card > div { position:relative; z-index:1; }
.international-card > div:first-child { position:static; }
.international-card .eyebrow,.international-card h3,.international-card p,.international-card .miniStats { position:relative; }
.international-art { background:linear-gradient(135deg,#61714b,#334b35); }
.international-art::before { transform:rotate(-18deg) scale(1.4); }
.international-art span { position:absolute; font:150px/1 Georgia,'Segoe UI Symbol',serif; left:15%; top:0; color:#ebd6a5; transform:rotate(-10deg); }
.international-art span+span { left:55%; top:60px; font-size:115px; color:#b9c5a4; }
.card-actions .gameBtn { margin:5px 0; white-space:nowrap; }
#lobbyEmpty { border-color:#c5d7ae26; }
#lobbyEmpty::before { font-family:KaiTi,STKaiti,SimSun,serif; font-size:30px; }
canvas#gomokuCanvas,#aiCanvas { border-radius:6px!important; outline:5px solid #6b5339; box-shadow:0 6px 0 5px #3d3022,0 22px 38px #0004!important; margin:5px; max-width:calc(100% - 10px)!important; }
#boardWrap { padding:22px 6px!important; }
.infoBlock strong { color:var(--mint); font-size:12px; letter-spacing:1px; }
#bootScreen { flex-direction:column; gap:20px; padding:30px; text-align:center; font-size:16px!important; }
#bootScreen::before { content:'弈'; display:grid; place-items:center; width:70px; height:70px; font:40px KaiTi,SimSun,serif; border:1px solid #d8c69855; border-radius:12px; color:#d8c698; }
#authMessage { overflow-wrap:anywhere; }
.identity-gate { padding:32px; border:1px solid #d8c69844; background:linear-gradient(140deg,#263b2e,#17281f); }
.identity-gate h2 { font:28px/1.4 KaiTi,STKaiti,SimSun,serif; }
dialog { background:#1b2e23; border-color:#b9cb9f44; }
dialog::backdrop { background:#07120ed9; backdrop-filter:blur(3px); }
@media(prefers-reduced-motion:no-preference) { .hero,.page-intro,.chess-intro { animation:table-arrive .5s ease-out both; } .games-panel,.ai-table,.international-table { animation:table-arrive .65s ease-out both; } }
@keyframes table-arrive { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:540px) { .hero::after,.page-intro::after { font-size:25px; right:0; } .international-card { grid-template-columns:1fr; gap:10px; } .card-actions { display:flex; gap:8px; } .site-brand { font-size:16px; } .site-nav a { font-size:11px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }
/* Related collections, distinct materials for each game. */
body[data-game=gomoku] { --bg:#14201e; --surface:#20332e; --accent:#3d7368; --mint:#b8d8cb; --gold:#d6c69d; background-image:radial-gradient(ellipse at 15% 0%,#7cbba51a,transparent 60%)!important; }
body[data-game=gomoku] .panel,body[data-game=gomoku] .ai-table,body[data-game=gomoku] #gameArea { background:linear-gradient(140deg,#263d36,#1a2e29)!important; }
body[data-game=gomoku] .btn-green { background:linear-gradient(120deg,#51877a,#355e55)!important; }
body[data-game=gomoku] .hero::after,body[data-game=gomoku] .page-intro::after { content:'五'; border-color:#91b7a970; color:#b4d3be; }
body[data-game=international] { --bg:#191e25; --surface:#252d35; --surface-raised:#303b44; --paper:#f2ebdc; --muted:#aeb5b6; --mint:#dfc995; --accent:#7d704f; --gold:#ddbc78; --line:#dbcda81f; background-image:radial-gradient(ellipse at 75% 0%,#b5935420,transparent 52%),radial-gradient(ellipse at 0% 75%,#61779513,transparent 50%)!important; }
body[data-game=international] .panel { background:linear-gradient(140deg,#2a343c,#202831)!important; border-color:#d5c7a428; }
body[data-game=international] .btn-green { background:linear-gradient(125deg,#84754e,#645b40)!important; }
body[data-game=international] .btn-blue { background:#465769!important; }
body[data-game=international] input,body[data-game=international] select { background:#151d24!important; }
body[data-game=international] .page-intro::after { content:'♞'; font-family:Georgia,'Segoe UI Symbol',serif; border-color:#b89b6555; color:#dbc48e; transform:none; }
body[data-game=international] .chess-square.dark { background:#647180; color:#e8d4a6; }
body[data-game=international] .chess-square.light { background:#eadcba; color:#546172; }
body[data-game=international] .chess-piece.obsidian { color:#293440; --piece-outline:#17212d; --piece-detail:#87919e; }
body[data-game=international] .mode-tabs button[aria-pressed=true] { background:#786d4c!important; }
.leaderboard { width:min(1240px,92vw); margin:32px auto; background:linear-gradient(120deg,#2d3428,#1b2b23)!important; }
.ranking-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:20px; }
.ranking-heading h2 { font:32px KaiTi,STKaiti,SimSun,serif; margin:0; }.ranking-heading p { margin:10px 0 0; }
.ranking-emblem { display:grid; place-items:center; width:60px; height:60px; flex-shrink:0; color:#d6bb7c; border:1px solid #d6bb7c40; border-radius:50%; font:33px KaiTi,SimSun,serif; box-shadow:0 0 35px #d6bb7c09; }
.ranking-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
.ranking-tabs button { min-height:38px; font-size:12px; }
.ranking-tabs button[aria-pressed=true] { color:#f4dfad!important; background:#baa36920!important; border-color:#c9ad6c55!important; }
.ranking-scroll { overflow-x:auto; }.leaderboard table { width:100%; border-collapse:collapse; text-align:left; font-size:13px; }
.leaderboard th { color:var(--muted); font-size:11px; font-weight:500; letter-spacing:1px; padding:12px 15px; border-bottom:1px solid var(--line); }
.leaderboard td { padding:14px 15px; border-bottom:1px solid #d6d8b50b; }
.leaderboard td:first-child { font:italic 21px Georgia,serif; color:#8b9c85; width:70px; }
.leaderboard tr:nth-child(-n+3) td:first-child { color:#e2c58a; }
.leaderboard tr:first-child { background:linear-gradient(90deg,#d2b57909,transparent); }
.leaderboard td:nth-child(2) { font-weight:600; overflow-wrap:anywhere; }.leaderboard td:nth-child(3) { color:#dccc9b; }
.ranking-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:18px; }.ranking-footer p { margin:0; font-size:11px; }.ranking-footer button { font-size:11px; flex-shrink:0; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:540px) { .leaderboard { padding:18px!important; }.leaderboard td,.leaderboard th { padding:12px 7px; }.ranking-heading h2 { font-size:27px; }.ranking-footer { align-items:flex-start; }.ranking-emblem { width:46px; height:46px; font-size:27px; } }
/* Let Chinese glyphs and long names fit without squeezing controls or clipping headings. */
:where(.panel,.infoBlock,.table-header,.ranking-heading,.chess-seat,.seat,.badgeGroup) > div { min-width:0; }
:where(h1,h2,h3,p,.badge,.roomItemTitle,.smallText,.statsLine,.seat strong,.chess-seat strong) { overflow-wrap:anywhere; }
:where(h1,h2,h3) { line-height:1.45; }
button,a.button-link,a.topLink { line-height:1.5; white-space:normal; overflow-wrap:anywhere; }
.site-nav { min-width:0; }.site-nav a { line-height:1.6; }
.intro-seal,.ranking-emblem { flex-shrink:0; line-height:1.2; }
.table-header { flex-wrap:wrap; }.table-header > div { flex:1 1 180px; }
@media(max-width:540px) { .site-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; overflow:visible; }.site-nav a { padding:8px 4px; text-align:center; font-size:12px; white-space:normal; }.hero h1,.page-intro h1 { line-height:1.5!important; }.ranking-heading { align-items:flex-start; } }
/* September collection: quiet borders, warmer paper, and distinct game materials. */
.site-header { padding:20px 0; }.site-brand img.brand-mark { padding:0; border-radius:10px; background:none; box-shadow:0 3px 14px #0003; }
.panel { border-top-color:#d5c69f35; }.site-nav a { border:1px solid transparent; }
.hero h1,.page-intro h1,.chess-intro h1 { text-wrap:balance; }
.hero p,.page-intro p,.chess-intro p { line-height:1.9; }
.room-empty { min-height:520px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; padding:30px 18px; background:radial-gradient(ellipse at 50% 35%,#d2bc8020,transparent 65%); }
.room-empty h2 { font:30px/1.5 KaiTi,STKaiti,SimSun,serif; margin:0; }.room-empty p { color:var(--muted); font-size:13px; max-width:32em; margin:0; }.room-empty .eyebrow { margin:0; }
.empty-crown { display:grid; place-items:center; width:118px; height:138px; margin-bottom:14px; border:1px solid #cdb57a44; border-radius:60px 60px 9px 9px; background:linear-gradient(145deg,#d1b97f12,#10192222); box-shadow:0 18px 30px #0002; }.empty-crown svg { width:90px; height:90px; }
.room-empty-note { margin-top:18px; color:var(--muted); font-size:11px; letter-spacing:1px; }
.piece-legend { display:grid; gap:8px; margin:14px 0; }.piece-legend > div { padding:10px; background:#e7d8ae07; border:1px solid var(--line); border-radius:8px; }.piece-legend dt { display:flex; align-items:center; gap:10px; font-size:15px; color:var(--paper); }.piece-legend small { display:block; font:10px/1.5 Georgia,serif; color:var(--muted); letter-spacing:1px; }.legend-pair { display:flex; gap:3px; flex-shrink:0; }.legend-pair .chess-piece { width:34px; height:40px; }.piece-legend dd { margin:7px 0 0; font-size:11px; line-height:1.8; color:var(--muted); }
body[data-mode=online] .international-layout { grid-template-columns:310px minmax(0,1fr); }
body[data-mode=online] .international-table { min-height:590px; }
#retryConnection { margin-top:12px; font-size:12px; }
#retryConnection:disabled { display:none; }
@media(max-width:900px) { body[data-mode=online] .international-layout { grid-template-columns:1fr; } body[data-mode=online] .chess-controls { order:0; } body[data-mode=online] .international-table { order:1; min-height:0; } body[data-mode=online].in-room .international-table { order:-1; }.room-empty { min-height:300px; }.piece-legend { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:380px) { .piece-legend { grid-template-columns:1fr; }.room-empty h2 { font-size:24px; } }
body[data-game=gomoku] .chess-intro { width:min(1240px,92vw); margin:12px auto 32px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
body[data-game=gomoku] .chess-intro h1 { font:500 clamp(28px,3.5vw,46px)/1.5 KaiTi,STKaiti,SimSun,serif; margin:0; letter-spacing:2px; }
body[data-game=gomoku] .chess-intro p { color:var(--muted); font-size:13px; }
body[data-game=gomoku] .intro-seal { font:32px/1.2 KaiTi,SimSun,serif; border:1px solid #adcab566; color:#b3d1b6; padding:8px; border-radius:4px; }
body[data-game=international] #chessBoard .dark { background:#617080; color:#ead7aa; }
body[data-game=international] #chessBoard .light { background:#eadcba; color:#546172; }

.ztx-dialog{width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 40px);padding:30px;border:1px solid #d9bd8555;border-radius:20px;background:linear-gradient(145deg,#243d35,#14251f);box-shadow:0 24px 80px #0009;overflow:auto}.ztx-dialog::backdrop{background:#07130fcc;backdrop-filter:blur(6px)}.ztx-dialog h2{margin:0 0 12px;color:var(--gold);font:500 27px/1.5 KaiTi,serif}.ztx-dialog p{color:var(--paper);line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere}.ztx-dialog .action-row{justify-content:flex-end;margin:24px 0 0}.ztx-dialog .eyebrow{font-size:10px;letter-spacing:3px}.ztx-dialog button{min-width:96px}