/* Rex Rodeo inside blackboxtools.com. Colours and type are the game's own UI, carried over from the rexrodeo-website DESIGN.md. */
@font-face { font-family: "Bungee"; src: url("/apps/rexrodeo/fonts/bungee.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Baloo 2"; src: url("/apps/rexrodeo/fonts/baloo2-extrabold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/apps/rexrodeo/fonts/nunito-var.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }

:root {
  --ink: #15193a;
  --ink-soft: #3b4170;
  --paper: #f6f8ff;
  --gold: #ffc62e;
  --violet: #5b46e0;
  --sky-top: #4289e0;
  --sky-low: #97cdf0;
  --sand: #f0ac62;
  --sand-edge: #d67846;
  --link: #4a36cc;
  --page: var(--paper);
  --text: var(--ink);
  --muted: var(--ink-soft);
  --tile: #ffffff;
  --rim: #d7dcf3;
  --tint: #e9edfb;
  --lift: rgb(21 25 58 / 0.2);
  --radius: 18px;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #10132e;
    --text: #eef1ff;
    --muted: #b7bde6;
    --tile: #1a1e44;
    --rim: #2c3266;
    --tint: #161a3d;
    --link: #b3a8ff;
    --lift: rgb(3 4 12 / 0.5);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--page); color: var(--text); font: 400 1.0625rem/1.65 "Nunito", system-ui, sans-serif; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: var(--link); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
a:hover { color: var(--text); }
h1, h2, h3 { font-family: "Baloo 2", "Nunito", sans-serif; font-weight: 800; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.08; }
h3 { font-size: 1.4rem; line-height: 1.2; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 10; background: var(--gold); color: var(--ink); padding: 8px 14px; border-radius: 10px; font-weight: 800; }
.skip:focus { left: 8px; }
.skip:hover { color: var(--ink); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }

/* A real phone frame grab, so it wears a plain ink edge and nothing drawn around it. */
.phone { border-radius: 26px; border: 4px solid var(--ink); background: var(--ink); box-shadow: 0 18px 40px var(--lift); }

/* Hero: the game's sky over its sand, with the herd running between them. */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--sky-top), var(--sky-low) 88%); color: var(--ink); }
.top { max-width: 1180px; margin: 0 auto; padding: 16px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.top a { color: var(--ink); font-weight: 800; text-decoration: none; }
.top a:hover { text-decoration: underline; color: var(--ink); }
.top__links { display: flex; gap: 24px; }
.hero__body { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: clamp(16px, 3vw, 36px) var(--gutter) 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.mark { font-family: "Bungee", "Baloo 2", sans-serif; font-size: clamp(2.5rem, 6.6vw, 4.8rem); line-height: 1; color: var(--gold); -webkit-text-stroke: 0.12em var(--ink); paint-order: stroke fill; text-shadow: 0 0.09em 0 var(--ink); text-transform: uppercase; white-space: nowrap; margin-bottom: 22px; }
.hero h1 { font-size: clamp(2rem, 4.4vw, 3.3rem); line-height: 1.06; max-width: 15em; }
.hero__lede { font-size: clamp(1.1rem, 1.7vw, 1.3rem); font-weight: 600; max-width: 30em; margin-top: 14px; }
.stores { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 26px; }
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.badge img[src$=".svg"] { height: 50px; width: auto; }
.badge img[src$=".png"] { height: 74px; width: auto; margin: -12px; }
.soon { font: 800 0.95rem/1.2 "Baloo 2", sans-serif; color: var(--paper); background: rgb(21 25 58 / 0.78); padding: 6px 12px 5px; border-radius: 999px; }
.hero__shot { margin: 0 0 -96px; justify-self: center; width: min(100%, 380px); }
.hero__shot .phone { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 6%; }

.herd { position: relative; z-index: 1; overflow: hidden; margin-top: clamp(4px, 2vw, 18px); margin-bottom: -22px; }
.herd__track { display: flex; width: max-content; padding-top: 12px; }
.herd__track li { margin-right: -18px; }
.herd__track img { height: clamp(84px, 11vw, 132px); width: auto; }
.sand { height: 56px; background: linear-gradient(180deg, var(--sand-edge) 0 10px, var(--sand) 10px); }
@media (prefers-reduced-motion: no-preference) {
  .herd__track { animation: herd-run 60s linear infinite; }
  .herd__track li { animation: gallop 0.46s cubic-bezier(0.33, 0, 0.2, 1) infinite alternate; }
  .herd__track li:nth-child(odd) { animation-delay: -0.2s; }
}
@keyframes herd-run { to { transform: translateX(-50%); } }
@keyframes gallop { to { transform: translateY(-6px); } }

/* Rides: six real frames, staggered like a herd rather than lined up. */
.rides { padding: clamp(56px, 8vw, 96px) 0 clamp(48px, 7vw, 80px); }
.lede { color: var(--muted); font-size: 1.2rem; max-width: 44em; margin-top: 10px; text-wrap: pretty; }
.strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.5vw, 20px); max-width: 1320px; margin: clamp(28px, 4vw, 44px) auto 0; padding: 0 var(--gutter); }
.strip li:nth-child(even) { margin-top: 36px; }
.strip .phone { border-radius: 18px; border-width: 3px; aspect-ratio: 9 / 19; object-fit: cover; object-position: 50% 40%; }
.strip span { display: block; text-align: center; font: 800 1.1rem/1.2 "Baloo 2", sans-serif; margin-top: 10px; }

/* Ranch: two frames that overlap, then the words. */
.ranch { background: var(--tint); padding: clamp(56px, 8vw, 96px) 0; }
.ranch__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 80px); align-items: center; }
.ranch__shots { position: relative; display: grid; grid-template-columns: 1fr 1fr; max-width: 520px; justify-self: center; }
.ranch__shots .phone { border-radius: 20px; aspect-ratio: 9 / 18.6; object-fit: cover; }
.ranch__shots .phone:last-child { margin: 44px 0 0 -14%; position: relative; }
.ranch__copy p { color: var(--muted); font-size: 1.15rem; margin-top: 10px; max-width: 30em; }
.ranch__copy h3 { margin-top: 30px; font-size: 1.7rem; }

/* Parents: a tile grid with a lead tile and a wide tile. */
.parents { padding: clamp(56px, 8vw, 96px) 0; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.facts li { background: var(--tile); border: 2px solid var(--rim); border-radius: var(--radius); padding: 24px; }
.facts p { color: var(--muted); margin-top: 6px; }
.facts__lead { grid-row: span 2; background: var(--violet) !important; border-color: var(--violet) !important; display: flex; flex-direction: column; justify-content: flex-end; }
.facts__lead h3 { color: #fff; font-size: clamp(1.8rem, 3vw, 2.4rem); }
.facts__lead p { color: #eceaff; font-size: 1.15rem; }
.note { color: var(--muted); margin-top: 22px; }

.foot { border-top: 2px solid var(--rim); padding: 26px 0 34px; color: var(--muted); font-size: 0.95rem; }
.foot__legal { font-size: 0.85rem; margin-top: 6px; }

@media (max-width: 900px) {
  .strip { grid-template-columns: repeat(6, 200px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin-left: 0; margin-right: 0; max-width: none; }
  .strip li { scroll-snap-align: center; }
  .strip li:nth-child(even) { margin-top: 0; }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts__lead { grid-row: auto; grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .hero__body { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .hero h1, .hero__lede { margin-left: auto; margin-right: auto; }
  .stores, .badges { justify-content: center; }
  .hero__shot { width: min(66vw, 260px); margin-bottom: -72px; }
  .ranch__grid { grid-template-columns: 1fr; }
  .ranch__copy { text-align: center; }
  .ranch__copy p { margin-left: auto; margin-right: auto; }
  .rides .wrap { text-align: center; }
  .lede { margin-left: auto; margin-right: auto; }
}
@media (max-width: 520px) {
  .facts { grid-template-columns: 1fr; }
  .mark { font-size: clamp(2.2rem, 12vw, 3rem); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }