/* ============================================================
   CATEWHEEL — Main
   ============================================================ */

/* ---- The sky ------------------------------------------------
   Matched to the artwork's own gradient so the wheel image can
   dissolve straight into the page instead of sitting in a box. */
body {
  min-height: 100%;
  background:
    linear-gradient(
      180deg,
      var(--sky-800) 0%,
      var(--sky-700) 16%,
      var(--sky-600) 34%,
      var(--sky-500) 52%,
      var(--sky-400) 72%,
      var(--sky-200) 88%,
      var(--sky-050) 100%
    )
    no-repeat;
  background-attachment: fixed;
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: 450;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.shell {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
}

/* ============================================================
   Type
   ============================================================ */
.pixel {
  font-family: var(--font-pixel);
  font-size: var(--t-pixel);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.5;
}

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 700;
}

.h1,
.h2 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.h2 { font-size: var(--t-d1); }

/* Outlined display type — the game-poster look. Four shadows
   fake a stroke that works in every browser, unlike
   -webkit-text-stroke which thins the glyph from the inside. */
.outlined {
  color: var(--cloud-pure);
  text-shadow:
    -3px 0 var(--ink-900), 3px 0 var(--ink-900),
    0 -3px var(--ink-900), 0 3px var(--ink-900),
    -3px -3px var(--ink-900), 3px -3px var(--ink-900),
    -3px 3px var(--ink-900), 3px 3px var(--ink-900),
    0 9px 0 var(--ink-900);
}

/* ============================================================
   Pixel-UI primitives
   ============================================================ */
.card {
  background: var(--cloud-pure);
  border: var(--edge) solid var(--ink-900);
  border-radius: var(--r-md);
  box-shadow: var(--pop-2), var(--drop);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.85rem 1.6rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  border: var(--edge) solid var(--ink-900);
  border-radius: var(--r-pill);
  color: var(--ink-900);
  background: var(--cloud-pure);
  box-shadow: var(--pop-2);
  transition: transform 0.09s var(--ease), box-shadow 0.09s var(--ease),
    filter 0.2s var(--ease);
  white-space: nowrap;
}

/* the press: the element drops onto its own shadow */
.btn:hover { transform: translateY(-2px); box-shadow: var(--pop-3); }
.btn:active { transform: translateY(5px); box-shadow: 0 0 0 var(--ink-900); }

.btn--gold {
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  color: var(--ink-900);
}
.btn--gold:hover { filter: brightness(1.07); }

.btn--ink { background: var(--ink-900); color: var(--cloud-pure); }
.btn--ink:hover { filter: brightness(1.35); }

.btn--sm { padding: 0.55rem 1.05rem; font-size: 0.82rem; box-shadow: var(--pop-1); }
.btn--sm:hover { box-shadow: var(--pop-2); }

/* Pre-launch. A dashed edge reads as "not yet"; a faded button
   just reads as broken. */
.btn.soon,
.btn.soon:hover {
  background: var(--cloud-shade);
  color: var(--ink-600);
  border-style: dashed;
  box-shadow: var(--pop-1);
  transform: none;
  cursor: default;
  filter: none;
}

a.soon:not(.btn) {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.7rem;
  border: 2px solid var(--ink-900);
  border-radius: var(--r-pill);
  background: var(--cloud-pure);
  box-shadow: var(--pop-1);
  font-family: var(--font-pixel);
  font-size: 0.56rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.badge--gold { background: var(--gold-300); }

/* ============================================================
   Clouds
   ============================================================ */
.skylayer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.cloud {
  position: absolute;
  display: block;
  animation-name: drift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

.cloud svg { filter: drop-shadow(0 3px 0 rgba(16, 19, 31, 0.07)); }

@keyframes drift {
  from { transform: translateX(0); }
  to   { transform: translateX(180vw); }
}

/* ============================================================
   Top bar
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(16, 104, 224, 0.72);
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  border-bottom: var(--edge) solid var(--ink-900);
}

.topbar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  height: var(--bar-inner);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  flex-shrink: 0;
  min-width: 0;
}

.brand__mark {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: var(--edge) solid var(--ink-900);
  background: var(--cloud-pure);
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: var(--pop-1);
  /* deliberately does NOT roll — a tumbling cat face reads as a bug,
     same reason the flywheel hub stays upright */
}

/* wheel-mark.png is already cropped to the wheel, so it fills the
   circle 1:1 — zooming it again just shows the middle of the coin */
.brand__mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes roll { to { transform: rotate(360deg); } }

.brand__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--cloud-pure);
  text-shadow: 0 2px 0 var(--ink-900);
  line-height: 1;
}

.brand__sub {
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  color: var(--gold-200);
  letter-spacing: 0.04em;
  display: block;
  margin-top: 3px;
}

.ticker {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

.tick { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }

.tick__k {
  font-family: var(--font-pixel);
  font-size: 0.46rem;
  color: var(--sky-200);
  letter-spacing: 0.03em;
}

.tick__v {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--cloud-pure);
}

.tick__v.up { color: #9df5b9; }
.tick__v.down { color: #ffb3ae; }

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6ee7a0;
  border: 2px solid var(--ink-900);
  animation: blip 2s var(--ease) infinite;
  flex-shrink: 0;
}

@keyframes blip {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.82); }
}

.navset { display: flex; align-items: center; gap: var(--s-4); }

.navlink {
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--cloud-pure);
  text-shadow: 0 2px 0 rgba(16, 19, 31, 0.5);
  transition: color 0.18s var(--ease);
}

.navlink:hover { color: var(--gold-200); }

/* ============================================================
   DECK — the hero
   ============================================================ */
.deck {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-height: calc(100svh - var(--bar));
  padding: clamp(0.8rem, 1.8vw, 1.4rem) 0 clamp(1rem, 2vw, 1.6rem);
  overflow: hidden;
}

.deck__in {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  min-width: 0;
}

/* ---- The wheel ---------------------------------------------
   The artwork carries its own sky, so it is masked to an ellipse
   and set on a matching gradient — it reads as part of the page
   rather than a pasted square. */
.wheel {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
}

.wheel__img {
  width: min(100%, clamp(260px, 40vw, 540px));
  aspect-ratio: 1;
  object-fit: cover;
  -webkit-mask-image: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    #000 60%,
    rgba(0, 0, 0, 0.6) 74%,
    transparent 86%
  );
  mask-image: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    #000 60%,
    rgba(0, 0, 0, 0.6) 74%,
    transparent 86%
  );
  animation: hover 5.5s ease-in-out infinite;
}

@keyframes hover {
  0%, 100% { transform: translateY(-10px) rotate(-1.2deg); }
  50%      { transform: translateY(10px) rotate(1.2deg); }
}

/* speed lines behind the wheel */
.wheel__halo {
  position: absolute;
  width: min(96%, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(255, 255, 255, 0.16) 0deg 5deg,
      transparent 5deg 16deg
    );
  -webkit-mask-image: radial-gradient(circle, transparent 47%, #000 58%, transparent 80%);
  mask-image: radial-gradient(circle, transparent 47%, #000 58%, transparent 80%);
  animation: roll 22s linear infinite;
  z-index: -1;
}

/* ---- Lockup ---- */
.deck__copy { min-width: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: var(--s-4);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-hero);
  line-height: 0.86;
  letter-spacing: -0.045em;
  margin-bottom: var(--s-4);
}

.wordmark span { display: block; }
.wordmark .gold {
  color: var(--gold-300);
  text-shadow:
    -3px 0 var(--ink-900), 3px 0 var(--ink-900),
    0 -3px var(--ink-900), 0 3px var(--ink-900),
    -3px -3px var(--ink-900), 3px -3px var(--ink-900),
    -3px 3px var(--ink-900), 3px 3px var(--ink-900),
    0 9px 0 var(--ink-900);
}

.tagline {
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
  font-weight: 600;
  color: var(--cloud-pure);
  text-shadow: 0 2px 0 rgba(16, 19, 31, 0.42);
  max-width: 34ch;
  margin-bottom: var(--s-5);
}

/* ---- Lap clock ---- */
.lap {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: 0.85rem 1.1rem;
  margin-bottom: var(--s-4);
  background: var(--ink-900);
  border: var(--edge) solid var(--ink-900);
  border-radius: var(--r-md);
  box-shadow: var(--pop-2), var(--drop);
  flex-wrap: wrap;
}

.lap__k {
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  color: var(--gold-300);
  line-height: 1.5;
}

.lap__v {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  line-height: 1;
  color: var(--cloud-pure);
  letter-spacing: 0.01em;
  margin-left: auto;
}

.lap__v.due { color: #6ee7a0; animation: blip 1.4s ease-in-out infinite; }

/* ---- Stat tiles ---- */
.tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

.tile {
  padding: 0.8rem 0.7rem;
  background: var(--cloud-pure);
  border: var(--edge) solid var(--ink-900);
  border-radius: var(--r-sm);
  box-shadow: var(--pop-1);
  min-width: 0;
  transition: transform 0.16s var(--ease-pop);
}

.tile:hover { transform: translateY(-3px); }
.tile--gold { background: var(--gold-200); }

.tile__k {
  font-family: var(--font-pixel);
  font-size: 0.44rem;
  color: var(--ink-600);
  line-height: 1.45;
  display: block;
  margin-bottom: 4px;
}

.tile__v {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(0.98rem, 1.7vw, 1.32rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tile__s {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--ink-400);
  line-height: 1.3;
  margin-top: 2px;
}

.cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-4); }

/* ---- Contract chip ---- */
.ca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.4rem 0.4rem 0.85rem;
  background: rgba(16, 19, 31, 0.55);
  border: 2px solid var(--ink-900);
  border-radius: var(--r-pill);
  max-width: 100%;
}

.ca__k {
  font-family: var(--font-pixel);
  font-size: 0.48rem;
  color: var(--gold-300);
  flex-shrink: 0;
}

.ca__v {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--cloud-pure);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.copy {
  display: inline-grid;
  place-items: center;
  /* 40px is the practical floor for a thumb */
  min-height: 40px;
  min-width: 62px;
  border: 2px solid var(--ink-900);
  border-radius: var(--r-pill);
  background: var(--gold-300);
  color: var(--ink-900);
  padding: 0.25rem 0.7rem;
  font-family: var(--font-pixel);
  font-size: 0.48rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: filter 0.15s var(--ease);
}

.copy:hover { filter: brightness(1.08); }
.copy.done { background: var(--win); color: #fff; }

/* ============================================================
   Sections
   ============================================================ */
.band {
  position: relative;
  padding: clamp(3rem, 7vw, 6rem) 0;
}

/* white bands sit on the sky as cards of their own */
.band--sheet {
  background: var(--cloud-pure);
  border-block: var(--edge) solid var(--ink-900);
}

.band__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
  margin-bottom: var(--s-8);
  flex-wrap: wrap;
}

.band__head p { max-width: 42ch; color: var(--fg-soft); font-weight: 500; }
.band--sky .band__head p { color: var(--sky-050); }
.band--sky .h2 { color: var(--cloud-pure); text-shadow: 0 4px 0 var(--ink-900); }

/* ============================================================
   The flywheel
   ============================================================ */
.fw {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

@media (max-width: 900px) { .fw { grid-template-columns: 1fr; } }

.flywheel { position: relative; display: grid; place-items: center; }
.flywheel__svg { width: min(100%, 440px); overflow: visible; }

.flywheel__spin {
  transform-origin: 50% 50%;
  animation: roll 6s linear infinite;
}

.flywheel__node { animation: pulse 3.6s var(--ease) infinite; animation-delay: calc(var(--i) * 0.9s); }

@keyframes pulse {
  0%, 72%, 100% { transform: none; }
  84%           { transform: scale(1.09); }
}

/* The hub stays upright. Spinning it tumbles the cat's face
   upside-down, which reads as a bug — the ring carries the motion. */
.flywheel__hub {
  position: absolute;
  width: 38%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: var(--edge) solid var(--ink-900);
  overflow: hidden;
  box-shadow: var(--pop-2);
}

.flywheel__hub img {
  width: 100%;
  height: 100%; /* wins over the global img{height:auto} on specificity */
  object-fit: cover;
}

/* stage list */
.stages { display: grid; gap: var(--s-3); }

.stage {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  align-items: start;
  padding: var(--s-4);
  background: var(--cloud-pure);
  border: var(--edge) solid var(--ink-900);
  border-radius: var(--r-md);
  box-shadow: var(--pop-1);
  transition: transform 0.18s var(--ease-pop), box-shadow 0.18s var(--ease);
}

.stage:hover { transform: translate(-2px, -3px); box-shadow: var(--pop-3); }

.stage__n {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: var(--edge) solid var(--ink-900);
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  font-family: var(--font-pixel);
  font-size: 0.8rem;
  flex-shrink: 0;
}

.stage__t {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.06rem;
  letter-spacing: -0.02em;
  margin-bottom: 2px;
}

.stage__d { font-size: 0.9rem; color: var(--fg-soft); line-height: 1.5; }

/* ============================================================
   The split
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: var(--s-4);
}

.slice {
  position: relative;
  padding: clamp(1.4rem, 2.6vw, 2rem);
  background: var(--cloud-pure);
  border: var(--edge) solid var(--ink-900);
  border-radius: var(--r-lg);
  box-shadow: var(--pop-2), var(--drop);
  overflow: hidden;
}

.slice--gold { background: linear-gradient(170deg, var(--gold-200), var(--gold-300)); }
.slice--ink { background: var(--ink-900); color: var(--cloud-pure); }
.slice--ink .slice__d { color: var(--sky-200); }

.slice__pct {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.8rem, 5.5vw, 4rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
}

.slice__t {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.16rem;
  margin: var(--s-2) 0 var(--s-1);
  letter-spacing: -0.02em;
}

.slice__d { font-size: 0.92rem; color: var(--fg-soft); line-height: 1.5; }

/* ============================================================
   Pit stop — wallet check
   ============================================================ */
.pit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
  align-items: start;
}

@media (max-width: 900px) { .pit { grid-template-columns: 1fr; } }

.panel {
  padding: clamp(1.4rem, 3vw, 2.2rem);
  background: var(--cloud-pure);
  border: var(--edge) solid var(--ink-900);
  border-radius: var(--r-lg);
  box-shadow: var(--pop-2), var(--drop);
}

.field { display: grid; gap: 0.45rem; }

.field__l { font-family: var(--font-pixel); font-size: 0.55rem; color: var(--ink-600); }

.input {
  width: 100%;
  padding: 0.9rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  background: var(--sky-050);
  border: var(--edge) solid var(--ink-900);
  border-radius: var(--r-sm);
  box-shadow: inset 0 3px 0 rgba(16, 19, 31, 0.09);
  transition: box-shadow 0.16s var(--ease);
}

.input::placeholder { color: var(--ink-400); }
.input:focus {
  outline: none;
  box-shadow: inset 0 3px 0 rgba(16, 19, 31, 0.09), 0 0 0 4px var(--gold-300);
}

.row { display: flex; gap: var(--s-3); margin-top: var(--s-4); flex-wrap: wrap; }

.note {
  margin-top: var(--s-4);
  font-size: 0.82rem;
  color: var(--fg-soft);
  line-height: 1.55;
}

.note strong { color: var(--ink-900); }

/* ---- Result slip ---- */
.slip {
  position: relative;
  padding: clamp(1.3rem, 3vw, 2rem);
  background: var(--sky-050);
  border: var(--edge) solid var(--ink-900);
  border-radius: var(--r-lg);
  box-shadow: var(--pop-2), var(--drop);
  min-height: 300px;
  overflow: hidden;
}

.slip__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 0.55rem 0;
  border-bottom: 2px dotted rgba(16, 19, 31, 0.16);
}

.slip__row:last-of-type { border-bottom: 0; }

.slip__k { font-family: var(--font-pixel); font-size: 0.5rem; color: var(--ink-600); flex-shrink: 0; }

.slip__v {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.9rem;
  text-align: right;
  overflow-wrap: anywhere;
}

.slip__v.good { color: var(--win-deep); }
.slip__v.bad { color: var(--lose-deep); }

.slip__empty {
  display: grid;
  place-items: center;
  text-align: center;
  gap: var(--s-3);
  min-height: 250px;
  color: var(--fg-soft);
}

.slip__empty .h2 { font-size: 1.3rem; color: var(--ink-900); }

.stamp {
  display: inline-block;
  margin-top: var(--s-4);
  padding: 0.5rem 1.1rem;
  border: var(--edge) solid currentColor;
  border-radius: var(--r-sm);
  font-family: var(--font-pixel);
  font-size: 0.72rem;
  transform: rotate(-3deg);
  animation: slam 0.35s var(--ease-pop) backwards;
}

.stamp.good { color: var(--win-deep); background: #dcfce7; }
.stamp.bad { color: var(--lose-deep); background: #fee2e2; }

@keyframes slam {
  0%   { opacity: 0; transform: rotate(-3deg) scale(2.2); }
  70%  { opacity: 1; transform: rotate(-3deg) scale(0.94); }
  100% { transform: rotate(-3deg) scale(1); }
}

.meter {
  margin-top: var(--s-4);
  height: 16px;
  background: var(--cloud-pure);
  border: var(--edge) solid var(--ink-900);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.meter__f {
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    var(--gold-300) 0 8px,
    var(--gold-400) 8px 16px
  );
  transition: width 0.9s var(--ease);
}

.meter__f.full {
  background: repeating-linear-gradient(45deg, #4ade80 0 8px, var(--win) 8px 16px);
}

/* ============================================================
   Lap log
   ============================================================ */
.log {
  background: var(--cloud-pure);
  border: var(--edge) solid var(--ink-900);
  border-radius: var(--r-lg);
  box-shadow: var(--pop-2), var(--drop);
  overflow: hidden;
}

.log__scroll { overflow-x: auto; }

.tbl { min-width: 720px; font-family: var(--font-mono); font-size: 0.8rem; }

.tbl thead th {
  text-align: left;
  padding: 0.85rem 1rem;
  background: var(--ink-900);
  color: var(--gold-300);
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  white-space: nowrap;
}

.tbl tbody td {
  padding: 0.8rem 1rem;
  border-bottom: 2px solid var(--sky-100);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: var(--gold-100); }
.tbl .r { text-align: right; }

.log__empty {
  padding: clamp(2.5rem, 6vw, 4rem);
  display: grid;
  place-items: center;
  gap: var(--s-3);
  text-align: center;
}

/* ============================================================
   Footer
   ============================================================ */
.foot {
  position: relative;
  padding: clamp(2.5rem, 5vw, 4rem) 0 var(--s-8);
  background: var(--ink-900);
  color: var(--sky-100);
  border-top: var(--edge) solid var(--ink-900);
}

.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-8);
  margin-bottom: var(--s-8);
}

.foot h4 {
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  color: var(--gold-300);
  margin-bottom: var(--s-3);
}

/* :not(.brand) matters — a bare `.foot a` outranks `.brand` and turns
   the footer lockup into a block, which collapses the mark span and
   lets its image expand to the full column width. */
.foot a:not(.brand) {
  display: block;
  padding: 0.28rem 0;
  color: var(--sky-100);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: color 0.16s var(--ease), transform 0.16s var(--ease);
}

.foot a:not(.brand):hover { color: var(--gold-300); transform: translateX(4px); }

.foot .brand { display: inline-flex; margin-bottom: var(--s-4); }

.fine {
  padding-top: var(--s-6);
  border-top: 2px solid rgba(255, 255, 255, 0.12);
  font-size: 0.74rem;
  line-height: 1.7;
  color: #93a3c4;
  max-width: 94ch;
}

.fine strong { color: var(--sky-100); }

/* ============================================================
   Reveal
   ============================================================ */
.rev { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.rev.in { opacity: 1; transform: none; }

/* ============================================================
   Responsive
   ============================================================ */
/* The deck has to clear the fold at every size. Below the
   two-column breakpoint the wheel stacks on top of the copy, so
   it is the thing that gives ground — the numbers never do. */
@media (max-width: 1000px) {
  .deck__in { grid-template-columns: 1fr; gap: clamp(0.5rem, 1.6vw, 1.1rem); }
  .wheel { order: -1; }
  .wheel__img { width: min(56%, 264px); }
  .ticker { display: none; }
  .tagline { max-width: none; margin-bottom: var(--s-4); }
  .lap { margin-bottom: var(--s-3); }
  .tiles { margin-bottom: var(--s-4); }
}

@media (max-width: 820px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wheel__img { width: min(50%, 220px); }
}

@media (max-width: 720px) {
  .navset .navlink { display: none; }
  /* custom properties must live inside a selector block, not
     directly in a media rule */
  :root { --bar-inner: 60px; }
  .topbar__in { height: var(--bar-inner); }
  .deck { padding: 0.4rem 0 0.5rem; }
  .band__head { margin-bottom: var(--s-6); }
  /* a squeezed auto-fit column was clipping the footer blurb */
  .foot__grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .foot__grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .wheel__img { width: min(46%, 178px); }
  .lap { padding: 0.62rem 0.8rem; }
  .lap__v { font-size: 1.55rem; }
  .tagline { font-size: 0.94rem; margin-bottom: var(--s-3); }
  .tile { padding: 0.55rem 0.55rem; }
  .tile__v { font-size: 1.02rem; }
  .cta { margin-bottom: var(--s-3); }
  .cta .btn { flex: 1; padding-inline: 0.75rem; font-size: 0.84rem; }
  .wordmark { margin-bottom: var(--s-3); }
  .eyebrow { margin-bottom: var(--s-3); }
}

/* Short two-column screens (a 1280×800 laptop is the common one):
   the copy column is what overflows, so trim its rhythm. */
@media (max-height: 830px) and (min-width: 1001px) {
  .deck { padding-block: 0.6rem; }
  .wordmark { font-size: clamp(2.6rem, 6.4vw, 5rem); margin-bottom: var(--s-3); }
  .tagline { margin-bottom: var(--s-3); }
  .lap { padding: 0.7rem 1rem; margin-bottom: var(--s-3); }
  .tiles { margin-bottom: var(--s-3); }
  .tile { padding: 0.6rem 0.6rem; }
  .cta { margin-bottom: var(--s-3); }
  .eyebrow { margin-bottom: var(--s-3); }
}

/* Short stacked screens: the strapline goes before any number does */
@media (max-height: 800px) and (max-width: 1000px) {
  .wheel__img { width: min(40%, 168px); }
  .tagline { display: none; }
  .wordmark { font-size: clamp(2.5rem, 8vw, 4rem); }
}

@media (max-height: 700px) and (max-width: 1000px) {
  .wheel__img { width: min(32%, 128px); }
  .eyebrow { display: none; }
  .wordmark { font-size: 2.4rem; margin-bottom: var(--s-2); }
  .tile__k { font-size: 0.4rem; }
  .tile { padding: 0.48rem 0.5rem; }
}

/* ---- X link ------------------------------------------------
   Icon-only, sized to match the pill button beside it. */
.xbtn {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  color: var(--ink-900);
  background: var(--cloud-pure);
  border: var(--edge) solid var(--ink-900);
  border-radius: 50%;
  box-shadow: var(--pop-1);
  transition: transform 0.09s var(--ease), box-shadow 0.09s var(--ease),
    background 0.18s var(--ease), color 0.18s var(--ease);
}

.xbtn svg { width: 17px; height: 17px; }
.xbtn:hover { transform: translateY(-2px); box-shadow: var(--pop-2); background: var(--ink-900); color: var(--cloud-pure); }
.xbtn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink-900); }

@media (max-width: 420px) { .xbtn { width: 34px; height: 34px; } .xbtn svg { width: 15px; height: 15px; } }

/* The X button is a third item in the bar; below ~430px the brand,
   the icon and the CTA no longer fit at full size. */
@media (max-width: 430px) {
  .topbar__in { gap: 0.5rem; }
  .navset { gap: 0.4rem; }
  .brand { gap: 0.45rem; }
  .brand__mark { width: 36px; height: 36px; }
  .brand__name { font-size: 0.98rem; }
  .brand__sub { display: none; }
  /* keep the 40px thumb floor while shrinking horizontally */
  .navset .btn--sm { padding: 0.6rem 0.7rem; font-size: 0.72rem; }
}