/*
 * Seerdle — styled after pathofexile.com and the in-game item tooltips.
 *
 * Fonts: Fontin and Fontin SmallCaps, free fonts under the exljbris Free Font
 * License (see app/assets/fonts/fontin-LICENSE.md), which asks for the notice
 * below next to the Font-Face declarations; the page footer links exljbris too.
 * Display text uses Fontin SmallCaps like the game, falling back to Cinzel (SIL
 * Open Font License, see app/assets/fonts/cinzel-OFL.txt). Body text is Verdana
 * like the website.
 */

/* A font by Jos Buivenga (exljbris) -> www.exljbris.com */
@font-face {
  font-family: "Fontin SmallCaps";
  src: url("/assets/fontin-smallcaps-77684ab9.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Fontin";
  src: url("/assets/fontin-regular-5a0f5778.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Fontin";
  src: url("/assets/fontin-italic-95f679b5.ttf") format("truetype");
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Fontin";
  src: url("/assets/fontin-bold-fff422fc.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Cinzel";
  src: url("/assets/cinzel-variable-9801f77b.ttf") format("truetype");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  /* Surfaces */
  --bg: #000;
  --panel: #0c0b0b;
  --panel-raised: #15110d;
  --line: #2a241c;
  --frame: #5c4a32;
  --frame-bright: #8b6b3f;

  /* Text (from pathofexile.com) */
  --text: #a38d6d;
  --text-soft: #cac2a8;
  --text-strong: #dfcf99;
  --muted: #8a7d68;
  --accent: #e8ba7f;
  --highlight: #ffe86e;

  /* In-game item colours */
  --unique: #af6025;
  --magic: #8888ff;
  --vaal: #d20000;

  /* Clues: dark fills with a brighter edge, like the game's UI */
  --correct: #1f3317;
  --correct-edge: #6f9a4d;
  --correct-text: #c9e6a8;
  --partial: #3a2f0e;
  --partial-edge: #b8942e;
  --partial-text: #ffe28a;
  --wrong: #2a0f0d;
  --wrong-edge: #5e2420;
  --wrong-text: #d9b9a4;

  --font-display: "Fontin SmallCaps", "Cinzel", Georgia, serif;
  --font-flavour: "Fontin", Georgia, serif; /* used in italic */
  --font-body: Verdana, "DejaVu Sans", Geneva, sans-serif;

  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgb(120 70 30 / 0.22), transparent 70%),
    radial-gradient(ellipse at 50% 30%, #0b0806 0%, var(--bg) 70%) fixed;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.55;
  /* Fontin's SmallCaps, Italic and Bold map "ffi" to an empty ligature glyph,
     so "Efficient" showed as "E   cient". Spell it out letter by letter. */
  font-variant-ligatures: no-common-ligatures;
}

/* Tapping a button or a suggestion quickly shouldn't double-tap zoom the page.
   Pinch-zoom still works everywhere. */
a,
button,
input,
.suggestions__item {
  touch-action: manipulation;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* A framed panel: bronze edge, a black inner line, and a soft inner shadow. */
.hint,
.result,
.how-to-play,
.league-dialog,
.item-browser {
  border: 1px solid var(--frame);
  background: linear-gradient(var(--panel-raised), var(--panel));
  box-shadow:
    inset 0 0 0 1px #000,
    inset 0 0 24px rgb(0 0 0 / 0.8),
    0 2px 6px 2px rgb(0 0 0 / 0.88);
}

/* Game */

.game {
  max-width: 60rem;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
  display: grid;
  gap: 1.5rem;
}

.game__header {
  position: relative;
  padding-bottom: 1.25rem;
  text-align: center;
}

/* Ornamental divider: a line fading out on both ends with a diamond in the middle. */
.game__header::after,
.game__header::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
}

.game__header::after {
  width: min(28rem, 80%);
  height: 1px;
  translate: -50% 0;
  background: linear-gradient(90deg, transparent, var(--frame-bright), transparent);
}

.game__header::before {
  z-index: 1;
  width: 0.5rem;
  height: 0.5rem;
  translate: -50% 50%;
  rotate: 45deg;
  border: 1px solid var(--frame-bright);
  background: var(--bg);
}

.game__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: normal; /* Fontin SmallCaps has one weight; no fake bold */
  letter-spacing: 0.06em;
  line-height: 1.1;
  background: linear-gradient(#fff2c4, #e8ba7f 45%, #a8692e);
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 3px #000) drop-shadow(0 0 14px rgb(232 186 127 / 0.25));
}

.game__number {
  font-size: 1.5rem;
  letter-spacing: 0.02em;
}

.game__tagline,
.game__solves,
.game__remaining {
  margin: 0.25rem 0 0;
  color: var(--text);
  text-align: center;
}

.game__solves,
.game__remaining {
  color: var(--muted);
  font-size: 0.8rem;
}

/* The container is always there for streams; hide it when there's no message. */
#flash:not(:has(.flash)) {
  display: none;
}

.flash {
  margin: 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--wrong-edge);
  background: var(--wrong);
  color: var(--wrong-text);
  text-align: center;
}

/* Corruption: Vaal red, glowing like the site's red text. */

/* No class to toggle: the board turns red whenever the "Corrupted" label is inside it. */
.game:has(.corrupted-label) {
  outline: 1px solid var(--vaal);
  outline-offset: -1px;
  box-shadow: inset 0 0 5rem rgb(210 0 0 / 0.18);
}

.corrupted-label {
  position: relative;
  margin: 0.5rem 0 0;
  color: var(--vaal);
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  text-shadow: 0 0 3px var(--vaal);
}

.corrupted-label__word {
  cursor: help;
  outline: none;
}

/* The flavour text: hidden until the word is hovered or focused (tapped),
   then shown under it like an item's flavour text in its tooltip. */
.corrupted-label__flavour {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 50%;
  z-index: 12;
  width: max-content;
  max-width: min(22rem, calc(100vw - 2rem));
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--vaal);
  background: linear-gradient(#1a0606, var(--panel));
  box-shadow: inset 0 0 0 1px #000, 0 2px 8px 2px rgb(0 0 0 / 0.9);
  color: var(--unique);
  font-family: var(--font-flavour);
  font-size: 0.95rem;
  font-style: italic;
  letter-spacing: normal;
  line-height: 1.4;
  text-shadow: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -0.25rem);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}

.corrupted-label__word:hover + .corrupted-label__flavour,
.corrupted-label__word:focus-visible + .corrupted-label__flavour,
.corrupted-label__word:focus + .corrupted-label__flavour {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
  .corrupted-label__flavour { transition: none; }
}

/* Silhouette */

.silhouette-frame {
  display: grid;
  place-items: center;
  min-height: 12rem;
}

.silhouette {
  max-height: 12rem;
  /* Same filter functions in both states, so the reveal can animate between them. */
  filter: brightness(0) drop-shadow(0 0 18px transparent);
  transition: filter 0.6s ease;
}

.silhouette--revealed {
  filter: brightness(1) drop-shadow(0 0 18px rgb(175 96 37 / 0.35));
}

.silhouette-frame__placeholder {
  display: grid;
  place-items: center;
  width: 8rem;
  height: 12rem;
  border: 1px solid var(--line);
  background: radial-gradient(ellipse at center, rgb(92 74 50 / 0.15), transparent 70%);
  box-shadow: inset 0 0 0 3px #000, inset 0 0 0 4px var(--line);
  color: var(--frame);
  font-family: var(--font-display);
  font-size: 4rem;
}

/* Guess form */

.guess-form {
  position: relative; /* the item browser opens below the whole form */
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  width: 100%;
  max-width: 32rem;
  margin: 0 auto;
}

.guess-form__input {
  flex: 0 1 24rem;
  min-width: 0;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--frame);
  background: #050404;
  box-shadow: inset 0 0 10px #000;
  color: var(--text-strong);
  font: inherit;
}

.guess-form__input::placeholder {
  color: var(--muted);
}

.guess-form__input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: inset 0 0 10px #000, 0 0 8px rgb(232 186 127 / 0.35);
}

.button {
  padding: 0.6rem 1.3rem;
  border: 1px solid var(--frame);
  background: linear-gradient(#2a1f14, #110c08);
  box-shadow: inset 0 1px 0 rgb(255 220 160 / 0.08), 0 1px 3px #000;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.button:hover,
.button:focus-visible {
  border-color: var(--frame-bright);
  color: var(--highlight);
  text-shadow: 0 0 6px rgb(255 232 110 / 0.5);
}

/* Item browser: tabs per slot group, a pinned header per class, scrolling list */

.item-browser {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 11; /* above the phone hint bar, in case a tiny screen leaves no room for both */
  display: flex;
  flex-direction: column;
}

/* Opened above the input when there's no room below (set by the autocomplete
   controller): the tabs stay next to the input, the list runs up from them. */
.item-browser--up {
  top: auto;
  bottom: calc(100% + 2px);
  flex-direction: column-reverse;
}

.item-browser--up .item-browser__tabs {
  border-top: 1px solid var(--frame);
  border-bottom: 0;
}

.item-browser[hidden] {
  display: none;
}

.item-browser__tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--frame);
}

.item-browser__tab {
  padding: 0.45rem 0.25rem;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 0.8rem;
  cursor: pointer;
}

.item-browser__tab:nth-child(4n) {
  border-right: 0;
}

.item-browser__tab:hover {
  color: var(--accent);
}

.item-browser__tab[aria-selected="true"] {
  background: linear-gradient(#5a3418, #3a2414);
  box-shadow: inset 0 -2px 0 var(--unique);
  color: var(--highlight);
}

.suggestions {
  /* --room is set by the autocomplete controller: the space down to the hint
     bar or the bottom of the screen (or up to the top, when it opens above the
     input), so the end of the list is never cut off. */
  max-height: min(22rem, 55vh, var(--room, 100vh));
  margin: 0;
  padding: 0 0 0.25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  scrollbar-color: var(--frame) transparent;
}

/* The class name above its items; stays pinned while its items scroll past. */
.suggestions__group {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.45rem 0.7rem 0.3rem;
  border-bottom: 1px solid var(--unique);
  background: var(--panel-raised);
  color: var(--text-soft);
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}

.suggestions__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.7rem;
  color: var(--unique);
  font-family: var(--font-display);
  cursor: pointer;
}

.suggestions__item:hover,
.suggestions__item[aria-selected="true"] {
  background: linear-gradient(90deg, rgb(175 96 37 / 0.25), transparent);
  color: var(--accent);
}

.suggestions__icon {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
}

/* Board */

.board-wrapper {
  overflow-x: auto;
}

.board {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0.25rem;
}

.board th[scope="col"] {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: normal;
  letter-spacing: 0.08em;
}

/* The League header's ⓘ, which opens the list of leagues (.league-dialog). */

.league-info {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.league-info__toggle {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: 0.9rem/1 var(--font-body);
  cursor: pointer;
}

.league-info__toggle:hover,
.league-info__toggle:focus-visible {
  color: var(--accent);
}

.guess__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--line);
  background: linear-gradient(90deg, rgb(175 96 37 / 0.12), var(--panel) 60%);
  color: var(--unique);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: normal;
  text-align: left;
}

/* The answer's row: its item cell gets the green edge too, which tells it apart
   from a clue twin (every clue green, wrong item). */
.guess__item--correct {
  border-color: var(--correct-edge);
  box-shadow: inset 0 0 0 1px var(--correct-edge);
}

.guess__icon {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}

.badge {
  padding: 0 0.35rem;
  border: 1px solid var(--frame);
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.how-to-play__beta {
  color: var(--muted);
  font-size: 0.85rem;
}

.how-to-play__beta a {
  color: var(--accent);
}

.clue {
  padding: 0.4rem;
  border: 1px solid transparent;
  box-shadow: inset 0 0 12px rgb(0 0 0 / 0.6);
  text-align: center;
}

.clue--correct { background: var(--correct); border-color: var(--correct-edge); color: var(--correct-text); }
.clue--partial { background: var(--partial); border-color: var(--partial-edge); color: var(--partial-text); }
.clue--wrong { background: var(--wrong); border-color: var(--wrong-edge); color: var(--wrong-text); }

.clue__arrow {
  margin-left: 0.3em; /* instead of a space, which would let the arrow wrap alone */
  color: var(--highlight);
  font-size: 0.8em;
}

/* Hints: each hint written the way the game writes that kind of text. */

/* Wider screens: the hints are cards under the board. Each card is the
   popover a phone opens from the hint bar (below), shown inline here, so its
   tile is hidden and the popover's own positioning is undone. */

.hint-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.75rem;
}

.hint-tab {
  display: none;
}

.hint-sheet {
  position: static;
  display: block;
  width: auto;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: none;
  color: inherit;
}

.hint {
  height: 100%;
}

/* Phones: a bar fixed to the bottom of the screen with a tile per hint, so
   the hints are in reach without scrolling. A tile opens its card as a
   popover sheet just above the bar. */

:root {
  --hint-bar-height: 4.25rem;
}

@media (max-width: 40rem) {
  /* Keep the end of the page (the footer) clear of the bar. */
  body:has(.hint-bar) {
    padding-bottom: calc(var(--hint-bar-height) + env(safe-area-inset-bottom));
  }

  .hint-bar {
    position: fixed;
    inset: auto 0 0;
    z-index: 10;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* equal tiles, however long the titles */
    gap: 0.5rem;
    height: calc(var(--hint-bar-height) + env(safe-area-inset-bottom));
    padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--frame);
    background: linear-gradient(var(--panel-raised), #000);
    box-shadow: 0 -4px 12px rgb(0 0 0 / 0.9);
  }

  .hint-tab {
    width: 100%;
    height: 100%;
    display: grid;
    place-content: center;
    gap: 0.1rem;
    padding: 0 0.25rem;
    border: 1px solid var(--frame);
    background: linear-gradient(var(--panel-raised), var(--panel));
    box-shadow: inset 0 0 0 1px #000, inset 0 0 12px rgb(0 0 0 / 0.8);
    color: var(--text-soft);
    cursor: pointer;
  }

  .hint-tab__title {
    font-family: var(--font-display);
    font-size: 0.85rem;
    line-height: 1.1;
    letter-spacing: 0.04em;
    text-align: center;
  }

  .hint-tab__status {
    color: var(--muted);
    font-size: 0.7rem;
    line-height: 1.2;
  }

  .hint-tab--locked {
    opacity: 0.55;
    cursor: default;
  }

  .hint-tab--locked .hint-tab__status {
    font-style: italic;
  }

  /* Just unlocked by the last guess: a slow bronze pulse until the next one. */
  .hint-tab--new {
    border-color: var(--frame-bright);
    animation: hint-tab-pulse 1.6s ease-in-out infinite alternate;
  }

  .hint-tab--new .hint-tab__status {
    color: var(--accent);
  }

  .hint-sheet {
    position: fixed;
    inset: auto 0 calc(var(--hint-bar-height) + env(safe-area-inset-bottom) + 0.5rem);
    width: min(40rem, calc(100% - 1rem));
    height: auto;
    max-height: 50vh;
    margin: 0 auto;
    overflow-y: auto;
  }

  .hint-sheet:not(:popover-open) {
    display: none;
  }
}

@keyframes hint-tab-pulse {
  to { box-shadow: inset 0 0 0 1px #000, inset 0 0 12px rgb(0 0 0 / 0.8), 0 0 10px 1px var(--frame-bright); }
}

@media (prefers-reduced-motion: reduce) {
  .hint-tab--new { animation: none; }
}

.hint {
  padding: 0.75rem 1rem;
}

.hint--locked {
  opacity: 0.55;
}

.hint__title {
  margin: 0 0 0.35rem;
  color: var(--text-soft);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: normal;
  letter-spacing: 0.06em;
}

.hint__body {
  margin: 0;
  color: var(--text);
}

.hint--locked .hint__body {
  color: var(--muted);
  font-style: italic;
}

/* Flavour text is orange italic in the game, modifiers are blue. */
#hint_flavour_text .hint:not(.hint--locked) .hint__body {
  color: var(--unique);
  font-family: var(--font-flavour);
  font-size: 0.95rem;
  font-style: italic;
}

#hint_mod .hint:not(.hint--locked) .hint__body {
  color: var(--magic);
}

/* Result: a summary on the page, and the full result in a modal dialog styled
   like a unique item's tooltip, header bar and all. */

.result-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1rem;
  text-align: center;
}

.result-summary__text {
  margin: 0;
  color: var(--text-soft);
}

.result-summary__text strong {
  color: var(--unique);
  font-family: var(--font-display);
  font-weight: normal;
}

/* The dialog box itself has no padding, so clicks on it are backdrop clicks. */
.result {
  width: min(30rem, calc(100% - 2rem));
  max-height: calc(100% - 2rem);
  overflow-y: auto;
  padding: 0;
  color: var(--text);
  text-align: center;
}

.result::backdrop {
  background: rgb(0 0 0 / 0.75);
}

.result__body {
  padding: 0 1.25rem 1.25rem;
}

.result__header {
  position: relative;
  margin: 0 -1.25rem;
  padding: 0.7rem 2.5rem;
  border-bottom: 1px solid var(--unique);
  background: linear-gradient(#3a2414, #1c1009);
}

.result__title {
  margin: 0;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: normal;
  text-shadow: 0 1px 2px #000;
}

.result__close {
  position: absolute;
  top: 50%;
  right: 0.6rem;
  translate: 0 -50%;
  width: 2rem;
  height: 2rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.result__close:hover {
  color: var(--highlight);
}

/* The answer, like an item: icon, unique-coloured name, base type underneath. */
.result__answer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.result__icon {
  max-width: 4rem;
  max-height: 5rem;
  filter: drop-shadow(0 0 10px rgb(175 96 37 / 0.35));
}

.result__name,
.result__base {
  margin: 0;
}

.result__name {
  color: var(--unique);
  font-family: var(--font-display);
  font-size: 1.35rem;
}

.result__base {
  color: var(--text-soft);
}

/* One row of coloured squares per guess, the score as its caption. */
.result__grid {
  display: grid;
  justify-content: center;
  gap: 0.25rem;
  margin: 1rem 0;
}

.result__score {
  margin-bottom: 0.35rem;
  color: var(--text-soft);
  font-family: var(--font-display);
  font-size: 1rem;
}

.result__row {
  display: flex;
  gap: 0.25rem;
}

.result__square {
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid;
  box-shadow: inset 0 0 6px rgb(0 0 0 / 0.5);
}

/* Bright fills at this size; the board's dark cell fills look muddy when small. */
/* The item square, a little apart from the clue squares after it. */
.result__square--item {
  margin-right: 0.35rem;
}

.result__square.clue--correct { background: var(--correct-edge); }
.result__square.clue--partial { background: var(--partial-edge); }
.result__square.clue--wrong { background: var(--wrong-edge); }

.result__actions {
  display: flex;
  flex-direction: column; /* Share, then the countdown under it, both centred */
  align-items: center;
  gap: 0.75rem;
}

.result__next {
  display: grid;
  text-align: center;
}

.result__next-label {
  color: var(--muted);
  font-size: 0.75rem;
}

.result__clock {
  color: var(--text-strong);
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

/* Development only */

.dev-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.dev-tools__note {
  flex-basis: 100%;
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  text-align: center;
}

.button--dev {
  border-style: dashed;
  border-color: var(--line);
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.75rem;
}

/* Guess input layout */

.guess-form__field {
  flex: 1;
  display: flex;
  min-width: 0;
}

.guess-form__field .guess-form__input {
  flex: 1;
}

/* iOS zooms the page in when an input under 16px is focused. Make the guess
   input 16px on phones instead of disabling zoom with the viewport tag. */
@media (max-width: 40rem) {
  .guess-form__input {
    font-size: 1rem;
  }

  /* The zoom only looks at the input's own size, so the placeholder can stay
     small enough to fit. */
  .guess-form__input::placeholder {
    font-size: 0.9rem;
  }
}


/* How to play */

.help-button {
  position: absolute;
  z-index: 1; /* above the title, whose glow (filter) puts it on its own layer */
  top: 0;
  right: 0;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--frame);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #2a1f14, #0c0907);
  box-shadow: inset 0 0 0 1px #000, 0 1px 3px #000;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.1rem;
  cursor: pointer;
}

.help-button:hover {
  border-color: var(--frame-bright);
  color: var(--highlight);
}

.how-to-play {
  width: min(32rem, calc(100% - 2rem));
  max-height: calc(100% - 2rem);
  overflow-y: auto;
  padding: 1.5rem;
  color: var(--text);
}

.how-to-play::backdrop,
.league-dialog::backdrop {
  background: rgb(0 0 0 / 0.75);
}

.how-to-play__title,
.league-dialog__title {
  margin: 0 0 0.75rem;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: normal;
}

.how-to-play strong {
  color: var(--text-soft);
}

.how-to-play__list {
  padding-left: 1.25rem;
}

.how-to-play__list li + li {
  margin-top: 0.4rem;
}

/* The two kinds of "close", indented under it. */
.how-to-play__sublist {
  margin: 0.3rem 0 0;
  padding-left: 1.1rem;
  list-style-type: circle;
  font-size: 0.85rem;
}

.how-to-play__sublist li + li {
  margin-top: 0.2rem;
}

/* Every league and its patch, opened from the board's League header. A popover
   like How to play, but narrower and capped in height: the title and "Got it"
   stay put while the list scrolls between them. */
.league-dialog:popover-open {
  display: flex;
  flex-direction: column;
}

.league-dialog {
  width: min(22rem, calc(100% - 2rem));
  max-height: min(34rem, calc(100% - 2rem));
  padding: 1.25rem 1.5rem;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9rem;
  letter-spacing: normal;
  text-align: left;
  scrollbar-color: var(--frame) transparent;
}

.league-dialog__note {
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.league-dialog__leagues {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  color: var(--text-soft);
  line-height: 1.6;
}

.league-dialog > .button {
  align-self: flex-start;
}

.league-dialog__version {
  display: inline-block;
  min-width: 2.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.swatch {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  vertical-align: -0.1em;
  border-width: 1px; /* no border-color here: it comes from the clue class */
  border-style: solid;
}

/* Phones: each guess takes two lines, the item across the top and its five
   clues underneath, instead of six columns that don't fit. */

@media (max-width: 40rem) {
  .item-browser__tab {
    font-size: 0.65rem;
    white-space: nowrap;
  }

  /* The Archive and ? buttons get their own row above the title. */
  .game__header {
    padding-top: 3rem;
  }

  .game {
    padding-top: 1.25rem;
    gap: 1rem;
  }

  .game__title {
    font-size: 2.25rem;
  }

  .silhouette-frame {
    min-height: 8rem;
  }

  .silhouette {
    max-height: 8rem;
  }

  .silhouette-frame__placeholder {
    width: 5.5rem;
    height: 8rem;
    font-size: 3rem;
  }

  .board,
  .board thead,
  .board tbody {
    display: block;
  }

  .board tr {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.25rem;
    margin-bottom: 0.5rem;
  }

  .board thead th:first-child {
    display: none;
  }

  .board th[scope="col"] {
    font-size: 0.6rem;
    letter-spacing: 0.03em;
  }

  .guess__item {
    grid-column: 1 / -1;
  }

  .guess__icon {
    width: 1.75rem;
    height: 1.75rem;
  }

  .clue {
    display: grid;
    place-items: center;
    min-height: 3.5rem;
    padding: 0.25rem 0.1rem;
    font-family: Arial, "Liberation Sans", Helvetica, sans-serif; /* narrower than Verdana */
    font-size: 0.7rem;
    overflow-wrap: anywhere; /* a word too long for the square still breaks */
    hyphens: auto; /* hyphenates where it can; needs <html lang> */
  }

  /* Stacked under the value here (the cell is a grid), so no gap beside it. */
  .clue__arrow {
    margin-left: 0;
  }
}

/* Stats (shown with the result) */

.stats {
  position: relative;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.stats__title,
.stats__subtitle {
  margin: 0 0 0.75rem;
  color: var(--text-soft);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: normal;
  letter-spacing: 0.06em;
}

.stats__subtitle {
  margin-top: 1.25rem;
}

.stats__tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
}

.stat {
  display: flex;
  flex-direction: column-reverse; /* value above its label, dt still first in the markup */
}

.stat__label {
  color: var(--muted);
  font-size: 0.75rem;
}

.stat__value {
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-body);
  font-size: 1.75rem;
  font-weight: 700;
}

.distribution {
  display: grid;
  gap: 0.25rem;
  max-width: 24rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.distribution__row {
  display: grid;
  grid-template-columns: 1rem 1fr;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
}

.distribution__label {
  color: var(--muted);
  text-align: right;
}

.distribution__track {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

/* Thin bar from a square baseline to a 4px rounded end; the count sits outside it. */
.distribution__bar {
  width: var(--share);
  height: 1rem;
  border-radius: 0 4px 4px 0;
  background: #4a3f30;
}

.distribution__bar--today {
  background: linear-gradient(90deg, #8a4a1b, var(--unique));
}

.distribution__count {
  color: var(--text-soft);
}

.stats__corrupted {
  margin: 1rem 0 0;
  color: var(--vaal);
  text-shadow: 0 0 3px var(--vaal);
}

@media (max-width: 40rem) {
  .stats__tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 1rem;
  }
}

/* Footer: credits for the item data and fonts */

.site-footer {
  padding: 1.5rem 1rem 2rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.7rem;
  text-align: center;
}

.site-footer p {
  margin: 0.2rem 0;
}

.site-footer a {
  color: var(--text);
}

.site-footer a:hover {
  color: var(--accent);
}

/* FAQ: a question and its answer per framed panel, like the hint cards */

.faq__eyebrow {
  margin: 0 0 0.25rem;
  color: var(--muted);
  font-family: var(--font-display);
  letter-spacing: 0.2em;
}

.faq__entries {
  display: grid;
  gap: 0.75rem;
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
}

.faq__entry {
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  background: linear-gradient(var(--panel-raised), var(--panel));
}

.faq__question {
  margin: 0 0 0.4rem;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: normal;
  letter-spacing: 0.03em;
}

.faq__answer {
  margin: 0;
  color: var(--text-soft);
}

.faq__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.25rem;
  margin: 0;
}

.faq__links a:not(.button) {
  color: var(--accent);
}

/* Archive: the header link, and the list of past days */

.archive-button {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1; /* above the title's glow layer, like the help button */
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--frame);
  background: linear-gradient(#2a1f14, #110c08);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 0.9rem;
  text-decoration: none;
}

.archive-button:hover {
  border-color: var(--frame-bright);
  color: var(--highlight);
}

.game__tagline a,
.result__links a {
  color: var(--accent);
}

.result__links {
  margin: 0;
}

.result__archive-note {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.8rem;
}

.archive__empty {
  color: var(--muted);
  text-align: center;
}

.archive__days {
  display: grid;
  gap: 0.4rem;
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.archive__day {
  display: grid;
  grid-template-columns: 3rem 9rem 1fr auto;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
  background: linear-gradient(90deg, var(--panel-raised), var(--panel));
  color: var(--text);
  text-decoration: none;
}

.archive__day:hover {
  border-color: var(--frame-bright);
}

.archive__day--won { border-left: 3px solid var(--correct-edge); }
.archive__day--lost { border-left: 3px solid var(--wrong-edge); }

.archive__number {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.1rem;
}

.archive__date {
  color: var(--muted);
  font-size: 0.8rem;
}

.archive__answer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  color: var(--unique);
  font-family: var(--font-display);
}

.archive__icon {
  width: 1.75rem;
  height: 1.75rem;
  object-fit: contain;
}

.archive__status {
  color: var(--text-soft);
  font-size: 0.8rem;
  white-space: nowrap;
}

.archive__status--play {
  color: var(--highlight);
  font-family: var(--font-display);
  font-size: 0.95rem;
}

@media (max-width: 40rem) {
  .archive__day {
    grid-template-columns: 2.5rem 1fr auto;
  }

  .archive__date {
    display: none;
  }
}