:root{--bg: #ede6d6;--board-light: #f0d9b5;--board-dark: #b58863;--panel: #b58863;--text-light: #fffdd0;--text-dark: #2f2520;--header-start: #a67954;--header-mid: #b58863;--header-end: #a67954;--header-shadow: rgba(70, 45, 25, .2);--surface-shadow: rgba(60, 35, 17, .22);--theme-btn-bg: #f4e9d4;--theme-btn-text: #4a3223;--theme-btn-border: #9d6f4a}[data-theme=dark]{--bg: #101722;--board-light: #58799a;--board-dark: #2a3f58;--panel: #4b5663;--text-light: #f5ead8;--text-dark: #e5e8ee;--header-start: #2f3742;--header-mid: #3d4754;--header-end: #2f3742;--header-shadow: rgba(8, 10, 12, .45);--surface-shadow: rgba(8, 10, 12, .45);--theme-btn-bg: #d8b17b;--theme-btn-text: #1d232b;--theme-btn-border: #f1d2a9}[data-theme=dark] body{background:var(--bg)}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 10% 10%,#f6efdf 0%,transparent 45%),radial-gradient(circle at 90% 90%,#e5dbc7 0%,transparent 35%),var(--bg);color:var(--text-dark);font-family:Avenir Next,Segoe UI,sans-serif}header{position:relative;display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;min-height:76px;background:linear-gradient(90deg,var(--header-start),var(--header-mid) 45%,var(--header-end));box-shadow:0 4px 20px var(--header-shadow)}.headerTitle{display:flex;align-items:center;justify-content:center;gap:.5rem}.headerTitle>span{color:var(--text-light);font-weight:600;font-size:clamp(1.3rem,1rem + .8vw,1.8rem);letter-spacing:.02em}.headerTitle>img{width:clamp(42px,3vw,52px);height:clamp(42px,3vw,52px)}.themeButton{position:absolute;right:18px;top:50%;transform:translateY(-50%);border:2px solid var(--theme-btn-border);border-radius:999px;background-color:var(--theme-btn-bg);color:var(--theme-btn-text);font-weight:700;font-size:.85rem;padding:6px 12px;cursor:pointer}.themeButton:hover{filter:brightness(1.06)}main.gameLayout{width:min(1120px,100% - 32px);margin:12px auto 0;display:grid;grid-template-columns:188px minmax(520px,620px) 188px;min-height:calc(100vh - 88px);align-items:center;justify-content:center;align-content:center;gap:18px}.centerStage{display:flex;flex-direction:column;align-items:center;gap:8px;grid-column:2;width:min(72vmin,620px)}.sideRail{display:flex;flex-direction:column;align-items:center;gap:20px}.leftRail{grid-column:1}.rightRail{grid-column:3}.boardElement{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));width:min(100%,calc(100vh - 185px));aspect-ratio:1;border:10px solid #9d6f4a;border-radius:6px;overflow:hidden;box-shadow:0 20px 42px #3a251638,inset 0 0 0 1px #fffdd033;background-color:var(--board-light)}.squareElement{position:relative;width:100%;aspect-ratio:1;margin:0;padding:0}.pieceImg{position:absolute;width:100%;height:100%;left:0;top:0}.smallPieceImg{width:19px;height:19px;margin-right:-6px}.lightCircle{position:absolute;width:28%;height:28%;border-radius:50%;left:36%;top:36%;background-color:#3f3f3f;opacity:.48}.sqRowLabel,.sqColLabel{position:absolute;margin:0;font-size:clamp(.62rem,.3vw + .48rem,.75rem);font-weight:600}.sqRowLabel{left:4px;top:3px}.sqColLabel{right:4px;bottom:3px}.mateLabel{position:absolute;right:8px;top:4px;width:20px;height:20px;border-radius:50%;color:#e63946;font-weight:700;font-size:14px;text-align:center;line-height:20px}.movePanel,.replayPanel,.turnDisplay,.flipElement,.restartButton{width:100%;max-width:220px}.movePanel{height:330px;display:flex;flex-direction:column;align-items:center;background-color:var(--panel);border-radius:12px;box-shadow:0 10px 24px var(--surface-shadow);color:#fff;overflow:auto}.movePanel>span{font-weight:700;font-size:1.4rem;padding-top:18px}.moveTexts{display:grid;grid-template-columns:repeat(3,auto);width:86%;padding-bottom:10px}.moveTexts>p{margin:0;padding:6px 4px;white-space:normal}.replayPanel{height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.replayButtons{display:flex;align-items:center;justify-content:center;width:150px;height:70px;border-radius:20px;background-color:var(--panel);font-size:2rem;color:#fff}.replayButtons>button{all:unset;width:58px;height:58px;text-align:center;cursor:pointer}.replayButtons>span{font-weight:300}.flipText,.replayText{color:var(--board-dark);font-weight:700}.turnDisplay{min-height:86px;display:flex;align-items:center;justify-content:center;gap:10px;background-color:var(--panel);border-radius:12px;box-shadow:0 10px 24px var(--surface-shadow);padding:0 10px}.turnDisplay>span{font-weight:600}.turnSq{width:44px;height:44px;border-radius:12px}.flipElement{min-height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center}.flipButton{width:80px;height:40px;border:3px solid var(--board-dark);border-radius:40px;background-color:#fff;position:relative;cursor:pointer;transition:background-color .3s ease}.flipButton.on{background-color:var(--text-light)}.flipCircle{width:30px;height:30px;border-radius:50%;position:absolute;top:2px;left:3px;background-color:#d6b588;transition:left .3s ease}.flipButton.on .flipCircle{left:42px;background-color:var(--board-dark)}.restartButton{display:flex;justify-content:center}.restartButton button{all:unset;width:130px;padding:8px 10px;text-align:center;border-radius:8px;background-color:var(--panel);color:#fff;font-weight:700;cursor:pointer}.restartButton button:hover,.replayButtons>button:hover,.winningMessage button:hover,.startGame button:hover,.chooseColor button:hover{filter:brightness(1.08)}.howToPlay{width:100vw;margin-left:calc(50% - 50vw);text-align:center;margin-top:4px}.howToPlay>a{color:var(--board-dark);text-decoration:none;font-weight:600}.playerTagRow{width:100%;display:flex;align-items:center}.whiteTag,.blackTag{width:100%;min-height:38px;display:flex;align-items:center;padding:4px 8px;border-radius:8px;background-color:var(--panel)}.whiteSq,.blackSq{width:26px;height:26px;border-radius:8px;margin:0 9px 0 4px}.whiteTag>span,.blackTag>span{margin-right:8px;font-weight:600}.winningMessage,.startGame,.chooseColor{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#000c;color:var(--board-light);font-weight:600;font-size:clamp(2rem,2.2vw + 1.2rem,4.4rem);text-align:center;z-index:20}.winningMessage button,.startGame button,.chooseColor button{all:unset;margin-top:10px;min-width:220px;padding:8px 14px;border-radius:8px;background-color:var(--panel);color:var(--text-light);font-size:clamp(1.05rem,.9vw + .85rem,1.8rem);cursor:pointer}[data-theme=dark] .movePanel,[data-theme=dark] .turnDisplay,[data-theme=dark] .replayButtons,[data-theme=dark] .whiteTag,[data-theme=dark] .blackTag,[data-theme=dark] .restartButton button{color:var(--text-light)}[data-theme=dark] .boardElement{border-color:#335d86;box-shadow:0 16px 36px #080e1a8c,inset 0 0 0 1px #c6dcf629}[data-theme=dark] .flipButton{background-color:#dbe5f2;border-color:#3f6691}[data-theme=dark] .flipCircle{background-color:#7ea0c5}[data-theme=dark] .flipButton.on{background-color:#1f3750}[data-theme=dark] .flipButton.on .flipCircle{background-color:#9dc4ef}[data-theme=dark] .flipText{color:#8fb2d9}@media (max-width: 1180px){main.gameLayout{width:min(1040px,100% - 24px);grid-template-columns:170px minmax(0,1fr) 170px;gap:12px}}@media (max-width: 640px){.themeButton{right:10px;font-size:.75rem;padding:5px 9px}.headerTitle>span{font-size:1.3rem}}@media (max-width: 1023px){main.gameLayout{width:min(96vw,700px);margin:12px auto 0;grid-template-columns:1fr;min-height:auto;align-content:start;gap:10px}.centerStage,.sideRail{grid-column:1;width:min(94vw,620px)}.sideRail{gap:10px}.boardElement,.playerTagRow,.howToPlay{width:min(94vw,620px)}.howToPlay{margin-left:0}}