.xq { max-width: 860px; margin: 0 auto; padding: 10px 8px 16px; user-select: none; -webkit-user-select: none; color: #dfe9ff; }
.xq [hidden] { display: none !important; }
.xq-top { display: flex; justify-content: space-between; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin: 0 0 10px; }
.xq-opts { display: flex; gap: 8px 10px; flex-wrap: wrap; align-items: center; font-size: 13px; color: #8aa3c4; flex: 1 1 320px; min-width: 0; }
.xq-opts select { background: #0b1328; color: #dfe9ff; border: 1px solid #1c2b4a; border-radius: 6px; padding: 5px 8px; font-size: 13px; margin-left: 4px; }
.xq-tools, .xq-pztools { display: flex; gap: 6px; flex-wrap: wrap; }
.xq-btn { background: #0b1328; color: #dfe9ff; border: 1px solid #1c2b4a; border-radius: 8px; padding: 7px 12px; font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; }
@media (hover: hover) { .xq-btn:hover:not(:disabled) { border-color: #55d6ff; } } .xq-btn:disabled { opacity: 0.4; cursor: default; }
.xq-btn:active:not(:disabled) { transform: translateY(1px); }
.xq-btn:focus-visible, .xq-opts select:focus-visible, .xq-tab:focus-visible, .xq-pick:focus-visible, .xq-pzcell:focus-visible { outline: 2px solid #55d6ff; outline-offset: 2px; }
.xq-btn-primary { background: #ffd166; color: #1a1200; border-color: #ffd166; } @media (hover: hover) { .xq-btn-primary:hover:not(:disabled) { background: #ffe08a; border-color: #ffe08a; } }
.xq-icon { padding: 5px 8px; display: inline-grid; place-items: center; min-width: 36px; } .xq-icon svg { width: 18px; height: 18px; display: block; }
.xq-pzbar { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin: 0 0 10px; padding: 8px 10px; background: #0b1328; border: 1px solid #244b6b; border-radius: 10px; }
.xq-pzinfo { display: flex; gap: 2px 10px; flex-wrap: wrap; align-items: baseline; font-size: 13px; color: #8aa3c4; min-width: 0; } .xq-pzinfo strong { color: #ffd166; font-size: 14px; } .xq-pztools { flex: 1 1 auto; } .xq-pztools .xq-btn { min-width: 44px; flex: 1 1 auto; }
.xq-main { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 16px; align-items: start; }
.xq-boardwrap { width: 100%; max-width: 500px; margin: 0 auto; }
.xq-frame { position: relative; }
.xq-files { display: grid; grid-template-columns: repeat(9, 1fr); height: 15px; font-size: 10px; line-height: 15px; font-weight: 700; color: #6f88aa; text-align: center; font-variant-numeric: tabular-nums; }

/* the board: 9 files by 10 ranks of points; the lattice is one SVG underneath, each point is a button on top */
.xq-board { position: relative; display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(10, 1fr); aspect-ratio: 9 / 10; width: 100%; border: 2px solid #3d5a7a; border-radius: 8px; touch-action: none; background: linear-gradient(180deg, #cfdcea, #bccde0); container-type: inline-size; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35); }
.xq-lattice { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 6px; }
.xq-pt { position: relative; min-width: 0; min-height: 0; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; font: inherit; color: inherit; }
.xq-pt:focus { outline: none; }
.xq-pt:focus-visible::after { content: ''; position: absolute; inset: 2%; border-radius: 50%; border: 3px solid #0b84c9; box-shadow: 0 0 0 2px #fff; z-index: 4; pointer-events: none; }
.xq-pc { position: absolute; inset: 5%; pointer-events: none; z-index: 2; display: block; }
.xq-pc svg { width: 100%; height: 100%; display: block; overflow: visible; }
.xq-pt.has { cursor: grab; } .xq-board:active .xq-pt.has { cursor: grabbing; }
.xq-pt.moving { z-index: 6; }
.xq-pt.last::before { content: ''; position: absolute; inset: 31%; border-radius: 50%; border: 3px solid #e2a100; pointer-events: none; }
.xq-pt.last.has::before { inset: -1%; border-width: 3px; box-shadow: 0 0 10px rgba(255, 190, 40, 0.9); }
.xq-pt.sel .xq-pc { transform: scale(1.08); filter: drop-shadow(0 0 5px #00b7ff) drop-shadow(0 0 2px #00b7ff); }
.xq-pt.check::before { content: ''; position: absolute; inset: -12%; border-radius: 50%; border: 0; background: radial-gradient(circle, rgba(255, 50, 80, 0.95) 0, rgba(255, 50, 80, 0.7) 50%, rgba(255, 50, 80, 0) 72%); pointer-events: none; box-shadow: none; }
.xq-pt.hint::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 4px dashed #ff8a00; background: rgba(255, 209, 102, 0.35); pointer-events: none; box-shadow: none; animation: xq-hint 1s ease-in-out infinite alternate; z-index: 3; }
@keyframes xq-hint { to { opacity: 0.45; } }
.xq-pt .dot { position: absolute; left: 36%; top: 36%; width: 28%; height: 28%; border-radius: 50%; background: #14629a; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75); pointer-events: none; z-index: 3; }
.xq-pt .ring { position: absolute; inset: 0; border-radius: 50%; border: 4px solid #ff3d62; box-shadow: 0 0 8px rgba(255, 61, 98, 0.8); pointer-events: none; z-index: 3; }
.xq-pt .no { position: absolute; left: 34%; top: 34%; width: 32%; height: 32%; pointer-events: none; z-index: 3; opacity: 0.55; background: linear-gradient(45deg, transparent 42%, #b3243f 42%, #b3243f 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, #b3243f 42%, #b3243f 58%, transparent 58%); }
.xq-pc.dragging { opacity: 0.25; }
.xq-ghost { position: absolute; pointer-events: none; z-index: 9; width: 11.11%; height: 10%; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.5)); transform: scale(1.15); }
.xq-ghost svg { width: 100%; height: 100%; display: block; overflow: visible; }
.xq-note { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; max-width: 92%; box-sizing: border-box; padding: 7px 12px; border-radius: 999px; background: rgba(6, 12, 28, 0.94); border: 1px solid #ffd166; color: #fff; font-size: 13px; font-weight: 700; text-align: center; pointer-events: none; z-index: 8; opacity: 0; transition: opacity 0.2s; }
.xq-note.on { opacity: 1; } .xq-note:empty { display: none; }
.xq-captured { min-height: 24px; display: flex; gap: 1px; flex-wrap: wrap; align-items: center; padding: 1px 2px; }
.xq-captured svg { width: 21px; height: 21px; display: block; flex: none; } .xq-captured b { font-size: 12px; color: #8aa3c4; margin-left: 6px; font-weight: 700; }

.xq-side { background: #0b1328; border: 1px solid #1c2b4a; border-radius: 10px; padding: 12px; min-height: 200px; }
.xq-status { font-weight: 700; font-size: 15px; margin: 0 0 10px; color: #fff; }
.xq-status .who { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; border: 2px solid #f4ead0; }
.xq-status .who.r { background: #d42a35; } .xq-status .who.b { background: #18243a; }
.xq-moves { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 28px 1fr 1fr; gap: 2px 6px; font-size: 13px; max-height: 340px; overflow: auto; font-variant-numeric: tabular-nums; }
.xq-moves li { display: contents; } .xq-moves .n { color: #8aa3c4; } .xq-moves span { padding: 1px 4px; border-radius: 3px; white-space: nowrap; } .xq-moves span.cur { background: #1c2b4a; color: #fff; }
.xq-record { margin-top: 12px; font-size: 12px; color: #8aa3c4; }
.xq-thinking { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #55d6ff; margin-left: 6px; animation: xq-pulse 0.8s infinite alternate; }
@keyframes xq-pulse { to { opacity: 0.2; } }

/* dialogs: result, how to play (piece guide and rules), puzzle list */
.xq-overlay { position: fixed; inset: 0; background: rgba(2, 5, 14, 0.78); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 12px; }
.xq-overlay:not([hidden]) .xq-dialog { animation: xq-pop 0.18s ease-out; }
@keyframes xq-pop { from { transform: scale(0.94); opacity: 0; } }
.xq-dialog { background: #0b1328; border: 1px solid #244b6b; border-radius: 12px; padding: 22px; width: min(100%, 380px); max-height: 100%; overflow: auto; text-align: center; overscroll-behavior: contain; }
.xq-dialog h3 { margin: 0 0 6px; color: #fff; font-size: 22px; } .xq-dialog p { margin: 0 0 14px; color: #8aa3c4; }
.xq-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.xq-dialog.wide { width: min(100%, 760px); text-align: left; padding: 16px; }
.xq-dlg-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 10px; } .xq-dlg-head h3 { margin: 0; font-size: 19px; }
.xq-tabs { display: flex; gap: 6px; margin: 0 0 12px; } .xq-tab { flex: 1 1 0; background: #070d1d; color: #8aa3c4; border: 1px solid #1c2b4a; border-radius: 8px; padding: 8px 10px; font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; min-height: 40px; }
.xq-tab[aria-selected="true"] { background: #16284a; color: #fff; border-color: #55d6ff; }
.xq-guide { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 16px; align-items: start; }
.xq-guide .xq-board { box-shadow: none; }
.xq-picks { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.xq-pick { width: 46px; height: 46px; padding: 2px; background: #070d1d; border: 1px solid #1c2b4a; border-radius: 10px; cursor: pointer; } .xq-pick svg { width: 100%; height: 100%; display: block; }
.xq-pick[aria-pressed="true"] { border-color: #ffd166; background: #1b2a4b; }
.xq-guide h4 { margin: 0 0 6px; color: #fff; font-size: 17px; } .xq-guide h4 small { color: #8aa3c4; font-weight: 600; font-size: 13px; margin-left: 6px; }
.xq-guide p, .xq-rules p { margin: 0 0 9px; color: #b9c9e4; font-size: 14px; line-height: 1.5; }
.xq-guide .try { color: #ffd166; font-size: 13px; }
.xq-rules { display: grid; gap: 2px; } .xq-rules h4 { margin: 8px 0 3px; color: #fff; font-size: 15px; } .xq-rules h4:first-child { margin-top: 0; }
.xq-pzgroup { margin: 0 0 12px; } .xq-pzgroup h4 { margin: 0 0 6px; color: #fff; font-size: 14px; } .xq-pzgroup h4 small { color: #8aa3c4; font-weight: 600; margin-left: 6px; }
.xq-pzgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.xq-pzcell { height: 44px; background: #070d1d; color: #dfe9ff; border: 1px solid #1c2b4a; border-radius: 8px; font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit; }
.xq-pzcell.done { background: #12331f; border-color: #2f9e5b; color: #9ff0bf; } @media (hover: hover) { .xq-pzcell:hover { border-color: #55d6ff; } }

@media (max-width: 700px) {   /* phones: whose turn sits above the board, the move list becomes a strip below it */
  .xq { padding-left: 0; padding-right: 0; }
  .xq-main { grid-template-columns: 1fr; gap: 6px; }
  .xq-boardwrap { width: calc(100% + 16px); max-width: 516px; margin: 0 -8px; }   /* nine files of 40px on a 390px phone */
  .xq-opts label { flex: 1 1 0; min-width: 0; display: grid; gap: 2px; font-size: 11px; }
  .xq-opts select { width: 100%; margin: 0; padding-left: 6px; padding-right: 2px; }
  .xq-side { display: contents; }
  .xq-status { order: -1; text-align: center; margin: 0; font-size: 15px; }
  .xq-moves:empty { display: none; }
  .xq-moves { order: 1; display: flex; gap: 2px 10px; overflow-x: auto; max-height: none; padding: 6px 2px; scrollbar-width: none; }
  .xq-moves::-webkit-scrollbar { display: none; }
  .xq-moves li { display: flex; gap: 4px; flex: none; }
  .xq-record { order: 2; text-align: center; margin: 0; }
  .xq-side > .ol-bar { order: -2; margin: 0; }
  .xq-tools { flex: 1 1 100%; } .xq-tools .xq-btn { flex: 1 1 auto; padding-left: 8px; padding-right: 8px; } .xq-tools #xq-mute { flex: 0 0 48px; }
  .xq-guide { grid-template-columns: 1fr; gap: 10px; } .xq-guide .xq-board { max-width: 320px; margin: 0 auto; }
  .xq-dialog.wide { padding: 12px; }
}
/* full screen (.xq-fit, set by game.js inside the site's immersive stage): no page scrolling, board sized to fit */
.xq.xq-fit { max-width: none; height: 100%; margin: 0; padding: 6px 4px 8px; display: flex; flex-direction: column; overflow: hidden; }
.xq-fit .xq-top { flex: none; margin: 0 0 6px; gap: 6px; justify-content: center; }
.xq-fit .xq-opts { gap: 6px; font-size: 12px; justify-content: center; } .xq-fit .xq-opts select { padding: 4px 6px; font-size: 12.5px; }
.xq-fit .xq-btn { padding: 6px 10px; font-size: 12.5px; }
.xq-fit .xq-pzbar { flex: none; margin: 0 0 6px; padding: 5px 8px; }
.xq-fit .xq-main { flex: 1 1 auto; min-height: 0; gap: 6px; align-items: stretch; }
.xq-fit .xq-boardwrap { min-width: 0; min-height: 0; max-width: none; width: auto; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.xq-fit .xq-frame, .xq-fit .xq-captured { width: var(--xq-bs); flex: none; }
.xq-fit .xq-status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xq.xq-port { justify-content: center; }
.xq-port .xq-main { flex: 0 0 auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; }
.xq-port .xq-side { display: contents; }
.xq-port .xq-status { order: -1; text-align: center; margin: 0; font-size: 15px; }
.xq-port .xq-moves, .xq-port .xq-moves:empty { order: 1; display: flex; align-items: center; box-sizing: border-box; height: 28px; flex: none; gap: 2px 10px; overflow-x: auto; overflow-y: hidden; max-height: none; padding: 2px; scrollbar-width: none; }
.xq-port .xq-moves li { display: flex; gap: 4px; flex: none; }
.xq-port .xq-record { order: 2; text-align: center; margin: 0; }
.xq-port .xq-side > .ol-bar { order: -2; margin: 0; }
.xq-fit .ol-bar { padding: 7px 9px; gap: 5px; }
.xq-land .xq-side > .ol-bar { flex: none; margin: 0 0 8px; }
/* landscape: board on the left; controls, status and moves in a column beside it */
.xq.xq-land { display: grid; grid-template-columns: var(--xq-bs) 250px; grid-template-rows: auto auto minmax(0, 1fr); gap: 6px 14px; padding: 6px; height: auto; flex: 0 0 auto; margin: auto; justify-content: center; }
.xq-land .xq-main { display: contents; }
.xq-land .xq-boardwrap { grid-column: 1; grid-row: 1 / -1; }
.xq-land .xq-top { grid-column: 2; grid-row: 1; margin: 0; flex-direction: column; align-items: stretch; }
.xq-land .xq-pzbar { grid-column: 2; grid-row: 2; margin: 0; }
.xq-land .xq-opts { flex-direction: column; gap: 4px; flex: none; align-items: stretch; }
.xq-land .xq-opts label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.xq-land .xq-opts select { width: 62%; margin: 0; }
.xq-land .xq-tools .xq-btn { flex: 1 1 auto; }
.xq-land .xq-side { grid-column: 2; grid-row: 3; display: flex; flex-direction: column; height: 0; min-height: 100%; padding: 10px; overflow: hidden; }
.xq-land .xq-status { order: 0; text-align: left; margin: 0 0 8px; white-space: normal; overflow: visible; }
.xq-land .xq-moves { display: grid; flex: 1 1 auto; min-height: 0; max-height: none; align-content: start; }
.xq-land .xq-moves:empty { display: grid; }
.xq-land .xq-moves li { display: contents; }
.xq-land .xq-record { margin: 8px 0 0; text-align: left; }
.xq-fit .xq-captured { flex-wrap: nowrap; overflow: hidden; height: 24px; }
.xq-tight .xq-captured { display: none; }   /* a short screen: the board needs every pixel of height */
.xq-more { display: none; }
.xq-port.xq-tight .xq-more { display: inline-block; }
.xq-port.xq-tight .xq-record { display: none; }
.xq-port.xq-tight .xq-top { position: relative; }
.xq-port.xq-tight .xq-opts { display: none; }
.xq-port.xq-tight.xq-optsopen .xq-opts { display: flex; position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin-top: 4px; padding: 10px; background: #0b1328; border: 1px solid #55d6ff; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); }
.xq-port.xq-tight .xq-more[aria-expanded="true"] { border-color: #55d6ff; color: #fff; }
.xq-port.xq-tight .xq-tools { justify-content: center; } .xq-port.xq-tight .xq-tools .xq-btn { flex: 1 1 auto; padding: 6px 7px; }
@media (pointer: coarse) {
  .xq-btn, .xq-opts select { min-height: 40px; } .xq-icon { min-width: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .xq-thinking, .xq-overlay:not([hidden]) .xq-dialog, .xq-pt.hint::before { animation: none; }
  .xq-note { transition: none; }
}

/* the plain mode switch used when the shared online script did not load */
.xq-modes { display: flex; gap: 6px; flex-wrap: wrap; }
.xq-modes [aria-pressed="true"] { border-color: #55d6ff; color: #fff; }
/* the practice board in "How to play" is tap only, so the dialog can still scroll on a phone */
.xq-guide .xq-board { touch-action: manipulation; }

/* wide page (.xq-wide, set by game.js from the root's own width): the board on the left and every control beside it,
   so the whole board is on screen without scrolling; the board gives way a little on short windows */
.xq.xq-wide { display: grid; grid-template-columns: clamp(300px, calc((100vh - 236px) * 0.9), 520px) 270px; grid-template-rows: auto auto minmax(0, 1fr); gap: 10px 22px; justify-content: center; align-items: start; }
@supports (height: 100dvh) { .xq.xq-wide { grid-template-columns: clamp(300px, calc((100dvh - 236px) * 0.9), 520px) 270px; } }
.xq-wide .xq-main { display: contents; }
.xq-wide .xq-boardwrap { grid-column: 1; grid-row: 1 / -1; max-width: none; margin: 0; }
.xq-wide .xq-top { grid-column: 2; grid-row: 1; margin: 0; flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
.xq-wide .xq-pzbar { grid-column: 2; grid-row: 2; margin: 0; }
.xq-wide .xq-opts { flex-direction: column; flex: none; gap: 6px; align-items: stretch; }
.xq-wide .xq-opts label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.xq-wide .xq-opts select { width: 64%; margin: 0; }
.xq-wide .xq-tools .xq-btn, .xq-wide .xq-pztools .xq-btn { flex: 1 1 auto; }
.xq-wide .xq-side { grid-column: 2; grid-row: 3; min-height: 150px; }
.xq-wide .xq-moves { max-height: 208px; }