/* ============================================================
   Arrow Loop Mania — landing page styles

   Layout idea: the site is shaped like the game's own interface.
   Navigation lives in a fixed HUD column on the left (a bottom tab
   bar on phones), and the content is set like a printed rulebook —
   hairline rules, mono numbering, almost no drop shadows.
   Everything is namespaced with .alm / alm- so this template cannot
   affect the other app sites in the repository.
   ============================================================ */

:root {
  /* Paper & ink */
  --alm-paper: #F4F3FB;
  --alm-panel: #FFFFFF;
  --alm-ink: #14173A;
  --alm-ink-2: #464B77;
  --alm-ink-3: #767BA4;
  --alm-line: #DCD9EE;
  --alm-line-2: #EDEBF8;

  /* Accents pulled from the game UI */
  --alm-violet: #6C4BF6;
  --alm-violet-soft: #ECE7FF;
  --alm-mint: #1FA968;
  --alm-mint-soft: #E2F6EC;
  --alm-sun: #FFC03C;

  --alm-hud: 218px;
  --alm-r: 10px;
  --alm-t: 200ms cubic-bezier(.4, 0, .2, 1);
  --alm-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }

body.alm {
  margin: 0;
  background: var(--alm-paper);
  color: var(--alm-ink);
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.66;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.015em;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

.alm-i {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.alm-i--fill { fill: currentColor; stroke: none; }

:where(a, button, summary):focus-visible {
  outline: 2.5px solid var(--alm-violet);
  outline-offset: 3px;
  border-radius: 4px;
}

.alm-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 120;
  padding: 10px 18px;
  background: var(--alm-ink);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.alm-skip:focus { left: 12px; top: 12px; }

/* Mono label used for every section number and HUD read-out */
.alm-tag {
  font-family: var(--alm-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--alm-violet);
}

/* ---------- Graph paper background ---------- */
.alm-paper {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(20, 23, 58, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20, 23, 58, .045) 1px, transparent 1px);
  background-size: 30px 30px;
}
.alm-paper__tint {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .5;
}
.alm-paper__tint--a { width: 38vw; height: 38vw; right: -6vw; top: -8vw; background: #D6C9FF; }
.alm-paper__tint--b { width: 32vw; height: 32vw; left: 10vw; bottom: -12vw; background: #C7F1DC; }
.alm-paper__route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgba(20, 23, 58, .05);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Buttons ---------- */
.alm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: var(--alm-r);
  padding: 12px 18px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--alm-t), color var(--alm-t), border-color var(--alm-t);
}
.alm-btn--sm { padding: 9px 14px; font-size: 14.5px; }
.alm-btn--full { width: 100%; }
.alm-btn--ink { background: var(--alm-ink); color: #fff; }
.alm-btn--ink:hover { background: var(--alm-violet); }
.alm-btn--mint { background: var(--alm-mint-soft); color: #14764A; }
.alm-btn--mint:hover { background: #cff0de; }
.alm-btn--line { background: transparent; color: var(--alm-ink); border: 1.5px solid var(--alm-line); }
.alm-btn--line:hover { border-color: var(--alm-ink); background: #fff; }

/* Store buttons: squared off, outlined — not the usual pill */
.alm-store {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 10px 20px 10px 16px;
  border: 1.5px solid var(--alm-ink);
  border-radius: var(--alm-r);
  background: var(--alm-ink);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--alm-t), color var(--alm-t), border-color var(--alm-t);
}
.alm-store .alm-i { width: 24px; height: 24px; }
.alm-store span { display: flex; flex-direction: column; line-height: 1.15; }
.alm-store small { font-family: var(--alm-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.alm-store strong { font-family: 'Fredoka', sans-serif; font-size: 17px; font-weight: 600; }
.alm-store:hover { background: var(--alm-violet); border-color: var(--alm-violet); }
.alm-store--alt { background: transparent; color: var(--alm-ink); }
.alm-store--alt:hover { background: var(--alm-ink); color: #fff; border-color: var(--alm-ink); }

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

/* ---------- HUD column (desktop) ---------- */
.alm-hud {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--alm-hud);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 22px 18px;
  background: rgba(255, 255, 255, .78);
  border-right: 1.5px solid var(--alm-line);
  backdrop-filter: blur(10px);
}
.alm-hud__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.alm-hud__brand img { border-radius: 11px; }
.alm-hud__brand span { display: flex; flex-direction: column; line-height: 1.08; }
.alm-hud__brand b { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 15.5px; }
.alm-hud__brand i {
  font-style: normal;
  font-family: var(--alm-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--alm-violet);
}

.alm-hud__nav { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.alm-hud__nav a {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 10px 11px;
  border-radius: 8px;
  color: var(--alm-ink-2);
  text-decoration: none;
  transition: background-color var(--alm-t), color var(--alm-t);
}
.alm-hud__nav em { font-style: normal; font-size: 15px; font-weight: 600; }
.alm-hud__nav span { font-family: var(--alm-mono); font-size: 11px; color: var(--alm-ink-3); }
.alm-hud__nav .alm-i { width: 19px; height: 19px; }
.alm-hud__nav a:hover { background: var(--alm-violet-soft); color: var(--alm-violet); }
.alm-hud__nav a.is-active { background: var(--alm-ink); color: #fff; }
.alm-hud__nav a.is-active span { color: var(--alm-sun); }

.alm-hud__foot { margin-top: auto; display: grid; gap: 12px; }
.alm-hud__hearts { display: flex; gap: 5px; color: #F0517B; }
.alm-hud__hearts .alm-i { width: 17px; height: 17px; }

/* ---------- Bottom tab bar (phones) ---------- */
.alm-tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  justify-content: space-around;
  gap: 2px;
  padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .95);
  border-top: 1.5px solid var(--alm-line);
  backdrop-filter: blur(10px);
}
.alm-tabs a, .alm-tabs button {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 2px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--alm-ink-3);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--alm-t), color var(--alm-t);
}
.alm-tabs a.is-active { color: var(--alm-violet); background: var(--alm-violet-soft); }
.alm-tabs__cta { color: #fff !important; background: var(--alm-ink) !important; }

/* ---------- Shell & section skeleton ---------- */
.alm-shell { position: relative; z-index: 1; margin-left: var(--alm-hud); }
#alm-main { max-width: 1020px; margin: 0 auto; padding: 0 34px; }

.alm-sec {
  padding: 78px 0;
  border-top: 1.5px solid var(--alm-line);
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 52px;
  align-items: start;
}
.alm-sec__index { position: sticky; top: 34px; }
.alm-sec__index h2 { font-size: clamp(25px, 2.6vw, 33px); margin-top: 12px; }
.alm-sec__note { margin-top: 14px; font-size: 15.5px; color: var(--alm-ink-2); }
.alm-sec__index--row { position: static; }

/* ---------- 01 Start ---------- */
.alm-start { padding: 64px 0 84px; text-align: center; }

.alm-status {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  margin-bottom: 26px;
  border: 1.5px solid var(--alm-line);
  border-radius: var(--alm-r);
  background: rgba(255, 255, 255, .8);
  overflow: hidden;
}
.alm-status__cell {
  padding: 7px 15px;
  border-right: 1.5px solid var(--alm-line);
  font-family: var(--alm-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--alm-ink-3);
}
.alm-status__cell:last-child { border-right: 0; }
.alm-status__cell b { color: var(--alm-ink); }
.alm-status__cell--live { color: var(--alm-mint); }
.alm-status__cell--live::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--alm-mint);
  animation: alm-pulse 1.8s ease-in-out infinite;
}
@keyframes alm-pulse { 50% { opacity: .25; } }

.alm-start__title { font-size: clamp(34px, 5.2vw, 58px); max-width: 17em; margin-inline: auto; }
.alm-swap { color: var(--alm-violet); white-space: nowrap; }
.alm-swap span {
  position: relative;
  display: inline-block;
  padding: 0 .12em;
  background: linear-gradient(180deg, transparent 62%, var(--alm-sun) 62%, var(--alm-sun) 88%, transparent 88%);
}
.alm-start__lead {
  max-width: 40em;
  margin: 20px auto 0;
  font-size: 17.5px;
  color: var(--alm-ink-2);
}
.alm-start .alm-cta { justify-content: center; margin-top: 28px; }

/* Three screenshots fanned around the middle one */
.alm-fan { position: relative; height: 470px; margin-top: 56px; }
.alm-fan__card {
  position: absolute;
  left: 50%;
  top: 0;
  width: 204px;
  margin: 0;
  padding: 6px;
  border: 1.5px solid var(--alm-ink);
  border-radius: 20px;
  background: var(--alm-ink);
  box-shadow: 0 26px 50px -34px rgba(20, 23, 58, .9);
  /* Side cards sit lower and tilt outwards, hinged near their base */
  transform-origin: 50% 88%;
  transform: translate(calc(-50% + var(--i) * 152px), var(--y, 0px)) rotate(calc(var(--i) * 8deg));
  transition: transform 320ms cubic-bezier(.4, 0, .2, 1);
}
.alm-fan__card img {
  border-radius: 15px;
  aspect-ratio: 9 / 16;      /* native screenshot ratio, never distorted */
  object-fit: cover;
  width: 100%;
}
.alm-fan__card:nth-child(1), .alm-fan__card:nth-child(3) { --y: 36px; }
.alm-fan__card--lead { width: 256px; z-index: 3; }
.alm-fan:hover .alm-fan__card { transform: translate(calc(-50% + var(--i) * 182px), var(--y, 0px)) rotate(calc(var(--i) * 5deg)); }

/* ---------- 02 Rulebook entries ---------- */
.alm-entries { border-top: 1.5px solid var(--alm-line); }
.alm-entries li {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 18px;
  padding: 24px 4px;
  border-bottom: 1.5px solid var(--alm-line);
  transition: background-color var(--alm-t);
}
.alm-entries li:hover { background: rgba(255, 255, 255, .7); }
.alm-entries__no {
  font-family: var(--alm-mono);
  font-size: 19px;
  font-weight: 700;
  color: var(--alm-violet);
}
.alm-entries h3 { font-size: 20px; margin-bottom: 5px; }
.alm-entries p { color: var(--alm-ink-2); font-size: 15.5px; }

/* ---------- 03 Live board ---------- */
.alm-play { grid-template-columns: minmax(0, 1fr); }
.alm-play__head { max-width: 620px; }
.alm-play__head h2 { font-size: clamp(25px, 2.6vw, 33px); margin-top: 12px; }
.alm-play__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  margin-top: 38px;
}

/* Diagram-style annotations either side of the board */
.alm-annot { display: grid; gap: 22px; }
.alm-annot p {
  position: relative;
  font-size: 14.5px;
  color: var(--alm-ink-2);
}
.alm-annot b {
  display: block;
  font-family: var(--alm-mono);
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--alm-ink);
  margin-bottom: 4px;
}
/* Leader lines pointing at the board */
.alm-annot--left { text-align: right; }
.alm-annot--left p { padding-right: 26px; }
.alm-annot--right p { padding-left: 26px; }
.alm-annot p::after {
  content: "";
  position: absolute;
  top: 9px;
  width: 18px;
  border-top: 1.5px dashed var(--alm-ink-3);
}
.alm-annot--left p::after { right: 0; }
.alm-annot--right p::after { left: 0; }

.alm-console {
  width: min(420px, 100%);
  padding: 16px;
  border: 1.5px solid var(--alm-ink);
  border-radius: 18px;
  background: var(--alm-panel);
  box-shadow: 8px 8px 0 rgba(20, 23, 58, .08); /* flat offset, not a soft glow */
}
.alm-console__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1.5px solid var(--alm-line);
}
.alm-console__label, .alm-console__count {
  font-family: var(--alm-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--alm-ink-3);
}
.alm-console__count b { color: var(--alm-violet); }
.alm-console__msg {
  margin-top: 14px;
  min-height: 1.6em;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--alm-ink-3);
}
.alm-console__msg.is-good { color: var(--alm-mint); }
.alm-console__msg.is-bad { color: #D33B6A; }
.alm-console__tools { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 14px; }

/* Interactive board */
.alm-board {
  display: grid;
  gap: 7px;
  padding: 10px;
  border-radius: 12px;
  background: #FBFAFF;
  border: 1.5px solid var(--alm-line);
}
.alm-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: 9px;
  padding: 0;
  background: transparent;
  display: grid;
  place-items: center;
  color: var(--alm-ink);
  transition: background-color var(--alm-t), color var(--alm-t), border-color var(--alm-t);
}
.alm-tile--empty { background: rgba(20, 23, 58, .04); }
.alm-tile--arrow { cursor: pointer; background: #fff; border: 1.5px solid var(--alm-line); }
.alm-tile--arrow:hover { background: var(--alm-violet-soft); border-color: var(--alm-violet); color: var(--alm-violet); }
.alm-tile svg {
  width: 66%;
  height: 66%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(var(--rot, 0deg));
}
.alm-tile--hint { background: var(--alm-mint-soft); border-color: var(--alm-mint); color: #14764A; }
.alm-tile--gone { animation: alm-launch .34s ease-in forwards; pointer-events: none; }
.alm-tile--stuck { animation: alm-shake .34s ease-in-out; }

@keyframes alm-launch { to { transform: translate(var(--dx, 0), var(--dy, 0)) scale(.7); opacity: 0; } }
@keyframes alm-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  45% { transform: translateX(5px); }
  70% { transform: translateX(-3px); }
}

/* ---------- 04 Contact sheet ---------- */
.alm-sheet { grid-template-columns: minmax(0, 1fr); }
.alm-sec__index--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
}
.alm-sec__index--row .alm-sec__note { max-width: 300px; margin-top: 0; }

.alm-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin-top: 36px;
}
.alm-frame { margin: 0; }
.alm-frame--drop { transform: translateY(30px); }   /* staggered contact sheet */
.alm-frame__btn {
  display: block;
  width: 100%;
  padding: 5px;
  border: 1.5px solid var(--alm-line);
  border-radius: 14px;
  background: var(--alm-panel);
  cursor: pointer;
  transition: border-color var(--alm-t), background-color var(--alm-t);
}
.alm-frame__btn img { border-radius: 10px; aspect-ratio: 9 / 16; object-fit: cover; width: 100%; }
.alm-frame__btn:hover { border-color: var(--alm-ink); background: var(--alm-violet-soft); }
.alm-frame figcaption {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--alm-ink-2);
}
.alm-frame figcaption span { font-family: var(--alm-mono); font-size: 11.5px; color: var(--alm-violet); }

/* ---------- 05 Level run stepper ---------- */
/* The stepper needs the full measure, so the index sits above it */
.alm-run { grid-template-columns: minmax(0, 1fr); }
.alm-run .alm-sec__index { position: static; max-width: 620px; margin-bottom: 34px; }

.alm-stepper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}
.alm-stepper__list { display: grid; gap: 0; border-top: 1.5px solid var(--alm-line); }
.alm-stepper__list button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  width: 100%;
  padding: 18px 12px;
  border: 0;
  border-bottom: 1.5px solid var(--alm-line);
  border-left: 3px solid transparent;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--alm-t), border-color var(--alm-t);
}
.alm-stepper__list button b { font-family: var(--alm-mono); font-size: 15px; color: var(--alm-ink-3); }
.alm-stepper__list button span { display: block; font-family: 'Fredoka', sans-serif; font-size: 18px; }
.alm-stepper__list button em {
  display: block;
  margin-top: 3px;
  font-family: 'Nunito', sans-serif;
  font-style: normal;
  font-size: 14.5px;
  color: var(--alm-ink-2);
}
.alm-stepper__list button:hover { background: rgba(255, 255, 255, .7); }
.alm-stepper__list button[aria-selected="true"] {
  background: #fff;
  border-left-color: var(--alm-violet);
}
.alm-stepper__list button[aria-selected="true"] b { color: var(--alm-violet); }

.alm-stepper__stage {
  padding: 22px;
  border: 1.5px solid var(--alm-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .72);
}
.alm-pane { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 22px; align-items: center; }
.alm-pane[hidden] { display: none; }
.alm-pane__shot {
  margin: 0;
  padding: 6px;
  border-radius: 18px;
  background: var(--alm-ink);
}
.alm-pane__shot img { border-radius: 13px; aspect-ratio: 9 / 16; object-fit: cover; width: 100%; }
.alm-pane p { font-size: 15.5px; color: var(--alm-ink-2); }
.alm-pane b { color: var(--alm-ink); }

.alm-art {
  grid-column: 1 / -1;
  margin: 42px 0 0;
  border: 1.5px solid var(--alm-line);
  border-radius: 16px;
  overflow: hidden;
}
.alm-art img { aspect-ratio: 1024 / 500; object-fit: cover; width: 100%; }

/* ---------- 06 Questions ---------- */
.alm-qa { border-top: 1.5px solid var(--alm-line); }
.alm-qa details { border-bottom: 1.5px solid var(--alm-line); }
.alm-qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 4px;
  font-family: 'Fredoka', sans-serif;
  font-size: 17.5px;
  cursor: pointer;
  list-style: none;
  transition: color var(--alm-t);
}
.alm-qa summary::-webkit-details-marker { display: none; }
.alm-qa summary:hover { color: var(--alm-violet); }
.alm-qa summary i {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
}
.alm-qa summary i::before, .alm-qa summary i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 1.8px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--alm-t);
}
.alm-qa summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.alm-qa details[open] summary { color: var(--alm-violet); }
.alm-qa details[open] summary i::after { transform: translate(-50%, -50%) rotate(0); }
.alm-qa p { padding: 0 4px 20px; max-width: 62ch; font-size: 15.5px; color: var(--alm-ink-2); }

/* ---------- 07 Ticket ---------- */
.alm-ticket { grid-template-columns: minmax(0, 1fr); }
.alm-tik {
  position: relative;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  border: 1.5px solid var(--alm-ink);
  border-radius: 18px;
  background: var(--alm-panel);
  overflow: hidden;
}
/* Perforation between stub and body */
.alm-tik::before {
  content: "";
  position: absolute;
  left: 190px;
  top: 14px;
  bottom: 14px;
  border-left: 2.5px dashed var(--alm-line);
}
.alm-tik__stub {
  padding: 28px 22px;
  background: var(--alm-ink);
  color: #fff;
  text-align: center;
}
.alm-tik__stub img { margin: 0 auto 14px; border-radius: 14px; }
.alm-tik__no {
  font-family: var(--alm-mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  color: var(--alm-sun);
}
.alm-tik__word {
  margin-top: 10px;
  font-family: 'Fredoka', sans-serif;
  font-size: 21px;
  line-height: 1.14;
}
.alm-tik__main { padding: 34px 34px 34px 42px; }
.alm-tik__main h2 { font-size: clamp(25px, 3vw, 35px); margin: 12px 0 12px; }
.alm-tik__main > p { max-width: 44ch; color: var(--alm-ink-2); font-size: 15.5px; }
.alm-tik__main .alm-cta { margin-top: 24px; }

/* ---------- Footer ---------- */
.alm-foot {
  border-top: 1.5px solid var(--alm-line);
  background: rgba(255, 255, 255, .6);
}
.alm-foot__row,
.alm-foot__base { max-width: 1020px; margin: 0 auto; padding: 0 34px; }
.alm-foot__row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 32px;
  padding-top: 44px;
  padding-bottom: 34px;
}
.alm-foot__name { font-family: 'Fredoka', sans-serif; font-size: 18px; margin-bottom: 6px; }
.alm-foot__about p { font-size: 15px; color: var(--alm-ink-2); max-width: 32em; }
.alm-foot__h {
  font-family: var(--alm-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--alm-ink-3);
  margin-bottom: 12px;
}
.alm-foot__col { display: flex; flex-direction: column; gap: 8px; }
.alm-foot__col a {
  width: fit-content;
  font-size: 15px;
  font-weight: 600;
  color: var(--alm-ink-2);
  text-decoration: none;
  transition: color var(--alm-t);
}
.alm-foot__col a:hover { color: var(--alm-violet); text-decoration: underline; }
.alm-foot__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding-top: 18px;
  padding-bottom: 26px;
  border-top: 1.5px solid var(--alm-line);
  font-family: var(--alm-mono);
  font-size: 11.5px;
  color: var(--alm-ink-3);
}

/* ---------- Lightbox ---------- */
.alm-light {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  padding: 26px;
}
.alm-light[hidden] { display: none; }
.alm-light__veil {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(20, 23, 58, .72);
  backdrop-filter: blur(3px);
  cursor: zoom-out;
}
.alm-light__box {
  position: relative;
  margin: 0;
  max-width: min(360px, 84vw);
  animation: alm-pop .24s cubic-bezier(.2, .9, .3, 1.2);
}
.alm-light__box img {
  width: 100%;
  border-radius: 16px;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border: 6px solid #fff;
}
.alm-light__box figcaption {
  margin-top: 12px;
  text-align: center;
  font-family: var(--alm-mono);
  font-size: 12px;
  color: rgba(255, 255, 255, .9);
}
.alm-light__x {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 9px;
  border: 1.5px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background-color var(--alm-t);
}
.alm-light__x:hover { background: rgba(255, 255, 255, .18); }

/* ---------- "Coming soon" modal ---------- */
.alm-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 22px; }
.alm-modal[hidden] { display: none; }
.alm-modal__veil { position: absolute; inset: 0; background: rgba(20, 23, 58, .6); backdrop-filter: blur(3px); }
.alm-modal__box {
  position: relative;
  width: min(430px, 100%);
  padding: 30px;
  border: 1.5px solid var(--alm-ink);
  border-radius: 16px;
  background: #fff;
  box-shadow: 10px 10px 0 rgba(20, 23, 58, .14);
  animation: alm-pop .24s cubic-bezier(.2, .9, .3, 1.2);
}
.alm-modal__box h2 { font-size: 27px; margin: 10px 0 10px; }
.alm-modal__box p { color: var(--alm-ink-2); font-size: 15.5px; }
.alm-modal__note { margin-top: 12px; font-size: 14px; }
.alm-modal__note a { color: var(--alm-violet); font-weight: 700; }
.alm-modal__box .alm-btn { margin-top: 22px; }
.alm-modal__x {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--alm-ink-3);
  cursor: pointer;
  transition: background-color var(--alm-t), color var(--alm-t);
}
.alm-modal__x:hover { background: var(--alm-violet-soft); color: var(--alm-violet); }
body.alm-locked { overflow: hidden; }

@keyframes alm-pop { from { opacity: 0; transform: translateY(12px) scale(.97); } }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1180px) {
  :root { --alm-hud: 190px; }
  .alm-sec { grid-template-columns: 210px minmax(0, 1fr); gap: 38px; }
  #alm-main { padding: 0 26px; }
  .alm-play__body { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .alm-annot { max-width: 420px; text-align: left; }
  .alm-annot--left { text-align: left; }
  .alm-annot--left p { padding: 0 0 0 26px; }
  .alm-annot--left p::after { right: auto; left: 0; }
  .alm-annot--left { order: 2; }
  .alm-annot--right { order: 3; }
}

@media (max-width: 980px) {
  /* HUD column gives way to the bottom tab bar */
  .alm-hud { display: none; }
  .alm-tabs { display: flex; }
  .alm-shell { margin-left: 0; }
  body.alm { padding-bottom: 74px; }
  html { scroll-padding-top: 12px; }
  .alm-sec { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 58px 0; }
  .alm-sec__index { position: static; }
  .alm-stepper { grid-template-columns: minmax(0, 1fr); }
  .alm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .alm-frame--drop { transform: none; }
  .alm-tik { grid-template-columns: minmax(0, 1fr); }
  .alm-tik::before { left: 14px; right: 14px; top: auto; bottom: auto; height: 0; border-left: 0; border-top: 2.5px dashed var(--alm-line); }
  .alm-tik__main { padding: 28px 24px; }
  .alm-tik__stub { display: flex; align-items: center; gap: 16px; text-align: left; padding: 20px 24px; }
  .alm-tik__stub img { margin: 0; }
  .alm-tik__word { margin-top: 0; font-size: 17px; }
  .alm-tik__word br { display: none; }
}

@media (max-width: 760px) {
  body.alm { font-size: 16px; }
  #alm-main { padding: 0 18px; }
  .alm-start { padding: 36px 0 64px; }
  .alm-start__title { font-size: clamp(29px, 8vw, 40px); }
  .alm-status { gap: 0; }
  .alm-status__cell { padding: 6px 11px; font-size: 10.5px; }
  .alm-cta .alm-store { flex: 1 1 100%; }
  .alm-fan { height: 340px; margin-top: 40px; }
  .alm-fan__card { width: 142px; transform: translate(calc(-50% + var(--i) * 108px), var(--y, 0px)) rotate(calc(var(--i) * 8deg)); }
  .alm-fan__card--lead { width: 178px; }
  .alm-fan__card:nth-child(1), .alm-fan__card:nth-child(3) { --y: 26px; }
  .alm-fan:hover .alm-fan__card { transform: translate(calc(-50% + var(--i) * 122px), var(--y, 0px)) rotate(calc(var(--i) * 6deg)); }
  .alm-entries li { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 20px 2px; }
  .alm-sec__index--row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .alm-sec__index--row .alm-sec__note { max-width: none; }
  .alm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alm-pane { grid-template-columns: minmax(0, 1fr); }
  .alm-pane__shot { width: 60%; margin: 0 auto; }
  .alm-console { padding: 13px; }
  .alm-stepper__stage { padding: 16px; }
}

@media (max-width: 420px) {
  .alm-fan { height: 280px; }
  .alm-fan__card { width: 116px; transform: translate(calc(-50% + var(--i) * 86px), var(--y, 0px)) rotate(calc(var(--i) * 8deg)); }
  .alm-fan__card--lead { width: 146px; }
  .alm-fan:hover .alm-fan__card { transform: translate(calc(-50% + var(--i) * 96px), var(--y, 0px)) rotate(calc(var(--i) * 6deg)); }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}