/* Retain the quiet WIN-J PLAY palette; motion only uses transforms and opacity. */
.sg-layout{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:24px;align-items:start}
.sg-stage{position:relative;min-width:0;border:1px solid #d4dfcc;border-radius:16px;background:#eef2e8;padding:18px;overflow:hidden}
.sg-scroll{overflow:auto;max-width:100%;padding:3px;overscroll-behavior:contain;scrollbar-width:thin}
.sg-board{position:relative;margin:auto;user-select:none;-webkit-user-select:none;min-width:0}
.sg-board.is-paused{visibility:hidden}
.sg-controls{display:flex;flex-direction:column;gap:10px;min-width:0}
.sg-metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-bottom:16px;border-bottom:1px solid #dce5d5;margin-bottom:6px}
.sg-metrics span{display:block;font-size:11px;color:#647168;line-height:1.7;overflow-wrap:anywhere}
.sg-metrics strong{display:block;margin-top:8px;font-size:23px;line-height:1.3;font-variant-numeric:tabular-nums}
.sg-rule{font-size:12px;color:#647168;line-height:1.9;margin:10px 0 0}
.sg-paint-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sg-stage .cg-pause-cover{z-index:1000;background:#edf2e9f5;backdrop-filter:blur(8px)}
.sg-gomoku{max-width:600px;aspect-ratio:1;background:#e9dbba;border:1px solid #c9b78f;border-radius:8px;padding:8px;box-shadow:inset 0 1px 12px #90744510;display:grid;grid-template-rows:repeat(15,1fr)}
.sg-gomoku .sg-row{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));min-height:0}
.sg-intersection{position:relative;display:grid;place-items:center;padding:0;margin:0;min-width:0;min-height:0;aspect-ratio:1;background:linear-gradient(#a3916e,#a3916e) center/1px 100% no-repeat,linear-gradient(#a3916e,#a3916e) center/100% 1px no-repeat;border:0;cursor:pointer;touch-action:manipulation;border-radius:0}
.sg-intersection::after{content:"";width:83%;height:83%;border-radius:50%;opacity:0;transform:scale(.75);transition:transform 190ms cubic-bezier(.2,.8,.2,1),opacity 150ms;box-shadow:0 2px 4px #382e242f}
.sg-intersection[data-value="1"]::after{background:radial-gradient(circle at 35% 25%,#66716c,#172620 75%);opacity:1;transform:scale(1)}
.sg-intersection[data-value="2"]::after{background:radial-gradient(circle at 35% 25%,#fff,#e6eae4 75%);border:1px solid #adb6a3;opacity:1;transform:scale(1)}
.sg-intersection.is-last::before{content:"";position:absolute;z-index:1;width:17%;height:17%;border-radius:50%;background:#d99b45;box-shadow:0 0 0 1px #fff8}
.sg-intersection.is-winning::after{box-shadow:0 0 0 2px #c69438,0 0 12px #d8b95375}
.sg-intersection:focus-visible{outline-offset:-1px;z-index:3}
.sg-scroll.is-zoomed .sg-gomoku{min-width:580px}
.sg-nonogram{display:grid;gap:0;max-width:610px;width:100%;padding:1px;touch-action:none}
.sg-nono-row{display:contents}
.sg-clue{display:flex;align-items:center;justify-content:flex-end;gap:4px;padding:4px;font-size:clamp(10px,1.25vw,15px);font-weight:600;color:#445845;background:#e5ecdd;font-variant-numeric:tabular-nums;transition:color 160ms,background 160ms}
.sg-clue.sg-col-clue{flex-direction:column;justify-content:flex-end;gap:1px;border-left:1px solid #d8e1d0}
.sg-clue.is-done{color:#4d7959;background:#d5e7cb}
.sg-nono-cell{display:grid;place-items:center;aspect-ratio:1;border:0;border-right:1px solid #c7d2bf;border-bottom:1px solid #c7d2bf;margin:0;padding:0;background:#fff;color:#66765d;font:inherit;font-size:clamp(13px,3vw,23px);cursor:crosshair;position:relative;touch-action:none}
.sg-nono-cell::before{content:"";position:absolute;inset:1px;background:#365b47;border-radius:2px;transform:scale(.65);opacity:0;transition:transform 130ms cubic-bezier(.2,.8,.2,1),opacity 100ms}
.sg-nono-cell[data-value="1"]::before{transform:scale(1);opacity:1}
.sg-nono-cell.is-five-col{border-right:2px solid #869d79}.sg-nono-cell.is-five-row{border-bottom:2px solid #869d79}
.sg-nono-cell:focus-visible{outline-offset:-3px;z-index:2}
.sg-scroll.is-zoomed .sg-nonogram{min-width:620px}
.sg-nonogram.is-won .sg-nono-cell::before{background:#2f7352}
.sg-solitaire{min-height:440px;touch-action:pan-y;isolation:isolate}
.sg-solitaire .sg-slot{position:absolute;border:1px dashed #95ac90;border-radius:8px;background:#dfe9d7;color:#677e60;padding:0;font:inherit;font-size:clamp(14px,3vw,25px);cursor:pointer;display:grid;place-items:center;touch-action:manipulation}
.sg-solitaire .sg-card{position:absolute;margin:0;padding:0;border:1px solid #c2cdbc;border-radius:7px;background:#fffef9;color:#293e32;box-shadow:0 2px 4px #24492b12;font:inherit;cursor:grab;touch-action:none;transform-origin:center;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;overflow:hidden;-webkit-tap-highlight-color:transparent}
.sg-card .sg-corner{font-weight:700;font-size:clamp(11px,1.5vw,19px);padding:3px 5px;line-height:1.1;white-space:nowrap}
.sg-card .sg-suit{align-self:center;font-size:clamp(18px,3vw,34px);line-height:1;margin:auto}
.sg-card .sg-corner:last-child{align-self:flex-end;transform:rotate(180deg)}
.sg-solitaire .sg-card.is-red{color:#b95048}
.sg-solitaire .sg-card.is-down{background:repeating-linear-gradient(45deg,#355c47 0 2px,#3f6a52 2px 8px);border:3px solid #fafcf6;box-shadow:0 1px 4px #23432d36;cursor:default}
.sg-card.is-down>*{visibility:hidden}
.sg-solitaire .sg-card.is-selected,.sg-solitaire .sg-slot.is-target{outline:3px solid #dca950;outline-offset:-2px}
.sg-solitaire .sg-card.is-dragging{cursor:grabbing;box-shadow:0 10px 24px #18312030;pointer-events:none}
.sg-solitaire .sg-slot.is-stock{background:repeating-linear-gradient(45deg,#355c47 0 2px,#3f6a52 2px 8px);border:3px solid #fafcf6;color:white}
.sg-board .is-hint{outline:3px solid #b17e29;outline-offset:-3px;z-index:100!important}
@media(min-width:1100px){.sg-workspace:has(.sg-solitaire) .sg-layout{grid-template-columns:minmax(0,1fr) 165px}}
@media(max-width:850px){.sg-layout{grid-template-columns:1fr;gap:18px}.sg-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.sg-metrics{grid-column:1/-1}.sg-rule{grid-column:1/-1}.sg-paint-controls{grid-column:1/-1}.sg-controls .cg-button{padding:8px;font-size:12px}.sg-stage{padding:12px}.sg-solitaire{min-height:360px}}
@media(max-width:540px){.sg-stage{padding:8px 3px}.sg-gomoku{padding:5px}.sg-clue{gap:2px;padding:2px;font-size:10px}.sg-card .sg-corner{padding:2px;font-size:11px}.sg-card .sg-corner:last-child{display:none}.sg-card .sg-suit{font-size:19px}.sg-solitaire .sg-card,.sg-solitaire .sg-slot{border-radius:4px}.sg-controls{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.sg-board *,.sg-board *::before,.sg-board *::after{transition:none!important;animation:none!important}}