.chess-page { min-height:100vh; }
.chess-main { padding:140px 0 70px; width:min(1180px,calc(100% - 32px)); }
.chess-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:38px; position:relative; }
.chess-heading h1 { font-size:clamp(48px,7vw,92px); margin:14px 0 22px; }
.chess-heading p { color:#9baabb; margin:0; font-size:15px; }
.chess-head-decor { color:rgba(255,255,255,.09); font-family:serif; font-size:35px; font-weight:bold; line-height:1.1; letter-spacing:.3em; }
.chess-layout { display:grid; grid-template-columns:minmax(0,660px) minmax(280px,1fr); align-items:start; gap:24px; }
.chess-panel { border-radius:28px; padding:20px; }
.player-line { height:58px; display:flex; align-items:center; gap:12px; }
.player-avatar { display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--line); border-radius:12px; font-size:12px; font-weight:700; }
.player-avatar.ai { color:#7fdad1; background:rgba(84,244,218,.09); }.player-avatar.human { color:#ffbdad; background:rgba(255,105,105,.12); }
.player-line strong { display:block; font-size:13px; }.player-line small { display:block; margin-top:3px; font-size:10px; color:#8391a2; }
.player-status { margin-left:auto; color:#8796a8; font-size:10px; letter-spacing:.12em; }.player-status.active { color:var(--cyan); }
.board-wrap { padding:18px 7px; border:1px solid rgba(255,255,255,.1); border-radius:16px; background:radial-gradient(circle at 50% 50%,rgba(140,196,255,.07),transparent 70%),rgba(2,8,17,.4); }
.chess-board { position:relative; width:min(100%,550px); aspect-ratio:9 / 10; margin:auto; overflow:visible; touch-action:manipulation; }
.board-line { position:absolute; background:rgba(148,202,202,.32); pointer-events:none; }
.board-line.h { height:1px; left:5.5556%; width:88.8888%; }
.board-line.v { width:1px; top:5%; height:90%; }
.board-line.river-gap { top:5%; height:40%; }.board-line.river-bottom { top:55%; height:40%; }
.board-diagonal { position:absolute; height:1px; background:rgba(148,202,202,.32); transform-origin:left center; pointer-events:none; }
.river-label { position:absolute; top:50%; transform:translateY(-50%); width:100%; display:flex; justify-content:space-around; color:rgba(171,231,222,.35); font-family:serif; font-size:clamp(15px,3vw,29px); letter-spacing:.25em; pointer-events:none; }
.chess-cell { position:absolute; width:11.1111%; height:10%; transform:translate(-50%,-50%); border:0; background:transparent; padding:0; cursor:pointer; z-index:2; display:grid; place-items:center; }
.chess-cell:focus-visible { outline:2px solid var(--cyan); border-radius:50%; }
.chess-piece { width:83%; height:83%; border-radius:50%; display:grid; place-items:center; font-family:"Noto Serif SC","Songti SC",serif; font-size:clamp(19px,4vw,30px); font-weight:800; user-select:none; box-shadow:0 5px 12px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.25); transition:transform .15s,box-shadow .15s; }
.chess-piece.red { color:#e5a99d; border:2px solid #a65c54; background:radial-gradient(circle at 35% 25%,#633239,#291a25 72%); }
.chess-piece.black { color:#a7d9d0; border:2px solid #5d9590; background:radial-gradient(circle at 35% 25%,#2b585b,#13262e 72%); }
.chess-cell:hover .chess-piece,.chess-cell.selected .chess-piece { transform:translateY(-3px) scale(1.08); box-shadow:0 0 0 4px rgba(102,246,210,.13),0 0 26px rgba(99,246,211,.36),0 8px 16px #0008; }
.chess-cell.legal:before { content:""; width:13px; height:13px; border-radius:50%; background:var(--cyan); box-shadow:0 0 14px var(--cyan); opacity:.8; }
.chess-cell.legal:has(.chess-piece):before { position:absolute; width:86%; height:86%; background:transparent; border:3px solid var(--cyan); }
.chess-cell.last .chess-piece { box-shadow:0 0 0 3px rgba(255,209,118,.45),0 5px 14px #0009; }
.chess-info { padding:26px; border-radius:24px; margin-bottom:16px; }
.chess-info h2 { font-size:32px; margin:12px 0 16px; }.chess-info p { color:#90a0b1; line-height:1.7; font-size:13px; }
.chess-actions { display:flex; gap:9px; margin-top:24px; }.chess-actions .button { flex:1; padding:0 10px; font-size:13px; }.chess-actions .button.ghost { background:rgba(255,255,255,.07); }
.difficulty-group { display:flex; gap:7px; margin-top:18px; }.difficulty-group button { flex:1; padding:10px 0; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.03); cursor:pointer; }.difficulty-group button.selected { background:rgba(99,246,211,.15); border-color:var(--cyan); color:var(--cyan); }
.move-log { margin:18px 0 0; padding-left:22px; max-height:180px; overflow:auto; color:#a7b7c5; font-size:12px; line-height:2; }
.chess-bottom { padding:60px 0; display:flex; justify-content:space-between; border-top:1px solid var(--line); color:#8fa0b1; }.chess-bottom a { color:var(--cyan); }
@media(max-width:860px){.chess-layout{grid-template-columns:1fr}.chess-sidebar{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.chess-info{margin:0}.chess-info:first-child{grid-column:1/-1}}
@media(max-width:560px){.chess-main{padding-top:110px}.chess-heading{margin-bottom:25px}.chess-head-decor{display:none}.chess-panel{padding:8px}.board-wrap{padding:6px 0}.chess-sidebar{display:block}.chess-info{margin-bottom:12px}.chess-piece{font-size:clamp(18px,6vw,28px)}.chess-bottom{padding:40px 0;font-size:12px}}