:root{--header-height:68px}html,body{height:100%;overflow:hidden}header{position:fixed;inset:0 0 auto;height:var(--header-height);z-index:40;background:#f3efe6f5;backdrop-filter:blur(12px);padding:0 3%;gap:24px}.brand{font-size:23px;flex-shrink:0}.seal{font-size:15px;line-height:17px;padding:3px 5px}.brand-sub{font-size:8px}nav{gap:20px;white-space:nowrap}nav button{font-size:12px}.header-right{gap:8px}.header-right button{width:28px;height:28px}main{height:calc(100dvh - var(--header-height));margin-top:var(--header-height);max-width:1550px;padding:0 3% 12px;display:flex;flex-direction:column;min-height:0}.intro{padding:14px 0 12px;flex-shrink:0}.intro .eyebrow{display:none}h1{font-size:23px}.intro p{font-size:10px;margin-top:6px}.intro-mark{font-size:35px}.intro-mark span{font-size:9px}.workspace{flex:1;min-height:0;display:grid;grid-template-columns:205px minmax(0,1fr) 265px;gap:24px;align-items:stretch}.left,.right{min-height:0;max-height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b7ac92 transparent}.left{padding:5px 7px 12px 0}.right{display:block}.game{min-height:0;display:flex;flex-direction:column;align-items:stretch;overflow:hidden}.player{flex-shrink:0;padding:4px 8px;min-height:43px}.avatar{width:30px;height:30px;font-size:20px}.clock{margin-left:auto;font-size:17px}.tag{margin-left:auto}.player small{margin-top:4px}.board-stage{flex:1;min-height:0;padding:8px 6px 14px;display:flex;justify-content:center;align-items:center;overflow:hidden}.board-frame{flex:none;padding:18px;border-radius:4px;box-shadow:0 5px 0 #a78b60,0 8px 3px #78604435,8px 12px 20px #69533727,inset 0 0 0 5px #ead0a540}.board{container-type:inline-size}.piece{font-size:clamp(11px,6cqw,30px)}.river{font-size:clamp(13px,5cqw,25px);letter-spacing:6px}.board-actions{flex-shrink:0;padding:5px 0;min-height:43px;align-items:center;gap:4px}.board-actions button{font-size:15px;padding:8px 5px;border-radius:4px;white-space:nowrap}.board-actions span{font-size:10px;margin-left:3px}#reset{color:#f9eedc;background:#8f4c3a;padding:9px 12px}footer{display:none}#last-move{font-size:11px;min-height:27px;flex-shrink:0;text-align:center;color:#7d725e;padding:5px 4px;background:#e7e2d455;border-radius:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.piece.last{outline:2px solid #6b7e53;outline-offset:3px;animation:last-pulse 1.7s ease-in-out infinite}.piece.red.last{outline-color:#ae5a3d}.piece.last:after{width:6px;height:6px;background:#62754c;bottom:4px}.piece.red.last:after{background:#ad553a}.move-origin{position:absolute;width:9%;aspect-ratio:1;transform:translate(-50%,-50%);border:2px dashed #7c8b64;border-radius:50%;background:#78875c13;pointer-events:none;z-index:0}.move-origin.red-origin{border-color:#b17250;background:#b1725013}@keyframes last-pulse{0%,100%{outline-offset:2px;filter:brightness(1)}50%{outline-offset:5px;filter:brightness(1.16)}}@media(prefers-reduced-motion:reduce){.piece.last{animation:none;outline-offset:4px}}#game-result{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;background:#e0e6d5;border:1px solid #a2b18e;border-radius:5px;margin-bottom:5px;font-size:13px}#game-result button{padding:8px 12px;background:#64764f;color:#fff9ec;border-radius:4px;font-size:12px}.compact-tools{display:flex;flex-shrink:0;justify-content:flex-end;gap:8px;padding-bottom:9px}.compact-tools button{font-size:11px;padding:7px 12px;border:1px solid var(--line);border-radius:4px}#invite-quick{color:var(--red);background:#eee1d5}#settings-toggle,#details-toggle,.panel-close{display:none}.primary{background:#8f4c3a!important;color:#fff5e5!important;border-color:#8f4c3a!important}.link-row{display:flex;gap:8px;margin:6px 0 14px}.link-row input{min-width:0;width:100%;background:#fffaf0;border:1px solid #d4c7ad;border-radius:4px;padding:10px;color:#73755f}.link-row button,.room-buttons button{border:1px solid var(--line);padding:9px 12px;border-radius:4px;white-space:nowrap;font-size:12px}.room-buttons{display:flex;gap:8px}#online-status{padding:12px;background:#e8e8dc;font-size:13px;margin-bottom:10px;border-radius:4px;line-height:1.8}.dialog-close{float:right;font-size:25px}#invite-modal{width:min(480px,94vw);max-height:90dvh;overflow-y:auto}#rematch-offer{border-top:1px solid var(--line);margin-top:14px;padding-top:10px}#toast{bottom:12px;max-width:90vw;font-size:12px;line-height:1.7}#panel-backdrop{position:fixed;inset:var(--header-height) 0 0;background:#33372d66;z-index:45}.online-tag{color:#8f4c3a}
@media(max-width:1100px){.workspace{grid-template-columns:175px minmax(0,1fr) 230px;gap:15px}.header-right{display:none}nav{gap:16px}.board-actions span{font-size:9px}.intro{padding:10px 0}.mode-card{padding:12px 8px}.divider{margin:18px 0}.label{margin-bottom:12px}}
@media(max-width:850px){.workspace{display:flex;flex-direction:row;gap:0}.game{width:100%;height:100%}.left,.right,.left.computer-visible,.left.study-visible,.left.puzzle-visible{display:none}.compact-tools{justify-content:space-between}#settings-toggle,#details-toggle{display:block}.panel-close{display:block;position:sticky;top:-1px;z-index:3;width:100%;background:#f3efe6;border-bottom:1px solid var(--line);padding:12px 5px;text-align:right;color:#8f4c3a;font-size:12px}.left.panel-open,.right.panel-open{display:block!important;position:fixed;top:calc(var(--header-height) + 14px);bottom:14px;left:auto;right:14px;width:min(390px,calc(100vw - 28px));height:auto;max-height:none;z-index:50;background:#f3efe6;border:1px solid #c4b69c;border-radius:7px;padding:0 16px 16px;box-shadow:0 12px 50px #363a2e44}.left.panel-open>*:not([hidden]){display:revert}.left.panel-open .panel-close{display:block}.left.panel-open .mode-card{display:flex}.left.panel-open .label,.left.panel-open .setting{display:flex}.left.panel-open #computer-tools{display:block!important;margin:12px 0}.left.panel-open #puzzle-list{display:grid;grid-template-columns:1fr 1fr}.left.panel-open .mountains{display:none}.right.panel-open{padding:0 0 15px}.right.panel-open .panel-close{padding-right:16px}.intro-mark{display:none}nav{gap:13px}header{gap:18px}.brand-sub{display:none}.intro{padding:9px 0 7px}.intro h1{font-size:20px}.intro p{display:none}.board-actions{justify-content:space-evenly}.board-actions span{font-size:11px}.player{width:100%;max-width:600px;align-self:center}#game-result{width:100%;max-width:600px;align-self:center}.board-frame{padding:16px}.tag{display:block}.right.puzzle-mode .record-head,.right.puzzle-mode .record-cols,.right.puzzle-mode #records,.right.puzzle-mode .replay,.right.puzzle-mode .tip-box{display:none}}
@media(max-width:600px){:root{--header-height:100px}header{height:var(--header-height);padding:8px 5% 0;flex-wrap:wrap;gap:0;align-content:space-between}.brand{font-size:22px}.seal{font-size:13px;line-height:15px}.brand-sub{display:none}nav{height:41px;width:100%;justify-content:space-between;gap:7px}nav button{font-size:11px;padding:0 2px}nav #invite{display:block}nav #rules{display:none}main{padding:0 4% 6px}.intro{padding:8px 0 6px}.intro h1{font-size:18px;letter-spacing:1px}.compact-tools{padding-bottom:6px;gap:5px}.compact-tools button{padding:6px 8px;font-size:10px}.player{min-height:36px;padding:2px 3px;gap:8px}.avatar{height:27px;width:27px;font-size:18px}.player strong{font-size:11px}.player small{font-size:9px;margin-top:2px}.clock{font-size:16px}.tag{font-size:8px;padding:4px 5px}.board-stage{padding:8px 5px 12px}.board-frame{padding:14px}.board-actions{min-height:39px;padding:3px 0;gap:3px}.board-actions button{font-size:13px;padding:7px 3px}.board-actions span{font-size:9px;margin-left:1px}#reset{padding:8px 7px}#last-move{font-size:10px;min-height:24px;padding:4px 2px}#game-result{font-size:11px;padding:6px 8px}#game-result button{font-size:10px;padding:7px}.left.panel-open #computer-tools{display:block!important}.left.panel-open #computer-tools p{display:block}.left.panel-open #puzzle-tools{margin-top:15px}.puzzle-mode #puzzle-challenge{display:block}.right.panel-open #records{height:180px}}
@media(max-height:520px){:root{--header-height:48px}header{height:48px;flex-wrap:nowrap;padding:0 2%;gap:15px}.brand{font-size:19px}.seal{font-size:11px;line-height:12px}.intro{display:none}nav{height:48px;width:auto;flex:1;justify-content:space-evenly}.compact-tools{padding:5px 0}.avatar{width:23px;height:23px;font-size:16px}.player{min-height:29px;padding:1px 4px}.player small{display:none}.board-actions{min-height:32px;padding:1px 0}.board-actions button{padding:5px 3px}#last-move{min-height:20px;font-size:9px;padding:2px}#game-result{padding:4px 8px}#game-result button{padding:4px 8px}}
@media(min-width:851px){.intro{height:56px;padding:8px 0;position:relative}.intro-mark{display:none}.compact-tools{position:absolute;right:3%;top:80px;z-index:2;padding:0}.intro p{font-size:9px}.intro h1{font-size:22px}}
#puzzle-list{display:grid;grid-template-columns:1fr;gap:5px}#puzzle-list .puzzle-item{margin:0;align-items:center;padding:10px}#puzzle-list small{display:block;font-size:9px;color:#93927c;margin-top:5px}#puzzle-filter-progress{margin:5px 0 12px}.left.panel-open #puzzle-list{grid-template-columns:1fr 1fr}#puzzle-list .puzzle-item.selected{border-left:3px solid #778764}
.clock-group{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:3px;min-width:65px;border-radius:4px;padding:3px 6px}.clock-group .clock{margin:0;font-variant-numeric:tabular-nums}.step-clock{font-size:9px;letter-spacing:.3px;color:#8a8e79}.clock-active{background:#e1e7d8}.clock-urgent .clock,.clock-urgent .step-clock{color:#a54d35}#time-control-summary{text-align:center;flex-shrink:0;font-size:10px;color:#7c836b;padding:4px 2px;min-height:21px}#time-settings{border-top:1px solid var(--line);margin-top:20px;padding-top:18px}#time-settings input{width:100%;margin:6px 0 12px;padding:8px;border:1px solid #d4c9b6;border-radius:4px;background:#faf5eb;color:#566348;font:13px Arial}#time-settings label{display:block}#time-settings input:disabled{opacity:.65}#enter-game{font-size:15px;padding:13px;margin:8px 0 14px}.dialog-close{min-width:44px;min-height:44px;border-radius:5px}#close-invite{font-size:29px}@media(max-width:600px){.clock-group{min-width:60px;gap:1px;padding:2px 4px}.step-clock{font-size:8px}.player{min-height:42px}#time-control-summary{font-size:9px;min-height:19px}}@media(max-height:520px){.step-clock{font-size:8px}.clock-group{gap:0;padding:1px 4px}#time-control-summary{min-height:17px;padding:2px;font-size:8px}}