/* ============================================================================
   Content pages: prose, archive, tracker, example grid.

   The .about-container / .back-link / .blog-list / .contact-info / .legal-links
   class names are kept deliberately. Fourteen hand-written blog pages and the
   how-to-play page use them, so restyling them here means those files keep
   working untouched.
   ========================================================================== */

.page {
  width: min(100%, calc(var(--prose-max) + 6rem));
  margin: clamp(0.75rem, 3vw, 2rem) auto;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}

/* legacy container from the old build */
.about-container {
  width: min(100%, calc(var(--prose-max) + 6rem));
  margin: clamp(0.75rem, 3vw, 2rem) auto;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}

.page h1,
.about-container h1 {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 5.5vw, 2.4rem);
  line-height: 1.25;
  margin-bottom: 1rem;
}

.page h2,
.about-container h2 {
  font-size: clamp(1.15rem, 3.6vw, 1.4rem);
  margin: 2rem 0 0.6rem;
  color: var(--ink);
}

.page h3,
.about-container h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 1.5rem 0 0.5rem;
  color: var(--ink-2);
}

.page p,
.about-container p {
  max-width: var(--prose-max);
  margin-bottom: 1rem;
  color: var(--ink-2);
  line-height: 1.7;
}

.page strong,
.about-container strong {
  color: var(--ink);
  font-weight: 600;
}

.page ul,
.page ol,
.about-container ul,
.about-container ol {
  max-width: var(--prose-max);
  margin: 0 0 1rem 1.1rem;
  color: var(--ink-2);
  line-height: 1.7;
  list-style-position: outside;
}

.page li,
.about-container li {
  margin-bottom: 0.4rem;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 1.25rem;
  padding: 0.4rem 0.9rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.back-link:hover {
  background: var(--surface-3);
  color: var(--ink);
}

.contact-info,
.callout {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--brand-500);
  border-radius: var(--r-md);
}

.contact-info p,
.callout p {
  margin-bottom: 0;
}

.legal-links {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
}

.legal-links p {
  margin-bottom: 0;
  color: var(--ink-3);
}

/* --------------------------------------------------------- lists of things */

.blog-list,
.archive-ul {
  list-style: none;
  margin-inline: 0;
  display: grid;
  gap: 0.4rem;
}

.blog-list li,
.archive-ul li {
  margin-bottom: 0;
}

.blog-list a,
.archive-ul a {
  display: block;
  padding: 0.75rem 1rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: background var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.blog-list a:hover,
.archive-ul a:hover {
  background: var(--surface-3);
  border-color: var(--border-strong);
  transform: translateX(3px);
}

/* -------------------------------------------------------------- archive UI */

.archive-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1.25rem;
}

.archive-search {
  flex: 1 1 14rem;
  min-width: 0;
  min-height: 44px;
  padding: 0.5rem 1rem;
  color: var(--ink);
  background: var(--surface-inset);
  border: 2px solid var(--border-strong);
  border-radius: var(--r-pill);
}

.archive-search:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-400) 22%, transparent);
}

.archive-group {
  margin-bottom: 1.5rem;
}

.archive-group__title {
  position: sticky;
  top: var(--header-h);
  z-index: 5;
  padding: 0.5rem 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--surface);
}

.archive-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.archive-item__date {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--ink-3);
  font-size: 0.85rem;
}

.archive-item__clue {
  flex: 1 1 auto;
  font-family: var(--font-display);
  font-size: 0.95rem;
}

.archive-item__stars {
  flex: 0 0 auto;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

.archive-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--ink-3);
}

/* -------------------------------------------------------------- tracker UI */

.tracker-layout {
  display: grid;
  gap: clamp(0.75rem, 3vw, 1.5rem);
  align-items: start;
  width: min(100%, 1060px);
  margin: clamp(0.75rem, 3vw, 2rem) auto;
  padding-inline: clamp(0.5rem, 3vw, 1rem);
}

@media (min-width: 900px) {
  .tracker-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  }
}

.panel {
  padding: clamp(1rem, 3.5vw, 1.75rem);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}

.panel__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 4.5vw, 1.7rem);
  margin-bottom: 1rem;
}

.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.cal-nav__label {
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cal-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: clamp(2px, 0.6vw, 5px);
  table-layout: fixed;
}

.cal-table th {
  padding-bottom: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.cal-day {
  position: relative;
  height: clamp(3rem, 11vw, 3.75rem);
  padding: 0.2rem;
  vertical-align: top;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.cal-day.is-empty {
  border-color: transparent;
  background: transparent;
}

.cal-day.is-unplayed {
  background: var(--surface-inset);
}

.cal-day.is-played {
  background: var(--row-3-wash);
  border-color: color-mix(in srgb, var(--row-3-line) 45%, transparent);
}

.cal-day.is-blank-score {
  background: var(--surface-3);
}

.cal-day.is-today {
  box-shadow: 0 0 0 2px var(--brand-500);
}

.cal-day a {
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
  border-radius: var(--r-xs);
}

.cal-day__n {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  text-align: start;
}

.cal-day__stars {
  display: block;
  margin-top: 0.15rem;
  font-size: clamp(0.62rem, 2.3vw, 0.78rem);
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-align: center;
}

.cal-day__badges {
  display: flex;
  gap: 1px;
  justify-content: center;
  margin-top: 0.1rem;
}

.cal-day__badges img {
  width: clamp(12px, 3.6vw, 16px);
  height: auto;
}

.s-gold {
  color: var(--gold-b);
}

.s-silver {
  color: var(--silver-b);
}

.s-bronze {
  color: var(--bronze-b);
}

.s-empty {
  color: var(--star-empty);
}

/* ----------------------------------------------------------------- stat kit */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.stat {
  padding: 0.75rem 0.5rem;
  text-align: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.stat__n {
  font-size: clamp(1.3rem, 5vw, 1.75rem);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.stat__label {
  margin-top: 0.15rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.badge-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--border);
}

.badge-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  object-fit: contain;
}

.badge-row.is-locked .badge-icon {
  filter: grayscale(1);
  opacity: 0.35;
}

.badge-info {
  flex: 1 1 auto;
  min-width: 0;
}

.badge-title {
  font-weight: 600;
  font-size: 0.95rem;
}

.badge-desc {
  font-size: 0.8rem;
  color: var(--ink-3);
}

.badge-count {
  flex: 0 0 auto;
  min-width: 2.4rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  color: var(--ink-invert);
  background: var(--action);
  border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}

.badge-row.is-locked .badge-count {
  color: var(--ink-3);
  background: var(--surface-3);
}

/* ------------------------------------------------------------------- meter */

.meter {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.meter__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.meter__tier {
  font-weight: 700;
}

.meter__next {
  font-size: 0.8rem;
  color: var(--ink-3);
}

.meter__track {
  height: 10px;
  background: var(--surface-3);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.meter__fill {
  height: 100%;
  width: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--brand-400), var(--brand-600));
  transition: width var(--t-slow) var(--ease);
}

/* ------------------------------------------------------------- data notice */

.data-notice {
  margin-top: 1.25rem;
  padding: 0.9rem 1rem;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
}

.data-notice__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.7rem;
}

.code-box {
  width: 100%;
  min-height: 6rem;
  margin-top: 0.6rem;
  padding: 0.6rem 0.75rem;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--ink);
  background: var(--surface-inset);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  resize: vertical;
  word-break: break-all;
}

/* ------------------------------------------------------------- spoilers --
   A phrase page names its own answer, so the meaning is never a spoiler.
   The grid is: those twenty words are a puzzle still sitting in the archive,
   playable in one tap. So it stays folded away until someone asks for it,
   and js opens it for anyone who has already played that date.             */

.spoiler {
  margin: 1.25rem 0;
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
  padding: 0.35rem 0.85rem;
  background: var(--surface);
}

.spoiler > summary {
  cursor: pointer;
  padding: 0.5rem 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-2);
  list-style-position: inside;
}

.spoiler > summary:hover,
.spoiler > summary:focus-visible {
  color: var(--ink);
}

.spoiler[open] > summary {
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--border);
}

/* No double frame: the wrapper inside already draws one. */
.spoiler .example-grid-wrapper {
  margin: 0 0 0.5rem;
  border: 0;
  background: transparent;
  padding-inline: 0;
}

/* ------------------------------------------------------- the example grid --
   Reused by how-to-play and by the in-game help panel.                      */

.example-grid-wrapper {
  margin: 1.25rem 0;
  padding: clamp(0.6rem, 2.5vw, 1rem);
  background: var(--surface-inset);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow-x: auto;
}

.example-title {
  font-size: 0.72rem !important;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3) !important;
  margin-bottom: 0.6rem !important;
}

.example-puzzle-grid {
  display: grid;
  gap: 0.4rem;
  min-width: 260px;
}

.example-row {
  --line: var(--row-0-line);
  --wash: var(--row-0-wash);
  --word-ink: var(--row-0-ink);

  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.4rem;
}

.example-row-1 {
  --line: var(--row-1-line);
  --wash: var(--row-1-wash);
  --word-ink: var(--row-1-ink);
}

.example-row-2 {
  --line: var(--row-2-line);
  --wash: var(--row-2-wash);
  --word-ink: var(--row-2-ink);
}

.example-row-3 {
  --line: var(--row-3-line);
  --wash: var(--row-3-wash);
  --word-ink: var(--row-3-ink);
}

.example-cell {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  height: clamp(2.1rem, 8vw, 2.6rem);
  padding: 0.15rem;
  font-size: clamp(0.58rem, 2.4vw, 0.85rem);
  font-weight: 700;
  text-align: center;
  color: var(--word-ink);
  background: var(--wash);
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.example-cell:not(:last-child)::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 100%;
  width: 0.4rem;
  height: 2px;
  background: var(--line);
  transform: translateY(-50%);
}

/* the old markup interleaved spacer spans; they are no longer needed */
.example-connector {
  display: none;
}

.example-phrasicle {
  margin-top: 0.85rem;
  padding: 0.7rem 1rem;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 3.5vw, 1.15rem);
  text-align: center;
  color: var(--ink);
  background: var(--surface-2);
  border-radius: var(--r-md);
}

/* --------------------------------------------------------- in-game help ---- */

.help-panel {
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(
    170deg,
    color-mix(in srgb, var(--brand-100) 70%, var(--surface)),
    var(--surface)
  );
  border: 1px solid color-mix(in srgb, var(--brand-400) 35%, transparent);
  border-radius: var(--r-lg);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .help-panel {
    background: linear-gradient(170deg, var(--surface-2), var(--surface));
  }
}

:root[data-theme='dark'] .help-panel {
  background: linear-gradient(170deg, var(--surface-2), var(--surface));
}

.help-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

/* The message takes the room it needs and the buttons drop below it on a narrow
   screen. Without this the archive banner's two buttons pushed the page 42px
   wider than the phone. */
.help-panel__head > p {
  flex: 1 1 12rem;
  min-width: 0;
}

.help-panel p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--ink-2);
  margin-bottom: 0;
}

.help-panel strong {
  color: var(--ink);
}

.help-panel__actions {
  margin-top: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* A day played in easy mode. A quiet corner mark on the player's own calendar,
   deliberately not in the share text. */
.cal-day.is-easy {
  position: relative;
}

.cal-day.is-easy::after {
  content: '\1f331';
  position: absolute;
  inset-block-start: 0.15rem;
  inset-inline-end: 0.2rem;
  font-size: 0.6rem;
  line-height: 1;
  opacity: 0.7;
}

/* -------------------------------------------------------- phrase meanings --

   The index of every phrase that has been an answer, and the per-phrase pages.
   These exist to be found in search, so they are plain prose in the site's own
   type rather than anything clever.                                          */

.phrase-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 1rem 0 1.75rem;
}

.phrase-jump a {
  min-width: 2rem;
  padding: 0.3rem 0.45rem;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}

.phrase-jump a:hover {
  color: var(--brand-600);
  border-color: var(--brand-600);
}

.phrase-list {
  columns: 2 16ch;
  column-gap: 1.5rem;
  margin-bottom: 1.5rem;
  list-style: none;
  padding: 0;
}

.phrase-list li {
  break-inside: avoid;
  margin-bottom: 0.3rem;
}

/* The archive banner's buttons: back to today, or straight to another old one.
   They wrap on a narrow screen rather than squeezing the message. */
.archive-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  flex: 0 1 auto;
}