/* Original WIN-J PLAY interface. No borrowed game artwork or external fonts. */
body.classic-layout { --cg-ink:#27372e; --cg-muted:#647168; --cg-line:#d9e1d7; --cg-green:#355b46; background:#f5f7f1; color:var(--cg-ink); font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
.classic-layout .game-header { position:static; background:#fdfefa; box-shadow:none; border-color:var(--cg-line); }
.classic-layout .game-header-inner { max-width:1280px; }
.classic-layout .game-logo { font-size:21px; font-weight:750; letter-spacing:-.04em; color:#2c4433; }
.classic-layout .game-nav a { font-size:13px; font-weight:550; color:var(--cg-muted); }
.classic-layout .game-lang-selector { flex-wrap:wrap; justify-content:center; }
.classic-layout .game-lang-selector a { min-height:40px; display:flex; align-items:center; border-radius:6px; background:transparent; color:var(--cg-muted); font-weight:550; }
.classic-layout .game-lang-selector a[aria-current], .classic-layout .game-lang-selector a:hover { background:#e6eee1; color:#2b4e37; }
.classic-layout .game-wrapper { max-width:1160px; padding:44px 28px 72px; }
.classic-layout :focus-visible { outline:3px solid #406e53; outline-offset:3px; }
.cg-page [hidden] { display:none !important; }
.cg-hero { max-width:760px; margin:0 auto 32px; text-align:center; }
.cg-eyebrow { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; font-size:11px; font-weight:700; letter-spacing:.15em; color:#557253; }
.cg-eyebrow > span:last-child { border-left:1px solid #cbd8c7; padding-left:12px; font-weight:500; letter-spacing:0; }
.cg-symbol { display:grid; place-items:center; width:28px; height:28px; border:1px solid #b9ccb1; border-radius:7px; font-size:18px; letter-spacing:0; background:#eaf0e3; }
.cg-hero h1 { margin:20px 0 14px; font-size:clamp(32px,4vw,48px); font-weight:700; letter-spacing:-.05em; line-height:1.25; }
.cg-intro { margin:0 auto; max-width:650px; color:var(--cg-muted); font-size:15px; line-height:1.9; word-break:keep-all; overflow-wrap:anywhere; }
.cg-tags { display:flex; gap:8px; justify-content:center; margin-top:20px; }
.cg-tags span { padding:6px 12px; font-size:11px; color:#566a51; border:1px solid #dbe5d4; border-radius:30px; }
.cg-workspace { padding:28px; background:#fff; border:1px solid var(--cg-line); border-radius:18px; box-shadow:0 16px 50px -32px #354e2e36; }
.cg-toolbar { display:flex; align-items:end; flex-wrap:wrap; gap:14px; padding-bottom:24px; border-bottom:1px solid #e7ece2; }
.cg-toolbar label { display:flex; flex-direction:column; gap:8px; font-size:12px; color:var(--cg-muted); font-weight:550; min-width:0; }
.cg-toolbar select { max-width:100%; min-width:130px; height:44px; padding:8px 32px 8px 12px; border:1px solid #cdd9c7; border-radius:7px; background:#fafcf7; font:inherit; color:var(--cg-ink); }
.cg-toolbar .cg-primary { margin-left:auto; }
.cg-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 16px; border:1px solid #d3dece; border-radius:7px; background:#fff; color:var(--cg-ink); font:inherit; font-size:13px; font-weight:550; cursor:pointer; transition:background .15s,border-color .15s; }
.cg-button:hover:not(:disabled) { background:#eff4e9; border-color:#8ea581; }
.cg-primary { background:#355b46; border-color:#355b46; color:#fff; }
.cg-primary:hover:not(:disabled) { background:#264933; color:#fff; }
.cg-button:disabled { background:#f4f6f1; color:#8c9687; border-color:#e2e7de; cursor:default; }
.cg-toggle[aria-pressed="true"] { background:#e1ecda; border-color:#739864; color:#2c5129; box-shadow:inset 0 0 0 1px #739864; }
.cg-session { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:22px 0 10px; font-size:12px; color:var(--cg-muted); }
.cg-session strong { margin-left:10px; font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--cg-ink); }
.cg-phase { display:inline-flex; align-items:center; gap:7px; }
.cg-phase::before { content:""; width:6px; height:6px; background:#879581; border-radius:50%; }
.cg-phase[data-phase="playing"]::before, .cg-phase[data-phase="won"]::before { background:#3b8253; }
.cg-phase[data-phase="lost"]::before { background:#b15b46; }
.cg-status { color:#466049; font-size:14px; line-height:1.8; min-height:1.8em; margin:6px 0 24px; overflow-wrap:anywhere; }
.cg-play-layout { display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:28px; align-items:start; }
.cg-board-frame { position:relative; min-width:0; padding:24px; border:1px solid #d4dfcc; border-radius:12px; background:#eef2e8; }
.cg-board-scroll { overflow-x:auto; padding:3px; scrollbar-width:thin; scrollbar-color:#a5b599 #eef2e8; }
.cg-board { margin:0 auto; width:max-content; max-width:100%; touch-action:manipulation; user-select:none; }
.cg-row { display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr)); }
.cg-cell { display:grid; place-items:center; position:relative; min-width:0; margin:0; padding:0; font:inherit; font-variant-numeric:tabular-nums; cursor:pointer; color:#365643; background:#fff; border:1px solid #c5d3be; touch-action:manipulation; }
.cg-cell:focus-visible { z-index:2; outline-offset:-3px; }
.cg-cell[aria-disabled="true"] { cursor:default; }
.cg-cell:hover:not([aria-disabled="true"]) { filter:brightness(.96); }
.cg-minesweeper { max-width:none; min-width:calc(var(--cols)*30px); }
.cg-minesweeper .cg-row { gap:3px; margin-bottom:3px; }
.cg-minesweeper .cg-cell { width:clamp(27px,3vw,40px); height:clamp(29px,3vw,40px); border-radius:4px; background:#fbfdf7; border-bottom:3px solid #bbcdb0; font-size:16px; font-weight:700; }
.cg-minesweeper .is-open { background:#e6edde; border-color:#d7e1cf; border-bottom-width:1px; }
.cg-minesweeper .is-flag { color:#9b5b20; background:#f5ebd8; }
.cg-minesweeper .is-exploded { color:#8a3327; background:#f8d9cf; border-color:#dba99b; }
.cg-minesweeper [data-number="1"].is-open { color:#2d6591; }
.cg-minesweeper [data-number="2"].is-open { color:#3d753b; }
.cg-minesweeper [data-number="3"].is-open { color:#b04430; }
.cg-minesweeper [data-number="4"].is-open { color:#7351a0; }
.cg-minesweeper [data-number="5"].is-open, .cg-minesweeper [data-number="6"].is-open { color:#874d21; }
.cg-sudoku { width:100%; max-width:468px; border:2px solid #7b9470; background:#7b9470; }
.cg-sudoku .cg-cell { aspect-ratio:1; width:100%; border:0; border-right:1px solid #dbe3d5; border-bottom:1px solid #dbe3d5; border-radius:0; font-size:clamp(16px,2.4vw,28px); font-weight:500; color:#386c9a; }
.cg-sudoku .cg-cell:nth-child(3n):not(:last-child) { border-right:2px solid #7b9470; }
.cg-sudoku .cg-row:nth-child(3n):not(:last-child) .cg-cell { border-bottom:2px solid #7b9470; }
.cg-sudoku .is-given { background:#f1f5ea; color:#314932; font-weight:700; }
.cg-sudoku .is-peer { background:#edf3e6; }
.cg-sudoku .is-selected { background:#d2e6c2; box-shadow:inset 0 0 0 2px #769d5b; }
.cg-sudoku .is-conflict { background:#fce4da; color:#a13727; }
.cg-cell-notes { display:grid; grid-template-columns:repeat(3,1fr); width:100%; height:100%; padding:2px; font-size:clamp(7px,1vw,11px); line-height:1; color:#596b50; }
.cg-cell-notes span { display:grid; place-items:center; }
.cg-tic-tac-toe { width:100%; max-width:354px; }
.cg-tic-tac-toe .cg-row { gap:10px; margin-bottom:10px; }
.cg-tic-tac-toe .cg-cell { width:100%; aspect-ratio:1; border-radius:10px; border-bottom:4px solid #becfb2; font-size:clamp(42px,6vw,72px); font-weight:400; }
.cg-tic-tac-toe .is-x { color:#376043; }
.cg-tic-tac-toe .is-o { color:#ad7839; }
.cg-tic-tac-toe .is-winning { background:#dceccd; border-color:#85a66f; }
.cg-controls { min-width:0; }
.cg-metrics { padding:0 0 16px; margin-bottom:18px; border-bottom:1px solid #e3e9dd; }
.cg-metric { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:0 0 14px; color:var(--cg-muted); font-size:12px; }
.cg-metric strong { flex-shrink:0; color:var(--cg-ink); font-size:20px; font-weight:550; font-variant-numeric:tabular-nums; letter-spacing:-.03em; }
.cg-controls > .cg-button { width:100%; }
.cg-help, .cg-callout { font-size:12px; line-height:1.85; color:var(--cg-muted); }
.cg-callout { padding:14px; border-radius:8px; border:1px solid #dee7d7; background:#f3f7ee; color:#506647; }
.cg-pause-button { margin-top:16px; }
.cg-small-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cg-number-pad { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:16px; }
.cg-number-pad .cg-button { font-size:20px; background:#f5f8ef; }
.cg-pause-cover { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:16px; padding:24px; text-align:center; border-radius:12px; background:#eef2e8; }
.cg-pause-cover p { max-width:300px; font-size:15px; line-height:1.8; }
.is-paused .cg-board { visibility:hidden; }
.cg-keyboard-help, .cg-privacy { font-size:12px; color:var(--cg-muted); line-height:1.85; }
.cg-keyboard-help { margin-top:24px; }
.cg-privacy { border-top:1px solid #e5eadf; padding-top:20px; margin:20px 0 0; }
.cg-guide { margin:40px 0 0; }
.cg-guide h2 { font-size:21px; font-weight:650; letter-spacing:-.025em; }
.cg-guide ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; padding:0; list-style:none; counter-reset:cg-steps; }
.cg-guide li { counter-increment:cg-steps; font-size:14px; line-height:1.85; color:var(--cg-muted); }
.cg-guide li::before { content:counter(cg-steps,decimal-leading-zero); display:block; margin:10px 0 12px; color:#596f4e; font-size:12px; font-weight:650; }
.cg-tips { padding:22px 24px; margin-top:30px; background:#eaf0e3; border:1px solid #d5e0cb; border-radius:10px; }
.cg-tips h3 { margin:0 0 12px; font-size:15px; font-weight:650; }
.cg-tips p { margin:8px 0 0; font-size:13px; line-height:1.9; color:#596850; }
.cg-fine-print { font-size:12px; color:var(--cg-muted); margin-top:22px; }
.cg-notice { padding:20px; border:1px solid #d7bf8e; background:#faf2df; }
@media(max-width:900px) {
  .cg-play-layout { grid-template-columns:minmax(0,1fr); gap:24px; }
  .cg-controls { width:100%; max-width:520px; margin:0 auto; }
  .cg-number-pad { grid-template-columns:repeat(9,minmax(0,1fr)); gap:5px; }
  .cg-number-pad .cg-button { padding:8px 0; font-size:18px; }
  .cg-metrics { display:flex; gap:20px; justify-content:space-between; flex-wrap:wrap; }
  .cg-metric { flex:1 1 110px; }
  .cg-minesweeper .cg-cell { width:32px; height:34px; }
}
@media(max-width:540px) {
  .classic-layout .game-wrapper { padding:28px 14px 44px; }
  .classic-layout .game-nav { flex-wrap:wrap; gap:20px; }
  .cg-hero { margin-bottom:24px; }
  .cg-intro { font-size:14px; }
  .cg-workspace { padding:18px 14px; border-radius:12px; }
  .cg-toolbar { gap:12px; }
  .cg-toolbar label { flex:1 1 105px; }
  .cg-toolbar select { min-width:0; width:100%; font-size:12px; padding-right:20px; }
  .cg-toolbar .cg-primary { flex:1 1 110px; }
  .cg-board-frame { padding:12px 6px; }
  .cg-minesweeper .cg-cell { width:27px; height:30px; font-size:14px; }
  .cg-minesweeper .cg-row { gap:2px; margin-bottom:2px; }
  .cg-sudoku .cg-cell { font-size:clamp(16px,5.5vw,24px); }
  .cg-tic-tac-toe { max-width:294px; }
  .cg-tic-tac-toe .cg-row { gap:8px; margin-bottom:8px; }
  .cg-guide ol { grid-template-columns:1fr; gap:4px; }
  .cg-guide li { display:grid; grid-template-columns:24px minmax(0,1fr); gap:12px; margin-bottom:12px; }
  .cg-guide li::before { margin:3px 0 0; }
  .cg-tips { padding:18px; }
}
@media(max-width:360px) { .cg-number-pad { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(prefers-reduced-motion:reduce) { .cg-button { transition:none; } }