.xq-tool{--xq-wood: linear-gradient(160deg,#f8e6c3 0%,#f1d6a4 52%,#eccb92 100%);--xq-line: #8a5a2b;--xq-frame: #6f451d;--xq-piece: #fffdf5;--xq-piece-edge: #c9a36a;--xq-red: #b42318;--xq-black: #1f2937;--xq-red-soft: rgba(180,35,24,.16);--xq-black-soft: rgba(31,41,55,.16);--xq-mark: rgba(122,74,28,.5);--xq-hint: #d97706}:root[data-theme="dark"] .xq-tool{--xq-wood: linear-gradient(160deg,#3b3022 0%,#322818 52%,#2a2113 100%);--xq-line: #c6a475;--xq-frame: #b08a5a;--xq-piece: #f6edd9;--xq-piece-edge: #a98a58;--xq-red: #d4483b;--xq-black: #20262e;--xq-red-soft: rgba(212,72,59,.24);--xq-black-soft: rgba(0,0,0,.3);--xq-mark: rgba(240,214,168,.45);--xq-hint: #f0b64a}.xq-tool .xq-layout{align-items: flex-start;row-gap: 16px}.xq-tool .tool-content-container{overflow-x: clip}.xq-board-panel,.xq-side-panel{min-width: 0}.xq-side{display: flex;flex-direction: column;gap: 16px}.xq-panel-header{gap: 12px}.xq-panel-header>span:first-child{flex: 1;min-width: 0}.xq-panel-header i{margin-right: 6px}.xq-panel-header .xq-hint{flex: 0 1 auto;min-width: 0;color: var(--text-3);font-size: 12.5px;text-align: right}.xq-board-body,.xq-side-body{display: flex;flex-direction: column;gap: 12px;min-width: 0}.xq-board-body{--xq-board-max: 640px}.xq-hud{display: flex;align-items: stretch;justify-content: space-between;gap: 8px;width: 100%;max-width: var(--xq-board-max);margin: 0 auto}.xq-hud-box{display: inline-flex;flex: 1 1 0;align-items: center;justify-content: center;gap: 6px;min-width: 0;padding: 8px 9px;background: var(--bg-soft);border: 1px solid var(--border);border-radius: var(--radius);color: var(--text);font-size: 18px;font-weight: 800;line-height: 1.1;font-variant-numeric: tabular-nums;white-space: nowrap}.xq-hud-box i{flex: 0 0 auto;color: var(--text-3);font-size: 13px}.xq-hud-box em{flex: 0 0 auto;color: var(--text-3);font-size: 11px;font-style: normal;font-weight: 600}.xq-turn-box{flex: 2.2 1 0;justify-content: flex-start;gap: 8px;padding-left: 12px;font-size: 14px;letter-spacing: .01em}.xq-turn-dot{flex: 0 0 auto;width: 10px;height: 10px;border-radius: 50%}.xq-turn-dot.xq-red{background: #c0392b;box-shadow: 0 0 0 3px rgba(192,57,43,.18)}.xq-turn-dot.xq-black{background: #1f2937;box-shadow: 0 0 0 3px rgba(31,41,55,.18)}.xq-turn-box.is-thinking{border-color: var(--xq-hint);box-shadow: 0 0 0 3px rgba(217,119,6,.14)}.xq-stage{position: relative;width: 100%;max-width: var(--xq-board-max);aspect-ratio: 9 / 10;margin: 0 auto;background: var(--xq-wood);border: 1px solid var(--xq-frame);border-radius: 12px;box-shadow: inset 0 0 0 6px rgba(255,250,235,.22),0 8px 22px rgba(90,58,22,.18);overflow: hidden;min-width: 0;-webkit-tap-highlight-color: transparent}:root[data-theme="dark"] .xq-stage{box-shadow: inset 0 0 0 6px rgba(255,240,210,.05),0 8px 22px rgba(0,0,0,.4)}.xq-lines{position: absolute;inset: 0;width: 100%;height: 100%;color: var(--xq-line);stroke: currentColor;stroke-width: 1.6;fill: none;pointer-events: none}.xq-lines .xq-marks{opacity: .62}.xq-lines .xq-river{fill: currentColor;stroke: none;opacity: .48;font-family: "KaiTi","STKaiti","Kaiti SC","Songti SC",serif;font-size: 34px;font-weight: 700;letter-spacing: 6px}.xq-layer{position: absolute;left: 5.5556%;top: 5%;width: 88.8889%;height: 90%;z-index: 1}.xq-piece,.xq-dot,.xq-drag{font-family: "KaiTi","STKaiti","Kaiti SC","Songti SC",serif}.xq-piece{position: absolute;width: 11.4%;aspect-ratio: 1 / 1;padding: 0;border: 2px solid var(--xq-piece-edge);border-radius: 50%;background: radial-gradient(circle at 34% 28%,#fffefa 0%,var(--xq-piece) 62%,#f3e6c9 100%);color: var(--xq-red);font-size: clamp(15px,5.6vw,39px);font-weight: 700;line-height: 1;display: flex;align-items: center;justify-content: center;transform: translate(-50%,-50%);transform-origin: center;cursor: pointer;touch-action: none;user-select: none;z-index: 3;box-shadow: 0 2px 4px rgba(70,42,10,.28),inset 0 0 0 3px rgba(160,110,50,.2),inset 0 0 0 5px rgba(255,255,255,.55);transition: transform .12s ease,box-shadow .12s ease}.xq-piece.xq-black{color: var(--xq-black)}.xq-piece:hover{transform: translate(-50%,-50%) scale(1.05)}.xq-piece:focus-visible{outline: 3px solid var(--primary);outline-offset: 2px}.xq-piece.is-sel{box-shadow: 0 0 0 4px var(--xq-hint),0 4px 10px rgba(70,42,10,.32),inset 0 0 0 3px rgba(160,110,50,.2),inset 0 0 0 5px rgba(255,255,255,.55);transform: translate(-50%,-50%) scale(1.06);z-index: 5}.xq-piece.is-target::after{content: "";position: absolute;inset: -4px;border: 3px solid rgba(180,35,24,.72);border-radius: 50%;pointer-events: none}.xq-piece.is-check{animation: xq-check 1s ease-in-out infinite}@keyframes xq-check{0%,100%{box-shadow: 0 0 0 0 rgba(220,38,38,.5),0 2px 4px rgba(70,42,10,.28),inset 0 0 0 3px rgba(160,110,50,.2)}50%{box-shadow: 0 0 0 7px rgba(220,38,38,.18),0 2px 4px rgba(70,42,10,.28),inset 0 0 0 3px rgba(160,110,50,.2)}}.xq-piece.is-dragging{opacity: .35}.xq-dot{position: absolute;width: 3.4%;aspect-ratio: 1 / 1;padding: 0;border: 0;border-radius: 50%;background: rgba(31,41,55,.34);box-shadow: 0 0 0 3px rgba(31,41,55,.08);transform: translate(-50%,-50%);cursor: pointer;z-index: 2;transition: transform .1s ease,background .1s ease}.xq-dot:hover{background: rgba(180,35,24,.65);transform: translate(-50%,-50%) scale(1.2)}.xq-dot:focus-visible{outline: 2px solid var(--primary);outline-offset: 2px}.xq-mark{position: absolute;width: 10.4%;aspect-ratio: 1 / 1;border-radius: 8px;transform: translate(-50%,-50%);pointer-events: none;z-index: 1}.xq-mark-last{border: 2px dashed var(--xq-mark)}.xq-mark-hint{border: 3px solid var(--xq-hint);box-shadow: 0 0 0 5px rgba(217,119,6,.16);animation: xq-hint 1.1s ease-in-out infinite}@keyframes xq-hint{0%,100%{opacity: .55}50%{opacity: 1}}.xq-drag{position: absolute;width: 9.8%;aspect-ratio: 1 / 1;border: 2px solid var(--xq-piece-edge);border-radius: 50%;background: radial-gradient(circle at 34% 28%,#fffefa 0%,var(--xq-piece) 62%,#f3e6c9 100%);color: var(--xq-red);font-size: clamp(15px,5.6vw,39px);font-weight: 700;line-height: 1;display: flex;align-items: center;justify-content: center;transform: translate(-50%,-50%) scale(1.08);pointer-events: none;z-index: 20;box-shadow: 0 8px 18px rgba(60,35,8,.35);opacity: .94}.xq-drag.xq-black{color: var(--xq-black)}.xq-think{position: absolute;top: 10px;left: 50%;z-index: 8;display: inline-flex;align-items: center;gap: 6px;max-width: calc(100% - 24px);padding: 5px 12px;border-radius: 999px;background: rgba(17,24,39,.82);color: #f8fafc;font-size: 12.5px;line-height: 1.4;white-space: nowrap;transform: translateX(-50%);opacity: 0;visibility: hidden;transition: opacity .16s ease;pointer-events: none}.xq-think.is-on{opacity: 1;visibility: visible}.xq-think i{font-size: 12px;animation: xq-spin 1.2s linear infinite}@keyframes xq-spin{from{transform: rotate(0deg)}to{transform: rotate(360deg)}}.xq-overlay{position: absolute;inset: 0;z-index: 30;display: none;align-items: center;justify-content: center;padding: 14px;background: rgba(15,23,42,.55);-webkit-backdrop-filter: blur(2px);backdrop-filter: blur(2px)}.xq-overlay.is-on{display: flex}.xq-overlay[hidden]{display: none !important}.xq-overlay-card{position: relative;width: min(330px,100%);padding: 22px 20px 18px;background: var(--bg);border: 1px solid var(--border);border-radius: 16px;box-shadow: var(--shadow-lg);text-align: center}.xq-overlay-close{position: absolute;top: 8px;right: 8px;width: 30px;height: 30px;padding: 0;border: 0;border-radius: 8px;background: transparent;color: var(--text-3);font-size: 16px;cursor: pointer}.xq-overlay-close:hover{background: var(--bg-soft);color: var(--text)}.xq-overlay-icon{display: inline-flex;align-items: center;justify-content: center;width: 52px;height: 52px;margin-bottom: 8px;border-radius: 50%;font-size: 25px}.xq-overlay-icon.is-win{background: var(--success-soft);color: var(--success)}.xq-overlay-icon.is-draw{background: var(--info-soft);color: var(--info)}.xq-overlay-icon.is-loss{background: var(--danger-soft);color: var(--danger)}.xq-overlay-title{margin-bottom: 4px;font-size: 22px;font-weight: 800;letter-spacing: .02em}.xq-overlay-text{margin-bottom: 14px;color: var(--text-2);font-size: 13px;line-height: 1.6}.xq-overlay-text>span{display: block}.xq-overlay-meta{margin-top: 2px;color: var(--text-3);font-size: 12px}.xq-overlay-actions{display: flex;flex-wrap: wrap;justify-content: center;gap: 8px}.xq-message{display: none;padding: 8px 12px;border: 1px solid var(--border);border-radius: 9px;background: var(--bg-soft);color: var(--text-2);font-size: 13px;line-height: 1.5}.xq-message.is-on{display: block}.xq-message.is-good{background: var(--success-soft);border-color: #86efac;color: var(--success)}.xq-message.is-error{background: var(--danger-soft);border-color: #fecaca;color: var(--danger)}.xq-tools{display: flex;flex-wrap: wrap;gap: 8px}.xq-tools .btn{display: inline-flex;align-items: center;gap: 5px}.xq-tools .btn:disabled{opacity: .5;cursor: not-allowed}.xq-sound-btn.is-on{border-color: var(--primary);color: var(--primary)}.xq-trays{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 8px}.xq-tray{min-width: 0;padding: 7px 10px;border: 1px solid var(--border);border-radius: 9px;background: var(--bg-soft)}.xq-tray-label{display: block;margin-bottom: 4px;color: var(--text-3);font-size: 11.5px;font-weight: 600}.xq-tray-list{display: flex;flex-wrap: wrap;gap: 4px;min-height: 24px;align-items: center}.xq-tray-piece{display: inline-flex;align-items: center;justify-content: center;width: 24px;height: 24px;border: 1px solid var(--border-strong);border-radius: 50%;background: #fffdf5;font-family: "KaiTi","STKaiti","Kaiti SC","Songti SC",serif;font-size: 14px;font-weight: 700}.xq-tray-piece.xq-red{color: #b42318}.xq-tray-piece.xq-black{color: #1f2937}.xq-tray-empty{color: var(--text-3);font-size: 12px}.xq-status{color: var(--text-3);font-size: 12.5px;line-height: 1.6}.xq-status strong{color: var(--text-2)}.xq-field-label{margin-bottom: -4px;color: var(--text-3);font-size: 12px;font-weight: 600;letter-spacing: .02em}.xq-side-picker{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 8px}.xq-side-card{display: flex;flex-direction: column;gap: 2px;padding: 8px 10px;border: 1px solid var(--border);border-radius: var(--radius);background: var(--bg);color: var(--text);text-align: left;cursor: pointer;transition: border-color .15s,background .15s}.xq-side-card strong{font-size: 13.5px}.xq-side-card span{color: var(--text-3);font-size: 11.5px;line-height: 1.4}.xq-side-card:hover{border-color: var(--primary)}.xq-side-card.is-active{border-color: var(--primary);background: var(--primary-soft)}.xq-levels{display: flex;flex-direction: column;gap: 8px}.xq-level-card{display: flex;flex-direction: column;gap: 2px;padding: 8px 10px;border: 1px solid var(--border);border-radius: var(--radius);background: var(--bg);color: var(--text);text-align: left;cursor: pointer;transition: border-color .15s,background .15s}.xq-level-card:hover{border-color: var(--primary)}.xq-level-card.is-active{border-color: var(--primary);background: var(--primary-soft)}.xq-level-top{display: flex;align-items: center;justify-content: space-between;gap: 8px}.xq-level-top strong{font-size: 13.5px}.xq-level-top em{flex: 0 0 auto;padding: 1px 7px;border-radius: 999px;background: var(--bg-soft);color: var(--text-3);font-size: 11px;font-style: normal;font-weight: 600}.xq-level-card.is-active .xq-level-top em{background: rgba(255,255,255,.6);color: var(--primary)}:root[data-theme="dark"] .xq-level-card.is-active .xq-level-top em{background: rgba(0,0,0,.22)}.xq-level-desc{color: var(--text-3);font-size: 11.5px;line-height: 1.45}.xq-action-row{display: flex;gap: 8px}.xq-action-row .btn{flex: 1 1 0}.xq-note{color: var(--text-3);font-size: 12px;line-height: 1.65}.xq-note i{margin-right: 4px}.xq-moves{max-height: 250px;overflow-y: auto;padding: 6px;border: 1px solid var(--border);border-radius: var(--radius);background: var(--bg-soft);font-size: 13px;scrollbar-width: thin}.xq-moves-empty{padding: 10px 6px;color: var(--text-3);font-size: 12.5px;text-align: center}.xq-move-row{display: grid;grid-template-columns: 30px minmax(0,1fr) minmax(0,1fr);align-items: center;gap: 4px;padding: 2px 2px}.xq-move-no{color: var(--text-3);font-size: 11.5px;font-variant-numeric: tabular-nums}.xq-move{padding: 2px 6px;border-radius: 6px;color: var(--text-2);font-variant-numeric: tabular-nums;white-space: nowrap}.xq-move.is-last{background: var(--primary-soft);color: var(--primary);font-weight: 600}.xq-move-empty{color: var(--text-3)}.xq-engine-info{padding: 8px 10px;border: 1px solid var(--border);border-radius: 9px;background: var(--bg-soft);color: var(--text-2);font-size: 12.5px;line-height: 1.6;word-break: break-word}.xq-engine-info i{margin-right: 3px;color: var(--text-3)}.xq-engine-info strong{color: var(--text)}.xq-stats-grid{display: grid;grid-template-columns: repeat(5,minmax(0,1fr));gap: 6px}.xq-stat{display: flex;flex-direction: column;align-items: center;gap: 1px;padding: 7px 2px;border: 1px solid var(--border);border-radius: 9px;background: var(--bg-soft)}.xq-stat strong{font-size: 18px;font-weight: 800;font-variant-numeric: tabular-nums;line-height: 1.1}.xq-stat span{color: var(--text-3);font-size: 11px}.xq-stat.is-win strong{color: var(--success)}.xq-stat.is-draw strong{color: var(--info)}.xq-stat.is-loss strong{color: var(--danger)}.xq-samples{display: flex;flex-direction: column;gap: 10px;margin: 12px 0}.xq-sample{padding: 12px 14px;border: 1px solid var(--border);border-radius: var(--radius);background: var(--bg-soft)}.xq-sample-head{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 8px;margin-bottom: 4px}.xq-sample-head strong{font-size: 13.5px}.xq-sample-head .xq-chip{flex: 0 0 auto}.xq-sample p{margin: 0;color: var(--text-2);font-size: 13px;line-height: 1.65}.xq-sample code{font-size: .86em}@media (max-width: 991px){.xq-side{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 14px}.xq-side-panel:last-child{grid-column: 1 / -1}}@media (max-width: 767px){.xq-board-body{--xq-board-max: 100%}.xq-side{grid-template-columns: minmax(0,1fr)}.xq-side-panel:last-child{grid-column: auto}.xq-panel-header{flex-wrap: wrap;gap: 4px 12px}.xq-panel-header>span:first-child{flex: 1 1 auto;white-space: nowrap}.xq-panel-header .xq-hint{flex: 1 1 100%;text-align: left}.xq-hud-box{padding: 7px 7px;font-size: 16px}.xq-turn-box{font-size: 13px;gap: 6px;padding-left: 9px}.xq-hud-box i{font-size: 12px}.xq-tools .btn{flex: 1 1 auto}}@media (max-width: 479px){.xq-hud{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 6px}.xq-turn-box{grid-column: 1 / -1}.xq-stage{border-radius: 10px;box-shadow: inset 0 0 0 4px rgba(255,250,235,.22),0 5px 16px rgba(90,58,22,.16)}.xq-trays{grid-template-columns: minmax(0,1fr)}.xq-tools .btn{flex: 1 1 calc(50% - 8px)}.xq-moves{max-height: 200px}.xq-stats-grid{grid-template-columns: repeat(3,minmax(0,1fr))}.xq-overlay-card{padding: 18px 15px 15px}.xq-overlay-title{font-size: 20px}.xq-overlay-text{font-size: 12.5px}.xq-sample{padding: 10px 11px}}@media (max-width: 359px){.xq-hud-box em{display: none}.xq-tools .btn{flex: 1 1 100%}.xq-overlay-icon{display: none}.xq-overlay-title{font-size: 18px}}@media (prefers-reduced-motion: reduce){.xq-piece,.xq-dot,.xq-piece.is-check,.xq-mark-hint,.xq-think i{animation: none !important;transition: none !important}}