.variant-picker{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:0 0 24px;border-bottom:1px solid var(--line);padding:0 0 16px}
.variant-type{display:flex;gap:6px}.variant-type button{padding:10px 18px;border:1px solid var(--line);text-align:left;transition:background .15s}.variant-type button small{display:block;font-size:12px;color:var(--muted)}
.variant-type button.active{background:var(--accent);color:var(--paper,#fffbed);border-color:var(--accent)}.variant-type button.active small{color:inherit;opacity:.85}
.variant-picker label{font-size:14px;display:flex;align-items:center;gap:8px}.variant-picker select{padding:9px 12px;background:var(--card,#fffbed);color:var(--ink);border:1px solid var(--line);font:inherit}.variant-picker p{font-size:12px;color:var(--muted);flex-basis:100%;margin:0}
#classic-section[hidden],#variant-section[hidden]{display:none!important}
.variant-play{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:24px}.variant-board-column{min-width:0}.variant-controls{display:flex;flex-direction:column;gap:14px}
.variant-board-wrap{position:relative;container-type:inline-size;min-width:0}.variant-board-fit{width:100%;min-width:0}.variant-board{box-sizing:border-box;display:grid;grid-template-columns:repeat(var(--size),minmax(0,1fr));grid-template-rows:repeat(var(--size),minmax(0,1fr));width:100%;min-width:0;max-width:100%;aspect-ratio:1;border:3px solid #627451;background:#fffbed}
.v-cell{position:relative;min-width:0;min-height:0;padding:0;margin:0;border:0;border-right:var(--box-right) solid #b6bda2;border-bottom:var(--box-bottom) solid #b6bda2;background:transparent;color:#246348;font:inherit;border-radius:0}
.v-cell.given{font-weight:700;color:#293c30}.v-cell.peer{background:#eff2e3}.v-cell.active-cage{background:#f5f0d9}.v-cell.same{background:#e1edce}.v-cell.selected{background:#cfdfb3;box-shadow:inset 0 0 0 2px #245b41;z-index:1}.v-cell.error{color:#a13940}
.v-value{position:absolute;inset:5px;display:flex;align-items:center;justify-content:center;font-size:clamp(19px,2.5vw,31px);line-height:1}
.is-killer .v-value{inset:15px 5px 4px}.size-16 .v-value{inset:1px;font-size:clamp(8px,2.3cqi,22px)}.size-16.is-killer .v-value{inset:clamp(6px,1.4cqi,15px) 1px 1px}
.v-cage-outline{position:absolute;inset:3px;pointer-events:none;border:0 dashed #778366}.v-cage-outline.cage-top{border-top-width:1px}.v-cage-outline.cage-bottom{border-bottom-width:1px}.v-cage-outline.cage-left{border-left-width:1px}.v-cage-outline.cage-right{border-right-width:1px}
.active-cage .v-cage-outline{border-color:#956722}.v-cage-sum{position:absolute;top:2px;left:6px;font:600 11px/1.1 NineThai,sans-serif;background:#fffbed;color:#4d5d37;padding:0 2px;z-index:2;pointer-events:none}
.v-notes{display:grid;grid-template-columns:repeat(var(--note-cols),1fr);grid-auto-rows:1fr;width:100%;height:100%;font:400 10px/1 NineThai,sans-serif;color:#56705c}.v-notes span{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0}.is-killer .v-notes{font-size:9px}.size-16 .v-notes{font-size:8px}
.size-16 .v-notes{font-size:clamp(2.5px,.7cqi,8px)}.size-16 .v-cage-outline{inset:1px}.size-16 .v-cage-sum{top:1px;left:2px;padding:0 1px;font-size:clamp(5px,1.15cqi,11px)}
.variant-play:has(.size-16){grid-template-columns:minmax(0,1fr)}.variant-play:has(.size-16) .variant-controls{display:grid;grid-template-columns:1fr 1fr;align-items:start}.variant-play:has(.size-16) .variant-numpad{grid-column:2;grid-row:1/span 3}.variant-play:has(.size-16) :is(.variant-key-help,.variant-cage-info,#v-hint-panel){grid-column:1/-1}
.variant-numpad{display:grid;grid-template-columns:repeat(var(--pad-cols),minmax(0,1fr));gap:8px}.variant-numpad .number-key{min-width:0;padding:8px 3px}.variant-numpad .number-key span{font-size:25px}.variant-numpad .number-key.active{outline:2px solid var(--accent);background:#dae8c2}
.variant-tools{display:grid;grid-template-columns:1fr 1fr;gap:6px}.variant-tools button{padding:9px 4px;font-size:13px}.variant-tools button.active{background:var(--accent);color:white}.variant-key-help{font-size:12px;color:var(--muted);margin:0}
#v-selected-notes{font-size:14px;color:var(--ink)}
.variant-cage-info{border-left:3px solid #956722;padding:10px 12px;background:#f5f0d9;font-size:14px;line-height:1.8;color:#594521}
.variant-overlay{position:absolute;inset:0;z-index:4;background:rgba(249,248,234,.96);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;gap:14px}.variant-overlay[hidden]{display:none}.variant-overlay h2,.variant-overlay p{margin:0}
.variant-loading{min-height:350px;display:grid;place-items:center;color:var(--muted)}#v-progress-fill{height:100%;background:var(--accent);transition:width .2s}
.v-cell.v-hint-source{background:#fff0ce}.v-cell.v-hint-target{background:#dceff6;box-shadow:inset 0 0 0 2px #277e9e}.v-cell:focus-visible{outline:3px solid #956722;outline-offset:-3px;z-index:3}
body.dark .variant-board{background:#23362b;border-color:#9aa884}body.dark .v-cell,body.dark .v-cell.given{color:#e3ebd8}body.dark .v-cell.peer{background:#2b4032}body.dark .v-cell.active-cage{background:#3e412a}body.dark .v-cell.same{background:#365338}body.dark .v-cell.selected{background:#4b633d;box-shadow:inset 0 0 0 2px #b1d17e}body.dark .v-cell.error{color:#ffb5bd}body.dark .v-notes{color:#c3cfb7}body.dark .v-cage-sum{background:#23362b;color:#e5d7a4}body.dark .variant-cage-info{background:#3e412a;color:#ece0ad}body.dark .variant-overlay{background:rgba(31,47,36,.97)}body.dark .v-cell.v-hint-source{background:#594724}body.dark .v-cell.v-hint-target{background:#214657}
@media(max-width:1100px){.variant-play{grid-template-columns:minmax(0,1fr)}.variant-controls{display:grid;grid-template-columns:1fr 1fr;align-items:start}.variant-numpad{grid-column:2;grid-row:1/span 3}.variant-key-help,.variant-cage-info,#v-hint-panel{grid-column:1/-1}.variant-controls>.primary,.variant-controls>.secondary{width:100%}}
@media(max-width:500px){.variant-picker{gap:12px}.variant-type button{padding:9px 12px}.variant-play{gap:16px}.variant-controls{gap:10px}.variant-numpad{gap:5px}.variant-numpad .number-key span{font-size:23px}}
@media(prefers-reduced-motion:reduce){.variant-type button,#v-progress-fill{transition:none}}