/* A quiet public chess room. All playfield geometry uses the same 9 × 10 grid. */
@media(max-width:680px){body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-nickname-row input{font-size:16px}}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]){--xq-red:#a33229;--xq-black:#263c3b;--xq-green:#276349;--xq-wood:#edcfa1;--xq-grid:#967448;--xq-frame:#b0895b;--xq-soft:#f8f3e9;--xq-muted:#76644f}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-main{max-width:1080px;padding-top:26px}body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-heading{margin-bottom:24px}body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-heading h1{font-size:28px}body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-heading>p:not(.eyebrow){margin:8px 0}body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-heading .eyebrow{display:none}
.xq-room{display:grid;grid-template-columns:minmax(0,1fr) 284px;grid-template-rows:auto auto 1fr;grid-template-areas:"heading heading" "board controls" "board side";gap:18px 28px;align-items:start;min-width:0}.xq-room-heading{grid-area:heading;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:17px;border-bottom:1px solid var(--line)}.xq-room-kicker{display:block;color:var(--xq-muted);font-size:10px;letter-spacing:2px;margin-bottom:4px}.xq-room-heading h2{font:600 24px/1.4 "Songti SC","Noto Serif CJK SC","SimSun",serif;display:flex;align-items:center;gap:12px}.xq-room-badge{font:11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;color:var(--xq-muted);border:1px solid #dac7aa;background:var(--xq-soft);border-radius:4px;padding:3px 7px;white-space:nowrap}.xq-presence{display:flex;flex-wrap:wrap;gap:5px 14px;align-items:center;justify-content:flex-end;font-size:11px;color:var(--muted);min-width:0}.xq-connection{display:inline-flex;align-items:center;gap:6px}.xq-connection:before{content:"";width:6px;height:6px;border-radius:50%;background:#a6a5a0;flex-shrink:0}.xq-connection[data-state=connected]:before{background:#408666}.xq-connection[data-state=reconnecting]:before,.xq-connection[data-state=offline]:before{background:#b7772c}.xq-presence .quiet-button{min-height:32px;padding:0;font-size:11px}
.xq-controls{grid-area:controls;border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:20px;min-width:0}.xq-controls label{display:block;font-size:13px;font-weight:600;margin-bottom:10px}.xq-nickname-row{display:flex;flex-wrap:wrap;gap:10px}.xq-nickname-row input{width:100%;min-width:0;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:11px 12px;min-height:44px;color:var(--ink);font-size:13px}.xq-nickname-row .primary-button{width:100%}.xq-small{font-size:11px;color:var(--muted);line-height:1.8;margin-top:10px;overflow-wrap:anywhere}.xq-identity{display:flex;align-items:center;gap:10px;min-width:0;margin-bottom:17px}.xq-avatar{display:grid;place-items:center;flex:none;width:36px;height:36px;color:var(--xq-muted);background:var(--xq-soft);border-radius:50%;font:18px "Songti SC","SimSun",serif}.xq-identity>div{min-width:0}.xq-identity strong{display:block;font-size:14px;overflow-wrap:anywhere;font-weight:600}.xq-identity #xq-my-role{display:block;font-size:11px;color:var(--muted)}.xq-actions{display:flex;flex-wrap:wrap;gap:8px}.xq-actions>.primary-button{width:100%}.xq-actions>.secondary-button{flex:1}.xq-controls .primary-button{background:var(--xq-green);border-color:var(--xq-green);color:#fff}.xq-controls .xq-danger{color:var(--xq-red)}.xq-controls .form-error{font-size:12px;margin-top:12px}
.xq-playfield{grid-area:board;width:100%;max-width:600px;margin-inline:auto;min-width:0}.xq-turn-strip{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:13px;min-height:24px}.xq-turn-strip strong{font-size:14px;color:var(--xq-green);overflow-wrap:anywhere}.xq-turn-strip strong[data-check=true]{color:var(--xq-red)}.xq-turn-strip>span{font-size:11px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}.xq-seat{display:flex;align-items:center;gap:9px;min-width:0;min-height:58px;padding:8px 12px;background:var(--paper);border:1px solid var(--line);border-radius:9px}.xq-seat[data-current=true]{border-color:#8eac99;box-shadow:inset 3px 0 0 var(--xq-green)}.xq-seat-symbol{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;border:1px solid #ddc5a3;background:#f6e6cc;font:600 23px/1 "Kaiti SC","KaiTi","STKaiti","SimSun",serif;color:var(--xq-black)}.xq-seat[data-side=red] .xq-seat-symbol{color:var(--xq-red)}.xq-seat-copy{min-width:0;flex:1}.xq-seat-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600}.xq-seat-detail{display:block;font-size:10px;color:var(--muted)}.xq-seat-tag{font-size:11px;color:var(--muted);white-space:nowrap}.xq-seat[data-you=true] .xq-seat-tag{color:var(--xq-green)}
.xq-board{position:relative;width:100%;aspect-ratio:9/10;margin:11px 0;border:2px solid var(--xq-frame);border-radius:7px;background:radial-gradient(ellipse at 30% 15%,#f7e4c4b0,transparent 65%),repeating-linear-gradient(0deg,#b8874210 0,#b8874210 1px,transparent 1px,transparent 7px),var(--xq-wood);box-shadow:0 3px 0 #936a3c,0 10px 22px #65503014;container-type:inline-size;isolation:isolate}.xq-board-lines{position:absolute;inset:0;width:100%;height:100%;color:var(--xq-grid);pointer-events:none}.xq-river{font:40px "Kaiti SC","KaiTi","STKaiti","SimSun",serif;letter-spacing:14px}.xq-intersections{position:absolute;inset:0;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));grid-template-rows:repeat(10,minmax(0,1fr))}.xq-cell{position:relative;display:grid;place-items:center;width:100%;height:100%;min-width:0;min-height:0;border:0;padding:0;background:transparent;color:var(--xq-black);touch-action:manipulation;outline-offset:-2px;isolation:isolate;border-radius:6px}.xq-cell:focus-visible{outline:2px solid #174f7a;outline-offset:-2px;z-index:3}.xq-cell:disabled{opacity:1}.xq-piece{width:82%;height:82%;display:grid;place-items:center;aspect-ratio:1;border-radius:50%;border:1px solid #b28a59;background:radial-gradient(circle at 38% 28%,#fff3dc,#eacb97);box-shadow:inset 0 0 0 2px #fbe8c5,inset 0 0 0 3px #c6a375,0 2px 1px #946d3d;color:var(--xq-black);font:700 clamp(17px,4.9cqw,32px)/1 "Kaiti SC","KaiTi","STKaiti","SimSun",serif;transition:box-shadow .12s,background .12s;user-select:none;-webkit-user-select:none;z-index:1}.xq-piece[data-side=red]{color:var(--xq-red)}.xq-cell[data-selected=true] .xq-piece{background:#fff5dc;box-shadow:inset 0 0 0 2px #fff5dc,inset 0 0 0 3px #bc975f,0 0 0 3px var(--xq-green),0 3px 6px #38472e44;transform:translateY(-1px)}.xq-cell[data-last=true]:after{content:"";position:absolute;inset:9%;border:2px dashed #376349;border-radius:50%;opacity:.8;z-index:2;pointer-events:none}.xq-cell[data-legal=true]:before{content:"";position:absolute;width:22%;height:22%;border-radius:50%;background:#28674b;box-shadow:0 0 0 4px #faf2dbb0;z-index:2;pointer-events:none}.xq-cell[data-legal=true][data-occupied=true]:before{width:85%;height:85%;background:transparent;border:3px solid #28674b;box-shadow:none}.xq-cell[data-selected=true]:after{display:none}.xq-board-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px}.xq-board-footer p{font-size:11px;color:var(--muted);overflow-wrap:anywhere}.xq-board-footer button{flex:none;font-size:11px;min-height:38px;padding:6px 10px;background:transparent}.xq-board-footer button span{margin-left:5px}
.xq-side{grid-area:side;min-width:0}.xq-history{padding:2px 0 12px}.xq-section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}.xq-section-title h3{font-size:13px;font-weight:600}.xq-section-title>span{font-size:10px;color:var(--muted)}.xq-empty{font-size:12px;color:var(--muted);line-height:1.9;padding:21px 0}.xq-moves{list-style:none;margin:0;padding:0;display:grid}.xq-moves li{display:grid;grid-template-columns:24px 36px minmax(0,1fr);align-items:center;gap:8px;font-size:12px;padding:9px 0;border-bottom:1px solid var(--line)}.xq-moves li:first-child{font-weight:600}.xq-move-number{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}.xq-move-piece{color:var(--xq-black)}.xq-move-piece[data-side=red]{color:var(--xq-red)}.xq-move-path{font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted)}.xq-rules{margin-top:9px}.xq-rules summary{font-size:12px;gap:10px}.xq-rules>div{padding:0 0 14px;font-size:11px;color:var(--muted);line-height:1.9}.xq-rules p+p{margin-top:12px}.xq-dialog{width:min(420px,calc(100vw - 32px));padding:28px;border:1px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink);box-shadow:0 20px 80px #0004}.xq-dialog::backdrop{background:#1e261c80}.xq-dialog h2{font-size:23px;margin:10px 0}.xq-dialog p{font-size:13px;color:var(--muted);line-height:1.9}.xq-dialog .actions{justify-content:flex-end}.xq-dialog .primary-button{background:#a33229;border-color:#a33229;color:#fff}
html[data-theme=dark] body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]){--xq-soft:#33352d;--xq-muted:#c7b89b;--xq-red:#eb9c87;--xq-black:#cfdfd5;--xq-green:#a3cdb4;--xq-wood:#d3b486;--xq-grid:#705334;--xq-frame:#a58356}html[data-theme=dark] .xq-controls .primary-button{background:#386c50;border-color:#58876c;color:#fff}html[data-theme=dark] .xq-board{--xq-red:#a33229;--xq-black:#263c3b;--xq-green:#276349}html[data-theme=dark] .xq-seat-symbol{color:#263c3b}html[data-theme=dark] .xq-seat[data-side=red] .xq-seat-symbol{color:#a33229}html[data-theme=dark] .xq-room-badge{border-color:#645944}
@media(max-width:800px){.xq-room{grid-template-columns:minmax(0,1fr) 250px;gap:16px 20px}.xq-controls{padding:16px}.xq-presence{max-width:200px}.xq-room-heading h2{font-size:22px}}
@media(max-width:680px){body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-main{padding:21px 16px}body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-heading{margin-bottom:20px}body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-heading h1{font-size:25px}body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-heading>p:not(.eyebrow){font-size:12px}body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-heading .privacy-note{font-size:10px;line-height:1.8}.xq-room{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"heading" "controls" "board" "side";gap:14px}.xq-room-heading{padding-bottom:12px;gap:8px;align-items:flex-start}.xq-room-heading h2{font-size:21px;gap:7px}.xq-room-kicker{font-size:9px}.xq-room-badge{font-size:9px;padding:2px 5px}.xq-presence{font-size:10px;max-width:130px;gap:1px 8px}.xq-controls{padding:13px 14px}.xq-controls label{font-size:12px;margin-bottom:8px}.xq-nickname-row{flex-wrap:nowrap;gap:8px}.xq-nickname-row input{flex:1;width:0;font-size:12px;padding:10px}.xq-nickname-row .primary-button{flex:none;width:auto;font-size:12px;padding-inline:12px}.xq-small{font-size:10px;margin-top:6px}.xq-controls:has(#xq-identity:not([hidden])){display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:center}.xq-identity{margin-bottom:0;gap:8px}.xq-avatar{width:29px;height:29px;font-size:16px}.xq-identity strong{font-size:12px}.xq-identity #xq-my-role{font-size:10px}.xq-actions{justify-content:flex-end;gap:6px}.xq-actions>.primary-button{width:auto;max-width:160px}.xq-actions button{font-size:11px;min-height:40px;padding:7px 10px}.xq-controls #xq-action-hint,.xq-controls .form-error{grid-column:1/-1}.xq-turn-strip{margin-bottom:9px}.xq-turn-strip strong{font-size:13px}.xq-seat{min-height:48px;padding:6px 10px}.xq-seat-symbol{width:30px;height:30px;font-size:21px}.xq-seat-name{font-size:12px}.xq-seat-detail{font-size:9px}.xq-board{margin:9px 0}.xq-board-footer{margin-top:8px}.xq-board-footer p{font-size:10px}.xq-side{margin-top:3px}.xq-history{border-top:1px solid var(--line);padding-top:16px}.xq-moves{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}.xq-moves li{gap:5px;grid-template-columns:18px 30px minmax(0,1fr);font-size:11px}.xq-move-path{font-size:10px}.xq-rules summary{font-size:12px}.xq-rules>div{font-size:12px}}
@media(max-width:380px){body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-main{padding-inline:12px}.xq-controls{padding:12px}.xq-room-heading h2{font-size:20px}.xq-room-badge{display:none}.xq-controls:has(#xq-identity:not([hidden])){grid-template-columns:minmax(0,1fr)}.xq-identity{margin-bottom:3px}.xq-actions{justify-content:flex-start}.xq-actions>.primary-button{flex:1;max-width:none}.xq-actions>.secondary-button{flex:none}.xq-moves{gap:0 10px}.xq-move-path{font-size:9px}.xq-river{font-size:36px}}
@media(prefers-reduced-motion:reduce){.xq-piece{transition:none}}
/* Keep the chessboard close to the top on phones without reducing tap targets. */
@media(max-width:680px){
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-topbar{padding:10px 16px;gap:10px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-topbar .brand{font-size:14px;gap:7px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-topbar .header-actions{display:grid;grid-template-columns:auto auto;gap:3px 7px;align-items:center}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-topbar .back-link{grid-column:1/-1;justify-self:end}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-main{padding-top:16px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-heading{margin-bottom:12px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-heading>p:not(.eyebrow){display:none}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-heading .privacy-note{margin-top:7px}
  .xq-room{gap:10px}.xq-room-kicker{display:none}
}
@media(max-width:380px){
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-topbar{flex-wrap:wrap}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-topbar .header-actions{width:100%;grid-template-columns:1fr auto auto}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-topbar .back-link{grid-column:auto;justify-self:start}
}

/* One chat panel lives in the sidebar, then moves into a sheet on phones. */
.xq-board-footer{flex-wrap:wrap}.xq-board-tools{display:flex;flex-wrap:wrap;gap:7px;align-items:center}.xq-board-footer .xq-board-tools button{min-height:44px;padding:8px 11px}.xq-board-tools .xq-chat-launcher{display:none}.xq-chat-unread{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:12px;background:var(--xq-green);color:var(--paper);font:600 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.xq-board-tools .xq-chat-unread{margin-left:4px}
.xq-chat-dock{margin-bottom:22px}.xq-chat-panel{display:flex;flex-direction:column;height:448px;min-height:0;border:1px solid var(--line);border-radius:12px;background:var(--paper);overflow:hidden}.xq-chat-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 14px 12px;border-bottom:1px solid var(--line);flex:none}.xq-chat-header h3{font-size:14px;font-weight:650}.xq-chat-header p{font-size:10px;color:var(--muted);margin-top:3px}.xq-chat-header #xq-chat-close{display:none;min-height:44px;font-size:12px;padding:8px 13px}.xq-chat-scroll{flex:1;min-height:68px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:13px 12px;overflow-anchor:none}.xq-chat-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}.xq-chat-empty{font-size:12px;color:var(--muted);line-height:1.9;text-align:center;padding:25px 0}.xq-chat-messages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}.xq-chat-message{min-width:0;max-width:100%;align-self:flex-start}.xq-chat-message[data-own=true]{align-self:flex-end}.xq-chat-message-meta{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;font-size:10px;line-height:1.5;margin-bottom:5px;color:var(--muted)}.xq-chat-message[data-own=true] .xq-chat-message-meta{justify-content:flex-end}.xq-chat-sender{font-weight:600;color:var(--ink);overflow-wrap:anywhere;max-width:100%}.xq-chat-role{font-size:9px;padding:1px 4px;border-radius:3px;background:var(--bg);white-space:nowrap}.xq-chat-role[data-role=red]{color:var(--xq-red)}.xq-chat-role[data-role=black]{color:var(--xq-black)}.xq-chat-time{font-variant-numeric:tabular-nums;font-size:9px}.xq-chat-text{background:var(--bg);border:1px solid var(--line);border-radius:2px 9px 9px;padding:8px 10px;font-size:13px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;min-width:0}.xq-chat-message[data-own=true] .xq-chat-text{background:var(--xq-soft);border-color:#d8c8ae;border-radius:9px 2px 9px 9px}.xq-chat-latest{align-self:center;flex:none;min-height:44px;margin:0 10px 5px;border:0;background:var(--accent-soft);color:var(--accent);border-radius:8px;padding:8px 14px;font-size:12px}.xq-chat-form{flex:none;padding:11px 12px 12px;border-top:1px solid var(--line);background:var(--paper)}.xq-chat-compose{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;align-items:end}.xq-chat-compose textarea{display:block;width:100%;min-width:0;min-height:65px;max-height:140px;resize:vertical;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:9px 10px;font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}.xq-chat-compose button{min-height:44px;padding:9px 12px;font-size:12px;background:var(--xq-green);border-color:var(--xq-green);color:var(--paper);white-space:nowrap}.xq-chat-form-meta{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:9px;color:var(--muted);margin-top:7px}.xq-chat-form-meta>span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}.xq-chat-form-meta>span[data-over=true]{color:var(--error-ink)}.xq-chat-status:empty{display:none}.xq-chat-status{font-size:10px;line-height:1.7;color:var(--muted);margin-top:6px}.xq-chat-form .form-error{font-size:11px;line-height:1.7;padding:8px;margin-top:7px}.xq-chat-dialog{position:fixed;inset:auto 0 0;width:100%;max-width:100%;height:min(78dvh,640px);max-height:none;margin:0;padding:0;border:1px solid var(--line);border-bottom:0;border-radius:18px 18px 0 0;background:var(--paper);color:var(--ink);overflow:hidden;box-shadow:0 -8px 36px #0003}.xq-chat-dialog::backdrop{background:#18231f66}.xq-chat-mobile-mount{height:100%;min-height:0}.xq-chat-dialog .xq-chat-panel{height:100%;border:0;border-radius:0}.xq-chat-dialog .xq-chat-header{padding:10px 16px;min-height:65px}.xq-chat-dialog .xq-chat-header #xq-chat-close{display:block}.xq-chat-dialog .xq-chat-scroll{padding:14px 16px}.xq-chat-dialog .xq-chat-form{padding:11px 16px max(12px,env(safe-area-inset-bottom))}.xq-chat-dialog .xq-chat-compose textarea{resize:none}.xq-chat-dialog .xq-chat-message{max-width:90%}.xq-chat-dialog .xq-chat-text{font-size:14px}.xq-chat-dialog .xq-chat-message-meta{font-size:11px}.xq-chat-dialog .xq-chat-form-meta{font-size:10px}body.xq-chat-open{overflow:hidden}
html[data-theme=dark] .xq-chat-message[data-own=true] .xq-chat-text{border-color:#645944}html[data-theme=dark] .xq-chat-compose button{background:#386c50;border-color:#58876c;color:#fff}
@media(max-width:680px){.xq-chat-dock{display:none}.xq-board-tools .xq-chat-launcher{display:inline-flex;align-items:center;justify-content:center;color:var(--xq-green);border-color:#8eac99}.xq-board-footer{gap:7px}.xq-board-footer>p{width:100%}.xq-board-tools{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.xq-board-footer .xq-board-tools button{min-width:0;min-height:44px;padding:8px 7px;font-size:11px}.xq-board-tools .xq-chat-unread{margin-left:4px}}

/* The board owns the viewport; secondary reading stays folded away. */
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-topbar{max-width:none;min-height:52px;padding:5px max(16px,calc((100vw - 1120px)/2));gap:12px;align-items:center}body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-page-title{font-size:19px;line-height:1.3;letter-spacing:0;white-space:nowrap}body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-topbar .header-actions{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;gap:12px;width:auto}body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-topbar .theme-control{font-size:0;gap:0}body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-topbar .theme-control select{font-size:11px;min-height:38px}body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-main{max-width:1160px;padding:10px 20px 8px}.xq-room{grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:auto auto minmax(0,1fr);gap:10px 20px}.xq-room-heading{padding:0 0 7px;min-height:28px;align-items:center}.xq-room-heading h2{font:600 12px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;color:var(--muted)}.xq-presence{max-width:none;gap:8px;font-size:10px}.xq-controls{padding:12px;border-radius:10px}.xq-identity{margin-bottom:9px}.xq-controls:has(#xq-identity:not([hidden])) #xq-action-hint{display:none}.xq-controls:has(#xq-actions[hidden]) .xq-identity{margin-bottom:0}.xq-controls .xq-actions>button{min-height:44px}.xq-playfield{max-width:600px;min-width:0}.xq-turn-strip{background:#f3f5f0;border:1px solid #c9d8cb;border-left:4px solid var(--xq-green);border-radius:8px;min-height:44px;padding:7px 11px;margin-bottom:7px}.xq-turn-strip strong{font-size:15px;line-height:1.5;color:var(--xq-green);letter-spacing:.2px}.xq-turn-strip[data-your-turn=true]{background:#e8f3e8;border-color:#6a9a7b;box-shadow:0 2px 8px #386b4412}.xq-turn-strip[data-your-turn=true] strong{font-weight:750}.xq-turn-strip[data-side=red]:not([data-status=waiting]){border-left-color:var(--xq-red)}.xq-turn-strip[data-check=true]{background:#fff0e8;border-color:#be6652}.xq-turn-strip[data-status=finished]{background:var(--xq-soft);border-color:#b49d71}.xq-seat{min-height:38px;padding:4px 9px;border-radius:7px}.xq-seat-symbol{position:relative;width:27px;height:27px;font-size:20px}.xq-seat-detail{display:none}.xq-seat[data-connected=false] .xq-seat-detail{display:block}.xq-seat[data-current=true]{border:2px solid #527e64;padding:3px 8px;box-shadow:inset 3px 0 0 var(--xq-green);background:var(--xq-soft)}.xq-seat[data-current=true] .xq-seat-symbol:after{content:"";position:absolute;right:-3px;bottom:-2px;width:8px;height:8px;border:2px solid var(--paper);border-radius:50%;background:var(--xq-green);animation:xq-turn-breathe 2s ease-in-out 2}.xq-board{margin:7px 0}.xq-piece{font-size:clamp(10px,5.7cqw,32px)}.xq-board-footer{margin-top:6px;gap:0}.xq-board-footer>p{display:none}.xq-board-tools{width:100%;justify-content:flex-end}.xq-board-tools #xq-more-open{display:none}.xq-board-footer .xq-board-tools button{font-size:11px;min-height:44px;padding:7px 10px}.xq-side{display:flex;flex-direction:column;min-height:0}.xq-chat-dock{flex:1;min-height:170px;margin-bottom:8px}.xq-chat-panel{height:100%;min-height:0}.xq-secondary-pane{flex:none;min-height:0;max-height:40dvh;overflow-y:auto}.xq-secondary-pane details{margin:0}.xq-secondary-pane summary{min-height:42px;padding:8px 0;font-size:11px}.xq-secondary-pane .xq-history{padding:0;border:0}.xq-info-dialog{width:min(560px,calc(100vw - 24px));max-height:85dvh;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink);overflow-y:auto}.xq-info-dialog::backdrop{background:#18231f66}.xq-info-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.xq-info-dialog h2{font-size:17px}.xq-info-dialog>header button{min-height:44px;font-size:12px}.xq-info-dialog .xq-secondary-pane{display:block;max-height:none;overflow:visible}.xq-info-dialog .xq-secondary-pane summary{font-size:13px;min-height:48px}.xq-undo-banner{border:1px solid #c6a267;background:var(--xq-soft);border-radius:8px;padding:10px 12px;margin-bottom:8px}.xq-undo-heading{display:flex;justify-content:space-between;gap:10px;align-items:center}.xq-undo-heading strong{font-size:13px}.xq-undo-heading>span{font-size:10px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}.xq-undo-banner p{font-size:11px;color:var(--muted);line-height:1.7;margin:5px 0 8px}.xq-undo-actions{display:flex;flex-wrap:wrap;gap:7px}.xq-undo-actions:has(>button:not([hidden])){margin-top:6px}.xq-undo-actions button{min-height:44px;font-size:12px;padding:7px 12px}.xq-undo-actions .primary-button{background:var(--xq-green);border-color:var(--xq-green);color:var(--paper)}.xq-event-feedback{font-size:11px;line-height:1.6;padding:6px 9px;border-radius:6px;background:var(--xq-soft);color:var(--xq-muted);margin:0 0 7px}.xq-chat-status{max-height:36px;overflow:auto}
html[data-theme=dark] .xq-turn-strip{background:#25392f;border-color:#58725f}html[data-theme=dark] .xq-turn-strip[data-your-turn=true]{background:#2b4634;border-color:#a3cdb4}html[data-theme=dark] .xq-turn-strip[data-check=true]{background:#492e27;border-color:#cf8a70}html[data-theme=dark] .xq-turn-strip[data-status=finished]{background:var(--xq-soft)}html[data-theme=dark] .xq-undo-actions .primary-button{background:#386c50;color:#fff}
@keyframes xq-turn-breathe{0%,100%{box-shadow:0 0 0 0 #4f936d00}50%{box-shadow:0 0 0 4px #4f936d35}}
@media(max-width:800px) and (min-width:681px){.xq-room{grid-template-columns:minmax(0,1fr) 250px;column-gap:16px}}
@media(max-width:680px){body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-topbar{min-height:48px;padding:4px 12px;flex-wrap:nowrap;gap:8px}body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-page-title{font-size:17px}body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-topbar .header-actions{gap:8px}body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-topbar .back-link{font-size:10px}body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-topbar .theme-control select{min-height:38px;max-width:96px}body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-main{padding:7px 12px 6px}.xq-room{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;gap:7px;grid-template-areas:"heading" "controls" "board" "side"}.xq-room-heading{min-height:25px;padding-bottom:4px;gap:7px}.xq-room-heading h2{font-size:11px}.xq-presence{font-size:9px;gap:7px}.xq-controls{padding:8px 10px}.xq-controls:has(#xq-identity:not([hidden])){grid-template-columns:minmax(0,1fr) auto;gap:5px 8px}.xq-identity{margin:0;gap:6px}.xq-avatar{display:none}.xq-identity strong{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}.xq-identity #xq-my-role{font-size:9px}.xq-actions{max-width:190px;gap:5px;justify-content:flex-end}.xq-actions>.primary-button{max-width:none;flex:none}.xq-actions>.secondary-button{flex:none}.xq-controls .xq-actions>button{min-height:44px;padding:6px 9px;font-size:10px}.xq-controls label{margin-bottom:5px;font-size:11px}.xq-nickname-row input{padding:8px;min-height:40px}.xq-nickname-row .primary-button{min-height:40px;padding:8px 10px}.xq-small{margin-top:4px;font-size:9px}.xq-controls #xq-action-hint{display:none}.xq-turn-strip{min-height:38px;padding:5px 8px;margin-bottom:5px;gap:6px}.xq-turn-strip strong{font-size:13px}.xq-turn-strip>span{font-size:9px}.xq-seat{min-height:33px;padding:3px 8px;gap:7px}.xq-seat[data-current=true]{padding:2px 7px}.xq-seat-symbol{width:24px;height:24px;font-size:18px}.xq-seat-name{font-size:11px}.xq-seat-tag{font-size:10px}.xq-seat-detail{font-size:9px}.xq-board{margin:5px 0}.xq-board-footer{margin-top:5px}.xq-board-tools{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.xq-board-tools #xq-more-open{display:block}.xq-board-footer .xq-board-tools button{padding:6px 3px;font-size:10px;min-height:44px}.xq-board-footer button span{margin-left:2px}.xq-side{margin:0;height:0!important}.xq-secondary-pane{display:none}.xq-undo-banner{padding:8px 9px;margin-bottom:6px}.xq-undo-banner p{font-size:10px}.xq-undo-heading strong{font-size:12px}.xq-undo-actions button{font-size:11px;padding:6px 10px}}
@media(max-height:600px){.xq-turn-strip{min-height:32px;padding-block:4px}.xq-turn-strip strong{font-size:12px}.xq-seat{min-height:28px;padding-block:2px}.xq-seat[data-current=true]{padding-block:1px}.xq-seat-symbol{width:21px;height:21px;font-size:16px}.xq-seat-name{font-size:10px}.xq-seat-detail{font-size:8px}.xq-board{margin-block:4px}.xq-board-footer{margin-top:3px}.xq-controls{padding:7px 9px}.xq-identity{margin-bottom:5px}.xq-chat-dock{min-height:130px}.xq-chat-header{padding:7px 10px}.xq-chat-header h3{font-size:12px}.xq-chat-header p{margin-top:0;font-size:9px}.xq-chat-scroll{min-height:28px;padding:7px}.xq-chat-form{padding:6px 8px}.xq-chat-compose textarea{min-height:44px;height:44px}.xq-chat-form-meta{font-size:8px;margin-top:3px}.xq-chat-form #xq-chat-hint{max-width:155px}.xq-secondary-pane summary{min-height:32px;padding:4px 0}.xq-info-dialog .xq-secondary-pane summary{min-height:44px}.xq-chat-dialog .xq-chat-header{min-height:55px}.xq-chat-dialog .xq-chat-scroll{min-height:28px}.xq-chat-dialog .xq-chat-form{padding-block:8px}}
@media(prefers-reduced-motion:reduce){.xq-seat[data-current=true] .xq-seat-symbol:after{animation:none}.xq-piece{transition:none}}

/* Modern Chinese chess room: a green playing table, carved wood, brass, glass. */
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]),html[data-theme=dark] body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]){
  --bg:#112f26;--paper:#193d32;--ink:#f0ecdc;--muted:#aec3b5;--line:#b4cdb62b;
  --accent:#d6bb7c;--accent-contrast:#17372b;--accent-soft:#bddacb12;
  --error-bg:#703b2c66;--error-ink:#ffc0a3;
  --xq-red:#efac8c;--xq-black:#d8e7d9;--xq-green:#acd7bd;
  --xq-soft:#d8ba7414;--xq-muted:#d8c492;--xq-wood:#d6ac70;
  --xq-grid:#7f5930;--xq-frame:#967039;
  background-color:#102d24;
  background-image:radial-gradient(ellipse at 42% 38%,#335a4466 0,transparent 65%),radial-gradient(ellipse at 90% 100%,#071c1766,transparent 60%),repeating-linear-gradient(132deg,#b9d2bc04 0,#b9d2bc04 1px,transparent 1px,transparent 5px);
  color:var(--ink);min-height:100dvh;color-scheme:dark;
}
html[data-theme=dark] body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]){background-color:#0a211c;background-image:radial-gradient(ellipse at 42% 38%,#29553f66 0,transparent 65%),repeating-linear-gradient(132deg,#b9d2bc04 0,#b9d2bc04 1px,transparent 1px,transparent 5px)}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-topbar{
  background:linear-gradient(90deg,#071e17c9,#183c2dbd 48%,#071e17c9);
  border-bottom:1px solid #d3b97935;box-shadow:0 3px 18px #03170e22;
}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-page-title{font-family:"Songti SC","Noto Serif CJK SC","SimSun",serif;color:#eedeb5;letter-spacing:2px;display:flex;align-items:center;gap:10px}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-page-title:before{content:"棋";display:grid;place-items:center;flex:none;width:28px;height:28px;border:1px solid #d3b97987;box-shadow:inset 0 0 0 3px #122e20,inset 0 0 0 4px #bfa96a5c;color:#e8ce91;font:700 18px/1 "KaiTi","STKaiti","SimSun",serif;letter-spacing:0;border-radius:5px;background:#183b28;transform:rotate(-4deg)}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-topbar .back-link{color:#b9cab8;transition:color .15s}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-topbar .back-link:hover{color:#f2dfad}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-topbar .theme-control select{background:#143126;border-color:#a5bda43d;color:#d9dfcd;border-radius:6px}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-main{max-width:min(1120px,calc((100dvh - 300px)*.9 + 360px))}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-room-heading{border-bottom-color:#d6bd7e25}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-room-heading h2{letter-spacing:1.5px;color:#d3d6bd;display:flex;align-items:center;gap:7px}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-room-heading h2:before{content:"";width:5px;height:5px;background:#d0b16b;transform:rotate(45deg);box-shadow:0 0 8px #d0b16b44}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-presence{color:#a1bfa9}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-connection[data-state=connected]:before{background:#9ed2ac;box-shadow:0 0 7px #84d7a04d}

/* The slim table rail adds depth without taking any space from the board. */
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-playfield{position:relative;isolation:isolate}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-playfield:before{content:"";position:absolute;inset:-7px -11px -7px;z-index:-1;pointer-events:none;border:1px solid #ddc78615;border-radius:15px;background:linear-gradient(145deg,#c9dbbf05,#061c1438);box-shadow:inset 0 1px 0 #d3e2c109,0 12px 34px #061d1525}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-board{
  margin-inline:auto;border:3px solid #9e783d;border-radius:7px;
  background-color:#dfbb80;
  background-image:radial-gradient(ellipse at 25% 15%,#fff1c06e,transparent 65%),linear-gradient(105deg,#8f5c1f10,transparent 23%,#fff4c825 52%,transparent 76%),repeating-linear-gradient(0deg,#9c652613 0,#9c652613 1px,transparent 1px,transparent 6px),repeating-linear-gradient(89deg,transparent 0,transparent 65px,#8e642306 66px,transparent 68px);
  box-shadow:inset 0 0 0 2px #f5dba6,0 2px 0 #e1bc7b,0 5px 0 #76532b,0 7px 0 #3e2e1b,0 15px 26px #021a125c;
  --xq-red:#a33529;--xq-black:#1c4138;--xq-green:#276d57;
}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-board:before{content:"";position:absolute;inset:-2px;border:1px solid #daba7a;border-radius:4px;pointer-events:none;z-index:4}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-board-lines{color:#805b31;opacity:.91}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-river{font-family:"KaiTi","STKaiti","Kaiti SC","SimSun",serif;font-size:39px;letter-spacing:11px;fill:#845b2a;opacity:.8}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-piece{
  width:84%;height:84%;border:1px solid #a77b3a;
  background:radial-gradient(circle at 35% 24%,#fff4d4 0,#f5dba6 57%,#d5aa68 100%);
  color:#24473a;text-shadow:0 1px 0 #fff8df;font-weight:700;
  box-shadow:inset 0 1px 0 #fff9e2,inset 0 0 0 1px #ffedc2,inset 0 0 0 3px #b58a4c,inset 0 -3px 4px #8a5e2859,0 3px 0 #946b34,0 4px 1px #4a351e75,0 6px 6px #503b2445;
}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-piece[data-side=red]{color:#a3372b;text-shadow:0 1px 0 #fff1c8}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-cell[data-selected=true] .xq-piece{background:radial-gradient(circle at 40% 28%,#fffce8,#f8dfa7);box-shadow:inset 0 0 0 1px #fff5d4,inset 0 0 0 3px #bd9559,0 0 0 3px #2b7962,0 0 0 5px #a9ddbd78,0 4px 0 #6d6035,0 8px 10px #18382355}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-cell[data-last=true]:after{inset:5%;border:1px dashed #316d51;box-shadow:0 0 0 1px #eee0a74d;opacity:.9}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-cell[data-legal=true]:before{background:#32775b;box-shadow:0 0 0 4px #f9e5bfa6}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-cell[data-legal=true][data-occupied=true]:before{background:transparent;border-color:#32775b;box-shadow:0 0 0 2px #f4dfac66}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-cell:focus-visible{outline-color:#174e70;outline-width:2px}

/* Player seats and the turn strip form the game's HUD, not separate cards. */
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-seat{border-color:#b6c7ac30;background:linear-gradient(95deg,#254a37e6,#16382cba);border-radius:8px;box-shadow:inset 0 1px 0 #d3dfbe0a}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-seat[data-side=red]{border-left-color:#d18a64;border-left-width:3px}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-seat[data-side=black]{border-left-color:#91aa97;border-left-width:3px}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-seat-symbol{color:#284c3b;border-color:#bf9d61;background:radial-gradient(circle at 35% 26%,#f7e3b9,#d6b67a);box-shadow:inset 0 0 0 2px #ebd19a,inset 0 0 0 3px #ad8a4f,0 2px 0 #735a33;text-shadow:0 1px #fff4d4}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-seat[data-side=red] .xq-seat-symbol{color:#a04531}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-seat-name{color:#f1edd6;font-weight:600}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-seat-detail{color:#9fb6a0}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-seat-tag{color:#b3c2ab;background:#d9ddba09;border:1px solid #c7d3b51c;border-radius:4px;padding:0 5px;line-height:1.7}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-seat[data-current=true]{background:linear-gradient(95deg,#526a3e80,#254a32e6);border-color:#b8ad72;box-shadow:inset 3px 0 0 #e1c47e,0 0 12px #b2c4770b}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-seat[data-current=true] .xq-seat-name{color:#f3df9d}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-seat[data-current=true] .xq-seat-symbol:after{background:#d4d58d;border-color:#294831}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-seat[data-you=true] .xq-seat-tag{color:#ead39a;border-color:#d8b96f39;background:#c3a05b0d}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-turn-strip{border-color:#c4b77338;border-left-color:#d7bd75;background:linear-gradient(100deg,#254934,#183e2b);border-radius:8px;box-shadow:inset 0 1px 0 #e7e6bb0a}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-turn-strip strong{color:#e1e6cb;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;font-weight:600;letter-spacing:.4px}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-turn-strip>span{color:#a3bd9f;font-size:10px;font-family:ui-monospace,"SFMono-Regular",Consolas,monospace}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-turn-strip[data-your-turn=true]{border-color:#d7bc77;background:linear-gradient(110deg,#dfc68b,#c9ad6e);box-shadow:inset 0 1px 0 #fff0c47d,0 3px 14px #071e1730}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-turn-strip[data-your-turn=true] strong{color:#173c29;font-weight:750}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-turn-strip[data-your-turn=true]>span{color:#345638}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-turn-strip[data-side=red]:not([data-status=waiting]){border-left-color:#d88a67}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-turn-strip[data-status=finished]{background:linear-gradient(105deg,#67563366,#304b3066);border-color:#b59c6066}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-turn-strip[data-check=true]{background:linear-gradient(100deg,#642c28,#422e26);border-color:#d88364}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-turn-strip[data-check=true] strong{color:#ffd4b8}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-turn-strip[data-check=true]>span{color:#deb39b}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-event-feedback{position:absolute;z-index:8;top:44px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 12px);margin:0;padding:5px 10px;pointer-events:none;border:1px solid #d4ba7c80;border-radius:7px;background:#102d24ef;box-shadow:0 6px 18px #00150b55;color:#f2dfb2;text-align:center;font-size:10px;line-height:1.55;backdrop-filter:blur(10px)}

body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-controls{background:linear-gradient(140deg,#30564070,#183a2ddd);border-color:#b7c7a433;box-shadow:inset 0 1px 0 #d1dfbd14,0 8px 20px #031d1525}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-avatar{color:#e2ce91;border:1px solid #cfb47848;background:radial-gradient(circle at 30% 25%,#76805a45,#21452c);box-shadow:inset 0 0 0 3px #1c382a}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-identity strong{color:#e9e7d2}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-identity #xq-my-role{color:#a7bf9e}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-nickname-row input{color:#f0eddc;border-color:#b5c4a840;background:#102d2299;box-shadow:inset 0 2px 5px #07190e22}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-nickname-row input::placeholder{color:#a7b7a0}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-controls .primary-button,body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-undo-actions .primary-button{background:linear-gradient(115deg,#e2cb8d,#bfa267);border-color:#ddc284;color:#193a29;box-shadow:inset 0 1px 0 #f8e7b385,0 3px 0 #6c694344,0 3px 10px #0b221533;font-weight:650}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-controls .secondary-button,body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-board-tools .secondary-button,body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-undo-actions .secondary-button{background:linear-gradient(#32533cbb,#213e2ebb);color:#d7dfc6;border-color:#b1c6a33b;box-shadow:inset 0 1px 0 #cfddbd0f,0 2px 0 #071f1644}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-controls .xq-danger{color:#efb092;border-color:#ce906e42;background:#593c2c36}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-board-tools .secondary-button:hover:not(:disabled),body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-controls .secondary-button:hover:not(:disabled){color:#ffebbc;border-color:#dac4858c;background:#35563e}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-board-tools #xq-chat-open{border-color:#92cab264;color:#bbecda;background:linear-gradient(#2b5947bd,#204b3abd)}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-board-tools #xq-sound[aria-pressed=true]{border-color:#d7bc6e6b;color:#ecd593;background:#78683a29}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-unread{background:#e1c285;color:#173629;box-shadow:0 0 9px #e1c2851a}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-secondary-pane summary{color:#b9cbb2;letter-spacing:.2px}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-secondary-pane summary:after{color:#d0ba7c;font-size:19px}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-secondary-pane details{border-color:#b0c3a424}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-move-piece{color:#c2d8bf}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-move-piece[data-side=red]{color:#eaaa83}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-move-path,body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-move-number{color:#a0b79c}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-undo-banner{background:linear-gradient(110deg,#5d5632bb,#23442fdd);border-color:#c7ae6675;color:#f4e0aa;box-shadow:0 5px 15px #031b1538}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-undo-banner p,body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-undo-heading>span{color:#c9c9a6}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-info-dialog,body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-dialog{background:#153b2eee;border-color:#b3c4a748;box-shadow:0 20px 80px #00150fa6;color:#eee8ce;backdrop-filter:blur(24px)}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-info-dialog::backdrop,body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-dialog::backdrop{background:#031a147d;backdrop-filter:blur(3px)}

/* Translucent chat glass: a restrained technical layer above the wooden table. */
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-panel{
  position:relative;isolation:isolate;
  border:1px solid #a8e4d13d;border-radius:12px;
  background:linear-gradient(135deg,#c4fff015,#619d8020 38%,#0b342b70 100%);
  backdrop-filter:blur(24px) saturate(130%);-webkit-backdrop-filter:blur(24px) saturate(130%);
  box-shadow:inset 0 1px 0 #d0fff02b,inset 1px 0 0 #bbf3df0a,0 10px 30px #001c1540,0 0 22px #70d9bb08;
}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-panel:before{content:"";pointer-events:none;position:absolute;top:0;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,#bcf9e17a,transparent);z-index:3}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-header{border-color:#a2ddc52b;background:linear-gradient(90deg,#bcead40a,transparent)}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-header h3{display:flex;align-items:center;gap:6px;color:#d5eee1;font-size:13px;letter-spacing:.5px}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-header h3:before{content:"";width:5px;height:5px;border-radius:50%;background:#99e6c9;box-shadow:0 0 8px #82e8c587;flex:none}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-header h3:after{content:"ROOM LIVE";font:8px/1.3 ui-monospace,"SFMono-Regular",Consolas,monospace;letter-spacing:1.1px;color:#a0d4c288;margin-left:auto}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-header p{color:#9cbfae;font-size:9px;letter-spacing:.1px}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-scroll{background:radial-gradient(ellipse at 95% 5%,#7addbd09,transparent 65%);scrollbar-color:#9cc7ad45 transparent;scrollbar-width:thin}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-empty{color:#b0c8b8;font-size:11px}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-empty:before{content:"◈";display:block;color:#a0cbb75e;font:32px/1.3 Georgia,serif;margin-bottom:7px;text-shadow:0 0 20px #a0d9b921}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-message-meta{color:#8eb49e}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-sender{color:#dce8d5;font-weight:500}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-role{background:#c1dac00c;border:1px solid #bdd8c118;color:#a7c2ac}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-role[data-role=red]{color:#e7ab88;border-color:#d1a1812b}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-role[data-role=black]{color:#c4d4c2;border-color:#c4d4c22b}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-time{color:#a2c4b27d}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-text{background:#bce7ce0c;border-color:#bddfc424;color:#e3ead8;box-shadow:inset 0 1px 0 #d1f5dc06;font-size:12px}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-message[data-own=true] .xq-chat-text{background:linear-gradient(135deg,#b5ad611c,#b5c88b14);border-color:#c5bd7838;color:#f0e7c6}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-form{background:#082c234b;border-color:#9acdb22b}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-compose textarea{background:#092b2357;border-color:#9ecab53b;border-radius:8px;color:#ebf1e0;box-shadow:inset 0 2px 6px #001d1528;transition:border-color .15s,box-shadow .15s}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-compose textarea::placeholder{color:#9dbda9}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-compose textarea:focus{border-color:#aad6bd8f;box-shadow:inset 0 1px 4px #001c1420,0 0 0 2px #82c5a50d;outline-color:#aed8bb6b}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-compose button{background:linear-gradient(145deg,#abd9b9,#75b696);border-color:#b0dfc077;color:#123c2c;font-weight:650;box-shadow:inset 0 1px 0 #e3fbd144,0 3px 10px #0020152b}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-form-meta,body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-status{color:#a6c2ad;font-size:9px}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-latest{background:#225a45e6;color:#d5efd6;border:1px solid #96c8a561;box-shadow:0 3px 10px #08291e44;font-size:11px}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-dialog{background:#153a2c85;border-color:#a7e0bc59;box-shadow:inset 0 1px 0 #cbf9d837,0 -12px 50px #001d1588;backdrop-filter:blur(27px) saturate(125%);-webkit-backdrop-filter:blur(27px) saturate(125%)}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-dialog::backdrop{background:#001d154d;backdrop-filter:blur(2px)}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-dialog .xq-chat-panel{background:linear-gradient(135deg,#b9ebca13,#123e2c36);backdrop-filter:none;-webkit-backdrop-filter:none;border:0;box-shadow:none}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-dialog .xq-chat-header #xq-chat-close{color:#d7e9cd;background:#29523788;border-color:#a1c4a34d;box-shadow:inset 0 1px 0 #cee3b819}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-dialog .xq-chat-text{font-size:14px}

@media(min-width:681px) and (min-height:501px){
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-topbar{padding-inline:max(20px,calc((100vw - min(1080px,calc((100dvh - 300px)*.9 + 320px)))/2))}
}
@media(max-width:680px){
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-main{max-width:100%;padding-inline:12px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-page-title{gap:7px;font-size:17px;letter-spacing:1px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-page-title:before{width:24px;height:24px;font-size:15px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-playfield:before{inset:-4px -6px -5px;border-radius:11px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-controls{border-color:#aec19e2d;background:linear-gradient(110deg,#395a3b55,#193e2d88)}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-seat-tag{font-size:9px;padding-inline:4px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-turn-strip strong{font-size:13px;letter-spacing:0}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-turn-strip>span{font-size:9px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-event-feedback{top:38px;font-size:10px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-board{border-width:3px;box-shadow:inset 0 0 0 1px #edcf95,0 2px 0 #cba568,0 4px 0 #76532b,0 8px 16px #021a1252}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-piece{box-shadow:inset 0 1px 0 #fff9e2,inset 0 0 0 1px #ffedc2,inset 0 0 0 2px #b58a4c,inset 0 -2px 3px #8a5e2840,0 2px 0 #946b34,0 3px 1px #4a351e75,0 4px 4px #503b2433}
}
/* Landscape keeps the board beside compact controls; chat and rules use drawers. */
@media(min-width:681px) and (max-height:500px){
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-topbar{min-height:42px;padding:2px 16px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-page-title{font-size:16px;letter-spacing:1px;gap:7px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-page-title:before{width:24px;height:24px;font-size:15px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-topbar .theme-control select{min-height:34px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-main{max-width:760px;padding:4px 14px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-room{grid-template-columns:minmax(280px,1fr) 224px;grid-template-rows:auto minmax(0,1fr);grid-template-areas:"heading heading" "board controls";gap:5px 24px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-room-heading{min-height:22px;padding-bottom:3px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-side{display:none;height:0!important}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-controls{padding:9px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-controls label{font-size:11px;margin-bottom:5px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-nickname-row{gap:7px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-nickname-row input{min-height:38px;padding:7px 9px;font-size:12px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-nickname-row .primary-button{min-height:40px;padding:7px 10px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-small{font-size:9px;margin-top:5px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-turn-strip{min-height:28px;padding:3px 8px;margin-bottom:4px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-turn-strip strong{font-size:12px;letter-spacing:0;white-space:nowrap}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-turn-strip>span{font-size:9px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-seat{min-height:27px;padding:2px 8px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-seat[data-current=true]{padding:1px 7px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-seat[data-connected=false] .xq-seat-detail{display:none}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-seat-symbol{width:21px;height:21px;font-size:16px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-seat-name{font-size:11px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-seat-tag{font-size:9px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-board{margin:4px auto;border-width:2px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-board-footer{margin-top:3px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-board-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-board-tools .xq-chat-launcher,body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-board-tools #xq-more-open{display:inline-flex;align-items:center;justify-content:center}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-board-footer .xq-board-tools button{min-height:44px;font-size:10px;padding:5px 3px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-event-feedback{top:28px;font-size:9px;padding-block:4px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-info-dialog .xq-secondary-pane{display:block}
}
@media(max-height:600px){body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-event-feedback{top:32px}body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-header h3{font-size:12px}body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-header h3:after{font-size:7px}}
@media(prefers-reduced-transparency:reduce){body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-panel,body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-dialog,body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-dialog .xq-chat-panel{background:#193f30;backdrop-filter:none;-webkit-backdrop-filter:none}body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-dialog::backdrop{background:#041c14b3;backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-compose textarea,body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .tool-topbar .back-link{transition:none}}

/* Wide, short screens put the HUD beside the board instead of above it. */
@media(min-width:681px) and (max-height:500px){
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-playfield{display:grid;grid-template-columns:minmax(0,1fr) 150px;grid-template-rows:auto auto auto minmax(0,1fr);column-gap:12px;row-gap:8px;align-items:start;max-width:none}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-playfield:before{inset:-4px -7px;border-radius:11px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-board{grid-column:1;grid-row:1/5;align-self:start;justify-self:center;margin:0 auto}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-turn-strip{grid-column:2;grid-row:1;margin:0;min-width:0;min-height:34px;padding:6px 8px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-turn-strip strong{white-space:normal;overflow-wrap:anywhere;font-size:11px;line-height:1.6;letter-spacing:0}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-turn-strip>span{display:none}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) #xq-seat-top{grid-column:2;grid-row:2}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) #xq-seat-bottom{grid-column:2;grid-row:3}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-seat{gap:5px;min-height:35px;padding:4px 6px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-seat[data-current=true]{padding:3px 5px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-seat-name{font-size:10px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-seat-tag{font-size:8px;padding-inline:3px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-board-footer{grid-column:2;grid-row:4;align-self:end;margin:0;min-width:0}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-board-tools{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-board-footer .xq-board-tools button{min-height:44px;padding:6px 2px;font-size:10px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-undo-banner{position:absolute;z-index:7;right:0;top:0;width:150px;max-height:calc(100% - 100px);overflow-y:auto;overscroll-behavior:contain;margin:0;padding:8px;background:#32452bef;box-shadow:0 6px 20px #051b1766}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-undo-heading{flex-wrap:wrap;gap:2px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-undo-heading strong{font-size:11px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-undo-heading>span{font-size:9px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-undo-banner p{font-size:10px;line-height:1.6;margin:5px 0}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-undo-actions{gap:5px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-undo-actions button{min-height:44px;padding:5px;font-size:10px}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-event-feedback{left:auto;right:0;top:0;transform:none;width:150px;max-width:150px;font-size:9px;padding:6px}
}

html:has(body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) dialog[open]),body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]):has(dialog[open]){overflow:hidden;overscroll-behavior:none}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-dialog,body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-info-dialog,body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-dialog{overscroll-behavior:contain}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-scroll,body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-info-dialog{overscroll-behavior-y:contain}

/* Live room effects. All event artwork is absolutely positioned and local-only. */
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-turn-strip.xq-fx-clock-enabled{position:relative;padding-left:53px}
.xq-turn-dial{--dial-tone:#ffbd91;position:absolute;left:6px;top:50%;transform:translateY(-50%);width:40px;height:40px;pointer-events:none;color:var(--dial-tone);filter:drop-shadow(0 0 5px #071b125c)}
.xq-turn-dial[data-side=black]{--dial-tone:#b7e6e9}.xq-turn-dial[data-active=false]{--dial-tone:#bcb98e;opacity:.76}
.xq-turn-dial svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.xq-dial-core{fill:#102c24ed;stroke:currentColor;stroke-width:.6;stroke-opacity:.42}
.xq-dial-ticks{fill:none;stroke:currentColor;stroke-width:1.2;stroke-opacity:.56}
.xq-dial-orbit{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;transform-origin:32px 32px;animation:xq-dial-orbit 10s linear infinite;filter:drop-shadow(0 0 2px currentColor)}
.xq-dial-orbit-inner{stroke-width:1;opacity:.75;animation-duration:7s;animation-direction:reverse}
.xq-dial-satellite{fill:currentColor;stroke:none}.xq-turn-dial[data-active=false] .xq-dial-orbit,.xq-turn-dial.xq-fx-paused .xq-dial-orbit{animation-play-state:paused}
.xq-dial-label{position:absolute;top:8px;left:0;right:0;display:block;text-align:center;font:700 16px/1 "KaiTi","STKaiti","SimSun",serif;color:var(--dial-tone);text-shadow:0 0 8px #b6efbc33}
.xq-dial-mode{position:absolute;left:0;right:0;bottom:7px;display:block;text-align:center;color:#c9ddc5;font:6px/1 -apple-system,BlinkMacSystemFont,"Microsoft YaHei",sans-serif;letter-spacing:.5px;white-space:nowrap}
.xq-turn-dial[data-you=true] .xq-dial-core{fill:#123d2d;stroke-opacity:.8}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-turn-strip[data-your-turn=true] .xq-dial-label{color:var(--dial-tone)}

.xq-effects-layer{position:absolute;inset:0;z-index:15;overflow:hidden;border-radius:inherit;pointer-events:none!important;isolation:isolate}
.xq-effects-layer *{pointer-events:none!important}.xq-fx-turn-edge{--edge-tone:#f8a27e;position:absolute;left:4%;right:4%;height:2px;color:var(--edge-tone);background:linear-gradient(90deg,transparent,currentColor,transparent);opacity:.75;overflow:hidden;box-shadow:0 0 10px #09291b55}
.xq-fx-turn-edge[data-side=black]{--edge-tone:#a3d5c9}.xq-fx-turn-edge[data-position=top]{top:3px}.xq-fx-turn-edge[data-position=bottom]{bottom:3px}
.xq-fx-turn-edge:after{content:"";position:absolute;left:-20%;top:0;width:22%;height:100%;background:linear-gradient(90deg,transparent,#fff7d7,transparent);box-shadow:0 0 9px currentColor;animation:xq-edge-scan 3.8s ease-in-out 3}
.xq-scene-effect{--fx-tone:#ffd098;--fx-rgb:255,165,100;--fx-y:50%;--fx-duration:3000ms;position:absolute;inset:0;overflow:hidden;pointer-events:none}
.xq-scene-effect[data-kind=result][data-side=red]{--fx-tone:#ffd6a0;--fx-rgb:255,140,92}.xq-scene-effect[data-kind=result][data-side=black]{--fx-tone:#c4f0e3;--fx-rgb:131,220,200}.xq-scene-effect[data-kind=result][data-side=draw]{--fx-tone:#f0e2a7;--fx-rgb:220,210,135}
.xq-scene-effect[data-kind=error]{--fx-tone:#ffb9a1;--fx-rgb:255,101,82}
.xq-fx-veil{position:absolute;inset:0;background:radial-gradient(ellipse at 50% var(--fx-y),rgba(var(--fx-rgb),.18),transparent 62%),linear-gradient(#111a0b0a,#15251e26);animation:xq-fx-presence var(--fx-duration) linear both}
.xq-scene-effect[data-kind=result] .xq-fx-veil{background:radial-gradient(ellipse at center,rgba(var(--fx-rgb),.18),#10231c59 75%),linear-gradient(#061b1733,#0c201a4d)}
.xq-scene-effect[data-kind=error] .xq-fx-veil{background:radial-gradient(ellipse at center,transparent 25%,#df48252e 100%);box-shadow:inset 0 0 25px #e04c315c}
.xq-fx-burst{position:absolute;left:50%;top:var(--fx-y);width:91%;aspect-ratio:1;transform:translate(-50%,-50%);color:var(--fx-tone)}
.xq-fx-engraving{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0;animation:xq-fx-engraving 2600ms cubic-bezier(.16,.7,.35,1) both;filter:drop-shadow(0 0 4px rgba(var(--fx-rgb),.25))}
.xq-fx-fans{fill:currentColor;fill-opacity:.13;stroke:currentColor;stroke-width:.3;stroke-opacity:.18;transform-origin:100px 100px}
.xq-fx-spokes{fill:none;stroke:currentColor;stroke-width:1;stroke-opacity:.7}
.xq-fx-orbits{fill:none;stroke:currentColor;stroke-width:.65;stroke-opacity:.63}
.xq-scene-effect[data-kind=result] .xq-fx-fans{fill-opacity:.19}.xq-scene-effect[data-kind=error] .xq-fx-fans{fill-opacity:.07}
.xq-fx-shockwave{position:absolute;left:50%;top:50%;width:62%;height:62%;border:2px solid currentColor;border-radius:50%;opacity:0;box-shadow:0 0 9px rgba(var(--fx-rgb),.3),inset 0 0 9px rgba(var(--fx-rgb),.2);animation:xq-fx-wave 950ms cubic-bezier(.1,.5,.3,1) var(--fx-delay,0ms) both}
.xq-fx-particle{position:absolute;left:50%;top:50%;width:3px;height:7px;border-radius:1px;background:currentColor;opacity:0;box-shadow:0 0 9px currentColor;animation:xq-fx-particle 1000ms cubic-bezier(.16,.6,.3,1) var(--fx-delay,0ms) both}
.xq-fx-content{position:absolute;left:50%;top:var(--fx-y);transform:translate(-50%,-50%);width:max-content;max-width:94%;display:flex;align-items:center;flex-direction:column;gap:8px;text-align:center;color:var(--fx-tone);animation:xq-fx-presence var(--fx-duration) linear both}
.xq-fx-kicker{font:700 clamp(8px,2.5cqw,12px)/1.4 ui-monospace,"SFMono-Regular",Consolas,monospace;letter-spacing:3.4px;color:var(--fx-tone);text-shadow:0 1px 5px #03180fcc,0 0 12px rgba(var(--fx-rgb),.55)}
.xq-fx-seal{position:relative;display:block;max-width:100%;padding:12px 18px 10px;border:3px solid currentColor;outline:1px solid currentColor;outline-offset:-8px;border-radius:4px;background:linear-gradient(135deg,#882e1bf2,#571e19f0);color:#ffdeb1;font:800 clamp(32px,15cqw,80px)/1.2 "KaiTi","STKaiti","Kaiti SC","SimSun",serif;letter-spacing:7px;text-indent:7px;text-shadow:1px 2px 0 #5c211c,0 0 17px #ffd69826;box-shadow:inset 0 0 19px #f091343d,0 5px 0 #301c1459,0 12px 24px #101c1570,0 0 28px rgba(var(--fx-rgb),.18);transform:rotate(-7deg);animation:xq-fx-stamp 480ms cubic-bezier(.15,.78,.24,1) both;white-space:nowrap}
.xq-fx-seal:before,.xq-fx-seal:after{content:"";position:absolute;width:6px;height:6px;background:currentColor;opacity:.6}.xq-fx-seal:before{top:4px;left:4px}.xq-fx-seal:after{bottom:4px;right:4px}
.xq-fx-detail{display:block;max-width:100%;padding:5px 10px;border:1px solid rgba(var(--fx-rgb),.3);border-radius:4px;background:#102a20e8;box-shadow:0 3px 12px #09211755;color:#f9e9c8;font:600 clamp(10px,3.9cqw,16px)/1.55 -apple-system,BlinkMacSystemFont,"Microsoft YaHei",sans-serif;letter-spacing:.5px;white-space:pre-wrap;overflow-wrap:anywhere}
.xq-scene-effect[data-kind=result] .xq-fx-seal{font-size:clamp(23px,10.5cqw,54px);padding:17px 18px 15px;letter-spacing:3px;text-indent:3px;border-width:2px;transform:rotate(-4deg);animation-name:xq-fx-result-stamp}
.xq-scene-effect[data-kind=result][data-side=black] .xq-fx-seal{background:linear-gradient(135deg,#123c36f5,#071f24f5);color:#d3f4e7;box-shadow:inset 0 0 24px #96dfce17,0 7px 0 #051b1e66,0 12px 24px #06191988,0 0 30px #86dec328;text-shadow:1px 2px #092622}
.xq-scene-effect[data-kind=result][data-side=draw] .xq-fx-seal{background:linear-gradient(135deg,#63552bef,#373e2cf5);color:#f0e2ae;letter-spacing:12px;text-indent:12px}
.xq-scene-effect[data-kind=error] .xq-fx-content{width:min(84%,330px);max-width:90%;padding:16px 14px;border:1px solid #ffb69a91;border-radius:11px;background:linear-gradient(130deg,#6a251af2,#351e1af5);box-shadow:inset 0 1px 0 #ffdab036,0 14px 34px #2c1c1580,0 0 22px #fd694520;gap:7px}
.xq-scene-effect[data-kind=error] .xq-fx-kicker{color:#ffc5aa;letter-spacing:2px;font-size:8px}
.xq-scene-effect[data-kind=error] .xq-fx-seal{padding:0;border:0;outline:0;border-radius:0;background:none;box-shadow:none;font:700 clamp(15px,6.4cqw,24px)/1.5 -apple-system,BlinkMacSystemFont,"Microsoft YaHei",sans-serif;letter-spacing:1px;text-indent:0;transform:none;animation:none;color:#ffe3cc;text-shadow:none}
.xq-scene-effect[data-kind=error] .xq-fx-seal:before,.xq-scene-effect[data-kind=error] .xq-fx-seal:after{display:none}
.xq-scene-effect[data-kind=error] .xq-fx-detail{padding:0;border:0;box-shadow:none;background:none;color:#ffd9be;font-size:clamp(10px,3.9cqw,14px);font-weight:400;letter-spacing:0;max-height:135px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical}

/* New-message bubbles are clickable, while game effects never intercept a move. */
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-toast{position:fixed;z-index:80;top:63px;right:max(14px,env(safe-area-inset-right));display:grid;grid-template-columns:26px minmax(0,1fr);gap:5px 9px;width:min(290px,calc(100vw - 28px));padding:12px 13px;border:1px solid #b8e6d55c;border-radius:13px;background:linear-gradient(135deg,#244f42e6,#103b2be8);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:inset 0 1px 0 #dcffe633,0 12px 35px #001b176b,0 0 22px #81e2bd13;color:#e7f4df;text-align:left;cursor:pointer;min-height:70px;transition:border-color .15s}
.xq-chat-toast-icon{display:grid;place-items:center;grid-row:1/3;align-self:start;width:26px;height:26px;position:relative;margin-top:2px;border:1px solid #b9e8cd52;border-radius:8px;color:#c1ead1;background:#6bbd9524;font:20px/1 Georgia,serif}
.xq-chat-toast-icon:after{content:"";position:absolute;top:-4px;right:-3px;width:7px;height:7px;border-radius:50%;background:#ff8568;box-shadow:0 0 0 2px #234533,0 0 9px #ed947077}
.xq-chat-toast-copy{display:block;min-width:0}.xq-chat-toast-sender{display:block;color:#dce9cb;font-size:11px;font-weight:650;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.5;margin-bottom:3px}
.xq-chat-toast[data-side=red] .xq-chat-toast-sender{color:#ffc6a0}.xq-chat-toast[data-side=black] .xq-chat-toast-sender{color:#bfe8de}
.xq-chat-toast-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#e8f1de;font-size:12px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}
.xq-chat-toast-action{grid-column:2;color:#9ac5ab;font-size:9px;letter-spacing:.4px}.xq-chat-toast:hover{border-color:#d6f1b98c}.xq-chat-toast:focus-visible{outline:2px solid #ebd394;outline-offset:3px}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-unread{min-width:18px;height:18px;border:1px solid #ffd5b44d;background:linear-gradient(135deg,#ee9976,#cc604e);color:#fff7de;box-shadow:0 0 10px #df7d594a;font-size:10px;font-weight:750}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-panel[data-unread=true]{border-color:#bdddbf88;box-shadow:inset 0 1px 0 #e0f7c936,0 0 20px #a1c68c1a,0 10px 30px #001c1540;animation:xq-chat-attention 2s ease-in-out 3}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) #xq-chat-header-unread{margin-left:1px;letter-spacing:0;flex:none}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) #xq-chat-open[data-unread=true]{position:relative;border-color:#dcab79a1;color:#ffdeb8;box-shadow:inset 0 1px 0 #ffddaa18,0 0 13px #dca56c24;animation:xq-chat-attention 2s ease-in-out 3}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) #xq-chat-open[data-unread=true]:before{content:"";position:absolute;top:4px;right:4px;width:5px;height:5px;border-radius:50%;background:#ff9473;box-shadow:0 0 7px #ff94737d}

body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-audio-settings-body{display:grid;gap:9px;padding:4px 2px 15px;color:#c5d7bd}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-audio-settings-body label{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) #xq-volume-value{color:#e8d4a1;font:600 12px/1.5 ui-monospace,"SFMono-Regular",Consolas,monospace;font-variant-numeric:tabular-nums}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) #xq-volume{width:100%;height:32px;margin:0;accent-color:#d6bf83;cursor:pointer;background:transparent;touch-action:pan-y}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) #xq-volume:focus-visible{outline:2px solid #d8c78f7d;outline-offset:3px;border-radius:4px}
body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) #xq-sound-test{justify-self:start;min-height:44px;padding:8px 14px;font-size:12px;border-color:#a9c7a14d;color:#e1dfbd;background:linear-gradient(#3e5b3d77,#203e2d77);box-shadow:inset 0 1px 0 #cee3bb13}

@keyframes xq-dial-orbit{to{transform:rotate(360deg)}}
@keyframes xq-edge-scan{0%{left:-25%;opacity:0}12%{opacity:1}85%{opacity:1}100%{left:105%;opacity:0}}
@keyframes xq-fx-presence{0%{opacity:0}8%,84%{opacity:1}100%{opacity:0}}
@keyframes xq-fx-stamp{0%{transform:rotate(-17deg) scale(1.75);filter:blur(3px);opacity:0}66%{transform:rotate(-6deg) scale(.94);filter:blur(0);opacity:1}100%{transform:rotate(-7deg) scale(1);filter:blur(0);opacity:1}}
@keyframes xq-fx-result-stamp{0%{transform:rotate(-11deg) scale(1.5);filter:blur(3px);opacity:0}70%{transform:rotate(-3deg) scale(.96);filter:blur(0);opacity:1}100%{transform:rotate(-4deg) scale(1);filter:blur(0);opacity:1}}
@keyframes xq-fx-engraving{0%{opacity:0;transform:rotate(-24deg) scale(.54)}16%{opacity:.85;transform:rotate(-4deg) scale(.94)}70%{opacity:.52}100%{opacity:0;transform:rotate(32deg) scale(1.13)}}
@keyframes xq-fx-wave{0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}12%{opacity:.9}100%{opacity:0;transform:translate(-50%,-50%) scale(1.8)}}
@keyframes xq-fx-particle{0%{opacity:0;transform:rotate(var(--fx-angle)) translateX(18px) scale(1.4)}15%{opacity:1}100%{opacity:0;transform:rotate(var(--fx-angle)) translateX(var(--fx-distance)) rotate(68deg) scale(.25)}}
@keyframes xq-chat-attention{0%,100%{filter:brightness(1)}50%{filter:brightness(1.14)}}

@media(max-width:680px){
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-turn-strip.xq-fx-clock-enabled{padding-left:43px}
  .xq-turn-dial{width:34px;height:34px;left:4px}.xq-dial-label{top:7px;font-size:14px}.xq-dial-mode{bottom:6px;font-size:5.5px;letter-spacing:0}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-toast{top:55px;right:12px;width:min(280px,calc(100vw - 24px));padding:10px 12px;min-height:68px}
  .xq-fx-seal{padding:10px 14px 8px;border-width:2px;outline-offset:-6px;letter-spacing:5px;text-indent:5px}.xq-fx-content{gap:7px}.xq-fx-kicker{letter-spacing:2.5px}
  .xq-scene-effect[data-kind=result] .xq-fx-seal{padding:13px 14px 11px}.xq-fx-detail{padding:4px 8px}
}
@media(min-width:681px) and (max-height:500px){
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-turn-strip.xq-fx-clock-enabled{padding-left:41px}
  .xq-turn-dial{left:3px;width:33px;height:33px}.xq-dial-label{top:7px;font-size:13px}.xq-dial-mode{bottom:6px;font-size:5.5px;letter-spacing:0}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-toast{top:48px;right:12px;width:224px;padding:9px 10px}.xq-chat-toast-text{font-size:11px}
}
@media(prefers-reduced-transparency:reduce){body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-toast{background:#1b4432;backdrop-filter:none;-webkit-backdrop-filter:none}.xq-fx-detail{background:#102a20}}
@media(prefers-reduced-motion:reduce){
  .xq-dial-orbit,.xq-fx-turn-edge:after,.xq-fx-veil,.xq-fx-engraving,.xq-fx-shockwave,.xq-fx-particle,.xq-fx-content,.xq-fx-seal{animation:none!important}
  .xq-fx-engraving{opacity:.28;transform:none}.xq-fx-shockwave,.xq-fx-particle{display:none}.xq-fx-veil,.xq-fx-content{opacity:1}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-panel[data-unread=true],body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) #xq-chat-open[data-unread=true]{animation:none}
  body:is([data-app-id=xiangqi],[data-app-id=xiangqi3d]) .xq-chat-toast{transition:none}
}