.xq-page{padding-top:42px;padding-bottom:54px;max-width:1240px}.xq-heading{display:flex;gap:32px;align-items:end;justify-content:space-between;margin:26px 0 32px}.xq-heading h1,.xq-page>h1{font-size:clamp(30px,3.2vw,45px);line-height:1.13;letter-spacing:-1.4px;max-width:780px;margin:14px 0}.xq-intro{color:var(--text);font-size:14px;line-height:1.8;max-width:680px}.xq-local{color:var(--green);font-size:11px;white-space:nowrap;padding-bottom:7px}.xq-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:32px;align-items:start}.xq-table{min-width:0;background:#f1ede4;border:1px solid #e2dacb;border-radius:18px;padding:18px 22px 16px;box-shadow:0 12px 36px #483a1c08}.xq-player{display:flex;gap:12px;align-items:center;padding:0 4px;margin:13px 0}.xq-opponent{margin-top:0}.xq-player strong{font-size:13px;font-weight:650;display:block}.xq-player small{font-size:11px;display:block;color:var(--muted);margin-top:4px}.xq-avatar{width:39px;height:39px;border-radius:12px;background:#243d3e;color:#f2dfbc;display:grid;place-items:center;font:25px Georgia,serif}.xq-avatar-you{background:#f7e7da;color:#a23b31;border:1px solid #e1c7af}.xq-turn-dot{margin-left:auto;width:8px;height:8px;background:#d1d0c3;border-radius:50%}.xq-turn-dot.is-active{background:#3e6959;box-shadow:0 0 0 5px #3e695914}.xq-board{position:relative;width:100%;max-width:650px;aspect-ratio:540/600;border-radius:14px;box-shadow:0 4px 14px #63421916;isolation:isolate;overflow:hidden}.xq-grid{display:block;width:100%;height:100%;background:#99734e;border-radius:14px}.xq-hit-layer,.xq-piece-layer{position:absolute;inset:0}.xq-piece-layer{pointer-events:none;z-index:2}.xq-hit-layer{z-index:3}.xq-square{position:absolute;transform:translate(-50%,-50%);width:9.6%;aspect-ratio:1;border-radius:50%;padding:0;touch-action:manipulation}.xq-square:focus-visible{outline:3px solid #286c65;outline-offset:0}.xq-square.xq-last:before{content:'';position:absolute;inset:7%;border-radius:25%;background:#48796140;z-index:-1}.xq-square.xq-selected{box-shadow:0 0 0 3px #2d7366}.xq-square.xq-legal:after{content:'';position:absolute;width:22%;height:22%;top:39%;left:39%;border-radius:50%;background:#256052;box-shadow:0 0 0 3px #fff6}.xq-square.xq-legal.xq-last:after{background:#153c31}.xq-square.xq-check{box-shadow:0 0 0 3px #b7352c}.xq-piece{position:absolute;transform:translate(-50%,-50%);width:8.5%;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 25%,#fff7e5,#f0d7a7 75%);border:2px solid #bc9d6a;box-shadow:0 3px 2px #69471b44,inset 0 0 0 2px #ffeccd,inset 0 0 0 3px #b89b694d;font-family:'Noto Serif CJK TC','Songti SC','SimSun',Georgia,serif;font-size:clamp(21px,3vw,36px);font-weight:600;line-height:1;color:#253b3d;transition:left .18s ease,top .18s ease,box-shadow .15s}.xq-piece.xq-r{color:#a0322a}.xq-piece-selected{box-shadow:0 4px 4px #69471b44,inset 0 0 0 2px #fff0ca}.xq-piece-check{background:#f7cbb0}.xq-table-note{font-size:11px;line-height:1.7;text-align:center;color:#685f4f;margin:13px 0 16px}.xq-captured{display:flex;gap:12px;align-items:start;border-top:1px solid #ddd7c9;padding:14px 4px 0;font-size:10px;color:#6d6b5c}.xq-captured>span{padding-top:4px;flex-shrink:0}.xq-captured>div{display:flex;gap:4px;flex-wrap:wrap;align-items:center;min-height:22px}.xq-captured>div>span{font-family:serif;font-size:19px;line-height:1.3}.xq-captured-r{color:#a0322a}.xq-captured-b{color:#253b3d}.xq-sidebar{display:flex;flex-direction:column;gap:16px}.xq-panel{background:#fffefa;border:1px solid var(--line);border-radius:12px;padding:22px}.xq-status-panel{background:#e9efe7;border-color:#dce5d8;min-height:132px}.xq-status-panel h2{font-size:28px;letter-spacing:-.6px;margin-top:10px;line-height:1.15}.xq-status-panel p{font-size:11px;line-height:1.65;color:var(--text);margin-top:9px}.xq-thinking:after{content:'';display:inline-block;width:7px;height:7px;margin-left:8px;background:#3e6959;border-radius:50%;animation:xq-breathe 1.1s ease infinite}.xq-label-row{display:flex;justify-content:space-between;gap:12px;font-size:11px}.xq-label-row>span{color:var(--text)}.xq-label-row strong{color:var(--green);font-weight:600}.xq-setting-note{font-size:10px;color:var(--muted);line-height:1.7;margin-top:10px}.xq-side{padding:0;margin:21px 0 20px;border:0;display:flex;gap:16px;flex-wrap:wrap}.xq-side legend{font-size:11px;color:var(--text);padding:0;margin-bottom:10px}.xq-side label{font-size:12px;display:flex;gap:5px;align-items:center;cursor:pointer;min-height:28px}.xq-side input{accent-color:var(--green);width:15px;height:15px;margin:0}.xq-side-red{color:#a0322a}.xq-primary{width:100%;background:var(--green);color:white;min-height:46px;border-radius:7px;padding:12px 16px;text-align:left;display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:600;gap:16px}.xq-primary:hover{background:#2c5143}.xq-secondary{display:grid;grid-template-columns:1.3fr 1fr;margin-top:8px;gap:8px}.xq-secondary button{border:1px solid var(--line);border-radius:6px;min-height:40px;padding:8px 5px;font-size:10px;background:#fff}.xq-secondary button:disabled{opacity:.4;cursor:default}.xq-secondary button:not(:disabled):hover{border-color:var(--green)}.xq-switches{border-top:1px solid var(--line);margin-top:20px;padding-top:12px}.xq-switches label{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:11px;padding:10px 0;cursor:pointer}.xq-switches input{appearance:none;width:32px;height:19px;background:#d7dcd3;border-radius:12px;position:relative;margin:0;cursor:pointer;flex-shrink:0}.xq-switches input:before{content:'';position:absolute;width:13px;height:13px;top:3px;left:3px;background:#fff;border-radius:50%;box-shadow:0 1px 3px #0002;transition:transform .15s}.xq-switches input:checked{background:var(--green)}.xq-switches input:checked:before{transform:translateX(13px)}.xq-how{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:42px;padding:12px 0 0;border-top:1px solid var(--line);margin-top:10px;color:var(--green);font-size:11px}.xq-how span{border:1px solid #bbcbb9;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:10px}.xq-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:17px 0 0}.xq-stats>div{display:flex;flex-direction:column-reverse;text-align:center;gap:6px}.xq-stats dt{font-size:9px;color:var(--muted)}.xq-stats dd{margin:0;font-size:23px;font-family:Georgia,serif;color:var(--ink)}.xq-history summary{font-size:11px;cursor:pointer;color:var(--text)}.xq-history summary span{float:right;color:var(--muted)}.xq-history ol{font-size:12px;line-height:1.9;color:var(--text);padding-left:26px;max-height:230px;overflow:auto;margin-bottom:0}.xq-engine{font-size:9px;color:var(--muted);text-align:center;line-height:1.6}.xq-engine a:hover{text-decoration:underline}.xq-notice{font-size:12px;line-height:1.7;color:var(--muted);margin-top:20px}.xq-text-button{font-size:12px;margin-top:10px;color:var(--green);text-decoration:underline}.xq-help{max-width:640px;width:calc(100% - 32px);max-height:85dvh;border:1px solid var(--line);border-radius:16px;background:var(--paper);color:var(--ink);padding:28px;box-shadow:0 20px 80px #182e3329}.xq-help::backdrop{background:#142e36a6;backdrop-filter:blur(3px)}.xq-help-top{display:flex;gap:20px;align-items:center;justify-content:space-between;margin-bottom:20px}.xq-help h2{font-size:30px}.xq-help h3{font-size:17px;margin-bottom:6px}.xq-help p{font-size:12px;line-height:1.8;color:var(--text)}.xq-help [data-close]:not(.xq-primary){font-size:26px;min-width:40px;min-height:40px}.xq-piece-guide{display:flex;flex-direction:column;gap:17px;margin:26px 0}.xq-piece-guide section{display:flex;gap:16px;align-items:start}.xq-guide-piece{flex-shrink:0;width:40px;height:40px;background:#f2dfbc;border:1px solid #bca071;border-radius:50%;display:grid;place-items:center;font:26px serif;color:#a0322a}.xq-keyboard-note{padding:14px 0;margin:12px 0}.xq-help .xq-primary{justify-content:center}.xq-library{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:30px;max-width:950px}.xq-game-card{border:1px solid var(--line);padding:24px;border-radius:15px;background:#fffefa;display:block}.xq-game-card:hover{border-color:#a5bca6}.xq-card-art{display:flex;align-items:center;justify-content:center;height:210px;padding:12px;background:#eee4ce;border-radius:9px;margin-bottom:22px}.xq-preview-board{display:block;height:100%;width:auto;max-width:100%;filter:drop-shadow(0 4px 5px #63421920);border-radius:5px}.xq-game-card h2{font-size:32px;margin:13px 0 10px}.xq-game-card p{font-size:13px;color:var(--muted);margin-bottom:24px}.xq-coming{padding:28px;border:1px dashed #d7dbcf;border-radius:15px;align-self:start}.xq-coming h2{font-size:25px;line-height:1.4;margin-bottom:26px}.xq-coming p{display:flex;justify-content:space-between;gap:20px;font-size:12px;padding:16px 0;border-top:1px solid var(--line)}.xq-coming p span{font-size:10px;color:var(--muted)}
@keyframes xq-breathe{50%{opacity:.25;transform:scale(.8)}}
@media(min-width:1000px){.desktop-nav{gap:20px}}
@media(max-width:900px){.xq-layout{grid-template-columns:minmax(0,1fr) 270px;gap:18px}.xq-panel{padding:18px}.xq-table{padding:14px}.xq-heading{display:block}.xq-local{display:block;margin-top:13px}.xq-piece{font-size:clamp(21px,3.4vw,32px)}}
@media(max-width:720px){.xq-page{padding-top:25px;padding-left:16px;padding-right:16px}.xq-heading{margin:20px 0}.xq-heading h1{font-size:31px;letter-spacing:-.8px}.xq-intro{font-size:12px}.xq-layout{grid-template-columns:1fr;gap:20px}.xq-table{padding:14px 10px 12px;border-radius:14px}.xq-piece{font-size:clamp(21px,6vw,37px)}.xq-sidebar{display:grid;grid-template-columns:1fr 1fr;gap:14px}.xq-sidebar>.xq-panel:nth-child(2){grid-row:span 3;grid-column:2}.xq-sidebar>.xq-status-panel{grid-row:1;grid-column:1}.xq-status-panel h2{font-size:25px}.xq-sidebar>.xq-engine{grid-column:1/-1}.xq-library{grid-template-columns:1fr;gap:20px}.xq-captured{font-size:10px}.xq-player{margin:10px 4px}.xq-local{font-size:10px}.xq-table-note{margin:10px 0 14px}}
@media(max-width:460px){.xq-sidebar{display:flex}.xq-panel{padding:20px}.xq-stats dd{font-size:25px}.xq-status-panel{min-height:auto}.xq-help{padding:22px}.xq-help h2{font-size:26px}}
@media(prefers-reduced-motion:reduce){.xq-piece,.xq-switches input:before{transition:none}.xq-thinking:after{animation:none}}

.xq-current-side{margin:18px 0 20px}.xq-current-side>span{color:var(--text)}
.xq-setup{max-width:460px;width:calc(100% - 32px);max-height:90dvh;overflow:auto;border:1px solid var(--line);border-radius:16px;background:var(--paper);color:var(--ink);padding:28px;box-shadow:0 20px 80px #182e3329}.xq-setup::backdrop{background:#142e36a6;backdrop-filter:blur(3px)}.xq-setup h2{font-size:30px}.xq-setup .xq-help-top{margin-bottom:10px}.xq-setup [data-setup-cancel]{font-size:12px;min-height:42px;padding:10px}.xq-setup .xq-help-top button{font-size:26px;min-width:40px}.xq-setup>form>p:first-of-type{font-size:13px;line-height:1.7;color:var(--text)}.xq-setup-levels{border:0;padding:0;margin:22px 0 0;display:grid;gap:7px}.xq-setup-levels legend{font-size:12px;margin-bottom:12px}.xq-setup-levels label{display:flex;gap:12px;align-items:center;min-height:48px;border:1px solid var(--line);border-radius:8px;padding:9px 12px;background:#fffefa;font-size:13px;cursor:pointer}.xq-setup-levels label:has(:checked){border-color:var(--green);background:#e9efe7;color:var(--green)}.xq-setup-levels input{accent-color:var(--green);margin:0;width:16px;height:16px}.xq-level-number{color:var(--muted);font-size:11px}.xq-setup-actions{display:flex;gap:12px;margin-top:24px;align-items:center}.xq-setup-actions>.xq-primary{flex:1}.xq-setup-actions>[data-setup-cancel]{border:1px solid var(--line);border-radius:7px;min-height:46px;padding:10px 18px}.xq-setup :focus-visible{outline:2px solid var(--green);outline-offset:3px}
@media(max-width:460px){.xq-setup{padding:20px}.xq-setup h2{font-size:26px}}

.xq-result{position:relative;width:calc(100% - 32px);max-width:440px;max-height:90dvh;overflow:auto;border:1px solid var(--line);border-radius:18px;background:var(--paper);color:var(--ink);padding:36px 30px 24px;text-align:center;box-shadow:0 20px 80px #182e3329}.xq-result::backdrop{background:#142e36a6;backdrop-filter:blur(3px)}.xq-result-close{position:absolute;right:12px;top:10px;width:40px;height:40px;font-size:26px;color:var(--text)}.xq-result-symbol{width:72px;height:72px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;background:#e4eddf;color:var(--green);font-size:38px;line-height:1}.xq-result[data-outcome=win] .xq-result-symbol{background:#f3e5be;color:#9b701d}.xq-result[data-outcome=loss] .xq-result-symbol{background:#e7eae5;color:#526458}.xq-result h2{font-size:32px;line-height:1.2;letter-spacing:-.6px;margin:12px 0 14px}.xq-result [data-result-message]{font-size:13px;line-height:1.8;color:var(--text)}.xq-result-detail{font-size:11px;line-height:1.7;color:var(--muted);margin:18px 0 26px}.xq-result .xq-primary{justify-content:center}.xq-result-review{width:100%;min-height:44px;margin-top:8px;color:var(--green);font-size:12px}.xq-result :focus-visible{outline:2px solid var(--green);outline-offset:3px}
@media(max-width:460px){.xq-result{padding:32px 22px 20px}.xq-result h2{font-size:28px}}

/* Keep the entire board visible on typical laptop screens. */
.xq-play-page{max-width:1000px;padding-top:18px;padding-bottom:32px}.xq-play-page>.text-link{font-size:11px}.xq-play-page .xq-heading{margin:10px 0 18px;gap:18px}.xq-play-page .xq-heading .eyebrow{display:none}.xq-play-page .xq-heading h1{font-size:32px;letter-spacing:-.7px;margin:0 0 7px;line-height:1.15}.xq-play-page .xq-intro{font-size:12px;line-height:1.6}.xq-play-page .xq-layout{grid-template-columns:minmax(0,1fr) 280px;gap:22px;max-width:850px;margin-inline:auto}.xq-play-page .xq-table{padding:12px}.xq-play-page .xq-board{width:100%;max-width:480px;margin-inline:auto;container-type:inline-size}.xq-play-page .xq-player{margin:8px 0;gap:9px}.xq-play-page .xq-opponent{margin-top:0}.xq-play-page .xq-avatar{width:30px;height:30px;border-radius:9px;font-size:21px}.xq-play-page .xq-player small{margin-top:2px}.xq-play-page .xq-table-note{margin:7px 0;font-size:10px}.xq-play-page .xq-captured{padding-top:8px;gap:8px}.xq-play-page .xq-piece{font-size:clamp(16px,5.5cqw,30px)}.xq-play-page .xq-panel{padding:18px}.xq-play-page .xq-status-panel{min-height:auto}.xq-play-page .xq-status-panel h2{font-size:25px}.xq-play-page .xq-local{margin-top:0}
@media(min-width:721px){.xq-play-page .xq-layout{grid-template-columns:minmax(0,min(504px,calc((100dvh - 340px)*.9 + 26px))) 280px;justify-content:center}.xq-play-page .xq-heading{display:flex}.xq-play-page .xq-board{max-width:clamp(240px,calc((100dvh - 340px)*.9),480px)}}
@media(max-width:720px){.xq-play-page{padding-top:16px}.xq-play-page .xq-heading{display:block;margin-bottom:16px}.xq-play-page .xq-heading h1{font-size:28px}.xq-play-page .xq-local{margin-top:7px}.xq-play-page .xq-layout{grid-template-columns:1fr;max-width:440px;gap:16px}.xq-play-page .xq-board{max-width:400px}.xq-play-page .xq-sidebar{display:flex;gap:12px}.xq-play-page .xq-sidebar>.xq-status-panel{order:-1}.xq-card-art{height:190px}}

/* Give desktop play more room; retain the compact tablet and phone layouts. */
@media(min-width:1024px){.xq-play-page{max-width:1120px;--xq-desktop-board-width:clamp(460px,calc((100dvh - 300px)*.9),600px)}.xq-play-page .xq-layout{grid-template-columns:minmax(0,calc(var(--xq-desktop-board-width) + 26px)) 280px;max-width:none;gap:26px}.xq-play-page .xq-board{max-width:var(--xq-desktop-board-width)}.xq-play-page .xq-piece{font-size:clamp(24px,5.5cqw,36px)}}