/* ==========================================================================
   SPLASH Arcade — Weekly Draw ("The Pool")
   Uses the values in splash-tokens.css. No inline styles anywhere: the page
   script only sets a few custom properties (water level, marks) through the
   CSSOM, which a strict Content-Security-Policy allows.
   ========================================================================== */

/* Lets the water level and its two layers glide instead of jumping. */
@property --level { syntax: "<number>"; inherits: true; initial-value: .5; }
@property --coin-share { syntax: "<number>"; inherits: true; initial-value: .25; }

/* ---- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--splash-deck);
  color: var(--splash-text);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
}
p, h1, h2, h3, dl, dd, ol { margin: 0; }
svg { display: block; }
a { color: var(--splash-cyan-text); text-underline-offset: 2px; }
a:hover { color: #B8F4FA; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid var(--splash-foam); outline-offset: 2px; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 8px; top: -60px; z-index: 10;
  padding: 10px 14px; border-radius: var(--radius-note);
  background: var(--splash-text); color: var(--splash-ink); font-weight: 700;
}
.skip:focus { top: 8px; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }

.label {
  font: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--splash-cyan-text);
}
.title { font: var(--type-title); }

/* ---- Buttons ------------------------------------------------------------ */
.btn-quiet {
  min-height: var(--tap);
  padding: 0 16px;
  border-radius: var(--radius-pill);
  border: 1.5px solid #3A6A84;
  background: transparent;
  color: var(--splash-text);
  font: 600 14px/1 var(--font-body);
}
.btn-quiet:hover { border-color: var(--splash-cyan); }

.btn-primary {
  display: block;
  width: 100%;
  height: 56px;
  margin-top: var(--space-md);
  border: 0;
  border-radius: 28px;
  background: var(--splash-cyan);
  color: var(--splash-ink);
  font: var(--type-button);
  box-shadow: var(--press-primary);
  transition: transform 80ms, box-shadow 80ms;
}
.btn-primary:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--splash-cyan-press); }
.btn-primary:disabled { opacity: .55; }

.round-btn {
  flex: none;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--splash-cyan);
  background: transparent;
  color: var(--splash-cyan);
  font: 800 22px/1 var(--font-display);
}
.round-btn:disabled { opacity: .35; }

/* ---- Top bar -------------------------------------------------------------- */
.top {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px var(--gutter) 0;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "brand utils" "modes modes";
  gap: 8px var(--space-md);
  align-items: center;
}
.brand {
  grid-area: brand;
  display: flex; align-items: center; gap: 8px;
  min-height: var(--tap);
  color: var(--splash-text);
  text-decoration: none;
}
.brand:hover { color: var(--splash-text); }
.brand__drop { width: 16px; height: 22px; fill: var(--splash-cyan); }
.brand__word { font: 800 20px/1 var(--font-display); letter-spacing: .08em; }
.utils {
  grid-area: utils;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-md);
}
.wallet, .guest { justify-self: end; }

/* The connected state, added 2026-10-07. The button stops being a button once a
   wallet is attached: it becomes a label showing which address the page is
   reading for. Not disabled-grey -- a greyed control reads as broken, and this
   one is doing its job. */
.wallet.is-connected {
  cursor: default;
  opacity: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  border-color: color-mix(in srgb, currentColor 35%, transparent);
}
.guest {
  display: flex; align-items: center; gap: 8px;
  font: 600 13px var(--font-body);
  color: var(--splash-text-2);
}
.guest::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--splash-win); }

.modes {
  grid-area: modes;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xs);
  padding: var(--space-xs);
  border-radius: 26px;
  background: var(--splash-deck-raised);
}
.modes__tab {
  height: var(--tap);
  display: flex; align-items: center; justify-content: center;
  border-radius: 22px;
  color: var(--splash-text-2);
  text-decoration: none;
  font: 700 15px var(--font-body);
}
.modes__tab:hover { color: var(--splash-text); }
.modes__tab[aria-current="page"] { background: var(--mode-weekly); color: var(--splash-ink); }

/* ---- Rehearsal note ------------------------------------------------------ */
.rehearsal {
  margin-top: 12px;
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 12px;
  border-radius: var(--radius-note);
  background: var(--splash-rehearsal-bg);
  color: var(--splash-rehearsal-text);
  font: 400 13px/1.4 var(--font-body);
}
.rehearsal__chip {
  flex: none;
  margin-top: 1px;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--splash-rehearsal);
  color: #2A1E00;
  font: 800 10.5px/1.35 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---- Countdown ----------------------------------------------------------- */
.countdown {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
  padding: 18px 0 14px;
}
.countdown__time {
  margin-top: 5px;
  font: var(--type-countdown);
  font-variant-numeric: tabular-nums;
  color: #FFFFFF;
  white-space: nowrap;
}
.countdown__side { display: flex; align-items: flex-end; gap: 36px; }
.countdown__blocks { text-align: right; font: var(--type-proof); color: var(--splash-text-2); white-space: nowrap; }
.countdown__blocks strong { display: block; color: var(--splash-text); }
.countdown__fair { display: none; }
body.is-drawing .countdown__time { color: var(--splash-cyan-text); }

/* ---- Coping: the pool's edge, carrying the sponsor ---------------------- */
.coping {
  height: 34px;
  padding: 0 12px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  overflow: hidden;
  white-space: nowrap;
  background-color: var(--splash-coping);
  background-image: repeating-linear-gradient(90deg, transparent 0 38px, var(--splash-coping-joint) 38px 39px);
  box-shadow: inset 0 -3px 0 #B3C8CB;
  color: var(--splash-coping-ink);
}
.coping__drop { flex: none; width: 7px; height: 9px; fill: currentColor; }
.coping__by { font: 700 10px var(--font-body); letter-spacing: .22em; text-transform: uppercase; opacity: .8; }
.coping__name {
  font: 800 12.5px var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}
.coping.is-long .coping__by { font-size: 9.5px; letter-spacing: .14em; }
.coping.is-long .coping__name { font-size: 11px; letter-spacing: .06em; }
.coping.is-plain .coping__by { display: none; }

/* ---- The pool ------------------------------------------------------------ */
.pool {
  --prize-size: clamp(104px, 30.8vw, 208px);
  --prize-left: 56px;
  --marks-left: 8px;
  --waterline: calc(var(--pool-height) * (1 - var(--level)));
  --water-h: calc(var(--pool-height) - var(--waterline));
  --flips-h: calc(var(--water-h) * var(--coin-share));
  --prize-top: clamp(34px, calc(var(--waterline) - var(--prize-size) * .53), calc(var(--pool-height) - var(--prize-size) * .92));

  position: relative;
  height: var(--pool-height);
  overflow: hidden;
  background-color: var(--splash-wall);
  background-image:
    linear-gradient(var(--splash-tile-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--splash-tile-line) 1px, transparent 1px);
  background-size: var(--pool-tile) var(--pool-tile);
  transition:
    --level var(--dur-rise) var(--ease-water),
    --coin-share var(--dur-rise) var(--ease-water);
}
.pool.is-draining { transition-duration: var(--dur-drain); }
.pool.no-anim { transition: none; }

.pool__air { position: absolute; top: 0; left: 0; right: 0; height: var(--waterline); overflow: hidden; }
.pool__water { position: absolute; top: var(--waterline); left: 0; right: 0; bottom: 0; overflow: hidden; }

.pool__label { position: absolute; left: var(--prize-left); top: 20px; color: #A9DCE6; }

.pool__tickets { position: absolute; inset: 0; background: linear-gradient(180deg, var(--splash-water-surface), var(--splash-water)); }
.pool__flips {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--flips-h);
  background: var(--splash-water-deep);
  box-shadow: inset 0 2px 0 #4FB9CF;
}
.pool__tiles {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(4, 40, 60, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(4, 40, 60, .08) 1px, transparent 1px);
  background-size: var(--pool-tile) var(--pool-tile);
  background-position: 0 calc(0px - var(--waterline));
}

/* Past weeks: dashed high-water marks on the wall, drawn in both layers */
.pool__marks { position: absolute; inset: 0; pointer-events: none; }
.mark { position: absolute; left: 0; right: 0; top: calc(var(--pool-height) * var(--mark)); border-top: 1.5px dashed rgba(255, 255, 255, .22); }
.pool__water .mark { top: calc(var(--pool-height) * var(--mark) - var(--waterline)); border-top-color: rgba(5, 40, 60, .35); }
.mark__text { position: absolute; left: var(--marks-left); bottom: 3px; font: 600 10px/1.15 var(--font-proof); color: #A9DCE6; white-space: pre; }
.pool__water .mark__text { color: #05324A; }
.mark__text--below { bottom: auto; top: 4px; }

/* The prize: drawn twice, white above the waterline and ink below it */
.pool__prize {
  position: absolute;
  left: var(--prize-left);
  top: var(--prize-top);
  font: 800 var(--prize-size)/1 var(--font-display);
  letter-spacing: var(--track-prize);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #FFFFFF;
}
.pool__water .pool__prize { top: calc(var(--prize-top) - var(--waterline)); color: var(--splash-ink); }
.pool__unit { position: relative; top: 1.15em; vertical-align: top; margin-left: .4em; font-size: .125em; letter-spacing: .06em; }

.pool__source { position: absolute; left: var(--prize-left); font: 700 14px var(--font-body); }
.pool__source span { font-weight: 500; }
.pool__source--tickets { bottom: calc(var(--flips-h) + 14px); color: var(--splash-ink); }
.pool__source--flips { bottom: max(10px, calc(var(--flips-h) / 2 - 9px)); color: #FFFFFF; }
.pool.is-thin-flips .pool__source--flips,
.pool.is-shallow .pool__source { display: none; }

/* Waterline */
.pool__surface { position: absolute; left: 0; right: 0; top: calc(var(--waterline) - 7px); height: 14px; overflow: hidden; }
.pool__surface svg { width: calc(100% + 65px); height: 14px; animation: pool-sway var(--dur-sway) linear infinite; }
.pool__wave-fill { fill: var(--splash-water-surface); }
.pool__wave-line { fill: none; stroke: var(--splash-foam); stroke-width: 2; }
@keyframes pool-sway { to { transform: translateX(-65px); } }

/* A coin drops in when the pot goes up */
.pool__coin { position: absolute; right: 28px; top: 0; width: 22px; height: 22px; opacity: 0; }
.pool__coin.is-dropping { animation: coin-drop var(--dur-drop) var(--ease-drop) forwards; }
.coin__edge { fill: #0B6F85; }
.coin__face { fill: #33CCE0; }
.coin__mark { fill: #0A2E3F; }
@keyframes coin-drop {
  0% { transform: translateY(-30px); opacity: 0; }
  25% { opacity: 1; }
  92% { transform: translateY(calc(var(--waterline) - 14px)); opacity: 1; }
  100% { transform: translateY(calc(var(--waterline) - 6px)); opacity: 0; }
}
.pool__ring {
  position: absolute; right: 14px; top: calc(var(--waterline) - 7px);
  width: 50px; height: 14px;
  border: 2px solid var(--splash-foam); border-radius: 50%;
  opacity: 0;
}
.pool__ring.is-rippling { animation: ring var(--dur-ripple) ease-out forwards; }
@keyframes ring { 0% { transform: scale(.3); opacity: .95; } 100% { transform: scale(1.5); opacity: 0; } }

/* Empty pool */
.pool__empty { position: absolute; left: var(--prize-left); right: 112px; top: 48%; }
.pool__empty-title { font: 800 34px/1.05 var(--font-display); color: #FFFFFF; }
.pool__empty-text { margin-top: 8px; font: 400 15px/1.4 var(--font-body); color: #CFE9EF; }
.pool__empty-text strong { color: #FFFFFF; }
body.is-empty .pool__prize,
body.is-empty .pool__source { display: none; }

/* The droplet: only where no money is moving */
.droplet { position: absolute; right: 44px; bottom: 9px; width: 50px; height: 66px; }
.droplet__body { fill: var(--splash-cyan); stroke: var(--splash-ink); stroke-width: 2.5; }
.droplet__shine { fill: #FFFFFF; opacity: .55; }
.droplet__eye { fill: var(--splash-ink); }
.droplet__glint { fill: #FFFFFF; }
.droplet__eyes { animation: droplet-look 6s ease-in-out infinite; }
@keyframes droplet-look { 0%, 40%, 100% { transform: translate(0, 0); } 50%, 90% { transform: translate(-2px, -2px); } }
body.is-loading .droplet,
body.is-offline .droplet { right: auto; left: calc(50% - 25px); bottom: auto; top: calc(50% - 76px); }
body.is-loading .droplet { animation: droplet-bob 1.6s ease-in-out infinite; }
@keyframes droplet-bob { 50% { transform: translateY(-8px); } }

/* Loading / offline message inside the pool */
.pool__status {
  position: absolute; left: var(--gutter); right: var(--gutter); top: calc(50% + 6px);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center;
}
.pool__status-text { font: 600 15px/1.4 var(--font-body); color: #CFE9EF; }
body:not(.is-loading):not(.is-offline) .pool__status { display: none; }
body.is-loading .pool,
body.is-offline .pool { --level: .1; --coin-share: 0; }
body.is-loading .getin,
body.is-offline .getin,
body.is-loading .chance,
body.is-offline .chance { opacity: .45; pointer-events: none; }
body.is-loading .pool__prize,
body.is-loading .pool__source,
body.is-loading .pool__surface,
body.is-offline .pool__prize,
body.is-offline .pool__source { visibility: hidden; }

/* The winner floats up when the pool drains */
.pool__winner {
  position: absolute; left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 32px);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--splash-win);
  color: var(--splash-ink);
  font: 800 18px/1.25 var(--font-display);
  text-align: center;
  animation: float-up 800ms var(--ease-water) both;
}
@keyframes float-up { from { transform: translate(-50%, 30px); opacity: 0; } }

/* ---- Below the pool -------------------------------------------------------- */
.you {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 46px;
  padding: 0 var(--gutter);
  background: var(--splash-deck-deep);
  color: var(--splash-text);
  text-decoration: none;
  font: 400 14px/1.3 var(--font-body);
}
.you:hover { color: var(--splash-text); }
.you__left { display: flex; align-items: baseline; gap: 10px; }
.you__odds { font: 800 18px var(--font-display); color: var(--splash-cyan-text); white-space: nowrap; }
.you__odds--quiet { font: 400 13px var(--font-body); color: var(--splash-text-2); }

.getin { padding: 16px var(--gutter) 0; }
.getin__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper__count { min-width: 78px; text-align: center; }
.stepper__count strong { display: block; font: 800 24px/1 var(--font-display); }
.stepper__count span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--splash-text-2); }
.getin__cost { text-align: right; }
.getin__cost strong { display: block; font: var(--type-figure); }
.getin__cost > span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--splash-text-2); }

.fine { margin-top: 14px; font: var(--type-small); color: var(--splash-text-2); }
.fine strong { color: var(--splash-text); }

.rope {
  height: 8px;
  margin-top: 22px;
  border-radius: 4px;
  background-image: repeating-linear-gradient(90deg, var(--splash-cyan) 0 12px, #E8F6F8 12px 24px);
}

.chance { padding: 20px var(--gutter) 28px; }
.chance__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.chance__hint { font-size: 12px; color: var(--splash-text-2); text-align: right; }
.chance__row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 8px; }
.chance__pct { min-width: 112px; font: var(--type-stat); color: var(--splash-cyan-text); }
.chance__text { font: 400 14.5px/1.4 var(--font-body); }

.dots { display: grid; grid-template-columns: repeat(auto-fill, 9px); gap: 4px 4.6px; margin-top: 14px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #2B4C64; }
.dot.is-mine { background: var(--splash-cyan); box-shadow: 0 0 0 2px rgba(53, 211, 230, .25); }
.dot.is-new { animation: dot-pop 500ms var(--ease-water); }
@keyframes dot-pop { from { transform: scale(0); } }
.dots__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 12.5px; color: var(--splash-text-2); }
.dots__key { display: flex; align-items: center; gap: 6px; }
.dots__key::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #2B4C64; }
.dots__key--mine::before { background: var(--splash-cyan); }

.fair { padding: 30px var(--gutter) 28px; background: var(--splash-deck-deep); }
.fair__intro, .history__intro { margin-top: 6px; font: 400 14.5px/1.5 var(--font-body); color: var(--splash-text-2); }
.fair__list { margin-top: 18px; display: flex; flex-direction: column; gap: 18px; }
.fair__item { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; }
.fair__item dt { font: 600 12px/1.45 var(--font-proof); color: var(--splash-cyan-text); text-transform: uppercase; }
.fair__item dd { font: 400 14.5px/1.5 var(--font-body); }
.fair__realm { margin-top: 16px; min-height: var(--tap); display: flex; align-items: center; font: 600 12.5px var(--font-proof); color: var(--splash-text-2); }

.history { padding: 30px var(--gutter) 12px; }
.history__list { list-style: none; padding: 0; margin-top: 18px; display: flex; flex-direction: column; gap: 22px; }
.week__head { display: flex; justify-content: space-between; align-items: baseline; }
.week__amount { font: var(--type-figure); }
.bar { height: 6px; margin: 8px 0; border-radius: 3px; background: #1A3A52; }
.bar__fill { width: calc(var(--fill) * 100%); height: 6px; border-radius: 3px; background: var(--splash-cyan); }
.week__who { display: flex; justify-content: space-between; gap: 12px; font: var(--type-proof); color: var(--splash-text-2); }
.week__meta { margin-top: 2px; font-size: 12.5px; color: var(--splash-text-2); }

.foot {
  margin-top: 18px;
  padding: 18px var(--gutter) 28px;
  border-top: 1px solid var(--splash-divider);
  font: 500 11.5px/1.75 var(--font-proof);
  color: var(--splash-text-3);
}
.foot__inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; }

/* ---- Toast ----------------------------------------------------------------- */
.toast {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 20;
  width: max-content; max-width: min(360px, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--splash-text);
  color: var(--splash-ink);
  font: 600 14px/1.4 var(--font-body);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  opacity: 0;
  transform: translate(-50%, 16px);
  pointer-events: none;
  transition: opacity 200ms, transform 200ms var(--ease-water);
}
.toast.is-shown { opacity: 1; transform: translate(-50%, 0); }

/* ---- 600px and up: one roomier column ---------------------------------- */
@media (min-width: 600px) {
  .below { max-width: 680px; margin: 0 auto; }
  .you { margin: 0 var(--gutter); border-radius: 0 0 12px 12px; }
  .fair { background: transparent; border-top: 1px solid var(--splash-divider); }
  .coping__name { font-size: 14px; }
}

/* ---- 1024px and up: same content, more room ----------------------------- */
@media (min-width: 1024px) {
  .top {
    height: 76px;
    padding-top: 0;
    grid-template-columns: minmax(0, 1fr) 380px minmax(0, 1fr);
    grid-template-areas: "brand modes utils";
  }
  .brand__word { font-size: 22px; }
  .countdown { padding: 26px 0 18px; }
  .countdown__blocks strong { display: inline; }
  .countdown__fair { display: flex; align-items: center; min-height: var(--tap); font: 600 14px var(--font-body); }
  .coping { height: 40px; }
  .coping__name { font-size: 15px; letter-spacing: .16em; }
  .coping__by { font-size: 11px; }

  .pool { --prize-left: calc(max(var(--gutter), (100vw - 1200px) / 2 + var(--gutter)) + 66px); --marks-left: calc(var(--prize-left) - 62px); }
  .pool__label { top: 34px; }
  .pool__source { font-size: 16px; }
  .pool__coin { right: 22%; }
  .pool__ring { right: calc(22% - 14px); }

  .below {
    max-width: 1200px;
    padding: 0 var(--gutter);
    display: grid;
    grid-template-columns: 440px minmax(0, 1fr);
    gap: 64px;
    align-items: start;
  }
  .below__act { position: sticky; top: 16px; padding-top: 28px; }
  .you { margin: 0; padding: 0 16px; border-radius: 12px; }
  .getin, .chance { padding-left: 0; padding-right: 0; }
  .fair { padding: 28px 0 0; border-top: 0; }
  .fair .title, .history .title { font-size: 26px; }
  .fair__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; }
  .fair__item { grid-template-columns: 1fr; gap: 4px; }
  .fair__item dd { font-size: 15px; }
  .history { padding: 30px 0 12px; }
  .history__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .week__who { flex-direction: column; gap: 0; }
  .foot { margin-top: 40px; }
  .foot__inner { flex-direction: row; gap: 32px; }
}

/* ---- Each game's own colour on its tab -------------------------------------- */
.is-duel .modes__tab[aria-current="page"] { background: var(--mode-duel); }
.is-hourly .modes__tab[aria-current="page"] { background: var(--mode-hourly); }

/* The link to the rules, added 2026-10-07 when the site went in front of people.
   It sits in the .utils flex row beside the wallet pill rather than as a fourth
   game tab: it is not a game, and putting it in the tab strip would imply it is
   one (that's what broke .modes into two rows). It stays a quiet text link so it
   never competes with Connect wallet for attention. */
.how-link {
  font-size: .82rem;
  opacity: .72;
  text-decoration: underline;
  text-underline-offset: .18em;
  white-space: nowrap;
  color: var(--splash-text-2);
}
.how-link:hover, .how-link:focus-visible { opacity: 1; }
.how-link[aria-current="page"] {
  opacity: 1;
  color: var(--splash-cyan);
  text-decoration-color: currentColor;
}

/* The unsettled banner. Same shape as the rehearsal one -- it is the same kind of
   statement, "this page is not showing you the normal thing" -- but amber rather
   than the rehearsal's neutral, because this one wants acting on. */
.rehearsal.stalled { border-color: color-mix(in srgb, #F6C945 48%, transparent); }
.rehearsal.stalled .rehearsal__chip { background: #F6C945; color: #0F2335; }

/* The fourth tab is the longest label in the strip and it pushed the whole
   header off a phone -- 115px of horizontal scroll on the homepage, measured.
   So the tab carries both labels and the viewport picks one. Both are in the
   DOM, so a screen reader and a search engine always see the full wording. */
.t-narrow { display: none; }
@media (max-width: 26rem) {
  .t-wide { display: none; }
  .t-narrow { display: inline; }
}

/* THE CONTRACT LINK OVERFLOWED EVERY PHONE, and had done since before the games
   went live -- 115px of horizontal scroll on the homepage, which I first blamed
   on a nav tab I had just added. It is not the tab: the tab strip is 358px and
   fits. It is this link. A package path under an address namespace is 40
   characters of unbroken base32 and no normal wrapping rule can break it.
   Measured by walking every element and asking which one ends past the viewport,
   rather than by guessing at the thing I had changed most recently. */
.fair__realm, .fair__realm a, [data-realm-line], [data-realm-line] a {
  word-break: break-all;
  overflow-wrap: anywhere;
  max-width: 100%;
  display: inline-block;
}

/* A FEW DOZEN PIXELS OF SIDEWAYS SCROLL REMAIN ON A NARROW PHONE, and they are
   the artwork: the pool and wave graphics are deliberately far wider than the
   viewport so they can drift across it, and a 2,600px <rect> in a clipped <svg>
   is that technique working. The svg BOX leaks a little past the edge.
   NOT FIXED HERE, and deliberately not papered over with overflow-x on a
   container: the obvious places to put it either do nothing (tried: .wrap is not
   these elements' containing block) or kill position:sticky, which the rules
   page's contents rail needs. It is cosmetic, it predates the games going live,
   and it wants the designer's eye on the artwork rather than a blunt clip from
   me. Recorded so the next person does not rediscover it as new. */