@charset "UTF-8";
:root{color-scheme:light;--paper:#f5f3ec;--card:#fffef9;--ink:#293b31;--muted:#85867b;--green:#2d4d3e;--soft-green:#e9eee4;--red:#a54637;--border:#e4e1d6;--serif:"Noto Serif SC","Songti SC","SimSun",serif;font-family:"Microsoft YaHei UI","PingFang SC",system-ui,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 5% 42%,#edece070,transparent 48%),var(--paper)}button,input,select{font:inherit}button,select,summary{cursor:pointer}button{touch-action:manipulation}button:disabled{cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #a77b3d;outline-offset:4px}button{color:inherit}a{color:inherit;text-decoration:none}svg{display:block}p,h1,h2{margin:0}[hidden]{display:none!important}
.site-header{height:87px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 max(28px,calc((100vw - 1160px)/2));background:#fbfaf680}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:39px;height:42px;background:var(--green);color:#f7efdb;border-radius:9px 3px 9px 3px;font-family:var(--serif);font-size:28px;text-align:center;line-height:41px}.brand-name{font-family:var(--serif);font-size:27px;font-weight:700;letter-spacing:3px}.brand-subtitle{font-size:12px;letter-spacing:2px;padding-left:15px;margin-left:4px;border-left:1px solid #d7d8ca;color:#898e7f}.header-note{display:flex;align-items:center;gap:9px;font-size:12px;color:#777e71}.status-dot{width:7px;height:7px;border-radius:50%;background:#73916b;display:inline-block;flex:none}.page-shell{max-width:1160px;margin:auto;padding:39px 0 0}.eyebrow{font-size:11px;color:#6d7967;letter-spacing:3px;display:flex;align-items:center;gap:8px;margin-bottom:14px}.eyebrow>span{width:16px;height:1px;background:#819175}h1{font-family:var(--serif);font-size:37px;letter-spacing:2px;font-weight:600;line-height:1.45}h1 em{font-style:normal;color:#697f5c}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 355px;gap:35px;align-items:start}.board-section{min-width:0;background:#fdfcf7;border:1px solid var(--border);border-radius:15px;padding:18px 26px 17px;box-shadow:0 5px 25px #41492b04}.player-row{display:flex;justify-content:space-between;align-items:center}.opponent-row{margin-bottom:17px}.human-row{margin-top:17px}.player-info{display:flex;align-items:center;gap:12px}.player-avatar{width:41px;height:41px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:24px;border:3px double #d9d3c0}.black-avatar{background:#3d473b;color:#f4e9cc;border-color:#717b64}.red-avatar{background:#a34a3a;color:#fff1db;border-color:#cc8e73}.player-info strong{display:block;font-size:13px;font-weight:600;line-height:1.6}.small-tag{font-size:9px;font-weight:400;background:#efeee5;color:#7b806e;border-radius:4px;padding:2px 6px;margin-left:6px;vertical-align:1px}.red-tag{background:#f5e8e1;color:#a6604e}.player-caption{display:block;color:#9b9a8d;font-size:10px;margin-top:3px;letter-spacing:.4px}.turn-badge{font-size:10px;color:#6f805d;background:#edf1e8;padding:6px 10px;border-radius:30px}.turn-badge.thinking{color:#9b753a;background:#f5edda}.turn-badge.finished{color:#a14b37;background:#f7e7dc}.move-counter{font-size:11px;color:#929587;letter-spacing:1px}.board-frame{padding:12px;background:#e7c999;border:1px solid #ccb081;border-radius:6px;box-shadow:inset 0 0 0 4px #ead4ab,inset 0 0 0 5px #c6a676,0 4px 9px #795f3410;position:relative}.chessboard{aspect-ratio:9/10;position:relative;isolation:isolate;user-select:none;-webkit-user-select:none;background:repeating-linear-gradient(1deg,#a27f3510 0,#a27f3510 1px,transparent 1px,transparent 6px),linear-gradient(110deg,#f0dcb4,#edd4a8 45%,#e9cea0);border:1px solid #b09161;border-radius:2px;overflow:hidden}.board-art,.board-overlay,.squares{position:absolute;inset:0;width:100%;height:100%}.board-art{pointer-events:none}.board-overlay{pointer-events:none;z-index:3}.board-art line,.board-art path{stroke:#806b4c;stroke-width:1.35;fill:none}.board-art .outer-line{stroke-width:2.8}.board-art text{fill:#a1875f;font-family:var(--serif)}.board-art .river-label{font-size:28px;font-weight:600;letter-spacing:11px;fill:#9a7b4e}.board-art .file-label{font-size:13px;fill:#947c57}.board-square{position:absolute;left:calc((var(--col)*60 + 30)/540*100%);top:calc((var(--row)*60 + 30)/600*100%);width:11.1112%;height:10%;transform:translate(-50%,-50%);background:none;border:0;padding:0;display:grid;place-items:center;border-radius:50%;-webkit-tap-highlight-color:transparent;outline-offset:-4px!important;z-index:2}.board-square:focus-visible{outline:2px solid #546a38}.piece{width:80%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:clamp(18px,2.7vw,32px);line-height:1;background:radial-gradient(circle at 34% 25%,#fff6d9,#f2dfb5 80%);box-shadow:0 3px 2px #72522b3b,inset 0 0 0 1px #bb9e6d,inset 0 0 0 4px #f4e3be,inset 0 0 0 5px currentColor;text-shadow:0 1px #fff9;position:relative;transition:transform .15s,box-shadow .15s}.piece.red{color:#a23d2f}.piece.black{color:#384738}.board-square:hover .piece{transform:translateY(-1px)}.board-square.selected .piece{transform:translateY(-2px);outline:3px solid #6e7d45;outline-offset:3px;box-shadow:0 5px 5px #72522b4b,inset 0 0 0 1px #b79a6c,inset 0 0 0 4px #fff0ca,inset 0 0 0 5px currentColor}.board-square.last-move::before{content:"";position:absolute;width:83%;height:83%;border:2px solid #9c813d70;border-radius:7px}.board-square.legal-empty::after{content:"";width:20%;aspect-ratio:1;border-radius:50%;background:#547348b3;box-shadow:0 0 0 5px #60834e15;position:absolute}.board-square.legal-capture::after{content:"";position:absolute;width:91%;height:91%;border:2px solid #a85946;border-radius:50%;background:#a8594608}.board-square.related::before{content:"";position:absolute;width:90%;height:90%;border:2px dashed #ad6842;border-radius:8px;background:#dd7d3715;z-index:1}.board-square.in-check .piece{outline:3px solid #b74d38;outline-offset:2px;animation:check-glow 1.6s ease-in-out infinite}.board-square.hint-from .piece{outline:3px solid #587a52;outline-offset:3px}.board-square.hint-to::before{content:"";position:absolute;width:80%;height:80%;border:3px solid #587a52;border-radius:50%;background:#587a5220}.board-square.readonly{cursor:default}.board-legend{display:flex;align-items:center;gap:16px;margin-top:18px;font-size:10px;color:#969789}.board-legend>span{display:flex;align-items:center;gap:6px}.board-tip{margin-left:auto;color:#a4a395}.legend-dot{width:6px;height:6px;border-radius:50%;background:#70845e}.legend-ring{width:9px;height:9px;border:1px solid #b06951;border-radius:50%}.legend-last{width:8px;height:8px;border:1px solid #ba9b59;border-radius:2px}.learning-column{display:flex;flex-direction:column;gap:15px;min-width:0}.coach-card,.controls-card,.utility-card{border:1px solid var(--border);background:var(--card);border-radius:12px;overflow:hidden}.coach-card{background:linear-gradient(140deg,#fffffa,#f8f9ef)}.card-heading{display:flex;align-items:center;justify-content:space-between;padding:20px 21px 0;gap:8px}.section-label{font-size:12px;letter-spacing:1px;font-weight:600;display:flex;align-items:center;gap:7px}.section-label svg{width:17px;height:17px;fill:none;stroke:#718961;stroke-width:1.3}.switch-label{font-size:10px;color:#939989;display:flex;gap:7px;align-items:center;cursor:pointer;white-space:nowrap}.switch-label input{position:absolute;opacity:0;width:31px;height:22px;right:21px}.switch-track{width:29px;height:17px;background:#c5c8be;border-radius:20px;position:relative;transition:background .2s}.switch-track::after{content:"";height:11px;width:11px;background:#fffdf5;border-radius:50%;position:absolute;top:3px;left:3px;transition:transform .2s}.switch-label input:checked+.switch-track{background:#66815b}.switch-label input:checked+.switch-track::after{transform:translateX(12px)}.switch-label input:focus-visible+.switch-track{outline:3px solid #a77b3d;outline-offset:3px}.coach-content{padding:27px 24px 22px;min-height:240px}.coach-kicker{font-size:10px;letter-spacing:1.4px;color:#929a7d;display:block;margin-bottom:13px}.coach-content h2{font-family:var(--serif);font-size:24px;font-weight:600;letter-spacing:1px;line-height:1.5;margin-bottom:15px}.coach-rule{font-size:12px;color:#737d69;line-height:1.95;letter-spacing:.3px}.coach-effect{margin-top:19px;padding:13px 14px;background:#edf0e6;border-left:2px solid #91a17b;border-radius:0 5px 5px 0}.effect-label{font-size:9px;letter-spacing:1px;color:#849473;display:block;margin-bottom:6px}.coach-effect p{font-size:11px;line-height:1.85;color:#77816b}.coach-detail{margin-top:15px;border-top:1px solid #e1e5d5;padding-top:10px}.coach-detail summary{font-size:10px;color:#7b8d68;display:flex;justify-content:space-between;list-style:none}.coach-detail p{font-size:11px;line-height:1.9;color:#808872;margin-top:10px}.coach-footer{padding:13px 21px;background:#f0f2e7;border-top:1px solid #e7eadc;display:flex;gap:8px;align-items:center;font-size:9px;line-height:1.6;color:#929a80;letter-spacing:.2px}.tiny-sparkle{font-size:17px;color:#9da584}.controls-card{padding:19px 21px 16px}.control-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.difficulty-label{display:flex;align-items:center;gap:8px;font-size:10px;color:#9a9c8e}.difficulty-select{position:relative;display:inline-flex;flex:none;color:#67735e}.difficulty-label select{appearance:none;-webkit-appearance:none;color:inherit;background:#f5f5ed;border:1px solid #e7e8da;border-radius:5px;padding:5px 26px 5px 7px;font-size:10px;max-width:106px}.difficulty-select .chevron{position:absolute;right:6px;top:50%;transform:translateY(-50%);pointer-events:none}.game-status{display:flex;gap:9px;align-items:flex-start;margin:22px 0 19px}.game-status>.status-dot{margin-top:6px}.game-status strong{display:block;font-size:13px;font-weight:500;letter-spacing:.5px}.game-status p{font-size:10px;line-height:1.8;color:#9a9d8f;margin-top:6px}.primary-button{width:100%;min-height:45px;display:flex;align-items:center;justify-content:center;gap:9px;background:var(--green);border:1px solid var(--green);color:#fcf9ed;border-radius:7px;font-size:12px;letter-spacing:1px;transition:background .15s,transform .15s}.primary-button:hover{background:#3d614d}.primary-button:active{transform:translateY(1px)}.primary-button:disabled{background:#9ca88f;border-color:#9ca88f}.primary-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.primary-button>svg{flex-shrink:0}.secondary-actions{display:flex;gap:10px;margin-top:10px}.secondary-actions button{border:1px solid #e4e5d9;background:transparent;border-radius:7px;min-height:37px;flex:1;font-size:11px;color:#7b846f}.secondary-actions button:hover{background:#f0f2e8}.secondary-actions button:disabled{opacity:.35}.secondary-actions button span{font-size:17px;vertical-align:-1px;margin-right:5px}.control-footnote{margin-top:12px;font-size:9px;color:#a3a693;text-align:center;line-height:1.7}.utility-card>summary{padding:17px 20px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px;list-style:none}.utility-card>summary::-webkit-details-marker,.coach-detail>summary::-webkit-details-marker{display:none}.utility-card>summary>span:first-child{display:flex;gap:10px;align-items:center}.utility-icon{font-size:17px;line-height:1;color:#819073}.summary-right{font-size:9px;color:#a0a18f;display:flex;align-items:center;gap:12px}.chevron{display:block;width:16px;height:16px;flex-shrink:0;transition:transform .15s}.utility-card[open]>summary .chevron,.coach-detail[open]>summary .chevron{transform:rotate(180deg)}.history-list{list-style:none;margin:0;padding:0 18px 15px;max-height:280px;overflow:auto}.history-list>li{padding:10px 2px;border-top:1px solid #efeee4;font-size:11px;line-height:1.7}.history-list .empty-history{text-align:center;color:#a3a393;padding:20px 0}.history-head{display:flex;gap:8px;align-items:center;color:#64725b}.history-number{font-size:9px;color:#9ba089;min-width:20px}.history-side{width:5px;height:5px;border-radius:50%;background:#a64c37}.history-side.black{background:#475b43}.history-effect{font-size:10px;color:#969c87;margin:4px 0 0 33px}.rules-list{padding:0 19px 19px}.rule-item{display:grid;grid-template-columns:30px 1fr;gap:9px;padding:11px 0;border-top:1px solid #eeede3}.rule-piece{font-family:var(--serif);font-size:21px;color:#a65742;line-height:1.6}.rule-item strong{font-size:11px;font-weight:500;display:block;margin-bottom:4px}.rule-item p{font-size:10px;line-height:1.9;color:#8a907f}.rule-note{border-top:1px solid #e8e8db;padding-top:12px;font-size:10px;color:#89927c;line-height:1.85}.rule-note a{text-decoration:underline;text-underline-offset:3px}.site-footer{border-top:1px solid var(--border);margin-top:31px;padding:21px 1px 24px;display:flex;justify-content:space-between;gap:10px;font-size:9px;color:#aaa99b}.footer-brand{color:#929a85;letter-spacing:1px}.footer-brand>span{margin:0 7px;color:#b6b9a5}.notice{border:1px solid #d8dec6;background:#eef2e5;color:#6c795d;border-radius:7px;padding:11px 15px;font-size:12px;line-height:1.7;margin-bottom:18px}.notice.error{color:#9d593e;background:#fbefe1;border-color:#e5ceaf}.coach-card.error{border-color:#d5ad8c}.coach-card.error .coach-kicker{color:#ac7155}.coach-card.error .coach-effect{border-color:#bc8664;background:#f6ecde}.coach-card.finished .coach-content h2{color:#a65037}.coach-card.teaching-off .coach-kicker{color:#929488}dialog{border:1px solid #dedfce;border-radius:16px;max-width:370px;width:calc(100% - 32px);padding:30px;background:#fffdf4;color:#344b3a;box-shadow:0 25px 80px #203c3540}dialog::backdrop{background:#28382e65;backdrop-filter:blur(3px)}.dialog-icon{font-family:var(--serif);display:block;font-size:36px;margin-bottom:18px;color:#8a9b77}dialog h2{font-family:var(--serif);font-size:22px;line-height:1.5}dialog p{font-size:12px;line-height:1.8;color:#8e9580;margin-top:12px}.dialog-actions{display:flex;gap:10px;margin-top:27px}.dialog-actions button{flex:1;border:1px solid #dde1d2;background:transparent;border-radius:6px;padding:11px 0;font-size:12px}.dialog-actions .dialog-confirm{background:var(--green);color:#fff8e5;border-color:var(--green)}@keyframes check-glow{50%{outline-color:#d58a50}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.switch-label{position:relative}.switch-label input{inset:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.coach-rule{color:#596650}.coach-effect p{color:#5a674e}.coach-detail p{color:#657457}.player-caption{color:#737b68}.game-status p{color:#6c775f}.control-footnote{color:#7a826e}.history-effect{font-size:11px;color:#6c795e}.rule-item p{font-size:12px;color:#68755e}.rule-note{font-size:11px;color:#68755e}.coach-footer{color:#6f7b60}.summary-right{color:#737c67}.board-legend{color:#737b68}.switch-label{color:#68765c}
@media(min-width:951px){.site-header{height:76px;padding-inline:max(28px,calc((100vw - 1050px)/2))}.page-shell{max-width:1050px;padding-top:28px}h1{font-size:34px}.eyebrow{margin-bottom:10px}.board-frame{max-width:520px;margin-inline:auto}}
@media(min-width:1440px){.page-shell{padding-top:45px}.game-layout{grid-template-columns:minmax(0,1fr) 365px;gap:38px}.piece{font-size:34px}}
@media(max-width:1220px){.page-shell{margin:0 30px}.game-layout{gap:24px;grid-template-columns:minmax(0,1fr) 330px}.board-section{padding:18px 21px 16px}.coach-content{padding:24px 21px 20px}.coach-content h2{font-size:23px}.card-heading{padding-left:18px;padding-right:18px}.board-legend{gap:13px}.board-tip{font-size:9px}}
@media(max-width:950px) and (min-width:741px){.page-shell{margin:0 22px}.game-layout{gap:18px;grid-template-columns:minmax(0,1fr) 300px}.board-section{padding:16px 13px}.board-frame{padding:8px}.piece{font-size:25px}.board-tip{display:none}.coach-content h2{font-size:21px}.coach-content{padding:22px 18px 19px}.card-heading{padding:18px 15px 0}.controls-card{padding:17px}.switch-label{font-size:9px;gap:4px}.player-info{gap:8px}.player-avatar{width:34px;height:34px;font-size:21px}.player-info strong{font-size:11px}.turn-badge{font-size:9px;padding:5px 7px}}
@media(max-width:740px){.site-header{height:70px;padding:0 22px}.brand-mark{width:33px;height:36px;font-size:24px;line-height:35px}.brand-name{font-size:24px}.brand-subtitle{font-size:10px;margin-left:0;padding-left:11px}.header-note{font-size:10px}.page-shell{margin:0 auto;max-width:540px;padding:27px 18px 0}.eyebrow{font-size:9px;letter-spacing:2px;margin-bottom:10px}h1{font-size:29px;letter-spacing:1px}.game-layout{display:flex;flex-direction:column;gap:18px}.board-section{width:100%;padding:15px 17px;border-radius:12px}.player-avatar{width:35px;height:35px;font-size:22px}.opponent-row{margin-bottom:13px}.human-row{margin-top:13px}.player-info strong{font-size:12px}.player-caption{font-size:9px}.board-frame{padding:9px}.piece{font-size:30px}.board-legend{font-size:9px;margin-top:16px;gap:13px}.board-tip{font-size:8px}.learning-column{width:100%;gap:12px}.coach-content{min-height:0;padding:22px 22px 20px}.coach-content h2{font-size:25px;margin-bottom:12px}.coach-rule{font-size:12px}.coach-effect{margin-top:15px}.coach-footer{font-size:10px}.controls-card{padding:19px 22px}.game-status{margin:18px 0 15px}.game-status p{font-size:11px}.control-footnote{font-size:10px}.primary-button{min-height:47px;font-size:13px}.secondary-actions button{min-height:40px;font-size:12px}.utility-card>summary{font-size:12px}.summary-right{font-size:10px}.site-footer{margin-top:24px;padding:19px 0 24px;font-size:8px;letter-spacing:0}.footer-brand{letter-spacing:0}}
@media(max-width:390px){.site-header{padding:0 16px;height:63px}.header-note{display:none}.brand-subtitle{font-size:10px}.page-shell{padding:23px 12px 0}h1{font-size:26px}.board-section{padding:13px 10px}.board-frame{padding:6px}.piece{font-size:23px;box-shadow:0 2px 2px #72522b3b,inset 0 0 0 1px #bb9e6d,inset 0 0 0 3px #f4e3be,inset 0 0 0 4px currentColor}.player-info{gap:8px}.player-avatar{width:32px;height:32px;font-size:20px}.player-info strong{font-size:11px}.player-caption{font-size:8px}.board-legend{gap:11px}.board-tip{font-size:7px}.turn-badge{font-size:9px}.card-heading{padding:18px 18px 0}.coach-content{padding:21px 18px 19px}.coach-content h2{font-size:23px}.controls-card{padding:18px}.site-footer{flex-direction:column;align-items:center;gap:8px}}
@media(max-width:390px){.piece{width:86%;font-size:clamp(15px,5.25vw,20px)}.player-caption{font-size:10px}.board-legend{font-size:10px}.board-tip{display:none}}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.floating-rules{position:fixed;z-index:1000;top:92px;right:16px;width:320px;max-width:calc(100vw - 24px);max-height:min(520px,calc(100vh - 24px));max-height:min(520px,calc(100dvh - 24px));display:flex;flex-direction:column;box-shadow:0 9px 30px #273c3226;border-color:#cdd4c1}
.rules-header{display:flex;align-items:stretch;flex:none;min-height:52px;background:#f1f4e9;border-bottom:1px solid transparent}.floating-rules[data-expanded="true"] .rules-header{border-bottom-color:var(--border)}.rules-heading{font:inherit;min-width:0;flex:1;display:flex}.rules-drag{display:flex;align-items:center;gap:9px;width:100%;padding:0 14px;background:none;border:0;text-align:left;font-size:12px;font-weight:600;letter-spacing:.5px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}.rules-drag .utility-icon{font-size:21px}.rules-drag-hint{font-size:9px;font-weight:400;letter-spacing:0;color:#7c876e;margin-left:auto;white-space:nowrap}.floating-rules.is-dragging .rules-drag{cursor:grabbing}.floating-rules.is-dragging{box-shadow:0 13px 38px #273c3238}.rules-toggle{display:flex;align-items:center;gap:6px;flex:none;margin:8px 9px 8px 0;padding:4px 10px;border:1px solid #d7ddcc;border-radius:6px;background:#fffef9;font-size:11px;color:#5d6e51}.rules-toggle:hover{background:#e8eddc}.rules-toggle[aria-expanded="true"] .chevron{transform:rotate(180deg)}.rules-drag:focus-visible,.rules-toggle:focus-visible{outline-offset:-4px}.floating-rules .rules-list{min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;padding-top:4px}.floating-rules .rules-list:focus-visible{outline:2px solid #a77b3d;outline-offset:-4px}.floating-rules .rule-item:first-child{border-top:0}
@media(max-width:740px){.floating-rules{top:80px;right:12px;width:288px}.rules-drag{padding-left:11px;gap:7px}.rules-toggle{padding-inline:8px}}
@media(max-width:740px){.floating-rules{top:auto;bottom:12px}.floating-rules:not([data-expanded="true"]){width:220px}.floating-rules:not([data-expanded="true"]) .rules-drag-hint{display:none}}

/* Keep the same board proportions and piece treatment at every screen size. */
.chessboard{container-type:inline-size}
.piece{
  width:80%;height:80%;min-width:0;min-height:0;aspect-ratio:1;
  place-self:center;display:flex;align-items:center;justify-content:center;
  padding:0;flex:none;white-space:nowrap;letter-spacing:0;
  font-size:clamp(13px,4.8vw,30px);line-height:1;
  --piece-face:clamp(2px,.75cqi,4px);--piece-rim:clamp(3px,.95cqi,5px);
  box-shadow:0 2px 2px #72522b3b,inset 0 0 0 1px #bb9e6d,inset 0 0 0 var(--piece-face) #f4e3be,inset 0 0 0 var(--piece-rim) currentColor;
}
@supports(font-size:1cqi){.piece{font-size:clamp(13px,6cqi,34px)}}
.board-square.selected .piece{box-shadow:0 4px 4px #72522b4b,inset 0 0 0 1px #b79a6c,inset 0 0 0 var(--piece-face) #fff0ca,inset 0 0 0 var(--piece-rim) currentColor}
.site-header{gap:16px}
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}
.header-actions .header-note{margin-right:10px}
.header-button{border:1px solid #d9dfce;background:#f8f9f1;color:#52694a;border-radius:7px;padding:9px 13px;font-size:12px;white-space:nowrap;min-height:38px}
.header-button:hover{background:#eaf0e2;border-color:#bfcbb1}
.player-row{gap:8px}.player-info{min-width:0}.player-info>div{min-width:0}.player-avatar,.turn-badge,.move-counter{flex-shrink:0}
.turn-badge{max-width:42%;white-space:normal;overflow-wrap:anywhere;text-align:center;line-height:1.6}
.player-caption{overflow-wrap:anywhere}.board-legend{flex-wrap:wrap;row-gap:8px}
.site-footer{flex-wrap:wrap;line-height:1.7}.privacy-note{flex-basis:100%;text-align:right;color:#7a826e}

.online-panel{min-width:0;border:1px solid #d5ddc8;background:linear-gradient(140deg,#fffffa,#f4f7ec);border-radius:12px;padding:19px 21px 15px}
.online-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}
.online-badge{font-size:9px;border-radius:20px;padding:4px 8px;background:#e9efdf;color:#6c8059}
.online-status{margin-top:17px;font-size:13px;line-height:1.8;font-weight:500;overflow-wrap:anywhere}
.online-players{margin-top:5px;font-size:11px;color:#758269;line-height:1.8;overflow-wrap:anywhere}
.invite-label{display:block;margin-top:17px;font-size:10px;color:#7a866d}
.invite-link-row{display:flex;gap:7px;margin-top:7px;margin-bottom:15px;min-width:0}
.invite-link-row input{display:block;width:100%;min-width:0;flex:1;border:1px solid #dde3d1;background:#fffef9;border-radius:6px;padding:9px;color:#65745a;font-size:11px;text-overflow:ellipsis}
.subtle-button{border:1px solid #d6deca;background:#f1f5e9;color:#617450;border-radius:6px;padding:8px 12px;font-size:11px;flex-shrink:0;min-height:38px}
.subtle-button:hover{background:#e6eddb}.subtle-button:disabled{opacity:.5}
.text-button{display:block;border:0;background:transparent;color:#79866b;font-size:11px;text-align:center;margin:9px auto 0;padding:8px 5px;min-height:34px}
.text-button:hover{color:#365339;text-decoration:underline;text-underline-offset:3px}

.feedback-dialog{max-width:450px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain}
.feedback-dialog .dialog-icon{margin-bottom:8px;font-size:29px}
.feedback-dialog h2{font-size:23px}.feedback-dialog p{color:#748066}
.form-label{display:block;margin:19px 0 8px;font-size:12px;color:#506444}
.form-label span{margin-left:5px;font-size:10px;font-weight:400;color:#8d9781}
.feedback-dialog textarea,.feedback-dialog input{width:100%;max-width:100%;min-width:0;padding:11px 12px;border:1px solid #d7dfcb;border-radius:7px;background:#fffef9;color:#3e5438;font:inherit;font-size:13px;line-height:1.8}
.feedback-dialog textarea{display:block;resize:vertical;min-height:120px;max-height:300px}
.feedback-dialog textarea::placeholder,.feedback-dialog input::placeholder{color:#929b86}
.feedback-dialog textarea:disabled,.feedback-dialog input:disabled{opacity:.65}
.feedback-count{margin-top:6px;text-align:right;color:#8a967b;font-size:10px}
.feedback-dialog .feedback-status{min-height:23px;line-height:1.8;font-size:11px;margin-top:14px;overflow-wrap:anywhere}
.feedback-status[data-kind="error"]{color:#a24e3c}.feedback-status[data-kind="success"]{color:#4f7145}
.feedback-dialog .dialog-actions{margin-top:15px}.dialog-actions button:disabled{opacity:.6}
textarea:focus-visible{outline:3px solid #a77b3d;outline-offset:4px}

@media(max-width:950px){.header-actions .header-note{display:none}}
@media(max-width:740px){
  .site-header{height:auto;min-height:70px;padding:12px 18px;gap:12px}
  .brand{gap:9px}.header-actions{gap:7px}.header-button{padding:8px 10px;font-size:11px}
  .online-panel{padding:18px 22px 14px}.privacy-note{text-align:center}
  .feedback-dialog textarea,.feedback-dialog input{font-size:16px}
}
@media(max-width:600px){.brand-subtitle{display:none}}
@media(max-width:390px){
  .site-header{padding:10px 12px;min-height:63px;gap:8px}.brand{gap:8px}
  .header-actions{gap:6px}.header-button{padding:8px 9px}
  .online-panel{padding:18px}.privacy-note{flex-basis:auto}
  .feedback-dialog{padding:23px 20px}.feedback-dialog h2{font-size:21px}
  .feedback-dialog .dialog-actions button{min-height:43px}.feedback-dialog .form-label{margin-top:15px}
}