/* TICKER. Pop art on newsprint, one accent per band. No framework, no build step. */

:root{
  --paper:#F2EFE6;
  --ink:#0B0B0B;
  --hot:#FF2D95;
  --acid:#FFE500;
  --cyan:#00E5FF;
  --orange:#FF5C00;
  --mint:#00E08F;
  --violet:#7A3BFF;
  --lime:#CCFF00;                  /* Robinhood Chain, sampled off its own mark */
  --rhgreen:#00C805;               /* Robinhood green */
  --rule:rgba(11,11,11,.16);
  --pad:clamp(18px,4vw,64px);
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box}
/* The hidden attribute is display:none from the UA sheet, which any class with
   a display of its own outranks. The sign-in button is a .btn, so it stayed on
   screen while the script believed it had hidden it. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--ink);
  font-family:var(--display);font-variation-settings:"wdth" 100,"wght" 400;
  overflow-x:hidden;
}
body.is-loading{overflow:hidden;height:100vh}
a{color:inherit}
img{max-width:100%}

/* ---------- custom cursor ---------- */
.cursor{
  position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
  width:14px;height:14px;background:var(--paper);mix-blend-mode:difference;
  transform:translate3d(-100px,-100px,0);
  transition:width .22s cubic-bezier(.2,.8,.2,1),height .22s cubic-bezier(.2,.8,.2,1);
  display:grid;place-items:center;border-radius:2px;
}
.cursor.is-big{width:78px;height:78px;border-radius:50%}
.cursor__label{
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink);opacity:0;transition:opacity .16s;white-space:nowrap;
}
.cursor.is-big .cursor__label{opacity:1}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ---------- preloader ---------- */
/* A silkscreen press: the band reprints, the number stamps, and at 100 the
   whole thing is pulled off the page in strips. The page ground stays black
   throughout, so the fast part is the band and the number, not the screen. */
.pre{position:fixed;inset:0;z-index:9998;overflow:hidden}
.pre__strips{position:absolute;inset:0;display:flex;z-index:1}
.pre__strips i{
  flex:1;background:var(--ink);transform:translateY(0);
  transition:transform .44s cubic-bezier(.76,0,.24,1);
}
.pre.is-done .pre__strips i{transform:translateY(-101%)}
.pre__inner{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;justify-content:center;gap:2.2vh;
  transition:opacity .16s ease;
}
.pre.is-done .pre__inner{opacity:0}
.pre__tape{
  font-family:var(--mono);font-size:clamp(11px,1.35vw,15px);white-space:nowrap;
  color:var(--paper);opacity:.42;will-change:transform;
}
.pre__tape--b{opacity:.28}
.pre__band{display:flex;gap:3px;height:clamp(34px,6vh,64px);padding:0 var(--pad)}
.pre__band i{flex:1;border-radius:3px;background:var(--ink)}
.pre__num{
  font-family:var(--display);font-variation-settings:"wdth" 125,"wght" 900;
  font-size:clamp(70px,19vw,250px);line-height:.82;padding:0 var(--pad);
  color:var(--paper);will-change:font-variation-settings;
}
.pre__num i{font-style:normal;font-size:.26em;vertical-align:super;opacity:.4}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px var(--pad);mix-blend-mode:difference;color:var(--paper);
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
}
.nav__mark{font-family:var(--display);font-variation-settings:"wdth" 125,"wght" 800;
  font-size:17px;letter-spacing:.02em;text-decoration:none}
.nav__links{display:flex;gap:22px}
.nav__links a{text-decoration:none;opacity:.75}
.nav__links a:hover{opacity:1}

/* ---------- hero ---------- */
.hero{
  background:var(--paper);min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:96px var(--pad) 40px;position:relative;
}
.hero__sub{
  display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
}
.hero__sub > span{white-space:nowrap}
.hero__dot{width:7px;height:7px;border-radius:50%;background:var(--hot);
  animation:blink 1.6s steps(1,end) infinite}
@keyframes blink{0%,60%{opacity:1}61%,100%{opacity:.15}}
.hero__word{
  margin:2vh 0 0;font-size:clamp(74px,20.5vw,340px);line-height:.78;
  letter-spacing:-.02em;display:flex;flex-wrap:nowrap;user-select:none;
}
.hero__word span{
  display:inline-block;font-variation-settings:"wdth" 100,"wght" 700;
  will-change:font-variation-settings,transform;
}
.hero__foot{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:28px;margin-top:2.6vh;border-top:1px solid var(--rule);padding-top:20px;
}
.hero__copy{max-width:46ch;margin:0;font-size:clamp(15px,1.35vw,19px);line-height:1.45}
.hero__cta{display:flex;gap:10px;flex-wrap:wrap}
.btn{
  display:inline-block;padding:14px 26px;border:1.5px solid var(--ink);border-radius:100px;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;background:transparent;cursor:pointer;
  transition:background .18s,color .18s,transform .18s;
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn--hot{background:var(--hot);border-color:var(--hot);color:var(--paper)}
.btn--hot:hover{background:var(--ink);border-color:var(--ink)}
/* The desktop hint. Hidden by default and shown only where the pointer cannot
   hover, which is the same test app.js uses to disable the cursor pieces, so
   the note appears exactly when there is nothing to see. */
.hero__touch{display:none}
@media (hover:none),(pointer:coarse){
  .hero__touch{
    display:block;margin:18px 0 0;padding-top:14px;border-top:1px solid var(--rule);
    font-family:var(--mono);font-size:12px;line-height:1.5;opacity:.6;max-width:38ch;
  }
}
.hero__scroll{
  position:absolute;left:var(--pad);bottom:18px;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;opacity:.5;
}
.hero__scroll span{display:inline-block;animation:nudge 2.2s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ---------- tapes ---------- */
.tapes{border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);background:var(--ink)}
.tape{overflow:hidden;padding:11px 0;background:var(--ink);color:var(--paper)}
.tape--alt{background:var(--acid);color:var(--ink);border-top:1.5px solid var(--ink)}
.tape__row{
  display:inline-flex;white-space:nowrap;will-change:transform;
  font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 800;
  font-size:clamp(19px,3.1vw,44px);letter-spacing:-.01em;text-transform:uppercase;
}
.tape__row b{font-weight:inherit;padding:0 .32em}
.tape__row i{font-style:normal;padding:0 .32em}
.tape__row i:not(.up):not(.down){opacity:.4}
.tape__row .up{color:var(--mint)}
.tape--alt .tape__row .up{color:var(--ink)}
.tape__row .down{color:var(--hot)}

/* ---------- bands ---------- */
.band{padding:clamp(56px,9vw,140px) var(--pad)}
.sec-row{display:flex;gap:clamp(16px,4vw,64px)}
@media (max-width:700px){.sec-row{display:block}.band__index{padding-top:0;margin-bottom:10px}}
.band--paper{background:var(--paper)}
.band--acid{background:var(--acid)}
.band__index{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;padding-top:.7em;opacity:.45;
  flex:0 0 auto;
}
.band__index--light{color:var(--paper);opacity:.5}
.band__body > p{max-width:58ch}
.band__title{
  font-size:clamp(44px,8.4vw,132px);line-height:.86;margin:0 0 .34em;
  font-variation-settings:"wdth" 118,"wght" 800;letter-spacing:-.025em;text-transform:lowercase;
}
.band__title--light{color:var(--paper)}
.band__title span{display:inline-block;will-change:transform,font-variation-settings}
.band p{font-size:clamp(15px,1.4vw,20px);line-height:1.5;max-width:56ch;margin:0 0 1em}
.band .small{font-size:14px;opacity:.7;line-height:1.5}
.band a{text-underline-offset:3px}

.facts{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:26px 0 0;max-width:780px}
.facts li{
  border:1.5px solid var(--ink);border-radius:100px;padding:9px 17px;
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;display:flex;gap:9px;
}
.facts b{opacity:.45;font-weight:400}

.spec{width:100%;max-width:640px;border-collapse:collapse;margin:8px 0 22px}
.spec th,.spec td{
  text-align:left;padding:13px 0;border-bottom:1.5px solid rgba(11,11,11,.22);
  font-family:var(--mono);font-size:13px;font-weight:400;vertical-align:top;
}
.spec th{opacity:.5;width:44%;text-transform:uppercase;letter-spacing:.06em;padding-right:16px}
/* A contract address is 42 characters with no space in it, so it runs off the
   right of a phone unless it is told it may break anywhere. The label column
   also gives up width there, or a wrapped "creator allocation" leaves the value
   nowhere to sit. */
.spec td code{font:inherit;overflow-wrap:anywhere}
@media (max-width:600px){
  .spec th{width:36%}
  .spec th,.spec td{font-size:12px}
}

/* ---------- warhol grid ---------- */
.grid-sec{background:var(--ink);color:var(--paper);padding:clamp(56px,9vw,130px) var(--pad)}
.grid-sec__head{margin-bottom:34px}
.grid-sec p{max-width:54ch;font-size:clamp(15px,1.4vw,19px);line-height:1.5;opacity:.72;margin:.4em 0 0}
.grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:3px;
  border:3px solid var(--paper);background:var(--paper);
}
@media (max-width:760px){.grid{grid-template-columns:repeat(2,1fr)}}
.cell{
  aspect-ratio:1/1;display:grid;place-items:center;position:relative;overflow:hidden;
  /* The default is what the page looks like before the script paints, and with
     no script at all: black panels, paper text, readable either way. Without it
     the cells sit on the grid's white ground and flash before they print. */
  background:var(--ink);color:var(--paper);
  transition:background-color .45s cubic-bezier(.2,.8,.2,1),color .45s cubic-bezier(.2,.8,.2,1);
}
.cell__w{
  font-variation-settings:"wdth" 122,"wght" 900;font-size:clamp(15px,2.5vw,34px);
  letter-spacing:-.02em;text-transform:uppercase;transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.cell.is-hot .cell__w{transform:scale(1.14)}
.cell__n{
  position:absolute;top:7px;left:9px;font-family:var(--mono);font-size:10px;opacity:.38;
}

/* ---------- get it ---------- */
.get{background:var(--violet);color:var(--paper);padding:clamp(56px,9vw,130px) var(--pad)}
.steps{list-style:none;counter-reset:s;padding:0;margin:30px 0 40px;max-width:760px}
.steps li{
  counter-increment:s;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;
  padding:20px 0;border-top:1.5px solid rgba(242,239,230,.32);
}
.steps li::before{
  content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:12px;opacity:.55;
  flex:0 0 34px;
}
.steps b{font-variation-settings:"wdth" 112,"wght" 800;font-size:clamp(19px,2.3vw,30px);
  text-transform:lowercase;letter-spacing:-.01em;flex:0 0 auto}
.steps span{font-size:15px;line-height:1.45;opacity:.78;flex:1 1 240px;min-width:200px}
.mini{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  background:transparent;color:inherit;border:1.5px solid currentColor;border-radius:100px;
  padding:8px 15px;cursor:pointer;transition:background .18s,color .18s;
}
.mini:hover{background:var(--paper);color:var(--violet)}
.addr{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border:1.5px dashed rgba(242,239,230,.5);border-radius:14px;padding:17px 20px;max-width:760px;
}
.addr[data-state="live"]{border-style:solid;border-color:var(--paper)}
.addr__label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.55}
.addr__val{font-family:var(--mono);font-size:clamp(12px,1.5vw,15px);word-break:break-all}
.addr__copy{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  background:var(--paper);color:var(--violet);border:0;border-radius:100px;padding:7px 14px;cursor:pointer;
}

/* ---------- the drop: a ball, gravity, and a cursor to keep it up ---------- */
/* .band__body is a flex item sized by its contents, and a game field has no
   contents to be sized by, so it collapsed to a 245px sliver. Scoped here
   rather than put on .band__body, which would reflow four other pages. */
.drop__body{flex:1 1 auto;min-width:0;max-width:780px}
.hud,.field{width:100%}

/* Shown only once batch one is full, above the box rather than under the form:
   somebody deserves to know before they spend twenty-three seconds on it. */
.drop__full{
  margin:4px 0 16px;padding:14px 18px;border:1.5px solid var(--hot);border-radius:14px;
  font-family:var(--mono);font-size:12.5px;line-height:1.55;max-width:62ch;
}

/* The batch-full / closed notice on the drop, said above the box. */
.drop__full--down{display:block;max-width:70ch;margin-bottom:18px}
.gate{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:4px 0 16px;
  padding:14px 18px;border:1.5px dashed rgba(11,11,11,.35);border-radius:14px;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
}
.gate[data-state="in"]{border-style:solid;border-color:var(--ink)}
.gate[data-state="off"]{border-color:var(--hot);color:#B3005C}
.gate__msg{flex:1 1 220px;min-width:0;opacity:.75;text-transform:none;letter-spacing:.04em;
  font-size:12.5px;line-height:1.5}
.gate__go{padding:10px 20px}
/* Locked until X says who you are. Pointer events stay on, so the note inside
   is still readable and the box does not look broken, it looks shut. */
.field.is-locked{opacity:.55}
.field.is-locked .ball{filter:grayscale(1)}

.drop__steps{margin:18px 0 4px}
.drop__steps input{
  display:block;width:100%;max-width:520px;margin:12px 0 0;
  font-family:var(--mono);font-size:13.5px;padding:13px 16px;
  border:1.5px solid var(--ink);border-radius:100px;background:transparent;color:inherit;
}
.drop__steps input:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
/* Shut, and looking it. A disabled field that still looks like a field invites
   somebody to type into it and wonder why nothing happens. */
.drop__steps input:disabled{opacity:.4;cursor:not-allowed}
.btn:disabled,.mini:disabled{opacity:.5;cursor:not-allowed}
.drop__steps .mini{margin-top:12px}

.hud{
  display:flex;gap:3px;margin:6px 0 14px;background:var(--ink);border:1.5px solid var(--ink);
}
.hud__cell{
  flex:1;background:var(--paper);padding:11px 14px;display:flex;flex-direction:column;gap:3px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
}
.hud__cell span{opacity:.5}
.hud__cell b{
  font-family:var(--display);font-variation-settings:"wdth" 118,"wght" 800;
  font-size:clamp(26px,3.4vw,40px);line-height:1;letter-spacing:-.02em;font-weight:400;
}
/* The score is the one number that changes every frame, so it gets tabular
   figures. Without them the box twitches as the digits change width. */
#gScore,#gBest{font-variant-numeric:tabular-nums}

.field{
  position:relative;overflow:hidden;background:var(--ink);border:1.5px solid var(--ink);
  height:clamp(330px,52vh,540px);
  /* A finger on the ball must not scroll the page underneath it. */
  touch-action:none;cursor:none;
}
.field__floor{
  position:absolute;left:0;right:0;bottom:0;height:8px;background:var(--hot);
}
.field__note{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;
  font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--paper);opacity:.62;padding:0 20px;pointer-events:none;
}
.field.is-live .field__note{opacity:0}
.field.is-over .field__note{opacity:1;color:var(--hot)}
.ball{
  position:absolute;top:0;left:0;display:grid;place-items:center;border-radius:50%;
  font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 900;
  letter-spacing:-.02em;text-transform:uppercase;user-select:none;will-change:transform;
  background:var(--acid);color:var(--ink);
}
/* The pop on a save is a transform on a wrapper-free element, so it has to
   compose with the position transform: the script writes both together. */
.ball.is-hit{box-shadow:0 0 0 6px rgba(242,239,230,.14)}

.drop__form{margin:26px 0 0;border-top:1.5px solid var(--ink);padding-top:22px}
.drop__title{
  font-family:var(--display);font-variation-settings:"wdth" 118,"wght" 800;
  font-size:clamp(30px,4.6vw,54px);line-height:1;letter-spacing:-.025em;margin:0 0 .3em;
  text-transform:lowercase;
}
.drop__row{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 0}
.drop__row input{
  flex:1 1 320px;min-width:0;font-family:var(--mono);font-size:14px;
  padding:14px 16px;border:1.5px solid var(--ink);border-radius:100px;background:transparent;
  color:inherit;
}
.drop__row input:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
.drop__pot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.drop__msg{font-family:var(--mono);font-size:13px;margin:14px 0 0;min-height:1.4em}
.drop__msg[data-tone="bad"]{color:#B3005C}
.drop__fine{margin-top:14px;max-width:58ch}

/* ---------- the board ---------- */
/* A column beside the game on a wide screen and a block under it on anything
   narrower. The game field is NOT allowed to give up width for it: the physics
   are tuned to this box and the server replays a run at the size it was played
   at, so column one is pinned to the 780px the field already had and the board
   only appears when there is room next to it. */
/* 1280 is not a taste, it is the arithmetic. The section row is padding +
   an empty index column + its gap, so the body gets viewport - 3 * 4vw, and
   780 + 28 + 300 needs 1108 of it. At 1280 there is 1126. Any lower and the
   two columns do not fit, which is why the field is never asked to shrink. */
@media (min-width:1280px){
  /* Row gap 0, column gap 28. A row gap would put 28px between the sign-in
     strip, the score row, the box and the form, which are spaced by their own
     margins and were laid out that way before this was a grid. The gap here is
     only meant to hold the board off the box. */
  .drop__body{max-width:1108px;display:grid;grid-template-columns:780px 300px;gap:0 28px}
  .drop__body > *{grid-column:1;min-width:0}
  /* Spanning the rows, not sitting in the first one: sticky is relative to the
     item's grid area, and an area the height of the sign-in strip has nothing
     to travel down. Spanning gives it the section to move in, so the board
     stays beside the box while somebody is playing. */
  .lb{grid-column:2;grid-row:1 / span 40;position:sticky;top:96px;align-self:start}
}
.lb{
  margin:26px 0 0;border:1.5px solid var(--ink);border-radius:16px;padding:16px 16px 14px;
  min-width:0;
}
@media (min-width:1280px){.lb{margin:0}}
.lb__title{
  font-family:var(--display);font-variation-settings:"wdth" 118,"wght" 800;font-weight:400;
  font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em;text-transform:lowercase;
  margin:0 0 8px;
}
/* Scoped through .lb because `.band p` sets a 15-20px reading size for the
   argument these pages are made of, and it outranks a bare class. The board is
   not prose, it is a control. */
.lb .lb__lead{
  font-family:var(--mono);font-size:11.5px;line-height:1.6;margin:0 0 14px;
  color:rgba(11,11,11,.72);max-width:none;
}
.lb .lb__lead b{color:var(--ink);font-weight:700}
.lb .lb__note{
  font-family:var(--mono);font-size:11.5px;line-height:1.6;margin:0;
  color:rgba(11,11,11,.6);max-width:none;
}
/* Fifty rows is three and a half thousand pixels, which is not a column beside
   a game, it is a second page. The list scrolls inside itself and the count
   underneath says how much of it is out of sight. */
.lb__list{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;
  max-height:min(50vh,440px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;
}
/* The fade goes on only when there is something to scroll to, added by the
   script. Baked into the class it would soften the first and last row of a
   nine-row board that fits perfectly well. */
.lb__list.is-long{
  -webkit-mask-image:linear-gradient(180deg,#0000 0,#000 16px,#000 calc(100% - 16px),#0000 100%);
  mask-image:linear-gradient(180deg,#0000 0,#000 16px,#000 calc(100% - 16px),#0000 100%);
}

.lb__row{
  display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;
  gap:0 10px;padding:8px 10px;border-radius:11px;background:rgba(11,11,11,.05);
}
/* The three that are worth chasing, inverted so the column has a top rather
   than fifty equal rows. Below three it is a list; the top of it is a podium. */
.lb__row--top{background:var(--ink);color:var(--paper)}
.lb__pos{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;opacity:.5;
  font-variant-numeric:tabular-nums;
}
.lb__row--top .lb__pos{opacity:.75}
.lb__pic{
  width:32px;height:32px;border-radius:50%;display:block;object-fit:cover;
  background:rgba(11,11,11,.12);
}
.lb__row--top .lb__pic{background:rgba(242,239,230,.2)}
/* The picture comes from X and can be gone: somebody changes their avatar and
   the old URL 404s. Initials are what is left, and they must not look like a
   mistake. */
.lb__pic--none{
  display:grid;place-items:center;font-family:var(--display);
  font-variation-settings:"wdth" 112,"wght" 800;font-size:13px;text-transform:uppercase;
}
.lb__who{
  font-family:var(--mono);font-size:12.5px;color:inherit;text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.lb__who:hover{text-decoration:underline}
.lb__score{
  font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 800;font-weight:400;
  font-size:18px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
/* Second line, under the handle and the score, in the two columns they sit in. */
.lb__tail{
  grid-column:3 / -1;display:flex;align-items:center;gap:8px;margin-top:3px;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
}
.lb__bonus{
  background:var(--acid);color:var(--ink);border-radius:100px;padding:2px 7px;font-weight:700;
}
.lb__row--top:nth-child(2) .lb__bonus{background:var(--cyan)}
.lb__row--top:nth-child(3) .lb__bonus{background:var(--mint)}
.lb__post{color:inherit;opacity:.6;text-decoration:none;border-bottom:1px solid currentColor}
.lb__post:hover{opacity:1}
/* Your own row, so a column of fifty strangers has you in it somewhere. */
.lb__row--you{outline:2px solid var(--hot);outline-offset:-2px}
.lb .lb__note--count{margin-top:12px;text-align:center;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase}
/* Where you are, kept in sight when the list has scrolled you out of it. The
   list itself always opens on the podium, because the podium is the argument
   for playing again; this is how somebody in the thirties still finds
   themselves without hunting. */
.lb__you{margin-top:8px;border-top:1.5px dashed rgba(11,11,11,.3);padding-top:8px}
.lb__you .lb__row{width:100%;text-align:left;border:0;font:inherit;cursor:pointer}
.lb__you .lb__row:hover{background:rgba(11,11,11,.1)}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- privacy and terms ---------- */
/* Reference text, not argument, so it is set for reading straight down: one
   column, short measure, and headings that separate rather than shout. */
.legal{max-width:66ch}
.legal h2{
  font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 800;
  font-size:clamp(19px,2.1vw,26px);letter-spacing:-.01em;text-transform:lowercase;
  margin:1.9em 0 .5em;
}
.legal h2:first-of-type{margin-top:1em}
.legal p{font-size:clamp(15px,1.35vw,17px);line-height:1.6;margin:0 0 .9em;max-width:66ch}
.legal ul{margin:0 0 1em;padding-left:1.1em;max-width:66ch}
.legal li{font-size:clamp(15px,1.35vw,17px);line-height:1.6;margin:0 0 .45em}
.legal b{font-variation-settings:"wght" 700}
.legal__back{margin-top:2.4em}

/* ---------- footer ---------- */
.foot{
  position:relative;background:var(--ink);color:var(--paper);overflow:hidden;
  padding:clamp(50px,8vw,110px) var(--pad) 26px;isolation:isolate;
}
.foot__trail{position:absolute;inset:0;z-index:0;pointer-events:none}
.foot__trail i{
  position:absolute;top:0;left:0;width:120px;height:120px;border-radius:50%;
  margin:-60px 0 0 -60px;mix-blend-mode:difference;
  background:radial-gradient(circle,var(--hot),transparent 68%);
  will-change:transform,opacity;opacity:0;
}
.foot__word{
  position:relative;z-index:1;font-size:clamp(64px,18.5vw,300px);line-height:.8;
  font-variation-settings:"wdth" 125,"wght" 900;letter-spacing:-.03em;user-select:none;
}
.foot__legal{
  position:relative;z-index:1;display:flex;gap:20px;justify-content:center;
  margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;opacity:.42;
}
.foot__legal a{text-underline-offset:3px}
.foot__legal a:hover{opacity:1}
.foot__row{
  position:relative;z-index:1;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:28px;padding-top:16px;border-top:1px solid rgba(242,239,230,.22);
  font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;opacity:.7;
}

/* ---------- reveal ---------- */
.js [data-split]{visibility:hidden}
[data-split].is-split{visibility:visible}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .hero__scroll span,.hero__dot{animation:none}
}

/* ---------- multi page chrome ---------- */
/* Five pages now, so the body carries the colour of whichever one is open.
   Without this a short page shows paper under its own section. */
.nav__links a[aria-current]{opacity:1;text-decoration:underline;text-underline-offset:5px}

/* The nav is fixed, so the first section of an inner page has to clear it. */
main > section:first-child{padding-top:max(clamp(56px,9vw,140px),112px)}
.page__head{margin-bottom:30px}

.next{
  display:inline-flex;align-items:center;gap:14px;margin-top:36px;
  padding:14px 24px;border:1.5px solid currentColor;border-radius:100px;
  text-decoration:none;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;transition:opacity .18s;
}
.next__k{opacity:.5}
.next__v{
  font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 800;
  font-size:clamp(17px,2vw,22px);letter-spacing:-.01em;text-transform:lowercase;
}
.next__a{transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.next:hover .next__a{transform:translateX(6px)}

/* ---------- nothing here ---------- */
.play{
  position:relative;min-height:100svh;overflow:hidden;
  background:var(--ink);color:var(--paper);
  padding:clamp(112px,13vw,180px) var(--pad) clamp(50px,8vw,90px);
}
.play__head{position:relative;z-index:2;pointer-events:none}
.play__head a,.play__head button{pointer-events:auto}
.play__title{
  font-size:clamp(50px,10.5vw,178px);line-height:.86;margin:0 0 .28em;
  font-variation-settings:"wdth" 118,"wght" 800;letter-spacing:-.028em;text-transform:lowercase;
}
.play__title span{display:inline-block}
.play__lead{font-size:clamp(15px,1.4vw,19px);line-height:1.5;color:#A3A098;max-width:48ch;margin:0}
.play__lead + .play__lead{margin-top:1em}
.play__back{margin-top:26px;border-color:var(--paper);color:var(--paper)}
.play__back:hover{background:var(--paper);color:var(--ink)}

.play__field{position:absolute;inset:74px 0 0 0;z-index:1}
@media (max-width:820px){.play__field{top:96px}}
.play__tile{
  position:absolute;top:0;left:0;padding:9px 15px;border-radius:5px;
  font-variation-settings:"wdth" 122,"wght" 900;letter-spacing:-.02em;text-transform:uppercase;
  white-space:nowrap;user-select:none;touch-action:none;cursor:grab;
  will-change:transform;
}
.play__tile.is-held{cursor:grabbing;box-shadow:0 12px 40px rgba(0,0,0,.45)}
/* The marks. Sized here rather than by the image so the box can be measured on
   the first frame, before the PNG has arrived. */
.play__tile--logo{padding:0;width:64px;height:64px;border-radius:14px;overflow:hidden;background:none}
/* The token mark is black on black by design, so on this page it needs an edge
   or the tile is an acid band floating with no box around it. */
.play__tile--icon{box-shadow:0 0 0 2px var(--paper)}
.play__tile--logo img{width:100%;height:100%;display:block;-webkit-user-drag:none}
@media (max-width:720px){.play__tile--logo{width:44px;height:44px;border-radius:10px}}
@media (prefers-reduced-motion:reduce){.play__tile{cursor:default}}

/* ---------- nav on small screens ---------- */
/* It used to vanish below 820px, which was survivable on one page and is not
   survivable on five. It scrolls sideways instead. */
@media (max-width:820px){
  .nav{flex-wrap:wrap;gap:6px 14px;padding:11px var(--pad)}
  .nav__chain{display:none}
  .nav__links{
    display:flex;gap:13px;width:100%;overflow-x:auto;scrollbar-width:none;
    font-size:10.5px;padding-bottom:2px;
    /* If it does overflow anyway, the last item fades rather than being
       guillotined, which is the only cue that the row scrolls. */
    -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);
            mask-image:linear-gradient(90deg,#000 92%,transparent);
  }
  .nav__links::-webkit-scrollbar{display:none}
  .nav__links a{white-space:nowrap}
  /* The numbers are the first thing to go: they cost 3 characters each and the
     labels already read in order. */
  .nav__n{display:none}
}