/* Crossword (/games/crossword/). Its own file so it does not touch games.css. Classes start with
   cw-; the board card tone (gm-cross) is here too. Phone first: at 360px the grid is the page
   width minus its padding and never scrolls sideways. Bump the ?v= on the links in
   templates/games/ when this file changes. */

.gm-cross { background: linear-gradient(135deg, var(--sun), #ffb020); }
.gm-cross h2, .gm-cross p { color: var(--sun-on); }
.gm-cross .gm-art i { background: rgba(255, 255, 255, .6); color: #14203a; }

.cw-box h2 { font-size: 15px; }
.cw-intro, .cw-res { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 18px; align-items: start; }

/* ---------- the daily card and the result ---------- */
.cw-hero { display: grid; gap: 10px; justify-items: start; padding: 20px; border-radius: var(--r); background: linear-gradient(135deg, var(--sun), #ffb020); color: var(--sun-on); }
.cw-hero a { color: inherit; text-decoration: underline; }
.cw-lab { font: 600 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.cw-big { font: 800 34px/1.05 var(--display); color: #14203a; }
.cw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cw-chips span { background: rgba(255, 255, 255, .55); color: #14203a; border-radius: 999px; padding: 4px 12px; font: 600 12px var(--mono); }
.cw-hero .btn { background: #14203a; color: #fff; min-height: 48px; padding: 0 28px; }
.cw-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 8px; width: 100%; }
.cw-stats div { background: rgba(255, 255, 255, .55); border-radius: var(--r2); padding: 8px 10px; color: #14203a; }
.cw-stats b { display: block; font: 800 20px var(--display); }
.cw-stats small { font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.cw-count { font: 800 34px var(--mono); color: var(--txt-hi); letter-spacing: .02em; }
.cw-brk { display: grid; }
.cw-brk div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13px; }
.cw-brk div + div { border-top: 1px solid var(--line); }
.cw-brk span { color: var(--txt-2); }
.cw-brk b { font: 600 13px var(--mono); color: var(--txt-hi); }
.cw-brk b.neg { color: var(--danger); }
.cw-ans { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cw-ans li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 8px; font-size: 13px; color: var(--txt-2); }
.cw-ans b { font: 700 11px var(--mono); color: var(--txt-3); padding-top: 2px; }
.cw-ans em { font: 700 14px var(--mono); font-style: normal; letter-spacing: .08em; color: var(--ok); }

/* ---------- the play page ---------- */
.cw { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 14px; width: 100%; max-width: 460px; margin-inline: auto; }
.cw-l, .cw-r { display: grid; gap: 10px; align-content: start; min-width: 0; }
.cw-top { display: flex; align-items: center; gap: 8px; }
.cw-back { background: var(--sunk); border-radius: 999px; padding: 6px 14px; font: 600 12px var(--ui); color: var(--txt-2); }
.cw-back:hover { text-decoration: none; }
.cw-ttl { font: 700 15px var(--display); color: var(--txt-hi); }
.cw-tmr { margin-left: auto; font: 600 14px var(--mono); color: var(--txt-hi); background: var(--sunk); padding: 5px 12px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.cw-gridw { padding: 6px; border-radius: 16px; background: var(--sunk); box-shadow: inset 0 0 0 1px var(--line); }
.cw-grid { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; }
.cw-blk { aspect-ratio: 1; border-radius: 6px; background: color-mix(in srgb, var(--txt-hi) 82%, var(--card)); }
:root[data-theme="dark"] .cw-blk { background: var(--bg); }
.cw-cell { position: relative; aspect-ratio: 1; min-width: 0; padding: 0; border: 0; border-radius: 7px; background: var(--card); color: var(--txt-hi); display: grid; place-items: center; font: 800 clamp(15px, 5.4vw, 22px) var(--display); box-shadow: 0 2px 0 var(--line); cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.cw-num { position: absolute; left: 3px; top: 1px; font: 600 clamp(7px, 2.2vw, 9px)/1 var(--mono); color: var(--txt-3); }
.cw-cell.inword { background: color-mix(in srgb, var(--grape) 18%, var(--card)); }
.cw-cell.sel { background: var(--grape); color: #fff; }
.cw-cell.sel .cw-num { color: rgba(255, 255, 255, .85); }
.cw-cell.ok { background: var(--ok-bg); color: var(--ok); box-shadow: 0 2px 0 var(--ok); }
.cw-cell.shown { background: color-mix(in srgb, var(--sun) 38%, var(--card)); box-shadow: 0 2px 0 var(--sun); }
.cw-cell.bad { background: var(--danger-bg); color: var(--danger); box-shadow: 0 2px 0 var(--danger); }
.cw-cell.sel.ok, .cw-cell.sel.shown, .cw-cell.sel.bad { background: var(--grape); color: #fff; }
.cw-cell:focus-visible, .cw-key:focus-visible, .cw-tool:focus-visible, .cw-arr:focus-visible, .cw-cl:focus-visible { outline: 3px solid var(--grape); outline-offset: 2px; }

.cw-bar { display: grid; grid-template-columns: 40px auto minmax(0, 1fr) 40px; gap: 8px; align-items: center; background: var(--card); border-radius: 16px; padding: 8px; min-height: 72px; box-shadow: 0 1px 2px var(--shadow); }
:root[data-theme="dark"] .cw-bar { box-shadow: inset 0 0 0 1px var(--line); }
.cw-bar:has(.cw-th[hidden]) { grid-template-columns: 40px minmax(0, 1fr) 40px; }
.cw-arr { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--sunk); color: var(--txt-hi); font: 700 22px/1 var(--display); cursor: pointer; }
.cw-th[hidden] { display: none; }
.cw-th { width: 56px; height: 52px; border-radius: 10px; object-fit: cover; display: block; }
.cw-ctx small { display: block; font: 600 10px var(--mono); color: var(--txt-3); text-transform: uppercase; letter-spacing: .06em; }
.cw-ctx p { margin: 2px 0 0; font: 600 14px/1.3 var(--ui); color: var(--txt-hi); }

.cw-note { margin: 0; min-height: 18px; font-size: 12.5px; color: var(--txt-2); }
.cw-tools { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.cw-tool { min-height: 48px; border: 0; border-radius: 12px; padding: 6px 4px; background: var(--sunk); color: var(--txt-hi); font: 600 12.5px/1.2 var(--ui); display: grid; align-content: center; justify-items: center; gap: 1px; cursor: pointer; box-shadow: 0 3px 0 var(--line); }
.cw-tool small { font: 600 10px var(--mono); color: var(--txt-3); }
.cw-tool:disabled { opacity: .45; cursor: default; }
.cw-lists { display: none; }

.cw-kb { display: grid; gap: 6px; }
.cw-kr { display: flex; gap: 4px; justify-content: center; }
.cw-key { flex: 1; min-width: 0; max-width: 44px; height: 48px; border: 0; border-radius: 9px; background: var(--card); color: var(--txt-hi); font: 700 17px var(--display); box-shadow: 0 3px 0 var(--line); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:root[data-theme="dark"] .cw-key { box-shadow: 0 3px 0 var(--line), inset 0 0 0 1px var(--line); }
.cw-key.wide { flex: 1.6; max-width: 66px; font-size: 18px; }
.cw-key:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }

/* dark: open squares lighter than the tray, blocks darker */
:root[data-theme="dark"] .cw-cell { background: color-mix(in srgb, var(--txt-hi) 14%, var(--card)); }
:root[data-theme="dark"] .cw-cell.inword { background: color-mix(in srgb, var(--grape) 35%, var(--card)); }
:root[data-theme="dark"] .cw-cell.sel { background: var(--grape); }

/* tablet and desktop: grid on the left, clue lists, hints and keys on the right */
@media (min-width: 720px) {
  .cw-intro, .cw-res { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; }
  .cw-wide { grid-column: 1 / -1; }
  .cw { max-width: none; grid-template-columns: minmax(300px, 460px) minmax(0, 1fr); gap: 22px; align-items: start; }
  .cw-grid { gap: 3px; }
  .cw-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .cw-col { background: var(--card); border-radius: 14px; padding: 8px; display: grid; gap: 2px; align-content: start; max-height: 300px; overflow: auto; scrollbar-width: thin; box-shadow: 0 1px 2px var(--shadow); }
  :root[data-theme="dark"] .cw-col { box-shadow: inset 0 0 0 1px var(--line); }
  .cw-col h3 { margin: 0 0 2px 4px; font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--txt-3); }
  .cw-cl { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px; text-align: left; border: 0; background: transparent; border-radius: 9px; padding: 6px; font: 13px/1.3 var(--ui); color: var(--txt); cursor: pointer; }
  .cw-cl b { font: 700 11px var(--mono); color: var(--txt-3); padding-top: 1px; }
  .cw-cl.on { background: color-mix(in srgb, var(--grape) 16%, transparent); color: var(--txt-hi); }
  .cw-cl.done { color: var(--txt-3); text-decoration: line-through; }
  .cw-key { height: 44px; }
}
@media (min-width: 1100px) {
  .cw { grid-template-columns: minmax(400px, 540px) minmax(0, 1fr); }
  .cw-col { max-height: 340px; }
  .cw-key { max-width: 48px; }
}
@media (prefers-reduced-motion: no-preference) {
  .cw-cell, .cw-key { transition: background .15s, transform .1s; }
}