@font-face{font-family:"Fusion Pixel";src:url("/fonts/fusion-pixel-12px-monospaced-zh_hans.otf.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{--pixel-font:"Fusion Pixel","Cascadia Mono","Microsoft YaHei",monospace;font-family:var(--pixel-font);font-synthesis:none;color:#243c38;background:#f3f5f1}
body{background:linear-gradient(#536c6210 1px,transparent 1px),linear-gradient(90deg,#536c6210 1px,transparent 1px),#f3f5f1;background-size:24px 24px;font-size:16px;line-height:1.5}
/* Homepage paint is intentionally separate from game and reading surfaces. */
body.in-lobby:not(.info-reading){background:#f3f5f1}
button,input,select,textarea{font:inherit}
button:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid #277b65;outline-offset:3px}
.shell{width:min(100% - 40px,980px);padding:30px 0 52px}
.shell>header{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:20px;margin-bottom:22px;min-height:38px}
.eyebrow{font-size:12px;letter-spacing:.08em;color:#3d6557;margin:0}
.header-right{justify-self:end;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin:0;min-width:0;max-width:100%}
.status,.online-count,#authToggle,.account-menu summary{height:34px;box-sizing:border-box;border:1px solid #bacbc0;border-radius:4px;background:#fffefa;padding:6px 10px;display:flex;align-items:center;gap:6px;font-size:12px;line-height:1;white-space:nowrap;margin:0;box-shadow:1px 2px 0 #d4ddd3}
body.in-lobby:not(.info-reading) :is(.status,.online-count){border:0;background:none;box-shadow:none;padding:6px 2px;color:#486151}
body.in-lobby:not(.info-reading) #dot{border-radius:50%;box-shadow:none}
#dot{width:6px;height:6px;border-radius:0;box-shadow:2px 2px 0 #c9ded0;flex-shrink:0}
.account-menu summary{max-width:190px;padding:3px 8px 3px 4px}
.user-avatar{width:24px;height:24px;font-size:12px;border-radius:2px;background:#285846}
.account-menu-popup{width:min(280px,calc(100vw - 24px));box-sizing:border-box;max-height:70dvh;overflow:auto;border-radius:4px;border-color:#b5c9bb;box-shadow:3px 3px 0 #ccd8ca;padding:4px}
.account-menu-popup button{border-radius:2px}
.account-voice-setting{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px 10px;padding:8px;font-size:14px}.account-voice-setting select{min-height:44px;min-width:0;max-width:100%}.account-voice-setting small{grid-column:1/-1;font:11px/1.5 system-ui,sans-serif;color:var(--muted,#5c7064)}
.account-history-switch{display:flex;align-items:center;gap:8px;padding:10px 8px;min-height:44px;cursor:pointer;font-size:14px}
.account-history-switch input{width:18px;height:18px;accent-color:#255b48;flex-shrink:0}
.account-history-switch small{margin-left:auto;white-space:nowrap;color:inherit}
#historyMenuNote,#historyMenuError{font-size:12px;line-height:1.6;max-width:260px;margin:0 8px;overflow-wrap:anywhere}
#authDialog form[hidden]{display:none}
#authDialog .auth-switch{display:block;background:none;border:0;box-shadow:none;color:inherit;text-decoration:underline;text-underline-offset:3px;min-height:44px;padding:10px 0;cursor:pointer}
#authError,#registerError,#historyChoiceError{color:#a1192c;overflow-wrap:anywhere}
:root[data-theme="dark"] :is(#authError,#registerError,#historyChoiceError){color:#ffb1ad}
.panel{border:1px solid #c3d0c4;border-radius:8px;background:#fffefa;backdrop-filter:none;box-shadow:4px 4px 0 #dce4d8;padding:24px}
#lobby{box-shadow:none}
.lobby-tabs{gap:7px;border-color:#e0e7dc;padding-bottom:18px}
.lobby-tab{font-size:16px;border:1px solid #d1dccf;border-radius:4px;padding:9px 13px;background:#f4f6f0;color:#486151}
.lobby-tab.active{background:#255b48;border-color:#255b48;color:#fff;box-shadow:2px 2px 0 #a9c7b4}
.lobby-view{padding:22px 0 2px;min-height:0}
.lobby-view h2{font-size:24px;font-weight:400}
.section-note{font-size:12px;color:#718174;line-height:1.65}
.games{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.game-card{position:relative;overflow:hidden;min-height:168px!important;padding:23px;border:1px solid #c8d3c8;border-radius:6px;appearance:none;box-shadow:none;transition:border-color .15s}
.games .game-card{min-height:140px!important;padding:20px}
.game-card:hover{transform:none;box-shadow:none}
.game-card:hover:not(:disabled){border-color:#648774}
.game-card strong{font-size:24px;line-height:1.4;font-weight:400}
.games .game-card strong{font-size:22px}
.nowrap{white-space:nowrap}
.game-card small{font-size:12px;line-height:1.6;color:#6c7d71;margin-top:9px}
.game-card .icon{font-family:var(--pixel-font);font-size:30px;line-height:1;letter-spacing:0;margin-bottom:22px!important}
.games .game-card .icon{font-size:26px;margin-bottom:12px!important}
.ttt-card{background:#eff4f8;border-color:#c1d1e0}.ttt-card .icon{color:#3e678d}
.gomoku-card{background:#faf3e8;border-color:#dbc8a8}.gomoku-card .icon{color:#8b663b}
.xiangqi-card{background:#f8efe3;border-color:#d9bea0}
.nback-card{background:#eff5eb;border-color:#c1d4b8}.nback-card .icon{color:#47744e}
.xiangqi-card-piece{width:35px;height:35px;font-family:var(--pixel-font);font-size:24px}
button.primary,button.secondary{border-radius:4px;font-weight:400;box-shadow:2px 2px 0 #ccd8cd}
button.primary{background:#255b48;border:1px solid #255b48;color:white}
button.secondary{background:#fffefa;border-color:#c6d3c5;color:#375b48}
button:disabled{box-shadow:none}
.ai-selects{margin:14px 0 8px}.ai-selects label{display:flex;align-items:center;gap:12px;font-size:16px}
.ai-selects select,.invite-controls select,.invite-controls input{border-radius:4px;background:#fffefa;border-color:#c4d2c3}
.ai-practice-entry{display:flex;gap:10px;flex-wrap:wrap;padding-top:5px}

.game-dialog,#authDialog,#deleteDialog{font-family:var(--pixel-font);border-color:#bbccbd;border-radius:8px;background:#fffefa;box-shadow:5px 5px 0 #18372b38}
.game-dialog h2{font-size:24px;font-weight:400}.game-dialog p,.rules-dialog li{line-height:1.8}
.game-dialog input,#authDialog label input,#deleteDialog label input{border-radius:4px}
.opponent-badge,.badge{font-size:12px;border-radius:4px;font-weight:400}.badge.active{background:#dfefdf;color:#255b48}
.history-notice,.swap2-controls{border-radius:6px}.history-notice strong{font-weight:400}

.game-head h2{font-size:24px;font-weight:400}.message{font-weight:400}
.ttt .cell{font-family:var(--pixel-font);font-weight:400}
.nback-frame{border-radius:6px}#nbackPlay{padding:18px}
@media(max-width:640px){
 .shell{width:calc(100% - 24px);padding:18px 0 36px}
 .shell>header{grid-template-columns:auto 1fr;gap:8px;margin-bottom:18px;min-height:34px}
 .eyebrow{font-size:12px;letter-spacing:0}
 .header-right{justify-self:end;justify-content:flex-end;gap:5px;margin:0}
 .status,.online-count,#authToggle,.account-menu summary{padding:5px 6px;font-size:12px;height:32px}
 /* Keep the brand on its own row; states and account share the next row. */
 body.in-lobby:not(.info-reading) .shell>header{grid-template-columns:1fr;gap:8px}
 body.in-lobby:not(.info-reading) .header-right{width:100%;gap:6px 10px}
 body.in-lobby:not(.info-reading) .header-right :is(#authToggle,.account-menu){margin-left:auto}
 .account-menu summary{max-width:116px;gap:4px}.user-avatar{width:22px;height:22px}
 .panel{padding:16px;border-radius:6px;box-shadow:3px 3px 0 #dce4d8}
 .lobby-tabs{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:14px}.lobby-tab{font-size:12px;padding:8px 9px}
 .lobby-view{padding-top:17px}.games{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .game-card{padding:16px 12px;min-height:154px!important;border-radius:4px}.game-card strong{font-size:18px}
 .games .game-card{padding:14px 12px;min-height:124px!important}.games .game-card strong{font-size:17px}
 .game-card small{font-size:12px;line-height:1.5}.game-card .icon{font-size:26px;margin-bottom:18px!important}.games .game-card .icon{font-size:24px;margin-bottom:10px!important}
 .xiangqi-card-piece{width:29px;height:29px;font-size:22px}.xiangqi-card .icon{gap:5px}
 .game-head h2,.lobby-view h2{font-size:24px}.ai-practice-entry button{font-size:16px}
 #nbackPlay{padding:10px}
}
@media(max-width:360px){.shell>header{grid-template-columns:1fr;gap:8px}.header-right{justify-self:end}.game-card strong{font-size:16px}.games .game-card strong{font-size:16px}.games .ddz-card-entry .icon{font-size:22px;white-space:nowrap}}
/* Local AI follows the same wooden board and compact controls as live games. */
.ai-selects{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center}#aiRuleSelect{display:flex;gap:8px;align-items:center}#aiRuleSelect.hidden{display:none}
#aiPlay[data-board-type="xiangqi"]{--xiangqi-width:min(100%,580px,max(280px,calc((100dvh - 320px)*.9)))}
#aiPlay[data-board-type="xiangqi"] .board{width:var(--xiangqi-width);max-height:none;aspect-ratio:9/10}#aiPlay[data-board-type="xiangqi"] .game-head{width:var(--xiangqi-width)}
@media(max-width:640px){#aiPlay[data-board-type="xiangqi"]{--xiangqi-width:100%}.ai-selects{gap:12px}.ai-selects select{max-width:160px}#aiRuleSelect{flex-wrap:wrap}}

.ai-mode-seat{display:flex;align-items:flex-start;gap:20px}#aiRuleSelect{flex-direction:column;align-items:flex-start;gap:2px}.ai-seat-select{display:flex;gap:14px;margin:0;padding:5px 0;border:0;min-width:0}.ai-seat-select label{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer}.ai-seat-select input{appearance:none;width:17px;height:17px;margin:0;border:1px solid #67806a;border-radius:2px;background:#fffefa;display:grid;place-content:center}.ai-seat-select input:checked{background:#216c56;border-color:#216c56}.ai-seat-select input:checked::after{content:'✓';color:#fff;font:14px sans-serif}.ai-seat-select input:focus-visible{outline:2px solid #216c56;outline-offset:3px}#aiSeatNote{font-size:12px;margin:4px 0 12px}
@media(max-width:640px){.ai-mode-seat{gap:14px}.ai-seat-select{gap:10px}.ai-seat-select label{font-size:14px}.ai-seat-select input{width:16px;height:16px}}