/* Civic Maple — Crossword engine (pine green identity)
   Pine ramp: #12241a / #21422b / #2e6b3f / #3f8553   Sage accent: #6b8f5e
*/
:root,
html body {
  --cmcw-ink: #12241a;
  --cmcw-deep: #21422b;
  --cmcw-mid: #2e6b3f;
  --cmcw-leaf: #3f8553;
  --cmcw-sage: #6b8f5e;
  --cmcw-paper: #fbfaf7;
  --cmcw-paper-warm: #f4ede2;
  --cmcw-line: #d8d4c9;
  --cmcw-muted: #6b6f6a;
  --cmcw-bad: #b91c1c;
}

.cmx-cw {
  display: block;
  margin: 28px auto 36px;
  background: var(--cmcw-paper);
  border: 1px solid var(--cmcw-line);
  border-radius: 10px;
  padding: 22px 22px 26px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
  font-family: var(--cm-sans, "Inter", system-ui, sans-serif);
  color: var(--cmcw-ink);
  max-width: 920px;
}
.cmx-cw *,
.cmx-cw *::before,
.cmx-cw *::after { box-sizing: border-box; }

.cmx-cw__head { border-bottom: 1px solid var(--cmcw-line); padding-bottom: 14px; margin-bottom: 18px; }
.cmx-cw__kicker {
  display: inline-block; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--cmcw-mid); font-weight: 700; margin-bottom: 6px;
}
.cmx-cw__title {
  margin: 0 0 8px; font-family: "Lora", Georgia, serif; font-size: 28px; line-height: 1.15;
  color: var(--cmcw-ink); font-weight: 700;
}
.cmx-cw__meta { display: flex; gap: 8px; flex-wrap: wrap; }
.cmx-cw__pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--cmcw-deep); color: #fff;
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.3px;
}
.cmx-cw__pill--ghost { background: transparent; color: var(--cmcw-deep); border: 1px solid var(--cmcw-deep); }

.cmx-cw__layout {
  display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: 28px; align-items: start;
}
@media (max-width: 720px) {
  .cmx-cw__layout { grid-template-columns: 1fr; gap: 22px; }
  .cmx-cw { padding: 18px 14px 22px; }
}

.cmx-cw__board { min-width: 0; }
.cmx-cw__grid {
  display: grid;
  grid-template-columns: repeat(var(--cmcw-cols, 5), 1fr);
  gap: 2px;
  background: var(--cmcw-ink);
  border: 2px solid var(--cmcw-ink);
  border-radius: 4px;
  aspect-ratio: 1 / 1;
  width: 100%;
  user-select: none;
}
.cmx-cw__cell {
  position: relative;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 5.5vw, 30px);
  color: var(--cmcw-ink);
  cursor: pointer;
  text-transform: uppercase;
  transition: background-color 80ms ease;
}
.cmx-cw__cell--black { background: var(--cmcw-ink); cursor: default; }
.cmx-cw__cell--active { background: #ffd966; }
.cmx-cw__cell--word { background: #fff2c2; }
.cmx-cw__cell--wrong { background: #fde0e0; color: var(--cmcw-bad); }
.cmx-cw__cell--correct { color: var(--cmcw-mid); }
.cmx-cw__cellnum {
  position: absolute; top: 2px; left: 4px;
  font-size: 10px; font-weight: 600; color: var(--cmcw-muted);
}

.cmx-cw__controls { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.cmx-cw__btn {
  background: var(--cmcw-deep); color: #fff; border: 0; padding: 9px 14px; border-radius: 6px;
  font-weight: 600; font-size: 13px; cursor: pointer; letter-spacing: 0.2px;
  transition: background-color 120ms ease;
}
.cmx-cw__btn:hover { background: var(--cmcw-ink); }
.cmx-cw__btn--ghost { background: #fff; color: var(--cmcw-deep); border: 1px solid var(--cmcw-deep); }
.cmx-cw__btn--ghost:hover { background: var(--cmcw-deep); color: #fff; }

.cmx-cw__status { margin: 12px 0 0; min-height: 1.2em; font-size: 13px; font-weight: 600; }
.cmx-cw__status.is-good { color: var(--cmcw-mid); }
.cmx-cw__status.is-bad { color: var(--cmcw-bad); }
.cmx-cw__note { margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--cmcw-line); font-size: 12px; color: var(--cmcw-muted); }

.cmx-cw__clues { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; min-width: 0; }
@media (max-width: 540px) { .cmx-cw__clues { grid-template-columns: 1fr; } }
.cmx-cw__cluecol h3 {
  font-family: "Lora", Georgia, serif; font-size: 15px; margin: 0 0 10px;
  text-transform: uppercase; letter-spacing: 1.5px; color: var(--cmcw-deep);
  border-bottom: 2px solid var(--cmcw-deep); padding-bottom: 6px;
}
.cmx-cw__cluelist { list-style: none; padding: 0; margin: 0; }
.cmx-cw__cluelist li {
  padding: 7px 8px; border-radius: 5px; font-size: 14px; line-height: 1.4;
  color: var(--cmcw-ink); cursor: pointer; display: flex; gap: 8px; align-items: baseline;
}
.cmx-cw__cluelist li:hover { background: #f0eee5; }
.cmx-cw__cluelist li.is-active { background: var(--cmcw-deep); color: #fff; }
.cmx-cw__cluelist li.is-active .cmx-cw__num { color: #ffd966; }
.cmx-cw__num { font-weight: 800; color: var(--cmcw-mid); min-width: 18px; }

.cmx-cw__hidden-input {
  position: absolute; left: -9999px; top: -9999px; opacity: 0; width: 1px; height: 1px;
}

/* index */
.cmx-cw-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; padding: 0; margin: 18px 0 28px; list-style: none; }
.cmx-cw-index__card a {
  display: block; padding: 16px 16px 18px; background: #fff; border: 1px solid var(--cmcw-line);
  border-left: 4px solid var(--cmcw-mid); border-radius: 6px;
  text-decoration: none; color: var(--cmcw-ink); transition: transform 120ms ease, box-shadow 120ms ease;
}
.cmx-cw-index__card a:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(18, 36, 26, 0.08); }
.cmx-cw-index__kicker { display: block; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--cmcw-mid); font-weight: 700; margin-bottom: 6px; }
.cmx-cw-index__title { display: block; font-family: "Lora", Georgia, serif; font-size: 18px; line-height: 1.2; font-weight: 700; margin-bottom: 8px; }
.cmx-cw-index__meta { display: block; font-size: 12px; color: var(--cmcw-muted); font-weight: 600; }