.wscheckers-game {
 --wscheckers-surface:var(--wscbe-stage-surface-1, #fffdf7);
 --wscheckers-surface-strong:var(--wscbe-stage-surface-1, #fffdf7);
 --wscheckers-surface-soft:var(--wscbe-stage-surface-2, #f4f0e8);
 --wscheckers-surface-muted:var(--wscbe-stage-surface-3, #ece7dc);
 --wscheckers-input-bg:color-mix(in srgb, var(--wscheckers-surface-strong) 88%, #ffffff 12%);
 --wscheckers-input-bg-hover:color-mix(in srgb, var(--wscheckers-surface-strong) 78%, #ffffff 22%);
 --wscheckers-border:var(--wscbe-stage-border, rgba(37,47,63,.13));
 --wscheckers-border-strong:var(--wscbe-stage-border-strong, rgba(37,47,63,.18));
 --wscheckers-text:var(--wscbe-stage-text, #172033);
 --wscheckers-muted:var(--wscbe-stage-text-muted, #687586);
 --wscheckers-soft-text:var(--wscbe-stage-text-soft, #526171);
 --wscheckers-accent:var(--wscbe-accent-1, #172033);
 --wscheckers-accent-text:#ffffff;
 --wscheckers-danger:var(--wscbe-stage-danger, #b42318);
 --wscheckers-success:var(--wscbe-stage-success, #0f766e);
 --wscheckers-thinking:var(--wscbe-stage-warning, #b45309);
 --wscheckers-thinking-bg:rgba(245,158,11,.16);
 --wscheckers-thinking-border:rgba(180,83,9,.24);
 --wscheckers-shadow:var(--wscbe-stage-shadow, 0 16px 36px rgba(35,38,42,.09));
 --wscheckers-shadow-soft:var(--wscbe-stage-shadow-soft, 0 8px 20px rgba(35,38,42,.06));
 --wscheckers-board-shadow:0 20px 45px rgba(50,40,28,.14);
 --wscheckers-square-light:#f1dcc0;
 --wscheckers-square-dark:#926137;
 width:100%;
 color:var(--wscheckers-text);
 box-sizing:border-box;
 color-scheme:light;
}

#wscbe-app[data-theme="light"] .wscheckers-game,
[data-theme="light"] .wscheckers-game,
.wsui-root[data-theme="light"] .wscheckers-game,
[data-wsui-theme="light"] .wscheckers-game,
.wsui-theme-light .wscheckers-game,
.wscbe-theme-light .wscheckers-game,
body.light .wscheckers-game,
html.light .wscheckers-game {
 --wscheckers-surface:var(--wscbe-stage-surface-1, #fffdf7);
 --wscheckers-surface-strong:var(--wscbe-stage-surface-1, #fffdf7);
 --wscheckers-surface-soft:var(--wscbe-stage-surface-2, #f4f0e8);
 --wscheckers-surface-muted:var(--wscbe-stage-surface-3, #ece7dc);
 --wscheckers-input-bg:rgba(255,255,255,.72);
 --wscheckers-input-bg-hover:rgba(255,255,255,.92);
 --wscheckers-border:var(--wscbe-stage-border, rgba(37,47,63,.13));
 --wscheckers-border-strong:var(--wscbe-stage-border-strong, rgba(37,47,63,.18));
 --wscheckers-text:var(--wscbe-stage-text, #172033);
 --wscheckers-muted:var(--wscbe-stage-text-muted, #687586);
 --wscheckers-soft-text:var(--wscbe-stage-text-soft, #526171);
 --wscheckers-shadow:0 18px 38px rgba(35,38,42,.08);
 --wscheckers-shadow-soft:0 9px 22px rgba(35,38,42,.06);
 --wscheckers-board-shadow:0 24px 52px rgba(50,40,28,.13);
 --wscheckers-thinking:#9a5b00;
 --wscheckers-thinking-bg:rgba(245,158,11,.15);
 --wscheckers-thinking-border:rgba(180,83,9,.24);
 color-scheme:light;
}

#wscbe-app[data-theme="dark"] .wscheckers-game,
[data-theme="dark"] .wscheckers-game,
.wsui-root[data-theme="dark"] .wscheckers-game,
[data-wsui-theme="dark"] .wscheckers-game,
.wsui-theme-dark .wscheckers-game,
.wscbe-theme-dark .wscheckers-game,
.wscbe-dark .wscheckers-game,
.wsc-theme-dark .wscheckers-game,
body.dark .wscheckers-game,
html.dark .wscheckers-game,
body.is-dark .wscheckers-game,
html.is-dark .wscheckers-game,
[class*="theme-dark"] .wscheckers-game,
[class*="dark-mode"] .wscheckers-game {
 --wscheckers-surface:var(--wscbe-stage-surface-1, #171d25);
 --wscheckers-surface-strong:var(--wscbe-stage-surface-2, #1d2530);
 --wscheckers-surface-soft:var(--wscbe-stage-surface-2, #1d2530);
 --wscheckers-surface-muted:var(--wscbe-stage-surface-3, #232d39);
 --wscheckers-input-bg:rgba(12,18,29,.92);
 --wscheckers-input-bg-hover:rgba(18,27,42,.98);
 --wscheckers-border:var(--wscbe-stage-border, rgba(226,232,240,.10));
 --wscheckers-border-strong:var(--wscbe-stage-border-strong, rgba(226,232,240,.16));
 --wscheckers-text:var(--wscbe-stage-text, #ecf1f7);
 --wscheckers-muted:var(--wscbe-stage-text-muted, #95a2b4);
 --wscheckers-soft-text:var(--wscbe-stage-text-soft, #c3ced9);
 --wscheckers-accent:#dbeafe;
 --wscheckers-accent-text:#0f172a;
 --wscheckers-danger:var(--wscbe-stage-danger, #f87171);
 --wscheckers-success:var(--wscbe-stage-success, #2dd4bf);
 --wscheckers-thinking:var(--wscbe-stage-warning, #fbbf24);
 --wscheckers-thinking-bg:rgba(251,191,36,.14);
 --wscheckers-thinking-border:rgba(251,191,36,.28);
 --wscheckers-shadow:0 20px 48px rgba(0,0,0,.32);
 --wscheckers-shadow-soft:0 11px 24px rgba(0,0,0,.22);
 --wscheckers-board-shadow:0 22px 56px rgba(0,0,0,.38);
 color-scheme:dark;
}

.wscheckers-game *,
.wscheckers-game *::before,
.wscheckers-game *::after {
 box-sizing:border-box;
}

.wscheckers-layout {
 display:grid;
 grid-template-columns:minmax(340px,1.38fr) minmax(280px,.9fr);
 gap:18px;
 align-items:start;
 width:100%;
}

.wscheckers-boardbox,
.wscheckers-card {
 background:linear-gradient(180deg, color-mix(in srgb, var(--wscheckers-surface-strong) 94%, #ffffff 6%) 0%, var(--wscheckers-surface) 100%);
 border:1px solid var(--wscheckers-border);
 border-radius:20px;
 box-shadow:var(--wscheckers-shadow-soft);
 color:var(--wscheckers-text);
}

#wscbe-app[data-theme="dark"] .wscheckers-boardbox,
#wscbe-app[data-theme="dark"] .wscheckers-card,
[data-theme="dark"] .wscheckers-boardbox,
[data-theme="dark"] .wscheckers-card,
.wsui-theme-dark .wscheckers-boardbox,
.wsui-theme-dark .wscheckers-card,
.wscbe-theme-dark .wscheckers-boardbox,
.wscbe-theme-dark .wscheckers-card,
body.dark .wscheckers-boardbox,
body.dark .wscheckers-card,
html.dark .wscheckers-boardbox,
html.dark .wscheckers-card,
[class*="theme-dark"] .wscheckers-boardbox,
[class*="theme-dark"] .wscheckers-card {
 background:linear-gradient(180deg, color-mix(in srgb, var(--wscheckers-surface-strong) 96%, #ffffff 4%) 0%, var(--wscheckers-surface) 100%);
}

.wscheckers-boardbox {
 padding:16px;
 min-width:0;
 box-shadow:var(--wscheckers-board-shadow);
}

.wscheckers-toolbar {
 display:flex;
 align-items:flex-start;
 justify-content:space-between;
 gap:12px;
 margin-bottom:14px;
}

.wscheckers-status-row {
 display:flex;
 flex-wrap:wrap;
 align-items:center;
 gap:9px;
 min-width:0;
}

.wscheckers-status {
 min-height:24px;
 display:flex;
 align-items:center;
 font-size:15px;
 font-weight:750;
 color:var(--wscheckers-text);
 letter-spacing:.01em;
}

.wscheckers-status.is-thinking {
 color:var(--wscheckers-thinking);
}

.wscheckers-status.is-error {
 color:var(--wscheckers-danger);
}

.wscheckers-ai-thinking {
 display:inline-flex;
 align-items:center;
 gap:.45rem;
 min-height:24px;
 padding:.28rem .62rem;
 border-radius:999px;
 border:1px solid var(--wscheckers-thinking-border);
 background:var(--wscheckers-thinking-bg);
 color:var(--wscheckers-thinking);
 font-size:.78rem;
 font-weight:800;
 line-height:1;
 letter-spacing:.02em;
 white-space:nowrap;
}

.wscheckers-ai-thinking[hidden] {
 display:none;
}

.wscheckers-ai-thinking::before {
 content:'';
 width:.45rem;
 height:.45rem;
 border-radius:999px;
 background:currentColor;
 opacity:.75;
 animation:wscheckers-thinking-pulse 1s ease-in-out infinite;
}

@keyframes wscheckers-thinking-pulse {
 0%, 100% {
  transform:scale(.72);
  opacity:.42;
 }
 50% {
  transform:scale(1);
  opacity:1;
 }
}

.wscheckers-btn {
 appearance:none;
 border:1px solid color-mix(in srgb, var(--wscheckers-border-strong) 72%, transparent);
 border-radius:12px;
 padding:10px 14px;
 background:linear-gradient(180deg, color-mix(in srgb, var(--wscheckers-accent) 92%, #ffffff 8%), var(--wscheckers-accent));
 color:var(--wscheckers-accent-text);
 font-size:14px;
 font-weight:750;
 cursor:pointer;
 line-height:1;
 white-space:nowrap;
 box-shadow:0 8px 18px rgba(15,23,42,.12);
}

.wscheckers-btn:hover,
.wscheckers-btn:focus-visible {
 filter:brightness(.97);
 border-color:var(--wscheckers-border-strong);
}

.wscheckers-btn:focus-visible,
.wscheckers-select:focus-visible,
.wscheckers-settings-host select:focus-visible {
 outline:2px solid color-mix(in srgb, var(--wscheckers-thinking) 52%, transparent);
 outline-offset:2px;
}

.wscheckers-board {
 width:100%;
 max-width:640px;
 aspect-ratio:1/1;
 display:grid;
 grid-template-columns:repeat(8,1fr);
 border-radius:16px;
 overflow:hidden;
 border:1px solid color-mix(in srgb, var(--wscheckers-border-strong) 82%, transparent);
 background:var(--wscheckers-square-dark);
 margin:0 auto;
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 12px 28px rgba(15,23,42,.16);
 transition:opacity .16s ease,filter .16s ease;
}

.wscheckers-game[data-locked="1"] .wscheckers-board {
 opacity:.76;
 filter:saturate(.88);
 pointer-events:none;
}

.wscheckers-square {
 position:relative;
 display:flex;
 align-items:center;
 justify-content:center;
 min-width:0;
 min-height:0;
 border:0;
 padding:0;
 user-select:none;
}

.wscheckers-square.light {
 background:var(--wscheckers-square-light);
}

.wscheckers-square.dark {
 background:var(--wscheckers-square-dark);
}

.wscheckers-square.playable {
 cursor:pointer;
}

.wscheckers-square.target::after {
 content:'';
 position:absolute;
 width:23%;
 height:23%;
 border-radius:999px;
 background:rgba(255,255,255,.82);
 box-shadow:0 0 0 4px rgba(15,23,42,.16);
}

.wscheckers-square.selected {
 box-shadow:inset 0 0 0 4px #22c55e;
 z-index:1;
}

.wscheckers-piece {
 width:74%;
 height:74%;
 border-radius:999px;
 position:relative;
 box-shadow:inset 0 3px 8px rgba(255,255,255,.2),0 8px 14px rgba(0,0,0,.24);
}

.wscheckers-piece.red {
 background:radial-gradient(circle at 30% 28%,#ffaaa3 0%,#d84941 42%,#8d211d 100%);
}

.wscheckers-piece.black {
 background:radial-gradient(circle at 30% 28%,#677085 0%,#252d3a 44%,#0a0f19 100%);
}

.wscheckers-piece.king::before {
 content:'K';
 position:absolute;
 inset:0;
 display:flex;
 align-items:center;
 justify-content:center;
 color:#f8fafc;
 font-size:24px;
 font-weight:800;
 text-shadow:0 1px 2px rgba(0,0,0,.35);
}

.wscheckers-sidebar {
 display:grid;
 gap:16px;
 min-width:0;
}

.wscheckers-card {
 padding:16px;
}

.wscheckers-card h2,
.wscheckers-card h3 {
 margin:0 0 12px 0;
 color:var(--wscheckers-text);
 font-size:17px;
 line-height:1.25;
 font-weight:800;
}

.wscheckers-card p {
 margin:0 0 12px 0;
 color:var(--wscheckers-muted);
}

.wscheckers-card ul {
 margin:0;
 padding-left:18px;
 color:var(--wscheckers-muted);
}

.wscheckers-card li + li {
 margin-top:8px;
}

.wscheckers-field {
 display:grid;
 gap:7px;
 margin-top:12px;
}

.wscheckers-field label,
.wscheckers-mode-row span {
 font-size:13px;
 font-weight:750;
 color:var(--wscheckers-muted);
}

.wscheckers-select,
.wscheckers-settings-host select {
 width:100%;
 border:1px solid var(--wscheckers-border-strong);
 border-radius:12px;
 padding:9px 10px;
 background:var(--wscheckers-input-bg);
 color:var(--wscheckers-text);
 min-height:39px;
 outline:none;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}

.wscheckers-select:hover,
.wscheckers-settings-host select:hover {
 background:var(--wscheckers-input-bg-hover);
}

.wscheckers-select option,
.wscheckers-settings-host select option {
 background:var(--wscheckers-input-bg);
 color:var(--wscheckers-text);
}

.wscheckers-select:focus,
.wscheckers-settings-host select:focus {
 border-color:color-mix(in srgb, var(--wscheckers-thinking) 45%, var(--wscheckers-border-strong));
 box-shadow:0 0 0 3px color-mix(in srgb, var(--wscheckers-thinking) 16%, transparent);
}

.wscheckers-select:disabled,
.wscheckers-settings-host select:disabled {
 opacity:.62;
 cursor:not-allowed;
}

.wscheckers-mode-row {
 display:grid;
 grid-template-columns:1fr;
 gap:8px;
 margin-bottom:12px;
}

.wscheckers-ai-note {
 margin-top:10px;
 color:var(--wscheckers-muted);
 font-size:13px;
 line-height:1.4;
}

.wscheckers-settings-host .wscbe-modern-form,
.wscheckers-settings-host .wscbe-modern-field,
.wscheckers-settings-host .wscbe-modern-form-section {
 margin:0;
 background:transparent;
 border:0;
 padding:0;
 box-shadow:none;
}

.wscheckers-settings-host .wscbe-modern-form {
 display:block;
}

.wscheckers-settings-host .wscbe-modern-field-label,
.wscheckers-settings-host label {
 color:var(--wscheckers-muted);
}

.wscheckers-settings-host .wscbe-modern-control,
.wscheckers-settings-host input,
.wscheckers-settings-host textarea {
 background:var(--wscheckers-input-bg);
 border-color:var(--wscheckers-border-strong);
 color:var(--wscheckers-text);
}

.wscheckers-stats {
 display:grid;
 gap:10px;
}

.wscheckers-stats div {
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:12px;
 padding:10px 12px;
 border-radius:13px;
 background:var(--wscheckers-surface-soft);
 border:1px solid var(--wscheckers-border);
}

.wscheckers-stats span {
 color:var(--wscheckers-muted);
}

.wscheckers-stats strong {
 color:var(--wscheckers-text);
 font-weight:800;
}

.wscheckers-boardbox.is-win .wscheckers-status {
 color:var(--wscheckers-success);
}

.wscheckers-boardbox.is-locked {
 box-shadow:var(--wscheckers-board-shadow),0 0 0 1px var(--wscheckers-thinking-border);
}

.wscheckers-legacy-area,
.wscheckers-fe-wrap,
.wscheckers-omcfg-wrap {
 padding:18px;
}

.wscheckers-omcfg-card {
 max-width:760px;
}

.wscheckers-switch {
 display:flex;
 align-items:center;
 gap:12px;
 color:var(--wscheckers-text);
}

.wscheckers-switch input {
 position:absolute;
 opacity:0;
 pointer-events:none;
}

.wscheckers-switch-slider {
 width:44px;
 height:24px;
 border-radius:999px;
 background:var(--wscheckers-surface-soft);
 border:1px solid var(--wscheckers-border);
 position:relative;
 flex:0 0 auto;
}

.wscheckers-switch-slider::after {
 content:'';
 width:18px;
 height:18px;
 border-radius:999px;
 background:var(--wscheckers-muted);
 position:absolute;
 left:2px;
 top:2px;
 transition:transform .16s ease,background .16s ease;
}

.wscheckers-switch input:checked + .wscheckers-switch-slider::after {
 transform:translateX(20px);
 background:var(--wscheckers-success);
}

.wscheckers-omcfg-preview {
 margin-top:16px;
 padding:14px;
 border:1px solid var(--wscheckers-border);
 border-radius:14px;
 background:var(--wscheckers-surface-soft);
 color:var(--wscheckers-text);
}

.wscheckers-omcfg-preview-title {
 font-weight:700;
 margin-bottom:4px;
}

.wscheckers-omcfg-preview-text,
.wscheckers-switch-label {
 color:var(--wscheckers-muted);
}

.wscheckers-omcfg-actions {
 margin-top:16px;
 display:flex;
 justify-content:flex-end;
}

@media (max-width:980px) {
 .wscheckers-layout {
  grid-template-columns:1fr;
 }
 .wscheckers-sidebar {
  grid-template-columns:1fr;
 }
}

@media (max-width:680px) {
 .wscheckers-boardbox,
 .wscheckers-card {
  border-radius:16px;
  padding:14px;
 }
 .wscheckers-toolbar {
  align-items:stretch;
  flex-direction:column;
 }
 .wscheckers-btn {
  width:100%;
 }
 .wscheckers-layout {
  gap:14px;
 }
}