/* CAPE CROSSING // THE DAILY CROSSWORD (static/js/games/crossing.js). THE GRID's stage, HUD and cards
   (static/grid.css) round a paper-white-on-void crossword: white squares as lit holo tiles, black space as the void. */
.cx-root { --ac: var(--holo, #4fe3ff); --aa: var(--amber, #ffb020); }
.cx-bar { box-sizing: border-box; width: 100%; max-width: 620px; min-height: 40px; display: block; line-height: 1.45; padding: 8px 12px; font-size: 14px; color: #e8f6ff;
  background: rgba(4, 10, 20, .85); border: 1px solid rgba(79, 227, 255, .45); border-left: 3px solid var(--aa); }
.cx-bar span { margin-right: 10px; font-weight: 700; color: var(--aa); letter-spacing: .1em; }
.cx-bar small { color: rgba(160, 210, 235, .7); }
.cx-wrap { max-width: 100%; overflow: auto; }
.cx-grid { --cell: min(calc((100vw - 76px - var(--w) * 2px) / var(--w)), calc(560px / var(--w)), 44px); display: grid; grid-template-columns: repeat(var(--w), var(--cell));
  grid-auto-rows: var(--cell); gap: 2px; padding: 6px; background: #03060d; border: 2px solid rgba(79, 227, 255, .6); box-shadow: 0 0 22px rgba(79, 227, 255, .12); user-select: none; }
.cx-b { background: transparent; }
.cx-c { position: relative; margin: 0; padding: 0; border: 1px solid rgba(79, 227, 255, .35); background: #0f1d31; color: #f4fbff; cursor: pointer;
  font: 700 calc(var(--cell) * .56) var(--mono) !important; display: flex; align-items: center; justify-content: center; }
.cx-c em { position: absolute; top: 1px; left: 3px; font: 600 calc(var(--cell) * .24) var(--mono); font-style: normal; color: rgba(160, 210, 235, .85); }
.cx-c b { font-weight: inherit; margin-top: calc(var(--cell) * .08); }
.cx-c.word { background: #16314f; border-color: rgba(79, 227, 255, .6); }
.cx-c.sel { background: rgba(255, 176, 32, .3); border-color: var(--aa); box-shadow: 0 0 10px rgba(255, 176, 32, .45); }
.cx-c.bad { color: var(--alert, #ff5a4a); background: rgba(255, 90, 74, .16); }
.cx-c.rev b { color: #9cffc9; }
.cx-c.done { cursor: default; color: #bfefff; }
.cx-key { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cx-clues { width: 100%; max-width: 620px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 620px) { .cx-clues { grid-template-columns: 1fr; } }
.cx-clues ol { list-style: none; margin: 0; padding: 0; }
.cx-clues li { display: grid; grid-template-columns: 24px 1fr; gap: 4px; padding: 5px 6px; font-size: 12px; line-height: 1.35; color: #cfe8f5; cursor: pointer; border-left: 2px solid transparent; }
.cx-clues li span { color: var(--aa); font-weight: 700; }
.cx-clues li small { color: rgba(160, 210, 235, .6); }
.cx-clues li.on { background: rgba(255, 176, 32, .1); border-left-color: var(--aa); }
.cx-clues li.full { color: rgba(160, 210, 235, .55); }
.cx-stage .gd-tools { width: 100%; max-width: 620px; }
@media (min-width: 1100px) {
  .cx-play { display: grid; grid-template-columns: auto minmax(240px, 1fr); grid-template-areas: "bar bar" "grid clues" "tools clues"; align-items: start; gap: 12px; }
  .cx-bar { grid-area: bar; max-width: none; }
  .cx-wrap { grid-area: grid; }
  .cx-play .gd-tools, .cx-play .gd-result { grid-area: tools; }
  .cx-clues { grid-area: clues; grid-template-columns: 1fr; max-height: 600px; overflow: auto; }
}