/* Chai Sudoku: warm paper, chai-brown lines, DOM grid + number pad */

body.cs {
  --bg-top: #fbf1df; --bg-bottom: #f1dfc0; --hud-ink: var(--ink); --hud-chip: rgba(43, 29, 20, .08);
  --cs-paper: #fffaf0; --cs-thin: #e3cfb0; --cs-thick: #7a4a2a;
  --cs-given: #2b1d14; --cs-user: #b4561b; --cs-wrong: #d23b2a; --cs-wrong-bg: #fde3dc;
  --cs-hl: #f6e7cc; --cs-same: #efcf98; --cs-sel: #e9b56c; --cs-note: #7c6450; --cs-note-hit: #b4561b;
  --cs-shine: #ffe4a8; --cs-key: #fffaf0; --cs-key-ink: #6b3f22; --cs-key-edge: #e4cfae;
  user-select: none; -webkit-user-select: none;
}
body.cs.cs-dark {
  --bg-top: #221913; --bg-bottom: #150f0b; --hud-ink: #f3e6d3; --hud-chip: rgba(255, 240, 220, .09);
  --cs-paper: #2b211a; --cs-thin: #47372b; --cs-thick: #c08a5a;
  --cs-given: #f3e6d3; --cs-user: #f2b33d; --cs-wrong: #ff8a76; --cs-wrong-bg: #4a221c;
  --cs-hl: #382a20; --cs-same: #5e4329; --cs-sel: #82592f; --cs-note: #bca58d; --cs-note-hit: #f2b33d;
  --cs-shine: #6d4b25; --cs-key: #2b211a; --cs-key-ink: #f1d6b0; --cs-key-edge: #47372b;
  /* modal + shared bits */
  --paper: #2b211a; --ink: #f3e6d3; --ink-soft: #c9b39b; --line: #4a3a2e;
  color-scheme: dark;
}
.cs-dark .btn-soft, .cs-dark .seg { background: #382a20; }
.cs-dark .seg button[aria-pressed="true"] { background: #f3e6d3; color: #221913; }
.cs-dark .toast { background: #f3e6d3; color: #221913; }

/* Header: little steaming chai next to the title */
.cs .cs-titlerow { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.cs .hud-title b { font-size: 20px; }
.cs-titlecup svg { width: 26px; height: 26px; margin-top: -6px; color: #c9a27c; }
.cs-cup .steam path, .cs-wincup .steam path { animation: cs-steam 2.6s ease-in-out infinite; opacity: 0; }
.cs-cup .steam path:nth-child(2), .cs-wincup .steam path:nth-child(2) { animation-delay: .8s; }
.cs-cup .steam path:nth-child(3), .cs-wincup .steam path:nth-child(3) { animation-delay: 1.6s; }
@keyframes cs-steam { 0% { opacity: 0; transform: translateY(3px); } 35% { opacity: .9; } 100% { opacity: 0; transform: translateY(-4px); } }

/* Chips */
.cs .subhud { align-items: center; }
.cs .chip { font-variant-numeric: tabular-nums; }
.cs .cs-chip-mode { font-weight: 800; }
.cs .cs-chip-mode[data-diff="kadak"] { background: var(--cs-thick); color: var(--cs-paper); }
.cs .cs-chip-mist.bad { color: var(--cs-wrong); }
.cs .cs-chip-mist.last { background: var(--cs-wrong-bg); font-weight: 800; }
.cs .cs-chip-streak { color: var(--chili-2); font-weight: 800; }
.cs-dark .cs-chip-streak { color: var(--turmeric); }
.cs .cs-timer { border: 0; color: inherit; font: inherit; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; min-height: 30px; }
.cs .cs-timer svg { width: 13px; height: 13px; opacity: .75; }

/* Stage layout */
.cs .stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 4px 10px calc(8px + env(safe-area-inset-bottom, 0px)); --grid: 340px; }
.cs-board { position: relative; flex: none; width: var(--grid); height: var(--grid); }
.cs-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 2px; padding: 2px;
  width: 100%; height: 100%; background: var(--cs-thick); border-radius: 12px; overflow: hidden; touch-action: none;
  box-shadow: 0 10px 28px -14px rgba(70, 35, 10, .45);
}
.cs-box { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 1px; background: var(--cs-thin); }
.cs-cell {
  position: relative; display: grid; place-items: center; background: var(--cs-paper); cursor: pointer; min-width: 0; min-height: 0;
  font: 600 calc(var(--grid) / 9 * .62) / 1 var(--font); color: var(--cs-given);
  -webkit-tap-highlight-color: transparent;
}
.cs-cell .cs-v { position: relative; z-index: 1; line-height: 1; margin-top: .08em; }
.cs-cell.user { color: var(--cs-user); font-weight: 700; }
.cs-cell.given { font-weight: 600; }
.cs-cell.hl { background: var(--cs-hl); }
.cs-cell.same { background: var(--cs-same); }
.cs-cell.sel { background: var(--cs-sel); }
.cs-cell.wrong { color: var(--cs-wrong); }
.cs-cell.wrong:not(.sel) { background: var(--cs-wrong-bg); }
.cs-cell.clash .cs-v { color: var(--cs-wrong); }
.cs-notes {
  position: absolute; inset: 1px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  font: 700 calc(var(--grid) / 9 * .3) / 1 var(--font); color: var(--cs-note);
}
.cs-notes i { font-style: normal; display: grid; place-items: center; visibility: hidden; }
.cs-cell:not(.has-notes) .cs-notes { display: none; } /* empty notes cost no style/layout work */
.cs-notes i.on { visibility: visible; }
.cs-notes i.match { color: var(--cs-note-hit); font-weight: 800; }
/* pop / shake / hint flash / completed-unit shimmer are Web Animations in game.js (no forced layout) */

/* Pause veil */
.cs-board.paused .cs-v, .cs-board.paused .cs-notes { visibility: hidden; }
.cs-veil {
  position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 10px;
  border: 0; border-radius: 12px; background: color-mix(in srgb, var(--cs-paper) 88%, transparent); color: var(--hud-ink);
  font: 700 24px/1.1 var(--display);
}
.cs-veil .cs-veil-cup svg { width: 72px; height: 72px; color: #c9a27c; }
.cs-veil .btn { font-family: var(--font); }

/* Tools + number pad */
.cs-controls { flex: none; width: var(--grid); display: grid; gap: 8px; }
.cs-tools { display: flex; justify-content: space-between; }
.cs-tool {
  position: relative; display: grid; justify-items: center; gap: 1px; min-width: 56px; min-height: 52px; padding: 4px 4px 2px;
  border: 0; background: none; color: var(--hud-ink); font-size: 12.5px; font-weight: 700; border-radius: 14px; transition: transform .1s;
}
.cs-tool svg { width: 26px; height: 26px; color: var(--cs-key-ink); }
.cs-tool.down { transform: scale(.92); background: var(--hud-chip); }
.cs-tool[aria-disabled="true"] { opacity: .45; }
.cs-tool .cs-badge {
  position: absolute; top: 1px; left: calc(50% + 12px); font-style: normal; font-size: 10px; font-weight: 800; line-height: 1; padding: 3px 5px;
  border-radius: 999px; background: var(--hud-chip); color: var(--ink-soft);
}
.cs-tool .cs-badge.n { background: var(--cs-user); color: #fff; min-width: 18px; text-align: center; }
.cs-tool.on .cs-badge { background: var(--cs-user); color: #fff; }
.cs-tool.on svg { color: var(--cs-user); }
.cs-pad { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; }
.cs-key {
  position: relative; display: grid; place-items: center; min-height: 54px; padding: 0; border-radius: 12px;
  border: 1.5px solid var(--cs-key-edge); background: var(--cs-key); color: var(--cs-key-ink); box-shadow: 0 3px 0 var(--cs-key-edge);
  transition: transform .08s, box-shadow .08s, opacity .2s;
}
.cs-key b { font: 600 calc(min(var(--grid) / 9 * .78, 34px)) / 1 var(--font); margin-top: 4px; }
.cs-key small { position: absolute; bottom: 2px; left: 0; right: 0; font-size: 10px; font-weight: 700; color: var(--ink-soft); line-height: 1; }
.cs-key.down { transform: translateY(2px); box-shadow: 0 1px 0 var(--cs-key-edge); }
.cs-key { -webkit-tap-highlight-color: transparent; touch-action: manipulation; -webkit-touch-callout: none; }
.cs-key.done { opacity: .22; }
/* Number-first: the held digit glows; the board shows where it already is */
.cs-key.lock { background: var(--cs-user); border-color: var(--cs-user); color: #fff; box-shadow: 0 3px 0 color-mix(in srgb, var(--cs-user) 60%, #000); }
.cs-key.lock small { color: #fff; opacity: .85; }
.cs-pad.notes .cs-key { border-style: dashed; color: var(--cs-note); }
.cs-pad.notes .cs-key b { font-size: calc(min(var(--grid) / 9 * .55, 26px)); }

/* Tutorial */
.cs-tut .cs-cell.tut-unit { background: var(--cs-hl); }
.cs-tut .cs-cell.tut-target { background: var(--cs-sel); animation: cs-target 1.2s ease-in-out infinite; }
@keyframes cs-target { 50% { box-shadow: inset 0 0 0 3px var(--cs-user); } }
.cs-tut .cs-tools { opacity: .35; pointer-events: none; }
.cs .coach-line { top: 2px; }
.cs-hand { z-index: 7; }

/* New puzzle sheet */
.cs-sheet { text-align: left; gap: 10px; }
.cs-sheet h2 { text-align: center; }
.cs-sheet .cs-sub { font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; margin-top: 4px; }
html[lang="hi"] .cs-sheet .cs-sub { letter-spacing: 0; }
.cs-picks { display: grid; gap: 8px; }
.cs-pick {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; min-height: 54px; text-align: left;
  border: 1.5px solid var(--line); border-radius: 16px; background: var(--paper); color: var(--ink); box-shadow: 0 3px 0 var(--line);
}
.cs-pick:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.cs-pick .txt { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.cs-pick b { font-size: 17px; }
.cs-pick small { color: var(--ink-soft); font-weight: 600; font-size: 13px; }
.cs-pick .dot { width: 14px; height: 14px; border-radius: 50%; flex: none; background: #e9b97f; }
.cs-pick[data-diff="masala"] .dot { background: #d08a45; }
.cs-pick[data-diff="adrak"] .dot { background: #a5612c; }
.cs-pick[data-diff="kadak"] .dot { background: #5e3518; }
.cs-pick .chilis { font-size: 12px; letter-spacing: -2px; opacity: .8; }
.cs-pick.daily { background: #fff1d6; border-color: var(--turmeric); box-shadow: 0 3px 0 #e8c468; }
.cs-dark .cs-pick.daily { background: #3d2c18; }
.cs-pick.daily.done { opacity: .7; }
.cs-pick.level { background: var(--cs-key-ink); border-color: var(--cs-key-ink); color: #fff; box-shadow: 0 3px 0 #3d2412; }
.cs-pick.level small { color: #f1d6b0; }
.cs-pick.level .go { font-size: 22px; font-weight: 800; }
.cs-dark .cs-pick.level { background: #c08a5a; border-color: #c08a5a; color: #221913; box-shadow: 0 3px 0 #7a4a2a; }
.cs-dark .cs-pick.level small { color: #3d2412; }

/* Win card */
.cs-win .cs-wincupwrap { display: grid; place-items: center; margin: -8px 0 -6px; }
.cs-wincup { width: 120px; height: 120px; }
.cs-wincup .fill { animation: cs-fill 1.6s cubic-bezier(.3, .7, .3, 1) .2s both; }
@keyframes cs-fill { from { transform: translateY(66px); } to { transform: none; } }
.cs-wincup .steam path { animation-delay: 1.8s; }
.cs-wincup .steam path:nth-child(2) { animation-delay: 2.4s; }
.cs-wincup .steam path:nth-child(3) { animation-delay: 3s; }
.cs-win .cs-wintitle { font-size: 40px; color: var(--cs-thick); }
.cs-stats { display: flex; justify-content: center; gap: 22px; }
.cs-stats div { display: grid; line-height: 1.15; }
.cs-stats b { font: 700 24px/1.1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.cs-stats span { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.cs-win .cs-best { font-weight: 700; }
.cs-win .cs-best.new { color: var(--chili); }
.cs-win .cs-tomorrow { font-size: 14px; font-weight: 600; }

@media (max-height: 600px) {
  .cs-key { min-height: 46px; }
  .cs-tool { min-height: 44px; }
  .cs-tool span { display: none; }
}
@media (min-width: 700px) { .cs .stage { gap: 14px; } }