/* ============================================================================
   $FLOOR CAPITAL — the landing. The office's world by day: sections take the
   game's light grounds (sky #7FB3DC→#D4E9F5, the office's cream walls, a warm
   parquet, the lawn) with ink text; the dark night-blue slabs stay only as
   plates — cards, boards, the diagram's boxes. Pixel strips between sections:
   a sidewalk with its curb, a roof edge, a row of trees, the street.
   Gold for what to press, green for money in. Silkscreen for every figure and
   label, always at a multiple of 8 px; Pixelify Sans for reading; Jersey 10
   only for the big words.

   Three pinned blocks (html.pin, set by landing.js unless reduced motion is on):
     .story  the office scene sticks while the hero fades and the office grows
     .money  the money diagram sticks while the pool fills and pays out
     .round  the league table sticks while one example round plays
   .money and .round stick at their own height, centred (landing.js sets the
   section's --sh and the stick's top), so no empty half-screen leads in or
   out. Without .pin everything is a plain, static page.
   Motion (html.fx, also only without reduced motion): drifting clouds and
   birds, the ticker, reveals, breathing cards, the PLAY shine, coins hopping
   the dividers. All of it transform/opacity or a small background, CSS only.
   ========================================================================== */
:root {
  --bg: #13141A; --bg2: #1A1C24; --bg3: #22252F; --line: #2C303B; --line2: #3A3F4D;
  --gold: #F5C022; --gold-hi: #FFD54A; --green: #45E07D; --red: #FF5E4A;
  --tx: #ECE6D8; --tx2: #BDB5A2; --tx3: #8E8574;
  /* the world by day (iso-core's palette) */
  --ink: #13141A; --sky: #7FB3DC; --sky2: #D4E9F5; --wall: #ECE6D8; --wall2: #D3CBBA; --wall3: #B7AE9B; --wall-top: #F8F4EA;
  --warm: #EBD9BC; --grass: #6FA94F; --grass2: #5E9442; --grass3: #86BE62;
  --walk: #CFC8B7; --walk2: #BDB5A2; --walk3: #A79F8B; --curb: #E4DFD2; --road: #474B54; --road2: #3D4149; --lane: #E9E2C8;
}
html { background: var(--sky); }
body { background: var(--bg); color: var(--tx); font-size: 16px; line-height: 24px; overflow-x: hidden; }
.n { font-size: 16px; }                                  /* figures in running text: Silkscreen at 16 */
.wrap { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }
.kick { font-family: var(--f-ui); font-size: 16px; line-height: 24px; color: var(--gold); display: block; }
.h2 { font-family: var(--f-sign); font-weight: 400; font-size: 48px; line-height: 48px; margin: 8px 0 16px; letter-spacing: .01em; }
.h3 { font-family: var(--f-ui); font-weight: 400; font-size: 16px; line-height: 24px; color: var(--tx2); margin: 24px 0 8px; }
.lede { color: var(--tx2); margin: 0; max-width: 60ch; }
.tag { font-family: var(--f-ui); font-size: 8px; line-height: 16px; padding: 0 8px; border: 2px solid var(--gold); color: var(--gold); display: inline-block; }
code { font-family: var(--f-num); font-size: 16px; }
.links { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ca { font-size: 16px; line-height: 24px; color: var(--tx2); background: var(--bg2); border: 2px solid var(--line2); padding: 4px 8px; white-space: nowrap; }
.fine { font-family: var(--f-ui); font-size: 8px; line-height: 16px; color: var(--tx2); }
.btn.lg { font-size: 16px; }
.btn.sm { font-size: 16px; min-height: 44px; }
.btn.hz { --b: var(--gold); --b2: #C9970F; --b3: #7A5B05; }
@media (min-width: 760px) { .h2 { font-size: 64px; line-height: 64px; } }

/* ------------------------------------------------------------ light grounds
   .lt: ink text on a light ground; the kicker is a small ink sign. A dark
   plate inside (.box, .card, the board…) gets the night palette back. */
.lt { --tx: #13141A; --tx2: #3A372F; --tx3: #5F584B; color: var(--tx); position: relative; }
.lt .kick { display: inline-block; background: var(--ink); color: var(--gold-hi); padding: 0 8px; box-shadow: 0 2px 0 rgba(19,20,26,.25); }
.lt .tag { background: var(--ink); color: var(--gold-hi); border-color: var(--ink); }
.lt .h2 { color: var(--ink); text-shadow: 0 2px 0 rgba(255,255,255,.45); }
.lt .box, .lt .card, .lt .rboard, .lt .rrules li, .lt .odds, .lt .bench, .lt .steps-ui, .lt .ca, .lt .endgame, .lt .burn, .lt .faq details, .lt .fair li > b {
  --tx: #ECE6D8; --tx2: #BDB5A2; --tx3: #8E8574; }
.sky { background: linear-gradient(var(--sky), var(--sky2)); }
.wall { background: var(--wall); box-shadow: inset 0 -16px 0 var(--wall2), inset 0 -18px 0 var(--wall3); }           /* a skirting board along the bottom */
.warm { background: var(--warm); background-image: repeating-linear-gradient(90deg, rgba(122,82,50,.07) 0 2px, transparent 2px 64px); }   /* parquet seams */
.lawn { background: var(--grass3); background-image: radial-gradient(var(--grass) 1px, transparent 1px); background-size: 8px 8px; }
.paper { background: var(--wall-top); }

/* ------------------------------------------------------------ dividers
   Pixel strips, CSS only (the trees are a sprite landing.js paints into
   --spr-tree). They sit over their neighbours so a hopping coin can cross. */
.dv { position: relative; z-index: 3; height: 24px; }
.dv-walk { height: 24px; background:
  linear-gradient(var(--curb) 0 4px, transparent 4px calc(100% - 4px), var(--walk3) calc(100% - 4px)),
  repeating-linear-gradient(90deg, var(--walk) 0 30px, var(--walk2) 30px 32px); }
.dv-road { height: 40px; background:
  linear-gradient(var(--curb) 0 4px, var(--walk3) 4px 6px, transparent 6px calc(100% - 6px), var(--walk3) calc(100% - 6px) calc(100% - 4px), var(--curb) calc(100% - 4px)),
  linear-gradient(transparent 0 18px, var(--road) 18px 22px, transparent 22px),
  repeating-linear-gradient(90deg, var(--lane) 0 16px, transparent 16px 40px) 0 18px / 100% 4px no-repeat,
  var(--road); }
/* a parapet: cream blocks with gaps on an ink line, a gold trim under it */
.dv-roof { height: 24px; background:
  linear-gradient(transparent 0 8px, var(--ink) 8px 10px, var(--wall-top) 10px 14px, var(--gold) 14px 20px, #C9970F 20px 22px, var(--ink) 22px),
  repeating-linear-gradient(90deg, var(--wall2) 0 24px, var(--wall3) 24px 26px, transparent 26px 32px) 0 0 / 100% 10px no-repeat; }
.dv-trees { --dvt: var(--sky2); height: 40px; background:
  var(--spr-tree, none) 0 0 / 64px 40px repeat-x,
  linear-gradient(var(--dvt) 0 32px, var(--grass) 32px 36px, var(--grass2) 36px); }

/* ------------------------------------------------------------ the story */
.story { position: relative; }
.stick { position: relative; }
#office { display: block; width: 100%; height: 100vh; height: 100svh; pointer-events: none; background: var(--sky); }
.hero-ui { position: absolute; left: 0; right: 0; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.hero-ui a, .hero-ui code { pointer-events: auto; }
/* daylight: a band of sky over the town for the title, a sidewalk for the buttons */
.hero-top { padding: calc(16px + env(safe-area-inset-top)) 16px 32px; background: linear-gradient(rgba(127,179,220,.92), rgba(140,188,224,.66) 60%, rgba(160,200,230,0)); }
.hero-top .kick { font-size: 8px; line-height: 16px; display: inline-block; background: var(--ink); color: var(--gold-hi); padding: 0 8px; }
.title { font-family: var(--f-sign); font-weight: 400; font-size: 64px; line-height: 56px; margin: 4px 0 0; color: var(--gold-hi); letter-spacing: .01em;
  text-shadow: 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink), 2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink), 0 6px 0 var(--ink); }
.one { margin: 8px 0 0; max-width: 36ch; color: var(--ink); font-weight: 600; }
.hero-bot { padding: 32px 16px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; align-items: stretch;
  background: linear-gradient(rgba(236,230,216,0), rgba(236,230,216,.84) 40px, rgba(236,230,216,.94)); }
.hero-bot .play { width: 100%; }
.hero-bot .links .ca { flex: 1; text-align: center; }
.hero-bot .fine { color: var(--ink); }
.cue { font-family: var(--f-ui); font-size: 8px; line-height: 16px; color: #5F584B; display: inline-flex; gap: 8px; align-items: center; align-self: center; }
@media (min-width: 760px) {
  .hero-top { padding: 32px 40px 48px; }
  .hero-top .kick { font-size: 16px; line-height: 24px; }
  .title { font-size: 128px; line-height: 112px;
    text-shadow: 4px 0 0 var(--ink), -4px 0 0 var(--ink), 0 4px 0 var(--ink), 0 -4px 0 var(--ink), 4px 4px 0 var(--ink), -4px 4px 0 var(--ink), 4px -4px 0 var(--ink), -4px -4px 0 var(--ink), 0 10px 0 var(--ink); }
  .one { font-size: 24px; line-height: 32px; }
  .hero-bot { padding: 48px 40px 24px; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 16px; }
  .hero-bot .play { width: auto; }
  .hero-bot .links .ca { flex: none; }
  .cue { margin-left: auto; }
}

/* the steps: in a static page, a list under the scene */
.steps-ui { padding: 32px 16px; background: var(--bg); }
.steps-ui .kick { margin-bottom: 8px; }
.ladder { display: none; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.steps li { display: grid; grid-template-columns: 48px 1fr; gap: 0 16px; align-items: start; }
.steps canvas { width: 48px; height: 48px; grid-row: span 2; }
.steps h3 { font-family: var(--f-ui); font-weight: 400; font-size: 24px; line-height: 24px; margin: 0; color: var(--gold-hi); }
.steps h3 .nr { color: var(--tx3); font-size: 16px; margin-right: 8px; }
.steps p { margin: 4px 0 0; color: var(--tx2); }
.steps .fig { font-family: var(--f-num); font-size: 8px; line-height: 16px; color: var(--tx3); grid-column: 2; }

html.pin .story { height: 460vh; height: 460svh; }
html.pin .stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
html.pin #office { position: absolute; inset: 0; height: 100%; }
html.pin .hero-ui { height: 100%; }
html.pin .steps-ui { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  background: rgba(19,20,26,.94); border-top: 2px solid var(--gold); opacity: 0; transform: translateY(16px); transition: opacity .2s, transform .2s; }
html.pin .steps-ui.on { opacity: 1; transform: none; }
html.pin .steps-ui .kick { font-size: 8px; line-height: 16px; margin-bottom: 4px; }
html.pin .ladder { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; list-style: none; margin: 0 0 12px; padding: 0; }
html.pin .ladder li { height: 8px; background: var(--line); position: relative; }
html.pin .ladder li i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--gold); }
html.pin .steps { display: block; min-height: 120px; }
html.pin .steps li { display: none; }
html.pin .steps li.on { display: grid; animation: stepIn .25s steps(4); }
@keyframes stepIn { from { opacity: 0; transform: translateY(8px); } }
@media (min-width: 760px) {
  .steps-ui { padding: 48px 40px; }
  .steps { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
  html.pin .steps-ui { left: 24px; right: auto; bottom: 24px; width: 560px; padding: 16px 24px; border: 2px solid var(--gold); box-shadow: 0 4px 0 #0B0C0E; }
}

/* ------------------------------------------------------------ live strip */
.live { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); background: var(--bg2); }
.live div { padding: 8px 16px; border-right: 2px solid var(--line); }
.live div:nth-child(2n) { border-right: 0; }
.live div:nth-child(-n+2) { border-bottom: 2px solid var(--line); }
.live span { display: block; font-family: var(--f-ui); font-size: 8px; line-height: 16px; color: var(--tx3); }
.live b { font-family: var(--f-num); font-weight: 400; font-size: 24px; line-height: 32px; color: var(--gold-hi); }
@media (min-width: 760px) {
  .live { grid-template-columns: repeat(4, 1fr); }
  .live div, .live div:nth-child(2n) { border-right: 2px solid var(--line); border-bottom: 0; padding: 8px 24px; }
  .live div:last-child { border-right: 0; }
}

/* ------------------------------------------------------------ the ticker
   An LED board: one line of items, twice over, so the loop is seamless. */
.ticker { position: relative; z-index: 3; background: var(--ink); border-top: 2px solid var(--gold); border-bottom: 2px solid #0B0C0E; overflow: hidden; height: 36px;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size: 4px 4px; }
.tk-track { display: flex; width: max-content; height: 32px; align-items: center; }
.tk-track span { font-family: var(--f-num); font-size: 16px; line-height: 32px; color: var(--gold-hi); white-space: nowrap; padding: 0 16px; }
.tk-track span::after { content: "◆"; color: var(--line2); margin-left: 32px; font-size: 8px; vertical-align: 4px; }
.tk-track .tk-sim { color: var(--ink); background: var(--gold); padding: 0 8px; margin-left: 16px; line-height: 24px; font-size: 8px; }
.tk-track .tk-sim::after { content: none; }
.tk-track em { font-style: normal; }
.tk-track .up { color: var(--green); }
html.fx .tk-track { animation: tape var(--tk-dur, 60s) steps(var(--tk-steps, 1200)) infinite; }
@keyframes tape { to { transform: translateX(-50%); } }
html:not(.fx) .ticker { height: auto; }
html:not(.fx) .tk-track { width: auto; flex-wrap: wrap; height: auto; padding: 4px 0; }
html:not(.fx) .tk-track .tk-dup { display: none; }

/* ------------------------------------------------------- the money (PIN #2) */
.money { position: relative; border-bottom: 0; }
.stick2 { position: relative; z-index: 1; padding: 32px 16px; display: flex; flex-direction: column; gap: 16px; max-width: 1120px; margin: 0 auto; }
.mside { display: contents; }                            /* phone: head, diagram, the two lines; the side column is a desktop thing */
.mhead { order: 0; }
.mhead .h2 { margin: 4px 0 8px; }
/* the four thoughts: a static page lists them all; pinned, the ladder shows the way
   and only the step on screen is spoken, big; its boxes are lit, the rest dims */
.mstep { order: 1; }
.mladder { display: none; }
.mexp { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mexp li { position: relative; padding-left: 40px; color: var(--tx); font-weight: 600; }
.mexp .nr { position: absolute; left: 0; top: 0; min-width: 32px; padding: 0 4px; text-align: center; font-family: var(--f-num); font-size: 8px; line-height: 24px; background: var(--ink); color: var(--gold-hi); }
.flow { order: 2; }
.mends { order: 3; display: grid; gap: 8px; }
html.pin .money:not(.nopin) { height: calc(var(--sh, 100svh) + 260vh); height: calc(var(--sh, 100svh) + 260svh); }
html.pin .money:not(.nopin) .stick2 { position: sticky; top: var(--stop, 0px); padding-top: 16px; padding-bottom: 16px; }
html.pin .money:not(.nopin) .mladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; list-style: none; margin: 0 0 8px; padding: 0; }
html.pin .money:not(.nopin) .mladder li { height: 8px; background: rgba(19,20,26,.18); position: relative; }
html.pin .money:not(.nopin) .mladder li i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--ink); }
html.pin .money:not(.nopin) .mexp { min-height: 48px; }
.lt .mexp li { text-shadow: 0 2px 0 rgba(255,255,255,.45); }   /* like the title: reads over a passing cloud */
html.pin .money:not(.nopin) .mexp li { display: none; font-size: 18px; line-height: 24px; }
html.pin .money:not(.nopin) .mexp li.on { display: block; animation: stepIn .25s steps(4); }
.money [data-st] { transition: opacity .2s, filter .2s; }
.money .mdim { opacity: .4; filter: grayscale(1); }
.flow { display: grid; gap: 0; }
.box { background: var(--bg2); border: 2px solid var(--line2); padding: 8px 16px 12px; box-shadow: 0 4px 0 #0B0C0E; color: var(--tx); position: relative; }
.box h3 { font-family: var(--f-ui); font-weight: 400; font-size: 16px; line-height: 24px; margin: 0 0 4px; color: var(--tx2); }
.box ul { list-style: none; margin: 0; padding: 0; }
.box li, .rowv { display: flex; justify-content: space-between; gap: 8px; font-family: var(--f-ui); font-size: 8px; line-height: 24px; color: var(--tx2); }
.box li b, .rowv b { font-family: var(--f-num); font-weight: 400; font-size: 16px; color: var(--tx); white-space: nowrap; }
.box li b em { font-style: normal; color: var(--tx3); }
.pool { border-color: var(--gold); }
.pool .big { font-family: var(--f-num); font-weight: 400; font-size: 32px; line-height: 40px; color: var(--gold-hi); display: block; }
.tank { height: 16px; background: #0E0F14; border: 2px solid var(--line2); position: relative; margin: 4px 0; }
.tank i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--gold);
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 4px, transparent 4px 8px); }
.box .sub { margin: 0; font-family: var(--f-ui); font-size: 8px; line-height: 16px; color: var(--tx2); }
.pay b { color: var(--green) !important; }
.pay .back b { color: var(--gold-hi) !important; }
.pay .back span::before { content: "↺ "; }
/* a pipe: gold dashes in an ink casing, so it reads on the sky */
.pipe { position: relative; height: 40px; display: flex; align-items: center; padding-left: 40px; }
.pipe::before { content: ""; position: absolute; left: 12px; top: 0; bottom: 0; width: 16px; background: var(--ink); }
.pipe i { position: absolute; left: 16px; top: 0; bottom: 0; width: 8px; --flow: 0;
  background: repeating-linear-gradient(180deg, var(--gold) 0 8px, transparent 8px 16px); background-position: 0 calc(var(--flow) * 1px); opacity: .35; transition: opacity .2s; }
.pipe.on i { opacity: 1; }
.pipe span { font-family: var(--f-ui); font-size: 8px; line-height: 16px; color: var(--tx); }
.burn { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; background: var(--bg2); border: 2px dashed var(--line2); padding: 8px 16px; color: var(--tx3); transition: border-color .2s, color .2s; }
.burn p { margin: 0; font-family: var(--f-ui); font-size: 8px; line-height: 16px; }
.burn b { font-family: var(--f-num); font-weight: 400; font-size: 16px; }
.burn.on { border-color: var(--red); color: var(--red); }
.burn.on p { color: var(--tx2); }
.burn .ic { width: 24px; height: 24px; }
/* the two buckets the hour pays into: by power, and the round's prizes */
.outs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.outs .box { min-width: 0; padding: 8px 8px 8px; }
.outs h3 { font-size: 8px; line-height: 16px; color: var(--tx); }
.outs .rowv { display: block; line-height: 16px; }
.outs .rowv b { display: block; font-size: 16px; line-height: 24px; }
.prize { border-color: var(--green); }
.prize h3 { color: var(--green); }
.prize b { color: var(--gold-hi) !important; }
.endgame { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; background: var(--bg2); border: 2px dashed var(--line2); padding: 8px 16px; color: var(--tx3); transition: border-color .2s, color .2s; }
.endgame p { margin: 0; font-family: var(--f-ui); font-size: 8px; line-height: 16px; }
.endgame b { font-family: var(--f-num); font-weight: 400; font-size: 16px; }
.endgame.on { border-color: var(--gold); color: var(--gold-hi); }
.endgame.on p { color: var(--tx); }
/* pinned on a phone the diagram must fit one screen: a smaller title, shorter pipes, tighter rows */
html.pin .money:not(.nopin) .stick2 { gap: 8px; }
html.pin .money:not(.nopin) .pipe { height: 24px; }
html.pin .money:not(.nopin) .h2, html.pin .round:not(.nopin) .h2 { font-size: 32px; line-height: 32px; }
html.pin .money:not(.nopin) .outs .rowv b { line-height: 16px; margin-bottom: 4px; }
/* desktop: two columns — the head, the explanation and the 48 h lines on the left, the diagram top-down on the right */
@media (min-width: 900px) {
  .stick2 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px 48px; align-items: center; padding: 48px 40px; }
  .mside { display: flex; flex-direction: column; gap: 16px; grid-row: span 2; }
  .mexp { gap: 8px; }
  .flow { grid-column: 2; }
  .mends { grid-column: 2; }
  .outs { gap: 16px; }
  .outs .box { padding: 8px 16px 12px; }
  .outs h3 { font-size: 16px; line-height: 24px; }
  .outs .rowv { display: flex; line-height: 24px; flex-wrap: wrap; }
  .outs .rowv b { display: inline; }
  html.pin .money:not(.nopin) .stick2 { gap: 16px 48px; }
  html.pin .money:not(.nopin) .mexp { display: grid; gap: 16px; }
  html.pin .money:not(.nopin) .mexp li { display: block; opacity: .45; transition: opacity .2s; font-size: 20px; line-height: 28px; }
  html.pin .money:not(.nopin) .mexp li.on { opacity: 1; animation: none; }
  .mexp li { font-size: 20px; line-height: 28px; }
  html.pin .money:not(.nopin) .pipe { height: 32px; }
  html.pin .money:not(.nopin) .h2, html.pin .round:not(.nopin) .h2 { font-size: 64px; line-height: 64px; }
  html.pin .money:not(.nopin) .outs .rowv b { line-height: 24px; margin-bottom: 0; }
}
@media (min-width: 760px) {
  .endgame p, .burn p { font-size: 16px; line-height: 24px; }
  html.pin .round:not(.nopin) .h2 { font-size: 64px; line-height: 64px; }
}

/* ------------------------------------------------------- the round (PIN #3)
   Rows sit absolutely, one --rh apart; a row's place is --k (its rank), so a
   climb is a transform. Without .pin: the final table, all four steps. */
.round { position: relative; --rh: 24px; }
.stick3 { position: relative; z-index: 1; padding: 32px 16px; display: flex; flex-direction: column; gap: 16px; max-width: 1120px; margin: 0 auto; }
.rhead .h2 { margin: 4px 0 8px; }
html.pin .round:not(.nopin) { height: calc(var(--sh, 100svh) + 320vh); height: calc(var(--sh, 100svh) + 320svh); }
html.pin .round:not(.nopin) .stick3 { position: sticky; top: var(--stop, 0px); padding-top: 16px; padding-bottom: 16px; }
.rgrid { display: flex; flex-direction: column; gap: 16px; }
.rside { order: 2; }
.rboard { position: relative; background: var(--bg2); border: 2px solid var(--line2); box-shadow: 0 4px 0 #0B0C0E; overflow: hidden; color: var(--tx); }
.rbar { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-bottom: 2px solid var(--line2); }
.rbar canvas { width: 32px; height: 32px; flex: none; }
.rclock { display: flex; flex-direction: column; }
.rclock b { font-family: var(--f-num); font-weight: 400; font-size: 8px; line-height: 16px; color: var(--tx2); }
.rclock b + b { font-size: 16px; color: var(--gold-hi); }
.rleague { margin-left: auto; font-family: var(--f-ui); font-size: 8px; line-height: 16px; color: var(--tx3); }
.rnews { display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px; background: var(--bg3); border-bottom: 2px solid var(--line2);
  font-family: var(--f-ui); font-size: 8px; line-height: 16px; color: var(--tx2); transition: background .2s, color .2s; }
.rnews .rn-h { color: var(--tx3); white-space: nowrap; }
.rnews.hot { background: #17351F; color: var(--green); border-bottom-color: var(--green); font-size: 16px; line-height: 24px; }
.rnews.hot .rn-t::before { content: "▲ "; }
html.pin .rnews.hot { animation: hot 1s steps(2) infinite; }
@keyframes hot { 50% { background: #1E4527; } }
.ltable { position: relative; height: calc(15 * var(--rh)); }
.ltable::after { content: ""; position: absolute; left: 0; right: 0; top: calc(5 * var(--rh) - 1px); border-top: 2px dashed var(--gold); opacity: .6; pointer-events: none; }
.lrow { position: absolute; left: 0; right: 0; top: 0; height: var(--rh); transform: translateY(calc(var(--k, 0) * 100%));
  display: grid; grid-template-columns: 32px 16px 1fr auto 32px; gap: 8px; align-items: center; padding: 0 8px;
  font-family: var(--f-ui); font-size: 8px; line-height: 16px; color: var(--tx2); box-shadow: inset 0 -1px 0 var(--line); }
html.pin .lrow { transition: transform .35s steps(5); }
.lrow canvas { width: 16px; height: 16px; }
.lr { font-family: var(--f-num); color: var(--tx3); }
.ln { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ls { font-family: var(--f-num); font-weight: 400; font-size: 16px; line-height: 16px; color: var(--tx); text-align: right; }
.lp { text-align: right; color: var(--gold); }
.lrow.top .lr { color: var(--gold); }
.lrow.me { z-index: 2; background: #2B2614; box-shadow: inset 0 0 0 2px var(--gold); }
.lrow.me .ln, .lrow.me .lr { color: var(--gold-hi); }
.lhint, .lx { display: none; font-style: normal; margin-left: 8px; padding: 0 4px; }
.lrow.hint .lhint { display: inline; background: var(--gold); color: var(--bg); }
html.pin .lrow.hint .lhint { animation: blink .5s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }
.lrow.boost .lx { display: inline; background: var(--green); color: var(--bg); }
.lrow.boost .ls { color: var(--green); }
.rover { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  background: rgba(19,20,26,.94); border: 2px solid var(--gold); box-shadow: 0 4px 0 #0B0C0E; visibility: hidden; opacity: 0; transform: translateY(16px); transition: opacity .2s, transform .2s, visibility .2s; }
.over .rover { visibility: visible; opacity: 1; transform: none; }
html:not(.pin) .rover, .round.nopin .rover { position: relative; left: auto; right: auto; bottom: auto; margin: 8px; transition: none; }
.rover-t { font-family: var(--f-num); font-weight: 400; font-size: 16px; line-height: 24px; color: var(--gold-hi); }
.rover-s { font-family: var(--f-ui); font-size: 8px; line-height: 16px; color: var(--tx2); }
.coins { display: flex; gap: 8px; }
.coins canvas { width: 32px; height: 32px; }
html.pin .over .coins canvas { animation: coin .5s steps(5) both, spin 1.2s steps(4) .6s infinite; animation-delay: calc(var(--i) * 80ms), calc(.6s + var(--i) * 120ms); }
@keyframes coin { from { transform: translateY(-24px); opacity: 0; } 70% { transform: translateY(4px); opacity: 1; } }
@keyframes spin { 25% { transform: scaleX(.5); } 50% { transform: scaleX(-1); } 75% { transform: scaleX(-.5); } }
/* the steps: a list; pinned on a phone, one at a time under a ladder */
.rladder { display: none; }
.rsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.rsteps h3 { font-family: var(--f-ui); font-weight: 400; font-size: 16px; line-height: 24px; margin: 0; color: var(--ink); }
.rsteps h3 .nr { color: var(--tx3); margin-right: 8px; }
.rsteps p { margin: 4px 0 0; color: var(--tx2); }
html.pin .round:not(.nopin) .rladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; list-style: none; margin: 0 0 8px; padding: 0; }
html.pin .round:not(.nopin) .rladder li { height: 8px; background: rgba(19,20,26,.18); position: relative; }
html.pin .round:not(.nopin) .rladder li i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--ink); }
html.pin .round:not(.nopin) .rsteps li { display: none; }
html.pin .round:not(.nopin) .rsteps li.on { display: block; animation: stepIn .25s steps(4); }
html.pin .round:not(.nopin) .rsteps p { display: none; }
html.pin .round:not(.nopin) .rsteps { min-height: 48px; }
@media (min-width: 760px) {
  .round { --rh: 32px; }
  .stick3 { padding: 48px 40px; gap: 16px; }
  .rgrid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
  .rside { order: 0; }
  .rbar { padding: 8px 16px; gap: 16px; }
  .rbar canvas { width: 32px; height: 32px; }
  .rleague { font-size: 16px; line-height: 24px; }
  .rnews { padding: 4px 16px; font-size: 16px; line-height: 24px; }
  .lrow { grid-template-columns: 40px 32px 1fr auto 48px; gap: 16px; padding: 0 16px; font-size: 16px; line-height: 24px; }
  .lrow canvas { width: 32px; height: 32px; }
  .rover { left: 16px; right: 16px; bottom: 16px; padding: 16px; }
  .rover-t { font-size: 24px; line-height: 32px; }
  .rover-s { font-size: 16px; line-height: 24px; }
  html.pin .round:not(.nopin) .rsteps { gap: 16px; }
  html.pin .round:not(.nopin) .rsteps li { display: block; opacity: .6; transition: opacity .2s; }
  html.pin .round:not(.nopin) .rsteps li.on { opacity: 1; animation: none; }
  html.pin .round:not(.nopin) .rsteps p { display: block; }
}
/* the round's rules: six short facts, then the honest part */
.rrules { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.rrules li { background: var(--bg3); border: 2px solid var(--line2); padding: 12px 16px; display: grid; gap: 4px; align-content: start; box-shadow: 0 4px 0 rgba(19,20,26,.35); }
.rrules b { font-family: var(--f-num); font-weight: 400; font-size: 16px; line-height: 24px; color: var(--gold-hi); }
.rrules span { color: var(--tx2); }
.rhonest { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rhonest li { font-family: var(--f-ui); font-size: 16px; line-height: 24px; color: var(--tx); padding-left: 24px; position: relative; }
.rhonest li::before { content: "!"; position: absolute; left: 0; color: #C2261A; }
@media (min-width: 760px) { .rrules { grid-template-columns: repeat(3, 1fr); gap: 16px; } .rhonest { grid-template-columns: repeat(3, 1fr); gap: 16px; } }

/* -------------------------------------------------------------- sections */
.sec { padding: 40px 0 48px; }
.cards { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 480px) { .cards { grid-template-columns: repeat(2, 1fr); } }
.card { --rc: var(--line2); position: relative; min-width: 0; background: var(--bg2); border: 2px solid var(--line2); padding: 12px; display: grid; grid-template-columns: 48px 1fr; gap: 0 12px; align-items: center;
  color: var(--tx); box-shadow: 0 4px 0 rgba(19,20,26,.35); overflow: hidden; }
.card canvas { width: 48px; height: 48px; grid-row: span 3; }
.card .rn { font-family: var(--f-ui); font-size: 16px; line-height: 24px; }
.card .role { font-size: 16px; line-height: 24px; color: var(--tx); }
.card .st { font-family: var(--f-num); font-size: 8px; line-height: 16px; color: var(--tx2); }
/* the frame in the card's rarity, breathing; a sheen crosses it now and then */
.card::before { content: ""; position: absolute; inset: 0; border: 2px solid var(--rc); opacity: .45; pointer-events: none; }
.card::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 24px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent 0 8px, rgba(255,255,255,.14) 8px 16px, transparent 16px); transform: translateX(-32px) skewX(-20deg); }
.card[data-tap] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media (min-width: 760px) { .cards { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1000px) { #crewCards { grid-template-columns: repeat(5, 1fr); } #toolCards { grid-template-columns: repeat(6, 1fr); }
  #crewCards .card, #toolCards .card { grid-template-columns: 1fr; text-align: left; } #crewCards canvas, #toolCards canvas { grid-row: auto; margin-bottom: 8px; } }

.two { display: grid; gap: 24px; }
@media (min-width: 900px) { .two { grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } }
.bench { display: flex; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; background: var(--bg2); border: 2px solid var(--line2); padding: 8px 12px; width: max-content; max-width: 100%; box-shadow: 0 4px 0 rgba(19,20,26,.35); }
.bench canvas { width: 48px; height: 48px; }
.bench .op { font-family: var(--f-ui); font-size: 16px; color: var(--tx3); }
.odds { width: 100%; border-collapse: collapse; font-family: var(--f-ui); font-size: 8px; line-height: 16px; background: var(--bg2); color: var(--tx); box-shadow: 0 4px 0 rgba(19,20,26,.35); border: 2px solid var(--line2); }
.odds th, .odds td { text-align: left; padding: 8px; border-bottom: 2px solid var(--line); font-weight: 400; }
.odds tr:last-child td { border-bottom: 0; }
.odds th { color: var(--tx3); }
.odds td b { font-family: var(--f-num); font-weight: 400; font-size: 16px; color: var(--tx); }
@media (min-width: 760px) { .odds { font-size: 16px; line-height: 24px; } }

.fair { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.fair li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; }
.fair li > b { font-family: var(--f-num); font-weight: 400; font-size: 24px; line-height: 40px; width: 40px; height: 40px; text-align: center; background: var(--ink); color: var(--gold-hi); box-shadow: 0 4px 0 rgba(19,20,26,.35); }
.fair p { margin: 8px 0 0; color: var(--tx); }
.fair code { color: var(--ink); background: rgba(255,255,255,.55); padding: 0 4px; }
@media (min-width: 760px) { .fair { grid-template-columns: repeat(3, 1fr); gap: 32px; } }

.faq { display: grid; gap: 8px; }
.faq details { background: var(--bg2); border: 2px solid var(--line2); padding: 0 16px; box-shadow: 0 4px 0 rgba(19,20,26,.25); color: var(--tx); }
.faq summary { cursor: pointer; list-style: none; padding: 12px 32px 12px 0; position: relative; font-family: var(--f-ui); font-size: 16px; line-height: 24px; color: var(--tx); min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 12px; color: var(--gold); }
.faq details[open] summary::after { content: "−"; }
.faq p { margin: 0 0 16px; color: var(--tx2); max-width: 70ch; }
@media (min-width: 900px) { .faq { display: block; columns: 2; column-gap: 16px; } .faq details { break-inside: avoid; margin-bottom: 8px; } }

.closer { text-align: left; }
.closer.sky { background: linear-gradient(var(--sky2), var(--sky)); }   /* bright at the top, the street's trees stand on the deeper blue */
.closer .cta { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.closer .fine { color: var(--ink); }
.crowd { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.crowd canvas { width: 48px; height: 48px; cursor: pointer; }
.foot { padding: 24px 0 40px; color: var(--tx3); font-size: 16px; background: var(--road2); }
.foot p { margin: 0 0 8px; max-width: 80ch; }
.foot .lang { margin-bottom: 16px; }

/* ------------------------------------------------------------ languages
   EN | RU (I18N.switcher): two pixel keys on an ink plate, the chosen one
   gold. In the hero it sits top right, over the sky band, clear of PLAY. */
.lang { display: inline-flex; gap: 4px; padding: 4px; background: var(--ink); box-shadow: 0 4px 0 rgba(19,20,26,.35); pointer-events: auto; }
.lang button { font-family: "Silkscreen", monospace; font-size: 16px; line-height: 16px; min-width: 48px; min-height: 44px; padding: 4px 8px; border: 0; border-radius: 0; cursor: pointer;
  background: var(--bg3); color: var(--tx3); box-shadow: inset 0 -4px 0 #0B0C0E; -webkit-tap-highlight-color: transparent; }
.lang button:hover { color: var(--tx); }
.lang button.on { background: var(--gold); color: var(--ink); box-shadow: inset 0 -4px 0 #C9970F, inset 0 2px 0 rgba(255,255,255,.35); cursor: default; }
.lang button:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 2px; }
.hero-top { position: relative; }
.hero-top .lang { position: absolute; top: calc(8px + env(safe-area-inset-top)); right: 8px; }
/* phone: the kicker sits level with the keys, the title starts under them */
.hero-top { padding-top: calc(8px + env(safe-area-inset-top)); }
.hero-top .kick { margin: 18px 0 20px; }
@media (min-width: 760px) { .hero-top { padding-top: 32px; } .hero-top .kick { margin: 12px 0 16px; } .hero-top .lang { top: 32px; right: 40px; } }

/* RU: Jersey 10 and Silkscreen have no Cyrillic. Labels keep Silkscreen for
   Latin and every figure, and fall to Tiny5 (same 8-px grid) for Cyrillic.
   The big words go to Press Start 2P on its 8-px grid, smaller (it is wide):
   Pixelify Sans was the other candidate, but it has no Cyrillic capital О or П
   (they drop to a system face mid-word). For the same reason the reading
   face falls to Tiny5 for those two letters. The brand stays Jersey 10. */
html.lang-ru { --f-ui: "Silkscreen", "Tiny5", monospace; --f-num: "Silkscreen", "Tiny5", monospace;
  --f-sign: "Press Start 2P", "Tiny5", monospace; --f-body: "Pixelify Sans", "Tiny5", system-ui, sans-serif; }
html.lang-ru .title { font-family: "Jersey 10", monospace; }
html.lang-ru .h2 { font-size: 24px; line-height: 32px; letter-spacing: 0; }
html.lang-ru .steps h3 { font-size: 16px; }
@media (min-width: 760px) { html.lang-ru .h2 { font-size: 40px; line-height: 48px; } }
html.lang-ru.pin .money:not(.nopin) .h2, html.lang-ru.pin .round:not(.nopin) .h2 { font-size: 16px; line-height: 24px; }
@media (min-width: 900px) { html.lang-ru.pin .money:not(.nopin) .h2, html.lang-ru.pin .round:not(.nopin) .h2 { font-size: 32px; line-height: 40px; } }

/* --------------------------------------------------------------- motion
   Everything below runs only with html.fx (no reduced motion). */
.fxsky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.fxsky .cl { position: absolute; left: 0; width: var(--w); height: var(--h); background: var(--spr-cloud) 0 0 / 100% 100%; image-rendering: pixelated; opacity: .95;
  animation: drift var(--t) steps(var(--st)) infinite; animation-delay: var(--dl); }
.fxsky .bd { position: absolute; left: 0; width: 16px; height: 8px; background: var(--spr-bird) 0 0 / 32px 8px; image-rendering: pixelated;
  animation: drift var(--t) linear infinite, flap .4s steps(1) infinite; animation-delay: var(--dl), 0s; }
@keyframes drift { from { transform: translateX(-160px); } to { transform: translateX(calc(100vw + 40px)); } }
@keyframes flap { 50% { background-position: -16px 0; } }
.sec > .wrap, .closer > .wrap { position: relative; z-index: 1; }

/* reveal: a rise of 8 px under a pixel wipe, staggered by --d */
html.fx [data-rv] { opacity: 0; }                       /* only opacity before: a clipped block would never count as on screen */
html.fx [data-rv].in { opacity: 1; animation: rvIn .32s steps(4) both; animation-delay: calc(var(--d, 0) * 70ms); }
@keyframes rvIn { from { opacity: 0; transform: translateY(8px); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }

/* the cards breathe in their rarity; the sheen passes every few seconds */
html.fx .card::before { animation: breathe 2.4s steps(6) infinite; animation-delay: calc(var(--i, 0) * -400ms); }
html.fx .card::after { animation: sheen 5s steps(10) infinite; animation-delay: calc(var(--i, 0) * 700ms); }
@keyframes breathe { 50% { opacity: 1; } }
@keyframes sheen { 0% { opacity: 1; transform: translateX(-32px) skewX(-20deg); } 24% { opacity: 1; transform: translateX(260px) skewX(-20deg); } 25%, 100% { opacity: 0; } }
html.fx #toolCards .card:hover canvas, html.fx #toolCards .card.hop canvas { animation: hop .4s steps(2) 2; }
@keyframes hop { 50% { transform: translateY(-4px); } }

/* PLAY: a pixel shine sweeps it, a ring pulses out of it */
html.fx .btn.play { background-image: linear-gradient(105deg, transparent 0 40%, rgba(255,255,255,.55) 40% 46%, transparent 46% 52%, rgba(255,255,255,.35) 52% 55%, transparent 55%);
  background-size: 300% 100%; background-repeat: no-repeat; background-position: 150% 0; animation: shine 3.2s steps(12) infinite; }
html.fx .btn.play::before { content: ""; position: absolute; inset: -2px; border: 2px solid var(--gold-hi); pointer-events: none; animation: ring 1.6s steps(5) infinite; }
@keyframes shine { 0% { background-position: 150% 0; } 40%, 100% { background-position: -50% 0; } }
@keyframes ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.06, 1.3); opacity: 0; } }

/* a coin hops a divider from one section into the next */
.fcoin { position: absolute; top: -32px; width: 24px; height: 24px; pointer-events: none; animation: hopx 1.1s linear forwards; }
.fcoin i { display: block; width: 100%; height: 100%; animation: hopy 1.1s cubic-bezier(.3, -.6, .6, 1) forwards; }
.fcoin i::before { content: ""; display: block; width: 100%; height: 100%; background: var(--spr-coin) 0 0 / 100% 100%; image-rendering: pixelated; animation: spin .44s steps(4) infinite; }
@keyframes hopx { to { transform: translateX(var(--dx)); } }
@keyframes hopy { to { transform: translateY(72px); opacity: .2; } }

/* pins, small things: the pipes flow on their own, the tank crawls, the pool sparkles */
html.fx .pipe.on i { animation: flowY .5s steps(4) infinite; }
@keyframes flowY { from { background-position: 0 calc(var(--flow) * 1px); } to { background-position: 0 calc(var(--flow) * 1px + 16px); } }
html.fx .tank i { animation: crawl .8s steps(4) infinite; }
@keyframes crawl { to { background-position: 8px 0; } }
.spk { position: absolute; width: 8px; height: 8px; opacity: 0; pointer-events: none;
  background: linear-gradient(var(--gold-hi), var(--gold-hi)) 3px 0 / 2px 8px no-repeat, linear-gradient(var(--gold-hi), var(--gold-hi)) 0 3px / 8px 2px no-repeat; }
.spk:nth-of-type(1) { right: 16px; top: 12px; } .spk:nth-of-type(2) { right: 48px; top: 40px; } .spk:nth-of-type(3) { left: 45%; top: 8px; }
html.fx .spk { animation: twinkle 1.8s steps(3) infinite; animation-delay: calc(var(--i) * 600ms); }
@keyframes twinkle { 30% { opacity: 1; transform: scale(1); } 60% { opacity: 0; transform: scale(.5); } }
html.fx .burn.on .ic-fire { animation: flick .3s steps(2) infinite; display: inline-block; }
@keyframes flick { 50% { transform: translateY(-1px) scaleY(1.12); } }
html.fx .steps li.on canvas { animation: bob 1s steps(2) infinite; }
@keyframes bob { 50% { transform: translateY(-2px); } }
html.fx .ladder li i, html.fx .rladder li i { background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.28) 0 4px, transparent 4px 12px); animation: crawl .6s steps(3) infinite; }
html.fx .lrow.top .lp { animation: blink 1.4s steps(2) infinite; animation-delay: calc(var(--k, 0) * 200ms); }
html.fx .lrow.me canvas { animation: bob .8s steps(2) infinite; }
html.fx .rbar canvas { animation: bob 2s steps(2) infinite; }

/* reduced motion: no pins, nothing moves (landing.js also skips .pin and .fx) */
@media (prefers-reduced-motion: reduce) {
  html.pin .story, html.pin .money:not(.nopin), html.pin .round:not(.nopin) { height: auto; }
  html.pin .stick, html.pin .money .stick2, html.pin .round .stick3 { position: relative; height: auto; top: 0; }
}