/* Heroes of Idleville Reborn: the road from Idleville's Town Gate to the Root Throne and home
   again (REB-104). The game's own art at whole-number scales, its fonts, its colours. */

@font-face { font-family: "Cinzel"; src: url("fonts/Cinzel.ttf") format("truetype"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("fonts/Alegreya.ttf") format("truetype"); font-weight: 400 900; font-display: swap; }

:root {
  --ink: #0a080d;
  --gold: #e0b85c;
  --gold-hi: #ffcd75;
  --cream: #e8dcc8;
  --light: #fff4dc;
  --muted: #cbbfac;
  --plum: #5d275d;
  --leaf: #a7f070;
  --red: #b13e53;
  /* The ground is drawn 2x, as the game draws it on a 1280 window; heroes and foes bigger. */
  --ground: 2;
  --road: 0px;
  --outline: -3px 0 var(--ink), 3px 0 var(--ink), 0 -3px var(--ink), 0 3px var(--ink),
    -2px -2px var(--ink), 2px -2px var(--ink), -2px 2px var(--ink), 2px 2px var(--ink), 3px 5px var(--ink);
  --outline-thin: -2px 0 var(--ink), 2px 0 var(--ink), 0 -2px var(--ink), 0 2px var(--ink), 1px 3px var(--ink);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; color: var(--cream); font: 1.2rem/1.6 "Alegreya", Georgia, serif; }
img, .sprite, .diorama, .button, .stances button, .deco, .banner { image-rendering: pixelated; }
a { color: var(--gold-hi); text-underline-offset: .2em; }
::selection { background: var(--gold-hi); color: var(--ink); }
:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 4px; }
.sprite { display: block; background-repeat: no-repeat; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- Places: each laid with its own ground, darkened to atmosphere, lit in its own colour. ---- */
.place {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(4rem, 10vh, 7rem) 1.25rem clamp(4rem, 10vh, 7rem) calc(1.25rem + var(--road));
}
.place::before, .place::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.place::before {
  z-index: -2;
  background: var(--tile) 0 0 / calc(var(--tile-w) * var(--ground)) repeat;
  filter: saturate(var(--sat, .6)) brightness(var(--dim, .45));
}
.place::after {
  z-index: -1;
  background:
    radial-gradient(ellipse 75% 60% at var(--glow-at, 50% 30%), var(--glow), transparent 72%),
    linear-gradient(180deg, var(--ink) 0, transparent 16%, transparent 80%, var(--ink) 100%);
}
.gate { --tile: url("sprites/ground/grass.png"); --tile-w: 128px; --glow: rgb(255 205 117 / .30); --hue: #ffcd75; }
.town { --tile: url("sprites/ground/cobbles.png"); --tile-w: 240px; --glow: rgb(239 125 87 / .30); --hue: #ffcd75; --sat: .35; --dim: .38; --glow-at: 30% 55%; }
.meadow { --tile: url("sprites/ground/grass.png"); --tile-w: 128px; --glow: rgb(167 240 112 / .26); --hue: #a7f070; --sat: .8; --dim: .5; --glow-at: 25% 15%; }
.lagoon { --tile: url("sprites/ground/water.png"); --tile-w: 256px; --glow: rgb(115 239 247 / .24); --hue: #73eff7; --sat: .5; --dim: .4; --glow-at: 80% 25%; }
.fields { --tile: url("sprites/ground/tilled.png"); --tile-w: 128px; --glow: rgb(255 170 90 / .30); --hue: #ffcd75; --dim: .48; }
.throne { --tile: url("sprites/ground/dirt.png"); --tile-w: 128px; --glow: rgb(177 62 83 / .55); --hue: #ff8a7a; --sat: .5; --dim: .36; --glow-at: 50% 22%; }
.home { --tile: url("sprites/ground/grass.png"); --tile-w: 128px; --glow: rgb(239 125 87 / .32); --hue: #ffcd75; --sat: .5; --dim: .4; }

/* Called out as the game calls a place out when you walk in: huge, outlined, its line beneath. */
.arrive { position: relative; max-width: 72rem; margin: 0 auto 3rem; }
.arrive h2 {
  margin: 0;
  font: 900 clamp(3rem, 8.5vw, 8rem)/.92 "Cinzel", serif;
  letter-spacing: -.015em;
  color: var(--light);
  text-shadow: var(--outline), 0 12px 0 rgb(10 8 13 / .55);
  text-wrap: balance;
}
.arrive p {
  margin: 1.25rem 0 0; max-width: 38rem;
  font: italic 700 clamp(1.3rem, 2.4vw, 1.9rem)/1.3 "Alegreya", serif;
  color: var(--hue); text-shadow: var(--outline);
}
.foe { --scale: 6; filter: drop-shadow(0 6px 0 rgb(10 8 13 / .55)); }

/* A real frame of the game, big and set into the world rather than boxed. */
.frame { position: relative; max-width: 1400px; margin: 0 auto; }
.frame img {
  display: block; width: 100%; height: auto; image-rendering: auto;
  box-shadow: 0 0 0 6px var(--ink), 0 40px 90px rgb(0 0 0 / .7);
}
.frame.bleed { max-width: none; margin-inline: -1.25rem; }
.frame.bleed img {
  box-shadow: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
}
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 1rem 3rem; max-width: 64rem; margin: 3rem auto 0; }
.story h3 { margin: 0; font: 900 clamp(2rem, 4vw, 3.4rem)/1.02 "Cinzel", serif; color: var(--gold-hi); text-shadow: var(--outline-thin); }
.story p { margin: 0; font-size: 1.3rem; }
.story ul { margin: 0; padding-left: 1.2rem; font-size: 1.25rem; }
.story li { margin-bottom: .6rem; }
.story li::marker { color: var(--hue); }
.deco { position: absolute; z-index: 1; pointer-events: none; filter: brightness(.8) drop-shadow(0 8px 0 rgb(10 8 13 / .5)); }

/* ---- The Town Gate: the title and your hero in the morning light. ---- */
.gate { min-height: 100svh; display: grid; align-items: center; padding-block: 4rem; --scene-x: 80%; }
.gate::after {
  background:
    radial-gradient(ellipse 45% 60% at var(--scene-x) 55%, rgb(255 205 117 / .26), transparent 75%),
    linear-gradient(90deg, rgb(10 8 13 / .94) 0, rgb(10 8 13 / .78) 34%, rgb(10 8 13 / .2) 56%, transparent 66%),
    linear-gradient(180deg, transparent 72%, var(--ink) 100%);
}
.opening { position: relative; z-index: 2; max-width: 34rem; margin-left: clamp(0rem, 3vw, 3rem); }
.logo { margin: 0; line-height: 1; }
.logo-top {
  display: block;
  font: 700 clamp(1.35rem, 2.6vw, 2.25rem)/1.1 "Cinzel", serif;
  letter-spacing: .03em;
  color: var(--light);
  text-shadow: var(--outline);
}
.logo-main {
  display: block;
  margin: -.02em 0 0 -.05em;
  font: 900 clamp(4.6rem, 10vw, 10rem)/.92 "Cinzel", serif;
  letter-spacing: -.02em;
  color: var(--gold-hi);
  text-shadow:
    -5px 0 var(--ink), 5px 0 var(--ink), 0 -5px var(--ink), 0 5px var(--ink),
    -4px -4px var(--ink), 4px -4px var(--ink), -4px 4px var(--ink), 4px 4px var(--ink),
    0 11px 0 var(--plum), 4px 13px 0 var(--ink), -4px 13px 0 var(--ink), 0 16px 0 var(--ink);
}
.tagline { margin: 1.75rem 0 0; font: italic 700 clamp(1.4rem, 2.4vw, 1.9rem)/1.25 "Alegreya", serif; color: var(--light); text-shadow: var(--outline); }
.pitch { margin: .9rem 0 0; font-size: 1.2rem; text-shadow: var(--outline-thin); }
.get-row { margin-top: 1.75rem; }
.note { margin: .75rem 0 0; color: var(--muted); font-size: 1.02rem; text-shadow: var(--outline-thin); }

.scene { position: absolute; inset: 0; z-index: 1; }
.gate .scene { cursor: pointer; outline-offset: -10px; }
.diorama { position: absolute; left: 0; top: 0; width: 256px; height: 150px; transform-origin: 0 0; --scale: 1; }
.diorama .lit {
  position: absolute; left: -48px; top: -24px; width: 352px; height: 214px;
  background: url("sprites/ground/grass.png") 0 0 / 128px repeat;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 40%, transparent 100%);
}
.diorama .trail {
  position: absolute; left: 104px; top: 56px; width: 48px; height: 120px;
  background: url("sprites/ground/path.png") 0 0 / 120px repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
  mask-image: linear-gradient(180deg, #000 60%, transparent);
}
.diorama .prop, .diorama .hero, .diorama .foe, .diorama .puff, .diorama .pool { position: absolute; left: 0; top: 0; }
.diorama .foe { --scale: 1; filter: none; }
.diorama .p0 { left: 6px; top: 4px; z-index: 60; }
.diorama .p1 { left: 54px; top: 14px; z-index: 67; }
.diorama .p2 { left: 82px; top: 2px; z-index: 64; }
.diorama .p3 { left: 178px; top: 12px; z-index: 65; }
.diorama .p4 { left: 206px; top: 2px; z-index: 58; }
.diorama .p5 { left: 160px; top: 74px; z-index: 100; }
.diorama .p6 { left: 30px; top: 84px; z-index: 140; }
.diorama .p7 { left: 186px; top: 94px; z-index: 150; }
/* Home at dusk: everyone you beat, lined up by the road. */
.diorama .q4 { left: 160px; top: 26px; z-index: 78; }
.diorama .q1 { left: 198px; top: 64px; z-index: 102; }
.diorama .q3 { left: 146px; top: 84px; z-index: 122; }
.diorama .q2 { left: 196px; top: 100px; z-index: 138; }
.diorama .q0 { left: 62px; top: 90px; z-index: 128; }
.diorama .pool {
  width: 40px; height: 14px; z-index: 18;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgb(255 230 160 / .45), transparent 70%);
}
.diorama .puff { z-index: 19; }
.diorama .puff[hidden] { display: none; }
.scene-hint {
  position: absolute; left: var(--scene-x); bottom: 1.75rem; transform: translateX(-50%); z-index: 3;
  margin: 0; width: max-content; max-width: 90%;
  font: italic 700 1.05rem "Alegreya", serif; color: var(--light); text-shadow: var(--outline);
}
.scene-hint .coarse { display: none; }
@media (pointer: coarse) { .scene-hint .fine { display: none; } .scene-hint .coarse { display: inline; } }

/* ---- Idleville's square: the hero you pick fights in the lamplight. ---- */
.showcase {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  grid-template-areas: "spot dossier" "roster roster";
  gap: 1rem 3rem; align-items: center; max-width: 72rem; margin: 0 auto;
}
.spotlight {
  grid-area: spot; display: grid; place-items: end center; min-height: 27rem;
  background: radial-gradient(ellipse 40% 9% at 50% 92%, rgb(10 8 13 / .7), transparent 70%),
    radial-gradient(ellipse 50% 60% at 50% 62%, rgb(255 205 117 / .26), transparent 70%);
}
.star { --scale: 6; }
@media (min-width: 1100px) { .showcase .star { --scale: 8; } }
.roster { grid-area: roster; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 0 .25rem; }
.roster button {
  display: grid; justify-items: center; padding: 0 0 .25rem; border: 0; background: none; cursor: pointer;
  color: var(--cream); font: 700 .9rem "Cinzel", serif; text-shadow: var(--outline-thin);
}
.roster .sprite { --scale: 3; }
.roster button:hover { color: var(--light); }
.roster button[aria-checked="true"] { color: var(--gold-hi); }
.roster button[aria-checked="true"] .sprite {
  filter: drop-shadow(2px 0 0 var(--gold-hi)) drop-shadow(-2px 0 0 var(--gold-hi)) drop-shadow(0 2px 0 var(--gold-hi)) drop-shadow(0 -2px 0 var(--gold-hi));
}
.dossier { grid-area: dossier; min-height: 25rem; }
.hero-name { margin: 0; font: 900 clamp(3rem, 7vw, 6.5rem)/.95 "Cinzel", serif; color: var(--gold-hi); text-shadow: var(--outline); }
.hero-title { margin: .5rem 0 0; font: italic 700 1.5rem/1.2 "Alegreya", serif; color: var(--light); }
.hero-role { margin: .4rem 0 0; color: var(--leaf); font-weight: 700; }
.hero-blurb { margin: 1rem 0 0; max-width: 32rem; font-size: 1.3rem; }
.stance-label { margin: 1.25rem 0 .5rem; color: var(--muted); font-style: italic; }
.stances { display: flex; flex-wrap: wrap; gap: .6rem; }
.stances button {
  padding: .3rem .8rem .4rem;
  border: 12px solid transparent;
  border-image: url("ui/card.png") 6 fill / 12px stretch;
  background: none; color: var(--cream); cursor: pointer;
  font: 700 1rem "Cinzel", serif;
}
.stances button:hover { color: var(--light); }
.stances button[aria-pressed="true"] { color: #1a1c2c; border-image: url("ui/button_primary_normal.png") 3 3 5 3 fill / 6px 6px 10px 6px stretch; }

/* ---- Dewdrop Meadow: the frame is the ground; the geese are already on their way. ---- */
.meadow .arrive { display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: 2rem; }
.meadow .arrive h2, .meadow .arrive p { grid-column: 1; }
.gaggle { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: flex-end; justify-content: flex-end; }
.gaggle .foe + .foe { margin-left: -4rem; }
.gaggle .foe:nth-child(2) { margin-bottom: 3rem; }
.gaggle .foe:nth-child(3) { margin-bottom: 1rem; --scale: 5; }
.meadow .story { margin-left: auto; margin-right: max(0px, calc((100% - 72rem) / 2)); max-width: 52rem; }

/* ---- The Lazy Lagoon: the toad lounges on its own name; the frame drifts right. ---- */
.shore {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
  grid-template-areas: "head frame" "story frame"; gap: 2rem 3rem; align-items: start; max-width: 84rem; margin: 0 auto;
}
.shore .arrive { grid-area: head; margin: 0; }
.shore .arrive h2 { font-size: clamp(3rem, 6.5vw, 6.4rem); }
.shore .frame { grid-area: frame; align-self: center; }
.shore .story { grid-area: story; display: block; margin: 0; }
.shore .story h3 { margin-bottom: 1rem; }
.sitter { margin: 0 0 -1.8rem -1rem; }
.reeds { --s: 6; width: calc(48px * var(--s)); height: auto; right: -2rem; bottom: -1.5rem; }

/* ---- Turnip Fields: the name stands in a foe's red lane, the pumpkin about to roll. ---- */
.lane {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 2rem;
  margin: 0 calc(-1.25rem) 4rem calc(-1.25rem - var(--road)); padding: 2.5rem 1.25rem 2.5rem calc(1.25rem + var(--road));
  background: linear-gradient(90deg, rgb(177 62 83 / .18), rgb(177 62 83 / .42) 70%, rgb(177 62 83 / .6));
  border-block: 4px solid rgb(255 110 127 / .75);
  box-shadow: inset 0 0 0 2px rgb(10 8 13 / .5);
}
.lane .arrive { margin: 0; text-align: center; }
.lane .arrive p { margin-inline: auto; }
.roller { margin-left: 1rem; }
.haystack { --s: 5; width: calc(48px * var(--s)); height: auto; right: 1rem; bottom: 2rem; }

/* ---- The Root Throne: the King looms over his own name. ---- */
.court { display: grid; grid-template-columns: auto 1fr auto; justify-items: center; align-items: end; text-align: center; margin-bottom: 0; }
.court h2 { grid-column: 2; grid-row: 1; align-self: start; margin-top: 1rem; z-index: 0; color: #ffd9cf; }
.court .boss { grid-column: 2; grid-row: 1; z-index: 1; --scale: 10; margin-top: 3.5rem; margin-bottom: -5rem; }
.court .banner { grid-row: 1; width: calc(48px * 4); height: auto; filter: brightness(.85) drop-shadow(0 8px 0 rgb(10 8 13 / .5)); }
.court p { grid-column: 1 / -1; margin: 0 auto 2.5rem; position: relative; z-index: 2; }
.throne .frame { z-index: 0; }

/* ---- Home at dusk: the gate again, your hero walking home, the download. ---- */
.home { min-height: 100svh; display: grid; align-items: center; --scene-x: 62%; }
.home::after {
  background:
    radial-gradient(ellipse 40% 45% at var(--scene-x) 30%, rgb(255 150 90 / .28), transparent 75%),
    linear-gradient(180deg, rgb(93 39 93 / .7), rgb(177 62 83 / .22) 55%, var(--ink)),
    linear-gradient(90deg, rgb(10 8 13 / .92) 0, rgb(10 8 13 / .7) 34%, transparent 58%);
}
.dusk .diorama { filter: sepia(.45) hue-rotate(-18deg) saturate(1.2) brightness(.72); }
.farewell { position: relative; z-index: 2; max-width: 34rem; margin-left: clamp(0rem, 3vw, 3rem); }
.farewell h2 { margin: 0; font: 900 clamp(3.4rem, 8vw, 7rem)/.92 "Cinzel", serif; color: var(--gold-hi); text-shadow: var(--outline), 0 12px 0 var(--plum); }
.farewell .tagline { margin: 1.25rem 0 1rem; }
.farewell > p:not(.tagline):not(.note) { text-shadow: var(--outline-thin); }
.farewell .buttons { margin-top: 1.25rem; }
.buttons { display: grid; justify-content: start; gap: .75rem; }
.buttons .button { text-align: center; }

.button {
  display: inline-block;
  padding: .6rem 1.5rem .8rem;
  border: 10px solid transparent;
  border-image: url("ui/button_primary_normal.png") 3 3 5 3 fill / 6px 6px 10px 6px stretch;
  color: #1a1c2c; text-decoration: none;
  font: 700 clamp(1rem, 3.8vw, 1.2rem) "Cinzel", serif;
}
.button:hover { border-image-source: url("ui/button_primary_hover.png"); }
.button:active { border-image-source: url("ui/button_primary_pressed.png"); }

footer { padding: 2rem 1.25rem 3rem calc(1.25rem + var(--road)); text-align: center; color: var(--muted); font-size: 1rem; }

/* ---- Arriving: the place's name settles in and its foes step up, once, as you get there. ---- */
@media (prefers-reduced-motion: no-preference) {
  .js .arrive h2, .js .arrive p { transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1); }
  .js .arrive .foe { transition: opacity .5s steps(5, end), transform .5s steps(5, end); }
  .js .gaggle .foe:nth-child(2) { transition-delay: .12s; }
  .js .gaggle .foe:nth-child(3) { transition-delay: .24s; }
  .js .place:not(.here) .arrive h2 { opacity: 0; transform: translateY(.3em); }
  .js .place:not(.here) .arrive p { opacity: 0; transform: translateY(.6em); }
  .js .place:not(.here) .arrive .foe { opacity: 0; transform: translateX(120px); }
  .js .place:not(.here) .court .boss { transform: translateY(-80px); }
}

/* ---- The road beside the page on wide screens: the stops, your hero, the fog ahead. ---- */
.road { display: none; }
@media (min-width: 1300px) {
  :root { --road: 13rem; }
  .road { display: block; position: fixed; z-index: 3; left: 1.25rem; top: 14vh; bottom: 14vh; width: 11.5rem; }
  .road::before {
    content: ""; position: absolute; left: 26px; top: 0; bottom: 0; width: 12px;
    background: url("sprites/ground/path.png") 0 0 / 240px repeat;
    border: 3px solid var(--ink);
  }
  .road ol { margin: 0; padding: 0; list-style: none; }
  .road li { position: absolute; left: 0; top: var(--at, 0); transform: translateY(-50%); }
  .road a {
    display: flex; align-items: center; gap: .7rem; white-space: nowrap;
    color: var(--light); text-decoration: none; font: 700 .9rem/1.2 "Cinzel", serif; text-shadow: var(--outline);
  }
  .road a::before { content: ""; flex: none; width: 18px; height: 18px; margin-left: 23px; border: 3px solid var(--ink); background: var(--gold); }
  .road li.ahead a { color: #b3a8bd; }
  .road li.ahead a::before { background: #3a3242; }
  .road a[aria-current="location"] { color: var(--gold-hi); }
  .road a:hover { color: var(--gold-hi); }
  .road .walker { position: absolute; z-index: 1; left: 0; top: 0; pointer-events: none; --scale: 2; }
}

/* ---- Narrow screens. ---- */
@media (max-width: 1100px) {
  .shore { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "frame" "story"; }
}
@media (max-width: 960px) {
  .showcase { grid-template-columns: minmax(0, 1fr); grid-template-areas: "spot" "roster" "dossier"; }
  .spotlight { min-height: 17rem; }
  .dossier { min-height: 0; }
  .story { grid-template-columns: minmax(0, 1fr); }
  .meadow .arrive { grid-template-columns: minmax(0, 1fr); }
  .gaggle { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-top: 1.5rem; }
  .court .boss { --scale: 6; margin-bottom: -2rem; }
  .court .banner { width: calc(48px * 2); }
}
@media (max-width: 760px) {
  /* The title, then your hero at the gate, then the pitch and the download. */
  .gate { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 3rem 1.25rem 3rem; --scene-x: 50%; }
  .gate::after {
    background: radial-gradient(ellipse 80% 30% at 50% 45%, rgb(255 205 117 / .26), transparent 75%),
      linear-gradient(180deg, rgb(10 8 13 / .85) 0, rgb(10 8 13 / .4) 22%, transparent 40%, transparent 75%, var(--ink) 100%);
  }
  .gate .opening { display: contents; }
  .logo { order: 1; }
  .gate .tagline { order: 2; margin-top: 1rem; }
  .gate .scene { order: 3; position: relative; inset: auto; height: 27rem; margin: .5rem -1.25rem 0; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 8%, #000 94%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 8%, #000 94%, transparent); }
  .scene-hint { bottom: 2.25rem; font-size: .95rem; }
  .pitch { order: 4; margin-top: 1rem; }
  .get-row { order: 5; margin-top: 1.5rem; }
  .star { --scale: 4; }
  .foe { --scale: 4; }
  .gaggle .foe:nth-child(3) { --scale: 3; }
  .roster { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 -1.25rem; padding: 0 1.25rem .5rem; scroll-snap-type: x mandatory; }
  .roster button { flex: none; scroll-snap-align: center; }
  .roster .sprite { --scale: 2; }
  /* Frames are cropped to the action on a phone, not shrunk to a stamp. */
  .frame img { aspect-ratio: 1 / 1; object-fit: cover; object-position: var(--focus, 50% 50%); }
  .f-meadow { --focus: 46% 50%; }
  .f-lagoon { --focus: 40% 50%; }
  .f-fields { --focus: 62% 55%; }
  .f-throne { --focus: 50% 45%; }
  .lane { flex-wrap: wrap; gap: .5rem 1rem; }
  .lane .foe { --scale: 3; }
  .court { grid-template-columns: minmax(0, 1fr); }
  .court h2, .court .boss { grid-column: 1; }
  .court .banner { display: none; }
  .lane .arrive { order: -1; flex-basis: 100%; }
  .reeds, .haystack { --s: 3; }
  .home { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding-bottom: 3rem; --scene-x: 50%; }
  .home::after { background: linear-gradient(180deg, rgb(93 39 93 / .55), rgb(239 125 87 / .18) 50%, var(--ink)); }
  .home .scene { position: relative; inset: auto; order: 2; height: 24rem; margin: 1.5rem -1.25rem 0; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent); }
  .farewell { order: 1; margin: 0; }
}