/* The Daily Word Search -- presentation.
 *
 * The board is styled as a window frame the same way Find The Cheese! is, so the two
 * games on the shelf read as a pair, but the resemblance stops at the chrome: this
 * one has no 200px popup to honor, so the grid is fluid and sized off the column it
 * lands in rather than pinned to a pixel width.
 *
 * The four stroke colors and the drag color are custom properties rather than
 * literals in the JS, because wordsearch.js resolves them through getComputedStyle
 * and repaints when the era switcher fires. Everything the eras need to move lives
 * in the two blocks at the bottom of this file. */

:root {
  /* Found-word strokes, cycled in order. The site's own purple and blue lead. */
  --ws-ink-1: #630096;
  --ws-ink-2: #3301c3;
  --ws-ink-3: #8a2fb8;
  --ws-ink-4: #1c6fb8;
  --ws-drag: #630096;

  --ws-frame: #3301c3;
  --ws-face: #ffffff;
  --ws-cell-ink: #111;
}

.ws-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
  margin: 12px 0 18px;
}

/* ---- the frame ---- */
.ws-window {
  flex: 1 1 340px;
  min-width: 0;
  max-width: 480px;
  border: 2px solid var(--ws-frame);
  background: var(--ws-face);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .35);
}
.ws-titlebar {
  background: var(--ws-frame);
  color: #fff;
  font: bold 11px/1 Verdana, Geneva, sans-serif;
  padding: 5px 7px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.ws-count { opacity: .75; letter-spacing: 1px; white-space: nowrap; }

.ws-gridwrap { padding: 7px; }

/* ---- the board ----
   One square, twelve columns, and an overlay pinned across the whole of it. The
   strokes are drawn in a 0-100 viewBox with preserveAspectRatio="none", so cell
   centers are percentages and nothing has to know the pixel size. */
.ws-grid {
  position: relative;
  display: grid;
  gap: 1px;
  aspect-ratio: 1 / 1;
  touch-action: none;      /* the drag IS the input; never scroll the page instead */
  user-select: none;
  -webkit-user-select: none;
  cursor: crosshair;
}
.ws-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font: bold 11px/1 Verdana, Geneva, sans-serif;
  font-size: clamp(10px, 2.6vw, 17px);
  color: var(--ws-cell-ink);
  text-transform: uppercase;
}
.ws-strokes { position: absolute; inset: 0; pointer-events: none; }

.ws-datebar {
  border-top: 2px solid var(--ws-frame);
  background: #f2eef8;
  font: 11px/1 Verdana, Geneva, sans-serif;
  color: #444;
  padding: 5px 7px;
  text-align: center;
}

/* ---- the side ---- */
.ws-side { flex: 1 1 240px; min-width: 200px; }

.ws-status {
  font: 11px/1.5 Verdana, Geneva, sans-serif;
  min-height: 2.6em;
  margin-bottom: 8px;
}
.ws-status b { color: var(--ws-ink-1); }

.ws-words { margin-bottom: 12px; }
.ws-word {
  display: inline-block;
  border: 1px solid var(--ws-frame);
  background: #fff;
  border-radius: 2px;
  padding: 3px 8px;
  margin: 0 4px 4px 0;
  font: 11px/1 Verdana, Geneva, sans-serif;
  letter-spacing: .06em;
  color: var(--ws-frame);
  transition: color .25s, border-color .25s, background .25s;
}
/* Struck through AND faded. Either alone is easy to miss at 11px, and the list is
   the only record of what is left to find. */
.ws-word.ws-got {
  color: #999;
  border-color: transparent;
  background: transparent;
  text-decoration: line-through;
}

.ws-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-btn {
  font: 11px Verdana, Geneva, sans-serif;
  padding: 4px 10px;
  cursor: pointer;
}

.ws-howto {
  font: 11px/1.6 Verdana, Geneva, sans-serif;
  margin-top: 12px;
}
.ws-howto b { color: var(--ws-ink-1); }

/* The whole frame lifts a little on a finished board -- the found-word list has
   already gone gray by then, so the board itself needs to say something. */
.ws-wrap.ws-done .ws-window {
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .35), 0 0 0 3px var(--ws-ink-2);
}

/* =================================================================== 2001
   The 2001 skin puts its panels on the right and keeps content white and boxy.
   Squarer frame, no drop shadow -- that beveled look is a 2003 habit. */
[data-era="2001"] .ws-window {
  border-color: var(--purple);
  box-shadow: none;
}
[data-era="2001"] .ws-titlebar { background: var(--purple); }
[data-era="2001"] .ws-datebar { background: #fff; }
[data-era="2001"] .ws-word { border-color: var(--purple); color: var(--purple); }

/* =================================================================== modern
   Deep violet void, so the board cannot stay a white card. The cell letters go to
   the skin's ink color and the strokes brighten -- at 32% opacity over near-black,
   the 2003 purple all but disappears. */
[data-era="modern"] {
  --ws-ink-1: #a78bfa;
  --ws-ink-2: #60a5fa;
  --ws-ink-3: #f0abfc;
  --ws-ink-4: #38bdf8;
  --ws-drag: #facc15;

  --ws-frame: #4a3f7a;
  --ws-face: rgba(139, 92, 246, .07);
  --ws-cell-ink: #eae8ff;
}
[data-era="modern"] .ws-window {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
[data-era="modern"] .ws-titlebar {
  background: #241d3f;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 13px;
  padding: 10px 13px;
  color: #c9a6ff;
}
[data-era="modern"] .ws-cell {
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
}
[data-era="modern"] .ws-datebar {
  background: none;
  border-top: 1px solid var(--ws-frame);
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  padding: 9px 13px;
}
[data-era="modern"] .ws-status,
[data-era="modern"] .ws-howto { font-family: inherit; font-size: 14px; line-height: 1.65; }
[data-era="modern"] .ws-status b,
[data-era="modern"] .ws-howto b { color: #c9a6ff; }
[data-era="modern"] .ws-word {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(139, 92, 246, .3);
  border-radius: 999px;
  color: #c9a6ff;
  font-family: inherit;
  font-size: 12.5px;
  padding: 4px 11px;
}
[data-era="modern"] .ws-word.ws-got {
  color: #6f639c;
  border-color: transparent;
  background: transparent;
}
[data-era="modern"] .ws-btn {
  background: #1c1830;
  border: 1px solid var(--ws-frame);
  color: #c9a6ff;
  border-radius: 999px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 12.5px;
}
[data-era="modern"] .ws-btn:hover { color: #fff; border-color: #8b5cf6; }
[data-era="modern"] .ws-wrap.ws-done .ws-window {
  box-shadow: 0 0 0 1px #8b5cf6, 0 0 34px rgba(139, 92, 246, .5);
}

/* ---- phones ----
   The board and the word list share one screen. Capping the board against viewport
   height is what keeps the list from being pushed below the fold, which on a puzzle
   whose whole point is "which of these have I not found yet" is the difference
   between playable and not. */
@media (max-width: 820px) {
  .ws-wrap { gap: 12px; }
  .ws-window { flex: 1 1 100%; max-width: none; }
  .ws-grid { max-width: min(100%, 62vh); margin: 0 auto; }
  .ws-side { flex: 1 1 100%; }
}