:root{--bg:#262522;--panel:#312e2b;--panel-2:#3b3937;--panel-3:#242321;--text:#f3f3f3;--muted:#aaa7a2;--green:#81b64c;--green-dark:#5e9133;--green-soft:#a3d160;--light:#ebecd0;--dark:#739552;--danger:#d7685b;--shadow:0 18px 55px rgba(0,0,0,.28);--radius:12px}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:radial-gradient(circle at 42% 0,#33312e 0,#262522 35%,#211f1d 100%);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}
button,input{font:inherit}button{color:inherit}.app-shell{min-height:100vh;display:flex;flex-direction:column}.topbar{height:72px;padding:0 clamp(18px,4vw,58px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(38,37,34,.86);backdrop-filter:blur(14px);position:relative;z-index:20}.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-size:26px;font-weight:850;letter-spacing:-1px}.brand-mark{font-size:40px;line-height:1;color:var(--green-soft);filter:drop-shadow(0 3px 0 rgba(0,0,0,.25))}.top-actions,.top-actions>div,.user-menu{display:flex;align-items:center;gap:10px}.button{border:0;border-radius:8px;padding:11px 18px;font-weight:750;cursor:pointer;transition:.16s transform,.16s filter,.16s background}.button:hover{filter:brightness(1.06)}.button:active{transform:translateY(1px)}.button-primary{background:linear-gradient(#8bc34f,#75ab3f);box-shadow:inset 0 -3px 0 rgba(53,93,27,.5),0 5px 16px rgba(85,145,42,.18);color:#17230e}.button-ghost{background:transparent;color:#d8d6d3}.button-ghost:hover{background:rgba(255,255,255,.07)}.button.compact{padding:10px 17px}.save-state{color:#a9c990;font-size:13px}.avatar-button{background:transparent;border:0;display:flex;align-items:center;gap:9px;font-weight:700;cursor:pointer;padding:6px;border-radius:8px}.avatar-button:hover{background:rgba(255,255,255,.06)}.avatar{width:34px;height:34px;border-radius:8px;background:#4b4946;display:grid;place-items:center;color:#ddd;font-size:21px}.account-dropdown{position:absolute;right:44px;top:62px;width:190px;background:#403e3b;border:1px solid rgba(255,255,255,.08);border-radius:9px;box-shadow:var(--shadow);padding:6px}.account-dropdown button{width:100%;padding:11px;border:0;background:transparent;text-align:left;border-radius:6px;cursor:pointer}.account-dropdown button:hover{background:rgba(255,255,255,.08)}
.play-layout{width:min(1220px,calc(100% - 32px));margin:26px auto 20px;display:grid;grid-template-columns:minmax(420px,720px) minmax(330px,400px);gap:clamp(20px,3vw,42px);align-items:start;justify-content:center;flex:1}.board-column{min-width:0}.player-strip{height:51px;display:flex;align-items:center;justify-content:space-between}.player-identity{display:flex;align-items:center;gap:10px}.player-identity>span:last-child{display:flex;flex-direction:column;gap:2px}.player-identity strong{font-size:15px}.player-identity small{font-size:12px;color:var(--muted)}.player-avatar{width:38px;height:38px;border-radius:7px;background:linear-gradient(145deg,#f1f1ed,#b8b7b1);color:#383632;display:grid;place-items:center;font-size:26px;box-shadow:0 3px 8px rgba(0,0,0,.25)}.bot-avatar{background:linear-gradient(145deg,#53504c,#343230);color:var(--green-soft)}.turn-badge{font-size:12px;color:#d8e9c8;background:rgba(129,182,76,.16);border:1px solid rgba(129,182,76,.25);padding:6px 9px;border-radius:20px}.thinking{display:flex;align-items:center;gap:4px;color:var(--muted);font-size:12px}.thinking i{width:5px;height:5px;border-radius:50%;background:var(--green);animation:pulse 1s infinite}.thinking i:nth-child(2){animation-delay:.15s}.thinking i:nth-child(3){animation-delay:.3s}.thinking span{margin-left:4px}@keyframes pulse{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.board-wrap{position:relative;width:100%;aspect-ratio:1;border-radius:4px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.32)}.chessboard{display:grid;grid-template-columns:repeat(8,1fr);width:100%;height:100%;touch-action:none;user-select:none}.square{position:relative;display:grid;place-items:center;cursor:pointer}.square.light{background:var(--light)}.square.dark{background:var(--dark)}.square.last-move.light{background:#f6f68b}.square.last-move.dark{background:#b8c94e}.square.selected:after{content:"";position:absolute;inset:0;background:rgba(246,246,95,.45)}.square.check:after{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(217,70,56,.9) 0,rgba(217,70,56,.35) 48%,transparent 70%)}.piece{position:relative;z-index:2;width:88%;height:88%;display:grid;place-items:center;font-family:"Arial Unicode MS","Noto Sans Symbols 2",serif;font-size:clamp(32px,7vw,68px);line-height:1;text-shadow:0 3px 1px rgba(0,0,0,.28);transition:transform .1s}.piece.white-piece{color:#f7f5ef;-webkit-text-stroke:1.2px #383632}.piece.black-piece{color:#292825;-webkit-text-stroke:1px #c6c3b9}.square:hover .piece{transform:scale(1.035)}.move-dot{position:absolute;z-index:3;width:25%;height:25%;border-radius:50%;background:rgba(24,39,18,.3);pointer-events:none}.capture-dot{position:absolute;z-index:3;inset:5%;border:7px solid rgba(24,39,18,.3);border-radius:50%;pointer-events:none}.coord{position:absolute;z-index:4;font-size:clamp(8px,1.2vw,12px);font-weight:850;pointer-events:none}.coord.rank{left:4px;top:2px}.coord.file{right:4px;bottom:2px}.light .coord{color:var(--dark)}.dark .coord{color:var(--light)}.game-overlay{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:rgba(24,23,21,.58);backdrop-filter:blur(2px)}.game-overlay[hidden]{display:none}.overlay-card{width:min(320px,80%);text-align:center;background:#312f2c;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:28px;box-shadow:var(--shadow)}.overlay-icon{font-size:44px;color:var(--green-soft)}.overlay-card h2{margin:5px 0 7px}.overlay-card p{margin:0 0 20px;color:var(--muted)}
.game-panel{background:var(--panel);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;border:1px solid rgba(255,255,255,.045);min-height:620px}.panel-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid rgba(255,255,255,.07);background:var(--panel-3)}.panel-tab{height:52px;background:transparent;border:0;color:var(--muted);font-weight:750;cursor:pointer;position:relative}.panel-tab.active{color:#fff}.panel-tab.active:after{content:"";position:absolute;height:3px;background:var(--green);left:22%;right:22%;bottom:0;border-radius:3px}.tab-content{padding:22px}.game-heading,.history-heading{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:1.6px;color:var(--green-soft)}.game-heading h1,.history-heading h2{font-size:24px;margin:3px 0 0;letter-spacing:-.5px}.status-dot{font-size:11px;color:var(--muted);padding-top:7px}.status-dot i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(129,182,76,.12);margin-right:4px}.setup-card{background:var(--panel-2);border-radius:10px;padding:15px;margin-bottom:16px}.field-label{display:block;color:#c4c1bd;font-size:11px;font-weight:750;margin:0 0 8px;text-transform:uppercase;letter-spacing:.5px}.difficulty-row{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:17px}.difficulty-row button{border:1px solid rgba(255,255,255,.07);background:#302e2c;border-radius:7px;padding:8px;display:flex;flex-direction:column;gap:1px;cursor:pointer}.difficulty-row button span{font-weight:700;font-size:13px}.difficulty-row button small{font-size:10px;color:var(--muted)}.difficulty-row button.selected{border-color:var(--green);background:rgba(129,182,76,.12);box-shadow:inset 0 0 0 1px rgba(129,182,76,.2)}.color-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:14px}.color-picker button{border:1px solid rgba(255,255,255,.07);background:#302e2c;border-radius:7px;padding:8px 4px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px}.color-picker button.selected{border-color:var(--green);background:rgba(129,182,76,.12)}.piece-choice{font-size:22px}.color-picker b{font-size:11px}.white-piece{color:#f2f1ed}.black-piece{color:#171615}.split-piece{color:#c5c3bf}.start-button{width:100%;padding:13px}.moves-section{background:#282725;border-radius:9px;overflow:hidden;border:1px solid rgba(255,255,255,.04)}.moves-header{height:39px;padding:0 13px;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted);border-bottom:1px solid rgba(255,255,255,.05);text-transform:uppercase;letter-spacing:.4px}.moves-list{height:116px;overflow:auto;padding:8px 12px}.moves-list.empty{display:grid;place-items:center}.empty-moves{text-align:center;color:#77736e;font-size:12px}.empty-moves span{font-size:25px}.empty-moves p{margin:3px}.move-row{display:grid;grid-template-columns:25px 1fr 1fr;gap:8px;padding:5px 2px;font-size:13px}.move-row .number{color:#77736e}.move-san{font-weight:650}.game-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:12px 0}.game-controls button,.icon-button{background:#3b3936;border:1px solid rgba(255,255,255,.05);border-radius:7px;padding:9px 4px;color:#c7c4bf;font-size:11px;cursor:pointer}.game-controls button span{font-size:17px;vertical-align:-1px;margin-right:2px}.game-controls button:disabled{opacity:.35;cursor:not-allowed}.game-controls button:not(:disabled):hover,.icon-button:hover{background:#474440}.guest-note{display:flex;gap:10px;align-items:center;background:rgba(129,182,76,.08);border:1px solid rgba(129,182,76,.15);padding:11px;border-radius:8px}.guest-note>span{font-size:22px;color:var(--green-soft)}.guest-note p{font-size:11px;line-height:1.45;margin:0;color:var(--muted)}.guest-note strong{color:#d9d6d2}.guest-note button{border:0;background:transparent;color:var(--green-soft);padding:0;text-decoration:underline;cursor:pointer;font-weight:700}.history-content{min-height:560px}.icon-button{font-size:20px;width:38px;height:38px;padding:0}.games-list{display:flex;flex-direction:column;gap:8px}.game-record{background:#3a3835;border:1px solid rgba(255,255,255,.05);border-radius:9px;padding:12px;display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;cursor:pointer}.game-record:hover{background:#403e3a}.game-result{width:38px;height:38px;display:grid;place-items:center;border-radius:8px;font-weight:900;background:#2b2a28}.game-result.win{color:var(--green-soft)}.game-result.loss{color:#e48578}.game-result.draw{color:#cfc9a4}.game-record strong{font-size:13px}.game-record small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.game-record time{font-size:10px;color:#8d8984}.history-empty{text-align:center;padding:60px 25px;color:var(--muted)}.history-empty span{font-size:42px;color:#77736e}.history-empty h3{color:#ddd;margin:9px 0 5px}.history-empty p{font-size:12px;line-height:1.5}.history-empty .button{margin-top:10px}footer{height:52px;width:min(1220px,calc(100% - 36px));margin:auto;display:flex;justify-content:space-between;align-items:center;color:#716e69;font-size:11px}
.modal{border:0;padding:0;background:transparent;overflow:visible;color:var(--text)}.modal::backdrop{background:rgba(20,19,18,.78);backdrop-filter:blur(5px)}.modal-card{width:min(420px,calc(100vw - 30px));background:#343230;border:1px solid rgba(255,255,255,.08);border-radius:15px;box-shadow:var(--shadow);padding:30px;position:relative;text-align:center}.modal-close{position:absolute;right:11px;top:9px;border:0;background:transparent;color:var(--muted);font-size:27px;cursor:pointer}.modal-brand{font-size:46px;color:var(--green-soft)}.modal-card h2{margin:2px 0 6px}.modal-card>p{margin:0 0 22px;color:var(--muted);font-size:13px}.auth-form label{display:block;text-align:left;color:#c7c3be;font-size:12px;font-weight:650;margin:11px 0}.auth-form input{display:block;width:100%;margin-top:6px;background:#242321;border:1px solid #4c4945;border-radius:7px;padding:12px;color:#fff;outline:none}.auth-form input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(129,182,76,.12)}.submit-button{width:100%;margin-top:8px}.modal-card>small{display:block;color:var(--muted);margin-top:17px}.modal-card>small button{border:0;background:transparent;color:var(--green-soft);cursor:pointer}.form-message{font-size:12px;min-height:17px;text-align:left;color:#e48578}.promotion-card{background:#343230;padding:18px;border-radius:12px;text-align:center}.promotion-card strong{display:block;margin-bottom:12px}.promotion-card div{display:flex;gap:8px}.promotion-card button{font-size:42px;width:66px;height:66px;border:1px solid rgba(255,255,255,.08);background:#e6e7cb;border-radius:8px;color:#292825;cursor:pointer}.toast-region{position:fixed;right:20px;bottom:20px;z-index:100;display:flex;flex-direction:column;gap:8px}.toast{background:#45423e;border:1px solid rgba(255,255,255,.09);border-left:4px solid var(--green);padding:12px 16px;border-radius:8px;box-shadow:var(--shadow);font-size:13px;animation:toast-in .22s ease}.toast.error{border-left-color:var(--danger)}@keyframes toast-in{from{transform:translateY(8px);opacity:0}}
[hidden]{display:none!important}
@media(max-width:940px){.play-layout{grid-template-columns:minmax(340px,680px);max-width:680px;margin-top:12px}.game-panel{min-height:0}.account-dropdown{right:18px}footer{margin-top:12px}.save-state{display:none}}
@media(max-width:560px){.topbar{height:58px;padding:0 12px}.brand{font-size:21px}.brand-mark{font-size:32px}.button.compact{display:none}.play-layout{width:100%;margin:0;gap:2px}.player-strip{padding:0 10px}.board-wrap{border-radius:0}.game-panel{border-radius:0;box-shadow:none;border-left:0;border-right:0}.tab-content{padding:16px}.game-heading h1{font-size:21px}footer{width:100%;padding:0 12px}.account-dropdown{top:52px}.avatar-button #header-username{display:none}.piece{font-size:clamp(34px,11vw,58px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.square{border:0;padding:0}

/* Board sizing and piece set v1.2 — equal squares, viewport-aware desktop size. */
:root{--light:#eeeed2;--dark:#769656;--board-size:min(640px,calc(100vh - 260px),calc(100vw - 420px));--board-size:min(640px,calc(100dvh - 260px),calc(100vw - 420px))}
.play-layout{grid-template-columns:var(--board-size) minmax(330px,400px);gap:clamp(22px,3vw,38px);margin:16px auto 10px}
.board-column{width:var(--board-size);max-width:100%}
.player-strip{height:44px}
.board-wrap{width:var(--board-size);height:var(--board-size);max-width:100%;aspect-ratio:1/1}
.chessboard{grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));aspect-ratio:1/1}
.square{width:auto;height:auto;min-width:0;min-height:0;overflow:hidden}
img.piece{display:block;width:94%;height:94%;object-fit:contain;pointer-events:none;text-shadow:none;-webkit-text-stroke:0;filter:drop-shadow(0 2px 1px rgba(0,0,0,.2));transition:transform .1s ease}
.square:hover img.piece{transform:scale(1.025)}
.promotion-card button{display:grid;place-items:center;padding:5px}
.promotion-card button img{display:block;width:100%;height:100%;object-fit:contain}

@media(max-width:940px){:root{--board-size:min(560px,calc(100vw - 32px),calc(100vh - 210px));--board-size:min(560px,calc(100vw - 32px),calc(100dvh - 210px))}.play-layout{grid-template-columns:var(--board-size);max-width:var(--board-size);justify-content:center}.board-column,.board-wrap{width:var(--board-size)}}
@media(max-width:560px){:root{--board-size:100vw}.play-layout{grid-template-columns:100vw;max-width:100%;width:100%}.board-column,.board-wrap{width:100vw}.player-strip{height:46px}img.piece{width:92%;height:92%}}
@media(max-height:760px) and (min-width:941px){:root{--board-size:min(500px,calc(100dvh - 240px),calc(100vw - 450px))}.game-panel{min-height:0}.tab-content{padding:16px}.setup-card{padding:12px}.moves-list{height:86px}}