:root{--bg: #8f261d;--bg-grad: linear-gradient(165deg, #9c2a21 0%, #741813 100%);--on-bg: #fbeedc;--on-bg-dim: #e8c9a0;--header: #7a1a14;--header-line: #5c130e;--header-text: #fbeedc;--chip: rgba(255, 255, 255, .14);--chip-active: #e7c873;--chip-active-text: #5c130e;--chip-text: #f0d2b0;--panel: #f6ecd6;--panel-border: #d8b25a;--text: #3a140f;--text-dim: #8a5a3a;--accent: #c79a3a;--accent-text: #3a140f;--accent-shadow: rgba(199, 154, 58, .5);--seal: #f6ecd6;--seal-border: #c79a3a;--seal-ink: #9e2b22;--board-wood: linear-gradient(160deg, #ecc987, #ddb25a);--board-edge: #c79a3a;--board-line: #6e3a22;--river: #7e3a22;--disc-face: #fbf1d9;--disc-red-border: #9e2b22;--disc-black-border: #2e2620;--red-ink: #9e2b22;--black-ink: #241e18;--gold: #9e2b22;--dot: rgba(158, 43, 34, .45);--danger: #f0a08e;--font-serif: "Noto Serif SC", "Songti SC", serif;--font-sans: "Noto Sans SC", "PingFang SC", system-ui, -apple-system, sans-serif;--font-brush: "Ma Shan Zheng", "Noto Serif SC", cursive}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{margin:0;height:100%}body{background:var(--bg-grad) fixed,var(--bg);color:var(--on-bg);font-family:var(--font-sans)}.app-root{min-height:100%;display:flex;justify-content:center}.app-shell{width:100%;max-width:480px;padding:0 14px 24px;display:flex;flex-direction:column}.app-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:14px 2px 10px}.app-header-side{display:flex;align-items:center;min-width:0}.app-header-side-right{justify-content:flex-end}.app-header-titles{text-align:center}.app-header-title{font-family:var(--font-serif);font-size:18px;font-weight:700;color:var(--header-text);letter-spacing:1px}.app-header-sub{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--on-bg-dim)}.app-header-back,.app-header-lang{background:var(--chip);color:var(--header-text);border:none;border-radius:9px;padding:7px 11px;font-size:12px;font-weight:600;cursor:pointer}.screen{display:flex;flex-direction:column;gap:14px;align-items:center}.menu-screen{padding-top:18px}.screen-title{font-family:var(--font-serif);font-size:20px;font-weight:700;color:var(--on-bg);text-align:center}.xq-logo{font-family:var(--font-serif);font-weight:900;font-size:40px;line-height:1;letter-spacing:4px;color:var(--seal-ink);background:var(--seal);border:2px solid var(--seal-border);border-radius:22px;padding:16px 20px 16px 24px;margin:14px 0 4px;box-shadow:0 14px 28px -12px #0006}.xq-userline{display:flex;gap:10px;color:var(--on-bg-dim);font-size:14px}.xq-rating{color:var(--on-bg);font-weight:600}.btn-stack{display:flex;flex-direction:column;gap:13px;width:100%;max-width:320px}.xq-btn{width:100%;padding:16px 18px;border-radius:16px;border:1.5px solid var(--panel-border);background:var(--panel);color:var(--text);font-family:var(--font-serif);font-size:16px;font-weight:600;cursor:pointer;box-shadow:0 6px 16px -12px #0006;transition:transform .05s ease,filter .15s ease}.xq-btn:active{transform:scale(.98)}.xq-btn:disabled{opacity:.5;cursor:default}.xq-btn.primary{background:var(--accent);color:var(--accent-text);border-color:var(--accent);font-weight:700;box-shadow:0 10px 22px -10px var(--accent-shadow)}.xq-btn.ghost{background:transparent;color:var(--on-bg-dim)}.xq-btn.danger{background:transparent;border-color:var(--danger);color:#ff9a8e}.xq-btn.small{width:auto;padding:11px 18px;font-size:14px}.xq-field-label{color:var(--on-bg-dim);font-size:13px}.xq-seg{display:flex;gap:8px}.xq-seg-btn{padding:10px 18px;border-radius:11px;border:1.5px solid var(--panel-border);background:var(--panel);color:var(--text);font-weight:600;cursor:pointer}.xq-seg-btn.active{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}.xq-board-outer{width:100%;padding:16px 15px;border-radius:12px;background:var(--board-wood);border:2px solid var(--board-edge);box-shadow:0 10px 26px -14px #00000080,inset 0 1px #ffffff2e}.xq-grid{position:relative;width:100%;aspect-ratio:8 / 9;container-type:inline-size}.xq-lines{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;stroke:var(--board-line);stroke-width:1.3;fill:none}.xq-river{position:absolute;left:0;right:0;top:44.4%;height:11.1%;display:flex;align-items:center;justify-content:space-between;padding:0 12%;font-family:var(--font-brush);color:var(--river);opacity:.78;font-size:6cqw;letter-spacing:4px;pointer-events:none}.xq-cell{position:absolute;width:11.5cqw;height:11.5cqw;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer}.xq-dot{width:3.6cqw;height:3.6cqw;border-radius:50%;background:var(--dot);animation:dotPulse 1.2s ease-in-out infinite}.xq-move-overlay{pointer-events:none;z-index:6;transition:left .26s ease,top .26s ease}.xq-capture-fade{pointer-events:none;z-index:2;animation:xqCaptureFade .26s ease forwards}@keyframes xqCaptureFade{to{opacity:0;transform:translate(-50%,-50%) scale(.5)}}.xq-cell.dest{border-radius:50%;box-shadow:inset 0 0 0 2px var(--dot)}.xq-cell.origin:after{content:"";position:absolute;top:12%;right:12%;bottom:12%;left:12%;border-radius:50%;box-shadow:inset 0 0 0 2px #9e2b224d}.xq-cell.last{border-radius:50%;box-shadow:inset 0 0 0 2px #c79a3a73}.xq-cell.selected .xq-piece{--g: var(--gold);box-shadow:0 0 0 3px var(--gold),0 3px 8px #0006;animation:selRing 1.1s ease-in-out infinite}.xq-cell.check .xq-piece{box-shadow:0 0 0 3px var(--danger),0 0 12px var(--danger)}.xq-piece{width:100%;height:100%;border-radius:50%;background:var(--disc-face);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 5px #0000004d;border:.6cqw solid var(--disc-black-border)}.xq-piece-glyph{font-family:var(--font-serif);font-size:7.4cqw;font-weight:700;line-height:1}.xq-piece.red{border-color:var(--disc-red-border)}.xq-piece.red .xq-piece-glyph{color:var(--red-ink)}.xq-piece.black{border-color:var(--disc-black-border)}.xq-piece.black .xq-piece-glyph{color:var(--black-ink)}.game-screen{gap:12px;width:100%}.xq-topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:28px;padding:9px 13px;border-radius:13px;background:var(--panel);border:1px solid var(--panel-border)}.xq-turn-group{grid-column:2;display:flex;align-items:center;justify-content:center;gap:10px}.xq-mute{grid-column:3;justify-self:end;background:none;border:none;font-size:18px;line-height:1;cursor:pointer;padding:0 4px}.xq-turn{font-family:var(--font-serif);font-size:15px;color:var(--text-dim)}.xq-turn.active{color:var(--text);font-weight:700}.xq-check{color:#c0392b;font-weight:800;animation:blink 1s steps(2,start) infinite}@keyframes blink{50%{opacity:.3}}.xq-controls,.xq-row{display:flex;gap:10px;justify-content:center}.xq-draw-prompt{display:flex;flex-direction:column;gap:8px;align-items:center;background:var(--panel);border:1px solid var(--panel-border);color:var(--text);padding:12px 14px;border-radius:13px}.xq-status,.xq-hint{color:var(--on-bg-dim);font-size:14px;text-align:center}.xq-toast{color:var(--on-bg-dim);font-size:13px}.error-line{color:#ff8a7a;font-size:13px;text-align:center}.xq-result{font-family:var(--font-serif);font-size:30px;font-weight:900;margin:18px 0}.xq-result.win{color:#58d68d}.xq-result.lose{color:#ff7a6a}.xq-result.draw,.xq-result.neutral{color:var(--on-bg)}.xq-spinner{width:38px;height:38px;border:4px solid rgba(255,255,255,.18);border-top-color:var(--accent);border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.xq-table{width:100%;border-collapse:collapse;font-size:14px}.xq-table th,.xq-table td{padding:8px 6px;text-align:left;border-bottom:1px solid rgba(255,255,255,.12)}.xq-table th{color:var(--on-bg-dim);font-weight:600}.xq-table tr.me{background:#e7c8732e}.xq-rules{align-self:stretch;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.4}@keyframes selRing{0%,to{box-shadow:0 0 0 3px var(--g),0 3px 7px #00000059}50%{box-shadow:0 0 0 5px var(--g),0 3px 9px #0006}}@keyframes dotPulse{0%,to{opacity:.55}50%{opacity:1}}