/* Wizard Siege's page: the home screen's study on top, then the story's dark panels and the
   spellbook's parchment. Colors are the game's: the home screen (game/ui/title_screen.gd), the
   dialogue boxes (game/cutscene/dialogue_box.gd), the UI theme (game/ui/look.gd) and the
   element colors (data/elements.json). */

:root {
  color-scheme: dark;

  --ink: #120d0b;        /* the page: the study's darkest wood */
  --wood: #211b18;
  --panel: rgb(18 13 15 / 0.92);
  --rim: #c9a35a;        /* the dialogue box's gold rim */
  --rim-soft: rgb(201 163 90 / 0.45);
  --gold: #ffd27a;       /* a speaker's name, and hover and focus */
  --parchment: #f6e7c5;  /* the title */
  --words: #f4ead8;
  --text: #d8cbb2;
  --dim: #a8977a;
  --brass: #c8a269;
  --ember: #7a3a1a;
  --outline: #2a1810;
  --danger: #ff5a4a;

  /* The spellbook's pages. */
  --page: #ecdcb6;
  --page-ink: #3b2618;
  --page-dim: #6e5640;
  --page-red: #8f2a22;

  --fire: #ff7a2e;
  --water: #3c9cff;
  --ice: #9fe8ff;
  --lightning: #f6e65b;
  --shield: #d8d0ff;
  --dash: #b8f5d8;
  --mark: #ff5fcf;

  /* Each element darkened enough to read on parchment. */
  --fire-ink: #b8471a;
  --water-ink: #2a62b0;
  --ice-ink: #2b7f99;
  --lightning-ink: #8a7410;

  --pixel: "Pixelify Sans", ui-monospace, monospace;
  --book: "Alegreya", Georgia, serif;
}

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

html { background: var(--ink); }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--book);
  font-size: 1.1875rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

p { margin: 0; }

a {
  color: var(--words);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

a:hover { color: var(--gold); }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* ---------- The study ---------- */

.study {
  --h: clamp(460px, 88svh, 980px);
  --x: 0;
  --y: 0;
  position: relative;
  height: var(--h);
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}

/* Each plane covers the header with room to spare, so moving it never shows an edge. */
.plane {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(108%, calc(var(--h) * 2.1765 * 1.08));
  max-width: none;
  transform: translate(-50%, -50%) translate(calc(var(--x) * var(--depth) * -1px), calc(var(--y) * var(--depth) * -1px));
}

/* The game's travel at a 440-point screen is 5, 16 and 29 points; these are about half again. */
.landscape { --depth: 8; }
.interior { --depth: 24; }
.foreground { --depth: 44; }

/* A shade under the title, and the floor running on into the page. */
.study::before, .study::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}

.study::before {
  top: 0;
  height: 42%;
  background: linear-gradient(rgb(18 13 11 / 0.62), rgb(18 13 11 / 0));
}

.study::after {
  bottom: 0;
  height: 22%;
  background: linear-gradient(rgb(18 13 11 / 0), var(--ink));
}

.masthead {
  position: absolute;
  top: clamp(28px, 7%, 72px);
  left: 0;
  right: 0;
  z-index: 2;
  padding: 0 16px;
  text-align: center;
}

.masthead h1 {
  margin: 0;
  font: 700 clamp(44px, 8.4vw, 116px) / 1 var(--pixel);
  color: var(--parchment);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-shadow:
    -2px -2px 0 var(--outline), 2px -2px 0 var(--outline), -2px 2px 0 var(--outline), 2px 2px 0 var(--outline),
    0 0.07em 0 var(--ember), 0 0.1em 0 var(--outline), 0 0.14em 0.4em rgb(0 0 0 / 0.55);
}

.tagline {
  margin-top: 14px;
  font: 600 clamp(16px, 2vw, 24px) / 1.35 var(--pixel);
  color: var(--parchment);
  text-wrap: balance;
  text-shadow: -2px -2px 0 var(--outline), 2px -2px 0 var(--outline), -2px 2px 0 var(--outline), 2px 2px 0 var(--outline), 0 4px 12px rgb(0 0 0 / 0.6);
}

@media (prefers-reduced-motion: no-preference) {
  .plane { transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }

  /* Scrolling away, the far planes lag behind the near ones. */
  @supports (animation-timeline: view()) {
    .study { view-timeline: --study; }

    .plane {
      animation: drift linear both;
      animation-timeline: --study;
      animation-range: exit;
    }
  }
}

@keyframes drift { to { translate: 0 calc((52 - var(--depth)) * 4px); } }

.pitch {
  padding: 8px 16px 0;
  text-align: center;
}

.lede {
  max-width: 31em;
  margin: 0 auto;
  color: var(--words);
  font-size: 1.25rem;
  line-height: 1.5;
  text-wrap: balance;
}

@media (min-width: 900px) { .lede { font-size: 1.375rem; } }

.status {
  margin-top: 20px;
  font: 600 16px/1.5 var(--pixel);
  color: var(--gold);
  text-shadow: 2px 2px 0 var(--ember);
}

/* ---------- Screens ---------- */

main {
  padding: 0 16px clamp(80px, 10vw, 128px);
}

/* The screenshots are an iPhone held sideways, rimmed in the dialogue box's gold. */
.phone {
  overflow: hidden;
  border: clamp(5px, 1.1vw, 12px) solid #070505;
  border-radius: clamp(16px, 3.2vw, 40px);
  background: #070505;
  box-shadow: 0 0 0 2px var(--rim-soft), 0 24px 60px -20px rgb(0 0 0 / 0.85);
}

.phone img { width: 100%; aspect-ratio: 1440 / 660; }

/* A close-up of a screen, framed as the game frames its panels. */
.detail {
  overflow: hidden;
  border: 2px solid var(--rim);
  border-radius: 12px;
  box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.85);
}

.detail img { width: 100%; aspect-ratio: 600 / 360; }

figure { margin: 0; }

figcaption {
  margin-top: 14px;
  color: var(--dim);
  font-size: 1.0625rem;
  font-style: italic;
  line-height: 1.45;
}

.first-look {
  max-width: 1104px;
  margin: clamp(48px, 7vw, 80px) auto 0;
}

.first-look figcaption { text-align: center; }

/* ---------- Sections ---------- */

main > section {
  max-width: 1104px;
  margin: clamp(96px, 13vw, 160px) auto 0;
}

h2, h3, h4 {
  margin: 0;
  font-family: var(--pixel);
  color: var(--gold);
  text-wrap: balance;
}

h2 {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.25;
  text-shadow: 3px 3px 0 var(--ember);
}

@media (min-width: 640px) { h2 { font-size: 34px; } }
@media (min-width: 1000px) { h2 { font-size: 42px; } }

h3 {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
}

.eyebrow {
  margin-bottom: 10px;
  font: 600 13px/1.4 var(--pixel);
  color: var(--brass);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.copy p, .copy ul { max-width: 34em; }

h2 + p, h2 + .copy, .copy h2 + p { margin-top: 24px; }
h3 + p, h3 + ul { margin-top: 10px; }
p + p { margin-top: 1em; }

.elements, .tier, .reactions, .fusions, .triads, .strokes, .repair, .wizards, .cast, .chapters, .items, .cards, .beats {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- The prologue ---------- */

/* A reel that runs to the window's edges but starts in line with the page. */
.reel { margin: 40px calc(50% - 50vw) 0; }

.beats {
  --gutter: max(16px, calc(50vw - 552px));
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(82vw, 520px);
  column-gap: 24px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding: 4px var(--gutter) 18px;
  scrollbar-color: var(--brass) transparent;
}

.beats li { scroll-snap-align: start; }

.beats img {
  width: 100%;
  aspect-ratio: 836 / 470;
  border: 2px solid var(--rim-soft);
  border-radius: 10px;
}

.era {
  margin-top: 18px;
  font: 600 12px/1.4 var(--pixel);
  color: var(--brass);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.beats h3 {
  margin-top: 4px;
  color: var(--parchment);
}

.beats h3 + p {
  margin-top: 8px;
  font-size: 1.0625rem;
  line-height: 1.55;
}

.reel-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  max-width: 1104px;
  margin: 8px auto 0;
  padding: 0 16px;
}

.reel-buttons[hidden] { display: none; }

/* The home screen's buttons: dark wood, a brass rim, a heavier lip below. */
.reel-buttons button {
  display: grid;
  place-items: center;
  width: 48px;
  height: 44px;
  padding: 0;
  font: 600 26px/1 var(--pixel);
  color: var(--parchment);
  background: var(--wood);
  border: 2px solid var(--rim-soft);
  border-bottom-width: 4px;
  border-radius: 8px;
  cursor: pointer;
}

.reel-buttons button:hover { color: var(--gold); border-color: var(--rim); }
.reel-buttons button:active { border-bottom-width: 2px; transform: translateY(2px); }

/* ---------- Story mode ---------- */

.gallery {
  display: grid;
  gap: 40px 32px;
  margin-top: 56px;
}

@media (min-width: 900px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.walk {
  display: grid;
  gap: 40px;
  margin-top: 88px;
}

@media (min-width: 960px) {
  .walk { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: start; }
  .walk .copy { position: sticky; top: 48px; }
}

.pair { display: grid; gap: 40px; }

.cast-title, .chapters-title, .rivals-title { margin-top: 88px; }

/* Portraits as the dialogue boxes show them: square, on dark, under the gold rim. */
.cast {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}

@media (min-width: 600px) { .cast { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .cast { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cast li {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: center;
  column-gap: 16px;
  padding: 10px;
  background: var(--panel);
  border: 2px solid var(--rim-soft);
  border-radius: 12px;
  font-size: 1rem;
  line-height: 1.4;
}

.cast img {
  grid-row: span 2;
  width: 96px;
  height: 96px;
  border-radius: 8px;
  background: #1c1512;
}

.cast strong {
  align-self: end;
  font: 600 18px/1.3 var(--pixel);
  color: var(--gold);
}

.cast li { grid-template-rows: auto auto; }

.chapters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(153px, 1fr));
  gap: 32px 16px;
  margin-top: 28px;
  font: 600 16px/1.3 var(--pixel);
  color: var(--parchment);
  text-align: center;
}

/* Each chapter's title-page picture at its own pixel size. */
.chapters img {
  width: 153px;
  margin: 0 auto 12px;
  image-rendering: pixelated;
}

.chapters .number {
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
  color: var(--brass);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.chapters .number::before { content: "Chapter "; }

/* ---------- Two thumbs ---------- */

@media (min-width: 960px) {
  .thumbs { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: baseline; }
  .thumbs h2 + .copy { margin-top: 0; }
}

/* ---------- Glyphs ---------- */

/* A glyph is drawn as the spellbook draws it: the rune's own stroke inside a dark seal. */
.glyph {
  width: 48px;
  height: 48px;
  flex: none;
  overflow: visible;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--el) 50%, transparent));
}

.glyph .seal {
  fill: #1b1826;
  stroke: color-mix(in srgb, var(--el) 70%, transparent);
  stroke-width: 1.5;
}

.glyph :not(.seal) {
  fill: none;
  stroke: var(--el);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.glyph.target :not(.seal) { stroke-width: 1.8; }

/* Each rune traces itself as it scrolls up the screen, and again under the pointer. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .glyph { view-timeline: --glyph; }

    .glyph :not(.seal) {
      stroke-dasharray: 1;
      animation: trace linear both;
      animation-timeline: --glyph;
      animation-range: entry 100% cover 30%;
    }
  }

  :is(.rune, .fusions li, .triads li, .strokes li):hover .glyph :not(.seal) {
    stroke-dasharray: 1;
    animation: trace 0.6s ease-out both;
  }
}

@keyframes trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---------- The runebook ---------- */

/* A page of the spellbook: parchment inside a double red rule. */
.runebook {
  margin-top: 48px;
  padding: 10px 20px;
  color: var(--page-ink);
  background: radial-gradient(ellipse at 50% 40%, #f2e4c2, var(--page) 60%, #e0cb9c);
  border: 2px solid var(--rim);
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 7px transparent, inset 0 0 0 8px rgb(143 42 34 / 0.55),
    inset 0 0 0 11px transparent, inset 0 0 0 12px rgb(143 42 34 / 0.35),
    0 30px 70px -24px rgb(0 0 0 / 0.9);
}

.levels { display: none; }

.element {
  padding: 22px 0 24px;
  border-top: 2px dashed rgb(59 38 24 / 0.22);
}

.element:first-child { border-top: 0; }

.element h3 { color: var(--el-ink); }

.tier {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 12px;
  margin-top: 14px;
}

.rune {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.3;
}

.rune .name {
  margin-top: 8px;
  font: 600 17px/1.25 var(--pixel);
  color: var(--page-ink);
}

.rune .level {
  margin-top: 4px;
  color: var(--page-dim);
  font-size: 0.875rem;
}

.rune .note {
  margin-top: 6px;
  color: var(--page-dim);
  font-size: 0.9375rem;
  font-style: italic;
}

.status-effect {
  margin-top: 14px;
  font: 600 16px/1.4 var(--pixel);
  color: var(--el-ink);
}

.leaves { color: var(--page-dim); }

/* Wide enough for the runebook as a table: elements down, levels across. */
@media (min-width: 820px) {
  .runebook { padding: 16px 32px 6px; }

  .levels, .element {
    display: grid;
    grid-template-columns: 8.5rem repeat(3, minmax(0, 1fr)) 9.5rem;
    gap: 16px;
    align-items: center;
  }

  .levels {
    padding: 14px 0 12px;
    font: 600 16px/1.3 var(--pixel);
    color: var(--page-red);
    text-align: center;
  }

  .levels span:last-child { text-align: left; }

  .levels small {
    display: block;
    margin-top: 2px;
    font: italic 400 0.9375rem/1.3 var(--book);
    color: var(--page-dim);
  }

  .element:first-child { border-top: 2px dashed rgb(59 38 24 / 0.22); }

  .tier { grid-column: 2 / 5; gap: 16px; margin-top: 0; align-self: start; }

  /* The header row says these; screen readers still hear them. */
  .rune .level, .leaves {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .status-effect { margin-top: 0; }

  .runebook .glyph { width: 56px; height: 56px; }
}

/* ---------- Chains, fusions and triads ---------- */

.fusions {
  display: grid;
  gap: 16px;
  margin-top: 40px;
}

@media (min-width: 560px) { .fusions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .fusions { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.fusions li, .strokes li, .cards li {
  padding: 20px 20px 22px;
  background: var(--panel);
  border: 2px solid var(--rim-soft);
  border-bottom-width: 4px;
  border-radius: 12px;
}

.pair-glyphs { display: flex; align-items: center; gap: 10px; }

.plus { font: 600 22px/1 var(--pixel); color: var(--dim); }

.fusions h3 { margin-top: 16px; }

.fusions p, .strokes p, .cards p { font-size: 1.0625rem; line-height: 1.5; }

.recipe {
  display: block;
  color: var(--dim);
  font-style: italic;
}

.full {
  display: grid;
  gap: 40px;
  margin-top: 88px;
}

@media (min-width: 960px) {
  .full { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: start; }
  .full .copy { position: sticky; top: 48px; }
}

.triads {
  display: grid;
  gap: 12px;
}

@media (min-width: 600px) { .triads { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.triads li {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  column-gap: 8px;
  padding: 12px 14px;
  background: var(--panel);
  border: 2px solid var(--rim-soft);
  border-radius: 10px;
}

.triads .glyph { width: 40px; height: 40px; }

.times {
  margin-right: 6px;
  font: 600 14px/1 var(--pixel);
  color: var(--el);
}

.triads h4 { font-size: 17px; font-weight: 600; color: var(--parchment); }

.triads p { margin-top: 2px; font-size: 0.9375rem; line-height: 1.4; }

.trio {
  display: grid;
  gap: 40px 32px;
  margin-top: 72px;
}

@media (min-width: 900px) {
  .trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trio .shot:first-child { grid-column: 1 / -1; }
}

/* ---------- Shield, dash and target ---------- */

.strokes {
  display: grid;
  gap: 16px;
  margin-top: 40px;
}

@media (min-width: 900px) { .strokes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.strokes .glyph { width: 56px; height: 56px; }

.strokes h3 { margin-top: 16px; }

.hazards {
  display: grid;
  gap: 40px;
  margin-top: 72px;
}

@media (min-width: 960px) {
  .hazards { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: start; }
}

.hazards h3:first-child { color: var(--danger); }
.hazards p + h3 { margin-top: 32px; }

.reactions li {
  position: relative;
  padding-left: 28px;
}

.reactions li + li { margin-top: 8px; }

/* A pixel diamond for a bullet. */
.reactions li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.6em;
  width: 10px;
  height: 10px;
  background: var(--gold);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.book { margin-top: 72px; }

/* ---------- The siege ---------- */

.repair {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  max-width: 640px;
  margin-top: 48px;
  font: 500 15px/1.3 var(--pixel);
  color: var(--dim);
  text-align: center;
}

.repair img {
  width: min(100%, 128px);
  margin: 0 auto 10px;
  image-rendering: pixelated;
}

@media (min-width: 720px) { .repair img { width: 192px; } }

.wizards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 16px;
  margin-top: 28px;
  font: 500 17px/1.3 var(--pixel);
  color: var(--dim);
  text-align: center;
}

@media (min-width: 760px) { .wizards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.wizards strong {
  display: block;
  font-weight: 600;
  font-size: 20px;
  color: var(--robe);
  filter: brightness(1.25);
}

/* Each wizard channelling, drawing runes: four frames of 32 x 32 from the game's sheet. */
.sprite {
  --s: 4px;
  display: block;
  width: calc(32 * var(--s));
  height: calc(32 * var(--s));
  margin: 0 auto 8px;
  background: no-repeat 0 0 / calc(128 * var(--s)) calc(32 * var(--s));
  image-rendering: pixelated;
}

@media (min-width: 760px) { .wizards .sprite { --s: 5px; } }

@media (prefers-reduced-motion: no-preference) {
  .sprite { animation: channel 0.72s steps(4) infinite; }
  .wizards li:nth-child(2) .sprite { animation-delay: -0.18s; }
  .wizards li:nth-child(3) .sprite { animation-delay: -0.36s; }
  .wizards li:nth-child(4) .sprite { animation-delay: -0.54s; }
}

@keyframes channel { to { background-position: calc(-128 * var(--s)) 0; } }

.band { margin-top: 56px; }

.chests {
  display: grid;
  gap: 40px;
  margin-top: 88px;
}

@media (min-width: 960px) {
  .chests { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
}

.items { margin-top: 20px; }

.items li {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  column-gap: 14px;
  padding: 6px 0;
  line-height: 1.4;
}

.items img {
  grid-row: span 2;
  width: 48px;
  image-rendering: pixelated;
}

.items strong {
  font: 600 16px/1.3 var(--pixel);
  color: var(--parchment);
}

.items li { grid-template-rows: auto auto; font-size: 1.0625rem; }

/* ---------- The modes ---------- */

.cards {
  display: grid;
  gap: 16px;
  margin-top: 40px;
}

@media (min-width: 900px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.modes .shot { margin-top: 56px; }

/* ---------- The close ---------- */

.last {
  display: grid;
  gap: 32px;
  justify-items: center;
  text-align: center;
}

.icon {
  width: 256px;
  border-radius: 56px;
  image-rendering: pixelated;
  box-shadow: 0 0 0 2px var(--rim-soft), 0 0 80px -10px rgb(255 122 46 / 0.35);
}

.last .status { margin-top: 16px; font-size: 18px; }

@media (min-width: 760px) {
  .last { grid-template-columns: auto minmax(0, 1fr); gap: 56px; align-items: center; justify-items: start; text-align: left; }
}

/* ---------- Footer ---------- */

.footer {
  padding: 28px 16px 40px;
  border-top: 2px dashed var(--rim-soft);
  color: var(--dim);
  font-size: 1.0625rem;
  text-align: center;
}

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