/* instantplay.me — shared styles for the portal and the legal pages.
   Visual system: "Industry" (Claude Design project 4f5a5721) — Barlow Condensed set
   uppercase for every display line, Barlow for running text, square corners, 3px ink
   rules, hard offset shadows, and blueprint registration marks on the framed panels.

   Barlow and Barlow Condensed (both OFL) are self-hosted in fonts/ and subset to latin.
   Nothing loads from a third-party host — no Google Fonts, no CDN — which is what the
   privacy policy promises in so many words. */

@font-face {
  font-family: 'Barlow';
  src: url('fonts/barlow-latin-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('fonts/barlow-latin-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('fonts/barlow-condensed-latin-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --paper: #f2f2f3;
  --card: #fbfbfb;
  --ink: #16231d;
  --text: #1d1f20;
  --muted: #424244;
  --faint: #5d5d60;
  --gold: #f5c542;
  --blue: #416180;

  --zoo: #e8912b;
  --lama: #e35d7f;
  --rps: #5aa7dd;
  --sheep: #8cc63f;

  --display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --edge: 3px;
  --lift: 10px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 400 17px/1.55 var(--body);
  overflow-x: hidden;
}

a { color: inherit; }

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 0.96;
}

.shell {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 24px);
}

/* Screen-reader-only. The cards' names live inside the key art, so a printed heading
   would set every title twice — the accessible name still has to be in the markup. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Shared display atoms ---------- */

/* A label: condensed, uppercase, widely tracked. Every kicker, badge and button
   in the system is one of these. */
.label {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 1;
}

/* Framed panel with registration marks at the corners — the system's "wireframe
   object": square, transparent, hairline. */
.blueprint {
  position: relative;
  border: 2px solid var(--ink);
}
.blueprint > i {
  position: absolute;
  width: 11px; height: 11px;
  color: rgba(29, 31, 32, 0.55);
}
.blueprint > i::before,
.blueprint > i::after { content: ''; position: absolute; background: currentColor; }
.blueprint > i::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > i::after { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .tl { top: -6px; left: -6px; }
.blueprint > .tr { top: -6px; right: -6px; }
.blueprint > .bl { bottom: -6px; left: -6px; }
.blueprint > .br { bottom: -6px; right: -6px; }

/* ---------- Header, on every page ---------- */

.marquee {
  background: var(--ink);
  color: var(--paper);
  padding-top: env(safe-area-inset-top);
}

.marquee__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 22px;
  flex-wrap: wrap;
  padding: 16px 0;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font-family: var(--display);
  font-size: clamp(23px, 5.4vw, 28px);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
}
.wordmark__mark {
  display: block;
  width: 36px; height: 36px;
  flex: none;
  border: 2px solid var(--gold);
  border-radius: 10px;
  /* The logo PNG is a rounded square on white, so its corners carry white pixels.
     Clipping to the same radius hides them against the dark header. */
}
.wordmark__me { color: var(--gold); }

.marquee__meta {
  display: flex;
  align-items: center;
  gap: 8px 20px;
  flex-wrap: wrap;
}
.marquee__note {
  font-size: 13px;
  letter-spacing: 0.14em;
  color: #9fd6b4;
}
.marquee__link {
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--paper);
  text-decoration: none;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 2px;
}
.marquee__link:hover { color: var(--gold); }

/* Sprocket strip along the bottom edge of the header. */
.sprocket {
  height: 14px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 6px, transparent 6px 20px);
  opacity: 0.85;
}

/* ---------- Hero ---------- */

.hero {
  padding-block: clamp(28px, 5vw, 34px) 0;
  display: grid;
  gap: clamp(24px, 4vw, 32px);
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}

.hero__eyebrow {
  display: inline-block;
  background: var(--ink);
  color: var(--gold);
  padding: 6px 11px;
  font-size: 12px;
  letter-spacing: 0.18em;
  margin-bottom: 12px;
}

.hero h1 {
  font-size: clamp(38px, 8.4vw, 68px);
  line-height: 0.94;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
  text-wrap: balance;
}
/* The gold swipe sits behind one word and bleeds a little past it, the way a marker
   would. box-shadow rather than padding so the line height stays put. */
.hero h1 mark {
  background: var(--gold);
  color: inherit;
  box-shadow: 8px 0 0 var(--gold), -8px 0 0 var(--gold);
}

.hero p {
  margin: 0 0 22px;
  max-width: 52ch;
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.5;
  color: var(--muted);
}

.cta { display: flex; gap: 14px; flex-wrap: wrap; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.btn svg { width: 11px; height: 11px; flex: none; }

.btn--solid {
  border: none;
  background: var(--ink);
  color: var(--paper);
  padding: 15px 26px;
  box-shadow: 6px 6px 0 var(--gold);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.btn--solid:hover { transform: translate(-2px, -2px); box-shadow: 10px 10px 0 var(--gold); }
.btn--solid:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--gold); }

.btn--line {
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  padding: 13px 24px;
  transition: background 120ms ease, color 120ms ease;
}
.btn--line:hover { background: var(--ink); color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  .btn--solid, .btn--line { transition: none; }
  .btn--solid:hover { transform: none; box-shadow: 6px 6px 0 var(--gold); }
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.facts li {
  padding: 7px 12px;
  border: 2px solid rgba(29, 31, 32, 0.35);
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The facts panel. Every figure here is one we can stand behind — there is no live
   player feed on this site, so nothing in it counts anybody. */
.spec { padding: 18px; background: transparent; }
.spec__title {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--faint);
  margin-bottom: 14px;
}
.spec dl { display: grid; gap: 14px; margin: 0; }
.spec div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px dashed rgba(29, 31, 32, 0.2);
  padding-bottom: 10px;
}
.spec div:last-child { border-bottom: none; padding-bottom: 0; }
.spec dt { font-size: 14px; color: var(--muted); }
.spec dd {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 30px;
  line-height: 1;
}
.spec dd.is-accent { color: var(--blue); }

/* ---------- Ticker ---------- */

.ticker {
  margin: clamp(28px, 5vw, 34px) 0 0;
  background: var(--ink);
  color: var(--gold);
  overflow: hidden;
  padding: 9px 0;
  border-top: var(--edge) solid var(--gold);
  border-bottom: var(--edge) solid var(--gold);
}
.ticker__track {
  display: flex;
  width: 200%;
  animation: ticker 26s linear infinite;
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ticker__track > span {
  flex: 0 0 50%;
  display: flex;
  justify-content: space-around;
  gap: 34px;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; justify-content: center; }
}

/* ---------- Section headers ---------- */

.rule {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
}
.rule h2 {
  font-size: clamp(26px, 4vw, 30px);
  letter-spacing: 0.02em;
  margin: 0;
}
.rule span[aria-hidden] { flex: 1; height: 1px; background: rgba(29, 31, 32, 0.2); }
.rule .label { font-size: 13px; letter-spacing: 0.18em; color: var(--faint); }

/* ---------- The four games ---------- */

.grid {
  display: grid;
  gap: clamp(18px, 2.6vw, 24px);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.games { padding-top: clamp(28px, 5vw, 34px); }

.game {
  --tint: var(--gold);
  display: flex;
  flex-direction: column;
  background: var(--tint);
  border: var(--edge) solid var(--ink);
  box-shadow: var(--lift) var(--lift) 0 var(--ink);
  text-decoration: none;
  color: var(--ink);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.game:hover { transform: translate(-4px, -4px); box-shadow: 16px 16px 0 var(--ink); }
.game:active { transform: translate(4px, 4px); box-shadow: 4px 4px 0 var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .game { transition: none; }
  .game:hover { transform: none; box-shadow: var(--lift) var(--lift) 0 var(--ink); }
}

.game--zoo   { --tint: var(--zoo); }
.game--lama  { --tint: var(--lama); }
.game--rps   { --tint: var(--rps); }
.game--sheep { --tint: var(--sheep); }

.game__frame {
  position: relative;
  border-bottom: var(--edge) solid var(--ink);
}
.game__art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  background: var(--ink);
}
.game__tag,
.game__mode {
  position: absolute;
  top: 12px;
  font-size: 12px;
  padding: 6px 9px;
}
.game__tag { left: 12px; background: var(--ink); color: var(--gold); }
.game__mode { right: 12px; background: var(--paper); color: var(--ink); letter-spacing: 0.12em; }

.game__text {
  padding: 18px 20px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.game__hook {
  flex: 1;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
}
.game__go {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--ink);
  color: var(--paper);
  padding: 13px 24px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 120ms ease;
}
.game__go svg { width: 10px; height: 10px; }
.game svg { pointer-events: none; }
.game:hover .game__go { background: #000; }

/* ---------- Two ways to play ---------- */

.ways {
  display: grid;
  gap: clamp(18px, 3vw, 26px);
  grid-template-columns: 1fr;
  padding-top: clamp(44px, 7vw, 56px);
}
@media (min-width: 700px) {
  .ways { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}

.way { padding: 26px 24px; background: transparent; }
.way--dark { background: var(--ink); color: var(--paper); }
.way__num {
  font-family: var(--display);
  font-weight: 600;
  font-size: 46px;
  line-height: 1;
  color: var(--blue);
  margin-bottom: 6px;
}
.way--dark .way__num { color: var(--gold); }
.way h2 {
  font-size: 28px;
  letter-spacing: 0.06em;
  margin: 0 0 10px;
}
.way p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--muted); }
.way--dark p { color: #d4d4d7; }

/* ---------- About + FAQ ---------- */

.about {
  display: grid;
  gap: clamp(20px, 3vw, 44px);
  grid-template-columns: 1fr;
  padding-top: clamp(44px, 7vw, 56px);
  padding-bottom: clamp(48px, 8vw, 72px);
}
@media (min-width: 900px) {
  .about { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}

.about h2 {
  font-size: clamp(32px, 5vw, 58px);
  line-height: 0.94;
  margin: 0 0 14px;
  text-wrap: balance;
}
.about__flag { height: 6px; width: 88px; background: var(--gold); }
.about p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 16px;
  max-width: 62ch;
}
.about h3 {
  font-size: 26px;
  letter-spacing: 0.12em;
  margin: 30px 0 12px;
}

.qa-list { border-top: 2px solid var(--ink); }
.qa { border-bottom: 2px solid var(--ink); }

.qa > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 14px;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary:hover { background: rgba(22, 35, 29, 0.06); }
/* The +/− is one glyph rotated, so open and closed share a single element. */
.qa > summary::after {
  content: '+';
  font-size: 26px;
  line-height: 1;
  flex: none;
  transform: rotate(0deg);
  transition: transform 140ms ease;
}
.qa[open] > summary::after { content: '−'; }
@media (prefers-reduced-motion: reduce) {
  .qa > summary::after { transition: none; }
}

.qa__answer { padding: 0 14px 20px; }
.qa__answer p {
  margin: 0 0 12px;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
}
.qa__answer p:last-child { margin-bottom: 0; }
.qa__answer a { color: var(--blue); text-underline-offset: 3px; }

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

.foot {
  background: var(--ink);
  color: #b8bdb9;
  padding: 40px 0 max(34px, env(safe-area-inset-bottom));
  font-size: 14px;
  line-height: 1.6;
}
.foot__grid {
  display: grid;
  gap: clamp(24px, 4vw, 36px);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .foot__grid { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
}
.foot__mark {
  font-family: var(--display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 16px;
}
.foot nav { display: flex; flex-wrap: wrap; gap: 12px 22px; }
.foot nav a {
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  color: var(--paper);
  text-decoration: none;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 2px;
}
.foot nav a:hover { color: var(--gold); }
.foot__text { max-width: 70ch; }
.foot__text p { margin: 0 0 12px; }
.foot__text p:last-child { margin-bottom: 0; color: #8f948f; }
.foot__text a { color: var(--gold); text-underline-offset: 3px; }

/* ---------- Phones: get the games above the fold ----------
   On a phone the hero furniture pushed the first card to ~990px, so the games were
   never visible without scrolling. Everything dropped here is said somewhere else on
   the page: the eyebrow and the fact chips repeat the lede and the header note, the
   "pick a game" button scrolls to something now already on screen, and the facts panel
   repeats answers the FAQ gives. The ticker stays — it is thin and it names all four
   games. Nothing that is only said here is hidden. */
@media (max-width: 699px) {
  .marquee__note,
  .hero__eyebrow,
  .cta,
  .facts,
  .spec { display: none; }

  .marquee__bar { padding: 12px 0; }

  .hero { padding-block: 18px 0; gap: 0; }
  .hero h1 { font-size: clamp(29px, 8.2vw, 38px); margin-bottom: 10px; }
  .hero p { margin-bottom: 0; font-size: 16px; line-height: 1.45; }

  .ticker { margin-top: 18px; }
  .games { padding-top: 16px; }

  /* Keep the section heading for screen readers and the document outline, drop the
     rule and the counter that only decorate it. */
  .rule { margin-bottom: 0; }
  .rule > span { display: none; }
  .rule h2 {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Narrow phones: the wordmark and the link together measured 342px, so below 390px
     the link wrapped onto its own row and cost 32px of header height. Scaling both with
     the viewport keeps them on one row down to 320px. */
  @media (max-width: 389px) {
    .marquee__bar { gap: 12px; }
    .wordmark { font-size: clamp(18px, 5.1vw, 23px); }
    .marquee__link { font-size: clamp(11px, 3.1vw, 14px); }
  }

  /* Tighter cards, so the first one fits and the next one starts to show. */
  .grid { gap: 16px; }
  .game__text { padding: 14px 16px 16px; gap: 12px; }
  .game__hook { font-size: 15px; }
  .game__go { padding: 11px 20px; font-size: 16px; }
}

/* ---------- Legal pages ---------- */

.legal {
  padding-block: clamp(32px, 6vw, 56px) clamp(48px, 8vw, 72px);
}
.legal h1 {
  font-size: clamp(34px, 7vw, 58px);
  line-height: 0.94;
  margin: 0 0 14px;
}
.legal__flag { height: 6px; width: 88px; background: var(--gold); margin-bottom: 26px; }
.legal__lede {
  margin: 0 0 36px;
  color: var(--muted);
  max-width: 60ch;
  font-size: 18px;
  line-height: 1.55;
}
.legal__body { max-width: 68ch; }
.legal__body h2 {
  font-size: 26px;
  letter-spacing: 0.06em;
  margin: 42px 0 12px;
}
.legal__body h3 {
  font-size: 20px;
  letter-spacing: 0.08em;
  margin: 26px 0 8px;
}
.legal__body p, .legal__body ul { margin: 0 0 14px; color: var(--muted); }
.legal__body ul { padding-left: 22px; }
.legal__body li { margin-bottom: 6px; }
.legal__body address { font-style: normal; margin: 0 0 14px; color: var(--muted); }
.legal__body a { color: var(--blue); text-underline-offset: 3px; }

.legal__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
  padding: 14px 24px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 6px 6px 0 var(--gold);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.legal__back:hover { transform: translate(-2px, -2px); box-shadow: 10px 10px 0 var(--gold); }
.legal__back:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--gold); }
.legal__back svg { width: 11px; height: 11px; }
/* Privacy policy, section 5: the games' consent status and the withdraw button. The box stays
   hidden until the script has read the browser's storage, so no JavaScript means no dead button. */
.legal__consent { margin: 18px 0 18px; padding: 16px 18px 20px; border: 3px solid var(--ink); }
.legal__consent p { margin: 0 0 14px; color: var(--ink); }
.legal__consent p:last-child { margin-bottom: 0; }
.legal__consent .legal__back { margin-top: 0; border: 0; cursor: pointer; }
.legal__consent .legal__back[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .legal__back { transition: none; }
  .legal__back:hover { transform: none; box-shadow: 6px 6px 0 var(--gold); }
}

/* Portal campaign: the existing ink, gold and printed arcade language,
   with actual Slingzoo characters and arena art. Legal pages stay independent. */
.portal ::selection { background: var(--gold); color: var(--ink); }
.portal { scrollbar-color: var(--ink) var(--paper); }
.skip-link { position: fixed; z-index: 10; top: 12px; left: 12px; padding: 12px 20px; background: var(--gold); color: var(--ink); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.portal .hero { grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; padding-block: 58px 60px; }
.portal .hero h1 { font-size: clamp(50px, 6.6vw, 84px); line-height: .98; margin-bottom: 26px; }
.portal .hero p { max-width: 42ch; font-size: 19px; margin-bottom: 28px; }
.portal .facts { gap: 18px; margin-top: 28px; }
.portal .facts li { padding: 0; border: 0; font-family: var(--body); font-size: 13px; text-transform: none; letter-spacing: 0; }
.play-strip { background: var(--ink); color: var(--paper); padding-block: 17px; }
.play-strip .shell { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.play-strip strong { color: var(--gold); font-weight: 600; }
.play-strip .label { font-size: 13px; }
.portal .games { padding-top: 48px; scroll-margin-top: 24px; }
.portal .rule { margin-bottom: 28px; }
.portal .rule h2 { font-size: clamp(30px, 4vw, 42px); }
.portal .grid { gap: 34px; }
.portal .game__art { aspect-ratio: 3 / 2; }
.portal .game__text { gap: 20px; padding: 24px; }
.portal .game__hook { display: block; }
.portal .game__hook strong { display: block; font: 600 clamp(26px, 2.6vw, 32px)/1.05 var(--display); text-transform: uppercase; margin-bottom: 12px; }
.portal .game__hook > span { display: block; max-width: 46ch; }
.portal .ways { padding-top: 80px; scroll-margin-top: 24px; }
.portal .way { min-height: 210px; padding: 30px 150px 30px 28px; }
.portal .way h2 { font-size: 32px; letter-spacing: 0; }
.way__character { position: absolute; width: 140px; height: auto; right: 4px; bottom: 22px; }
.portal .about { padding-top: 80px; }
.portal .about h2 { font-size: clamp(44px, 5vw, 64px); }
.last-call { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding-block: 40px 76px; border-top: 3px solid var(--ink); }
.last-call h2 { font-size: clamp(44px, 6vw, 72px); margin: 0 0 18px; }
.last-call mark { background: var(--gold); color: var(--ink); }
.last-call p { margin: 0; color: var(--muted); }
@media (max-width: 1000px) and (min-width: 700px) {
  .portal .hero { gap: 28px; }
  .portal .hero h1 { font-size: 60px; }
  .portal .way { padding-right: 95px; }
  .way__character { width: 95px; right: 0; }
}
@media (max-width: 699px) {
  .portal .hero { grid-template-columns: 1fr; gap: 28px; padding-block: 28px 34px; }
  .portal .hero h1 { font-size: clamp(44px, 10vw, 66px); margin-bottom: 18px; }
  .portal .hero p { font-size: 16px; margin-bottom: 20px; max-width: 44ch; }
  .portal .cta { display: flex; gap: 12px; }
  .portal .cta .btn { font-size: 15px; letter-spacing: .07em; padding: 13px 15px; }
  .play-strip { padding-block: 13px; font-size: 14px; }
  .play-strip .label { display: none; }
  .portal .games { padding-top: 32px; }
  .portal .rule { margin-bottom: 20px; }
  .portal .rule h2 { position: static; width: auto; height: auto; clip-path: none; white-space: normal; overflow: visible; font-size: 32px; }
  .portal .grid { gap: 28px; }
  .portal .game__text { padding: 20px; gap: 16px; }
  .portal .ways { padding-top: 50px; gap: 24px; }
  .portal .way { padding: 24px 105px 24px 20px; }
  .way__character { width: 105px; right: 0; }
  .portal .way h2 { font-size: 28px; }
  .portal .about { padding-block: 50px; }
  .last-call { margin-inline: 18px; width: calc(100% - 36px); padding: 28px 0 48px; align-items: flex-start; flex-direction: column; }
}

/* Four directly playable windows into the actual game worlds. */
.hero-roster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; min-width: 0; padding: 4px; }
.roster-game { --roster-accent: var(--zoo); display: block; min-width: 0; background: var(--ink); color: var(--paper); text-decoration: none; border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--roster-accent); transition: transform 180ms ease-out; }
.roster-game:hover { transform: translateY(-5px); }
.roster-game:nth-child(1) { transform: rotate(-4deg); }
.roster-game:nth-child(2) { transform: translateY(14px) rotate(4deg); }
.roster-game:nth-child(3) { transform: rotate(-2deg); }
.roster-game:nth-child(4) { transform: translateY(14px) rotate(3deg); }
.roster-game:nth-child(1):hover { transform: translateY(-5px) rotate(-4deg); }
.roster-game:nth-child(2):hover { transform: translateY(9px) rotate(4deg); }
.roster-game:nth-child(3):hover { transform: translateY(-5px) rotate(-2deg); }
.roster-game:nth-child(4):hover { transform: translateY(9px) rotate(3deg); }
.roster-game--fruit { --roster-accent: var(--lama); }
.roster-game--brigade { --roster-accent: var(--rps); }
.roster-game--tank { --roster-accent: var(--sheep); }
.roster-game__scene { position: relative; height: 176px; overflow: hidden; background-size: cover; background-position: center; }
.roster-game--zoo .roster-game__scene { background-image: url('art/game-assets/arctic-arena.webp'); }
.roster-game--brigade .roster-game__scene { background-image: url('art/game-assets/courtyard.webp'); }
.roster-game--tank .roster-game__scene { background-image: url('art/game-assets/tank-sand.webp'); }
.roster-game__figure { position: absolute; width: auto; height: 88%; bottom: 0; left: 50%; transform: translateX(-50%); }
.roster-game--zoo .roster-game__figure { height: 78%; bottom: 10%; transform: translateX(-50%) rotate(-15deg); }
.roster-game--fruit .roster-game__scene { background-image: url('art/game-assets/fruit-valley.webp'); }
.roster-game__portrait { display: block; width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.roster-game__caption { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 12px; }
.roster-game__caption strong { font: 600 clamp(20px, 2.2vw, 28px)/1 var(--display); text-transform: uppercase; }
.roster-game svg { width: 10px; height: 10px; flex-shrink: 0; color: var(--roster-accent); pointer-events: none; }
.roster-game__scene, .roster-game__scene * { pointer-events: none; }
.tank-unit { position: absolute; width: 112px; height: 112px; }
.tank-unit img { position: absolute; inset: 0; width: 100%; height: 100%; }
.tank-unit--blue { left: 3%; bottom: 2%; transform: rotate(45deg); }
.tank-unit--red { right: 2%; top: 0; transform: rotate(225deg); }
.way__character--brigade { width: 115px; right: 20px; }
.about__llama { width: 200px; margin: 32px auto; border: 3px solid var(--ink); transform: rotate(-4deg); }
.about__llama img { display: block; width: 100%; height: 215px; object-fit: contain; padding: 10px; }
.about__llama figcaption { background: var(--gold); color: var(--ink); padding: 10px; font: 600 18px/1.1 var(--display); text-transform: uppercase; }
@media (max-width: 1000px) and (min-width: 700px) {
  .hero-roster { gap: 12px; }
  .roster-game__scene { height: 160px; }
  .roster-game__caption { padding: 10px 8px; }
  .roster-game__caption strong { font-size: 20px; }
  .tank-unit { width: 90px; height: 90px; }
  .way__character--brigade { width: 80px; right: 7px; }
}
@media (max-width: 699px) {
  .hero-roster { gap: 14px; padding: 2px 5px 14px; }
  .roster-game__scene { height: 125px; }
  .roster-game__caption { padding: 10px 8px; }
  .roster-game__caption strong { font-size: clamp(18px, 5vw, 24px); }
  .tank-unit { width: 82px; height: 82px; }
  .way__character--brigade { width: 90px; right: 7px; }
  .about__llama { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .roster-game { transition: none; }
}

@media (min-width: 900px) {
  .about__intro { display: grid; grid-template-rows: auto auto 1fr; }
  .about__intro .about__llama { align-self: center; }
}