*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html{background:#06070f}
  body{min-height:100%;background:transparent;color:#fff;overscroll-behavior-y:none;
    font-family:"Helvetica Neue",Inter,system-ui,-apple-system,sans-serif;
    -webkit-user-select:none;user-select:none;
    padding:calc(env(safe-area-inset-top) + 22px) 18px calc(env(safe-area-inset-bottom) + 40px)}
  #bg{position:fixed;inset:0;z-index:-1;display:block;width:100%;height:100%}

  /* ── masthead ── */
  /* SHARE is a fixed pill in the top-right corner, so the masthead stops short
     of it. It holds only the wordmark now: the built tally sits on the PLAYABLE
     NOW line and the version prints in the footer. */
  .mast{display:flex;align-items:baseline;gap:12px;margin-bottom:26px;padding-right:82px}
  .wordmark{font-size:15px;font-weight:800;letter-spacing:.42em;text-indent:.42em;white-space:nowrap;
    background:linear-gradient(92deg,#FF7A6B,#FFC24D,#6BE38F,#4FD6FF,#A78BFF);
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .count{font-size:10px;font-weight:700;letter-spacing:.22em;color:rgba(255,255,255,.62);
         font-variant-numeric:tabular-nums;white-space:nowrap}
  .ver{font-size:9px;font-weight:700;letter-spacing:.24em;color:rgba(255,255,255,.55);
       margin-top:10px;font-variant-numeric:tabular-nums}

  /* ── family signature: the hollow numeral ── */
  .vault{text-align:center;margin-bottom:8px}
  /* The vault outgrew its own type: at six figures 30vw ran off both edges of
     the phone. Size by DIGIT COUNT, not by viewport alone — hub.js sets --n to
     however many digits are on screen, so 251466 sits in the same box 0 did. */
  .sparks{font-size:min(calc(90vw / var(--n,3)), 132px);
    font-weight:800;letter-spacing:-.05em;line-height:.86;
    color:transparent;-webkit-text-stroke:2px rgba(160,220,255,.5);
    background:linear-gradient(96deg,#FF7A6B,#FFC24D,#6BE38F,#4FD6FF,#A78BFF);
    -webkit-background-clip:text;background-clip:text;
    font-variant-numeric:tabular-nums;
    max-width:100%;overflow:hidden;white-space:nowrap}
  .sparklab{font-size:10px;font-weight:700;letter-spacing:.42em;text-indent:.42em;
    color:rgba(160,220,255,.65);margin-top:10px}

  /* ── rank ── */
  .rank{margin:22px 2px 30px}
  .rankrow{display:flex;justify-content:space-between;font-size:10px;font-weight:700;
    letter-spacing:.24em;margin-bottom:8px}
  .rnow{color:rgba(255,255,255,.9)} .rnext{color:rgba(255,255,255,.62)}
  .bar{height:2px;background:rgba(255,255,255,.10);position:relative;overflow:hidden}
  .bar{height:3px;border-radius:2px}
  .bar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#FF7A6B,#FFC24D,#6BE38F,#4FD6FF,#A78BFF);
    width:0;transition:width .9s cubic-bezier(.2,.8,.3,1)}

  /* the shelf label and its tally share one line, ends apart. The tally takes
     margin-left:auto as well as space-between, so it stays pinned right even if
     the row ever gains a third thing. */
  .shelf{font-size:10px;font-weight:700;letter-spacing:.3em;color:rgba(255,255,255,.62);
    margin:0 2px 12px;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
  /* Three ways to the same place, because this one has been reported twice and
     a stale stylesheet must not be able to put it back in the middle of the
     label: float carries it right in plain inline flow, margin-left:auto and
     space-between carry it right once flex applies (float is ignored there). */
  .shelf .count{float:right;margin-left:auto;text-align:right;letter-spacing:.22em;
                white-space:nowrap;flex:0 0 auto}
  .shelf > span:first-child{flex:0 1 auto;min-width:0}

  /* ── grid ── */
  /* The grids are empty until games.json lands, so the footer used to sit
     halfway up the page and then jump down — most of the rest of the layout
     shift. Room is reserved for what is coming: the tiles arrive into a space
     already the right size. */
  .grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
  #live{min-height:calc(5 * 161px)}
  #soon{min-height:96px}
  .card{position:relative;border:1px solid color-mix(in srgb, var(--tint,#4FD6FF) 55%, transparent);
    background:
      radial-gradient(130% 100% at 100% 0%, color-mix(in srgb, var(--tint,#4FD6FF) 40%, transparent), transparent 66%),
      linear-gradient(160deg, color-mix(in srgb, var(--tint,#4FD6FF) 17%, transparent), rgba(255,255,255,.03));
    padding:15px 13px 13px;min-height:150px;display:flex;flex-direction:column;
    cursor:pointer;overflow:hidden;border-radius:14px;
    box-shadow:0 6px 22px rgba(0,0,0,.35), inset 0 1px 0 color-mix(in srgb, var(--tint,#4FD6FF) 25%, transparent);
    transition:transform .16s, box-shadow .18s, border-color .16s}
  .card:active{transform:scale(.97)}
  .card .no{font-size:9px;font-weight:700;letter-spacing:.2em;color:rgba(255,255,255,.62);
    font-variant-numeric:tabular-nums}
  .card .glyph{margin:14px 0 auto;color:var(--tint,#4FD6FF);opacity:1;
    filter:drop-shadow(0 0 10px color-mix(in srgb, var(--tint,#4FD6FF) 55%, transparent))}
  .card .glyph svg{width:40px;height:40px;display:block}
  .card .nm{font-size:16px;font-weight:800;letter-spacing:.11em;margin-top:12px}
  .card .tg{font-size:9.5px;font-weight:600;letter-spacing:.13em;color:rgba(255,255,255,.68);
    margin-top:5px;line-height:1.5}
  .card .bs{font-size:9.5px;font-weight:700;letter-spacing:.18em;margin-top:10px;
    color:rgba(160,220,255,.8);font-variant-numeric:tabular-nums}
  .card.live:hover{border-color:color-mix(in srgb, var(--tint,#4FD6FF) 70%, transparent);
    box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 26px color-mix(in srgb, var(--tint,#4FD6FF) 30%, transparent)}
  .card .nm{color:#fff}
  .card .bs{color:color-mix(in srgb, var(--tint,#4FD6FF) 80%, white)}

  .card.soon{border-style:dashed;border-color:rgba(255,255,255,.075);background:none;border-radius:14px;
    min-height:96px;justify-content:space-between;cursor:default}
  .card.soon .no{color:rgba(255,255,255,.55)}
  .card.soon .lk{font-size:9px;font-weight:700;letter-spacing:.24em;color:rgba(255,255,255,.52)}
  .card.soon.nudge{animation:nudge .32s}
  @keyframes nudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

  .foot{margin-top:30px;text-align:center;font-size:9.5px;font-weight:600;letter-spacing:.24em;
    color:rgba(255,255,255,.60);line-height:2.1}
  .reset{margin-top:14px;background:none;border:0;color:rgba(255,255,255,.60);
    font:700 9px/1 inherit;letter-spacing:.24em;padding:10px;cursor:pointer}

  @supports not (background: color-mix(in srgb, red 50%, transparent)){
    .card{ border-color:rgba(255,255,255,.22);
      background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); }
  }
  @media (max-width:380px){
    .wordmark{font-size:13px;letter-spacing:.30em;text-indent:.30em}
    .count{font-size:9px;letter-spacing:.16em}
    .mast{padding-right:74px}
  }
  /* one row of what is coming: the grid is two abreast on a phone and four on
     a wide screen, so the tail is trimmed to match rather than guessed in JS */
  @media (max-width:619px){ #soon .card:nth-child(n+3){display:none} }
  @media (min-width:620px){ .grid{grid-template-columns:repeat(4,1fr)} body{max-width:820px;margin:0 auto} }
  @media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition:none!important}}