/* The Daily Green — Word Search
   Green newspaper collage is the page. The crinkled paper is the puzzle sheet,
   and everything printed on it is black. Zuume sets headings, Times New Roman
   sets the grid. */

@font-face {
  font-family: 'Zuume';
  src: url('../assets/fonts/Zuume-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Zuume';
  src: url('../assets/fonts/Zuume-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --green:        #446329;   /* sampled from the newspaper background */
  --green-deep:   #1d2c12;
  --green-bright: #7bb03f;
  --paper:        #ebebeb;
  --ink:          #14140f;
  --ink-soft:     #4c4c44;
  --rule:         rgba(20, 20, 15, 0.22);

  /* `zuume` is the family name Adobe Fonts serves; 'Zuume' is the self-hosted fallback
     in assets/fonts/. Whichever is actually loaded wins, so switching hosting is one
     commented <link> in index.html and nothing here. */
  --display: zuume, 'Zuume', 'Haettenschweiler', 'Arial Narrow', system-ui, sans-serif;
  --grid-face: 'Times New Roman', Times, 'Tinos', 'Liberation Serif', serif;
}

* { box-sizing: border-box; }

/* A class-level `display` beats the UA stylesheet's [hidden] rule, so .gate stayed
   on screen after it was hidden. Any element given a display here needs this. */
[hidden] { display: none !important; }

html, body { min-height: 100%; }

body {
  margin: 0;
  padding: clamp(0.5rem, 3vw, 2rem);
  font-family: var(--grid-face);
  color: var(--paper);
  background:
    linear-gradient(rgba(18, 30, 12, 0.7), rgba(18, 30, 12, 0.78)),
    url('../assets/bg-newspaper.jpg') center / cover fixed no-repeat;
  background-color: var(--green-deep);
}

/* ---------------------------------------------------------------- age gate */

.gate {
  position: fixed; inset: 0; z-index: 20;
  display: grid; place-items: center;
  padding: 1.5rem;
  background:
    linear-gradient(rgba(18, 30, 12, 0.82), rgba(18, 30, 12, 0.9)),
    url('../assets/bg-newspaper.jpg') center / cover no-repeat;
}
.gate__card {
  width: min(28rem, 100%);
  padding: 2rem 1.75rem;
  text-align: center;
  color: var(--ink);
  background: url('../assets/paper.jpg') center / cover, var(--paper);
  border: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.5);
}
.gate__logo { width: min(17rem, 80%); margin-bottom: 1.25rem; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.gate h1 { font-family: var(--display); font-weight: 700; font-size: 1.9rem; margin: 0 0 .4rem; text-transform: uppercase; letter-spacing: .01em; }
.gate p { margin: 0 0 1.25rem; color: var(--ink-soft); font-size: .95rem; }
.gate__dob { display: flex; gap: .5rem; justify-content: center; }
.gate__dob label {
  display: flex; flex-direction: column; gap: .3rem;
  font-family: var(--display); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft);
}
.gate__dob input {
  width: 4rem; padding: .6rem .4rem; text-align: center;
  font-family: var(--grid-face); font-size: 1.15rem; color: var(--ink);
  background: rgba(255, 255, 255, .65);
  border: 1px solid var(--rule); border-radius: 2px;
}
.gate__dob label:last-child input { width: 6rem; }
.gate__error { min-height: 1.2rem; margin: .75rem 0 .25rem; color: #b3241f; font-size: .85rem; }
.gate__card--closed h1 { font-size: 1.6rem; }

/* ---------------------------------------------------------------- masthead */

#paper { max-width: 68rem; margin: 0 auto; }

.masthead { text-align: center; margin-bottom: clamp(.75rem, 2vw, 1.25rem); }
.masthead__logo {
  width: min(30rem, 88%);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .55));
}
.dateline {
  margin: .5rem auto 0; padding-top: .5rem;
  max-width: 34rem;
  border-top: 1px solid rgba(255, 255, 255, .35);
  font-family: var(--display); font-weight: 400;
  font-size: clamp(.72rem, 2.4vw, .85rem);
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}

/* ---------------------------------------------------------------- the sheet */

.sheet {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  padding: clamp(0.75rem, 3vw, 2rem);
  color: var(--ink);
  background: url('../assets/paper.jpg') center / cover, var(--paper);
  border: 1px solid rgba(0, 0, 0, .4);
  box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, .45);
}
@media (min-width: 56rem) {
  .sheet { grid-template-columns: auto 1fr; align-items: start; }
}

/* align-items: center would make this column size to its content, and .ws-wrap is a
   size container whose contents then size to *it* — the board collapses to nothing.
   Stretch the track and centre the children with auto margins instead. */
.sheet__board { display: flex; flex-direction: column; align-items: stretch; gap: .75rem; min-width: 0; }

/* Sized from its own container, not the viewport. A vw-based board ignores the
   body and sheet padding and clips its last column off the right edge on a phone. */
.ws-wrap {
  position: relative;
  width: 100%;
  max-width: 32rem;
  margin-inline: auto;
  container-type: inline-size;
}
@media (min-width: 56rem) { .ws-wrap { width: 30rem; } }

.ws-grid {
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  aspect-ratio: 1;
  border: 2px solid var(--ink);
  background: transparent;
  touch-action: none;
  user-select: none; -webkit-user-select: none;
  cursor: crosshair;
}
.ws-row { display: contents; }

.ws-cell {
  display: grid; place-items: center;
  font-family: var(--grid-face);
  font-size: calc(100cqw / var(--n) * 0.58);
  line-height: 1;
  color: var(--ink);
  border-right: 1px solid rgba(20, 20, 15, .07);
  border-bottom: 1px solid rgba(20, 20, 15, .07);
}
.ws-cell.is-sel { background: rgba(123, 176, 63, .55); }
.ws-cell.is-anchor { background: rgba(123, 176, 63, .85); box-shadow: inset 0 0 0 2px var(--green-deep); }
.ws-cell:focus-visible { outline: 2px solid var(--green-deep); outline-offset: -2px; }
/* A hint is a circled letter, the way you would ring one on newsprint. */
.ws-cell.is-hint {
  position: relative; font-weight: 700;
}
.ws-cell.is-hint::after {
  content: ''; position: absolute; inset: 12%;
  border: 2px solid #b3241f; border-radius: 50%;
}
.ws-cell.is-found { color: var(--ink); font-weight: 700; }
.ws-cell.is-wrong { animation: shake .32s; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

.ws-rings { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.ws-ring { opacity: .85; }

.statusbar {
  display: flex; justify-content: space-between; align-items: baseline;
  width: 100%; max-width: 32rem; margin-inline: auto;
  font-family: var(--display); text-transform: uppercase; letter-spacing: .12em;
  font-size: .75rem; color: var(--ink-soft);
}
.statusbar__clock { font-size: 1.35rem; letter-spacing: .04em; color: var(--ink); font-weight: 700; }

.boardtools {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  width: 100%; max-width: 32rem; margin-inline: auto;
}
.hintcount {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .12em;
  font-size: .72rem; color: #b3241f;
}
/* The margin note a found word prints. Reserves its line so the board does not jump. */
.stinger {
  width: 100%; max-width: 32rem; margin: 0 auto; min-height: 2.6em;
  font-size: .92rem; line-height: 1.4; color: var(--ink-soft);
  border-left: 3px solid var(--rule); padding-left: .7rem;
}
.stinger:empty { border-left-color: transparent; }
/* On a phone the board is directly above this, so a permanently reserved empty line
   reads as a hole in the page. Let it grow instead; there is nothing below it to jar. */
@media (max-width: 56rem) { .stinger:empty { min-height: 0; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- word list */

.sheet__side h2 {
  margin: 0 0 .75rem;
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: 1.35rem; letter-spacing: .02em;
  border-bottom: 2px solid var(--ink); padding-bottom: .35rem;
}
#wordlist {
  list-style: none; margin: 0 0 1rem; padding: 0;
  columns: 2; column-gap: 1.25rem;
  font-size: 1.02rem; letter-spacing: .02em;
}
#wordlist li { padding: .18rem 0; break-inside: avoid; text-transform: uppercase; }
#wordlist li.is-found {
  color: var(--ink-soft); opacity: .65;
  text-decoration: line-through;
  text-decoration-color: var(--ink);
  text-decoration-thickness: 2px;
}
.rules { font-size: .82rem; color: var(--ink-soft); line-height: 1.45; margin: 0 0 1.25rem; }

.actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.actions--centre { justify-content: center; }
button {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; font-size: .9rem;
  padding: .6rem 1.1rem; color: var(--paper); background: var(--green);
  border: none; border-radius: 2px; cursor: pointer;
}
button:hover { background: var(--green-deep); }
button.ghost { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
button.ghost:hover { background: rgba(0, 0, 0, .07); }

/* ---------------------------------------------------------------- front page */

.sheet--front { display: block; }

.editions__head {
  margin: 0 0 1rem;
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.4rem, 5vw, 2rem); letter-spacing: .02em;
  border-bottom: 3px double var(--ink); padding-bottom: .4rem;
}
.editions {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 46rem) { .editions { grid-template-columns: repeat(3, 1fr); } }

.edition {
  display: flex; flex-direction: column; gap: .3rem; text-align: left;
  width: 100%; height: 100%; padding: 1.1rem 1rem 1.2rem;
  background: transparent; color: var(--ink);
  border: 1px solid var(--rule); border-top: 3px solid var(--ink);
  border-radius: 0; cursor: pointer;
  font-family: var(--grid-face); letter-spacing: normal; text-transform: none;
}
.edition:hover { background: rgba(0, 0, 0, .05); }
.edition__name {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: 1.75rem; line-height: 1;
}
.edition__spec {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .14em;
  font-size: .7rem; color: var(--ink-soft); margin-bottom: .35rem;
}
.edition__blurb { font-size: .95rem; line-height: 1.4; color: var(--ink); }
.edition__last {
  margin-top: .6rem; align-self: flex-start;
  font-family: var(--display); text-transform: uppercase; letter-spacing: .14em;
  font-size: .65rem; color: var(--paper); background: var(--green);
  padding: .18rem .5rem;
}

/* ---------------------------------------------------------------- stop press */

.stoppress {
  margin-top: clamp(1rem, 3vw, 1.5rem); padding: 1.75rem 1.5rem; text-align: center;
  color: var(--ink);
  background: url('../assets/paper.jpg') center / cover, var(--paper);
  border: 3px double var(--ink);
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .45);
}
.stoppress__kicker { margin: 0; font-family: var(--display); letter-spacing: .3em; text-transform: uppercase; font-size: .75rem; color: #b3241f; }
.stoppress h2 { margin: .2rem 0 .5rem; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.9rem, 7vw, 3rem); line-height: .95; }
.stoppress__time { margin: 0; font-family: var(--display); font-size: 2.6rem; font-weight: 700; }
.stoppress__status {
  min-height: 1.2em; margin: .6rem 0 0;
  font-family: var(--display); text-transform: uppercase; letter-spacing: .12em;
  font-size: .72rem; color: var(--ink-soft);
}
.stoppress .actions { margin-top: .5rem; }
.stoppress__meta { margin: .1rem 0 1.1rem; font-size: .9rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .1em; font-family: var(--display); }

.fatal { padding: 2rem; color: #b3241f; font-size: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .ws-cell.is-wrong { animation: none; outline: 2px solid #b3241f; }
}