@font-face{font-family:Symbols;src:url(material-symbols.ttf)}
:root{--ink:#303e50;--muted:#6c7889;--line:#a6b0bd;--blue:#426995}*{box-sizing:border-box}body{margin:0;color:var(--ink);font:14px/1.5 'Helvetica Neue',Helvetica,Arial,sans-serif;background:repeating-linear-gradient(90deg,#c7ced8 0,#c7ced8 1px,#d3d9e1 1px,#d3d9e1 5px);min-height:100vh;text-shadow:0 1px #fff8}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #e6ab46;outline-offset:3px}[hidden]{display:none!important}.material-symbols-rounded{font-family:Symbols;font-weight:normal;font-style:normal;font-size:21px;line-height:1;display:inline-block;white-space:nowrap;font-feature-settings:'liga';-webkit-font-smoothing:antialiased;vertical-align:middle}header{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 max(28px,calc((100vw - 1120px)/2));background:linear-gradient(#b9c8dc,#8198b6 49%,#6c86a8 50%,#426287);border-top:1px solid #dce5ef;border-bottom:1px solid #263e5b;box-shadow:0 1px 0 #fff9,0 3px 8px #2d3f5550}.brand{display:flex;align-items:center;gap:12px;color:white;text-decoration:none;font-size:29px;font-weight:700;letter-spacing:-1px;text-shadow:0 -1px 1px #22384f}.mark{display:grid;place-items:center;width:46px;height:46px;border-radius:10px;background:linear-gradient(#f7f3e9,#d0c3a8 49%,#ac9470 50%,#dfd1b4);border:1px solid #635b4a;box-shadow:inset 0 1px 2px #fff,0 1px 2px #29415d;color:#33312b;font-size:38px;text-shadow:0 1px #fff}.preferences button,.menu-button, .board-tools button,.fresh-button,dialog button{border:1px solid #7a8ba1;border-radius:6px;background:linear-gradient(#fff,#e1e6ed 48%,#d0d8e2 49%,#e6eaf0);box-shadow:inset 0 1px #fff,0 1px 2px #34435635;padding:10px 13px;font-weight:600;text-shadow:0 1px #fff}.preferences button{background:linear-gradient(#8ea5c1,#4e6e96);border-color:#3a5475;color:white;text-shadow:0 -1px #334b68;font-size:12px}.button-label{vertical-align:middle}button .material-symbols-rounded{margin-right:5px}main{max-width:1150px;margin:auto;padding:48px 30px 0}.lobby{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:70px;align-items:center;min-height:620px}.intro{text-align:center}.intro::before{content:'THE CLASSIC CHESS EXPERIENCE';display:block;color:#5e718b;font-size:10px;letter-spacing:3px;font-weight:700}h1{font-size:48px;line-height:1.15;letter-spacing:-2px;color:#344965;margin:18px 0 12px;text-shadow:0 2px #fff}.chess-gradient{color:#344965}.home-description{font-size:15px;color:#5f7087;max-width:340px;margin:auto}.home-board-scene{width:365px;max-width:85%;margin:42px auto 24px;perspective:900px}.home-board-frame,.board-frame{padding:15px;background:repeating-linear-gradient(3deg,#63452f 0,#7f5b3a 3px,#84603d 5px,#6e4b30 7px);border:1px solid #503724;border-radius:5px;box-shadow:inset 0 0 0 2px #cba574,0 8px 0 #493222,0 16px 22px #28354755}.home-board-frame{transform:rotateX(22deg) rotateZ(-7deg)}#home-board{position:relative;aspect-ratio:1}.demo-squares{display:grid;grid-template-columns:repeat(8,1fr);height:100%}.demo-square,.sq{background:linear-gradient(100deg,#f5e7ca,#e4cca3)}.demo-square.shade,.sq.shade{background:linear-gradient(100deg,#a77b4d,#815b39)}.demo-pieces{position:absolute;inset:0}.demo-piece{position:absolute;width:12.5%;height:12.5%;display:grid;place-items:center}.piece{width:90%;height:96%;filter:drop-shadow(2px 5px 2px #26170d66);pointer-events:none}.panel,.control-card{border:1px solid #8a96a6;border-radius:11px;background:#f5f5f3;box-shadow:0 2px 5px #36485e30,inset 0 1px #fff;overflow:hidden}.panel{padding:0 22px 22px}.panel>label:first-of-type{margin:0 -22px 20px;padding:14px 20px;background:linear-gradient(#fdfdfd,#d5dbe3);border-bottom:1px solid #a4adba;font-size:18px;font-weight:700;text-align:center;color:#4c5c72}label{display:block;font-weight:700;color:#56677f;margin:21px 0 8px;font-size:12px;text-shadow:0 1px white}label span{float:right;font-weight:400}.segmented{display:flex;border:1px solid #929eae;border-radius:7px;overflow:hidden;box-shadow:0 1px #fff}.segmented button{flex:1;border:0;border-right:1px solid #a0abba;border-radius:0;background:linear-gradient(#fff,#d4dbe5);padding:11px 4px;font-size:12px;font-weight:600;color:#5b6b80;text-shadow:0 1px white;box-shadow:inset 0 1px #fff}.segmented button:last-child{border-right:0}.segmented .selected{background:linear-gradient(#345379,#6485b0);color:#fff;text-shadow:0 -1px #2d4866;box-shadow:inset 0 2px 4px #21375060}.color-swatch{width:12px;height:12px;border-radius:50%;display:inline-block;margin-right:4px;box-shadow:0 1px 2px #0005;border:1px solid #777}.white-swatch{background:#fff6df}.black-swatch{background:#363534}.color-note{font-size:11px;color:#7c8797;margin:7px 0}.primary{display:flex;align-items:center;justify-content:center;width:100%;gap:5px;padding:13px;border-radius:8px;border:1px solid #24486e;background:linear-gradient(#88b4e4,#4e86c2 49%,#2967ac 50%,#4386ce);box-shadow:inset 0 1px #cde4ff,0 1px 3px #31425555;color:white;font-size:18px;font-weight:700;text-shadow:0 -1px #244a77}.panel .primary{margin-top:25px}button:hover{filter:brightness(1.04)}button:active{filter:brightness(.92)}.fresh-button{width:100%;margin-top:12px;font-size:12px}.save-note{text-align:center;font-size:10px;color:#7a8797;margin-top:15px}.mobile-setup-back,#open-setup{display:none}.home-extra{text-align:center;margin:34px 0 28px}.chess-quote{margin:0;color:#69778b;font:italic 19px Georgia,serif}.quote-mark{display:none}blockquote{margin:0}.chess-quote::after{content:none;display:block;margin-top:9px;font:11px Helvetica,Arial,sans-serif;color:#7d899b}footer{max-width:1090px;margin:25px auto 0;padding:20px 0;display:flex;justify-content:space-between;border-top:1px solid #acb6c3;box-shadow:0 -1px #ffffff66;color:#6d7b8d;font-size:11px}footer p{margin:0}.workspace{display:grid;grid-template-columns:minmax(0,640px) 300px;gap:38px;align-items:center;justify-content:center}.in-game main{padding-top:25px}.in-game .home-extra,.in-game footer{display:none}.player{display:flex;align-items:center;gap:10px;padding:0 12px 12px}.player.bottom{padding:20px 12px 0}.avatar{height:36px;width:36px;border-radius:7px;display:grid;place-items:center;font-size:27px;border:1px solid #8a8e92;box-shadow:inset 0 1px #fff,0 1px 2px #0003}.avatar.dark{background:linear-gradient(#73797e,#2f353c);color:#f8f1dd;text-shadow:0 -1px #000}.avatar.light{background:linear-gradient(#fffdf3,#d0c7b2);color:#4e4a42}.player b{font-size:13px}.player small{display:block;color:#6c7a8e;font-size:10px}.player-tag{margin-left:auto;font-size:9px;color:#718096;letter-spacing:1px}.turn-light{width:8px;height:8px;border-radius:50%;background:#929ba7;box-shadow:inset 0 1px 2px #0005}.turn-light.on{background:#80b351;box-shadow:0 0 4px #749e4c}.board-stage{perspective:none;padding:0 5px 6px}.board-frame{transform:none;transition:transform .3s}#board{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;border:1px solid #4f3928}.sq{border:0;border-radius:0;position:relative;padding:0;aspect-ratio:1;display:grid;place-items:center;box-shadow:inset 0 0 1px #5c412633}.sq.last{background:#e8d287}.sq.shade.last{background:#b29a58}.sq.selected{background:#e9b759;box-shadow:inset 0 0 0 3px #9a6a2e}.sq.check{background:#c76c60}.sq.hint{box-shadow:inset 0 0 0 3px #4286c3}.sq:hover .piece{transform:translateY(-3px)}.coord{position:absolute;bottom:1px;right:3px;font-size:9px;color:#6a4f33;text-shadow:none}.coord.rank{top:1px;left:3px;bottom:auto;right:auto}.shade .coord{color:#f6e3bb}.dot{position:absolute;width:22%;height:22%;border-radius:50%;background:#34516b66;z-index:2}.dot.capture{width:90%;height:90%;border:4px solid #42648799;background:none}.control-card{padding:17px}.game-topbar{display:flex;flex-wrap:wrap;gap:8px}.menu-button{font-size:11px;flex:1;white-space:nowrap}.game-live{order:-1;width:100%;padding:0 0 15px;margin-bottom:7px;border-bottom:1px solid #c6cbd1;text-align:center}.statusline{display:flex;align-items:center;justify-content:center;gap:8px}.statusline h2{margin:0;font-size:18px;color:#4c607c}.live-dot{height:7px;width:7px;background:#6b9650;border-radius:50%}.game-live p{font-size:11px;color:#7c8796;margin:7px 0 0}.board-tools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px}.board-tools button{padding:12px 5px;font-size:11px}.board-tools .active{color:#315b8a;background:linear-gradient(#c3d3e6,#e8eff7);box-shadow:inset 0 1px 3px #65758966}.shortcut-note{font-size:10px;text-align:center;color:#8a93a0;margin:13px 0}kbd{font:10px inherit}.game-preferences{text-align:center;margin-bottom:16px}#history-toggle,.controls-arrow,.tip{display:none}.moves-panel{border:1px solid #b6bec9;border-radius:6px;overflow:hidden;background:#fff;box-shadow:inset 0 1px 3px #64718522}.moves-title{display:flex;justify-content:space-between;padding:9px 11px;background:linear-gradient(#e9edf2,#d5dce5);border-bottom:1px solid #b7c0cb}.moves-title h3{font-size:12px;margin:0}.moves-title>span{font-size:9px;color:#778499}#moves{height:175px;overflow:auto}.move-row{display:grid;grid-template-columns:30px 1fr 1fr;font-size:12px;padding:8px 10px}.move-row:nth-child(even){background:#eaf0f7}.move-row>span:first-child{color:#8b95a3}.empty{text-align:center;color:#7d8999;padding:20px 10px}.empty>span{display:block;font-size:25px;color:#8e9eb1}.empty b{font-size:12px}.empty p{font-size:10px}dialog{border:1px solid #344b69;border-radius:12px;padding:25px;max-width:360px;width:calc(100% - 32px);background:linear-gradient(#f7f8fb,#dce2eb);color:#384d68;box-shadow:inset 0 1px #fff,0 15px 70px #16223588;text-align:center}dialog::backdrop{background:#16223588}dialog h2{margin:8px 0;font-size:25px}dialog p{font-size:13px;color:#69798f}dialog button{margin-top:10px}#choices{display:flex}#choices button{width:25%;height:85px;padding:0}.result-symbol{font-size:65px}.eyebrow{font-size:10px;letter-spacing:2px}.result-score{font:32px Georgia;margin:15px}.result-secondary{display:flex;gap:8px}.result-secondary button{flex:1;font-size:11px}#result-confetti{display:none}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);padding:12px 22px;border:1px solid #1d2b40;border-radius:8px;background:linear-gradient(#61748c,#2c405e);color:white;text-shadow:0 -1px #17283e;box-shadow:0 3px 10px #0005;opacity:0;pointer-events:none;z-index:200;max-width:90%;text-align:center}#toast.show{opacity:1}.focus-mode{position:fixed;inset:0;overflow:auto;z-index:100}.focus-mode header{display:none}.in-game .arena{width:100%;max-width:min(640px,calc(100svh - 200px))}.in-game .workspace{grid-template-columns:minmax(0,min(640px,calc(100svh - 200px))) 300px}
@media(min-width:1500px){.lobby{min-height:690px}.home-board-scene{width:400px}}
@media(max-width:900px){.lobby{gap:30px;grid-template-columns:1fr 300px;min-height:570px}h1{font-size:39px}.workspace{gap:20px}.in-game .workspace{grid-template-columns:minmax(0,1fr) 260px}.control-card{padding:12px}.in-game .arena{max-width:100%}main{padding:30px 20px 0}footer{margin:25px 20px 0}}
@media(max-width:700px){header{height:65px;padding:0 18px}.brand{font-size:24px}.mark{width:38px;height:38px;font-size:31px}.preferences .button-label{display:none}.preferences button{padding:9px}.preferences button .material-symbols-rounded{margin:0}main{padding:28px 16px 0}.lobby{display:flex;flex-direction:column;gap:18px;min-height:0}.lobby-copy{width:100%}.intro::before{font-size:9px;letter-spacing:2px}h1{font-size:36px;margin:13px 0 9px}.home-description{font-size:13px}.home-board-scene{width:245px;margin:25px auto 20px}.panel{width:100%;max-width:420px;padding:0 20px 20px}.panel>label:first-of-type{margin-left:-20px;margin-right:-20px;padding:11px;font-size:16px;margin-bottom:14px}label{margin-top:16px}.panel .primary{margin-top:19px}.home-extra{margin:35px 0 25px}.chess-quote{font-size:16px}footer{font-size:9px;margin-top:20px;padding:18px 0}.workspace,.in-game .workspace{display:flex;flex-direction:column;gap:22px}.in-game main{padding:15px 10px 25px}.in-game .arena{width:100%;max-width:560px}.board-frame{padding:10px}.player{padding-bottom:10px}.player.bottom{padding-top:16px}.player small{display:none}.game-controls{width:100%;max-width:560px}.game-screen>.game-topbar{margin:0 5px 15px;align-items:center;flex-wrap:nowrap}.game-screen>.game-topbar .game-live{border:0;padding:0;margin:0;order:0;width:auto;flex:2}.game-screen>.game-topbar .game-live p{display:none}.statusline h2{font-size:14px}.game-screen>.game-topbar .menu-button{flex:0;padding:9px}.game-screen>.game-topbar #history-toggle{display:none}.menu-button .material-symbols-rounded{font-size:18px}.control-card{padding:13px}.board-tools{display:flex;gap:7px;margin:0}.board-tools button{flex:1;display:flex;flex-direction:column;gap:4px;align-items:center;padding:10px 3px}.board-tools button .material-symbols-rounded{margin:0}.shortcut-note{display:none}.game-preferences{margin:12px 0 0}#history-panel{margin-top:15px}#moves{height:150px}.game-controls .control-card #history-panel{margin-top:15px}.game-controls>.tip{display:none}.game-preferences .menu-button{padding:7px 15px;font-size:10px}.player-tag{font-size:8px}.coord{font-size:7px}.game-screen>.game-topbar .button-label{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* Modern blue room, with tactile green-stained wooden boards. */
:root{--ink:#153b61;--muted:#527797;--line:#8eabc8}
body{background:radial-gradient(ellipse at 15% 0,#398ccc 0,transparent 55%),linear-gradient(140deg,#235d98,#103963 85%);color:#eef5fd;text-shadow:none;background-attachment:fixed;position:relative;isolation:isolate}
body::before{content:'';position:fixed;inset:0;z-index:-2;background:url(room-pieces.svg) center/cover no-repeat;pointer-events:none}
body::after{content:'';position:fixed;left:-50%;right:-50%;bottom:-240px;height:420px;background:conic-gradient(#7eb7df16 25%,transparent 0 50%,#7eb7df16 0 75%,transparent 0) 0 0/160px 160px;transform:perspective(400px) rotateX(53deg);transform-origin:center top;z-index:-1;pointer-events:none;mask-image:linear-gradient(transparent,#000 55%)}
header{height:78px;max-width:1240px;margin:16px auto 0;padding:0 24px;border:1px solid #7bafd0;border-bottom-color:#153e69;border-radius:22px;background:linear-gradient(180deg,#6096c1a6,#234f7dcc);box-shadow:inset 0 1px #d9efff55,0 5px 10px #09274940}
.brand{font-size:30px;letter-spacing:-1px;text-shadow:0 1px 2px #153d64}.mark{border-color:#7be4d2;border-radius:10px;background:linear-gradient(#adf4ee,#44cfb0 60%,#21ad8a);color:#103e39;box-shadow:inset 0 1px #e4fff9,0 2px 4px #0c355f66;font-size:37px;text-shadow:0 1px #91e7cd}
.preferences button{border-radius:24px;background:linear-gradient(#467dae,#285680);border:1px solid #123b61;padding:10px 16px;box-shadow:inset 0 1px #b9dff955;color:#f4f9ff;text-shadow:none}
main{max-width:1240px;padding:35px 24px 0}.lobby{grid-template-columns:minmax(0,1fr) 400px;gap:64px;min-height:650px}.intro::before{display:none}.intro{text-align:center}.lobby h1{font-size:clamp(36px,4.6vw,64px);white-space:nowrap;letter-spacing:-2px;color:#f3f7ff;text-shadow:0 3px 2px #0b305c75;margin:0 0 13px}.chess-gradient{color:#67e2c9;background:linear-gradient(#a4f3df,#32c9ab);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.home-description{font-size:16px;color:#d1e5fa;max-width:none}.home-board-scene{width:440px;max-width:91%;margin:24px auto 5px;perspective:none}.home-board-frame{transform:none;padding:14px;border-radius:19px}.home-board-frame,.board-frame{background:repeating-linear-gradient(3deg,#244c40 0,#315d4c 3px,#366250 5px,#2a5044 7px);border:1px solid #618f7e;box-shadow:inset 0 0 0 2px #87ae9166,0 6px 0 #173d33,0 12px 19px #05213b55}.demo-squares,#board{overflow:hidden;border-radius:5px;border-color:#2b5542}.demo-square,.sq{background:repeating-linear-gradient(4deg,#cad8b5 0,#c4d2af 2px,#c8d5b2 5px,#bfceaa 7px)}.demo-square.shade,.sq.shade{background:repeating-linear-gradient(4deg,#56886b 0,#518367 2px,#57876c 5px,#4c7c61 7px)}.sq.last{background:#b8ca85}.sq.shade.last{background:#799653}.sq.selected{background:#d2cd8d;box-shadow:inset 0 0 0 3px #e2d48c}.coord{color:#3b6349}.shade .coord{color:#d7e6c0}.piece{filter:drop-shadow(2px 4px 1px #153b3755)}
.panel,.control-card{background:linear-gradient(130deg,#c0d9eccc,#b6cfe8ed);border:1px solid #c4e3fa;border-radius:23px;box-shadow:inset 0 1px #f1faff77,0 5px 11px #092d5145;color:#173d62;text-shadow:none}.panel{padding:23px 24px}.panel>label:first-of-type{margin:0 0 14px;padding:0;background:none;border:0;font-size:19px;text-align:left;color:#153756}.panel label{font-size:15px;color:#16395b;text-shadow:none;margin-top:22px}.panel .color-choice{padding-top:1px;border-top:1px solid #83a7c5;margin-top:21px}.segmented{border-color:#7b9fc1;border-radius:9px;box-shadow:0 2px 3px #4c719322}.segmented button{padding:14px 5px;background:linear-gradient(#eef6fc,#bad0e5);color:#315c82;font-size:14px;text-shadow:none;border-color:#88accb;box-shadow:inset 0 1px #ffffff80}.segmented .selected{background:linear-gradient(#2b91e8,#1155b5);color:white;text-shadow:none;box-shadow:inset 0 1px #7dc2fc}.color-note{color:#476e91;font-size:12px;margin-top:9px}.panel label span{color:#4d7397;font-size:12px}.primary{background:linear-gradient(#2bc087,#089267);border-color:#076e52;box-shadow:inset 0 1px #8ce5b366,0 2px 3px #214e6240;text-shadow:0 1px #08755755;border-radius:9px;padding:15px;font-size:22px}.panel .primary{margin-top:21px}.save-note{color:#4a7094;font-size:11px}.fresh-button,.menu-button,.board-tools button,dialog button{background:linear-gradient(#e7f1fa,#b5cde3);border-color:#88a8c7;color:#285479;text-shadow:none;box-shadow:inset 0 1px #ffffff80,0 1px 2px #385d7c22}.home-extra{margin-top:20px}.chess-quote{color:#c4d9ec}.chess-quote::after{color:#9ebedc}footer{color:#acc7df;border-color:#5c84a5;box-shadow:none}.player{color:#ecf5ff}.player small,.player-tag{color:#b3cee8}.statusline h2{color:#1b4268}.game-live p{color:#4e7396}.game-live{border-color:#88aac9}.shortcut-note{color:#4f7395}.moves-panel{border-color:#8aacc9;background:#e2edf6}.moves-title{background:linear-gradient(#cee1f0,#b3cce1);border-color:#93b2cc;color:#2c557a}.moves-title>span{color:#537797}.move-row{color:#254e73}.move-row:nth-child(even){background:#caddeb}.empty{color:#577c9c}.empty>span{color:#6e94b4}.board-tools .active{background:linear-gradient(#5c99cd,#3274af);color:#fff;box-shadow:inset 0 1px #9ac9ec}.in-game header{height:67px}.in-game main{padding-top:22px}dialog{background:linear-gradient(#d2e7f7,#aac8e2);border-color:#779fc0;border-radius:19px;color:#173e62}dialog p{color:#416b90}.result-secondary button{background:linear-gradient(#e7f1fa,#b5cde3)}
@media(min-width:1500px){.lobby{min-height:690px}.home-board-scene{width:470px}}
@media(max-width:1050px) and (min-width:701px){.lobby{grid-template-columns:minmax(0,1fr) 330px;gap:30px;min-height:600px}.lobby h1{font-size:42px;white-space:normal}.home-description{font-size:14px}.panel{padding:21px}.segmented button{font-size:12px}}
@media(max-width:700px){header{margin:10px 12px 0;padding:0 13px;height:62px;border-radius:15px}.brand{font-size:24px}.mark{width:37px;height:37px;font-size:30px}.preferences button{padding:9px}.lobby{gap:24px;min-height:0}.lobby h1{font-size:36px;white-space:normal;letter-spacing:-1.4px;margin:0 0 10px}.home-description{font-size:13px;max-width:300px;margin:auto}main{padding:28px 16px 0}.home-board-scene{width:285px;margin:22px auto 0;max-width:88%}.home-board-frame{padding:10px;border-radius:13px}.panel{padding:21px;max-width:430px;border-radius:19px}.panel>label:first-of-type{font-size:18px;margin:0 0 14px;padding:0}.panel label{font-size:14px;margin-top:19px}.segmented button{font-size:13px;padding:12px 4px}.primary{font-size:20px;padding:13px}.panel .color-choice{margin-top:19px}.home-extra{margin-top:30px}.in-game header{height:58px}.in-game main{padding-top:15px}.control-card{border-radius:15px}.game-screen>.game-topbar .statusline h2{color:#edf6ff}.game-screen>.game-topbar .live-dot{background:#75d5b3}.board-frame{border-radius:8px}.player small{color:#b5d0e7}body::before{opacity:.45}}
/* Compact lobby and a full-height, board-first play screen. */
.lobby{min-height:560px;gap:50px;grid-template-columns:minmax(0,1fr) 360px}.home-board-scene{width:365px;margin-top:21px}.panel{padding:18px 21px}.panel>label:first-of-type{font-size:18px;margin-bottom:11px}.panel label{margin-top:17px;font-size:14px}.panel .color-choice{margin-top:16px}.segmented button{padding:11px 4px;font-size:13px}.panel .primary{margin-top:17px;padding:12px}.save-note{margin-top:11px}.color-note{margin-bottom:0}.home-extra{margin:15px 0}footer{margin-top:15px;padding:15px 0}.in-game header{display:none}
.home-board-frame{animation:board-float 6s ease-in-out infinite}.demo-white-pawn{animation:demo-white-pawn 12s ease-in-out infinite}.demo-black-pawn{animation:demo-black-pawn 12s ease-in-out infinite}.demo-white-knight{animation:demo-white-knight 12s ease-in-out infinite}.demo-black-knight{animation:demo-black-knight 12s ease-in-out infinite}
@keyframes board-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-6px) rotate(1deg)}}
@keyframes demo-white-pawn{0%,9%,88%,100%{transform:translateY(0)}17%,80%{transform:translateY(-200%)}}
@keyframes demo-black-pawn{0%,25%,88%,100%{transform:translateY(0)}33%,80%{transform:translateY(200%)}}
@keyframes demo-white-knight{0%,41%,88%,100%{transform:translate(0,0)}49%,80%{transform:translate(-100%,-200%)}}
@keyframes demo-black-knight{0%,57%,88%,100%{transform:translate(0,0)}65%,80%{transform:translate(100%,200%)}}
@media(min-width:701px){body.in-game{height:100dvh;overflow:hidden}.in-game main{height:100dvh;padding:14px 22px;max-width:1500px}.in-game .game-screen{height:100%}.in-game .workspace{height:100%;display:grid;grid-template-columns:minmax(0,min(calc(100dvh - 140px),calc(100vw - 390px))) 300px;gap:30px;align-items:center;justify-content:center}.in-game .arena{width:100%;max-width:none}.in-game .board-frame{padding:11px;transform:none}.in-game .board-stage{padding:0 4px 7px}.in-game .player{height:38px;padding:0 10px 6px}.in-game .player.bottom{height:38px;padding:7px 10px 0}.in-game .player small{display:none}.in-game .avatar{height:29px;width:29px;font-size:23px}.in-game .game-controls{height:min(620px,calc(100dvh - 28px));min-height:0;overflow:hidden}.in-game .mobile-controls-shell,.in-game .control-card{height:100%;min-height:0}.in-game .control-card{display:flex;flex-direction:column;padding:16px;overflow:hidden}.in-game .game-topbar,.in-game .board-tools,.in-game .shortcut-note,.in-game .game-preferences{flex-shrink:0}.in-game .moves-panel{display:flex;flex:1;min-height:70px;flex-direction:column;margin-top:0}.in-game .moves-title{flex-shrink:0}.in-game #moves{height:auto;min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain}.in-game .game-live{padding-bottom:12px}.in-game .board-tools{margin-top:13px}.in-game .game-preferences{margin-bottom:13px}}
@media(max-width:700px){.lobby{display:flex;gap:18px;min-height:0}.home-board-scene{width:255px;max-width:85%;margin-top:22px}.in-menu main{padding-top:25px}.in-menu .panel{display:none}.in-menu.setup-open .panel{display:block;animation:setup-reveal .22s ease-out;width:100%}.in-menu #open-setup{display:flex;max-width:340px;width:100%;margin:6px auto 4px;font-size:20px;padding:14px}.in-menu.setup-open #open-setup{display:none}.mobile-setup-back{display:flex;align-items:center;justify-content:center;float:right;padding:5px;margin:0 0 9px 8px;border:1px solid #7e9db8;background:#d6e7f3;border-radius:50%;width:30px;height:30px;color:#325b7a}.mobile-setup-back .material-symbols-rounded{margin:0}.mobile-setup-back .button-label{display:none}.panel>label:first-of-type{padding-top:4px}.panel{padding:18px}.lobby h1{font-size:34px}.home-extra{margin:25px 0 10px}.chess-quote{font-size:15px}.chess-quote::after{font-size:10px}footer{font-size:9px;padding:13px 0;margin-top:18px}.in-game{height:100dvh;overflow:hidden}.in-game main{padding:10px 8px 95px;height:100dvh}.in-game .game-screen{height:100%;display:flex;flex-direction:column;justify-content:center}.game-screen>.game-live{flex-shrink:0;width:100%;padding:0 8px 10px;margin:0;border:0}.game-screen>.game-live h2{color:#f1f7ff;font-size:16px}.game-screen>.game-live p{display:none}.in-game .workspace{display:block;width:100%;height:auto}.in-game .arena{width:min(100%,calc(100dvh - 205px));max-width:560px;margin:auto}.in-game .board-frame{padding:9px;transform:none}.in-game .player{height:32px;padding:0 10px 6px}.in-game .player.bottom{height:32px;padding:9px 10px 0}.in-game .avatar{height:25px;width:25px;font-size:20px}.in-game .board-stage{padding:0 3px 5px}.in-game .game-controls{position:static;margin:0;max-width:none}.mobile-controls-shell{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;gap:4px;padding:8px 6px calc(8px + env(safe-area-inset-bottom));background:linear-gradient(#3777ac,#164774);border-top:1px solid #80abc9;box-shadow:0 -3px 12px #082c4c55;z-index:30}.in-game .control-card{display:flex;flex:1;min-width:0;align-items:center;gap:8px;overflow-x:auto;overflow-y:hidden;border:0;border-radius:0;background:none;box-shadow:none;padding:1px 0;scrollbar-width:none;scroll-behavior:smooth;overscroll-behavior-x:contain}.control-card::-webkit-scrollbar{display:none}.control-card .game-topbar,.control-card .board-tools,.control-card .game-preferences{display:contents}.control-card .shortcut-note{display:none}.control-card .menu-button,.control-card .board-tools button{flex:0 0 79px;min-width:79px;height:57px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:7px 4px;margin:0;font-size:10px;border-radius:8px;background:linear-gradient(#5b90bb,#2c618f);color:#eff7ff;border-color:#1a466c;box-shadow:inset 0 1px #bedcfb44;text-shadow:none}.control-card .menu-button .material-symbols-rounded,.control-card .board-tools button .material-symbols-rounded{margin:0;font-size:22px}.control-card .board-tools .active{background:linear-gradient(#76b2d7,#3a85b7)}#history-toggle{display:flex}.controls-arrow{display:grid;place-items:center;flex:0 0 25px;width:25px;height:49px;border:1px solid #224b70;border-radius:6px;padding:0;background:#204e79;color:#edf8ff}.controls-arrow svg{width:24px;height:24px}.controls-arrow:disabled{opacity:.3}.game-controls>#history-panel{display:none;position:fixed;bottom:calc(88px + env(safe-area-inset-bottom));left:12px;right:12px;z-index:29;margin:0;background:#dceaf5;border:1px solid #94bbd8;box-shadow:0 3px 15px #09294766;border-radius:12px}.show-history .game-controls>#history-panel{display:block}#moves{height:min(220px,35dvh);overflow:auto}.game-controls>.tip{display:none}}
@keyframes setup-reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.home-board-frame,.demo-piece{animation:none!important}}
/* Stationary demo board and a hand-drawn heading accent. */
.home-board-frame{animation:none;transform:none}
.chess-gradient{position:relative;display:inline-block;color:#f3f7ff;background:none;-webkit-text-fill-color:currentColor;text-shadow:none;padding-bottom:5px}
.chess-gradient::after{content:'';position:absolute;left:-3%;right:-4%;bottom:-4px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 18' preserveAspectRatio='none'%3E%3Cpath d='M4 10 Q61 0 115 8 T216 6 M26 16 Q111 9 192 14' fill='none' stroke='%2369dfc4' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;pointer-events:none}
@media(min-width:701px){.in-game .game-controls{height:min(475px,calc(100dvh - 28px))}.in-game .control-card{padding:13px}.in-game .game-live{padding-bottom:9px;margin-bottom:4px}.in-game .board-tools{margin-top:10px;gap:7px}.in-game .board-tools button{padding:9px 5px}.in-game .shortcut-note{margin:9px 0}.in-game .game-preferences{margin-bottom:10px}.in-game .moves-panel{min-height:65px}.in-game .moves-title{padding:7px 10px}}
@media(max-width:700px){.chess-gradient::after{height:10px;bottom:-2px}}
/* Bring the home content closer to its compact header. */
.in-menu header{height:66px;margin-top:10px;padding:0 19px;border-radius:18px}
.in-menu main{padding-top:18px}
.in-menu .lobby{min-height:0;align-items:start}
.in-menu .lobby-copy{padding-top:4px}
.in-menu .panel{margin-top:5px}
@media(min-width:701px){.in-menu .lobby{padding-top:8px}}
@media(max-width:700px){.in-menu header{height:56px;margin-top:8px;padding:0 11px;border-radius:14px}.in-menu main{padding-top:17px}.in-menu .lobby-copy{padding-top:0}.in-menu .panel{margin-top:0}}
/* Balance the desktop lobby while leaving breathing room before the quote. */
@media(min-width:701px){
 .in-menu .lobby-copy{position:relative;left:-14px}
 .in-menu .panel{margin-top:22px}
 .in-menu .home-extra{margin-top:48px;margin-bottom:23px}
 .in-menu .home-board-scene{width:clamp(235px,calc(100dvh - 290px),365px)}
}
@media(min-width:1000px){.in-menu .lobby-copy{left:-28px}}

/* Keep the view toggle authoritative over responsive board layout rules. */
body.in-game .board-stage{perspective:none}
body.in-game .board-frame{transform-origin:50% 75%;transition:transform .4s ease,box-shadow .4s ease}
@media(prefers-reduced-motion:reduce){body.in-game .board-frame{transition:none}}

/* Rotate the board around its center during a side change. */
body.in-game .board-frame{transform-origin:50% 50%}
.board-flipping #board{pointer-events:none}
.board-flipping .board-frame{will-change:transform}
.board-flipping .piece,.board-flipping .coord{transform-origin:center}

/* Keep the phone footer at the bottom of the full home page. */
@media(max-width:700px){
 body.in-menu{display:flex;flex-direction:column;min-height:100svh;min-height:100dvh}
 .in-menu header{flex-shrink:0}
 .in-menu main{flex:1 0 auto;width:100%;margin:0 auto}
 .in-menu footer{flex-shrink:0;position:relative;width:calc(100% - 40px);margin:22px 20px 0;padding-bottom:calc(15px + env(safe-area-inset-bottom))}
}
@media(max-width:700px){
 .in-menu main{display:flex;flex-direction:column}
 .in-menu .lobby{flex-shrink:0}
 .in-menu #open-setup{margin-top:20px}
 .in-menu .home-extra{margin-top:auto;margin-bottom:0;padding-top:26px;padding-bottom:0}
 .in-menu .chess-quote blockquote::before{content:'“';margin-right:3px}
 .in-menu .chess-quote blockquote::after{content:'”';margin-left:3px}
 .in-menu footer{margin-top:11px;padding-top:12px}
}
@media(max-width:700px){
 .in-menu.setup-open #setup-panel{margin-top:20px}
}

@media(max-width:700px){.in-menu main{padding-top:27px}}
/* Shared information pages and footer. */
.site-footer{display:block;width:calc(100% - 48px);max-width:1192px;margin:24px auto 0;padding:18px 0 16px;letter-spacing:0;font-size:11px}
.site-footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 23px;margin-bottom:15px}
.site-footer nav a,.site-footer nav button{color:#d4e5f5;font:inherit;text-decoration:none;background:none;border:0;padding:3px 0;cursor:pointer}
.site-footer nav a:hover,.site-footer nav button:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.site-footer [aria-current=page]{color:#83e2cb;text-decoration:underline;text-underline-offset:4px}
.footer-bottom{display:flex;justify-content:space-between;color:#a7c6df;gap:15px;font-size:10px}.footer-bottom p{margin:0}
.info-page{min-height:100dvh;display:flex;flex-direction:column}.info-page header{width:calc(100% - 48px);flex-shrink:0}
.back-to-game{color:#e5f3ff;text-decoration:none;font-size:13px;padding:9px 14px;border:1px solid #83b0d1;border-radius:20px;background:#21547c77}.back-to-game:hover{background:#477fa9}
.info-main{width:100%;max-width:950px;padding:30px 24px 0;flex:1;margin:0 auto}
.page-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:0 0 21px}.page-nav a{padding:8px 14px;border:1px solid #84acca66;border-radius:20px;text-decoration:none;color:#c7dff2;font-size:12px}.page-nav a[aria-current=page]{background:#b8d6eb;color:#214d73;border-color:#c1e1f5;box-shadow:inset 0 1px #ffffff66}
.info-card{background:linear-gradient(130deg,#d9eaf5f5,#bdd6ebf5);border:1px solid #c4e3fa;border-radius:23px;box-shadow:inset 0 1px #f1faff77,0 5px 11px #092d5145;padding:40px 48px;color:#20486d;text-shadow:none}
.page-kicker{display:block;font-size:10px;letter-spacing:2px;font-weight:700;color:#416f93}.info-card h1{font-size:39px;color:#173e63;letter-spacing:-1.3px;text-shadow:none;margin:9px 0 13px}.page-intro{border-bottom:1px solid #9fbdd3;padding-bottom:24px;margin-bottom:26px}.page-intro p{color:#4e7392;font-size:14px;line-height:1.75;margin:8px 0 0}.page-intro .page-tagline{font-size:20px;color:#214d71;font-weight:600;line-height:1.4}
.page-body{font-size:14px;line-height:1.85}.page-body h2{font-size:19px;color:#193f60;margin:27px 0 8px;line-height:1.4}.page-body>h2:first-child{margin-top:0}.page-body p{margin:0 0 15px}.page-body a{color:#155f9b;text-underline-offset:3px}.updated{font-size:11px;color:#62829b}.return-link{display:inline-block;margin-top:24px;padding-top:20px;border-top:1px solid #9fbdd3;width:100%;text-decoration:none;color:#205a84;font-weight:600;font-size:13px}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:24px 0}.info-grid section,.contact-status,.page-note{background:#ecf6fc66;border:1px solid #9ebed5;border-radius:13px;padding:20px}.info-grid h2{margin:9px 0 8px}.info-grid p{margin:0;font-size:13px}.info-icon{font-size:31px;line-height:1.2;color:#2b7590}.contact-status{text-align:center}.contact-status h2{margin:8px 0}.contact-status p{margin:10px 0}.page-note{font-size:13px;margin-top:22px}.page-note p{margin:5px 0 10px}
.guide-button{display:inline-block;border:1px solid #0b765c;border-radius:8px;background:linear-gradient(#2ebf8c,#078b68);color:white;padding:11px 18px;font-size:13px;font-weight:600;text-shadow:none;cursor:pointer}
#how-to-play{width:min(660px,calc(100% - 28px));max-width:660px;max-height:calc(100dvh - 32px);padding:0;overflow:hidden;text-align:left;border-radius:20px;background:linear-gradient(#d4e8f7,#b7d2e8);color:#244d70}
#how-to-play[open]{display:flex;flex-direction:column}#how-to-play::backdrop{background:#08243cca;backdrop-filter:blur(3px)}.guide-top{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:23px 26px 17px;border-bottom:1px solid #9dbbd3;flex-shrink:0}.guide-top h2{font-size:27px;margin:5px 0 0;color:#153d61}.guide-close{border:1px solid #8daec7;border-radius:50%;background:#e2eff9;color:#315a7a;width:34px;height:34px;font-size:25px;padding:0;margin:0;line-height:1}.guide-scroll{overflow-y:auto;overscroll-behavior:contain;min-height:0;padding:5px 26px 20px;font-size:13px;line-height:1.8}.guide-scroll h3{font-size:16px;margin:23px 0 8px;color:#193f61}.guide-scroll p{font-size:13px;color:#355b7b;margin:8px 0 13px;line-height:1.8}.guide-scroll .guide-lead{font-size:16px;color:#366685}.piece-guide{border:1px solid #9dbbd3;border-radius:10px;overflow:hidden}.piece-guide>div{display:grid;grid-template-columns:100px 1fr;gap:12px;padding:10px 12px;background:#e8f3fb66}.piece-guide>div:nth-child(even){background:#b5d0e666}.piece-guide b{font-size:14px}.guide-bottom{padding:15px 26px;border-top:1px solid #9dbbd3;flex-shrink:0}.guide-bottom button{width:100%;margin:0}
@media(max-width:700px){.in-menu .site-footer,.info-page .site-footer{width:calc(100% - 40px);margin:15px 20px 0;padding-top:14px}.site-footer nav{gap:6px 17px;margin-bottom:12px;font-size:11px}.footer-bottom{font-size:9px}.info-page header{width:calc(100% - 24px);height:60px;margin:8px 12px 0;padding:0 12px;border-radius:14px}.info-page .brand{font-size:21px;gap:8px}.back-to-game{font-size:11px;padding:7px 9px}.info-main{padding:23px 14px 0}.page-nav{gap:6px;margin-bottom:17px}.page-nav a{font-size:10px;padding:7px 10px}.info-card{padding:25px 21px;border-radius:18px}.info-card h1{font-size:31px}.page-intro .page-tagline{font-size:18px}.page-intro p,.page-body{font-size:13px}.page-body h2{font-size:18px}.page-intro{padding-bottom:19px;margin-bottom:21px}.info-grid{grid-template-columns:1fr;gap:12px}.info-grid section,.contact-status,.page-note{padding:16px}.guide-top{padding:19px 20px 14px}.guide-scroll{padding:4px 20px 18px}.guide-bottom{padding:13px 20px}.piece-guide>div{grid-template-columns:83px 1fr;gap:7px;padding:9px}.piece-guide b{font-size:13px}.piece-guide span{font-size:12px}}

@media(min-width:701px){.in-game .board-tools{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Phone composition keeps the edge graphics inside the narrow viewport. */
@media(max-width:700px){body::before{background-image:url(room-pieces-mobile.svg);background-size:100% 100%;background-position:center;opacity:1}}



/* In shared-phone games, face every piece toward the player whose turn it is. */
@media(max-width:700px){
 body.in-game.shared-turn-view .piece-art{transform-box:view-box;transform-origin:50% 50%;transform:rotate(0deg)}
 body.in-game.shared-turn-view.turn-facing-away .piece-art{transform:rotate(180deg)}
}
/* Safari versions without native dialog support. */
dialog.dialog-fallback:not([open]){display:none}
dialog.dialog-fallback[open]{position:fixed;top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);margin:0;z-index:1001;max-height:calc(100vh - 32px);overflow:auto;box-shadow:0 0 0 100vmax #08243ccc,0 15px 70px #0006}
body.fallback-modal-open{overflow:hidden}
#how-to-play.dialog-fallback[open]{max-height:calc(100vh - 32px)}

.brand-icon{display:block;width:46px;height:46px;object-fit:contain;flex-shrink:0}
@media(max-width:700px){.brand-icon{width:37px;height:37px}.info-page .brand-icon{width:34px;height:34px}}