/* cashcat.party — cashcat.css: every style for index.html (moved out of the page in v0.6.0).
   Edit here; bump ?v= on the <link> in index.html with each release (docs/SWEEPS.md). */
  /* v0.32.0: the fonts are self-hosted (assets/fonts/, trimmed to the characters the site uses, licences in OFL.txt).
     index.html preloads the three UI fonts; the newspaper's three only download when the paper shows. */
  @font-face{ font-family:'Press Start 2P'; src:url(fonts/press-start-2p.woff2) format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
  @font-face{ font-family:'Silkscreen'; src:url(fonts/silkscreen.woff2) format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
  @font-face{ font-family:'JetBrains Mono'; src:url(fonts/jetbrains-mono-400.woff2) format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
  @font-face{ font-family:'JetBrains Mono'; src:url(fonts/jetbrains-mono-500.woff2) format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
  @font-face{ font-family:'JetBrains Mono'; src:url(fonts/jetbrains-mono-700.woff2) format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
  @font-face{ font-family:'UnifrakturMaguntia'; src:url(fonts/unifrakturmaguntia.woff2) format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
  @font-face{ font-family:'Playfair Display'; src:url(fonts/playfair-display-700.woff2) format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
  @font-face{ font-family:'Playfair Display'; src:url(fonts/playfair-display-900.woff2) format('woff2'); font-weight:900; font-style:normal; font-display:swap; }
  @font-face{ font-family:'Old Standard TT'; src:url(fonts/old-standard-tt-400.woff2) format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
  @font-face{ font-family:'Old Standard TT'; src:url(fonts/old-standard-tt-400i.woff2) format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
  @font-face{ font-family:'Old Standard TT'; src:url(fonts/old-standard-tt-700.woff2) format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

  :root{
    /* small pixel labels (8px): Silkscreen stays sharp there, Press Start 2P blurs.
       Press Start 2P stays for titles and buttons at 10px and up (same rule as scvrlet.css). */
    --font-label:'Silkscreen', 'Press Start 2P', monospace;
    --buy:#3dff7a;
    --buy-rgb:61,255,122;
    --sell:#ff4757;
    --sell-rgb:255,71,87;
    --rh-lime:#ccff00;
    --rh-lime-rgb:204,255,0;
    --ink:#eef2fb;
    --muted:#8892b0;
    --line:#20263a;
    --panel:#0b0d16;
    --bg:#070810;
    /* ---- liquid glass tokens (see design guide §5) ----
       plain glass: translucent fill + blur, used on most panels.
       refract glass (header, war-records pill): the same fill on a child
       .refract-layer that also carries the SVG displacement filter, kept off
       the content so text never warps. */
    --panel-bg:rgba(14,18,30,.46);
    --panel-bg-strong:rgba(9,11,20,.68);
    --panel-border:rgba(var(--rh-lime-rgb),.16);
    --panel-border-hi:rgba(var(--rh-lime-rgb),.4);
  }
  *{box-sizing:border-box;}
  .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;
  }
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'JetBrains Mono', monospace;
    min-height:100vh;
  }

  /* liquid-glass scrollbar: a translucent pill with a lit top edge and a
     shaded bottom edge (the same two-inset-shadow trick the glass panels use)
     over a transparent track, instead of a solid lime bar competing with the
     battlefield. Scrollbar pseudo-elements can't take backdrop-filter, so
     this is glass by light and shadow rather than by real blur. */
  ::-webkit-scrollbar{ width:18px; background:transparent; }
  ::-webkit-scrollbar-track{ background:transparent; }
  ::-webkit-scrollbar-thumb{
    background:linear-gradient(90deg, rgba(255,255,255,.07), rgba(255,255,255,.20) 50%, rgba(255,255,255,.06));
    border:4px solid transparent; background-clip:padding-box; border-radius:999px;
    box-shadow:inset 0 1px 1px rgba(255,255,255,.35), inset 0 -1px 1px rgba(0,0,0,.35);
  }
  ::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.30) 50%, rgba(255,255,255,.08));
    background-clip:padding-box;
  }
  /* Chrome 121+ ignores the ::-webkit rules above as soon as the standard
     scrollbar-color is set, so the standard version is only given to engines
     that lack the webkit pseudo-elements (Firefox). */
  @supports not selector(::-webkit-scrollbar){
    html{ scrollbar-width:auto; scrollbar-color:rgba(255,255,255,.22) transparent; }
  }

  /* ---- wash: ambient background wash behind everything, per design guide §6.1.
     Transform-only drift on a pre-blurred layer — GPU-composited, effectively
     free. This is what gives the glass panels below a colour to frost.
     buyBias/sellBias let JS lean the mix toward whichever side is dominating,
     so the whole page reads as a quiet status light, not just decoration. */
  #wash{
    /* z-index:-3, not 0 — a positioned element at stack level 0 paints AFTER
       the page's static in-flow content (header, sections), not before it.
       Negative stack levels are what actually sit behind unpositioned
       content without having to wrap the whole page in a z-indexed shell. */
    position:fixed; inset:-25%; z-index:-3; pointer-events:none;
    filter:blur(70px);
    background:
      radial-gradient(38% 32% at 18% 26%, rgba(var(--buy-rgb), var(--washBuy, .16)), transparent 70%),
      radial-gradient(34% 38% at 84% 18%, rgba(var(--sell-rgb), var(--washSell, .12)), transparent 70%),
      radial-gradient(30% 30% at 30% 82%, rgba(var(--rh-lime-rgb), .10), transparent 72%),
      radial-gradient(26% 26% at 78% 78%, rgba(var(--buy-rgb), .08), transparent 72%);
    transition: background 2.5s ease;
    animation: washDrift 70s ease-in-out infinite alternate;
  }
  @keyframes washDrift{ to{ transform:translate3d(-5%,4%,0) rotate(8deg); } }
  /* calm mode: one theme-coloured glow instead of the green/red pressure mix */
  html[data-page-color="calm"] #wash{
    background:
      radial-gradient(40% 34% at 22% 24%, rgba(var(--rh-lime-rgb), .12), transparent 70%),
      radial-gradient(34% 34% at 80% 20%, rgba(var(--rh-lime-rgb), .08), transparent 72%),
      radial-gradient(30% 30% at 32% 84%, rgba(var(--rh-lime-rgb), .10), transparent 72%); }
  /* Motion: never a bare prefers-reduced-motion media block. site.js sets
     data-reduce-motion from Settings → Motion (AUTO follows the device, FULL and
     REDUCE override it), so every rule keys off that attribute. */
  html[data-reduce-motion="true"] #wash{ animation:none; }

  /* ---- site field: the visitor-facing animated background — stars only,
     per request. Sits between the wash (colour) and the scanline overlay
     (texture), full-viewport, same z-index approach as #wash. ---- */
  #siteField{
    position:fixed; inset:0; z-index:-2; pointer-events:none;
    width:100%; height:100%;
  }

  .scan{
    position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:repeating-linear-gradient(to bottom, rgba(255,255,255,.014) 0px, rgba(255,255,255,.014) 1px, transparent 1px, transparent 3px);
    mix-blend-mode:overlay;
  }

  /* ---- plain glass: the default surface for panels that hold rows of data
     or body text — translucent fill + blur, no distortion (see §5.1 / §5.3:
     distortion behind small text hurts legibility). ---- */
  .glass{
    background:var(--panel-bg);
    border:1px solid var(--panel-border);
    border-radius:8px;
    backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,.07),
      inset 0 -1px 1px rgba(0,0,0,.35),
      0 10px 24px rgba(0,0,0,.35);
  }

  /* ---- refracting glass: the two hero surfaces only (header, war-records
     pill). Two-layer trick from §5.2 — filter + backdrop-filter on the same
     node drop unpredictably in Chrome/Safari, and distorting the content
     itself would warp the text, so the distortion lives on a child layer
     behind everything, and the content sits on top, untouched. ---- */
  .refract{ position:relative; background:transparent; isolation:isolate; }
  .refract > .refract-layer{
    position:absolute; inset:0; z-index:-1;
    background:var(--panel-bg-strong);
    backdrop-filter:blur(16px) saturate(150%);
    -webkit-backdrop-filter:blur(16px) saturate(150%);
    /* filter:url(#liquid) is set in index.html's <style>: a #fragment inside an
       external stylesheet can point at the stylesheet instead of the page */
  }

  @media (prefers-reduced-transparency: reduce){
    .glass{ background:var(--surface-solid, #0d1020); backdrop-filter:none; -webkit-backdrop-filter:none; }
    .refract > .refract-layer{ background:var(--surface-solid, #0d1020); backdrop-filter:none; -webkit-backdrop-filter:none; filter:none; }
  }

  header{
    padding:0 24px;
    border-bottom:1px solid var(--line);
    background:linear-gradient(180deg, var(--surface-solid, #0d1020), var(--bg));
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
    overflow:hidden;
  }
  #titleRow{
    display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
    padding:18px 0 20px;   /* extra bottom room for the creator hint line */
  }
  #titleRow h1{
    font-family:'Press Start 2P', monospace;
    font-size:16px;
    letter-spacing:.03em;
    margin:0;
    color:var(--ink);
  }
  #titleRow .tag{
    font-size:11px; color:var(--muted); letter-spacing:.04em;
  }

  /* ---- creator mark: replaces the paw emoji, which was the one full-colour
     anti-aliased object in a pixel header. A bordered circle keeps the
     typeface doing the work. The hint under it is a watermark, not a menu —
     it labels the button rather than waiting to be opened. ---- */
  #creatorBtn{
    position:relative;
    align-self:center;
    background:none; border:none; padding:0;
    margin:0 4px 0 0;
    cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
  }
  #creatorBtn .ico{
    width:26px; height:26px; border-radius:50%;
    border:1px solid var(--line); background:var(--surface, #10131f);
    color:var(--rh-lime);
    font-family:'Press Start 2P', monospace; font-size:10px;
    display:flex; align-items:center; justify-content:center;
    transition:border-color .15s, background .15s, transform .12s;
  }
  #creatorBtn:hover .ico{ border-color:var(--rh-lime); background:var(--surface-hi, #161a2c); }
  #creatorBtn:active .ico{ transform:translateY(2px); }
  #creatorBtn:focus-visible{ outline:none; }
  #creatorBtn:focus-visible .ico{ border-color:var(--rh-lime); box-shadow:0 0 0 2px rgba(204,255,0,.35); }
  #creatorBtn.active .ico{ border-color:var(--rh-lime); background:var(--surface-hi, #161a2c); }
  #creatorHint{
    /* left-aligned to the title, not centred on the button: centring pushed
       the line past the header's left padding and clipped it. 14px = the
       button's right margin (4) plus the titleRow gap (10), so it starts
       exactly under the C of CASHCAT. */
    position:absolute; top:calc(100% + 3px); left:calc(100% + 14px);
    font-family:'JetBrains Mono', monospace;
    font-size:8px; letter-spacing:.06em; white-space:nowrap;
    color:var(--buy); opacity:.26;
    pointer-events:none;
    transition:opacity .2s;
  }
  #creatorBtn:hover #creatorHint,
  #creatorBtn:focus-visible #creatorHint,
  #creatorBtn.active #creatorHint{ opacity:.72; }
  @media (max-width:700px){
    /* The hint used to be hidden here because the title wraps on a phone: the
       tag drops to a second line, and a hint anchored to the button's bottom
       landed on top of it. Anchoring to #titleRow instead puts it below both
       lines, where there's room. #creatorBtn goes position:static so it stops
       being the containing block and the absolute box resolves against the
       row. */
    #titleRow{ position:relative; padding-bottom:26px; }
    #creatorBtn{ position:static; }
    #creatorHint{
      display:block;
      top:auto; bottom:5px; left:0;
      font-size:8px;
      opacity:.5;              /* no hover on touch, so rest brighter */
    }
  }

  /* ---- creator panel ---- */
  .creatorLinks{
    list-style:none; margin:0 0 20px; padding:0;
    display:flex; flex-wrap:wrap; gap:8px;
  }
  .creatorLinks a{
    display:inline-block;
    font-family:'JetBrains Mono', monospace; font-size:11px;
    letter-spacing:.06em; text-decoration:none;
    color:var(--rh-lime); background:var(--surface, #10131f);
    border:1px solid var(--line); border-radius:4px;
    padding:7px 13px;
    transition:border-color .15s, background .15s, color .15s;
  }
  .creatorLinks a:hover{ border-color:var(--rh-lime); background:var(--rh-lime); color:#0b0d16; }
  .buildLog{
    list-style:none; margin:0 0 18px; padding:0;
    border-left:1px solid var(--line);
  }
  .buildLog li{
    position:relative;
    padding:0 0 14px 18px;
    font-size:12px; color:var(--muted); line-height:1.55;
  }
  .buildLog li::before{
    content:''; position:absolute; left:-4px; top:6px;
    width:7px; height:7px; border-radius:50%;
    background:var(--panel); border:1px solid var(--rh-lime);
  }
  .buildLog b{ color:var(--ink); font-weight:500; }
  .logIntro{ font-size:11px !important; color:var(--muted); margin:-2px 0 12px; max-width:640px; }
  .buildLog .logWhen{ display:inline-block; margin-right:8px; font:7px 'Press Start 2P', monospace; letter-spacing:.06em;
    color:#0b0d16; background:var(--rh-lime); padding:4px 6px; border-radius:3px; transform:skewX(-12deg); vertical-align:2px; }
  .buildLog li.wip .logWhen{ background:#ffb020; }
  .buildLog li.wip::before{ background:#ffb020; border-color:#ffb020; box-shadow:0 0 8px rgba(255,176,32,.5); }
  .buildLog.nextUp li{ color:var(--muted); }
  .buildLog.nextUp li::before{ background:transparent; border-color:var(--line); }
  /* third-party-links disclaimer under the TOKEN / NFT titles */
  .tabPanel .dyorNote{ font-size:10px; letter-spacing:.04em; color:var(--muted); margin:-8px 0 14px; opacity:.85; }
  /* numbered how-to steps */
  .howTo{ margin:0 0 18px; padding:0; list-style:none; counter-reset:step; max-width:640px; }
  .howTo li{ counter-increment:step; position:relative; padding:0 0 14px 38px; font-size:12px; line-height:1.6; color:var(--ink); }
  /* step markers: a three-segment progress bar per step (step 1 lights one
     segment, step 3 lights all three), with a light sweeping through */
  .howTo li::before{ content:''; position:absolute; left:0; top:7px; width:26px; height:6px;
    background:repeating-linear-gradient(90deg, rgba(var(--rh-lime-rgb),.18) 0 8px, transparent 8px 9px); }
  .howTo li::after{ content:''; position:absolute; left:0; top:7px; height:6px; width:calc(var(--lit) * 9px - 1px);
    background:repeating-linear-gradient(90deg, transparent 0 8px, #070810 8px 9px),
               linear-gradient(90deg, var(--rh-lime) 0%, #3dff7a 40%, #eaffb0 50%, #3dff7a 60%, var(--rh-lime) 100%);
    background-size:auto, 300% 100%; box-shadow:0 0 8px rgba(var(--rh-lime-rgb),.45);
    animation:stepSweep 2.4s linear infinite; }
  .howTo li:nth-child(1){ --lit:1; } .howTo li:nth-child(2){ --lit:2; } .howTo li:nth-child(3){ --lit:3; }
  .howTo li:nth-child(2)::after{ animation-delay:.25s; } .howTo li:nth-child(3)::after{ animation-delay:.5s; }
  @keyframes stepSweep{ from{ background-position:0 0, 150% 0; } to{ background-position:0 0, -150% 0; } }
  html[data-reduce-motion="true"] .howTo li::after{ animation:none; }
  .infoFold .howTo{ margin-top:4px; }
  .infoFold .discloseBody .creatorLinks{ margin-bottom:10px; }
  .discloseBody .creatorLinks a{ text-decoration:none; }
  .discloseBody .creatorLinks a:hover{ background:var(--rh-lime); color:#0b0d16; }
  .caution{ margin-top:10px; padding:8px 10px; border:1px solid rgba(255,176,32,.5); border-left:3px solid #ffb020;
    border-radius:4px; background:rgba(255,176,32,.07); color:var(--ink); font-size:11px; line-height:1.6; }
  .caution .cautionHead{ display:block; font:8px 'Press Start 2P', monospace; letter-spacing:.06em; color:#ffb020; margin-bottom:4px; }
  .caution b{ color:#ffb020; font-weight:700; }
  .howTo a{ color:var(--rh-lime); text-decoration:underline; text-underline-offset:2px; }
  .howTo a:hover{ background:var(--rh-lime); color:#0b0d16; }
  /* exchange / market listings, grouped */
  .exGroup{ font-size:10px; letter-spacing:.08em; color:var(--muted); margin:10px 0 6px; }
  .exGroup + .creatorLinks{ margin-bottom:10px; }
  .creatorLinks.small a{ font-size:10px; padding:6px 10px; }
  /* exchange marks: a monochrome monogram tile per venue, the same for every
     one, so the list scans fast without any venue looking promoted */
  .exMk{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:16px; padding:0 3px;
    margin:-2px 7px -2px -3px; box-sizing:border-box; vertical-align:middle; font:normal 6.5px 'Press Start 2P', monospace;
    letter-spacing:0; color:currentColor; border:1px solid currentColor; border-radius:3px; opacity:.85; }
  .ecoCard{ font-size:12px; line-height:1.6; color:var(--muted); max-width:640px; margin:0 0 16px;
            border:1px solid var(--line); border-radius:6px; padding:10px 12px; background:rgba(255,255,255,.02); }
  .ecoCard b{ color:var(--ink); font-weight:500; }
  .ecoCard a{ color:var(--rh-lime); }
  /* chain tag on the contract copy button */
  .walletBtn .chainTag{ flex:none; font:8px 'Press Start 2P', monospace; letter-spacing:.04em; padding:4px 6px; border-radius:3px;
    color:#0b0d16; background:var(--rh-lime); }
  .walletBtn:hover .chainTag{ background:#0b0d16; color:var(--rh-lime); }
  /* community project cards */
  .projGrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; margin:4px 0 18px; }
  .projCard{ display:flex; flex-direction:column; text-decoration:none; color:var(--ink); border-radius:12px; overflow:hidden;
    background:var(--panel-bg); border:1px solid var(--panel-border);
    backdrop-filter:blur(12px) saturate(140%); -webkit-backdrop-filter:blur(12px) saturate(140%);
    transition:transform .18s ease, border-color .18s ease; }
  .projCard:hover, .projCard:focus-visible{ transform:translateY(-3px); border-color:var(--rh-lime); outline:none; }
  .projArt{ height:110px; display:flex; align-items:center; justify-content:center; position:relative;
    background:radial-gradient(circle at 50% 60%, rgba(var(--rh-lime-rgb),.16), transparent 65%),
               repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 2px, transparent 2px 6px), #0a0d18; }
  .projArt img{ height:74px; image-rendering:auto; filter:drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
  .projArt.pfp img{ height:82px; padding:6px; border-radius:50%; background:rgba(var(--rh-lime-rgb),.22); border:2px solid var(--rh-lime); }
  .projArt.chain i{ width:30px; height:18px; border:5px solid var(--rh-lime); border-radius:10px; margin:0 -6px; box-shadow:0 0 12px rgba(var(--rh-lime-rgb),.35); }
  .projArt.chain i:nth-child(2){ border-color:#ffb020; transform:translateY(6px); }
  .projArt.plus{ font:30px 'Press Start 2P', monospace; color:var(--rh-lime); }
  .projCard.submit{ border-style:dashed; }
  .projBody{ display:flex; flex-direction:column; gap:6px; padding:12px 14px 14px; font-size:11.5px; line-height:1.55; color:var(--muted); }
  .projBody b{ font:9px 'Press Start 2P', monospace; color:var(--ink); letter-spacing:.04em; font-weight:400; }
  .projBody em{ font-style:normal; font-size:10px; color:var(--rh-lime); margin-top:auto; }
  /* weekly champions */
  .weekNote{ font-size:11px !important; color:var(--muted); margin:-6px 0 10px; }
  .arcadeChamp{ --c:var(--rh-lime); margin:0 0 10px; border-color:rgba(var(--rh-lime-rgb), .45); }
  .arcadeChamp .who{ font-size:14px; }
  .arcadeChamp ol li .gm{ color:var(--muted); font-size:10px; margin-left:6px; }
  .arcadeChamp .acHow, .arcadeChamp .acLast{ font-size:10.5px !important; color:var(--muted); margin:4px 0 0; line-height:1.6; }
  .arcadeChamp .acLast:empty{ display:none; }
  .champGrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:10px; margin:0 0 16px; }
  .champ{ display:flex; flex-direction:column; gap:5px; padding:12px; border-radius:12px; background:var(--panel-bg);
    border:1px solid var(--panel-border); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); min-width:0; }
  .champ .badge{ align-self:flex-start; font:7px 'Press Start 2P', monospace; letter-spacing:.05em; color:#0b0d16;
    background:var(--c); padding:5px 7px; border-radius:3px; box-shadow:2px 2px 0 rgba(0,0,0,.5); }
  .champ .badge::before{ content:'\2605  '; }
  .champ .who{ font:10px 'Press Start 2P', monospace; color:var(--ink); font-weight:400; margin-top:6px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .champ .pts{ font-size:11px; color:var(--c, var(--rh-lime)); min-height:15px; }
  .champ ol{ list-style:none; margin:0; padding:0; font-size:10.5px; color:var(--muted); }
  .champ ol li{ display:flex; justify-content:space-between; gap:6px; padding:2px 0; border-top:1px solid rgba(255,255,255,.06); }
  .champ ol li span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .champPlay{ margin-top:auto; align-self:flex-start; font:700 9.5px 'JetBrains Mono', monospace; letter-spacing:.05em; cursor:pointer;
    color:var(--ink); background:none; border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:5px 10px; }
  .champPlay:hover{ border-color:var(--rh-lime); color:var(--rh-lime); }
  /* ---- live price: header pill + the strip under the contract ---- */
  #pricePill{
    display:inline-flex; align-items:center; cursor:pointer; margin-left:4px;
    font:9px 'Press Start 2P', monospace; letter-spacing:.03em; color:var(--ink);
    background:var(--pill-bg); border:1px solid var(--pill-border); border-radius:3px; padding:7px 12px;
    transform:skewX(-12deg);
    backdrop-filter:blur(10px) saturate(140%); -webkit-backdrop-filter:blur(10px) saturate(140%);
    transition:border-color .15s, transform .12s, background .15s; }
  #pricePill[hidden]{ display:none; }
  #pricePill:hover{ transform:skewX(-12deg) translateY(-2px); border-color:var(--rh-lime); }
  #pricePill .pTick{ color:var(--muted); font-family:var(--font-label); font-size:8px; }
  #pricePill .pUsd{ color:var(--ink); }
  #pricePill .pChg.up{ color:var(--buy); } #pricePill .pChg.down{ color:var(--sell); }
  #pricePill.tick{ animation:priceTick .6s ease-out; }
  @keyframes priceTick{ 0%{ background:rgba(var(--rh-lime-rgb),.25); } 100%{ background:var(--pill-bg); } }
  #priceStrip{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; margin:12px 0 4px; padding:12px 16px; max-width:640px; }
  #priceStrip[hidden]{ display:none; }
  .psCell{ display:flex; flex-direction:column; gap:3px; min-width:84px; }
  .psLabel{ font:7px 'Press Start 2P', monospace; letter-spacing:.06em; color:var(--muted); }
  .psCell b{ font:13px 'JetBrains Mono', monospace; font-weight:700; color:var(--ink); }
  #psChange.up{ color:var(--buy); } #psChange.down{ color:var(--sell); }
  .psLink{ margin-left:auto; font:8px 'Press Start 2P', monospace; color:var(--rh-lime); text-decoration:none; letter-spacing:.04em; }
  .psLink:hover{ text-decoration:underline; text-underline-offset:3px; }
  @media (max-width:560px){ #priceStrip{ gap:10px 16px; } .psCell{ min-width:70px; } .psCell b{ font-size:12px; } }
  /* ---- venue blocks: where CASHCAT trades ---- */
  /* ---- token tab: each section is its own bubble, with the page background
     showing through the gaps ---- */
  #panel-token.tabPanel.active{
    background:none; border:none; box-shadow:none; padding:0;
    backdrop-filter:none; -webkit-backdrop-filter:none; }
  #panel-token .bubble{
    background:var(--panel-bg); border:1px solid var(--panel-border); border-radius:14px;
    padding:16px 18px; margin:0 0 14px;
    backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
    box-shadow:inset 0 1px 1px rgba(255,255,255,.06), 0 10px 26px rgba(0,0,0,.32);
    transition:border-color .2s ease, transform .2s ease; }
  #panel-token .bubble:hover{ border-color:rgba(var(--rh-lime-rgb),.34); }
  #panel-token .bubble > h2:first-child{ margin-top:0 !important; }
  #panel-token .memeTerms.bubble{ border-top:1px solid var(--panel-border); }
  @media (max-width:560px){ #panel-token .bubble{ padding:14px; border-radius:12px; } }
  @media (prefers-reduced-transparency: reduce){ #panel-token .bubble{ background:var(--surface-solid, #0d1020); backdrop-filter:none; } }

  .venueGrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(188px, 1fr)); gap:10px; margin:0 0 14px; }
  .venue{
    position:relative; display:flex; align-items:center; gap:11px; padding:12px 13px; overflow:hidden;
    text-decoration:none; color:var(--ink); background:var(--panel-bg); border:1px solid var(--panel-border);
    backdrop-filter:blur(12px) saturate(140%); -webkit-backdrop-filter:blur(12px) saturate(140%);
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
    transition:transform .16s ease, border-color .16s ease, background .16s ease; }
  .venue:hover, .venue:focus-visible{ transform:translateY(-3px); border-color:var(--rh-lime); outline:none;
    background:linear-gradient(120deg, rgba(var(--rh-lime-rgb),.10), transparent 60%), var(--panel-bg); }
  .vMk{ flex:none; width:38px; height:38px; display:flex; align-items:center; justify-content:center;
    font:8px 'Press Start 2P', monospace; letter-spacing:0; color:var(--rh-lime);
    border:1px solid rgba(var(--rh-lime-rgb),.45); background:rgba(var(--rh-lime-rgb),.06); }
  .venue:hover .vMk{ color:#0b0d16; background:var(--rh-lime); border-color:var(--rh-lime); }
  .venue, .venue *, .discloseBody .venue, .discloseBody .venue *{ text-decoration:none; }
  .discloseBody .venue{ color:var(--ink); }
  .discloseBody .venue .vText span{ color:var(--muted); }
  .discloseBody .venue:hover{ color:var(--ink); background:linear-gradient(120deg, rgba(var(--rh-lime-rgb),.10), transparent 60%), var(--panel-bg); }
  .vText{ display:flex; flex-direction:column; gap:3px; min-width:0; }
  .vText b{ font:9px 'Press Start 2P', monospace; font-weight:400; letter-spacing:.02em; color:var(--ink);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .vText span{ font-size:10px; color:var(--muted); }
  .vGo{ margin-left:auto; color:var(--muted); font-size:13px; transition:color .16s, transform .16s; }
  .venue:hover .vGo{ color:var(--rh-lime); transform:translate(2px, -2px); }
  /* a matrix-green line sweeps down the card on hover */
  .venue::after{ content:''; position:absolute; left:0; right:0; top:-40%; height:40%; pointer-events:none;
    background:linear-gradient(180deg, transparent, rgba(var(--rh-lime-rgb),.18), transparent); opacity:0; }
  .venue:hover::after{ opacity:1; animation:vSweep 1.1s linear infinite; }
  @keyframes vSweep{ from{ transform:translateY(0); } to{ transform:translateY(350%); } }
  .venueGrid.perps .vMk{ color:#ffb020; border-color:rgba(255,176,32,.45); background:rgba(255,176,32,.07); }
  .venueGrid.perps .venue:hover{ border-color:#ffb020;
    background:linear-gradient(120deg, rgba(255,176,32,.10), transparent 60%), var(--panel-bg); }
  .venueGrid.perps .venue:hover .vMk{ color:#0b0d16; background:#ffb020; border-color:#ffb020; }
  .venueGrid.perps .venue:hover .vGo{ color:#ffb020; }
  html[data-reduce-motion="true"] .venue:hover::after{ animation:none; }
  .creatorNote{
    font-size:11px; color:var(--muted); line-height:1.6;
    border-top:1px solid var(--line); padding-top:14px; max-width:640px;
  }

  /* inline links inside panel prose had no rule at all, so they fell back to
     the browser's default blue — unreadable against this palette. Gold matches
     the rest of the page; the underline keeps them identifiable as links now
     that colour alone isn't doing that job against gold headings. */
  .tabPanel p a,
  .creatorNote a,
  .discloseBody a{
    color:var(--rh-lime);
    text-decoration:underline;
    text-underline-offset:2px;
    text-decoration-thickness:1px;
    transition:color .15s, background .15s;
  }
  .tabPanel p a:hover,
  .creatorNote a:hover,
  .discloseBody a:hover{
    background:var(--rh-lime);
    color:#0b0d16;
    text-decoration:none;
  }

  /* ---- donate card — same tokens as the rest of the page (--rh-lime, --panel,
     JetBrains Mono / Press Start 2P) rather than a separate lime/Courier
     theme, so it reads as part of this panel instead of a pasted-in widget */
  .donateCard{
    margin-top:26px;
    max-width:420px;
    background:var(--panel-bg);
    border:1px solid var(--line);
    border-radius:6px;
    padding:20px 22px;
    backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    box-shadow:inset 0 1px 1px rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.3);
  }
  @media (prefers-reduced-transparency: reduce){
    .donateCard{ background:var(--surface-solid, #0d1020); backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; }
  }
  .donateCard h3{
    font-family:'Press Start 2P', monospace;
    font-size:11px; color:var(--rh-lime);
    letter-spacing:.04em; text-transform:uppercase;
    margin:0 0 12px;
  }
  .donateCard p{
    font-size:12px; color:var(--muted); line-height:1.6;
    margin:0 0 16px;
  }
  /* same pill as .creatorLinks a, just heavier —
     this one's a primary action, not a reference link, so it should read as
     findable without needing a hover to notice it */
  .donateBtn{
    display:inline-block;
    font-family:'JetBrains Mono', monospace; font-weight:700;
    font-size:12px; letter-spacing:.06em; text-transform:uppercase;
    text-decoration:none;
    color:var(--rh-lime); background:var(--surface, #10131f);
    border:1px solid var(--rh-lime); border-radius:4px;
    padding:10px 20px;
    transition:background .15s, color .15s, transform .12s;
  }
  .donateBtn:hover{ background:var(--rh-lime); color:#0b0d16; }
  .donateBtn:active{ transform:translateY(1px); }

  .donateActions{
    display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start;
  }
  /* wallet-copy variant: same pill, but it's a <button> not a link (nothing to
     navigate to), sized for a 42-char address, and wraps instead of clipping —
     the ask was to show the address itself, so truncating it would defeat that */
  .walletBtn{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'JetBrains Mono', monospace; font-weight:700;
    font-size:11px; letter-spacing:.02em;
    color:var(--rh-lime); background:var(--surface, #10131f);
    border:1px solid var(--rh-lime); border-radius:4px;
    padding:10px 16px;
    max-width:100%;
    text-align:left; word-break:normal; white-space:nowrap;
    cursor:pointer;
    transition:background .15s, color .15s, transform .12s;
  }
  .walletBtn:hover{ background:var(--rh-lime); color:#0b0d16; }
  .walletBtn:active{ transform:translateY(1px); }
  .walletBtn .copyIco{ flex:none; font-size:13px; line-height:1; }
  /* the token contract reads best as one unbroken line: no wrapping, and the
     type steps down on narrow screens instead of splitting the address */
  /* every copy button fits its address on one line (see fitCopyButtons);
     last resort on very narrow screens is to wrap, never to hide characters */
  .walletBtn[data-address]{ font-size:12px; }
  .walletBtn.wrap{ white-space:normal; word-break:break-all; }
  /* the Solana address is copyable but deliberately not styled like the
     official contract, so the two can't be mistaken for each other */
  .walletBtn.muted{ color:var(--muted); border-color:var(--line); }
  .walletBtn.muted:hover{ background:var(--line); color:var(--ink); }
  .walletBtn.copied{ border-color:var(--buy); color:var(--buy); }
  .walletBtn.copied:hover{ background:var(--buy); color:#0b0d16; }

  /* ---- reusable disclosure — same interaction and chevron as WAR RECORDS,
     generalised so any panel can fold long-form text away by default ---- */
  .discloseBtn{
    display:flex; align-items:center; gap:9px;
    background:none; border:none; padding:0; margin:0;
    cursor:pointer; color:var(--rh-lime); text-align:left;
  }
  .discloseBtn:focus-visible{ outline:1px solid var(--rh-lime); outline-offset:4px; }
  /* section headers: white with a slow matrix-green sweep running through the
     letters; solid lime on hover, focus or while open */
  .discloseTitle{
    background-image:linear-gradient(180deg, #fff 0 38%, rgba(61,255,122,.95) 46%, rgba(122,255,170,.7) 52%, #fff 60% 100%);
    background-size:100% 420%; background-repeat:no-repeat;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:mxSweep 7s linear infinite;
  }
  .discloseChev{ color:#fff; transition:color .15s; }
  @keyframes mxSweep{ from{ background-position:0 -120%; } to{ background-position:0 220%; } }
  .discloseBtn:hover .discloseTitle, .discloseBtn:focus-visible .discloseTitle,
  .discloseBtn[aria-expanded="true"] .discloseTitle{
    background-image:none; color:var(--rh-lime); animation:none; }
  .discloseBtn:hover .discloseChev, .discloseBtn[aria-expanded="true"] .discloseChev{ color:var(--rh-lime); }
  html[data-reduce-motion="true"] .discloseTitle{ animation:none; }
  .discloseTitle{
    font-family:'Press Start 2P', monospace;
    font-size:10px; color:var(--rh-lime); letter-spacing:.04em;
  }
  .discloseChev{
    font-size:10px; color:var(--rh-lime);
    transition:transform .18s ease;
    display:inline-block;
  }
  .discloseBtn[aria-expanded="true"] .discloseChev{ transform:rotate(90deg); }
  .discloseBody{
    margin-top:12px; max-width:640px;
    border-left:1px solid var(--line); padding-left:16px;
  }
  .discloseBody p{
    font-size:12px; color:var(--muted); line-height:1.65; margin:0 0 12px;
  }
  .discloseBody p:last-child{ margin-bottom:0; }
  .discloseBody b{ color:var(--ink); font-weight:500; }
  /* a disclosure inside a disclosure: drop the second rail and indent so it
     reads as a nested step rather than a quote inside a quote */
  .nestedDisclose{ margin-top:18px; }
  .discloseBody .discloseBody{
    border-left:none; padding-left:0; margin-top:10px;
  }
  .discloseBody .discloseTitle{ font-size:9px; }
  /* ---- NFT panel ---- */
  .statGrid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
    gap:1px; margin:0 0 20px; max-width:640px;
    background:var(--line); border:1px solid var(--line); border-radius:5px;
    overflow:hidden;
  }
  .statGrid > div{
    background:var(--panel-bg); padding:11px 13px;
    backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
  }
  @media (prefers-reduced-transparency: reduce){
    .statGrid > div{ background:var(--surface-solid, #0d1020); backdrop-filter:none; -webkit-backdrop-filter:none; }
  }
  .statGrid dt{
    font-family:'JetBrains Mono', monospace; font-size:9px;
    letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
    margin:0 0 5px;
  }
  .statGrid dd{
    margin:0; font-family:'Press Start 2P', monospace;
    font-size:12px; color:var(--rh-lime);
  }
  .statAs{
    display:block; margin-top:5px;
    font-family:'JetBrains Mono', monospace; font-size:9px;
    letter-spacing:.04em; color:var(--muted);
  }
  .nftHead{ display:flex; align-items:center; justify-content:space-between; gap:10px; max-width:640px; margin:0 0 8px;
             font-size:10px; letter-spacing:.08em; color:var(--muted); }
  .nftGrid a{ position:relative; }
  .nftGrid a span{ position:absolute; left:4px; bottom:4px; font:9px/1 'JetBrains Mono',monospace; color:#fff;
                   background:rgba(0,0,0,.6); padding:3px 5px; border-radius:3px; }
  .nftGrid .ph{ aspect-ratio:1/1; border:1px solid var(--line); border-radius:4px;
                background:linear-gradient(90deg, var(--surface, #10131f) 0%, #1a1f33 50%, var(--surface, #10131f) 100%); background-size:200% 100%;
                animation:nftShimmer 1.2s linear infinite; }
  @keyframes nftShimmer{ to{ background-position:-200% 0; } }
  .nftNote{ font-size:11px; color:var(--muted); max-width:640px; }
  .nftGrid{
    display:grid; grid-template-columns:repeat(4, 1fr);
    gap:8px; max-width:640px; margin:0 0 20px;
  }
  .nftGrid a{
    display:block; line-height:0;
    border:1px solid var(--line); border-radius:4px; overflow:hidden;
    background:var(--surface, #10131f);
    transition:border-color .15s, transform .12s;
  }
  .nftGrid a:hover{ border-color:var(--rh-lime); transform:translateY(-2px); }
  .nftGrid img{
    width:100%; aspect-ratio:1/1; object-fit:cover; display:block;
    image-rendering:pixelated;   /* keep the pixel art crisp when scaled */
  }
  @media (max-width:500px){
    .nftGrid{ grid-template-columns:repeat(2, 1fr); }
  }

  .lore{ max-width:640px; }
  .pullQuote{ margin:6px 0 18px; padding:14px 18px; border-left:3px solid var(--rh-lime);
    font:13px/1.6 'Press Start 2P', monospace; color:var(--ink); letter-spacing:.02em;
    background:linear-gradient(90deg, rgba(var(--rh-lime-rgb),.08), transparent 70%); }
  .pullQuote b{ color:var(--rh-lime); font-weight:400; }
  .readMore{ margin:0 0 6px; padding:0; border:0; background:none; cursor:pointer;
    font:9px 'Press Start 2P', monospace; letter-spacing:.06em; color:var(--rh-lime); }
  .readMore:hover{ text-decoration:underline; text-underline-offset:4px; }
  /* timeline: pixel squares on a line */
  .timeline{ list-style:none; margin:4px 0 22px; padding:0; display:grid; grid-template-columns:repeat(5, 1fr);
    position:relative; max-width:720px; }
  .timeline::before{ content:''; position:absolute; left:6px; right:6px; top:6px; height:2px;
    background:repeating-linear-gradient(90deg, var(--rh-lime) 0 6px, transparent 6px 10px); opacity:.55; }
  .timeline li{ position:relative; padding:20px 8px 0 0; font-size:10.5px; line-height:1.5; color:var(--muted); }
  .timeline b{ display:block; font:8px 'Press Start 2P', monospace; color:var(--rh-lime); margin-bottom:5px; letter-spacing:.04em; font-weight:400; }
  .timeline .tlDot{ position:absolute; left:0; top:0; width:12px; height:12px; background:var(--bg, #070810);
    border:2px solid var(--rh-lime); box-shadow:0 0 0 2px var(--bg, #070810); image-rendering:pixelated; }
  .timeline li.now .tlDot{ background:var(--rh-lime); animation:tlPulse 1.6s steps(2) infinite; }
  @keyframes tlPulse{ 50%{ box-shadow:0 0 0 2px var(--bg, #070810), 0 0 10px 2px rgba(var(--rh-lime-rgb),.6); } }
  @media (max-width:640px){
    .timeline{ grid-template-columns:1fr; gap:12px; }
    .timeline::before{ left:5px; right:auto; top:6px; bottom:6px; width:2px; height:auto;
      background:repeating-linear-gradient(180deg, var(--rh-lime) 0 6px, transparent 6px 10px); }
    .timeline li{ padding:0 0 0 24px; }
  }
  html[data-reduce-motion="true"] .timeline li.now .tlDot{ animation:none; }
  .lore p{
    font-size:13px; line-height:1.72; color:var(--ink);
    margin:0 0 14px;
  }
  .lore b{ color:var(--rh-lime); font-weight:500; }
  .lore .loreNote{
    font-size:11px; color:var(--muted); line-height:1.6;
    border-top:1px solid var(--line); padding-top:12px; margin-top:18px;
  }
  .lore .loreNote b{ color:var(--muted); }
  .tokenWarn{
    font-size:12px; line-height:1.65; color:var(--ink);
    background:rgba(255,71,87,.06);
    border:1px solid rgba(255,71,87,.3); border-radius:4px;
    padding:11px 13px; max-width:640px;
  }
  .tokenWarn b{ color:var(--sell); }
  .memeTerms{
    margin-top:28px; border-top:1px solid var(--line); padding-top:18px;
  }

  /* ---- nav tabs: hang down from the very top edge of the page, flat top,
     rounded only at the bottom, like folder/browser tabs ---- */
  #navInner{
    display:flex; gap:6px; flex-wrap:wrap;
    justify-content:flex-end;
    align-self:flex-start;
  }
  /* Six tabs no longer fit one row on a phone, and wrapping to two rows costs
     header height right where vertical space is scarcest. Scroll them
     sideways instead: all six stay reachable on a single row. */
  @media (max-width:700px){
    /* claw back the side padding so the row overflows by as little as
       possible — an 8px clip reads as a bug, a clear scroll reads as a scroll */
    header{ padding:0 12px; gap:10px; }
    #navInner{
      flex-wrap:nowrap;
      justify-content:flex-start;
      align-self:stretch;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      /* the tabs hang off the top edge, so the scroller must not clip them */
      padding-top:1px;
      scroll-snap-type:x proximity;
      /* the edge fades come from .fadeL / .fadeR (v0.9.0, set by site.js
         NavScrollHint), so they follow the scroll position */
    }
    #navInner::-webkit-scrollbar{ display:none; }
    .navBtn{
      flex:none;
      padding:8px 12px 7px;
      font-size:10px;
      scroll-snap-align:start;
    }
  }
  .navBtn{
    position:relative;
    font-family:'JetBrains Mono', monospace;
    font-weight:700;
    font-size:11px;
    letter-spacing:.08em;
    color:var(--ink);
    text-decoration:none;
    background:var(--surface, #10131f);
    border:1px solid var(--line);
    border-top:none;
    border-radius:0 0 5px 5px;
    padding:9px 16px 8px;
    display:inline-flex;
    align-items:center;
    overflow:hidden;
    white-space:nowrap;
    transition:border-color .15s, background .15s, transform .12s;
    animation:tabDrop .5s cubic-bezier(.2,.8,.3,1.2) backwards;
  }
  .navBtn:nth-child(1){animation-delay:.05s;}
  .navBtn:nth-child(2){animation-delay:.15s;}
  .navBtn:nth-child(3){animation-delay:.25s;}
  .navBtn:nth-child(4){animation-delay:.35s;}
  .navBtn:nth-child(5){animation-delay:.45s;}
  .navBtn:nth-child(6){animation-delay:.55s;}
  @keyframes tabDrop{
    from{transform:translateY(-100%); opacity:0;}
    to{transform:translateY(0); opacity:1;}
  }
  .navBtn::after{
    /* faint matrix-code backdrop, brightens on hover */
    content:attr(data-code);
    position:absolute; inset:0;
    font-size:8px; line-height:1.1; letter-spacing:0;
    color:var(--buy);
    opacity:.08;
    padding:2px 4px;
    overflow:hidden;
    pointer-events:none;
    white-space:pre-wrap;
    word-break:break-all;
    transition:opacity .2s;
  }
  .navBtn:hover{
    background:var(--surface-hi, #161a2c);
    transform:translateY(2px);
  }
  .navBtn:hover::after{opacity:.18;}
  .navBtn .label{position:relative; z-index:1;}
  .navBtn:active{transform:translateY(3px);}

  /* ---- battlefield embed ---- */
  #battlefieldSection{
    width:100%;
    margin:0;
    padding:0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  #battlefieldFrame{
    width:100%;
    aspect-ratio:1200/600;
    border:none;
    border-radius:0;
    display:block;
    background:transparent;
  }
  .frameWrap{ position:relative; }
  /* ---- edge blend: melts the iframe into the site background behind it.
     backdrop-filter reads the actual composited pixels under the element —
     including the iframe's rendered content, since this is a compositor
     effect, not a cross-document read — so it genuinely blurs the seam
     rather than just laying a gradient over it. The mask fades the blur's
     own coverage from full at the seam to none a short way in, so it reads
     as a dissolve rather than a hard blurred stripe. (Weaker support in
     Firefox as of this writing; the hard edge is the fallback there.) ---- */
  .frameBlend{
    position:absolute; left:0; right:0; height:64px;
    pointer-events:none; z-index:2;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    background:rgba(var(--bg-rgb, 7,8,16),.22);
  }
  .frameBlend.top{
    top:0;
    -webkit-mask-image:linear-gradient(to bottom, #000 0%, transparent 100%);
    mask-image:linear-gradient(to bottom, #000 0%, transparent 100%);
  }
  .frameBlend.bottom{
    bottom:0;
    -webkit-mask-image:linear-gradient(to top, #000 0%, transparent 100%);
    mask-image:linear-gradient(to top, #000 0%, transparent 100%);
  }
  @media (prefers-reduced-transparency: reduce){
    .frameBlend{ display:none; }
  }
  /* At 2:1 a 375px phone gets an 88px field once the overlay's own chrome is
     subtracted — but a king unit plus spawn jitter needs 109px, so the tallest
     sprites were being clipped off the top of the lane. The lane only clears
     109px above ~477px wide, hence the 500px switch; 4/5 restores ~180-230px
     of headroom. The overlay's own breakpoint fires at the same width. */
  @media (max-width:500px){
    #battlefieldFrame{ aspect-ratio:4/5; }
  }
  /* Feed source control. Live is the default and the toggle is labelled, so
     simulated trades can never be mistaken for real ones — the badge beside it
     reports what the overlay is actually doing, not what this control asked
     for, so the two can't disagree. */
  #feedSwitch{
    display:flex; align-items:center; justify-content:flex-end;
    gap:10px; flex-wrap:wrap;
    max-width:900px; margin:0 auto; padding:8px 24px 0;
  }
  #feedSwitchBtns{ display:flex; gap:6px; }
  #feedSwitch .lbTab{ padding:5px 12px; font-size:10px; }
  @media (max-width:500px){
    #feedSwitch{ justify-content:space-between; padding:8px 14px 0; gap:8px; }
  }

  /* ---- scroll cue — a small floating arrow, fixed so it's reachable from
     anywhere on the page, not just near the top ---- */
  #scrollCue{
    display:none;
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:50;
  }
  #scrollCue.visible{display:block;}
  #scrollCue .chev{
    font-family:'Press Start 2P', monospace;
    font-size:14px;
    color:var(--rh-lime);
    background:var(--surface, #10131f);
    border:1px solid var(--line);
    border-radius:3px;
    width:38px; height:38px;
    display:flex; align-items:center; justify-content:center;
    animation:bob 1.6s ease-in-out infinite;
    cursor:pointer;
    transition:border-color .15s, background .15s;
  }
  #scrollCue .chev:hover{
    border-color:var(--rh-lime);
    background:var(--surface-hi, #161a2c);
  }
  @keyframes bob{
    0%,100%{transform:translateY(0); opacity:.7;}
    50%{transform:translateY(5px); opacity:1;}
  }

  /* ---- war records leaderboard ---- */
  #leaderboard{
    max-width:900px;          /* was 1200 — ten short rows in 1200px read as empty */
    margin:0 auto;
    padding:9px 24px 11px;    /* was 18px/22px — condensed ~50% per request */
    border-top:1px solid var(--line);
  }
  #lbHead{
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:12px;
    padding:10px 16px; border-radius:10px;
  }
  #lbBody{ padding:14px 16px 4px; border-radius:0 0 10px 10px; }
  #lbDisclose{
    display:flex; align-items:center; gap:9px;
    background:none; border:none; padding:0; margin:0;
    cursor:pointer; color:#fff;
  }
  #lbDisclose:focus-visible{ outline:1px solid var(--rh-lime); outline-offset:4px; }
  .lbTitle{
    font-family:'Press Start 2P', monospace;
    font-size:13px; color:#fff;
  }
  .lbChev{
    font-size:10px; color:#fff;
    transition:transform .18s ease;
    display:inline-block;
  }
  #lbDisclose[aria-expanded="true"] .lbChev{ transform:rotate(90deg); }
  #lbBody{ margin-top:8px; }   /* was 16px */

  /* ---- feed state badge ----
     Reported by the overlay itself rather than guessed at here, so it can't
     drift out of sync with what's actually being rendered. DEMO is styled to
     be noticed: simulated numbers sitting next to real ones, unlabelled, is
     how a project ends up looking like it faked its volume. */
  .feedBadge{
    display:inline-flex; align-items:center; gap:6px;
    font-family:'JetBrains Mono',monospace; font-size:9px;
    letter-spacing:.08em; text-transform:uppercase;
    border:1px solid var(--line); border-radius:3px;
    padding:3px 8px; color:var(--muted);
    white-space:nowrap;
  }
  .feedBadge .feedDot{
    width:6px; height:6px; border-radius:50%;
    background:var(--muted); flex:none;
  }
  .feedBadge.live{ color:var(--buy); border-color:rgba(61,255,122,.45); }
  .feedBadge.live .feedDot{ background:var(--buy); box-shadow:0 0 7px var(--buy); animation:feedPulse 1.4s infinite; }
  .feedBadge.demo{ color:var(--rh-lime); border-color:rgba(204,255,0,.5); }
  .feedBadge.demo .feedDot{ background:var(--rh-lime); box-shadow:0 0 7px var(--rh-lime); }
  .feedBadge.error{ color:var(--sell); border-color:rgba(255,71,87,.45); }
  .feedBadge.replay{ color:#7fb8ff; border-color:rgba(127,184,255,.5); }
  .feedBadge.replay .feedDot{ background:#7fb8ff; }
  .feedBadge.error .feedDot{ background:var(--sell); }
  @keyframes feedPulse{0%,100%{opacity:1}50%{opacity:.35}}

  #feedNotice{
    font-size:11px; color:var(--rh-lime); line-height:1.5;
    background:rgba(204,255,0,.06);
    border:1px solid rgba(204,255,0,.25); border-radius:4px;
    padding:8px 11px; margin:0 0 14px;
  }
  #feedNotice[hidden]{ display:none; }

  /* ---- session strikes, mirrored from the overlay ---- */
  #sessionStrikes{ margin:0 0 18px; }
  .ssHead{
    display:flex; align-items:baseline; justify-content:space-between;
    gap:10px; flex-wrap:wrap;
    font-family:'Press Start 2P', monospace; font-size:9px;
    color:var(--ink); letter-spacing:.04em;
    padding:0 2px 8px; border-bottom:1px solid var(--line);
  }
  .ssHead .ssScope{
    font-family:'JetBrains Mono',monospace; font-size:9px;
    color:var(--muted); letter-spacing:.06em; text-transform:none;
  }
  #sessionStrikesList{
    list-style:none; margin:0; padding:2px 0 0;
    font-family:'JetBrains Mono', monospace; font-size:12px;
  }
  #sessionStrikesList li{
    display:flex; align-items:center; gap:10px; padding:6px 2px;
  }
  #sessionStrikesList li + li{ border-top:1px solid rgba(32,38,58,.35); }
  #sessionStrikesList .who{ color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #sessionStrikesList .amt{ margin-left:auto; font-weight:700; }
  #sessionStrikesList .buy .amt{ color:var(--buy); }
  #sessionStrikesList .sell .amt{ color:var(--sell); }
  #sessionStrikesEmpty{ color:var(--muted); font-size:11px; padding:8px 2px; }
  #lbToggle[hidden]{ display:none; }
  #lbToggle{ display:flex; gap:6px; }
  .lbTab{
    font-family:'JetBrains Mono', monospace; font-weight:700;
    font-size:11px; letter-spacing:.06em;
    color:var(--muted); background:var(--surface, #10131f);
    border:1px solid var(--line); border-radius:4px;
    padding:7px 14px; cursor:pointer;
    transition:color .15s, border-color .15s, background .15s;
  }
  .lbTab:hover{ color:var(--ink); background:var(--surface-hi, #161a2c); }
  .lbTab.active{
    color:var(--ink); border-color:var(--rh-lime);
    box-shadow:inset 0 -2px 0 var(--rh-lime);
  }
  #lbColumns{
    display:grid; grid-template-columns:1fr 1fr; gap:16px;
  }
  .lbCol{
    /* no panel background or border: two bordered boxes holding five short
       rows each was mostly chrome. A single rule under the heading gives the
       same grouping for a fraction of the visual weight. */
    overflow:hidden;
  }
  .lbColHead{
    font-family:'Press Start 2P', monospace; font-size:9px;
    padding:0 2px 4px; border-bottom:1px solid var(--line);   /* was 8px */
    letter-spacing:.04em;
  }
  .lbBuyHead{ color:var(--buy); }
  .lbSellHead{ color:var(--sell); }
  .lbList{
    list-style:none; margin:0; padding:1px 0 0;   /* was 2px */
    font-family:'JetBrains Mono', monospace; font-size:12px;
  }
  .lbList li{
    display:flex; align-items:center; gap:10px;
    padding:6px 2px;
  }
  .lbList li + li{ border-top:1px solid rgba(32,38,58,.35); }
  .lbRank{
    font-family:'Press Start 2P', monospace; font-size:9px;
    color:var(--muted); width:16px;
  }
  .lbWallet{ color:var(--ink); flex:1; letter-spacing:.02em; }
  .lbAmount{ font-weight:700; }
  .lbCol.buy .lbAmount{ color:var(--buy); }
  .lbCol.sell .lbAmount{ color:var(--sell); }
  .lbEmpty{
    padding:16px 14px; color:var(--muted); font-size:12px;
    font-family:'JetBrains Mono', monospace; text-align:center;
  }
  #lbStatus{
    margin-top:7px; text-align:center;   /* was 14px */
    font-family:'JetBrains Mono', monospace; font-size:10px;
    color:var(--muted); letter-spacing:.04em; min-height:12px;
  }
  @media (max-width:640px){
    #lbColumns{ grid-template-columns:1fr; }
  }

  /* ---- worded sections: each tab's content is its own liquid glass box,
     separated from the starfield behind it. Only one .tabPanel is visible at
     a time, so this reads as "the content panel" rather than a stack of
     boxes — same tokens and blur as the header/leaderboard glass. ---- */
  #tabContent{
    max-width:1200px;
    margin:32px auto 60px;
    padding:0 24px;
    min-height:160px;
  }
  .tabPanel{display:none;}
  .tabPanel.active{
    display:block;
    padding:30px 28px;
    border-radius:14px;
    background:var(--panel-bg);
    border:1px solid var(--panel-border);
    backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,.07),
      inset 0 -1px 1px rgba(0,0,0,.35),
      0 10px 24px rgba(0,0,0,.35);
  }
  @media (prefers-reduced-transparency: reduce){
    .tabPanel.active{ background:var(--surface-solid, #0d1020); backdrop-filter:none; -webkit-backdrop-filter:none; }
  }
  .tabPanel h2{
    font-family:'Press Start 2P', monospace;
    font-size:13px;
    color:var(--rh-lime);
    margin:0 0 14px;
  }
  .tabPanel p{
    color:var(--muted);
    line-height:1.6;
    font-size:13px;
    max-width:640px;
  }

  /* active tab: a steady underline, not a hover flash — marks state without
     drawing attention away from the battlefield the way animated hover did */
  .navBtn.active{
    background:var(--surface-hi, #161a2c);
    box-shadow:inset 0 -2px 0 var(--rh-lime);
  }

  /* ---- slanted nav: full parallelogram buttons on the right, replacing the
     tabs that hung off the top edge. The button is skewed; its label is
     skewed back so the text stays upright. ---- */
  #navInner{ align-self:center; gap:10px; padding:12px 8px 12px 0; }
  .navBtn{
    border:1px solid var(--line); border-radius:3px;
    padding:8px 18px;
    transform:skewX(-16deg);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
    animation:tabSlide .5s cubic-bezier(.2,.8,.3,1.2) backwards;
  }
  .navBtn .label{ display:inline-block; transform:skewX(16deg); }
  .navBtn:hover{ transform:skewX(-16deg) translateY(-2px); border-color:rgba(var(--rh-lime-rgb),.6); }
  .navBtn:active{ transform:skewX(-16deg) translateY(1px); }
  .navBtn.active{ border-color:var(--rh-lime); }
  @keyframes tabSlide{
    from{ transform:skewX(-16deg) translateX(28px); opacity:0; }
    to{ transform:skewX(-16deg); opacity:1; }
  }
  @media (max-width:700px){
    #navInner{ padding:10px 6px 10px 10px; gap:8px; }
    .navBtn{ padding:7px 13px; }
  }

  /* ==================================================================
     CUSTOMIZER — settings drawer: sound, display, wallpaper, battlefield
     ================================================================== */
  #customizerToggle{
    position:fixed; left:16px; bottom:16px; z-index:41;
    height:40px; padding:0 16px 0 12px; border-radius:20px;
    display:flex; align-items:center; justify-content:center; gap:9px;
    font-size:16px; color:#fff;
    background:rgba(11,13,22,.8); border:1px solid var(--line);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    cursor:pointer;
  }
  #customizerToggle:hover{ border-color:var(--rh-lime); }
  #customizerToggle .setIcon{ color:#fff; transition:color .15s, transform .4s ease; display:inline-block; }
  #customizerToggle:hover .setIcon{ color:var(--rh-lime); transform:rotate(60deg); }
  /* the label uses the matrix rain's own look: mono caps in rain green with a
     faint phosphor glow, and it decodes from rain glyphs like the nav tabs */
  #customizerToggle .setLabel{
    font-family:'JetBrains Mono', monospace; font-weight:700; font-size:11px;
    letter-spacing:.14em; color:#fff;
    text-shadow:0 0 6px rgba(255,255,255,.45), 0 0 1px rgba(255,255,255,.9);
    min-width:8ch;   /* width stays put while the glyphs scramble */
  }
  #customizerPanel{
    position:fixed; left:16px; bottom:64px; z-index:41;
    width:280px; max-height:70vh; overflow-y:auto;
    border-radius:10px; padding:0;
  }
  #customizerPanel[hidden]{ display:none; }
  .custHead{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 14px; border-bottom:1px solid var(--line);
    position:sticky; top:0; z-index:3;                      /* stays put while the panel scrolls */
    background:var(--panel-bg-strong);
    backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  }
  .custTitle{
    font-family:'Press Start 2P', monospace; font-size:10px;
    color:#fff; letter-spacing:.05em;
  }
  #customizerClose{
    background:none; border:none; color:var(--muted); cursor:pointer; font-size:13px;
  }
  #customizerClose:hover{ color:var(--ink); }
  .custBody{ padding:6px 14px 14px; }
  .custSection{ padding:10px 0; border-bottom:1px solid rgba(32,38,58,.4); }
  .custSection:last-child{ border-bottom:none; }
  .custSection h4{
    font-family:'JetBrains Mono', monospace; font-size:9px;
    letter-spacing:.08em; color:var(--muted); text-transform:uppercase;
    margin:0 0 8px;
  }
  .custRow{
    display:flex; align-items:center; justify-content:space-between;
    gap:8px; font-size:11px; color:var(--ink);
    padding:5px 0;
  }
  .custRow input[type="checkbox"]{ accent-color:var(--rh-lime); }
  .custRow input[type="range"]{ width:120px; accent-color:var(--rh-lime); }
  .custHint{ color:var(--muted); font-size:9px; display:block; margin-top:2px; }
  .custPillRow{ display:flex; gap:4px; }
  .custPill{
    font-family:'JetBrains Mono', monospace; font-size:9px; font-weight:700;
    letter-spacing:.04em; color:var(--muted); background:var(--surface, #10131f);
    border:1px solid var(--line); border-radius:4px;
    padding:5px 9px; cursor:pointer;
  }
  .custPill:hover{ color:var(--ink); }
  .custPill.active{ color:#0b0d16; background:var(--rh-lime); border-color:var(--rh-lime); }
  .custZoomRow{ display:flex; align-items:center; gap:8px; }
  .custZoomRow button{
    width:22px; height:22px; border-radius:4px;
    background:var(--surface, #10131f); border:1px solid var(--line); color:var(--ink);
    cursor:pointer; font-size:12px; line-height:1;
  }
  .custZoomRow button:hover{ border-color:var(--rh-lime); }
  #zoomLabel{ font-size:10px; color:var(--muted); min-width:34px; text-align:center; }
  @media (max-width:500px){
    #customizerPanel{ width:calc(100vw - 32px); left:10px; bottom:60px; }
    #customizerToggle{ padding:0 12px 0 10px; }
    #customizerToggle{ left:10px; bottom:10px; }
  }

  /* larger-battlefield toggle: taller aspect ratio, applied as a class so it
     composes with the existing responsive aspect-ratio media query rather
     than fighting it */
  .frameWrap.large #battlefieldFrame{ aspect-ratio:1200/820; }
  @media (max-width:500px){ .frameWrap.large #battlefieldFrame{ aspect-ratio:4/6; } }

  /* zoom: scaling .frameWrap's contents rather than the iframe itself keeps
     the iframe's own internal layout (which reads its own box size) intact —
     it never finds out it's been visually scaled */
  .frameWrap{ overflow:hidden; }
  /* The blur bands that used to melt the frame's edges also blurred its top
     bar (price, feed, sound, clock) and ticker. A soft shadow does the
     blending now without touching anything readable. */
  .frameWrap{ box-shadow:0 0 0 1px rgba(255,255,255,.04), 0 18px 40px rgba(0,0,0,.45); }
  #battlefieldFrame{ transform-origin:center center; transition:transform .25s cubic-bezier(.2,.8,.2,1); }

  /* neon recolours: only the accent family changes. --buy / --sell are
     semantic (green = buying, red = selling) and stay fixed in every theme,
     so a theme can never make a sell look like a buy. */

  /* OVERCAST — the "light" option: a mid-tone blue-grey sky rather than white,
     so it reads noticeably brighter than the dark themes without glare next
     to the battlefield. Hardcoded dark surfaces are lifted to match. */

  /* TERMINAL — a green phosphor CRT: one colour, scanlines, everything square */

  /* WIN98 — the grey-plastic desktop: bevelled panels, blue title bars */

  .lbList li.lbUp{ animation:lbFlash 1.8s ease-out; }
  @keyframes lbFlash{ 0%{ background:rgba(var(--rh-lime-rgb),.28); } 100%{ background:transparent; } }
  .feedBadge.chaos{ color:#ff9f1c; border-color:rgba(255,159,28,.5); }
  .feedBadge.chaos[hidden]{ display:none; }

  /* ---- music pills wear their track's colour */
  #trackPills .custPill{ --tc:#8892b0; color:var(--tc); border-color:color-mix(in srgb, var(--tc) 45%, transparent); }
  #trackPills .custPill:hover{ color:var(--tc); border-color:var(--tc); }
  #trackPills .custPill.active{ background:var(--tc); color:#0b0d16; border-color:var(--tc); }
  #trackPills [data-track="lofi"]{ --tc:#ffb6d5; }
  #trackPills [data-track="lounge"]{ --tc:#7cc8ff; }
  #trackPills [data-track="neon"]{ --tc:#ccff00; }
  #trackPills [data-track="boss"]{ --tc:#ff4757; }
  #trackPills [data-track="dynamic"]{ --tc:#e9e2cd; }
  #gameTrackNote{ color:var(--rh-lime); }
  #gameTrackNote[hidden]{ display:none; }

  /* ---- theme swatches: each theme pill previews its background + accent */
  .sw{ display:inline-block; width:16px; height:10px; margin-right:6px; vertical-align:-1px;
       border-radius:2px; border:1px solid rgba(255,255,255,.28);
       background:linear-gradient(90deg, var(--swb) 50%, var(--swa) 50%); }

  /* ---- content boxes: sized to their content, centred, so the starfield
     shows around them instead of the boxes running edge to edge ---- */
  .tabPanel.active{ max-width:780px; margin:0 auto; }
  #leaderboard{ max-width:780px; }

  /* ---- game console: cartridge, slot, CRT power off/on, static ---- */
  #battlefieldSection{ position:relative; }
  .frameWrap{ background:#000; }
  #cartWell{ position:absolute; left:50%; bottom:100%; width:176px; margin-left:-88px; height:150px;
             overflow:hidden; pointer-events:none; z-index:30; }
  #cart{ position:absolute; left:13px; top:0; width:150px; height:110px; transform:translateY(-120px); }
  .cartGrip{ position:absolute; left:18px; right:18px; top:7px; height:12px;
             background:repeating-linear-gradient(90deg, #2e3346 0 4px, #5b6280 4px 8px); }
  .cartLabel{ position:absolute; left:12px; right:12px; top:28px; height:58px; background:var(--cc, #ccff00);
              border:3px solid #151824; display:flex; align-items:center; justify-content:center; text-align:center;
              font:9px/1.5 'Press Start 2P', monospace; color:#0b0d16; padding:4px; }
  #cart.drop{ animation:cartDrop .6s steps(10) forwards; }
  #cart.seated{ transform:translateY(130px); }          /* 20px of grip sticks out of the slot */
  #cart.eject{ animation:cartEject .45s steps(8) forwards; }
  @keyframes cartDrop{ from{ transform:translateY(0); } 85%{ transform:translateY(136px); } to{ transform:translateY(130px); } }
  @keyframes cartEject{ from{ transform:translateY(130px); } 20%{ transform:translateY(110px); } to{ transform:translateY(-120px); } }
  #cartSlot{ position:absolute; left:50%; top:0; width:176px; height:10px; margin-left:-88px; z-index:4;
             background:#05060a; border:3px solid #2a3044; border-top:none; opacity:0; transition:opacity .2s; }
  /* no room above the screen (the battlefield sits right under the header on
     desktop): the slot moves onto the top of the dark screen and the
     cartridge drops into it there, then both fade once the game is on */
  #battlefieldSection.cartInset #cartWell{ bottom:auto; top:0; }
  #battlefieldSection.cartInset #cartSlot{ top:150px; border-top:3px solid #2a3044; }
  #cartWell, #cartSlot{ transition:opacity .45s ease; }
  #battlefieldSection.cartInset.cartHide #cartWell,
  #battlefieldSection.cartInset.cartHide .frameWrap.console #cartSlot{ opacity:0; }
  .frameWrap.console #cartSlot{ opacity:1; }
  .frameWrap.jolt{ animation:jolt .2s steps(3); }
  @keyframes jolt{ 33%{ transform:translateY(4px); } 66%{ transform:translateY(-2px); } }
  #crtStatic{ position:absolute; inset:0; width:100%; height:100%; z-index:3; image-rendering:pixelated; display:none; }
  #crtStatic.show{ display:block; }
  #battlefieldFrame.crtOff{ animation:crtOff .45s ease-in forwards; }
  #battlefieldFrame.crtOn{ animation:crtOn .85s ease-out forwards; }
  @keyframes crtOff{
    0%{ transform:none; filter:none; }
    45%{ transform:scale(1, .006); filter:brightness(3); }
    80%{ transform:scale(.004, .006); filter:brightness(6); }
    100%{ transform:scale(0, 0); filter:brightness(0); }
  }
  @keyframes crtOn{
    0%{ transform:scale(0, .006); filter:brightness(5); }
    22%{ transform:scale(1, .006); filter:brightness(5); }
    50%{ transform:scale(1, 1); filter:brightness(2.2) contrast(1.3); }
    60%{ filter:brightness(.5); } 70%{ filter:brightness(1.4); } 80%{ filter:brightness(.8); } 90%{ filter:brightness(1.15); }
    100%{ transform:none; filter:none; }
  }
  /* a second of scanlines and flicker after power-on */
  .frameWrap.crtGlow::after{ content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
    background:repeating-linear-gradient(to bottom, rgba(0,0,0,.28) 0 2px, transparent 2px 4px);
    animation:crtFade 1.2s ease-out forwards; }
  @keyframes crtFade{ 0%{ opacity:1; } 30%{ opacity:.6; } 40%{ opacity:.9; } 100%{ opacity:0; } }
  /* back button: small glass pill in the lower-left corner, out of the play area */
  #consoleBack{ position:absolute; left:10px; bottom:10px; z-index:5; cursor:pointer;
    font:8px 'Press Start 2P', monospace; letter-spacing:.04em; color:#eef2fb;
    background:rgba(13,16,32,.42); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:8px 12px;
    backdrop-filter:blur(12px) saturate(150%); -webkit-backdrop-filter:blur(12px) saturate(150%);
    box-shadow:inset 0 1px 1px rgba(255,255,255,.14), inset 0 -1px 1px rgba(0,0,0,.3), 0 6px 16px rgba(0,0,0,.35);
    opacity:.8; transition:opacity .2s, color .2s, border-color .2s; }
  #consoleBack:hover, #consoleBack:focus-visible{ opacity:1; color:var(--rh-lime); border-color:var(--rh-lime); outline:none; }
  #consoleBack:active{ transform:scale(.96); }
  #consoleBack .long{ display:inline; }
  @media (max-width:560px){ #consoleBack .long{ display:none; } }
  #consoleBack[hidden]{ display:none; }
  #feedSwitchBtns.gameMode{ visibility:hidden; }
  /* full-screen console on phones: an in-page overlay (iPhone Safari doesn't
     allow real fullscreen for page elements), clear of notches and home bars */
  .frameWrap.fullscreen{ position:fixed; inset:0; z-index:95; width:100vw; height:100vh; height:100dvh;
    padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    box-sizing:border-box; border-radius:0; }
  /* iframes don't stretch between top/bottom like divs do, so size explicitly */
  .frameWrap.fullscreen #gameFrame{ top:env(safe-area-inset-top, 0px); left:env(safe-area-inset-left, 0px);
    width:calc(100% - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    height:calc(100% - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
  .frameWrap.fullscreen #consoleBack{ left:calc(env(safe-area-inset-left) + 8px); bottom:calc(env(safe-area-inset-bottom) + 8px); }
  .frameWrap.fullscreen #whaleToast{ top:env(safe-area-inset-top, 0px); }
  body.consoleFull{ overflow:hidden; overscroll-behavior:none; }
  #gameFrame{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:1; background:#0b0d16; }
  #gameFrame[hidden]{ display:none; }
  /* CRT tube: black shutters close to a bright line and a dot (power off),
     then open with a flash and flicker (power on). It is drawn OVER the
     frames rather than transforming them, so the page underneath is never
     left as a blurry snapshot. */
  #crtTube{ position:absolute; inset:0; z-index:3; pointer-events:none; }
  #crtTube .half{ position:absolute; left:0; right:0; height:0; background:#000; }
  #crtTube .half.top{ top:0; } #crtTube .half.bot{ bottom:0; }
  #crtTube .beam{ position:absolute; left:0; right:0; top:50%; height:3px; margin-top:-1px; opacity:0;
                  background:#fff; box-shadow:0 0 14px 5px rgba(255,255,255,.75); transform:scaleX(0); }
  #crtTube .flash{ position:absolute; inset:0; background:#fff; opacity:0; }
  #crtStatic{ z-index:4; }
  .flyCart{ position:fixed; z-index:80; width:150px; height:110px; pointer-events:none; }
  .flyCart, #cart, .shelfCart{ background:#4a5068; border:3px solid #151824; border-radius:4px 4px 0 0;
         box-shadow:inset -4px -4px 0 #2e3346, inset 4px 4px 0 #6a7190; }
  .cartLabel img{ display:block; width:26px; margin:0 auto 4px; image-rendering:auto; }
  /* the shelf */
  .shelf{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:22px; margin:14px 0 18px;
          padding:18px 16px 14px; border-bottom:6px solid #2a3044; background:linear-gradient(transparent 70%, rgba(255,255,255,.03)); }
  .shelfItem{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; }
  .shelfItem b{ font-family:'Press Start 2P',monospace; font-size:10px; color:#fff; margin-top:6px; }
  .shelfItem > span{ font-size:11px; color:var(--muted); line-height:1.5; }
  .shelfCart .cartLabel{ color:#0b0d16; }
  .shelfItem a{ font-size:10px; color:var(--muted); }
  .shelfCart{ position:relative; width:150px; height:110px; cursor:pointer; padding:0;
              transition:transform .15s steps(3); }
  .shelfCart:hover, .shelfCart:focus-visible{ transform:translateY(-8px) rotate(-2deg); outline:none; }
  .shelfCart:focus-visible{ box-shadow:inset -4px -4px 0 #2e3346, inset 4px 4px 0 #6a7190, 0 0 0 3px var(--rh-lime); }
  .shelfCart.gone{ visibility:hidden; }
  /* not ready yet (soon.json): a tape-label stamp across the cartridge corner */
  .cartStamp{ position:absolute; top:10px; right:-10px; z-index:2; pointer-events:none;
              font-family:var(--font-label); font-size:8px; letter-spacing:.1em; line-height:1;
              color:#0b0d16; background:#ffd23a; padding:4px 7px;
              border:2px solid #151824; transform:rotate(8deg); box-shadow:2px 2px 0 rgba(0,0,0,.45); }
  .shelfCart[data-soon="soon"] .cartStamp{ background:#7ad7ff; }
  .flyCart .cartStamp{ display:none; }
  /* whale toast while a game is running */
  /* whale/king toast while a game is running: a slim liquid-glass tab that
     drops down from the top edge, centred, one line, then slides back up */
  #whaleToast{ position:absolute; left:50%; top:0; z-index:5; cursor:pointer; max-width:min(440px, 92%);
    display:flex; align-items:center; gap:10px; white-space:nowrap; transform:translateX(-50%);
    font:8px/1.4 var(--font-label); color:#eef2fb; padding:7px 14px 8px;
    background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04) 70%), rgba(13,16,32,.4);
    border:1px solid rgba(255,255,255,.22); border-top:none; border-radius:0 0 14px 14px;
    backdrop-filter:blur(14px) saturate(170%); -webkit-backdrop-filter:blur(14px) saturate(170%);
    box-shadow:inset 0 -1px 1px rgba(255,255,255,.18), 0 8px 20px rgba(0,0,0,.4);
    animation:toastIn .35s cubic-bezier(.2,.9,.3,1.2); }
  #whaleToast.buy{ border-bottom:2px solid #3dff7a; }
  #whaleToast.sell{ border-bottom:2px solid #ff4757; }
  #whaleToast.king{ border-bottom:2px solid #e9e2cd; }
  #whaleToast .tAmt{ font-family:'Press Start 2P', monospace; font-size:9px; }
  #whaleToast .tHint{ font:9px 'JetBrains Mono', monospace; color:rgba(238,242,251,.65); letter-spacing:.04em; }
  #whaleToast.leaving{ animation:toastOut .3s ease-in forwards; }
  #whaleToast[hidden]{ display:none; }
  @keyframes toastIn{ from{ transform:translate(-50%, -110%); } to{ transform:translate(-50%, 0); } }
  @keyframes toastOut{ from{ transform:translate(-50%, 0); } to{ transform:translate(-50%, -110%); } }
  @media (max-width:560px){ #whaleToast{ font-size:8px; gap:7px; padding:6px 10px 7px; } #whaleToast .tAmt{ font-family:var(--font-label); font-size:8px; }
                            #whaleToast .tHint{ display:none; } }
  @media (prefers-reduced-transparency: reduce){
    #whaleToast, #consoleBack{ background:var(--surface-solid, #0d1020); backdrop-filter:none; -webkit-backdrop-filter:none; } }

  /* ---- memes gallery ---- */
  .memeGrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; margin:6px 0 22px; }
  .memeCard{ background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:6px; overflow:hidden;
             cursor:zoom-in; padding:0; text-align:left; color:var(--ink); font:inherit; position:relative; }
  .memeCard .gifTag{ position:absolute; top:6px; left:6px; padding:2px 5px; border-radius:3px; font-size:9px;
                     letter-spacing:.05em; background:rgba(0,0,0,.72); color:var(--rh-lime); pointer-events:none; }
  .memeCard:hover{ border-color:var(--rh-lime); }
  .memeCard img{ display:block; width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--surface, #10131f); }
  .memeCard span{ display:block; padding:6px 8px; font-size:10px; color:var(--muted);
                  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .memeTop{ margin-bottom:14px; }
  .memeTopList{ list-style:none; margin:8px 0 4px; padding:0; display:grid; gap:4px; }
  .memeTopList li{ display:flex; align-items:baseline; gap:12px; padding:6px 8px; border:1px solid var(--line);
                   border-radius:4px; background:rgba(255,255,255,.03); font-size:12px; }
  .memeTopRank{ font-family:var(--font-label); font-size:8px; color:var(--muted); min-width:3.2em; }
  .memeTopId{ background:none; border:0; padding:0; font:inherit; color:var(--rh-lime); cursor:zoom-in; }
  .memeTopId:hover, .memeTopId:focus-visible{ text-decoration:underline; }
  .memeTopCount{ margin-left:auto; color:var(--muted); font-size:11px; }
  .memeTopNote{ color:var(--muted); font-size:12px; margin:6px 0 0; }
  .memeEmpty{ color:var(--muted); font-size:12px; border:1px dashed var(--line); border-radius:6px; padding:18px; text-align:center; }
  #memeBox{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
            background:rgba(3,4,8,.86); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); padding:20px; }
  #memeBox[hidden]{ display:none; }
  #memeBox figure{ margin:0; max-width:min(900px, 94vw); text-align:center; }
  #memeBox img{ max-width:100%; max-height:74vh; border-radius:6px; image-rendering:auto; }
  #memeBox figcaption{ margin-top:10px; font-size:12px; color:var(--muted); line-height:1.7; }
  #memeBox figcaption b{ color:var(--ink); font-weight:normal; }
  #memeBox figcaption a{ color:var(--rh-lime); text-decoration:none; }
  #memeBox figcaption a:hover{ text-decoration:underline; }
  .memeActions{ margin-top:12px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
  /* SUBMIT OWNER (memes with no credit yet) */
  .ownerBtn{ margin-left:8px; padding:3px 7px; font:inherit; font-size:10px; letter-spacing:.06em; color:var(--rh-lime);
             background:transparent; border:1px solid var(--rh-lime); border-radius:3px; cursor:pointer; vertical-align:1px; }
  .ownerBtn:hover, .ownerBtn:focus-visible{ background:var(--rh-lime); color:#0b0d16; }
  .ownerForm{ margin:12px auto 0; max-width:420px; text-align:left; padding:14px; border:1px solid var(--line); border-radius:6px; background:rgba(10,12,20,.92); }
  .ownerForm[hidden]{ display:none; }
  .ownerHead{ margin:0 0 10px; font-family:'Press Start 2P', monospace; font-size:9px; letter-spacing:.06em; color:var(--muted); }
  .ownerHead b{ color:var(--rh-lime); font-weight:normal; }
  .ownerForm label{ display:grid; gap:5px; margin-bottom:10px; font-size:11px; color:var(--muted); }
  .ownerForm input, .ownerForm textarea{ width:100%; box-sizing:border-box; padding:8px 9px; border-radius:4px; border:1px solid var(--line);
             background:rgba(0,0,0,.4); color:var(--ink); font:12px/1.5 'JetBrains Mono', monospace; resize:vertical; }
  .ownerForm input:focus, .ownerForm textarea:focus{ outline:none; border-color:var(--rh-lime); }
  .ownerForm .hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
  .ownerBtns{ display:flex; gap:8px; flex-wrap:wrap; }
  .ownerBtns .donateBtn{ padding:8px 14px; font-size:11px; cursor:pointer; }
  .ownerBtns .donateBtn[disabled]{ opacity:.6; cursor:wait; }
  .ownerBtns .donateBtn[hidden]{ display:none; }
  /* with the form open: a smaller picture, and the viewer scrolls if it still doesn't fit */
  #memeBox{ overflow-y:auto; }
  #memeBox figure{ margin:auto; }
  #memeBox figure:has(.ownerForm:not([hidden])) img{ max-height:36vh; }
  #ownerStatus{ margin:10px 0 0; font-size:12px; color:var(--muted); min-height:1em; }
  #ownerStatus.ok{ color:var(--rh-lime); } #ownerStatus.err{ color:#ffb0b0; }
  #ownerStatus a{ color:var(--rh-lime); }

  /* ---- games ---- */
  .gameCard{ position:relative; display:block; border:1px solid var(--line); border-radius:8px; overflow:hidden; text-decoration:none; }
  .gameCard img{ display:block; width:100%; height:auto; transition:transform .3s ease, filter .3s ease; }
  .gameCard:hover img{ transform:scale(1.02); filter:brightness(1.1); }
  .gameCard:hover{ border-color:var(--rh-lime); }
  .gamePlay{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
             font-family:'Press Start 2P',monospace; font-size:11px; color:#0b0d16; background:var(--rh-lime);
             padding:9px 14px; border-radius:4px; white-space:nowrap; box-shadow:0 6px 18px rgba(0,0,0,.5); }

  /* ---- independent verification links ---- */
  .verifyLinks{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 4px; }
  .verifyLinks a{ font-size:10px; letter-spacing:.06em; text-decoration:none; color:var(--ink);
                  border:1px solid var(--line); border-radius:4px; padding:6px 10px; }
  .verifyLinks a:hover{ border-color:var(--rh-lime); color:var(--rh-lime); }

  /* ---- alert nudge: one line, offered once, after a real king ---- */
  #alertNudge{ max-width:900px; margin:8px auto 0; padding:8px 12px; display:flex; align-items:center; gap:10px;
               flex-wrap:wrap; font-size:11px; color:var(--ink); border:1px solid rgba(233,226,205,.4);
               border-radius:6px; background:rgba(233,226,205,.06); }
  #alertNudge[hidden]{ display:none; }
  #alertNudge button{ font:700 10px 'JetBrains Mono',monospace; letter-spacing:.06em; padding:5px 10px;
                      border-radius:4px; cursor:pointer; border:1px solid var(--line); background:none; color:var(--muted); }
  #alertNudge #nudgeYes{ color:#0b0d16; background:#e9e2cd; border-color:#e9e2cd; }

  /* ---- named generals ---- */
  /* v0.34.0: #generalsBar moved onto the WAR RECORDS scroll (.claimRoll) */
  .lbAddr{ color:var(--muted); font-size:10px; margin-left:4px; }
  #generalBox{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
               background:rgba(3,4,8,.8); padding:20px; }
  #generalBox[hidden]{ display:none; }
  .genCard{ width:min(460px, 94vw); padding:22px 24px; }
  .genCard h3{ font-family:'Press Start 2P',monospace; font-size:11px; margin:0 0 12px; color:#fff; }
  .genCard p{ font-size:12px; color:var(--muted); line-height:1.6; margin:0 0 14px; }
  .genRow{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12px; margin:0 0 10px; }
  .genRow input[type="text"], #genName{ flex:1; background:#0b0d16; color:var(--ink); border:1px solid var(--line);
               border-radius:4px; padding:7px 9px; font:12px 'JetBrains Mono',monospace; }
  .genRow input[type="color"]{ width:48px; height:30px; border:1px solid var(--line); background:none; border-radius:4px; }
  .genPreview{ font-size:12px; margin:4px 0 6px; }
  #genMsg{ font-size:11px; color:var(--muted); margin-top:10px; min-height:14px; line-height:1.5; }

  /* ---- season / records ---- */
  #records{ margin:0 0 16px; font-size:11px; }
  #records[hidden]{ display:none; }
  #records .recGrid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:8px; margin-top:8px; }
  #records .rec{ border:1px solid var(--line); border-radius:5px; padding:8px 10px; }
  #records .rec b{ display:block; font-size:9px; letter-spacing:.08em; color:var(--muted); margin-bottom:4px; }
  #records .crown{ color:#e9e2cd; }

  /* ---- manual accessibility overrides from the customizer ----
     Same selectors as the @media (prefers-reduced-transparency: reduce)
     blocks above, repeated here with a plain attribute selector so a manual
     toggle can win independent of the OS-level setting. This block is
     deliberately last in the stylesheet so it wins the cascade tie. */
  html[data-reduce-transparency="true"] .glass,
  html[data-reduce-transparency="true"] .refract > .refract-layer,
  html[data-reduce-transparency="true"] .statGrid > div,
  html[data-reduce-transparency="true"] .donateCard,
  html[data-reduce-transparency="true"] .tabPanel.active,
  html[data-reduce-transparency="true"] #customizerPanel {
    background:var(--panel) !important; backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important; filter:none !important;
    box-shadow:none !important;
  }
  html[data-reduce-transparency="true"] .frameBlend{ display:none !important; }
  html[data-reduce-motion="true"] #wash{ animation:none !important; }

  /* ================================================================
     ONE PILL SYSTEM. Link pills, filter tabs and copy buttons share one
     shape: a glass capsule, lime text or muted text, lime fill on hover.
     (The slanted nav tabs stay their own thing: they're navigation.)
     ================================================================ */
  :root{ --pill-bg:rgba(255,255,255,.045); --pill-border:rgba(255,255,255,.14); --pill-radius:3px; }
  /* Slanted like the nav tabs: the button is skewed, the label inside is
     skewed back so the text stays upright (see the pill-label pass in JS). */
  .creatorLinks a, .verifyLinks a, .lbTab, .champPlay, .donateBtn, .walletBtn, .feedBadge, #consoleBack{
    transform:skewX(-12deg);
  }
  .pillIn{ display:inline-flex; align-items:center; gap:7px; transform:skewX(12deg); }
  /* every pill gets a green matrix line sweeping through it on hover */
  .creatorLinks a, .verifyLinks a, .lbTab, .champPlay, .donateBtn, .walletBtn, .venue, .projCard{
    position:relative; overflow:hidden; }
  #consoleBack{ overflow:hidden; }        /* stays absolutely positioned in the frame */
  .creatorLinks a::before, .verifyLinks a::before, .lbTab::before, .champPlay::before,
  .donateBtn::before, .walletBtn::before, #consoleBack::before{
    content:''; position:absolute; top:0; bottom:0; width:38%; left:-45%; pointer-events:none; opacity:0;
    background:linear-gradient(90deg, transparent, rgba(var(--rh-lime-rgb),.35), transparent); }
  .creatorLinks a:hover::before, .verifyLinks a:hover::before, .lbTab:hover::before, .champPlay:hover::before,
  .donateBtn:hover::before, .walletBtn:hover::before, #consoleBack:hover::before{
    opacity:1; animation:pillSweep .75s ease-out; }
  @keyframes pillSweep{ from{ left:-45%; } to{ left:110%; } }
  /* inline prose links: a rain-coloured underline that fills in, plus a lift */
  .tabPanel p a, .creatorNote a, .discloseBody p a, .howTo a, .ecoCard a, #siteFooter p a{
    position:relative; display:inline-block; text-decoration:none;
    background-image:linear-gradient(90deg, var(--rh-lime), var(--buy));
    background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
    transition:background-size .25s ease, transform .15s ease, color .15s ease; }
  .tabPanel p a:hover, .creatorNote a:hover, .discloseBody p a:hover, .howTo a:hover, .ecoCard a:hover,
  #siteFooter p a:hover{ background-size:100% 1px; transform:translateY(-1px); background-color:transparent; }
  html[data-reduce-motion="true"] .creatorLinks a:hover::before, html[data-reduce-motion="true"] .verifyLinks a:hover::before,
  html[data-reduce-motion="true"] .lbTab:hover::before, html[data-reduce-motion="true"] .champPlay:hover::before, html[data-reduce-motion="true"] .donateBtn:hover::before,
  html[data-reduce-motion="true"] .walletBtn:hover::before, html[data-reduce-motion="true"] #consoleBack:hover::before{ animation:none; }
  .creatorLinks a:hover, .verifyLinks a:hover, .lbTab:hover, .champPlay:hover, .donateBtn:hover,
  .walletBtn:hover, #consoleBack:hover{
    transform:skewX(-12deg) translateY(-2px); }
  .creatorLinks a:active, .verifyLinks a:active, .lbTab:active, .champPlay:active, .donateBtn:active,
  .walletBtn:active, #consoleBack:active{
    transform:skewX(-12deg) translateY(1px); }
  .feedBadge{ border-radius:3px; }
  .feedBadge .pillIn{ gap:6px; }
  #consoleBack{ border-radius:3px; }
  .creatorLinks a, .verifyLinks a, .lbTab, .walletBtn, .champPlay, .donateBtn{
    border-radius:var(--pill-radius); background:var(--pill-bg); border:1px solid var(--pill-border);
    backdrop-filter:blur(10px) saturate(140%); -webkit-backdrop-filter:blur(10px) saturate(140%);
    box-shadow:inset 0 1px 1px rgba(255,255,255,.08);
    font-family:'JetBrains Mono', monospace; font-weight:700; letter-spacing:.06em; text-decoration:none;
    transition:background .15s, color .15s, border-color .15s, transform .12s;
  }
  .creatorLinks a, .verifyLinks a{ font-size:10.5px; padding:7px 14px; color:var(--rh-lime); }
  .creatorLinks.small a{ font-size:10px; padding:6px 12px; }
  .verifyLinks a{ color:var(--ink); }
  .lbTab{ font-size:10.5px; padding:7px 14px; color:var(--muted); }
  .creatorLinks a:hover, .verifyLinks a:hover, .lbTab:hover, .champPlay:hover,
  .creatorLinks a:focus-visible, .verifyLinks a:focus-visible, .lbTab:focus-visible{
    background:var(--rh-lime); border-color:var(--rh-lime); color:#0b0d16; outline:none; }
  
  .lbTab.active{ color:var(--ink); border-color:var(--rh-lime); background:rgba(var(--rh-lime-rgb),.12); box-shadow:none; }
  .lbTab.active:hover{ color:#0b0d16; background:var(--rh-lime); }
  .walletBtn{ border-color:rgba(var(--rh-lime-rgb),.65); color:var(--rh-lime); padding:10px 18px; }
  .walletBtn:hover{ background:var(--rh-lime); color:#0b0d16; border-color:var(--rh-lime); }
  .walletBtn.muted{ border-color:var(--pill-border); color:var(--muted); }
  .walletBtn .chainTag{ border-radius:999px; padding:4px 8px; }
  .walletBtn{ border-radius:3px; }
  /* Ko-fi donate button joins the same system */
  .donateBtn{ font-size:11px; padding:9px 18px; color:var(--rh-lime); }
  .donateBtn:hover, .donateBtn:focus-visible{ background:var(--rh-lime); border-color:var(--rh-lime); color:#0b0d16; outline:none; }
  
  html[data-reduce-transparency="true"] .creatorLinks a, html[data-reduce-transparency="true"] .verifyLinks a,
  html[data-reduce-transparency="true"] .lbTab, html[data-reduce-transparency="true"] .walletBtn{
    backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--surface, #10131f); }
  @media (prefers-reduced-transparency: reduce){
    .creatorLinks a, .verifyLinks a, .lbTab, .walletBtn{ backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--surface, #10131f); } }

  /* ---- site footer ---- */
  #siteFooter{ max-width:980px; margin:28px auto 0; padding:22px 18px 110px; border-top:1px solid var(--line);
    display:grid; grid-template-columns:1fr auto; gap:10px 24px; font-size:11px; line-height:1.6; color:var(--muted); }
  #siteFooter p{ margin:0; max-width:620px; }
  #siteFooter b{ color:var(--ink); font-weight:500; }
  #siteFooter .fRight{ text-align:right; display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
  #siteFooter a{ color:var(--rh-lime); }
  #relayDot{ display:inline-flex; align-items:center; gap:7px; text-decoration:none; font:8px 'Press Start 2P', monospace;
    letter-spacing:.04em; padding:6px 10px; border-radius:999px; border:1px solid var(--pill-border); background:var(--pill-bg); }
  #relayDot i{ width:7px; height:7px; border-radius:50%; background:#8892b0; }
  #relayDot.up i{ background:#3dff7a; box-shadow:0 0 8px #3dff7a; }
  #relayDot.down i{ background:#ff4757; }
  #siteFooter .build{ font-size:10px; color:var(--ink); opacity:.8; }
  #siteFooter .readMore{ font-family:var(--font-label); font-size:8px; margin-left:6px; vertical-align:1px; }
  #siteFooter .copyline{ margin-top:12px; font-size:10px; color:var(--muted); opacity:.75; }
  #siteFooter .build a{ color:var(--rh-lime); text-decoration:none; }
  #siteFooter .build a:hover, #siteFooter .build a:focus-visible{ color:var(--buy); outline:none; }
  @media (max-width:640px){ #siteFooter{ grid-template-columns:1fr; } #siteFooter .fRight{ align-items:flex-start; text-align:left; } }

  /* ==================================================================
     v0.9.0 — LAYOUT AND SECTIONS
     ================================================================== */
  :root{ --content-w:1080px; }
  /* one width for everything under the battlefield, so the edges line up:
     the panels, and the WAR RECORDS bar (its 24px side padding added back) */
  .tabPanel.active{ max-width:var(--content-w); }
  #leaderboard{ max-width:calc(var(--content-w) + 48px); }

  /* headings are white; lime is kept for things you can click */
  .tabPanel h2{ color:var(--ink); }
  .tabPanel h2.sub{ font-size:11px; margin:26px 0 12px; }
  .tabPanel h2.sub:first-child, .tabPanel .bubble > h2:first-child{ margin-top:0; }
  .statGrid dd{ color:var(--ink); }
  .tabPanel p.small{ font-size:11px; }

  /* ---- bubbled panels (TOKEN, CREATOR): each section is its own glass bubble on
     a two-column grid; .half bubbles pair up side by side, the rest run full width */
  #tabContent .tabPanel.bubbled.active{
    background:none; border:none; box-shadow:none; padding:0;
    backdrop-filter:none; -webkit-backdrop-filter:none;
    display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
  .tabPanel.bubbled .bubble{
    grid-column:1 / -1; margin:0; min-width:0;
    background:var(--panel-bg); border:1px solid var(--panel-border); border-radius:14px;
    padding:18px 20px;
    backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
    box-shadow:inset 0 1px 1px rgba(255,255,255,.06), 0 10px 26px rgba(0,0,0,.32);
    transition:border-color .2s ease; }
  .tabPanel.bubbled .bubble:hover{ border-color:rgba(var(--rh-lime-rgb),.34); }
  .tabPanel.bubbled .bubble.half{ grid-column:auto; align-self:stretch; }
  #tabContent .tabPanel.bubbled .bubble{ margin:0; }   /* the grid gap spaces them (the old token rule added 14px more) */
  .tabPanel.bubbled .memeTerms.bubble{ margin-top:0; padding-top:16px; border-top:1px solid var(--panel-border); }
  .tabPanel.bubbled .bubble p{ max-width:none; }
  .tabPanel.bubbled .bubble > :last-child{ margin-bottom:0; }
  @media (max-width:760px){ #tabContent .tabPanel.bubbled.active{ grid-template-columns:1fr; } }
  @media (max-width:560px){ .tabPanel.bubbled .bubble{ padding:14px; border-radius:12px; } }
  @media (prefers-reduced-transparency: reduce){ .tabPanel.bubbled .bubble{ background:var(--surface-solid, #0d1020); backdrop-filter:none; -webkit-backdrop-filter:none; } }
  html[data-reduce-transparency="true"] .tabPanel.bubbled .bubble{ background:var(--surface-solid, #0d1020); backdrop-filter:none; -webkit-backdrop-filter:none; }

  /* ---- TOKEN: price first, the contract under it in the same rounded shape ---- */
  .tokenHero #priceStrip{ max-width:none; margin:0 0 10px; border-radius:8px; }
  .walletBtn.flat, .walletBtn.flat:hover, .walletBtn.flat:active{ transform:none; }
  .walletBtn.flat:hover{ transform:translateY(-1px); }
  .walletBtn.flat .pillIn{ transform:none; }
  .walletBtn.flat{ display:flex; width:100%; justify-content:flex-start; border-radius:8px; padding:12px 16px; }
  .walletBtn.flat .pillIn{ width:100%; gap:10px; }
  .tokenHero .verifyLinks{ margin:12px 0 0; }
  .addrShort{ display:none; }
  @media (max-width:560px){ .addrFull{ display:none; } .addrShort{ display:inline; } }

  /* ---- feed controls, attached to the bottom of the battlefield ---- */
  #feedSwitch{
    max-width:none; margin:0; padding:7px 16px;
    justify-content:space-between; gap:10px;
    background:#05060a; border-top:1px solid var(--line); }
  .feedState{ display:flex; align-items:center; gap:8px; }
  /* the status is a readout, not a button: no box, just the dot and the words */
  #feedSwitch .feedBadge{ transform:none; background:none; border-color:transparent; padding-left:0; box-shadow:none;
    backdrop-filter:none; -webkit-backdrop-filter:none; }
  #feedSwitch .feedBadge .pillIn{ transform:none; }
  #feedSwitch .feedBadge.chaos{ border-color:rgba(255,159,28,.5); padding-left:8px; }
  #feedSwitchBtns{ align-items:center; }
  .feedSep{ width:1px; height:18px; background:var(--line); margin:0 4px; }
  @media (max-width:500px){ #feedSwitch{ padding:7px 10px; } #feedSwitch .lbTab{ padding:5px 9px; font-size:9.5px; } }

  /* ---- grids: fill the wider column ---- */
  .shelf{ grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); }
  .projGrid{ grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
  .champGrid{ grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); }

  /* ---- NFT: stats full width, spaced from what follows; empty frames when
     the cats can't load ---- */
  #panel-nft .statGrid{ max-width:none; margin:18px 0 24px; }
  #panel-nft .nftHead{ max-width:none; }
  #panel-nft .nftGrid{ max-width:none; grid-template-columns:repeat(8, 1fr); }
  @media (max-width:900px){ #panel-nft .nftGrid{ grid-template-columns:repeat(4, 1fr); } }
  @media (max-width:560px){ #panel-nft .nftGrid{ grid-template-columns:repeat(2, 1fr); } }
  #panel-nft .infoFold{ margin-top:24px; }
  .nftGrid.offline .ph{ position:relative; background:repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 6px, transparent 6px 12px); }
  .nftGrid.offline .ph::after{ content:'?'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font:14px 'Press Start 2P', monospace; color:var(--line); }

  /* ---- MEMES: count + filters, LOAD MORE ---- */
  .memeBar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 16px; margin:22px 0 10px; }
  .memeBar h2.sub{ margin:0; }
  .memeFilters{ display:flex; flex-wrap:wrap; gap:6px; }
  .memeFilters[hidden]{ display:none; }
  .memeFilters .lbTab{ font-size:10px; padding:5px 11px; }
  .memeMore{ display:flex; justify-content:center; margin:-8px 0 22px; }
  /* two across on phones (one 150px column was all that fit, ~300px per meme) */
  @media (max-width:560px){ .memeGrid{ grid-template-columns:repeat(2, 1fr); gap:8px; } }
  .memeMore .lbTab[hidden]{ display:none; }

  /* ---- COMMUNITY: every channel in one place ---- */
  .connGrid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px; margin:4px 0 6px; }
  .connGroup{ display:flex; flex-direction:column; gap:8px; padding:12px;
    border:1px solid var(--panel-border); border-radius:10px; background:rgba(255,255,255,.02); }
  .connHead{ font:8px var(--font-label); letter-spacing:.14em; color:var(--muted); margin:0 0 2px 2px; }
  .connLink{ display:flex; align-items:center; gap:10px; padding:8px 10px; min-width:0;
    border:1px solid var(--line); border-radius:8px; background:var(--surface-solid, #0d1020); color:var(--ink); text-decoration:none;
    transition:border-color .15s, transform .12s, background .15s; }
  .connLink:hover, .connLink:focus-visible{ border-color:var(--rh-lime); background:#121628; transform:translateY(-1px); outline:none; }
  .connMk{ flex:none; width:30px; height:30px; border-radius:6px; display:flex; align-items:center; justify-content:center;
    font:8px 'Press Start 2P', monospace; color:#0b0d16; }
  .connMk.tg{ background:#2aabee; } .connMk.x{ background:#e7e9ea; } .connMk.dc{ background:#5865f2; color:#fff; }
  .connText{ display:flex; flex-direction:column; gap:2px; min-width:0; }
  .connText b{ font:700 11px 'JetBrains Mono', monospace; letter-spacing:.06em; color:var(--rh-lime); }
  .connText span{ font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* ---- CREATOR: about and support side by side, build log below ---- */
  .bubble.donateCard{ max-width:none; margin:0; }
  .bubble.donateCard h2{ font-size:13px; margin:0 0 14px; }
  .bubble.donateCard .donateActions{ flex-direction:column; align-items:stretch; }
  .bubble.donateCard .donateActions .donateBtn{ align-self:flex-start; }
  .bubble.donateCard .creatorLinks{ margin:0; }
  .creatorAbout .creatorNote{ margin-top:18px; }

  /* ---- header: the hint under (i) is readable now ---- */
  #creatorHint{ font-family:var(--font-label); letter-spacing:.1em; opacity:.55; }
  @media (max-width:700px){ #creatorHint{ opacity:.7; } }

  /* the (i) breathes softly and sends out a ping every ~9s until it's been
     opened once (site.js adds .beckon); Motion REDUCE keeps it still */
  #creatorBtn .ico{ position:relative; }
  #creatorBtn.beckon .ico{ animation:infoBreathe 3.2s ease-in-out infinite; }
  #creatorBtn.beckon .ico::after{ content:''; position:absolute; inset:-1px; border-radius:50%;
    border:1px solid var(--rh-lime); opacity:0; pointer-events:none; animation:infoPing 9s ease-out infinite 1.5s; }
  @keyframes infoBreathe{
    0%,100%{ border-color:var(--line); box-shadow:0 0 0 0 rgba(var(--rh-lime-rgb),0); }
    50%{ border-color:rgba(var(--rh-lime-rgb),.65); box-shadow:0 0 10px 1px rgba(var(--rh-lime-rgb),.32); } }
  @keyframes infoPing{ 0%,80%{ transform:scale(1); opacity:0; } 82%{ opacity:.85; } 100%{ transform:scale(2.2); opacity:0; } }
  html[data-reduce-motion="true"] #creatorBtn.beckon .ico,
  html[data-reduce-motion="true"] #creatorBtn.beckon .ico::after{ animation:none; }

  /* ---- phone tab row: edge fades + an arrow that says "more" ---- */
  #navInner.fadeR{ -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 44px), transparent);
                           mask-image:linear-gradient(to right, #000 calc(100% - 44px), transparent); }
  #navInner.fadeL{ -webkit-mask-image:linear-gradient(to right, transparent, #000 44px);
                           mask-image:linear-gradient(to right, transparent, #000 44px); }
  #navInner.fadeL.fadeR{ -webkit-mask-image:linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent);
                                 mask-image:linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
  .navHint{ position:absolute; right:6px; z-index:3; transform:translateY(-50%);
    width:24px; height:24px; padding:0; border-radius:3px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-size:9px; color:var(--rh-lime); background:var(--surface, #10131f); border:1px solid var(--line); }
  .navHint[hidden]{ display:none; }
  .navHint.back{ right:auto; left:6px; }
  .navHint span{ display:inline-block; animation:hintNudge 1.4s ease-in-out infinite; }
  .navHint.back span{ animation-name:hintNudgeBack; }
  @keyframes hintNudge{ 0%,100%{ transform:translateX(-2px); } 50%{ transform:translateX(2px); } }
  @keyframes hintNudgeBack{ 0%,100%{ transform:scaleX(-1) translateX(-2px); } 50%{ transform:scaleX(-1) translateX(2px); } }
  html[data-reduce-motion="true"] .navHint span{ animation:none; }
  html[data-reduce-motion="true"] .navHint.back span{ transform:scaleX(-1); }

  /* ---- SETTINGS: a square button like the scroll arrow, for now (the
     customizer gets its own pass later) ---- */
  #customizerToggle{ width:38px; height:38px; padding:0; border-radius:3px; gap:0;
    left:22px; bottom:22px; background:var(--surface, #10131f); }
  #customizerToggle .setLabel{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; min-width:0; }
  #customizerPanel{ left:22px; }
  /* same corner distance as the arrow (22px) on every screen, so they read as a pair */
  @media (max-width:500px){ #customizerToggle{ left:22px; bottom:22px; padding:0; } #customizerPanel{ left:10px; } }

  /* ==================================================================
     v0.10.0 — HOME, sticky tabs, settings in scvrlet's layout, WIN98
     ================================================================== */

  /* ---- sticky header: the tab row stays at the top while you scroll. On phones
     site.js sets top to minus the title row, so only the tabs stay. ---- */
  header.refract{ position:sticky; top:0; z-index:60; overflow:visible; }
  html.navStuck header.refract{ background:rgba(var(--bg-rgb, 7,8,16),.9); backdrop-filter:blur(12px) saturate(140%); -webkit-backdrop-filter:blur(12px) saturate(140%);
    box-shadow:0 8px 20px rgba(0,0,0,.35); }
  html[data-reduce-transparency="true"].navStuck header.refract{ background:#070810; backdrop-filter:none; -webkit-backdrop-filter:none; }

  /* ---- larger tabs ---- */
  #navInner .navBtn{ font-size:12.5px; padding:11px 20px 10px; }
  @media (max-width:700px){ #navInner .navBtn{ font-size:11.5px; padding:10px 15px 9px; } }

  /* ---- settings cog in the header (where the (i) was) ---- */
  #customizerToggle{ position:relative; left:auto; bottom:auto; z-index:auto; align-self:center; flex:none;
    width:30px; height:30px; padding:0; margin:0 4px 0 0; border-radius:3px; gap:0;
    display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
    color:var(--ink); background:var(--surface, #10131f); border:1px solid var(--line);
    backdrop-filter:none; -webkit-backdrop-filter:none;
    transition:opacity .3s ease, transform .35s cubic-bezier(.3,1.4,.5,1), border-color .15s, color .15s; }
  @media (max-width:500px){ #customizerToggle{ left:auto; bottom:auto; } }
  #customizerToggle svg, .navCog svg{ width:16px; height:16px; display:block; transition:transform .45s ease; }
  #customizerToggle:hover, #customizerToggle:focus-visible, #customizerToggle[aria-expanded="true"]{ border-color:var(--rh-lime); color:var(--rh-lime); outline:none; }
  #customizerToggle:hover svg, .navCog:hover svg{ transform:rotate(60deg); }
  /* desktop: when the tab row is pinned, the header cog tucks away as the tab-row cog arrives */
  html.navStuck #customizerToggle{ opacity:0; transform:scale(.5) rotate(90deg); pointer-events:none; }

  /* ---- the tab-row cog: folded to nothing until the row sticks, then it slides in
     from the left, spinning into place ---- */
  .navCog{ flex:none; align-self:stretch; display:inline-flex; align-items:center; justify-content:center;
    width:0; padding:0; margin-right:-6px; opacity:0; overflow:hidden; cursor:pointer; pointer-events:none;
    color:var(--rh-lime); background:var(--surface, #10131f); border:1px solid var(--line); border-top:none; border-radius:0 0 5px 5px;
    transform:translateX(-14px) rotate(-120deg) scale(.6);
    transition:width .35s cubic-bezier(.3,1.2,.5,1), margin .35s ease, opacity .25s ease, transform .5s cubic-bezier(.3,1.5,.5,1), border-color .15s; }
  html.navStuck .navCog{ width:40px; margin-right:0; opacity:1; pointer-events:auto; transform:none; }
  .navCog:hover, .navCog:focus-visible, .navCog[aria-expanded="true"]{ border-color:var(--rh-lime); outline:none; }
  html[data-reduce-motion="true"] .navCog, html[data-reduce-motion="true"] #customizerToggle{ transition:none; }

  /* ---- HOME: WAR RECORDS sits in its bubble without a second frame ---- */
  .homeRecords #leaderboard{ max-width:none; margin:0; padding:0; border-top:none; }
  .homeRecords #lbHead{ background:none; border:none; box-shadow:none; padding:0 0 6px; }
  .homeRecords #lbHead > .refract-layer{ display:none; }

  /* ---- theme cards (scvrlet's): filled with each theme's colours, matrix code
     running behind a name that decodes ---- */
  .themeCards{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; margin-top:12px; }
  @media (max-width:700px){ .themeCards{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
  .themeCard{ position:relative; height:58px; padding:0; border-radius:8px; overflow:hidden; cursor:pointer; isolation:isolate;
    background:linear-gradient(135deg, var(--ta) 0%, color-mix(in srgb, var(--ta) 55%, var(--tb)) 48%, var(--tb) 100%);
    border:2px solid color-mix(in srgb, var(--ta) 70%, #000); box-shadow:0 3px 8px rgba(0,0,0,.35);
    transition:transform .18s cubic-bezier(.3,1.6,.5,1), box-shadow .18s; }
  .themeCard::after{ content:''; position:absolute; right:-8px; top:-8px; width:30px; height:30px; border-radius:50%;
    background:var(--tc); opacity:.85; box-shadow:0 0 12px var(--tc); z-index:-1; }
  .tcCode{ position:absolute; inset:-40% 0 0; z-index:-1; font:9px/1.1 'JetBrains Mono', monospace; color:var(--tb); opacity:.28;
    white-space:pre; overflow:hidden; word-break:break-all; animation:tcRain 3.2s linear infinite; }
  @keyframes tcRain{ from{ transform:translateY(-20%); } to{ transform:translateY(20%); } }
  .tcName{ position:absolute; left:10px; bottom:8px; font:8px var(--font-label); letter-spacing:.1em; color:#fff;
    text-shadow:0 1px 0 var(--tb), 0 0 6px var(--tb), 1px 1px 0 var(--tb), -1px -1px 0 var(--tb); }
  .themeCard:hover, .themeCard:focus-visible{ transform:translateY(-2px); outline:none; box-shadow:0 6px 14px rgba(0,0,0,.45), 0 0 0 2px var(--ta); }
  .themeCard.active{ box-shadow:0 0 0 2px var(--ink), 0 0 16px color-mix(in srgb, var(--ta) 70%, transparent); }
  .themeCard.active .tcName::after{ content:' \2713'; }
  html[data-reduce-motion="true"] .tcCode{ animation:none; }

  /* ---- Settings panel in scvrlet's layout: cards with icon headers, music first ---- */
  #customizerPanel{ position:fixed; z-index:70; width:340px; bottom:auto; }
  @media (max-width:500px){ #customizerPanel{ width:calc(100vw - 20px); } }
  #customizerPanel .custBody{ padding:10px 12px 14px; }
  #customizerPanel .custSection{ margin:0 0 10px; padding:12px; border:1px solid var(--line); border-radius:10px;
    background:linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); }
  #customizerPanel .custSection:last-child{ border:1px dashed var(--line); background:none; margin-bottom:0; }
  #customizerPanel .custSection h4{ display:flex; align-items:center; gap:8px; margin:0 0 10px;
    font:8px var(--font-label); letter-spacing:.12em; text-transform:uppercase; color:var(--rh-lime); }
  .shIco{ display:inline-grid; place-items:center; width:18px; height:18px; border-radius:5px; flex:none;
    font:11px/1 system-ui, sans-serif; font-weight:700; color:#0b0d16; background:var(--rh-lime); }
  .setMusicCard{ background:radial-gradient(120% 90% at 0% 0%, rgba(var(--rh-lime-rgb), .16), transparent 60%), linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01)) !important; }
  .spNow{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
  .spDisc{ --vc:var(--rh-lime); flex:none; width:30px; height:30px; border-radius:50%; box-shadow:0 4px 10px rgba(0,0,0,.45);
    background:radial-gradient(circle, #0b0b0d 0 6%, var(--vc) 7% 30%, #0b0b0d 31% 100%), repeating-radial-gradient(circle, #0b0b0d 0 2px, #1b1b20 2px 3px); }
  .spDisc.on{ animation:spSpin 2.2s linear infinite; }
  @keyframes spSpin{ to{ transform:rotate(360deg); } }
  html[data-reduce-motion="true"] .spDisc.on{ animation:none; }
  .spTrack{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:4px 8px;
    border:1px solid var(--line); border-radius:6px; background:rgba(0,0,0,.2); color:var(--ink); cursor:pointer; text-align:left; }
  .spTrack b{ font:8px var(--font-label); letter-spacing:.06em; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .spTrack small{ font:10px 'JetBrains Mono', monospace; color:var(--muted); }
  .spTrack:hover, .spTrack:focus-visible{ border-color:var(--rh-lime); outline:none; }
  .spTrack:hover b{ color:var(--rh-lime); }
  .setPlayer{ display:flex; align-items:center; gap:4px; flex:none; }
  .spBtn{ position:relative; flex:none; width:24px; height:24px; padding:0; border-radius:50%; border:1px solid var(--line);
    background:rgba(0,0,0,.25); color:var(--ink); cursor:pointer; }
  .spBtn:hover, .spBtn:focus-visible{ border-color:var(--rh-lime); color:var(--rh-lime); outline:none; }
  .spBtn.spMain{ width:28px; height:28px; background:var(--rh-lime); border-color:var(--rh-lime); color:#0b0d16; }
  .spBtn.spMain:hover{ color:#0b0d16; filter:brightness(1.1); }
  .spBtn i{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%) scale(.8); display:block; }
  .gPlay{ width:0; height:0; border-style:solid; border-width:6px 0 6px 10px; border-color:transparent transparent transparent currentColor; margin-left:2px; }
  .spMain.on .gPlay{ width:10px; height:12px; border:0; margin:0; background:linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%); }
  .gPrev, .gNext{ width:12px; height:10px; }
  .gPrev::before, .gNext::before{ content:''; position:absolute; top:0; width:2px; height:10px; background:currentColor; }
  .gPrev::after, .gNext::after{ content:''; position:absolute; top:0; width:0; height:0; border-style:solid; }
  .gPrev::before{ left:0; } .gPrev::after{ left:2px; border-width:5px 8px 5px 0; border-color:transparent currentColor transparent transparent; }
  .gNext::before{ right:0; } .gNext::after{ right:2px; border-width:5px 0 5px 8px; border-color:transparent transparent transparent currentColor; }
  .setMusicCard .spVol{ margin:0 0 8px; gap:8px; }
  .setMusicCard .spVol input[type="range"]{ flex:1; width:auto; }
  .setMusicCard #trackPills{ flex-wrap:wrap; }

  /* ---- CREATOR: Ko-fi and the OpenSea wallet on one row ---- */
  .donateRow{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
  .donateRow .creatorLinks{ margin:0; }

  /* ---- GAMES / COMMUNITY bubbles ---- */
  #panel-games .infoFold .discloseBody{ padding-top:10px; }
  .commHead h2{ margin-bottom:6px; }
  .commHead .dyorNote{ margin:0 !important; }

  /* ---- WIN98 (scvrlet's v0.12 rebuild, carried over): grey windows with black text
     and blue links, bevelled controls that sink when pressed, no glass, glow or code
     texture, Settings as "Display Properties", classic checkboxes, sliders and
     scrollbars, dotted focus, a white footer on the teal desktop, and the startup
     chime when you pick it (site.js). ---- */

  /* Settings → "Display Properties" with a navy title bar and sunken cards */

  /* classic controls */

  /* the "scvrlet.net projects" line under the (i) is gone, so the title row loses its extra room */
  #titleRow{ padding:16px 0; }
  @media (max-width:700px){ #titleRow{ padding:14px 0 10px; } }
  /* phones: the cog is a snap point too, so the tab row doesn't snap it out of view */
  .navCog{ scroll-snap-align:start; }

  /* ==================================================================
     v0.10.1
     ================================================================== */
  /* HOME: no bubbles; the sections sit straight on the page */
  #panel-home .bubble, #panel-home .bubble:hover{ background:none; border:none; box-shadow:none;
    backdrop-filter:none; -webkit-backdrop-filter:none; padding:0; border-radius:0; }
  #panel-home.bubbled.active{ gap:34px; }
  /* HOME: room before the footer */
  html[data-tab="home"] #tabContent{ margin-bottom:180px; }

  /* theme cards inside Settings (every tab but HOME): scvrlet's 2-across, 42px */
  #customizerPanel .themeCards{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px; margin:0; }
  #customizerPanel .themeCard{ height:42px; border-radius:6px; }
  #customizerPanel .themeCard::after{ width:26px; height:26px; }
  #customizerPanel .tcName{ left:9px; bottom:7px; }

  /* header: cog, CASHCAT, the tagline and the price pill share one centre line */
  #titleRow{ align-items:center; gap:12px; }
  #titleRow h1{ line-height:1; }
  #titleRow .tag{ line-height:1; }
  #customizerToggle{ align-self:center; margin:0; }
  #pricePill{ height:30px; margin-left:0; align-self:center; }
  #pricePill .pillIn{ height:100%; align-items:center; }
  /* phones: cog, CASHCAT and the price on one row; the tagline below (all four don't fit 390px) */
  @media (max-width:700px){
    #titleRow{ flex-wrap:wrap; row-gap:8px; }
    #titleRow .tag{ order:5; flex-basis:100%; font-size:10px; }
    #pricePill{ margin-left:auto; }
  }

  /* the tab-row cog: just the cog, no box */
  .navCog, .navCog:hover, .navCog:focus-visible, .navCog[aria-expanded="true"]{ background:none; border:none; box-shadow:none; border-radius:0; }
  .navCog{ color:var(--ink); }
  .navCog:hover, .navCog:focus-visible, .navCog[aria-expanded="true"]{ color:var(--rh-lime); }
  .navCog svg{ width:20px; height:20px; }
  html.navStuck .navCog{ width:30px; }
  
  @media (max-width:700px){
    #titleRow{ column-gap:8px; }
    #pricePill{ padding:0 8px; }
    #pricePill .pillIn{ gap:5px; }
  }
  @media (max-width:360px){ #pricePill .pTick{ display:none; } }
  #tabContent #panel-home.bubbled.active{ gap:44px; }

  /* ==================================================================
     v0.11.0 — WIN98, part 2: fixes, windows, taskbar, Start menu,
     dialogs, boot screen, cursors, tooltips. All scoped to WIN98;
     the elements site.js adds (.w98bar, #w98Start…) are hidden elsewhere.
     ================================================================== */
  .w98bar, .w98only{ display:none !important; }

  /* ---- 1. fixes: square corners everywhere, no dark-theme leftovers ---- */

  /* the header price: a flat sunken box in black, like the taskbar's clock tray */

  /* readable labels */

  /* no dark leftovers */

  /* HOME sits on the desktop: white text, like desktop icon labels */

  /* ---- 2a. windows: a navy title bar with _ □ × on every section ---- */

  /* minimised: just the title bar */

  /* maximised: a half-width window spans the row */
  
  /* the battlefield is a window too */

  /* ---- 2b. the taskbar: in WIN98 the tab row lives at the bottom of the screen ---- */

  /* (@media (max-width:560px): moved to theme files) */

  /* Start menu */
  #w98Menu{ position:fixed; left:2px; bottom:32px; z-index:90; display:flex; min-width:200px; background:#c0c0c0;
    box-shadow:var(--w98-bevel), 1px 1px 0 #000; padding:3px; font:12px Tahoma, 'MS Sans Serif', Verdana, sans-serif; color:#000; }
  #w98Menu[hidden]{ display:none; }
  #w98Menu .w98side{ width:22px; flex:none; background:linear-gradient(0deg, #000080, #1084d0); color:#fff; display:flex; align-items:flex-end; justify-content:center; }
  #w98Menu .w98side span{ writing-mode:vertical-rl; transform:rotate(180deg); font:700 14px Tahoma, sans-serif; letter-spacing:.04em; padding:6px 0; }
  #w98Menu .w98side b{ color:#c0c0c0; font-weight:400; }
  #w98Menu ul{ list-style:none; margin:0; padding:0; flex:1; }
  #w98Menu li button{ display:flex; align-items:center; gap:8px; width:100%; padding:5px 18px 5px 8px; border:none; background:none;
    color:#000; font:12px Tahoma, 'MS Sans Serif', Verdana, sans-serif; text-align:left; cursor:pointer; }
  #w98Menu li button:hover, #w98Menu li button:focus-visible{ background:#000080; color:#fff; outline:none !important; }
  #w98Menu li .mi{ width:18px; text-align:center; flex:none; }
  #w98Menu li.sep{ height:2px; margin:3px 2px; border-top:1px solid #808080; border-bottom:1px solid #fff; }

  /* message boxes */
  #w98Dlg{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.08); }
  #w98Dlg[hidden]{ display:none; }
  #w98Dlg .dlg{ width:min(340px, calc(100vw - 24px)); background:#c0c0c0; box-shadow:var(--w98-bevel), 1px 1px 0 #000; padding:3px 3px 12px;
    font:12px/1.4 Tahoma, 'MS Sans Serif', Verdana, sans-serif; color:#000; position:relative; }
  #w98Dlg .dlg .w98bar{ position:static; margin-bottom:12px; }
  #w98Dlg .dlgBody{ display:flex; gap:12px; align-items:flex-start; padding:0 12px; }
  #w98Dlg .dlgIco{ flex:none; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font:700 20px Georgia, serif; color:#fff; background:#0000ee; box-shadow:1px 1px 0 #000; }
  #w98Dlg .dlgIco.warn{ background:#ffd400; color:#000; border-radius:0; clip-path:polygon(50% 0, 100% 100%, 0 100%); padding-top:8px; }
  #w98Dlg .dlgBtns{ display:flex; justify-content:center; gap:8px; margin-top:14px; }
  #w98Dlg .dlgBtns button{ min-width:72px; height:23px; border:none; border-radius:0; background:#c0c0c0; color:#000; box-shadow:var(--w98-bevel);
    font:12px Tahoma, 'MS Sans Serif', Verdana, sans-serif; cursor:pointer; }
  #w98Dlg .dlgBtns button:active{ box-shadow:var(--w98-sunk); }
  #w98Dlg .dlgBtns button:focus-visible{ outline:1px dotted #000 !important; outline-offset:-5px !important; }

  /* the meme viewer becomes "Image Preview" */

  /* boot screen */
  #w98Boot{ position:fixed; inset:0; z-index:200; background:#000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
    color:#fff; font:13px Tahoma, 'MS Sans Serif', Verdana, sans-serif; transition:opacity .35s ease; }
  #w98Boot[hidden]{ display:none; }
  #w98Boot.out{ opacity:0; }
  #w98Boot .bootMark{ font:28px 'Press Start 2P', monospace; letter-spacing:.04em; color:#fff; text-shadow:3px 3px 0 #000080; }
  #w98Boot .bootMark b{ color:#1084d0; font-weight:400; }
  #w98Boot .bootBar{ width:220px; height:14px; padding:2px; box-shadow:inset 1px 1px #808080, inset -1px -1px #fff; background:#000; overflow:hidden; }
  #w98Boot .bootBar i{ display:block; height:100%; width:44px; background:repeating-linear-gradient(90deg, #000080 0 8px, #1084d0 8px 10px);
    animation:bootSlide 1s linear infinite; }
  @keyframes bootSlide{ from{ transform:translateX(-50px); } to{ transform:translateX(230px); } }
  html[data-reduce-motion="true"] #w98Boot .bootBar i{ animation:none; width:100%; }

  /* classic pixel cursors */

  /* yellow tooltips */
  #w98Tip{ position:fixed; z-index:150; pointer-events:none; max-width:280px; padding:2px 5px; background:#ffffe1; color:#000;
    border:1px solid #000; font:11px Tahoma, 'MS Sans Serif', Verdana, sans-serif; box-shadow:1px 1px 0 rgba(0,0,0,.25); }
  #w98Tip[hidden]{ display:none; }
  /* a window's own heading sits right under its title bar */

  /* ==================================================================
     v0.11.1 — WIN98 type: the real Windows system fonts, bigger
     Pixel fonts (Press Start 2P, Silkscreen) and the code font at 8–10px on
     grey were hard to read. WIN98 now uses Tahoma (the Win98 UI font) →
     Verdana (iPhone, Mac) → Segoe UI (Windows) → the phone's own sans, with
     nothing under 11px. Kept: the CASHCAT wordmark, the boot screen mark,
     the cartridge labels (pixel art) and addresses (Courier New, so 0/O and
     1/l can't be confused).
     ================================================================== */

  /* headings: bold, plain capitals become normal-size bold words */

  /* body text and small labels: 12–13px, nothing under 11px */

  /* ==================================================================
     v0.12.0 — AERO: a Windows-Vista-style desktop. Dark aurora wallpaper,
     frosted-glass windows with glowing white titles and a red close button,
     a black glass taskbar at the bottom with a round Start orb, a glass
     Start menu, Vista dialogs and tooltips, and sidebar gadgets (clock,
     price, pressure) on wide screens. It reuses WIN98's desktop pieces
     (site.js adds them once; .w98bar etc. are hidden in every other theme).
     Fonts: Segoe UI (the Vista font) → Tahoma → Verdana → the system sans.
     ================================================================== */

  /* the aurora wallpaper: the wash becomes slow blue-green ribbons; the stars stay, dimmer */

  /* headings and text: white with a soft glow, Segoe sizes */

  /* ---- glass surfaces: rounded, frosted, a bright top edge ---- */

  /* the header: a dark glass strip that scrolls away (the taskbar is the sticky part) */
  
     /* no blur here: it would trap the fixed taskbar inside the header */

  /* ---- windows: a glass frame, white glowing title, glass _ □ and a red × ---- */

  /* minimised: just the frame; maximised: across the row */

  /* the battlefield window */

  /* HOME is the bare desktop: no frame */

  /* ---- the taskbar: black glass along the bottom, a round Start orb ---- */

  /* the orb */

  /* the tray */

  /* (@media (max-width:560px): moved to theme files) */

  /* ---- Start menu: a glass panel, a white list, the banner on top ---- */

  /* ---- dialogs: a glass frame round a white body, Vista buttons ---- */

  /* ---- tooltips: Vista's pale gradient ---- */

  /* ---- the meme viewer: an "Image Preview" glass window ---- */

  /* ---- Settings → "Personalization" ---- */

  /* ---- boot: a glowing orb over black ---- */
  #w98Boot[data-kind="aero"]{ background:radial-gradient(60% 50% at 50% 50%, #0a2a48, #000 70%); gap:18px; font:15px 'Segoe UI', Tahoma, Verdana, sans-serif; color:#cfe8ff; }
  #w98Boot[data-kind="aero"] .bootMark{ font:300 30px 'Segoe UI', Tahoma, Verdana, sans-serif; letter-spacing:.02em; color:#fff; text-shadow:0 0 18px rgba(76,194,255,.8); }
  #w98Boot[data-kind="aero"] .bootMark b{ color:#7fd3ff; font-weight:600; }
  #w98Boot .bootOrb{ width:72px; height:72px; border-radius:50%;
    background:radial-gradient(circle at 50% 78%, rgba(125,255,154,.8), transparent 46%), radial-gradient(circle, #2a8fd8, #0c4a8c 58%, #05213f);
    box-shadow:inset 0 22px 16px -10px rgba(255,255,255,.5), 0 0 40px rgba(76,194,255,.75); animation:aeroOrb 1.6s ease-in-out infinite; }
  @keyframes aeroOrb{ 50%{ box-shadow:inset 0 22px 16px -10px rgba(255,255,255,.5), 0 0 70px rgba(125,230,255,1); transform:scale(1.04); } }
  html[data-reduce-motion="true"] #w98Boot .bootOrb{ animation:none; }

  /* ---- sidebar gadgets (wide screens only) ---- */
  #aeroGadgets{ display:none; }
  @media (min-width:1420px){
    
    /* they slide in once the battlefield (full width) has scrolled out of their way */
    
  }
  #aeroGadgets .gadget{ border-radius:10px; padding:12px; text-align:center; background:var(--aero-glass), rgba(10,26,46,.55);
    box-shadow:var(--aero-edge); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
  #aeroGadgets svg{ width:112px; height:112px; display:block; margin:0 auto 6px; }
  #aeroGadgets .face{ fill:rgba(255,255,255,.92); stroke:rgba(0,0,0,.55); stroke-width:1.5; }
  #aeroGadgets .ticks line{ stroke:#2a3b4f; stroke-width:2; stroke-linecap:round; }
  #aeroGadgets .hh{ stroke:#16222f; stroke-width:4; stroke-linecap:round; }
  #aeroGadgets .mh{ stroke:#16222f; stroke-width:2.6; stroke-linecap:round; }
  #aeroGadgets .sh{ stroke:#d0372a; stroke-width:1.2; stroke-linecap:round; }
  #aeroGadgets .pin{ fill:#16222f; }
  #aeroGadgets .gTime{ font-size:16px; font-weight:600; text-shadow:0 0 8px rgba(76,194,255,.7); }
  #aeroGadgets .gDate, #aeroGadgets .gLbl{ font-size:11.5px; color:#a9c3dc; }
  #aeroGadgets .gUsd{ font-size:20px; font-weight:600; margin:4px 0 2px; text-shadow:0 0 10px rgba(76,194,255,.7); }
  #aeroGadgets .gChg{ font-size:13px; } #aeroGadgets .gChg.up{ color:#7dff9a; } #aeroGadgets .gChg.down{ color:#ff8a7a; }
  #aeroGadgets .gBar{ height:10px; margin:8px 0 6px; border-radius:5px; overflow:hidden; background:linear-gradient(#ff8a7a, #c8392b);
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.5); }
  #aeroGadgets .gBar i{ display:block; height:100%; width:50%; background:linear-gradient(#b6ffc6, #2fbf55); transition:width 1s ease; }
  #aeroGadgets .gNums{ display:flex; justify-content:space-between; font-size:11.5px; }
  #aeroGadgets .gBuy{ color:#7dff9a; } #aeroGadgets .gSell{ color:#ff8a7a; }

  /* type sizes: the same readable scale as WIN98 (v0.11.1), nothing under 11px */
  /* body text and small labels: 12–13px, nothing under 11px */

  /* ==================================================================
     v0.13.0 — the backrooms: the phone in the footer, the dial-out,
     the meme request form (credit / claim / take down) and LEAVE ME A NOTE.
     ================================================================== */
  /* the phone: lime pixels, a slow glitch every ~8s */
  .bPhone{ width:40px; height:28px; padding:2px; border:none; background:none; cursor:pointer; color:var(--rh-lime); opacity:.75; transition:opacity .2s; }
  .bPhone:hover, .bPhone:focus-visible{ opacity:1; }
  .bPhone svg{ display:block; width:100%; height:100%; fill:currentColor; overflow:visible; }
  .bPhone svg{ animation:phoneGlitch 8s steps(1) infinite; }
  .bPhone:hover .hs{ animation:phoneRing .25s steps(2) infinite; }
  @keyframes phoneGlitch{
    0%, 86%, 100%{ transform:none; filter:none; clip-path:none; }
    87%{ transform:translateX(2px); filter:drop-shadow(-2px 0 #ff2a6d) drop-shadow(2px 0 #00e5ff); }
    88%{ transform:translateX(-1px); clip-path:inset(0 0 55% 0); }
    89%{ transform:translateX(1px) skewX(-8deg); filter:drop-shadow(2px 0 #ff2a6d); clip-path:inset(40% 0 0 0); }
    90%{ transform:none; filter:drop-shadow(-1px 0 #00e5ff); clip-path:none; }
    93%{ opacity:.3; }
    94%{ opacity:1; }
  }
  @keyframes phoneRing{ 0%{ transform:translate(0, 0) rotate(-4deg); } 100%{ transform:translate(0, -1px) rotate(4deg); } }
  .bPhone .hs{ transform-box:fill-box; transform-origin:50% 100%; }
  html[data-reduce-motion="true"] .bPhone svg, html[data-reduce-motion="true"] .bPhone:hover .hs{ animation:none; }

  /* the call: black, green rain, the phone rings, lifts, dials and dissolves */
  #dialOut{ position:fixed; inset:0; z-index:300; background:#000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
    animation:dialIn .3s ease-out; }
  #dialOut[hidden]{ display:none; }
  @keyframes dialIn{ from{ opacity:0; } }
  #dialRain{ position:absolute; inset:0; width:100%; height:100%; opacity:.35; }
  .dialPhone{ position:relative; width:min(260px, 60vw); color:#3dff7a; filter:drop-shadow(0 0 14px rgba(61,255,122,.55)); }
  .dialPhone svg{ display:block; width:100%; fill:currentColor; overflow:visible; }
  .dialPhone rect{ transition:opacity .12s; }
  .dialPhone .hs{ transform-box:fill-box; transform-origin:50% 100%; transition:transform .35s cubic-bezier(.3,1.6,.5,1); }
  #dialOut.ring .dialPhone{ animation:phoneShake .09s steps(2) infinite; }
  @keyframes phoneShake{ 0%{ transform:translateX(-3px) rotate(-1deg); } 100%{ transform:translateX(3px) rotate(1deg); } }
  #dialOut.lift .hs{ transform:translate(-18%, -70%) rotate(-24deg); }
  #dialOut.gone .dialPhone{ filter:drop-shadow(0 0 30px rgba(61,255,122,.95)) brightness(1.4); }
  .dialNum{ position:relative; min-height:1.5em; font:clamp(14px, 3vw, 22px) 'Press Start 2P', monospace; letter-spacing:.12em; color:#3dff7a;
    text-shadow:0 0 10px rgba(61,255,122,.7); white-space:pre; }
  #dialOut.black .dialNum, #dialOut.black #dialRain{ opacity:0; transition:opacity .25s; }

  /* meme request: three kinds as pills, a small link under the viewer's buttons */
  .reqKinds{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; }
  .reqKinds label{ display:block; margin:0; position:relative; }
  .reqKinds input{ position:absolute; opacity:0; width:1px; height:1px; }
  .reqKinds span{ display:inline-block; padding:6px 9px; border:1px solid var(--line); border-radius:4px; cursor:pointer;
    font:10px var(--font-label); letter-spacing:.06em; color:var(--muted); }
  .reqKinds input:checked + span{ color:#0b0d16; background:var(--rh-lime); border-color:var(--rh-lime); }
  .reqKinds input:focus-visible + span{ outline:2px solid var(--rh-lime); outline-offset:2px; }
  .reqKinds input[value="takedown"]:checked + span{ background:#ff4757; border-color:#ff4757; color:#fff; }
  .reqFine{ margin:8px 0 0; font-size:11px; color:var(--muted); }

  /* LEAVE ME A NOTE (Creator tab) */
  .bubble.noteCard{ grid-column:1 / -1; }
  .noteForm label{ display:grid; gap:5px; margin-bottom:12px; font-size:11px; color:var(--muted); }
  .noteForm input:not([type=radio]), .noteForm textarea{ width:100%; box-sizing:border-box; padding:9px 10px; border-radius:4px; border:1px solid var(--line);
    background:rgba(0,0,0,.35); color:var(--ink); font:13px/1.5 'JetBrains Mono', monospace; }
  .noteForm textarea{ resize:vertical; min-height:96px; }
  .noteForm input:focus, .noteForm textarea:focus{ outline:none; border-color:var(--rh-lime); }
  .noteForm .hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
  .noteRow{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
  @media (max-width:600px){ .noteRow{ grid-template-columns:1fr; } }
  .noteBtns{ display:flex; align-items:center; gap:12px; }
  .noteCount{ margin-left:auto; font-size:11px; color:var(--muted); }
  #noteStatus{ margin:10px 0 0; font-size:12px; min-height:1em; }
  #noteStatus.ok{ color:var(--rh-lime); } #noteStatus.err{ color:#ff8a8a; }
  #noteStatus a{ color:inherit; }

  /* ==================================================================
     v0.14.0 — COMMUNITY without the outer bubbles, live site previews,
     a bigger WIN98 / AERO taskbar (no price in the tray), and theme
     cards that look like the theme they switch to.
     ================================================================== */
  /* COMMUNITY: SOCIAL and SITE sit straight on the page */
  .tabPanel.bubbled .commSect{ grid-column:1 / -1; min-width:0; margin:6px 0 0; }
  .tabPanel.bubbled .commSect > h2.sub:first-child{ margin-top:0; }

  /* site previews: the page (live or a screenshot) fills the card's picture area */
  .projCard.withPreview .projArt{ height:150px; overflow:hidden; }
  .projCard.withPreview .projArt > img:not(.projShot){ transition:opacity .4s; }
  .projLive{ position:absolute; left:0; top:0; border:0; transform-origin:0 0; pointer-events:none; background:#fff;
    opacity:0; transition:opacity .5s; }
  .projShot{ position:absolute; inset:0; width:100%; height:100% !important; object-fit:cover; object-position:top left;
    padding:0 !important; border:0 !important; border-radius:0 !important; background:none !important; filter:none !important; opacity:0; transition:opacity .5s; }
  .projArt.hasPreview .projLive, .projArt.hasPreview .projShot{ opacity:1; }
  .projArt.hasPreview > img:not(.projShot){ opacity:0; }
  /* a soft fade at the bottom so the preview meets the card text */
  .projCard.withPreview .projArt::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:28px; z-index:1; pointer-events:none;
    background:linear-gradient(transparent, rgba(0,0,0,.45)); }

  /* ---- WIN98 taskbar: taller, bigger buttons, just the clock ---- */

  .w98tray .trPrice{ display:none !important; }
  /* the classic cat on title bars and Start: a photo, so smooth, not pixelated */
  .w98bar .w98ico, .w98start img{ image-rendering:auto !important; object-fit:contain; }

  /* ---- AERO taskbar: taller, a bigger orb ---- */

  /* (@media (max-width:560px): moved to theme files) */

  /* ---- theme cards that look like their theme ---- */
  .tcMini{ position:absolute; inset:0; z-index:0; pointer-events:none; }
  .tcMini i{ position:absolute; display:block; font-style:normal; }
  /* TERMINAL: a green phosphor screen with a prompt and a blinking cursor */
  .themeCard[data-theme="terminal"]{ background:#010a04; border-color:#0c4a26; }
  .themeCard[data-theme="terminal"]::after{ display:none; }
  .themeCard[data-theme="terminal"] .tcCode{ color:#31ff6a; opacity:.22; }
  .tmTerm::before{ content:''; position:absolute; inset:0; background:repeating-linear-gradient(to bottom, rgba(0,0,0,.35) 0 1px, transparent 1px 3px); }
  .tmTerm i{ left:9px; top:7px; font:9px 'JetBrains Mono', monospace; color:#31ff6a; text-shadow:0 0 6px rgba(49,255,106,.7); }
  .tmTerm i::after{ content:''; display:inline-block; width:5px; height:9px; margin-left:3px; vertical-align:-1px; background:#31ff6a; animation:tcBlink 1s steps(1) infinite; }
  @keyframes tcBlink{ 50%{ opacity:0; } }
  .themeCard[data-theme="terminal"] .tcName{ color:#31ff6a; font-family:'JetBrains Mono', monospace; font-size:9px; text-shadow:0 0 6px rgba(49,255,106,.8); }
  /* WIN98: the teal desktop, a grey window with a navy title bar, the grey taskbar with Start */
  .themeCard[data-theme="win98"]{ background:#008080; border:2px solid; border-color:#fff #404040 #404040 #fff; border-radius:0; }
  .themeCard[data-theme="win98"]::after{ display:none; }
  .tm98 .mWin{ left:20%; right:16%; top:9%; height:44%; background:#c0c0c0;
    box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; }
  .tm98 .mBar{ left:3px; right:3px; top:3px; height:6px; background:linear-gradient(90deg, #000080, #1084d0); }
  .tm98 .mBar i{ right:1px; top:1px; width:5px; height:4px; background:#c0c0c0; }
  .tm98 .mTask{ left:0; right:0; bottom:0; height:30%; min-height:12px; background:#c0c0c0; box-shadow:inset 0 1px #dfdfdf, inset 0 2px #fff; }
  .tm98 .mStart{ left:2px; top:2px; bottom:2px; padding:0 4px; display:flex !important; align-items:center;
    font:700 8px Tahoma, Verdana, sans-serif; color:#000; background:#c0c0c0; box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #fff; }
  .themeCard[data-theme="win98"] .tcName{ left:auto; right:6px; bottom:2px; height:calc(30% - 4px); min-height:8px; display:flex; align-items:center;
    padding:0 6px; color:#000; text-shadow:none; font:700 9px Tahoma, Verdana, sans-serif; letter-spacing:0;
    background:#dfdfdf; box-shadow:inset 1px 1px #808080, inset -1px -1px #fff; }
  /* AERO: the blue aurora, a frosted window with a red ×, the black glass taskbar and its orb */
  .themeCard[data-theme="aero"]{ border-color:#0d2c4a; border-radius:8px;
    background:radial-gradient(60% 40% at 30% 30%, rgba(76,194,255,.55), transparent 70%), radial-gradient(50% 30% at 75% 45%, rgba(125,255,154,.35), transparent 70%),
      linear-gradient(160deg, #0b3a5c, #06121f 70%); }
  .themeCard[data-theme="aero"]::after{ display:none; }
  .tmAero .mWin{ left:18%; right:18%; top:10%; height:44%; border-radius:4px;
    background:linear-gradient(180deg, rgba(190,225,255,.55), rgba(90,150,210,.3) 30%, rgba(10,30,55,.75) 31%);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.45), 0 0 0 1px rgba(0,0,0,.6), 0 4px 10px rgba(0,0,0,.5); }
  .tmAero .mX{ right:3px; top:0; width:12px; height:5px; border-radius:0 0 2px 2px; background:linear-gradient(#e8a493, #c8392b); }
  .tmAero .mTask{ left:0; right:0; bottom:0; height:30%; min-height:12px;
    background:linear-gradient(180deg, rgba(70,82,100,.9), rgba(10,14,20,.95) 50%, #02040a 52%); border-top:1px solid rgba(255,255,255,.35); }
  .tmAero .mOrb{ left:4px; top:50%; width:14px; height:14px; margin-top:-7px; border-radius:50%;
    background:radial-gradient(circle at 50% 78%, rgba(125,255,154,.8), transparent 50%), radial-gradient(circle, #2a8fd8, #0c4a8c 60%, #05213f);
    box-shadow:inset 0 4px 3px -2px rgba(255,255,255,.6), 0 0 6px rgba(76,194,255,.8); }
  .themeCard[data-theme="aero"] .tcName{ left:24px; bottom:auto; top:auto; bottom:calc(15% - 5px); font:600 9px 'Segoe UI', Tahoma, Verdana, sans-serif; letter-spacing:.02em;
    color:#fff; text-shadow:0 0 6px rgba(76,194,255,.9); }
  #customizerPanel .themeCard[data-theme="aero"] .tcName{ left:22px; }
  html[data-reduce-motion="true"] .tmTerm i::after{ animation:none; }

  /* v0.14.0: the backrooms phone is a wall payphone (12 × 14 pixels) */
  .bPhone{ width:28px; height:33px; }
  .bPhone .hs{ transform-origin:50% 0; }
  .dialPhone{ width:min(170px, 40vw); }
  .dialPhone .hs{ transform-origin:50% 0; }
  .dialPhone .cd{ transition:opacity .3s; }
  #dialOut.lift .hs{ transform:translate(-55%, 18%) rotate(-38deg); }
  #dialOut.lift .cd{ opacity:.5; }
  @keyframes phoneRing{ 0%{ transform:rotate(-6deg); } 100%{ transform:rotate(6deg); } }
  /* NFT: 16 cats, two rows of eight on desktop; four across on phones */
  @media (max-width:560px){ #panel-nft .nftGrid{ grid-template-columns:repeat(4, 1fr); gap:6px; } }

  /* ==================================================================
     v0.15.0 — text size (Settings → Display): the pages under the
     battlefield scale as a whole, so the layout grows with the words.
     ================================================================== */
  #tabContent, #siteFooter{ zoom:var(--text-zoom, 1); }
  .textSizes .custPill{ min-width:34px; display:inline-flex; align-items:center; justify-content:center; font-family:'JetBrains Mono', monospace; font-weight:700; }

  /* ==================================================================
     v0.16.0
     ================================================================== */
  /* a short tab can still scroll up to sit right under the tab bar */
  #tabContent{ min-height:calc(100vh - 40px); min-height:calc(100dvh - 40px); }
  /* phones: the battlefield takes its height from the screen, not its width (4/5 of a 390px
     phone was 487px, about half the screen, with the ground band squeezed). Now ~72% of the
     visible height, so the field, the ground and the killfeed under it all fit;
     "Larger battlefield" takes it to ~86%. */
  @media (max-width:500px){
    #battlefieldFrame{ aspect-ratio:auto; height:min(72vh, 160vw); height:min(72svh, 160vw); }
    .frameWrap.large #battlefieldFrame{ aspect-ratio:auto; height:min(86vh, 190vw); height:min(86svh, 190vw); }
  }
  /* v0.16.1: the tab labels sit on their own layer (z-index 1, for the matrix decode), so on a
     phone a label scrolled under the WIN98 clock tray showed through it; the tray and the
     Start button now sit above them in both desktop themes */

  /* ==================================================================
     v0.17.0 — VIOLET, EMBER and REEF colour the whole page, not just the
     accent: the wallpaper, the glass panels and their borders, the solid
     surfaces (tabs, pills, inputs), the sticky header and the background
     glow. (The hardcoded navy surfaces became --surface / --surface-hi /
     --surface-solid, defaulting to the old values, so other themes are
     unchanged.) Buy green and sell red stay fixed in every theme.
     ================================================================== */

  /* the background glow follows the theme (the buy/sell pressure tint stays on top of it) */

  /* phones held upright: the battlefield fills the screen below the header (title + tabs),
     so it opens full-height; at least 480px. Scrolling on brings the page up under the tab
     bar as before. "Larger battlefield" fills everything under the stuck tab row. */
  @media (max-width:500px) and (orientation:portrait){
    #battlefieldFrame{ height:max(480px, calc(100vh - var(--headH, 140px))); height:max(480px, calc(100svh - var(--headH, 140px))); }
    .frameWrap.large #battlefieldFrame{ height:calc(100vh - 60px); height:calc(100svh - 60px); }
  }

  /* ==================================================================
     v0.18.0 — HOME (right now, yesterday's paper), CHANGE THEME, the
     header's music button, the note form as a letter
     ================================================================== */
  /* ---- music button beside the name ---- */
  .hdrMusic{ flex:none; display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 9px; border-radius:15px; cursor:pointer;
    border:1px solid var(--line); background:var(--surface, #10131f); color:var(--muted); transition:color .2s, border-color .2s, box-shadow .2s; }
  .hdrMusic svg{ width:12px; height:12px; fill:currentColor; }
  .hdrMusic .hmPause{ display:none; }
  .hdrMusic.on{ color:var(--rh-lime); border-color:rgba(var(--rh-lime-rgb),.5); box-shadow:0 0 10px rgba(var(--rh-lime-rgb),.25); }
  .hdrMusic.on .hmPlay{ display:none; } .hdrMusic.on .hmPause{ display:block; }
  .hdrMusic:hover, .hdrMusic:focus-visible{ color:var(--ink); border-color:var(--rh-lime); }
  .hdrMusic:not(.on) .hmEq{ display:none; }
  .hmEq{ display:inline-flex; align-items:flex-end; gap:2px; height:12px; }
  .hmEq i{ width:2px; height:3px; background:currentColor; border-radius:1px; }
  .hdrMusic.on .hmEq i{ animation:hmEq 1s ease-in-out infinite; }
  .hdrMusic.on .hmEq i:nth-child(2){ animation-delay:-.35s; } .hdrMusic.on .hmEq i:nth-child(3){ animation-delay:-.7s; }
  @keyframes hmEq{ 0%, 100%{ height:3px; } 50%{ height:12px; } }
  html[data-reduce-motion="true"] .hdrMusic.on .hmEq i{ animation:none; height:8px; }
  @media (max-width:420px){ .hdrMusic .hmEq{ display:none; } .hdrMusic{ padding:0 8px; } }

  /* ---- RIGHT NOW ---- */
  #panel-home .homeNow{ padding:0; }
  .nowHead{ display:flex; align-items:center; gap:8px; font:10px var(--font-label); letter-spacing:.12em; color:var(--muted); }
  .nowHead .nowWindow{ margin-left:auto; letter-spacing:.06em; }
  .nowDot{ width:8px; height:8px; border-radius:50%; background:var(--buy); box-shadow:0 0 8px var(--buy); animation:nowPulse 1.6s ease-in-out infinite; }
  @keyframes nowPulse{ 50%{ opacity:.35; } }
  .homeNow[data-mode="connecting"] .nowDot, .homeNow[data-mode="offline"] .nowDot{ background:var(--muted); box-shadow:none; }
  html[data-reduce-motion="true"] .nowDot{ animation:none; }
  .nowLead{ margin:10px 0 12px; font:clamp(13px, 1.9vw, 19px)/1.4 'Press Start 2P', monospace; color:var(--ink); letter-spacing:.01em; }
  .nowLead.buy{ color:var(--buy); text-shadow:0 0 18px rgba(var(--buy-rgb),.35); }
  .nowLead.sell{ color:var(--sell); text-shadow:0 0 18px rgba(var(--sell-rgb),.35); }
  .nowBar{ height:8px; border-radius:4px; overflow:hidden; background:var(--sell); }
  .nowBar i{ display:block; height:100%; background:var(--buy); transition:width .8s ease; }
  .nowStats{ display:flex; flex-wrap:wrap; gap:6px 22px; margin-top:12px; font-size:12px; color:var(--muted); }
  .nowStats b{ color:var(--ink); font-weight:700; }
  .nowStats em{ font-style:normal; margin-left:3px; }
  .nowStats em.up{ color:var(--buy); } .nowStats em.down{ color:var(--sell); }

  /* ---- YESTERDAY'S SCORE: the CashCat Times ---- */
  #panel-home .homePaper{ padding:0; }
  .paperFold{ width:100%; display:flex; align-items:center; gap:14px; padding:12px 16px; cursor:pointer; text-align:left;
    background:#efe7d4; color:#1d1a14; border:1px solid #c9bc9c; border-radius:6px; box-shadow:0 6px 20px rgba(0,0,0,.35);
    background-image:radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px); background-size:4px 4px; }
  .paperKicker{ flex:none; font:900 11px/1 Georgia, 'Times New Roman', serif; letter-spacing:.14em; padding:5px 7px; color:#efe7d4; background:#1d1a14; }
  .paperTeaser{ flex:1; min-width:0; font:700 15px/1.3 Georgia, 'Times New Roman', serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .paperChev{ flex:none; font-size:14px; transition:transform .2s; }
  .homePaper.open .paperFold{ border-radius:6px 6px 0 0; box-shadow:none; }
  .homePaper.open .paperChev{ transform:rotate(180deg); }
  .paper{ background:#f3ecdb; color:#1d1a14; border:1px solid #c9bc9c; border-top:none; border-radius:0 0 6px 6px; padding:20px 22px 16px;
    box-shadow:0 10px 30px rgba(0,0,0,.4); font:15px/1.55 'Old Standard TT', Georgia, 'Times New Roman', serif;
    background-image:radial-gradient(rgba(0,0,0,.03) 1px, transparent 1px), linear-gradient(180deg, rgba(255,255,255,.35), transparent 30%);
    background-size:4px 4px, 100% 100%; }
  .paper *{ letter-spacing:normal !important; text-transform:none; }
  .pMast{ text-align:center; border-bottom:3px double #1d1a14; padding-bottom:6px; margin-bottom:12px; }
  .pEars{ display:flex; justify-content:space-between; font:700 10px 'Old Standard TT', Georgia, serif; letter-spacing:.12em !important; color:#4a4436; text-transform:uppercase; }
  .pName{ margin:2px 0 4px; font:400 clamp(30px, 6vw, 54px)/1.05 'UnifrakturMaguntia', 'Old English Text MT', Georgia, serif; color:#111; }
  .pDate{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; border-top:1px solid #1d1a14; border-bottom:1px solid #1d1a14;
    padding:3px 2px; font:italic 12px 'Old Standard TT', Georgia, serif; color:#2b2720; }
  .pHead{ margin:8px 0 2px; text-align:center; font:900 clamp(26px, 5vw, 46px)/1.02 'Playfair Display', Georgia, serif; color:#111; text-transform:uppercase; }
  .pDeck{ margin:0 0 14px; text-align:center; font:italic 17px/1.35 'Old Standard TT', Georgia, serif; color:#3a352b; }
  .pCols{ display:grid; grid-template-columns:repeat(4, 1fr); gap:0; border-top:1px solid #1d1a14; }
  .pCols section{ padding:10px 14px; border-left:1px solid rgba(29,26,20,.4); }
  .pCols section:first-child{ border-left:none; padding-left:0; } .pCols section:last-child{ padding-right:0; }
  .pCols h5{ margin:10px 0 4px; font:700 12px 'Playfair Display', Georgia, serif; letter-spacing:.1em !important; border-bottom:1px solid rgba(29,26,20,.5); padding-bottom:2px; }
  .pCols h5:first-child{ margin-top:0; }
  .pCols p{ margin:0 0 8px; color:#1d1a14 !important; font-size:14px; line-height:1.5; hyphens:auto; }
  .pCols small{ font-size:11px; color:#5a5345; }
  .pLede::first-letter{ float:left; font:900 40px/0.9 'Playfair Display', Georgia, serif; margin:3px 5px 0 0; }
  .pSmall{ font-size:12.5px !important; color:#4a4436 !important; }
  .pTable{ width:100%; border-collapse:collapse; font-size:13px; }
  .pTable td{ padding:3px 0; border-bottom:1px dotted rgba(29,26,20,.5); }
  .pTable td:nth-child(n+2){ text-align:right; font-variant-numeric:tabular-nums; }
  .pFoot{ margin-top:10px; padding-top:6px; border-top:3px double #1d1a14; font:italic 11.5px 'Old Standard TT', Georgia, serif; color:#4a4436; text-align:center; }
  @media (max-width:900px){ .pCols{ grid-template-columns:1fr 1fr; } .pCols section:nth-child(3){ border-left:none; padding-left:0; } }
  @media (max-width:560px){ .pCols{ grid-template-columns:1fr; } .pCols section{ border-left:none; padding:8px 0; border-top:1px solid rgba(29,26,20,.35); }
    .pCols section:first-child{ border-top:none; } .paper{ padding:16px 14px 12px; } .pEars span:last-child{ display:none; } }

  /* ---- CHANGE THEME under the battlefield ---- */
  #themeDrawer{ padding:12px 14px 16px; border-top:1px solid var(--line); background:rgba(var(--bg-rgb, 7,8,16),.55); }
  #themeDrawer[hidden]{ display:none; }
  #themeDrawer .small{ margin:0 0 10px; }
  #themeDrawer .themeCards{ margin-top:0; }
  #themeDrawer .drawerNote{ margin:10px 0 0; font:10.5px/1.5 'JetBrains Mono', monospace; letter-spacing:.02em; color:var(--muted); opacity:.85; }
  #themeDrawerBtn.active{ color:var(--ink); border-color:var(--rh-lime); }

  /* ---- LEAVE ME A NOTE: a letter ---- */
  .noteTo{ position:relative; display:flex; align-items:baseline; gap:10px; margin:0 0 14px; padding:0 90px 8px 0; border-bottom:1px dashed var(--line); }
  .noteTo{ flex-wrap:wrap; row-gap:4px; }
  .noteTo span{ font:10px var(--font-label); letter-spacing:.14em; color:var(--muted); }
  .noteTo b{ font:14px 'Press Start 2P', monospace; color:var(--rh-lime); letter-spacing:.04em; }
  .noteStamp{ position:absolute; right:4px; top:-40px; width:64px; height:74px; padding:6px; background:#efe7d4; transform:rotate(6deg);
    display:flex; flex-direction:column; align-items:center; gap:3px; border:3px dotted #f6f0e2; outline:1px solid rgba(0,0,0,.15);
    box-shadow:0 3px 10px rgba(0,0,0,.45); }
  .noteStamp img{ width:44px; height:42px; object-fit:contain; background:rgba(var(--rh-lime-rgb),.35); border:1px solid rgba(0,0,0,.25); }
  .noteStamp i{ font:7px 'Press Start 2P', monospace; font-style:normal; color:#1d1a14; letter-spacing:0 !important; }
  .noteTopics{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:8px; margin:0 0 14px; }
  .noteTopics label{ display:block; margin:0; position:relative; }
  .noteTopics input{ position:absolute; opacity:0; width:1px; height:1px; }
  .noteTopics span{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:44px; padding:7px 4px; cursor:pointer;
    border:1px solid var(--line); border-radius:8px; background:var(--surface, #10131f); color:var(--muted);
    font:9px 'Press Start 2P', monospace; letter-spacing:.02em; text-align:center; transition:color .15s, border-color .15s, background .15s, transform .15s; }
  .noteTopics span i{ font-style:normal; font-size:15px; line-height:1; font-family:system-ui, sans-serif; color:var(--tc); }
  .noteTopics span:hover{ color:var(--ink); border-color:var(--tc); transform:translateY(-2px); }
  .noteTopics input:checked + span{ color:#0b0d16; background:var(--tc); border-color:var(--tc); box-shadow:0 0 16px color-mix(in srgb, var(--tc) 45%, transparent); }
  .noteTopics input:checked + span i{ color:#0b0d16; }
  .noteTopics input:focus-visible + span{ outline:2px solid var(--tc); outline-offset:2px; }
  @media (max-width:600px){ .noteTopics{ grid-template-columns:repeat(3, minmax(0, 1fr)); } .noteTopics span{ min-height:40px; font-size:8px; } }
  .noteForm textarea{ min-height:150px; line-height:26px !important; padding-top:3px !important;
    background:repeating-linear-gradient(180deg, transparent 0 25px, rgba(var(--rh-lime-rgb),.16) 25px 26px), rgba(0,0,0,.35) !important;
    background-attachment:local !important; }
  .noteForm.posted .noteStamp{ animation:stampThump .6s cubic-bezier(.3,1.6,.5,1); }
  @keyframes stampThump{ 0%{ transform:rotate(6deg) scale(1); } 35%{ transform:rotate(-4deg) scale(1.25); } 100%{ transform:rotate(6deg) scale(1); } }

  /* phones held upright: taller again. The battlefield is now exactly the screen under the
     stuck tab bar (--stuckH, measured): scroll down a little and it fills the phone. */
  @media (max-width:500px) and (orientation:portrait){
    #battlefieldFrame{ height:max(500px, calc((100vh - var(--stuckH, 56px)) * .93)); height:max(500px, calc((100svh - var(--stuckH, 56px)) * .93)); }   /* v0.19.0: 93% of the screen under the bar */
  }

  /* ---- v0.18.1: LEAVE ME A NOTE is a sheet of letter paper: cream stock with a little grain,
     a red margin rule, a strip of tape holding it up, ink-coloured writing, typewriter fields.
     WIN98 / AERO keep their window look (the desktop owns the frame there). */
  html:not([data-theme="win98"]):not([data-theme="aero"]) #tabContent .tabPanel.bubbled .bubble.paperNote{
    --ink-p:#1f2a55; --ink-soft:#6a6152; --paper:#f4eedf;
    position:relative; color:var(--ink-p); border:none; border-radius:3px 3px 3px 3px;
    --mx:38px; padding:30px 28px 24px calc(var(--mx) + 16px);
    background:
      linear-gradient(90deg, transparent var(--mx), rgba(214,72,72,.55) var(--mx) calc(var(--mx) + 1px), transparent calc(var(--mx) + 1px) calc(var(--mx) + 4px), rgba(214,72,72,.35) calc(var(--mx) + 4px) calc(var(--mx) + 5px), transparent calc(var(--mx) + 5px)),
      radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.55), transparent 60%),
      radial-gradient(100% 80% at 100% 100%, rgba(150,120,70,.16), transparent 65%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .38  0 0 0 0 .25  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
      var(--paper);
    backdrop-filter:none; -webkit-backdrop-filter:none;
    box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 2px 3px rgba(0,0,0,.25), 0 18px 34px -8px rgba(0,0,0,.55); }
  html:not([data-theme="win98"]):not([data-theme="aero"]) #tabContent .tabPanel.bubbled .bubble.paperNote:hover{ border-color:transparent; }
  /* the tape */
  html:not([data-theme="win98"]):not([data-theme="aero"]) .paperNote::before{ content:""; position:absolute; top:-11px; left:50%; width:118px; height:26px; transform:translateX(-50%) rotate(-2.5deg);
    background:linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.3) 50%, rgba(255,255,255,.12)), rgba(var(--rh-lime-rgb), .5);
    -webkit-mask:linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent 0) , repeating-linear-gradient(180deg, #000 0 3px, transparent 3px 4px);
    box-shadow:0 1px 2px rgba(0,0,0,.18); pointer-events:none; }
  /* a folded-over bottom-right corner */
  html:not([data-theme="win98"]):not([data-theme="aero"]) .paperNote::after{ content:""; position:absolute; right:0; bottom:0; width:26px; height:26px;
    background:linear-gradient(315deg, rgb(var(--bg-rgb, 7,8,16)) 0 50%, #e2d8c0 50% 100%); box-shadow:-2px -2px 4px rgba(0,0,0,.12); border-top-left-radius:2px; pointer-events:none; }
  html:not([data-theme="win98"]):not([data-theme="aero"]) .paperNote h2{ color:var(--ink-p) !important; text-shadow:none !important; }
  html:not([data-theme="win98"]):not([data-theme="aero"]) .paperNote > p{ color:var(--ink-soft) !important; font-family:Georgia, 'Times New Roman', serif; font-style:italic; font-size:14px; }
  html:not([data-theme="win98"]):not([data-theme="aero"]) .paperNote .noteTo{ border-bottom-color:rgba(31,42,85,.3); }
  html:not([data-theme="win98"]):not([data-theme="aero"]) .paperNote .noteTo span, html:not([data-theme="win98"]):not([data-theme="aero"]) .paperNote .noteCount{ color:var(--ink-soft); }
  html:not([data-theme="win98"]):not([data-theme="aero"]) .paperNote .noteTo b{ color:var(--ink-p); }
  /* the stamp sits in the sheet's top-right corner, like on an envelope */
  html:not([data-theme="win98"]):not([data-theme="aero"]) .paperNote .noteTo{ position:static; padding:0 0 4px; margin-bottom:14px; }
  html:not([data-theme="win98"]):not([data-theme="aero"]) .paperNote .noteStamp{ top:18px; right:20px; }
  html:not([data-theme="win98"]):not([data-theme="aero"]) .paperNote > h2, html:not([data-theme="win98"]):not([data-theme="aero"]) .paperNote > p{ padding-right:84px; }
  html:not([data-theme="win98"]):not([data-theme="aero"]) .paperNote .noteStamp{ background:#fffdf6; border-color:#fffdf6; outline-color:rgba(0,0,0,.2); box-shadow:0 2px 5px rgba(0,0,0,.3); }
  /* topic tiles: paper slips; the picked one is filled with its colour */
  html:not([data-theme="win98"]):not([data-theme="aero"]) .paperNote .noteTopics span{ background:#fffaf0; border-color:rgba(31,42,85,.2); color:var(--ink-p); box-shadow:0 1px 0 rgba(0,0,0,.08); }
  html:not([data-theme="win98"]):not([data-theme="aero"]) .paperNote .noteTopics span i{ color:color-mix(in srgb, var(--tc) 55%, #1a1a1a); }
  html:not([data-theme="win98"]):not([data-theme="aero"]) .paperNote .noteTopics span:hover{ border-color:color-mix(in srgb, var(--tc) 60%, #1a1a1a); color:var(--ink-p); }
  html:not([data-theme="win98"]):not([data-theme="aero"]) .paperNote .noteTopics input:checked + span{ background:var(--tc); border-color:color-mix(in srgb, var(--tc) 60%, #1a1a1a); color:#14130f; box-shadow:0 2px 0 color-mix(in srgb, var(--tc) 50%, #1a1a1a); }
  html:not([data-theme="win98"]):not([data-theme="aero"]) .paperNote .noteTopics input:checked + span i{ color:#14130f; }
  /* fields: writing on the line, in typewriter */
  html:not([data-theme="win98"]):not([data-theme="aero"]) .paperNote .noteForm label{ color:var(--ink-soft); }
  html:not([data-theme="win98"]):not([data-theme="aero"]) .paperNote .noteForm input:not([type=radio]),
  html:not([data-theme="win98"]):not([data-theme="aero"]) .paperNote .noteForm textarea{
    background:transparent !important; border:none !important; border-bottom:1px solid rgba(31,42,85,.35) !important; border-radius:0 !important;
    color:var(--ink-p) !important; font-family:'Courier New', Courier, monospace !important; font-size:15px !important; font-weight:600; padding-left:2px !important; box-shadow:none !important; }
  html:not([data-theme="win98"]):not([data-theme="aero"]) .paperNote .noteForm textarea{ border:1px solid rgba(31,42,85,.18) !important; border-radius:2px !important;
    background:repeating-linear-gradient(180deg, transparent 0 25px, rgba(70,110,190,.32) 25px 26px) !important; background-attachment:local !important; }
  html:not([data-theme="win98"]):not([data-theme="aero"]) .paperNote .noteForm input::placeholder{ color:rgba(31,42,85,.4); font-weight:400; }
  html:not([data-theme="win98"]):not([data-theme="aero"]) .paperNote .noteForm input:focus,
  html:not([data-theme="win98"]):not([data-theme="aero"]) .paperNote .noteForm textarea:focus{ border-bottom-color:var(--ink-p) !important; background-color:rgba(255,255,255,.35) !important; }
  html:not([data-theme="win98"]):not([data-theme="aero"]) .paperNote .donateBtn{ background:var(--ink-p); border-color:var(--ink-p); color:#f4eedf; }
  html:not([data-theme="win98"]):not([data-theme="aero"]) .paperNote .donateBtn:hover,
  html:not([data-theme="win98"]):not([data-theme="aero"]) .paperNote .donateBtn:focus-visible{ background:#c0392b; border-color:#c0392b; color:#fff; }
  html:not([data-theme="win98"]):not([data-theme="aero"]) .paperNote #noteStatus.ok{ color:#1d7a3a; }
  html:not([data-theme="win98"]):not([data-theme="aero"]) .paperNote #noteStatus.err{ color:#b3261e; }
  @media (max-width:560px){ html:not([data-theme="win98"]):not([data-theme="aero"]) #tabContent .tabPanel.bubbled .bubble.paperNote{ --mx:18px; padding:26px 16px 20px calc(var(--mx) + 12px); } }

  /* ---- v0.19.0: depth under the stuck tab bar. site.js sets html[data-under] from what is
     passing under the bar: a shadow over light things, a faint accent glow over dark ones. ---- */
  .hdrDepth{ position:absolute; left:0; right:0; top:100%; height:30px; pointer-events:none; }
  .hdrDepth i{ position:absolute; inset:0; opacity:0; transition:opacity .5s ease; }
  .hdrDepth .sh{ background:linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.24) 35%, rgba(0,0,0,0)); }
  .hdrDepth .gl{ background:linear-gradient(180deg, rgba(var(--rh-lime-rgb),.20), rgba(var(--rh-lime-rgb),.06) 40%, rgba(var(--rh-lime-rgb),0));
    box-shadow:inset 0 1px 0 rgba(var(--rh-lime-rgb),.35); }
  html.navStuck[data-under="light"] .hdrDepth .sh{ opacity:1; }
  html.navStuck[data-under="dark"] .hdrDepth .gl{ opacity:1; }

  /* ---- v0.19.0: CREATOR on desktop: LEAVE ME A NOTE narrower, PET CASHCAT beside it.
     A 12-column grid here (not a wrapper) so the WIN98/AERO window builder still sees
     every box as a direct child. Under 1000px the pet box drops under the note. ---- */
  @media (min-width:1001px){
    #tabContent #panel-creator.tabPanel.bubbled.active{ grid-template-columns:repeat(12, minmax(0, 1fr)); }
    #panel-creator .bubble.half{ grid-column:span 6; }
    #panel-creator .bubble.noteCard{ grid-column:span 8; }
    #panel-creator .bubble.petCard{ grid-column:span 4; }
  }
  .bubble.petCard{ grid-column:1 / -1; align-self:stretch; display:flex; flex-direction:column; }
  .petCard h2{ margin:0 0 4px; }
  .petCard .petHint{ margin:0 0 12px; font-size:11px; color:var(--muted); }
  .petRoom{ position:relative; flex:1 1 auto; display:block; width:100%; min-height:250px; padding:0; margin:0; cursor:pointer;
    border:1px solid var(--line); border-radius:10px; overflow:hidden; font:inherit; color:inherit;
    background:
      radial-gradient(70% 55% at 50% 30%, rgba(var(--rh-lime-rgb),.10), transparent 70%),
      repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 24px, transparent 24px 48px),
      linear-gradient(180deg, rgba(var(--bg-rgb, 7,8,16),.55), rgba(var(--bg-rgb, 7,8,16),.85));
    transition:border-color .15s, transform .12s; }
  .petRoom:hover{ border-color:rgba(var(--rh-lime-rgb),.5); }
  .petRoom:focus-visible{ outline:2px solid var(--rh-lime); outline-offset:2px; }
  .petRoom.petted{ transform:scale(.985); }
  .petRoom canvas{ position:absolute; inset:0; width:100%; height:100%; image-rendering:auto; }
  .petSay{ position:absolute; left:0; top:0; padding:6px 8px; border-radius:6px; background:#f4eedf; color:#1f2a55; white-space:nowrap;
    font:9px 'Press Start 2P', monospace; box-shadow:0 2px 6px rgba(0,0,0,.4); opacity:0; pointer-events:none; }
  .petSay::after{ content:""; position:absolute; left:22px; bottom:-5px; border:5px solid transparent; border-top-color:#f4eedf; border-bottom:0; }
  .petSay.show{ animation:petSay 1.8s ease forwards; }
  @keyframes petSay{ 0%{ opacity:0; transform:translateY(6px) scale(.9); } 12%{ opacity:1; transform:none; } 80%{ opacity:1; } 100%{ opacity:0; transform:translateY(-6px); } }
  /* until pet.js arrives: three pixels blinking in turn (the same idea works for a tab loading) */
  .petLoad{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); display:flex; gap:8px; }
  .petLoad i{ width:8px; height:8px; background:var(--rh-lime); animation:petLoad 1s steps(1) infinite; }
  .petLoad i:nth-child(2){ animation-delay:.33s; } .petLoad i:nth-child(3){ animation-delay:.66s; }
  @keyframes petLoad{ 0%{ opacity:1; } 33%{ opacity:.2; } }
  .petRoom.ready .petLoad{ display:none; }
  .petStats{ display:flex; justify-content:space-between; margin-top:10px; font:10px var(--font-label, monospace); letter-spacing:.08em; color:var(--muted); }
  .petStats #petMood{ color:#ff6fae; letter-spacing:.2em; }
  @media (max-width:1000px){ .petRoom{ min-height:200px; } }

  /* ==== v0.19.1 ==== */
  /* ---- BIGGEST TRADES (above RIGHT NOW) ---- */
  #panel-home .homeBig{ padding:14px 16px; }
  .bigHead{ display:flex; align-items:center; gap:10px; font:10px var(--font-label); letter-spacing:.12em; color:var(--muted); }
  .bigWin{ margin-left:auto; display:flex; gap:6px; }
  .bigWin .lbTab{ padding:4px 10px; font-size:9px; }
  .bigCards{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
  .bigCard{ display:flex; flex-direction:column; gap:4px; padding:12px 14px; border-radius:8px; border:1px solid var(--line); min-width:0;
    background:linear-gradient(135deg, rgba(var(--c),.14), rgba(var(--c),.03) 60%); }
  .bigCard.buy{ --c:var(--buy-rgb, 61,255,122); border-color:rgba(var(--buy-rgb, 61,255,122),.35); }
  .bigCard.sell{ --c:var(--sell-rgb, 255,71,87); border-color:rgba(var(--sell-rgb, 255,71,87),.35); }
  .bigKind{ font:9px 'Press Start 2P', monospace; letter-spacing:.04em; }
  .bigCard.buy .bigKind, .bigCard.buy .bigUsd{ color:var(--buy); } .bigCard.sell .bigKind, .bigCard.sell .bigUsd{ color:var(--sell); }
  .bigUsd{ font:clamp(18px, 2.6vw, 28px)/1.1 'Press Start 2P', monospace; text-shadow:0 0 16px rgba(var(--c),.35); }
  .bigWho{ font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .bigWho .bigGen{ font-weight:700; color:var(--ink); }
  @media (max-width:480px){ .bigCards{ gap:8px; } .bigCard{ padding:10px; } .bigKind{ font-size:7px; } .bigWho{ font-size:11px; } }

  /* ---- YESTERDAY'S SCORE unfolds ---- */
  .paper{ position:relative; }
  .paper.unfolding{ transform-origin:50% 0; animation:paperUnfold .95s cubic-bezier(.2,.8,.25,1) both; }
  .paper.unfolding::after{ content:""; position:absolute; inset:0; pointer-events:none; animation:paperCrease 1.4s ease-out both;
    background:linear-gradient(180deg, transparent 32.6%, rgba(60,45,20,.22) 33.3%, rgba(255,255,255,.35) 33.9%, transparent 34.6%,
                                        transparent 65.9%, rgba(60,45,20,.22) 66.6%, rgba(255,255,255,.35) 67.2%, transparent 67.9%); }
  .paper.folding{ transform-origin:50% 0; animation:paperFold .38s ease-in both; }
  @keyframes paperUnfold{ 0%{ transform:perspective(1400px) rotateX(-86deg); opacity:.15; clip-path:inset(0 0 66% 0); }
    40%{ opacity:1; clip-path:inset(0 0 33% 0); } 75%{ clip-path:inset(0 0 0 0); } 100%{ transform:none; clip-path:inset(0 0 0 0); } }
  @keyframes paperCrease{ 0%,40%{ opacity:1; } 100%{ opacity:0; } }
  @keyframes paperFold{ to{ transform:perspective(1400px) rotateX(-86deg); opacity:0; clip-path:inset(0 0 66% 0); } }

  /* ---- the wallet copy stamp ---- */
  .walletBtn{ position:relative; }
  .copyStamp{ position:absolute; left:50%; top:50%; z-index:3; padding:4px 9px 3px; border:2px solid #ff4d6d; border-radius:3px; color:#ff4d6d;
    background:rgba(10,8,14,.55); font:10px 'Press Start 2P', monospace; letter-spacing:.12em; pointer-events:none; white-space:nowrap;
    box-shadow:inset 0 0 0 1px rgba(255,77,109,.35); transform:translate(-50%,-50%) rotate(-9deg); animation:copyStamp 1.45s ease forwards; }
  @keyframes copyStamp{ 0%{ opacity:0; transform:translate(-50%,-50%) rotate(-9deg) scale(2.3); } 14%{ opacity:1; transform:translate(-50%,-50%) rotate(-9deg) scale(.94); }
    22%{ transform:translate(-50%,-50%) rotate(-9deg) scale(1); } 78%{ opacity:1; } 100%{ opacity:0; transform:translate(-50%,-50%) rotate(-9deg) scale(1); } }

  /* ---- MEMES: the first cascade ---- */
  .memeCard.cascade{ animation:memeUp .45s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes memeUp{ from{ opacity:0; transform:translateY(16px) scale(.95); } to{ opacity:1; transform:none; } }

  /* ---- loaders: the running cat and the matrix fill ---- */
  #tabContent{ position:relative; }
  .runCat{ position:absolute; left:24px; right:24px; top:-30px; height:30px; pointer-events:none; z-index:6; --p:0; transition:opacity .5s .15s; }
  .runCat .rcTrack{ position:absolute; left:0; right:0; bottom:3px; height:2px; background:rgba(var(--rh-lime-rgb),.14); }
  .runCat .rcTrail{ position:absolute; left:0; bottom:3px; height:2px; width:calc(var(--p) * 100%); background:linear-gradient(90deg, transparent, var(--rh-lime));
    box-shadow:0 0 8px rgba(var(--rh-lime-rgb),.7); transition:width .4s ease; }
  .runCat .rcCat{ position:absolute; bottom:2px; left:calc(var(--p) * 100% - 18px); height:30px; width:auto; transition:left .4s ease;
    filter:drop-shadow(0 0 4px rgba(var(--rh-lime-rgb),.45)); }
  .runCat.done{ opacity:0; }
  @media (max-width:700px){ .runCat{ left:14px; right:14px; } }
  .mxFill{ position:absolute; inset:0; width:100%; height:100%; z-index:4; pointer-events:none; }

  /* ---- LEAVE ME A NOTE: folds into an envelope ---- */
  .noteCard.folding{ animation:sheetFold .45s cubic-bezier(.55,0,.75,.4) forwards; transform-origin:50% 45%; }
  .noteCard.freshSheet{ animation:sheetIn .65s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes sheetFold{ 0%{ transform:none; } 45%{ transform:perspective(1200px) rotateX(38deg) scale(.82, .55); opacity:1; } 100%{ transform:scale(.22, .1); opacity:0; } }
  @keyframes sheetIn{ from{ transform:translateY(46px) rotate(-1.2deg); opacity:0; } to{ transform:none; opacity:1; } }
  .noteEnvelope{ position:fixed; z-index:400; width:150px; height:96px; margin:-48px 0 0 -75px; border-radius:4px; pointer-events:none;
    background:linear-gradient(160deg, #f6efdc, #e6dbbf); box-shadow:0 10px 24px rgba(0,0,0,.45), inset 0 0 0 1px rgba(90,70,30,.25);
    animation:envFly 1.3s cubic-bezier(.45,0,.55,1) forwards; }
  .noteEnvelope::before{ content:""; position:absolute; inset:0; border-radius:inherit; background:#ece2c8; clip-path:polygon(0 100%, 50% 42%, 100% 100%); }
  .noteEnvelope .envFlap{ position:absolute; left:0; right:0; top:0; height:62%; background:linear-gradient(180deg, #e2d5b5, #d8c9a5); clip-path:polygon(0 0, 100% 0, 50% 100%); }
  .noteEnvelope .envSeal{ position:absolute; left:50%; top:62%; width:20px; height:20px; margin:-10px 0 0 -10px; border-radius:50%;
    background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.5), transparent 45%), var(--rh-lime); box-shadow:0 1px 3px rgba(0,0,0,.35); }
  @keyframes envFly{ 0%{ transform:scale(.3); opacity:0; } 18%{ transform:scale(1.04) rotate(-3deg); opacity:1; } 28%{ transform:scale(1) rotate(-3deg); }
    48%{ transform:scale(1) rotate(-3deg); } 100%{ transform:translate(62vw, -58vh) scale(.32) rotate(20deg); opacity:0; } }

  /* ---- the note paw: fills as notes arrive ---- */
  .noteStamp.notePaw{ width:66px; height:auto; padding:0; background:none; border:none; outline:none; box-shadow:none; transform:rotate(8deg);
    display:flex; flex-direction:column; align-items:center; gap:2px; color:var(--ink); }
  .notePaw svg{ width:62px; height:62px; overflow:visible; filter:drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
  .notePaw .pawBack{ fill:currentColor; opacity:.07; }
  .notePaw .pawLine{ fill:none; stroke:currentColor; stroke-width:2; opacity:.85; }
  .notePaw .pawWave{ fill:url(#pawGrad); animation:pawWave 2.6s linear infinite; }
  .notePaw .pg0{ stop-color:color-mix(in srgb, var(--rh-lime) 45%, #0b0d16); }
  .notePaw .pg1{ stop-color:var(--rh-lime); }
  .notePaw .pg2{ stop-color:color-mix(in srgb, var(--rh-lime) 55%, #ffffff); }
  @keyframes pawWave{ to{ transform:translateX(-32px); } }
  html[data-reduce-motion="true"] .notePaw .pawWave{ animation:none; }
  .notePaw .pawCount{ font:7px 'Press Start 2P', monospace; font-style:normal; letter-spacing:0; color:inherit; opacity:.75; white-space:nowrap; }
  .noteForm.posted .notePaw{ animation:pawThump .6s cubic-bezier(.3,1.6,.5,1); }
  @keyframes pawThump{ 0%{ transform:rotate(8deg) scale(1); } 35%{ transform:rotate(-4deg) scale(1.22); } 100%{ transform:rotate(8deg) scale(1); } }
  html:not([data-theme="win98"]):not([data-theme="aero"]) .paperNote .noteStamp.notePaw{ color:var(--ink-p); background:none; border:none; box-shadow:none; }

  /* ---- Settings: theme chips ---- */
  .themeChips{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px; }
  .themeChip{ display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:6px; cursor:pointer; text-align:left;
    border:1px solid var(--line); background:var(--tb); color:var(--ta); font:9px 'Press Start 2P', monospace; letter-spacing:.02em;
    transition:border-color .15s, transform .12s; }
  .themeChip i{ width:14px; height:14px; border-radius:50%; flex:none; background:linear-gradient(135deg, var(--ta) 50%, var(--tc) 50%); box-shadow:0 0 0 1px rgba(255,255,255,.2); }
  .themeChip:hover{ transform:translateY(-1px); border-color:var(--ta); }
  .themeChip.active{ border-color:var(--ta); box-shadow:0 0 0 1px var(--ta), 0 0 12px color-mix(in srgb, var(--ta) 40%, transparent); }
  .themeChip.active::after{ content:"\2713"; margin-left:auto; }

  /* ---- CREATOR: the pet on the left on desktop, above the note on narrower screens (v0.19.3) ---- */

  /* v0.19.2: the NFT placeholders rain (instead of the shimmer) while the cats are fetched */
  .nftGrid .ph{ position:relative; overflow:hidden; }
  .nftGrid .ph:has(.mxFill){ animation:none; }

  /* ---- v0.19.4: the header between phone and wide desktop. Below ~1250px the tabs used to
     wrap under the title with three spacings stacked between the rows (~50px of nothing).
     Now: the tagline folds onto two short lines and the tabs tighten a little, so title and
     tabs share one row down to ~1000px; under that, where they must wrap, the rows sit
     close together. ---- */
  @media (min-width:701px) and (max-width:1260px){
    #titleRow .tag{ max-width:122px; font-size:10px; line-height:1.3; white-space:normal; }
    #navInner{ gap:6px; }
    #navInner .navBtn{ font-size:12px; padding:11px 14px 10px; }
  }
  @media (min-width:701px) and (max-width:1020px){
    header{ row-gap:0; align-items:center; }
    #titleRow{ padding:12px 0 0; }
  }

  /* ---- v0.19.4: the scroll arrow (bottom right) stands out on dark areas: a breathing lime
     glow, a ring that pings outward every few seconds, and a bob that goes the way the arrow
     points (up when it says ▲). Reduced motion: still, glow kept. WIN98 keeps its button. ---- */
  html:not([data-theme="win98"]) #scrollCue .chev{ position:relative; border-color:rgba(var(--rh-lime-rgb),.55);
    background:radial-gradient(circle at 50% 40%, rgba(var(--rh-lime-rgb),.16), var(--surface, #10131f) 70%);
    text-shadow:0 0 8px rgba(var(--rh-lime-rgb),.8);
    animation:cueBobDown 1.6s ease-in-out infinite, cueGlow 2.4s ease-in-out infinite; }
  html:not([data-theme="win98"]) #scrollCue.up .chev{ animation:cueBobUp 1.6s ease-in-out infinite, cueGlow 2.4s ease-in-out infinite; }
  @keyframes cueBobDown{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }
  @keyframes cueBobUp{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
  @keyframes cueGlow{ 0%,100%{ box-shadow:0 0 6px rgba(var(--rh-lime-rgb),.25), 0 4px 12px rgba(0,0,0,.5); }
    50%{ box-shadow:0 0 18px rgba(var(--rh-lime-rgb),.6), 0 0 2px rgba(var(--rh-lime-rgb),.9) inset, 0 4px 12px rgba(0,0,0,.5); } }
  html:not([data-theme="win98"]) #scrollCue .chev:hover{ border-color:var(--rh-lime); }
  html[data-reduce-motion="true"]:not([data-theme="win98"]) #scrollCue .chev{ animation:none; box-shadow:0 0 12px rgba(var(--rh-lime-rgb),.45), 0 4px 12px rgba(0,0,0,.5); }

  /* ---- v0.19.5: tabs that stand out. Inactive tabs get a lime-tinted edge and a raised
     gradient; hover lights them up; the active tab is a solid lime pill with dark text.
     (Class-only selectors on purpose: each theme file's own tab styles still win.) ---- */
  .navBtn{ border-color:rgba(var(--rh-lime-rgb),.24); color:var(--ink);
    background:linear-gradient(180deg, var(--surface-hi, #161a2c), var(--surface, #10131f));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.35);
    transition:border-color .15s, background .15s, transform .12s, box-shadow .2s, color .15s; }
  .navBtn:hover{ border-color:var(--rh-lime); color:var(--rh-lime);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 0 14px rgba(var(--rh-lime-rgb),.35); }
  .navBtn.active{ color:#0b0d16; border-color:var(--rh-lime);
    background:linear-gradient(180deg, color-mix(in srgb, var(--rh-lime) 80%, #ffffff), var(--rh-lime) 70%);
    box-shadow:0 0 18px rgba(var(--rh-lime-rgb),.45), inset 0 -2px 0 rgba(0,0,0,.18); }
  .navBtn.active::after{ color:#0b0d16; opacity:.1; }
  .navBtn.active:hover{ color:#0b0d16; }
  /* the header while the battlefield pushes it off the top: its depth shadow goes with it */
  html.navPushed .hdrDepth{ display:none; }

  /* ==== v0.19.6 ==== */
  /* ---- the scroll arrow: a light runs round its edge (was a ring pinging outward). A
     spinning conic gradient behind an inner fill, clipped to the square: only a 2px rim
     of it shows. ---- */
  html:not([data-theme="win98"]) #scrollCue .chev{ overflow:hidden; isolation:isolate; background:transparent; border-color:transparent; }
  html:not([data-theme="win98"]) #scrollCue .chev::before{ content:""; position:absolute; inset:-60%; z-index:-2; pointer-events:none;
    background:conic-gradient(from 0deg, transparent 0 62%, rgba(var(--rh-lime-rgb),.15) 70%, var(--rh-lime) 88%, #fff 92%, transparent 95%);
    animation:cueOrbit 2.2s linear infinite; }
  html:not([data-theme="win98"]) #scrollCue .chev::after{ content:""; position:absolute; inset:2px; z-index:-1; border-radius:2px; pointer-events:none;
    background:radial-gradient(circle at 50% 40%, rgba(var(--rh-lime-rgb),.16), transparent 70%), var(--surface-solid, #0d1020);
    box-shadow:inset 0 0 0 1px rgba(var(--rh-lime-rgb),.25); }   /* v0.19.7: solid, so the light shows only round the rim */
  @keyframes cueOrbit{ to{ transform:rotate(360deg); } }
  html[data-reduce-motion="true"] #scrollCue .chev::before{ animation:none; background:rgba(var(--rh-lime-rgb),.5); }

  /* ---- the king strutting, the ghost floating and a gold glint sweeping now and then (v0.19.6's
     SEASON RECORDS chips; since v0.22.5 on the 30 DAY TOP BUY / SELL cards) ---- */
  @keyframes bsGlint{ 0%,70%{ left:-50%; } 100%{ left:120%; } }
  @keyframes bsStrut{ 0%,100%{ transform:rotate(-6deg) translateY(0); } 50%{ transform:rotate(6deg) translateY(-2px); } }
  @keyframes bsFloat{ 0%,100%{ transform:translateY(1px) rotate(-3deg); } 50%{ transform:translateY(-3px) rotate(3deg); } }

  /* ---- RIGHT NOW: the numbers sit in slanted blocks (the tabs' shape) that pulse when
     their number changes: a new trade, a new price ---- */
  .nowStats{ gap:8px; margin-top:14px; }
  .nowBlk{ display:inline-flex; transform:skewX(-14deg); border:1px solid var(--line); border-radius:3px; padding:6px 14px;
    background:linear-gradient(180deg, var(--surface-hi, #161a2c), var(--surface, #10131f)); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); --c:var(--rh-lime-rgb); }
  .nowBlk.buy{ --c:var(--buy-rgb, 61,255,122); border-color:rgba(var(--buy-rgb, 61,255,122),.35); }
  .nowBlk.sell{ --c:var(--sell-rgb, 255,71,87); border-color:rgba(var(--sell-rgb, 255,71,87),.35); }
  .nowBlk > i{ display:inline-flex; align-items:baseline; gap:7px; transform:skewX(14deg); font-style:normal; }
  .nowBlk small{ font:8px var(--font-label); letter-spacing:.1em; color:var(--muted); }
  .nowBlk b{ font-size:13px; }
  .nowBlk.buy b{ color:var(--buy); } .nowBlk.sell b{ color:var(--sell); }
  .nowBlk.bump{ animation:nowBump .7s ease-out; }
  @keyframes nowBump{ 0%{ box-shadow:0 0 0 0 rgba(var(--c),.7), inset 0 0 14px rgba(var(--c),.35); border-color:rgba(var(--c),1); }
    100%{ box-shadow:0 0 0 10px rgba(var(--c),0), inset 0 0 0 rgba(var(--c),0); } }
  @media (max-width:520px){ .nowBlk{ padding:5px 10px; } .nowBlk b{ font-size:12px; } }

  /* ---- WAR RECORDS folded: an LED scoreboard (dot-matrix screen, glowing title, a line
     that rolls through the season's records). Opens into the records as before. ---- */
  .lbLed{ display:none; }
  #lbHead.ledBoard{ position:relative; padding:12px 16px; border-radius:8px !important; overflow:hidden;
    background:#050703 !important; border:2px solid #1c2610 !important;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.8), inset 0 0 30px rgba(var(--rh-lime-rgb),.08), 0 6px 18px rgba(0,0,0,.5) !important; }
  #lbHead.ledBoard::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
    background:radial-gradient(circle, rgba(var(--rh-lime-rgb),.07) 0 1px, transparent 1.4px) 0 0 / 4px 4px; }
  #lbHead.ledBoard > *{ position:relative; z-index:1; }   /* v0.19.7: the dot grid sits behind the text, not over it */
  #lbHead.ledBoard #lbDisclose{ flex:1; min-width:0; gap:14px; }
  #lbHead.ledBoard .lbTitle{ color:var(--rh-lime); text-shadow:0 0 6px rgba(var(--rh-lime-rgb),.9), 0 0 18px rgba(var(--rh-lime-rgb),.45); }
  #lbHead.ledBoard .lbChev{ color:var(--rh-lime); }
  #lbHead.ledBoard .lbLed{ display:block; flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-align:right; }
  .lbLedIn{ display:inline-block; font:11px 'Press Start 2P', monospace; color:#ffb020; letter-spacing:.06em;
    text-shadow:0 0 6px rgba(255,176,32,.85), 0 0 16px rgba(255,176,32,.35); transition:transform .26s ease-in, opacity .26s ease-in; }
  .lbLedIn.out{ transform:translateY(-120%); opacity:0; }
  .lbLedIn.in{ animation:ledIn .38s ease-out; }
  @keyframes ledIn{ from{ transform:translateY(120%); opacity:0; } to{ transform:none; opacity:1; } }
  @media (max-width:600px){ #lbHead.ledBoard .lbLed{ text-align:left; } .lbLedIn{ font-size:9px; } #lbHead.ledBoard #lbDisclose{ flex-wrap:wrap; } }

  /* ==== v0.19.7 ==== */
  /* WAR RECORDS board, easier to read: a small amber label over a big, crisp value */
  .lbLedIn{ display:inline-flex; flex-direction:column; align-items:flex-end; gap:5px; font:inherit; color:#ffb020; letter-spacing:0; text-shadow:none; }
  .lbLedIn small{ font:8px 'Press Start 2P', monospace; letter-spacing:.1em; color:rgba(255,176,32,.75); }
  .lbLedIn b{ font:700 16px/1 'JetBrains Mono', monospace; letter-spacing:.02em; color:#ffc44d; text-shadow:0 0 10px rgba(255,176,32,.45); }
  #lbHead.ledBoard .lbTitle{ font-size:14px; }
  @media (max-width:600px){ .lbLedIn{ align-items:flex-start; } .lbLedIn b{ font-size:14px; } }

  /* ==== v0.20.0 ==== */
  /* RIGHT NOW: no bar (the battlefield's own top bar shows the split); the four numbers are
     the focus, as big slanted cards: a small label, a big number, a detail line. They pulse
     when their number changes; LAST TRADE's dot pings with each trade. */
  .homeNow .nowStats{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; margin-top:16px; }
  .homeNow .nowBlk{ display:block; padding:12px 18px 11px; min-width:0; border-width:1px; border-top-width:3px;
    background:linear-gradient(180deg, rgba(var(--c),.10), rgba(var(--c),.02) 60%), var(--surface, #10131f); }
  .homeNow .nowBlk{ border-top-color:rgba(var(--c),.8); }
  .homeNow .nowBlk > i{ display:flex; flex-direction:column; align-items:flex-start; gap:7px; min-width:0; }
  .homeNow .nowBlk small{ display:flex; align-items:center; gap:7px; font-size:8px; }
  .homeNow .nowBlk b{ font:clamp(16px, 2.2vw, 24px)/1 'Press Start 2P', monospace; color:var(--ink); white-space:nowrap; }
  .homeNow .nowBlk.buy b{ color:var(--buy); text-shadow:0 0 14px rgba(var(--c),.35); }
  .homeNow .nowBlk.sell b{ color:var(--sell); text-shadow:0 0 14px rgba(var(--c),.35); }
  .homeNow .nowBlk em{ font-style:normal; font-size:12px; color:var(--muted); min-height:1em; margin:0; white-space:nowrap; }
  .homeNow .nowBlk em.up{ color:var(--buy); } .homeNow .nowBlk em.down{ color:var(--sell); }
  .nowPing{ position:relative; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--rh-lime); text-decoration:none; }
  .nowBlk.last.bump .nowPing::after{ content:""; position:absolute; inset:-1px; border-radius:50%; border:2px solid var(--rh-lime); animation:nowPingRing .9s ease-out; }
  @keyframes nowPingRing{ from{ transform:scale(1); opacity:1; } to{ transform:scale(4); opacity:0; } }
  @media (max-width:700px){ .homeNow .nowStats{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; } .homeNow .nowBlk{ padding:10px 14px 9px; } }

/* ---- v0.22.5: HOME's top trades and RIGHT NOW line up with YESTERDAY'S SCORE ----
   The top-trades box loses its side padding so its cards run edge to edge like the paper; the
   30 DAY TOP BUY / SELL cards (which replaced the SEASON RECORDS chips) match the 24H/7D cards,
   a little shorter, with the king and the ghost at the right; RIGHT NOW's four cards stand up
   straight (no slant) and are a touch smaller, so they line up with the paper's edges too. */
#panel-home .homeBig{ padding:14px 0; }
.big30{ margin-top:10px; }
.big30 .bigCard{ position:relative; padding:10px 14px; overflow:hidden; }
.big30 .bigUsd{ font-size:clamp(15px, 2vw, 22px); }
.big30 .bigCard::after{ content:""; position:absolute; top:0; bottom:0; width:40%; left:-50%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,215,90,.25), transparent); animation:bsGlint 5.5s ease-in-out infinite; }
.big30 .bigCard.sell::after{ animation-delay:2.7s; }
html[data-reduce-motion="true"] .big30 .bigCard::after{ animation:none; }
.homeNow .nowBlk{ transform:none; border-radius:6px; padding:9px 14px 8px; }
.homeNow .nowBlk > i{ transform:none; gap:5px; }
.homeNow .nowBlk b{ font-size:clamp(14px, 1.8vw, 20px); }
.homeNow .nowStats{ gap:10px; margin-top:14px; }
.big30 .bigKind i{ font-style:normal; } .big30 .bigKind .d30s{ display:none; }
@media (max-width:480px){ .big30 .bigKind{ white-space:nowrap; } .big30 .bigKind .d30{ display:none; } .big30 .bigKind .d30s{ display:inline; } }

/* ---- v0.22.6: PET CASHCAT header button; MEMES four across on a phone held upright ---- */
.petTop{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 4px; }
.petTop h2{ margin:0; }
.petSwap{ flex:none; font:8px 'Press Start 2P', monospace; letter-spacing:.04em; padding:6px 8px; border-radius:4px; cursor:pointer;
  color:var(--rh-lime); background:rgba(var(--rh-lime-rgb),.08); border:1px solid rgba(var(--rh-lime-rgb),.4); }
.petSwap:hover, .petSwap:focus-visible{ background:rgba(var(--rh-lime-rgb),.18); }
@media (max-width:560px) and (orientation:portrait){
  .memeGrid{ grid-template-columns:repeat(4, minmax(0, 1fr)); gap:5px; }
  .memeCard{ border-radius:4px; }
  .memeCard span{ padding:3px 4px; font-size:8px; }
  .memeCard .gifTag{ top:3px; left:3px; padding:1px 3px; font-size:7px; }
}

/* ---- v0.23.0 ----
   Top-trade cards open their trade on the explorer; RIGHT NOW's PRICE card has the day's
   price as a thin line along its bottom; the FIELD GUIDE drawer under the battlefield; the
   creator's licence line is small print. */
.bigCard.tap{ cursor:pointer; transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.bigCard.tap .bigKind::after{ content:" \2197"; opacity:.55; }
.bigCard.tap:hover, .bigCard.tap:focus-visible{ transform:translateY(-2px); border-color:rgba(var(--c),.75); box-shadow:0 6px 18px rgba(var(--c),.14); outline:none; }
html[data-reduce-motion="true"] .bigCard.tap:hover{ transform:none; }
.homeNow .nowBlk.price{ position:relative; overflow:hidden; }
.nowSpark{ position:absolute; left:0; right:0; bottom:0; width:100%; height:26px; pointer-events:none; }
.nowSpark .spLine{ fill:none; stroke:var(--buy); stroke-width:1.6; vector-effect:non-scaling-stroke; stroke-linejoin:round; }
.nowSpark .spFill{ fill:rgba(var(--buy-rgb, 61,255,122),.12); stroke:none; }
.nowSpark.down .spLine{ stroke:var(--sell); } .nowSpark.down .spFill{ fill:rgba(var(--sell-rgb, 255,71,87),.12); }
.homeNow .nowBlk.price > i{ position:relative; z-index:1; }
#guideDrawer{ padding:12px 14px 16px; border-top:1px solid var(--line); background:rgba(var(--bg-rgb, 7,8,16),.55); }
#guideDrawer[hidden]{ display:none; }
#guideDrawerBtn.active{ color:var(--ink); border-color:var(--rh-lime); }
.guideGrid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; }
.guideCard{ display:flex; flex-direction:column; gap:5px; padding:9px 11px; border:1px solid var(--line); border-radius:6px; background:rgba(255,255,255,.03); --c:var(--rh-lime-rgb); }
.guideCard.buy{ --c:var(--buy-rgb, 61,255,122); } .guideCard.sell{ --c:var(--sell-rgb, 255,71,87); }
.guideCard b{ font:9px 'Press Start 2P', monospace; color:rgb(var(--c)); letter-spacing:.03em; }
.guideCard span{ font-size:11.5px; line-height:1.5; color:var(--muted); }
.guideTable{ width:100%; margin-top:12px; border-collapse:collapse; font-size:12px; }
.guideTable caption{ text-align:left; font:9px var(--font-label); letter-spacing:.12em; color:var(--muted); padding:0 0 6px; }
.guideTable th{ text-align:left; font:8px var(--font-label); letter-spacing:.1em; color:var(--muted); padding:4px 8px; border-bottom:1px solid var(--line); }
.guideTable td{ padding:6px 8px; border-bottom:1px solid rgba(255,255,255,.05); color:var(--ink); line-height:1.45; vertical-align:top; }
.guideTable td:first-child{ white-space:nowrap; color:var(--buy); font-weight:700; width:1%; }
.guideTable tr.gChamp td{ color:#ffd34d; }
#guideDrawer .drawerNote{ margin:10px 0 0; font:10.5px/1.5 'JetBrains Mono', monospace; color:var(--muted); opacity:.85; }
@media (max-width:700px){ .guideGrid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.creatorNote.licenseNote{ font-size:9px; line-height:1.5; opacity:.8; }

/* ---- v0.23.1: phones held upright: the battlefield a bit shorter (80% of the screen under the
   stuck tab bar, at least 440px; was 93% and 500px), so the page under it peeks up. The stars
   behind the page are dimmer and the green/red pressure glow is about half as strong (site.js). */
@media (max-width:500px) and (orientation:portrait){
  #battlefieldFrame{ height:max(440px, calc((100vh - var(--stuckH, 56px)) * .8)); height:max(440px, calc((100svh - var(--stuckH, 56px)) * .8)); }
}

  /* ==================================================================
     v0.24.0: THE TAB DOCK (assets/dock.js). When the tab row scrolls away, the tabs fly into one
     round button (the CASHCAT head, bottom-right) that fans them out as a column of slanted
     buttons. html.dockOn = the dock is in use here (setting, theme, screen); html.dockOut = the
     tabs are in the button right now; html.dockOpen = the column is open.
     TERMINAL's version is in themes/terminal.css. WIN98 / AERO don't use it (their taskbar).
     ================================================================== */
  .pxi{ display:block; width:16px; height:16px; background:currentColor; -webkit-mask:var(--m) center/contain no-repeat; mask:var(--m) center/contain no-repeat; }
  #tabDock, #dockMenu, #dockScrim{ display:none; }
  html.dockOn #tabDock, html.dockOn #dockMenu, html.dockOn #dockScrim{ display:flex; }
  /* phones: the stuck header (only the tab row shows) slides up out of the way */
  /* v0.28.0: on every screen (desktop too) the whole stuck header slides up out of the way */
  html.dockOn header.refract{ transition:transform .32s cubic-bezier(.2,.8,.2,1) !important; }
  html.dockOn.dockOut header.refract{ transform:translateY(-100%) !important; pointer-events:none; }
  /* v0.26.0: the up/down arrow rides in the dock, left of the pill (dock.js moves it in) */
  #tabDock #scrollCue{ position:static; display:block; flex:none; } #tabDock #scrollCue:not(.visible){ display:none; }
  html.dockOn.dockOut .navHint{ display:none !important; }

  .dockGhost{ position:fixed !important; z-index:61; margin:0 !important; pointer-events:none; animation:none !important;
    transition:transform .5s cubic-bezier(.55,0,.75,.2), opacity .5s ease-in; }

  #dockScrim{ position:fixed; inset:0; z-index:85; opacity:0; pointer-events:none; transition:opacity .25s;
    background:repeating-linear-gradient(rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
      radial-gradient(120% 80% at 100% 100%, rgba(var(--rh-lime-rgb),.10), rgba(4,5,10,.72) 60%);
    -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
  html.dockOpen #dockScrim{ opacity:1; pointer-events:auto; }

  #tabDock{ position:fixed; right:14px; bottom:calc(18px + env(safe-area-inset-bottom, 0px)); z-index:59;
    flex-direction:row-reverse; align-items:center; gap:10px;
    transform:scale(0); opacity:0; transform-origin:100% 100%; pointer-events:none;
    transition:transform .38s cubic-bezier(.3,1.6,.5,1), opacity .2s; }
  html.dockOut #tabDock{ transform:none; opacity:1; pointer-events:auto; }
  html.dockOut #tabDock.late{ transform:scale(0); opacity:0; }        /* waits for the flying tabs */
  html.dockOut #tabDock.peek{ transform:scale(.8) translateY(8px); opacity:.8; }
  html.dockOpen:not(.dockTop) #tabDock{ z-index:87; transform:none; opacity:1; }   /* v0.28.1: not when MENU opened it at the top */

  .dockOrb{ position:relative; width:58px; height:58px; border-radius:50%; border:0; padding:0; cursor:pointer; touch-action:none; color:var(--ink);
    background:radial-gradient(circle at 50% 35%, #1a2036, #070810 75%);
    box-shadow:0 0 0 2px rgba(var(--rh-lime-rgb),.8), 0 0 0 4px #070810, 0 0 20px rgba(var(--rh-lime-rgb),.45), 0 8px 18px rgba(0,0,0,.6);
    transition:transform .15s, filter .15s; -webkit-tap-highlight-color:transparent; }
  .dockOrb:hover{ filter:brightness(1.15); } .dockOrb:active{ transform:scale(.93); }
  .dockOrb:focus-visible{ outline:2px solid var(--rh-lime); outline-offset:5px; }
  .dockOrb::before{ content:''; position:absolute; left:20%; right:20%; top:6%; height:32%; border-radius:50%; z-index:2; pointer-events:none;
    background:linear-gradient(rgba(255,255,255,.35), transparent); }
  .dockOrb .face{ position:absolute; inset:6px; border-radius:50%; background:url(../sprites/facd1cbf3cd7.png) center 42%/122% no-repeat;
    transition:transform .3s cubic-bezier(.3,1.6,.5,1), opacity .2s; }
  .dockOrb .x{ position:absolute; inset:0; margin:auto; width:22px; height:22px; color:var(--rh-lime); opacity:0;
    transform:scale(.4) rotate(-90deg); transition:transform .3s cubic-bezier(.3,1.6,.5,1), opacity .2s; }
  .dockOrb .x .pxi{ width:22px; height:22px; }
  html.dockOpen .dockOrb .face{ opacity:0; transform:scale(.4) rotate(90deg); }
  html.dockOpen .dockOrb .x{ opacity:1; transform:none; }
  .dockOrb .prompt, .dockPill .pre{ display:none; }
  .dockOrb .badge{ position:absolute; top:-4px; right:-4px; z-index:3; min-width:18px; height:16px; padding:0 4px;
    background:var(--sell); color:#fff; font:8px/16px var(--font-label); text-align:center; box-shadow:0 0 0 2px #070810; }
  .dockOrb .badge[hidden]{ display:none; }

  .dockPill{ height:32px; padding:0 14px; display:flex; align-items:center; cursor:pointer; color:var(--ink);
    font:10px var(--font-label); letter-spacing:.06em; transform:skewX(-12deg); border-radius:3px;
    background:rgba(9,11,20,.82); border:1px solid rgba(var(--rh-lime-rgb),.45); box-shadow:0 6px 16px rgba(0,0,0,.45);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
  .dockPill .in{ display:flex; align-items:center; gap:7px; transform:skewX(12deg); }
  .dockPill .pxi{ color:var(--rh-lime); width:14px; height:14px; }
  .dockPill .car{ width:10px; height:10px; opacity:.7; transition:transform .3s; }
  html.dockOpen .dockPill .car{ transform:rotate(180deg); }

  #dockMenu{ position:fixed; right:18px; bottom:calc(94px + env(safe-area-inset-bottom, 0px)); z-index:86;
    width:min(268px, calc(100vw - 40px)); max-height:calc(100vh - 120px); flex-direction:column; align-items:flex-end; gap:8px; pointer-events:none; }
  html.dockOpen #dockMenu{ pointer-events:auto; }
  .dItem{ position:relative; overflow:hidden; width:88%; margin-right:calc(var(--i) * 4px); padding:8px 14px; cursor:pointer; text-align:left;
    color:var(--ink); font:700 12px 'JetBrains Mono', monospace; letter-spacing:.08em;
    background:rgba(12,15,26,.9); border:1px solid var(--line); border-radius:3px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 6px 16px rgba(0,0,0,.45);
    opacity:0; transform:skewX(-16deg) translateX(40px);
    transition:transform .38s cubic-bezier(.2,.8,.3,1.25), opacity .2s, border-color .15s; transition-delay:var(--d, 0ms); }
  html.dockOpen .dItem{ opacity:1; transform:skewX(-16deg); }
  html.dockOpen .dItem:hover, html.dockOpen .dItem:focus-visible{ outline:none; border-color:rgba(var(--rh-lime-rgb),.65); transform:skewX(-16deg) translateX(-6px); transition-delay:0ms; }
  .dItem::before{ content:''; position:absolute; top:0; bottom:0; left:-60%; width:45%; pointer-events:none;
    background:linear-gradient(90deg, transparent, rgba(var(--buy-rgb),.28), transparent); }
  .dItem:hover::before, .dItem:focus-visible::before{ animation:dockSweep .7s; }
  @keyframes dockSweep{ to{ left:120%; } }
  .dItem .in{ display:flex; align-items:center; gap:12px; transform:skewX(16deg); }
  .dItem .ic{ flex:none; width:28px; height:28px; display:grid; place-items:center; color:var(--rh-lime);
    background:rgba(var(--rh-lime-rgb),.07); border:1px solid rgba(var(--rh-lime-rgb),.25); border-radius:2px; }
  .dItem .meta{ margin-left:auto; font:8px var(--font-label); letter-spacing:.04em; color:var(--muted); white-space:nowrap; text-transform:uppercase; }
  .dItem.on{ border-color:var(--rh-lime); box-shadow:inset 0 -2px 0 var(--rh-lime), 0 6px 16px rgba(0,0,0,.45); }
  .dItem.on .nm{ color:var(--rh-lime); }
  .dItem .nb{ background:var(--sell); color:#fff; padding:2px 5px; }
  .dUtil{ display:flex; gap:8px; width:88%; margin-right:calc(var(--i) * 4px); }
  .dUtil .dItem{ width:auto; flex:1; margin:0; padding:8px; font-size:10px; }
  .dUtil .dItem .in{ justify-content:center; gap:8px; }
  .dUtil .ic{ width:22px; height:22px; } .dUtil .pxi{ width:13px; height:13px; }


  html[data-reduce-motion="true"] #tabDock, html[data-reduce-motion="true"] .dItem, html[data-reduce-motion="true"] .dockOrb .face,
  html[data-reduce-motion="true"] .dockOrb .x, html[data-reduce-motion="true"].dockOn header.refract{ transition-duration:.01ms !important; }
  html[data-reduce-transparency="true"] #dockScrim{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(4,5,10,.82); }

  /* ==================================================================
     v0.25.0: HEADER. "CASHCAT Live Battlefield", the music switch as a radio, Settings as a
     tab at the front of the tab row, and Settings as a drawer (a bottom sheet on phones).
     The title-row cog and the stuck row's sliding cog are retired (WIN98 / AERO keep theirs).
     ================================================================== */
  #titleRow h1{ display:inline-flex; align-items:baseline; gap:.55em; flex-wrap:nowrap; white-space:nowrap; }
  #titleRow h1 .h1Live{ display:inline-flex; align-items:center; gap:6px; font-size:.56em; letter-spacing:.06em; color:var(--muted); transform:translateY(-.15em); }
  .liveDot{ width:7px; height:7px; flex:none; background:#5b6275; box-shadow:0 0 0 2px rgba(0,0,0,.35); }
  html[data-feed="live"] .liveDot{ background:#ff3b4f; box-shadow:0 0 8px rgba(255,59,79,.85); animation:liveDot 1.6s steps(2) infinite; }
  html[data-feed="live"] #titleRow h1 .h1Live{ color:var(--ink); }
  @keyframes liveDot{ 50%{ opacity:.35; } }
  html[data-reduce-motion="true"] .liveDot{ animation:none !important; }

  /* the radio */
  .hdrMusic.hdrRadio{ height:32px; width:48px; padding:0; border:0; border-radius:4px; background:none; box-shadow:none; justify-content:center; color:var(--muted); }
  .hdrRadio .radioSvg{ width:44px; height:30px; fill:none; overflow:visible; }
  .hdrRadio .rBody{ fill:var(--surface, #10131f); stroke:currentColor; stroke-width:1.4; }
  .hdrRadio .rHandle, .hdrRadio .rAnt{ fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; }
  .hdrRadio .rAntTip, .hdrRadio .rKnob{ fill:currentColor; }
  .hdrRadio .rSpk{ fill:#070810; stroke:currentColor; stroke-width:1.2; }
  .hdrRadio .rSpkIn{ fill:currentColor; opacity:.55; transform-origin:12px 19.5px; transform-box:view-box; }
  .hdrRadio .rScreen{ fill:#05140a; stroke:currentColor; stroke-width:.8; opacity:.95; }
  .hdrRadio .rPlay{ fill:var(--rh-lime); }
  .hdrRadio .rBars rect{ fill:var(--rh-lime); transform-origin:center bottom; transform-box:fill-box; display:none; }
  .hdrRadio .rWave{ fill:none; stroke:var(--rh-lime); stroke-width:1.3; stroke-linecap:round; opacity:0; }
  .hdrMusic.hdrRadio:hover, .hdrMusic.hdrRadio:focus-visible{ color:var(--ink); border:0; box-shadow:none; }
  .hdrMusic.hdrRadio:focus-visible{ outline:2px solid var(--rh-lime); outline-offset:2px; }
  .hdrMusic.hdrRadio.on{ color:var(--rh-lime); border:0; box-shadow:none; filter:drop-shadow(0 0 6px rgba(var(--rh-lime-rgb),.35)); }
  .hdrRadio.on .rPlay{ display:none; } .hdrRadio.on .rBars rect{ display:block; animation:rBar .9s ease-in-out infinite; }
  .hdrRadio.on .rBars rect:nth-child(2){ animation-delay:-.3s; } .hdrRadio.on .rBars rect:nth-child(3){ animation-delay:-.6s; } .hdrRadio.on .rBars rect:nth-child(4){ animation-delay:-.15s; }
  .hdrRadio.on .rWave{ animation:rWave 1.6s ease-out infinite; } .hdrRadio.on .rWave.w2{ animation-delay:.3s; }
  .hdrRadio.on .rSpkIn{ animation:rSpk .45s ease-in-out infinite alternate; }
  @keyframes rBar{ 0%,100%{ transform:scaleY(.3); } 50%{ transform:scaleY(1); } }
  @keyframes rWave{ 0%{ opacity:0; } 30%{ opacity:1; } 100%{ opacity:0; } }
  @keyframes rSpk{ to{ transform:scale(1.35); } }
  html[data-reduce-motion="true"] .hdrRadio.on .rBars rect, html[data-reduce-motion="true"] .hdrRadio.on .rWave, html[data-reduce-motion="true"] .hdrRadio.on .rSpkIn{ animation:none; opacity:1; }
  .hdrRadio .hmEq, .hdrRadio .hmPlay, .hdrRadio .hmPause{ display:none !important; }

  /* Settings: a tab at the front of the row; the old cogs step aside */
  .navBtn.navSet{ cursor:pointer; padding-left:12px; padding-right:12px; font:inherit; }
  .navBtn.navSet .label{ display:inline-flex; }
  .navBtn.navSet svg{ width:17px; height:17px; display:block; color:var(--rh-lime); transition:transform .45s ease; }
  .navBtn.navSet:hover svg, .navBtn.navSet.active svg{ transform:rotate(60deg); }
  .navCog, #customizerToggle{ display:none !important; }      /* WIN98 / AERO bring #customizerToggle back (their theme files) */

  /* the drawer: the right side on wider screens, a sheet from the bottom on phones */
  #setScrim{ position:fixed; inset:0; z-index:69; background:rgba(4,5,10,.55); opacity:0; pointer-events:none; transition:opacity .25s;
    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
  html.setOpen #setScrim{ opacity:1; pointer-events:auto; }
  #customizerPanel.drawer{ position:fixed; z-index:70; left:auto !important; right:0; top:0 !important; bottom:0; width:min(380px, 100vw) !important;
    max-height:none !important; border-radius:14px 0 0 14px; box-shadow:-18px 0 40px rgba(0,0,0,.5); animation:setSide .32s cubic-bezier(.2,.8,.2,1);
    overscroll-behavior:contain; }
  @keyframes setSide{ from{ transform:translateX(100%); } }
  @media (max-width:700px){
    #customizerPanel.drawer{ left:0 !important; right:0; top:auto !important; bottom:0; width:100% !important; max-height:86vh !important; max-height:86svh !important;
      border-radius:16px 16px 0 0; box-shadow:0 -18px 40px rgba(0,0,0,.55); animation:setUp .32s cubic-bezier(.2,.8,.2,1);
      padding-bottom:env(safe-area-inset-bottom, 0px); touch-action:pan-y; }
    #customizerPanel.drawer .custHead{ padding-top:22px; cursor:grab; touch-action:none; }
    #customizerPanel.drawer .custHead::before{ content:''; position:absolute; top:8px; left:50%; width:40px; height:4px; margin-left:-20px; border-radius:2px; background:rgba(255,255,255,.28); }
  }
  @keyframes setUp{ from{ transform:translateY(100%); } }
  html[data-reduce-motion="true"] #customizerPanel.drawer{ animation:none; }
  html[data-reduce-motion="true"] #setScrim{ transition:none; }

  /* the tab dock: hold the button and a ring fills, then it jumps to the battlefield */
  .dockOrb::after{ content:''; position:absolute; inset:-5px; border-radius:50%; pointer-events:none; opacity:0;
    background:conic-gradient(var(--rh-lime) var(--hold, 0%), transparent 0); -webkit-mask:radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); mask:radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); }
  .dockOrb.holding::after{ opacity:1; animation:dockHold .55s linear forwards; }
  @property --hold{ syntax:'<percentage>'; inherits:false; initial-value:0%; }
  @keyframes dockHold{ to{ --hold:100%; } }
  /* the longer title + the Settings tab: the chain tag only shows where the row has room */
  @media (min-width:701px) and (max-width:1499px){ #titleRow .tag{ display:none; } }
  @media (min-width:701px){ .navBtn.navSet{ padding-left:10px; padding-right:10px; } }
  @media (min-width:701px) and (max-width:1279px){
    #titleRow h1{ flex-direction:column; align-items:flex-start; gap:5px; }
    #titleRow h1 .h1Live{ font-size:.5em; transform:none; }
  }

  /* ==================================================================
     v0.26.0: "CASHCAT.party LIVE BATTLEFIELD" (the square is gone; LIVE itself goes red while
     the feed is live), the Robinhood logo before it (title height, opens TOKEN), and the
     Now playing card as a pixel disc player.
     ================================================================== */
  #titleRow h1{ align-items:baseline; }
  #titleRow h1 .h1Dot{ font-size:.56em; letter-spacing:.04em; color:var(--rh-lime); margin-left:.05em; }
  #titleRow h1 .h1Live{ gap:0; }
  #titleRow h1 .h1On{ font-weight:inherit; color:inherit; margin-right:.6em; transition:color .3s, text-shadow .3s; }
  html[data-feed="live"] #titleRow h1 .h1On{ color:#ff3b4f; text-shadow:0 0 8px rgba(255,59,79,.7); animation:h1Live 2.4s steps(2) infinite; }
  @keyframes h1Live{ 50%{ opacity:.55; } }
  html[data-reduce-motion="true"] #titleRow h1 .h1On{ animation:none; }
  .liveDot{ display:none; }
  .rhLogo{ display:inline-flex; align-self:center; margin-right:.45em; line-height:0; border-radius:3px; transition:transform .15s, filter .15s; }
  .rhLogo[hidden]{ display:none; }
  .rhLogo img{ height:1em; width:auto; display:block; }
  .rhLogo:hover, .rhLogo:focus-visible{ transform:translateY(-1px); filter:drop-shadow(0 0 6px rgba(var(--rh-lime-rgb),.55)); outline:none; }
  @media (min-width:701px) and (max-width:1279px){ #titleRow h1 .h1Dot{ font-size:.5em; } }

  /* the disc player */
  .setMusicCard .deck{ position:relative; margin:2px 0 10px; padding:10px 10px 8px; border-radius:6px;
    background:linear-gradient(#262b38, #161a24 60%, #11141c); border:2px solid #05060a;
    box-shadow:inset 0 2px 0 rgba(255,255,255,.12), inset 0 -3px 0 rgba(0,0,0,.45), 0 6px 14px rgba(0,0,0,.45); }
  .setMusicCard .deck::before{ content:'CASHCAT DISCMAN'; position:absolute; right:10px; bottom:-15px; font:7px var(--font-label); letter-spacing:.12em; color:var(--muted); opacity:.7; }
  .deckTop{ display:flex; gap:10px; align-items:stretch; }
  .deckWell{ flex:none; width:92px; height:92px; display:grid; place-items:center; border-radius:50%;
    background:radial-gradient(circle, #0b0d13 60%, #1d2230 61% 66%, #0b0d13 67%); box-shadow:inset 0 3px 8px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.08); }
  .deck .spDisc{ width:80px; height:80px; border-radius:0; background:none; box-shadow:none; animation:none !important; display:block; }
  .deck .spDisc canvas{ width:80px; height:80px; display:block; image-rendering:pixelated; filter:drop-shadow(0 3px 4px rgba(0,0,0,.6)); }
  .deckLcd{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:space-between; padding:7px 8px; border-radius:4px;
    background:repeating-linear-gradient(rgba(0,0,0,.18) 0 1px, transparent 1px 3px), radial-gradient(120% 120% at 30% 20%, #17301f, #07140c);
    border:2px solid #04070a; box-shadow:inset 0 0 12px rgba(0,0,0,.7); color:var(--rh-lime); }
  .deck .spTrack{ border:0; background:none; padding:0; color:var(--rh-lime); gap:4px; }
  .deck .spTrack b{ font:10px 'Press Start 2P', monospace; letter-spacing:.04em; text-shadow:0 0 6px rgba(var(--rh-lime-rgb),.55); }
  .deck .spTrack b::before{ content:'\266A '; }
  .deck .spTrack small{ font:8px var(--font-label); color:rgba(var(--rh-lime-rgb),.65); text-transform:uppercase; letter-spacing:.08em; }
  .deck .spTrack:hover b, .deck .spTrack:focus-visible b{ color:#fff; }
  .lcdRow{ display:flex; align-items:flex-end; justify-content:space-between; gap:6px; }
  .lcdTrk{ font:8px var(--font-label); letter-spacing:.08em; color:rgba(var(--rh-lime-rgb),.75); }
  .lcdEq{ display:flex; align-items:flex-end; gap:2px; height:16px; }
  .lcdEq i{ width:3px; height:3px; background:var(--rh-lime); box-shadow:0 0 4px rgba(var(--rh-lime-rgb),.6); }
  .deck.on .lcdEq i{ animation:lcdEq .8s steps(4) infinite; }
  .deck.on .lcdEq i:nth-child(2n){ animation-duration:.6s; } .deck.on .lcdEq i:nth-child(3n){ animation-delay:-.3s; } .deck.on .lcdEq i:nth-child(4n+1){ animation-duration:1s; }
  @keyframes lcdEq{ 0%{ height:3px; } 33%{ height:14px; } 66%{ height:7px; } 100%{ height:11px; } }
  html[data-reduce-motion="true"] .deck.on .lcdEq i{ animation:none; height:9px; }
  .deck .setPlayer{ justify-content:center; gap:8px; margin:10px 0 8px; }
  .deck .spBtn{ width:46px; height:30px; border-radius:4px; border:2px solid #05060a; color:#d7dce8;
    background:linear-gradient(#3a4152, #262b38); box-shadow:inset 0 2px 0 rgba(255,255,255,.18), inset 0 -3px 0 rgba(0,0,0,.4), 0 2px 0 #05060a; }
  .deck .spBtn:hover, .deck .spBtn:focus-visible{ color:var(--rh-lime); border-color:#05060a; }
  .deck .spBtn:active{ transform:translateY(2px); box-shadow:inset 0 2px 4px rgba(0,0,0,.5); }
  .deck .spBtn.spMain{ width:58px; background:linear-gradient(rgba(var(--rh-lime-rgb),1), rgba(var(--rh-lime-rgb),.7)); color:#0b0d16; }
  .deck .spBtn.spMain:hover{ color:#0b0d16; }
  .deck .spBtn i{ transform:translate(-50%, -50%) scale(1); }
  .deck .spVol{ margin:0; gap:10px; }
  .deck .spVol label{ font:8px var(--font-label); letter-spacing:.1em; color:var(--muted); }
  .deck .spVol input[type="range"]{ -webkit-appearance:none; appearance:none; height:12px; border-radius:2px; background:
      repeating-linear-gradient(90deg, transparent 0 6px, #11141c 6px 8px),
      linear-gradient(90deg, var(--rh-lime) 0 var(--volp, 50%), #2a3040 var(--volp, 50%)); }
  .deck .spVol input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; width:10px; height:18px; border-radius:2px; background:#e8ecf4; border:2px solid #05060a; cursor:pointer; }
  .deck .spVol input[type="range"]::-moz-range-thumb{ width:8px; height:16px; border-radius:2px; background:#e8ecf4; border:2px solid #05060a; cursor:pointer; }
  .setMusicCard #trackPills{ margin-top:14px; }
  /* the logo, CASHCAT and .party stay together; LIVE BATTLEFIELD follows on the same line on wide
     screens and sits under them on mid-size screens and phones (so the radio keeps its place) */
  #titleRow h1{ gap:.6em; }
  #titleRow h1 .h1Main{ display:inline-flex; align-items:baseline; }
  #titleRow h1 .h1Dot{ margin-left:.08em; }
  @media (max-width:1279px){
    #titleRow h1{ flex-direction:column; align-items:flex-start; gap:6px; }
    #titleRow h1 .h1Live{ font-size:.5em; transform:none; }
  }

  /* v0.26.1: Settings → Theme. Every theme is outlined in its own colour; the picked one moves:
     its glow breathes, a light sweeps across it and its colour dot turns. */
  .themeChip{ position:relative; overflow:hidden; border:1px solid color-mix(in srgb, var(--ta) 70%, transparent);
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ta) 12%, transparent); }
  .themeChip:hover, .themeChip:focus-visible{ border-color:var(--ta); outline:none; box-shadow:0 0 8px color-mix(in srgb, var(--ta) 35%, transparent); }
  .themeChip.active{ border:2px solid var(--ta); padding:6px 8px; animation:chipGlow 1.8s ease-in-out infinite; }
  .themeChip.active::before{ content:''; position:absolute; top:0; bottom:0; left:-60%; width:45%; pointer-events:none;
    background:linear-gradient(100deg, transparent, color-mix(in srgb, var(--ta) 45%, transparent), transparent); animation:chipSweep 2.4s ease-in-out infinite; }
  .themeChip.active i{ animation:chipDot 3s linear infinite; }
  @keyframes chipGlow{
    0%, 100%{ box-shadow:0 0 0 1px var(--ta), 0 0 6px color-mix(in srgb, var(--ta) 30%, transparent); }
    50%{ box-shadow:0 0 0 1px var(--ta), 0 0 16px color-mix(in srgb, var(--ta) 65%, transparent); }
  }
  @keyframes chipSweep{ 0%{ left:-60%; } 55%, 100%{ left:130%; } }
  @keyframes chipDot{ to{ transform:rotate(360deg); } }
  html[data-reduce-motion="true"] .themeChip.active, html[data-reduce-motion="true"] .themeChip.active i,
  html[data-reduce-motion="true"] .themeChip.active::before{ animation:none; }
  html[data-reduce-motion="true"] .themeChip.active{ box-shadow:0 0 0 1px var(--ta), 0 0 12px color-mix(in srgb, var(--ta) 45%, transparent); }

  /* v0.26.2: the dock as one piece. The HOME pill tucks under the cat button (the button's dark
     ring cuts a curved notch into it), and the up/down arrow is a slanted tab like the pill. */
  #tabDock{ gap:8px; }
  #tabDock .dockOrb{ z-index:2; }
  #tabDock .dockPill{ position:relative; z-index:1; height:34px; }
  #tabDock .dockPill .in{ gap:8px; }
  #tabDock #scrollCue .chev{ width:40px; height:34px; font-size:12px; transform:skewX(-12deg); animation:cueGlow 2.4s ease-in-out infinite; }
  #tabDock #scrollCue .chev:hover{ transform:skewX(-12deg) translateY(-2px); }
  #tabDock #scrollCue .chev:active{ transform:skewX(-12deg) translateY(1px); }
  html[data-reduce-motion="true"] #tabDock #scrollCue .chev{ animation:none; }

  /* ==================================================================
     v0.27.0
     ================================================================== */
  /* the dock pill: slanted left edge, right end curving in around the cat button (the shape is
     an SVG path that dock.js fits to the button; the same path clips the pill) */
  html:not([data-theme="terminal"]) #tabDock .dockPill{ transform:none; border:0; border-radius:0; background:none; box-shadow:none;
    margin-right:-36px; padding:0 44px 0 16px; filter:drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
  html:not([data-theme="terminal"]) #tabDock .dockPill .in{ transform:none; position:relative; z-index:1; }
  .pillShape{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
  .pillShape path{ fill:rgba(9,11,20,.86); stroke:rgba(var(--rh-lime-rgb),.5); stroke-width:1.5; stroke-linejoin:round; }
  html.dockOpen .pillShape path{ stroke:rgba(var(--rh-lime-rgb),.85); }

  /* the up/down arrow says what it does on hover / focus */
  #scrollCue::before{ content:'DOWN TO PAGE'; position:absolute; right:calc(100% + 8px); top:50%; transform:translateY(-50%) skewX(-12deg);
    padding:5px 9px; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .15s, transform .15s;
    font:9px var(--font-label); letter-spacing:.08em; color:var(--rh-lime); background:rgba(9,11,20,.92); border:1px solid rgba(var(--rh-lime-rgb),.5); border-radius:2px; }
  #scrollCue.up::before{ content:'BACK TO TOP'; }
  #scrollCue:hover::before, #scrollCue:focus-within::before{ opacity:1; }
  #tabDock #scrollCue{ position:relative; }
  #tabDock #scrollCue::before{ right:auto; left:50%; top:auto; bottom:calc(100% + 8px); transform:translateX(-30%) skewX(-12deg); }

  /* CASHCAT ⇄ PARTY: a fixed width so nothing beside it moves; a red/cyan split while it scrambles */
  #titleRow h1 .h1Word{ display:inline-block; min-width:7ch; }
  #titleRow h1 .h1Word.glitching{ text-shadow:-2px 0 #ff2bd6, 2px 0 #22e6ff; animation:h1Jit .09s steps(2) infinite; }
  #titleRow h1 .h1Word.party{ color:var(--rh-lime); text-shadow:0 0 10px rgba(var(--rh-lime-rgb),.6); }
  @keyframes h1Jit{ 50%{ transform:translate(1px, -1px) skewX(-6deg); } }
  .h1Dot{ display:none; }

  /* the radio: just its outline, a big play / pause inside, and bars beside it */
  .hdrMusic.hdrRadio{ width:auto; gap:6px; padding:0 4px; }
  .hdrRadio .rBody{ fill:rgba(0,0,0,.25); }
  .hdrRadio .rBigPlay, .hdrRadio .rBigPause rect{ fill:currentColor; }
  .hdrRadio .rBigPause{ display:none; }
  .hdrRadio.on .rBigPlay{ display:none; } .hdrRadio.on .rBigPause{ display:block; }
  .hdrRadio .rSpk, .hdrRadio .rSpkIn, .hdrRadio .rScreen, .hdrRadio .rPlay, .hdrRadio .rBars, .hdrRadio .rKnob{ display:none; }
  .hdrRadio .rBigPlay{ fill:var(--rh-lime); }
  .hdrRadio:hover .rBigPlay, .hdrRadio:hover .rBigPause rect{ filter:drop-shadow(0 0 3px rgba(var(--rh-lime-rgb),.8)); }
  .hdrEq{ display:inline-flex; align-items:flex-end; gap:2px; height:20px; }
  .hdrEq i{ width:3px; height:3px; background:currentColor; opacity:.55; }
  .hdrRadio.on .hdrEq i{ opacity:1; background:var(--rh-lime); box-shadow:0 0 4px rgba(var(--rh-lime-rgb),.6); animation:hdrEq .9s steps(4) infinite; }
  .hdrRadio.on .hdrEq i:nth-child(2){ animation-duration:.7s; } .hdrRadio.on .hdrEq i:nth-child(3){ animation-delay:-.35s; }
  .hdrRadio.on .hdrEq i:nth-child(4){ animation-duration:1.1s; } .hdrRadio.on .hdrEq i:nth-child(5){ animation-delay:-.6s; }
  @keyframes hdrEq{ 0%{ height:3px; } 33%{ height:18px; } 66%{ height:8px; } 100%{ height:13px; } }
  html[data-reduce-motion="true"] .hdrRadio.on .hdrEq i{ animation:none; height:10px; }

  /* ==================================================================
     v0.28.0: phones get a MENU button instead of the tab row (the dock's column, from the top
     right); the ⚔ battlefield tab; the dock's arrow sits right by the pill; one radio.
     ================================================================== */
  .topMenu{ display:none; }
  @media (max-width:700px){
    html.dockOn #navInner{ display:none !important; }
    html.dockOn .navHint{ display:none !important; }
    html.dockOn .topMenu{ display:inline-flex; align-items:center; margin-left:auto; align-self:center; height:34px; padding:0 14px; cursor:pointer;
      transform:skewX(-12deg); border-radius:3px; border:1px solid rgba(var(--rh-lime-rgb),.55); background:rgba(9,11,20,.8);
      color:var(--ink); font:700 11px 'JetBrains Mono', monospace; letter-spacing:.1em; box-shadow:0 0 12px rgba(var(--rh-lime-rgb),.15); }
    html.dockOn .topMenu .in{ display:inline-flex; align-items:center; gap:8px; transform:skewX(12deg); }
    html.dockOn .topMenu .tmBars{ display:inline-flex; flex-direction:column; gap:3px; }
    html.dockOn .topMenu .tmBars b{ display:block; width:14px; height:2px; background:var(--rh-lime); transition:transform .25s, opacity .2s; }
    html.dockOn .topMenu.on{ border-color:var(--rh-lime); background:rgba(var(--rh-lime-rgb),.12); }
    html.dockOn .topMenu.on .tmBars b:nth-child(1){ transform:translateY(5px) rotate(45deg); }
    html.dockOn .topMenu.on .tmBars b:nth-child(2){ opacity:0; }
    html.dockOn .topMenu.on .tmBars b:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }
    html.dockOn .topMenu:focus-visible{ outline:2px solid var(--rh-lime); outline-offset:3px; }
  }
  /* the column dropped down from the MENU button */
  html.dockTop #dockMenu{ top:calc(var(--tmBottom, 70px) + 10px); bottom:auto; right:14px; }
  html.dockTop .dItem{ transform:skewX(-16deg) translateY(-24px); opacity:0; }
  html.dockTop.dockOpen .dItem{ transform:skewX(-16deg); opacity:1; }
  html.dockTop #dockScrim{ background:repeating-linear-gradient(rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
      radial-gradient(120% 80% at 100% 0%, rgba(var(--rh-lime-rgb),.10), rgba(4,5,10,.72) 60%); }
  html.dockTop.dockOpen header.refract{ z-index:87; }

  /* the ⚔ tab, like the Settings tab */
  .navBtn.navBf{ cursor:pointer; padding-left:12px; padding-right:12px; font:inherit; }
  .navBtn.navBf .label{ display:inline-flex; }
  .navBtn.navBf svg{ width:18px; height:18px; display:block; color:var(--rh-lime); transition:transform .3s cubic-bezier(.3,1.6,.5,1); }
  .navBtn.navBf:hover svg, .navBtn.navBf:focus-visible svg{ transform:scale(1.15) rotate(-8deg); }
  @media (min-width:701px){ .navBtn.navBf{ padding-left:10px; padding-right:10px; } }

  /* the arrow right by the pill (it was ~30px away) */
  #tabDock #scrollCue{ margin-right:-2px; }

  /* the radio: play / pause on the left of the body, bars on a small screen on the right */
  .hdrRadio .radioSvg{ width:58px; height:30px; }
  .hdrRadio .rDiv{ fill:currentColor; opacity:.35; }
  .hdrRadio .rScreen2{ fill:#06120a; stroke:currentColor; stroke-width:.9; }
  .hdrRadio .rEq rect{ fill:currentColor; opacity:.45; transform-origin:center bottom; transform-box:fill-box; transform:scaleY(.2); }
  .hdrRadio.on .rEq rect{ fill:var(--rh-lime); opacity:1; animation:rEqB .9s steps(4) infinite; }
  .hdrRadio.on .rEq rect:nth-child(2){ animation-duration:.7s; } .hdrRadio.on .rEq rect:nth-child(3){ animation-delay:-.35s; }
  .hdrRadio.on .rEq rect:nth-child(4){ animation-duration:1.1s; } .hdrRadio.on .rEq rect:nth-child(5){ animation-delay:-.6s; }
  @keyframes rEqB{ 0%{ transform:scaleY(.2); } 33%{ transform:scaleY(1); } 66%{ transform:scaleY(.5); } 100%{ transform:scaleY(.8); } }
  html[data-reduce-motion="true"] .hdrRadio.on .rEq rect{ animation:none; transform:scaleY(.7); }
  .hdrEq{ display:none; }
  #tabDock #scrollCue{ inset:auto; }     /* its corner offsets (bottom/right 22px) lifted it once it was position:relative */
  /* v0.28.1: phones: MENU sits right of the token price (the price takes the push to the right) */
  @media (max-width:700px){ html.dockOn #pricePill:not([hidden]) + .topMenu{ margin-left:0; } }

  /* ==================================================================
     v0.28.2: the header is see-through black glass; tabs animate on hover / press; MENU's icon on
     its right; the ⚔ tab clashes (swords strike, sparks) while you're away from the battlefield.
     ================================================================== */
  html:not([data-theme="win98"]):not([data-theme="aero"]) header.refract > .refract-layer{ background:rgba(0,0,0,.42); }
  html:not([data-theme="win98"]):not([data-theme="aero"]).navStuck header.refract{ background:rgba(0,0,0,.58); }
  html:not([data-theme="win98"]):not([data-theme="aero"]) #navInner .navBtn:not(.active){ background:rgba(0,0,0,.45); }
  html[data-reduce-transparency="true"]:not([data-theme="win98"]):not([data-theme="aero"]) header.refract > .refract-layer{ background:#050608; }

  /* hover: lift, a lime light sweeps across, the label glows; press: a quick squash and pop */
  html:not([data-theme="win98"]):not([data-theme="aero"]) #navInner .navBtn::before{ content:''; position:absolute; top:0; bottom:0; left:-70%; width:45%; z-index:0; pointer-events:none;
    background:linear-gradient(90deg, transparent, rgba(var(--rh-lime-rgb),.32), transparent); }
  html:not([data-theme="win98"]):not([data-theme="aero"]) #navInner .navBtn:hover::before,
  html:not([data-theme="win98"]):not([data-theme="aero"]) #navInner .navBtn:focus-visible::before{ animation:navSweep .6s ease-out; }
  @keyframes navSweep{ to{ left:130%; } }
  html:not([data-theme="win98"]):not([data-theme="aero"]) #navInner .navBtn:hover{ transform:skewX(-16deg) translateY(-3px); border-color:rgba(var(--rh-lime-rgb),.75); box-shadow:0 6px 14px rgba(0,0,0,.45), 0 0 12px rgba(var(--rh-lime-rgb),.18); }
  html:not([data-theme="win98"]):not([data-theme="aero"]) #navInner .navBtn:hover .label{ text-shadow:0 0 8px rgba(var(--rh-lime-rgb),.55); }
  html:not([data-theme="win98"]):not([data-theme="aero"]) #navInner .navBtn.tap{ animation:navTap .42s cubic-bezier(.3,1.6,.5,1); }
  @keyframes navTap{ 0%{ transform:skewX(-16deg) scale(1); } 30%{ transform:skewX(-16deg) scale(.9); filter:brightness(1.6); } 65%{ transform:skewX(-16deg) scale(1.07); } 100%{ transform:skewX(-16deg) scale(1); } }
  .topMenu.tap{ animation:menuTap .42s cubic-bezier(.3,1.6,.5,1); }
  @keyframes menuTap{ 0%{ transform:skewX(-12deg) scale(1); } 30%{ transform:skewX(-12deg) scale(.9); filter:brightness(1.6); } 65%{ transform:skewX(-12deg) scale(1.07); } 100%{ transform:skewX(-12deg) scale(1); } }
  /* the column's rows: a flash and a squash before it closes */
  html.dockOpen .dItem.tap{ animation:dTap .2s ease-out; border-color:var(--rh-lime); background:rgba(var(--rh-lime-rgb),.22); }
  @keyframes dTap{ 0%{ transform:skewX(-16deg) scale(1); } 50%{ transform:skewX(-16deg) scale(.95); } 100%{ transform:skewX(-16deg) scale(1.02); } }
  html[data-reduce-motion="true"] #navInner .navBtn.tap, html[data-reduce-motion="true"] .topMenu.tap, html[data-reduce-motion="true"] .dItem.tap,
  html[data-reduce-motion="true"] #navInner .navBtn::before{ animation:none !important; }

  /* MENU: the word first, the ☰ / ✕ on its right */
  .topMenu .tmBars{ order:2; }

  /* ⚔ CLASH: the swords swing apart, strike, and sparks fly from where they meet */
  .navBf .label{ position:relative; }
  .navBf .swA, .navBf .swB{ transform-box:view-box; transform-origin:12px 12px; }
  .navBf.clash .swA{ animation:swA .9s cubic-bezier(.3,1.4,.5,1); }
  .navBf.clash .swB{ animation:swB .9s cubic-bezier(.3,1.4,.5,1); }
  @keyframes swA{ 0%{ transform:none; } 30%{ transform:rotate(-24deg); } 45%{ transform:rotate(10deg); } 60%{ transform:rotate(-4deg); } 100%{ transform:none; } }
  @keyframes swB{ 0%{ transform:none; } 30%{ transform:rotate(24deg); } 45%{ transform:rotate(-10deg); } 60%{ transform:rotate(4deg); } 100%{ transform:none; } }
  .navBf .bfSpark{ position:absolute; left:50%; top:30%; width:4px; height:4px; margin:-2px; pointer-events:none; opacity:0; }
  .navBf.clash .bfSpark{ animation:bfSpark .9s ease-out; }
  @keyframes bfSpark{
    0%, 40%{ opacity:0; box-shadow:none; }
    45%{ opacity:1; background:#fff; box-shadow:0 0 0 0 #fff, -6px -6px 0 -1px var(--rh-lime), 6px -6px 0 -1px var(--rh-lime), -8px 2px 0 -1px #ffd24a, 8px 2px 0 -1px #ffd24a, 0 -9px 0 -1px #fff; }
    100%{ opacity:0; background:#fff; box-shadow:0 0 14px 4px rgba(var(--rh-lime-rgb),0), -14px -14px 0 -2px rgba(var(--rh-lime-rgb),0), 14px -14px 0 -2px rgba(var(--rh-lime-rgb),0), -16px 6px 0 -2px rgba(255,210,74,0), 16px 6px 0 -2px rgba(255,210,74,0), 0 -18px 0 -2px rgba(255,255,255,0); }
  }
  .navBf.clash{ border-color:var(--rh-lime) !important; box-shadow:0 0 16px rgba(var(--rh-lime-rgb),.45); }
  .dItem[data-act="bf"].clash .ic{ animation:bfRow .9s ease-out; }
  @keyframes bfRow{ 0%{ transform:none; } 25%{ transform:translateX(-2px) rotate(-12deg); } 45%{ transform:translateX(2px) rotate(10deg); box-shadow:0 0 14px var(--rh-lime); } 100%{ transform:none; } }

  /* ==================================================================
     v0.29.0: the LIVE drop-down, the screensaver, and the header as plain see-through black
     ================================================================== */
  .feedPick{ position:relative; display:inline-flex; }
  .feedMain{ display:inline-flex; align-items:center; gap:7px; }
  .feedMain .fmDot{ width:7px; height:7px; background:#5b6275; }
  html[data-feed="live"] .feedMain[data-mode="live"] .fmDot{ background:#ff3b4f; box-shadow:0 0 6px rgba(255,59,79,.8); animation:liveDot 1.6s steps(2) infinite; }
  .feedMain[data-mode="saver"] .fmDot{ background:#9fd3ff; box-shadow:0 0 6px rgba(159,211,255,.8); }
  .feedMain .fmCar{ font-style:normal; font-size:9px; opacity:.75; transition:transform .2s; }
  .feedMain[aria-expanded="true"] .fmCar{ transform:rotate(180deg); }
  .feedMenu{ position:absolute; left:0; top:calc(100% + 6px); z-index:30; min-width:230px; display:flex; flex-direction:column; gap:4px; padding:6px;
    background:rgba(5,6,10,.94); border:1px solid rgba(var(--rh-lime-rgb),.35); border-radius:4px; box-shadow:0 12px 28px rgba(0,0,0,.6); }
  .feedMenu[hidden]{ display:none; }
  .feedOpt{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:8px 12px; text-align:left; cursor:pointer;
    background:rgba(255,255,255,.03); border:1px solid transparent; border-radius:3px; color:var(--ink); transform:skewX(-10deg); transition:border-color .15s, background .15s, transform .15s; }
  .feedOpt > *{ transform:skewX(10deg); }
  .feedOpt b{ font:700 11px 'JetBrains Mono', monospace; letter-spacing:.08em; }
  .feedOpt small{ font:8px var(--font-label); letter-spacing:.04em; color:var(--muted); text-transform:uppercase; }
  .feedOpt:hover, .feedOpt:focus-visible{ outline:none; border-color:rgba(var(--rh-lime-rgb),.6); background:rgba(var(--rh-lime-rgb),.08); transform:skewX(-10deg) translateX(3px); }
  .feedOpt.active{ border-color:var(--rh-lime); } .feedOpt.active b{ color:var(--rh-lime); }
  .feedOpt.active b::after{ content:' \2713'; }
  #feedSaverBtn b{ color:#bfe9ff; }

  /* the screensaver lies over the battlefield */
  #saver{ position:absolute; inset:0; z-index:12; overflow:hidden; border-radius:inherit; background:#05060f; }
  #saver[hidden]{ display:none; }
  #saver canvas{ display:block; width:100%; height:100%; cursor:pointer; touch-action:manipulation; }
  #saver .svTop, #saver .svBottom{ position:absolute; left:0; right:0; display:flex; align-items:center; gap:10px; padding:10px 12px; opacity:0; transition:opacity .4s; pointer-events:none; }
  #saver.ui .svTop, #saver.ui .svBottom, #saver:focus-within .svTop, #saver:focus-within .svBottom{ opacity:1; pointer-events:auto; }
  #saver .svTop{ top:0; justify-content:space-between; background:linear-gradient(rgba(0,0,0,.55), transparent); }
  #saver .svBottom{ bottom:0; justify-content:center; background:linear-gradient(transparent, rgba(0,0,0,.5)); }
  #saver .svName{ font:9px 'Press Start 2P', monospace; color:#e8ecf4; letter-spacing:.06em; }
  #saver .svBtns{ display:flex; gap:6px; }
  #saver .svBtn, #saver .svArrow{ font:700 10px 'JetBrains Mono', monospace; letter-spacing:.06em; color:#e8ecf4; cursor:pointer;
    background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.25); border-radius:3px; padding:6px 10px; transform:skewX(-10deg); }
  #saver .svBtn:hover, #saver .svArrow:hover, #saver .svBtn:focus-visible{ border-color:#bfe9ff; color:#bfe9ff; outline:none; }
  #saver .svDots{ display:flex; gap:8px; }
  #saver .svDot{ width:10px; height:10px; padding:0; border-radius:50%; border:1px solid rgba(255,255,255,.5); background:transparent; cursor:pointer; }
  #saver .svDot.on{ background:#bfe9ff; border-color:#bfe9ff; }
  #saver .svHint{ position:absolute; left:50%; bottom:52px; transform:translateX(-50%); font:8px var(--font-label); letter-spacing:.12em; color:rgba(232,236,244,.55); text-transform:uppercase; pointer-events:none; transition:opacity .4s; opacity:0; }
  #saver.ui .svHint{ opacity:1; }
  @media (max-width:500px){ #saver .svBtn{ padding:5px 7px; font-size:9px; } #saver #svMusic{ display:none; } }

  /* the header: plain see-through black. No blur and no liquid-glass filter: cheaper to draw, crisp,
     and the stars and page colour show through it as they are */
  html:not([data-theme="win98"]):not([data-theme="aero"]) header.refract > .refract-layer{ background:rgba(0,0,0,.5); -webkit-backdrop-filter:none; backdrop-filter:none; filter:none !important; }
  html:not([data-theme="win98"]):not([data-theme="aero"]).navStuck header.refract{ background:rgba(0,0,0,.62); -webkit-backdrop-filter:none; backdrop-filter:none; }

  /* ==================================================================
     v0.30.0 #2: THE WAR ROOM. NEWS's top trades and RIGHT NOW share one framed panel: a header
     strip (the name, the season and its countdown), TOP TRADES, a dashed seam, RIGHT NOW, and
     CLAIM YOUR GENERAL as the panel's foot. Same width as YESTERDAY'S SCORE under it.
     ================================================================== */
  #panel-home .bubble.homeFront, #panel-home .bubble.homeFront:hover{ padding:0; border:1px solid rgba(var(--rh-lime-rgb),.24); border-radius:8px; overflow:hidden;
    background:linear-gradient(180deg, rgba(12,15,26,.78), rgba(6,8,14,.66)); box-shadow:0 14px 34px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05); }
  html[data-reduce-transparency="true"] #panel-home .bubble.homeFront{ background:var(--surface-solid, #0d1020); }
  .frontHead{ display:flex; align-items:center; gap:12px; padding:11px 18px; border-bottom:1px solid rgba(var(--rh-lime-rgb),.16);
    background:linear-gradient(90deg, rgba(var(--rh-lime-rgb),.10), rgba(var(--rh-lime-rgb),.02) 60%, transparent); }
  .frontTitle{ font:10px 'Press Start 2P', monospace; letter-spacing:.06em; color:var(--rh-lime); text-shadow:0 0 10px rgba(var(--rh-lime-rgb),.4); white-space:nowrap; }
  .frontTitle i{ font-style:normal; margin-right:4px; }
  .frontSeason{ margin-left:auto; font:9px var(--font-label); letter-spacing:.08em; color:var(--muted); text-transform:uppercase; text-align:right; }
  .frontSub{ color:var(--ink); }
  #panel-home .homeFront .homeBig{ padding:16px 18px 18px; }
  #panel-home .homeFront .homeNow{ padding:16px 18px 18px; border-top:1px dashed rgba(255,255,255,.1); }
  #panel-home .homeFront .homeBig[hidden] + .homeNow{ border-top:0; }
  @media (max-width:560px){
    .frontHead{ padding:10px 14px; flex-wrap:wrap; row-gap:4px; }
    .frontSeason{ font-size:8px; }
    #panel-home .homeFront .homeBig, #panel-home .homeFront .homeNow{ padding:14px 14px 16px; }
  }

  /* ==================================================================
     v0.30.0 #4: CASHCAT FM. The radio and the price are one slanted pill (#hdrDuo): play / pause and
     its bars on the left, a seam, the price on the right; a little antenna stands on the pill's top
     edge and lights up while music plays. WIN98 / AERO restyle it in their own theme files.
     ================================================================== */
  .hdrDuo{ position:relative; flex:none; display:inline-flex; align-items:stretch; height:32px; align-self:center;
    transform:skewX(-12deg); border:1px solid rgba(var(--rh-lime-rgb),.38); border-radius:3px; background:rgba(0,0,0,.45);
    box-shadow:0 0 12px rgba(var(--rh-lime-rgb),.08); transition:border-color .2s, box-shadow .2s; }
  .hdrDuo:hover, .hdrDuo:focus-within{ border-color:rgba(var(--rh-lime-rgb),.7); }
  .hdrDuo:has(.hdrRadio.on){ border-color:rgba(var(--rh-lime-rgb),.6); box-shadow:0 0 14px rgba(var(--rh-lime-rgb),.18); }
  /* the antenna: a 2px mast leaning back from the radio half, with a tip that glows while it plays */
  .hdrDuo::before{ content:''; position:absolute; left:20px; bottom:100%; width:2px; height:9px; background:rgba(var(--rh-lime-rgb),.5);
    transform:skewX(-20deg); transform-origin:bottom; pointer-events:none; }
  .hdrDuo::after{ content:''; position:absolute; left:22px; bottom:calc(100% + 8px); width:4px; height:4px; background:rgba(var(--rh-lime-rgb),.5); pointer-events:none; transition:background .2s, box-shadow .2s; }
  .hdrDuo:has(.hdrRadio.on)::after{ background:var(--rh-lime); box-shadow:0 0 6px var(--rh-lime); }
  .hdrDuo .hdrMusic.hdrRadio{ height:auto; width:auto; padding:0 10px 0 11px; margin:0; border:0; border-radius:0; background:none; box-shadow:none; filter:none; color:var(--muted); }
  .hdrDuo .hdrMusic.hdrRadio:hover, .hdrDuo .hdrMusic.hdrRadio:focus-visible{ background:rgba(var(--rh-lime-rgb),.08); color:var(--ink); outline:none; }
  .hdrDuo .hdrMusic.hdrRadio.on{ color:var(--rh-lime); filter:none; }
  .hdrDuo .hdrRadio .duoSvg{ display:block; width:31px; height:18px; transform:skewX(12deg); }
  .hdrDuo #pricePill{ height:auto; margin:0; padding:0 12px; border:0; border-left:1px solid rgba(var(--rh-lime-rgb),.24); border-radius:0;
    background:none; transform:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .hdrDuo #pricePill:hover, .hdrDuo #pricePill:focus-visible{ transform:none; border-color:rgba(var(--rh-lime-rgb),.24); background:rgba(var(--rh-lime-rgb),.08); outline:none; }
  .hdrDuo #pricePill.tick{ animation:duoTick .6s ease-out; }
  @keyframes duoTick{ from{ background:rgba(var(--rh-lime-rgb),.25); } to{ background:transparent; } }
  html[data-reduce-motion="true"] .hdrDuo #pricePill.tick{ animation:none; }
  @media (max-width:700px){
    .hdrDuo{ margin-left:auto; height:34px; }
    html.dockOn .hdrDuo + .topMenu{ margin-left:0; }
    .hdrDuo .hdrMusic.hdrRadio{ padding:0 8px 0 9px; }
    .hdrDuo #pricePill{ padding:0 9px; }
  }
  @media (max-width:430px){ .hdrDuo #pricePill .pTick{ display:none; } .hdrDuo .hdrRadio .duoSvg{ width:26px; height:16px; } }

  /* ==================================================================
     v0.30.0 #5: the up/down arrow calms down. No breathing glow, no light running round its edge,
     no bob. A still dark key with a thin lime edge; every few seconds the arrow inside gives two
     small nudges the way it points, and hover lifts the key. Reduced motion: still.
     ================================================================== */
  html:not([data-theme="win98"]) #scrollCue .chev{ animation:none; overflow:visible; isolation:auto; text-shadow:none;
    background:var(--surface-solid, #0d1020); border:1px solid rgba(var(--rh-lime-rgb),.5); box-shadow:0 4px 12px rgba(0,0,0,.45);
    transition:border-color .15s, background .15s, transform .15s; }
  html:not([data-theme="win98"]) #scrollCue .chev::before, html:not([data-theme="win98"]) #scrollCue .chev::after{ content:none; }
  html:not([data-theme="win98"]) #scrollCue .chev:hover, html:not([data-theme="win98"]) #scrollCue .chev:focus-visible{ outline:none; border-color:var(--rh-lime); background:color-mix(in srgb, var(--rh-lime) 10%, var(--surface-solid, #0d1020)); }
  html:not([data-theme="win98"]) body > #scrollCue .chev:hover{ transform:translateY(-2px); }
  #scrollCue .chev i{ display:block; font-style:normal; line-height:1; animation:cueNudgeDown 5s ease-in-out infinite; }
  #scrollCue.up .chev i{ animation-name:cueNudgeUp; }
  #scrollCue .chev:hover i, #scrollCue .chev:focus-visible i{ animation-play-state:paused; }
  @keyframes cueNudgeDown{ 0%, 82%, 100%{ transform:none; } 86%{ transform:translateY(3px); } 90%{ transform:none; } 94%{ transform:translateY(2px); } }
  @keyframes cueNudgeUp{ 0%, 82%, 100%{ transform:none; } 86%{ transform:translateY(-3px); } 90%{ transform:none; } 94%{ transform:translateY(-2px); } }
  html #tabDock #scrollCue .chev{ animation:none; }
  html[data-reduce-motion="true"] #scrollCue .chev i{ animation:none; }

  /* ==================================================================
     v0.30.0 #6 / #7: THE ARROW BECOMES THE MENU. The cat button is a square now, the same shape as
     the up/down arrow it grows out of (dock.js animates it from the arrow's box to its own, and the
     arrow slides over beside the pill; back at the top it runs in reverse). The pill is a plain
     parallelogram beside it. The dock no longer pops in by scale: it fades, and dock.js moves the parts.
     ================================================================== */
  #tabDock{ transform:none; visibility:hidden; transition:opacity .15s, transform .2s ease, visibility 0s linear .15s; }
  html.dockOut #tabDock, #tabDock.leaving{ visibility:visible; transition:opacity .15s, transform .2s ease, visibility 0s; }
  #tabDock.leaving{ opacity:1; pointer-events:none; }
  html.dockOut #tabDock.late{ transform:none; opacity:1; }
  .dockOrb{ width:54px; height:54px; border-radius:5px;
    box-shadow:0 0 0 2px rgba(var(--rh-lime-rgb),.8), 0 0 0 4px #070810, 0 0 12px rgba(var(--rh-lime-rgb),.25), 0 8px 18px rgba(0,0,0,.6);
    background:linear-gradient(180deg, #1a2036, #070810); }
  .dockOrb .face{ inset:5px; border-radius:3px; background-size:120%; }
  .dockOrb::before{ left:5px; right:5px; top:5px; height:30%; border-radius:3px 3px 0 0; background:linear-gradient(rgba(255,255,255,.2), transparent); }
  /* the hold-to-battlefield ring, square: a conic sweep shown only in a 3px frame */
  .dockOrb::after{ inset:-7px; border-radius:8px; padding:3px;
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
  .dockOrb .badge{ top:-6px; right:-6px; }
  html:not([data-theme="terminal"]) #tabDock .dockPill{ margin-right:0; padding:0 18px 0 16px; }

  /* v0.31.0: the page pill is attached to the cat cube: its straight right end tucks under the cube's ring
     (dock.js draws the shape), the slanted left end matches the tabs and the arrow */
  html:not([data-theme="terminal"]) #tabDock .dockPill{ margin-right:-14px; padding:0 24px 0 16px; }
  .dockGhost{ will-change:transform, opacity; }

  /* v0.31.0 D3: the folded paper's three numbers (trades, buy share, the king), set like a newspaper's index line */
  .paperFold{ flex-wrap:wrap; row-gap:6px; }
  .paperNums{ flex:none; display:flex; align-items:baseline; gap:0; font:12px/1.2 Georgia, 'Times New Roman', serif; color:#3b3428; white-space:nowrap; }
  .paperNums > span{ padding:0 10px; border-left:1px solid rgba(29,26,20,.35); }
  .paperNums > span:first-child{ border-left:0; padding-left:0; }
  .paperNums b{ font-weight:900; color:#1d1a14; }
  .paperNums .pnKing i{ font-style:normal; color:#8a6a12; }
  .paperNums:empty{ display:none; }
  @media (max-width:820px){
    .paperNums{ order:5; flex-basis:100%; font-size:11.5px; }
  }

  /* (v0.31.0 DISPATCHES removed in v0.32.0: reading X posts automatically needs X's paid API; back on the ideas board) */

  /* ==================================================================
     v0.32.0 B2: PAUSE beside LIVE, the PAUSED veil over the frozen battlefield, and FIELD TOASTS (big trades while
     the battlefield is off-screen or paused) above the dock
     ================================================================== */
  .bfPause{ display:inline-flex; align-items:center; gap:7px; }
  .bfPause .bpIc{ width:8px; height:9px; border-left:3px solid currentColor; border-right:3px solid currentColor; }
  .bfPause.active .bpIc{ width:0; height:0; border:0; border-left:8px solid currentColor; border-top:5px solid transparent; border-bottom:5px solid transparent; }
  .bfPause.active{ border-color:var(--rh-lime); }
  #bfPausedVeil{ position:absolute; inset:0; z-index:6; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; cursor:pointer;
    border:0; border-radius:inherit; color:#e8ecf4; background:rgba(4,5,10,.42); -webkit-backdrop-filter:grayscale(.7); backdrop-filter:grayscale(.7); }
  #bfPausedVeil[hidden]{ display:none; }
  #bfPausedVeil b{ font:14px 'Press Start 2P', monospace; letter-spacing:.08em; color:var(--rh-lime); text-shadow:0 0 12px rgba(var(--rh-lime-rgb),.5); }
  #bfPausedVeil small{ font:9px var(--font-label); letter-spacing:.1em; text-transform:uppercase; color:#c9cfdb; }
  #fieldToast{ position:fixed; right:14px; bottom:calc(92px + env(safe-area-inset-bottom, 0px)); z-index:58; display:grid; grid-template-columns:auto auto; gap:2px 12px; align-items:baseline;
    padding:9px 14px; cursor:pointer; text-align:left; color:#e8ecf4; background:rgba(6,8,14,.94); border:1px solid var(--line); border-left:3px solid var(--rh-lime); border-radius:4px;
    box-shadow:0 10px 24px rgba(0,0,0,.55); transform:skewX(-8deg); animation:ftIn .32s cubic-bezier(.3,1.4,.5,1); }
  #fieldToast > *{ transform:skewX(8deg); }
  #fieldToast[hidden]{ display:none; }
  #fieldToast.buy{ border-left-color:var(--buy); } #fieldToast.sell{ border-left-color:var(--sell); } #fieldToast.king{ border-left-color:#ffd34d; }
  #fieldToast .ftKind{ font:9px 'Press Start 2P', monospace; letter-spacing:.04em; }
  #fieldToast.buy .ftKind{ color:var(--buy); } #fieldToast.sell .ftKind{ color:var(--sell); } #fieldToast.king .ftKind{ color:#ffd34d; }
  #fieldToast .ftAmt{ font:700 15px 'JetBrains Mono', monospace; justify-self:end; }
  #fieldToast .ftWho{ font:11px 'JetBrains Mono', monospace; color:var(--muted); }
  #fieldToast .ftGo{ font:8px var(--font-label); letter-spacing:.08em; color:var(--rh-lime); text-transform:uppercase; justify-self:end; }
  #fieldToast.leaving{ animation:ftOut .3s ease-in forwards; }
  @keyframes ftIn{ from{ transform:skewX(-8deg) translateX(30px); opacity:0; } }
  @keyframes ftOut{ to{ transform:skewX(-8deg) translateX(30px); opacity:0; } }
  html:not(.dockOut) #fieldToast{ bottom:calc(76px + env(safe-area-inset-bottom, 0px)); }
  html[data-reduce-motion="true"] #fieldToast, html[data-reduce-motion="true"] #fieldToast.leaving{ animation:none; }

  /* ==================================================================
     v0.32.0 NEWS: the paper's live ticker row and THE NEWSSTAND
     ================================================================== */
  .pTicker{ display:flex; flex-wrap:wrap; margin-top:4px; border-bottom:1px solid #1d1a14; font:11px/1.2 'JetBrains Mono', monospace; color:#1d1a14; }
  .pTicker:empty{ display:none; }
  .pTicker > span{ padding:5px 11px; border-right:1px solid rgba(29,26,20,.28); white-space:nowrap; }
  .pTicker > span:last-child{ border-right:0; }
  .pTicker .up{ color:#16803d; } .pTicker .dn{ color:#b3202f; }
  .pTicker .ptLive{ display:inline-flex; align-items:center; gap:5px; padding-left:0; font:700 9px 'Old Standard TT', Georgia, serif; letter-spacing:.14em; color:#b3202f; }
  .pTicker .ptLive::before{ content:''; width:6px; height:6px; border-radius:50%; background:#d6202f; animation:ptDot 1.4s steps(2) infinite; }
  @keyframes ptDot{ 50%{ opacity:.25; } }
  html[data-reduce-motion="true"] .pTicker .ptLive::before{ animation:none; }
  @media (max-width:560px){ .pTicker{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; } .pTicker > span{ padding:5px 9px; } }

  /* THE NEWSSTAND: covers on a pixel wooden rack */
  #panel-home .bubble.homeStand{ position:relative; padding:16px 18px 0; border-radius:8px; overflow:hidden;
    background:linear-gradient(180deg, #1c1510, #100b08); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 14px 30px rgba(0,0,0,.4); }
  .standSign{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
  .standSign b{ font:10px 'Press Start 2P', monospace; color:#ffd24a; letter-spacing:.08em; text-shadow:0 0 10px rgba(255,210,74,.35); }
  .standSign small{ font:9px var(--font-label); color:#a89880; letter-spacing:.1em; text-transform:uppercase; }
  .standRack{ position:relative; display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:12px; padding:18px 4px 18px; }
  /* the shelf: stacked 2px "pixel" planks with a lip */
  .standRack::after{ content:''; position:absolute; left:-18px; right:-18px; bottom:0; height:16px; image-rendering:pixelated;
    background:linear-gradient(#8a6038 0 2px, #6b4626 2px 6px, #5a3a1f 6px 8px, #7a5532 8px 10px, #4a2f18 10px 14px, #2c1b0d 14px); box-shadow:0 6px 12px rgba(0,0,0,.5); }
  .cover{ position:relative; z-index:1; display:flex; flex-direction:column; aspect-ratio:3/4; padding:8px 8px 10px; cursor:pointer; text-align:left;
    color:#1d1a14; background:#f3ecdb; border:0; border-radius:2px; font:inherit; transform-origin:50% 100%;
    background-image:linear-gradient(180deg, transparent 49.5%, rgba(29,26,20,.10) 50%, transparent 51.5%), radial-gradient(rgba(29,26,20,.06) 1px, transparent 1px); background-size:auto, 3px 3px;
    box-shadow:0 2px 0 #d8cfb8, 0 10px 18px rgba(0,0,0,.55); transform:rotate(var(--r, 0deg)) translateY(var(--lift, 0)); transition:transform .25s cubic-bezier(.3,1.5,.5,1), box-shadow .25s; }
  .cover:hover, .cover:focus-visible{ --lift:-10px; outline:none; box-shadow:0 2px 0 #d8cfb8, 0 18px 26px rgba(0,0,0,.6); }
  .cover.on{ --lift:-14px; box-shadow:0 0 0 2px #ffd24a, 0 18px 26px rgba(0,0,0,.6); }
  .cover.latest::before{ content:'LATEST'; position:absolute; top:-9px; left:50%; transform:translateX(-50%); padding:3px 5px; border-radius:2px; white-space:nowrap;
    font:7px 'Press Start 2P', monospace; color:#1d1a14; background:#ffd24a; }
  .cvM{ font:400 13px/1 'UnifrakturMaguntia', Georgia, serif; text-align:center; border-bottom:1px solid #1d1a14; padding-bottom:3px; white-space:nowrap; overflow:hidden; }
  .cvD{ font:700 8px 'Old Standard TT', Georgia, serif; letter-spacing:.12em; text-align:center; text-transform:uppercase; border-bottom:2px double #1d1a14; padding:2px 0; }
  .cvH{ margin:6px 0 0; font:900 11.5px/1.1 'Playfair Display', Georgia, serif; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .cvL{ flex:1; margin-top:6px; background:repeating-linear-gradient(180deg, rgba(29,26,20,.28) 0 1px, transparent 1px 5px);
    -webkit-mask:linear-gradient(90deg, #000 47%, transparent 47% 53%, #000 53%); mask:linear-gradient(90deg, #000 47%, transparent 47% 53%, #000 53%); }
  .cvB{ display:flex; height:5px; margin-top:6px; border:1px solid #1d1a14; } .cvB i{ background:#2a8a4a; } .cvB s{ flex:1; background:#b3202f; }
  .cvN{ display:flex; justify-content:space-between; margin-top:4px; font:9px 'JetBrains Mono', monospace; color:#3b3428; }
  @media (max-width:760px){
    .standRack{ padding-top:24px; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:40%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
    .cover{ scroll-snap-align:start; }
  }
  html[data-reduce-motion="true"] .cover{ transition:none; }

  /* ==================================================================
     v0.32.0 D6: WAR RECORDS AS A SCROLL. A wooden rod with two wax seals (the button), the 7 DAY / 30 DAY ribbons
     hanging off it, a parchment sheet that unrolls between the rods (site.js animates its height), the honour roll in
     Roman numerals with a crown on I., one "decree" line of records, and FIND MY WALLET.
     ================================================================== */
  #leaderboard.warScroll{ position:relative; max-width:none; margin:0; padding:0 0 0; border:0; background:none; box-shadow:none; }
  .warScroll .scrollRod{ position:relative; z-index:3; height:36px; margin:0; padding:0; border:0; background:none; box-shadow:none; display:block; }
  .warScroll #lbDisclose{ position:absolute; inset:0; width:100%; padding:0; border:0; background:none; cursor:pointer; display:block; }
  .warScroll .rodBar{ position:absolute; inset:6px 20px; border-radius:12px; image-rendering:pixelated;
    background:linear-gradient(180deg, #f0e2b8 0 3px, #d9c08a 3px 9px, #b38e55 9px 13px, #8a6a3a 13px 16px, #c4a874 16px 20px, #9c7c48 20px); box-shadow:0 6px 12px rgba(0,0,0,.5); }
  .warScroll .rodCap{ position:absolute; top:0; width:28px; height:36px; border-radius:6px; background:radial-gradient(circle at 40% 30%, #b07a40, #5c3a17 70%); box-shadow:0 4px 8px rgba(0,0,0,.5); }
  .warScroll .rodCap.l{ left:0; } .warScroll .rodCap.r{ right:0; }
  .warScroll .lbTitle{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:14px; font:10px 'Press Start 2P', monospace !important; letter-spacing:.1em; color:#3a2410 !important; text-shadow:0 1px 0 rgba(255,255,255,.45) !important; }
  .warScroll .seal{ display:grid; place-items:center; width:24px; height:24px; border-radius:50%; font-style:normal; font-size:11px; color:#ffd7a0;
    background:radial-gradient(circle at 35% 35%, #e0444f, #8a1420 70%); box-shadow:0 2px 3px rgba(0,0,0,.45), inset 0 0 0 2px rgba(0,0,0,.12); transition:transform .45s cubic-bezier(.3,1.5,.5,1), opacity .3s; }
  .warScroll.unrolled .seal{ transform:scale(.45) rotate(70deg); opacity:.55; }
  .warScroll #lbDisclose:hover .rodBar, .warScroll #lbDisclose:focus-visible .rodBar{ filter:brightness(1.08); }
  .warScroll #lbDisclose:focus-visible{ outline:2px solid var(--rh-lime); outline-offset:3px; }
  /* the ribbons hang from the rod's right end */
  .warScroll .ribbons{ position:absolute; right:46px; top:24px; z-index:4; display:flex; gap:6px; }
  .warScroll .ribbons[hidden]{ display:flex; }
  .warScroll .ribbon{ position:relative; padding:6px 8px 12px !important; border:0 !important; border-radius:0 !important; transform:none !important; box-shadow:0 3px 6px rgba(0,0,0,.4) !important;
    font:8px 'Press Start 2P', monospace !important; letter-spacing:.04em; color:#f7e9c8 !important; background:#7a1c24 !important;
    clip-path:polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 6px), 0 100%); transition:padding .2s; }
  .warScroll .ribbon .pillIn{ transform:none !important; }
  .warScroll .ribbon.active{ background:#b88a14 !important; color:#2b1d0c !important; padding-bottom:18px !important; }
  .warScroll:not(.unrolled) .ribbons{ display:none; }
  /* the parchment */
  .warScroll #lbBody.parchment{ position:relative; z-index:1; margin:-12px 16px; padding:0; overflow:hidden; border:0; border-radius:0; color:#2b1d0c;
    background-color:#ead9b0; background-image:linear-gradient(90deg, rgba(120,80,30,.28), transparent 7%, transparent 93%, rgba(120,80,30,.28)), radial-gradient(rgba(90,60,20,.10) 1px, transparent 1px);
    background-size:auto, 5px 5px; box-shadow:inset 0 12px 14px -8px rgba(60,35,10,.55), inset 0 -12px 14px -8px rgba(60,35,10,.55); -webkit-backdrop-filter:none; backdrop-filter:none; }
  .warScroll .parchIn{ padding:34px clamp(18px, 4vw, 44px) 30px; }
  .warScroll .honourHead{ margin:0; text-align:center; font:900 14px 'Playfair Display', Georgia, serif; letter-spacing:.16em; text-transform:uppercase; color:#2b1d0c; }
  .warScroll .honourHead small{ font:italic 400 13px 'Old Standard TT', Georgia, serif; letter-spacing:.04em; text-transform:none; color:#6a4a26; margin-left:4px; }
  .warScroll .orn{ text-align:center; font:16px serif; color:#7a5530; margin:2px 0 12px; }
  .warScroll #lbColumns{ display:grid; grid-template-columns:1fr 1fr; gap:26px; margin:0; }
  .warScroll .lbCol{ background:none; border:0; padding:0; box-shadow:none; }
  .warScroll .lbColHead{ margin:0 0 6px; padding:0 0 3px; border-bottom:2px solid #2b1d0c; font:700 11px 'Old Standard TT', Georgia, serif; letter-spacing:.14em; text-transform:uppercase; color:#2b1d0c !important; background:none; }
  .warScroll .lbList li{ display:flex; align-items:baseline; gap:10px; padding:6px 0; border-top:0; border-bottom:1px dotted rgba(43,29,12,.38); font:15px 'Old Standard TT', Georgia, serif; color:#2b1d0c; background:none; }
  .warScroll .lbRank{ flex:none; width:2.6em; font:700 14px 'Old Standard TT', Georgia, serif; color:#7a5530; background:none; }
  .warScroll .lbWallet{ color:#2b1d0c; } .warScroll .lbWallet .lbAddr{ color:#7a6a50; margin-left:6px; font-size:12px; }
  .warScroll .lbAmount{ margin-left:auto; font:700 14px 'JetBrains Mono', monospace; }
  .warScroll .lbCol.buy .lbAmount{ color:#14612e; } .warScroll .lbCol.sell .lbAmount{ color:#8e1424; }
  .warScroll .lbList li:first-child .lbAmount::after{ content:' \265B'; color:#b88a14; }
  .warScroll .lbEmpty{ font:italic 14px 'Old Standard TT', Georgia, serif; color:#6a4a26; padding:6px 0; }
  .warScroll #feedNotice{ margin:0 0 12px; padding:8px 12px; border:1px solid rgba(43,29,12,.4); background:rgba(255,240,200,.5); color:#5a2a10; font:italic 13px 'Old Standard TT', Georgia, serif; }
  .warScroll .decree{ margin:16px 0 0; text-align:center; font:italic 14px/1.5 'Old Standard TT', Georgia, serif; color:#3b2810; }
  .warScroll .decree b{ font-style:normal; }
  .warScroll .findWallet{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:18px 0 0; padding-top:14px; border-top:1px solid rgba(43,29,12,.35); }
  .warScroll .findWallet label{ font:9px 'Press Start 2P', monospace; color:#3a2410; letter-spacing:.06em; }
  .warScroll .findWallet input{ flex:1 1 220px; min-width:0; padding:8px 10px; font:12px 'JetBrains Mono', monospace; color:#2b1d0c; background:rgba(255,250,235,.75); border:1px solid #8a6a3a; border-radius:2px; }
  .warScroll .findWallet input:focus{ outline:2px solid #b88a14; outline-offset:1px; }
  .warScroll .findWallet .lbTab{ color:#f7e9c8; background:#5c3a17; border-color:#5c3a17; }
  .warScroll .findWallet output{ flex-basis:100%; font:13px 'Old Standard TT', Georgia, serif; color:#2b1d0c; min-height:1.2em; }
  .warScroll #lbStatus{ margin-top:10px; text-align:center; font:10px 'JetBrains Mono', monospace; color:#7a6a50; }
  .warScroll .scrollRod.bottom{ margin-top:0; display:none; pointer-events:none; }
  .warScroll.unrolled .scrollRod.bottom{ display:block; }
  .warScroll .scrollRod.bottom .rodBar{ transform:scaleY(-1); }
  @media (max-width:600px){ .warScroll #lbColumns{ grid-template-columns:1fr; gap:16px; } .warScroll .ribbons{ right:38px; } .warScroll .lbTitle{ gap:8px; font-size:9px !important; } }
  html[data-reduce-motion="true"] .warScroll .seal{ transition:none; }

  /* ==================================================================
     v0.32.0 D10: the address book's names, the paper's EXCHANGE DESK line, and THE EXCHANGE DESK on TOKEN
     ================================================================== */
  .lbLabel{ color:#ffd38a; font-weight:700; }
  .warScroll .lbLabel{ color:#6b4a12; }
  .bigWho .bigLabel{ color:#ffd38a; font-weight:700; }
  .pFlow{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin:12px 0 0; padding:10px 0; border-top:2px solid #1d1a14; border-bottom:1px solid #1d1a14; }
  .pFlow .pfK{ font:700 10px 'Old Standard TT', Georgia, serif; letter-spacing:.16em; color:#8a1c1c; }
  .pFlow b{ font:900 18px/1.15 'Playfair Display', Georgia, serif; color:#111; }
  .pFlow .pfN{ flex-basis:100%; margin:4px 0 0; font:13.5px/1.5 "Old Standard TT", Georgia, serif; color:#2b261c; } .pFlow .pfN b{ font:700 13.5px "Old Standard TT", Georgia, serif; color:#1d1a14; }
  .exDesk{ grid-column:1 / -1; }
  .exDesk .exWhat{ max-width:72ch !important; color:var(--muted); font-size:13px; line-height:1.6; }
  .exDesk .exWhat b{ color:var(--ink); }
  .exDays{ display:grid; margin:14px 0; border:1px solid var(--line); border-radius:6px; overflow:hidden; font-size:12.5px; }
  .exRow{ display:grid; grid-template-columns:minmax(90px, .7fr) 2fr minmax(90px, .8fr); gap:10px; padding:8px 12px; border-top:1px solid var(--line); align-items:baseline; }
  .exRow:first-child{ border-top:0; }
  .exRow.exHd{ font:8px var(--font-label); letter-spacing:.1em; color:var(--muted); background:rgba(255,255,255,.03); }
  .exRow i{ font-style:normal; font-size:10px; color:var(--muted); }
  .exRow b{ color:var(--ink); } .exRow .exArr{ color:#ffd38a; }
  .exRow .exQuiet{ color:var(--muted); }
  .exRow .up{ color:var(--buy); text-align:right; } .exRow .dn{ color:var(--sell); text-align:right; }
  .exRow.exHd span:last-child{ text-align:right; }
  .exBig h3{ font:9px 'Press Start 2P', monospace; letter-spacing:.06em; color:var(--rh-lime); margin:16px 0 8px; }
  .exBig ol{ margin:0; padding:0; list-style:none; display:grid; gap:4px; }
  .exBig a{ display:block; padding:6px 10px; border:1px solid var(--line); border-radius:4px; color:var(--ink); text-decoration:none; font-size:12.5px; }
  .exBig a:hover{ border-color:rgba(var(--rh-lime-rgb),.6); } .exBig small{ color:var(--muted); }
  .exSrc{ margin-top:12px; font-size:11px; color:var(--muted); } .exSrc a{ color:var(--rh-lime); }
  @media (max-width:560px){ .exRow{ grid-template-columns:1fr auto; } .exRow > :nth-child(2){ grid-column:1 / -1; grid-row:2; } }

  /* v0.33.0 9-B: the scroll is drawn from Scarlet's scroll picture, cut into a top roll, the parchment and a bottom
     roll (sprites/ae60…, 7527…, 40bb…: a third of the size, 24 colours) and scaled back up 3x with hard pixels.
     The rolls' turned ends are fixed; the middles repeat to fit any width or height. */
  #leaderboard.warScroll .scrollRod, #leaderboard.warScroll #lbHead.scrollRod{ height:51px; margin:0 -8px; image-rendering:pixelated;
    border-style:solid; border-width:0; border-image:url(../sprites/202efeb6492a.png) 0 20 fill / 0 60px / 0 stretch; }
  #leaderboard.warScroll .scrollRod.bottom{ border-image:url(../sprites/f04feb3f4ec7.png) 0 20 fill / 0 60px / 0 stretch; margin-top:-3px; }
  .warScroll .rodBar, .warScroll .rodCap{ display:none; }
  .warScroll .lbTitle{ color:#4a2c10 !important; text-shadow:0 1px 0 rgba(255,240,210,.6) !important; top:-2px; }
  #leaderboard.warScroll #lbBody.parchment{ margin:-4px 0; background:none; box-shadow:none; image-rendering:pixelated;
    border-style:solid; border-width:0; border-image:url(../sprites/965051b84998.png) 0 30 fill / 0 90px / 0 stretch round; }
  .warScroll .parchIn{ padding:30px clamp(70px, 9vw, 96px) 26px; }
  .warScroll .ribbons{ top:34px; right:72px; }
  @media (max-width:600px){
    #leaderboard.warScroll .scrollRod, #leaderboard.warScroll #lbHead.scrollRod{ height:34px; border-image-width:0 40px; }
    #leaderboard.warScroll #lbBody.parchment{ border-image-width:0 60px; }
    .warScroll .parchIn{ padding:22px 46px 20px; }
    .warScroll .ribbons{ top:22px; right:46px; }
  }

  /* ==================================================================
     v0.33.0 #2: RIGHT NOW's four numbers as market screens: a dark bezel and a glowing screen (the scan lines went in
     v0.35.0; the layout around them is the v0.35.0 broadcast desk at the end of this file).
     ================================================================== */
  #homeNow .nowStage{ display:grid; grid-template-columns:minmax(200px, .8fr) 1.6fr; grid-template-areas:"says says" "raw screens"; gap:6px 22px; align-items:end; margin-top:12px; }
  #homeNow .rawCast{ grid-area:raw; display:flex; justify-content:center; }
  #homeNow .rawCast canvas{ width:100%; max-width:260px; height:auto; aspect-ratio:520 / 440; display:block; }
  #homeNow .nowStats{ grid-area:screens; display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0; }
  #homeNow .nowStats .nowBlk{ position:relative; display:block; transform:none; min-width:0; padding:7px; border:0; border-radius:8px;
    background:linear-gradient(180deg, #2a2f3a, #14171e); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -2px 0 rgba(0,0,0,.5), 0 8px 18px rgba(0,0,0,.5); }
  #homeNow .nowStats .nowBlk::after{ content:''; position:absolute; right:10px; bottom:2px; width:4px; height:3px; background:var(--c-led, #3dff7a); box-shadow:0 0 4px var(--c-led, #3dff7a); }
  #homeNow .nowStats .nowBlk > i{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:5px; overflow:hidden; min-height:84px; padding:12px 14px 10px;
    border-radius:4px; transform:none; font-style:normal; background:radial-gradient(130% 120% at 50% 40%, #0d1d14, #050a07 80%); box-shadow:inset 0 0 18px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.05); }
  #homeNow .nowStats .nowBlk small{ font:8px var(--font-label); letter-spacing:.12em; color:rgba(var(--c-scan, 61,255,122), .75); }
  #homeNow .nowStats .nowBlk b{ font:clamp(16px, 2vw, 22px)/1 'Press Start 2P', monospace; color:rgb(var(--c-scan, 61,255,122)); text-shadow:0 0 10px rgba(var(--c-scan, 61,255,122), .55); white-space:nowrap; }
  #homeNow .nowStats .nowBlk em{ font:11px 'JetBrains Mono', monospace; color:rgba(var(--c-scan, 61,255,122), .7); }
  #homeNow .nowStats .nowBlk.buy{ --c-scan:61,255,122; --c-led:#3dff7a; --scan-d:0s; }
  #homeNow .nowStats .nowBlk.sell{ --c-scan:255,90,105; --c-led:#ff4757; --scan-d:-.9s; }
  #homeNow .nowStats .nowBlk.sell > i{ background:radial-gradient(130% 120% at 50% 40%, #1d0d10, #0a0506 80%); }
  #homeNow .nowStats .nowBlk.last{ --c-scan:255,200,80; --c-led:#ffc850; --scan-d:-1.8s; }
  #homeNow .nowStats .nowBlk.last > i{ background:radial-gradient(130% 120% at 50% 40%, #1d170b, #0a0805 80%); }
  #homeNow .nowStats .nowBlk.price{ --c-scan:var(--rh-lime-rgb); --c-led:var(--rh-lime); --scan-d:-2.7s; }
  #homeNow .nowStats .nowBlk.price .nowSpark{ position:absolute; left:14px; right:14px; bottom:9px; width:auto; height:22px; opacity:.6; z-index:0; }
  #homeNow .nowStats .nowBlk em.up{ color:var(--buy); } #homeNow .nowStats .nowBlk em.down{ color:var(--sell); }
  @media (max-width:700px){
    #homeNow .nowStage{ grid-template-columns:110px 1fr; grid-template-areas:"raw says" "screens screens"; align-items:center; gap:12px; }
    #homeNow .nowStats{ gap:10px; }
    #homeNow .nowStats .nowBlk > i{ min-height:72px; padding:10px 10px 8px; }
  }

  /* ==================================================================
     v0.33.0 #4: THE MAGAZINE RACK (assets/magazines.js): the NFT Report (salmon weekly) and the Whale Issue (monthly
     magazine) on a shelf under the newsstand, and the reader: the cover full-screen, then the story on newsprint
     ================================================================== */
  #panel-home .bubble.homeMags{ position:relative; padding:16px 18px 0; border-radius:8px; overflow:hidden; background:linear-gradient(180deg, #1c1510, #100b08); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 14px 30px rgba(0,0,0,.4); }
  .magSign{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px; }
  .magSign b{ font:10px 'Press Start 2P', monospace; color:#ffd24a; letter-spacing:.08em; text-shadow:0 0 10px rgba(255,210,74,.35); }
  .magSign small{ font:9px var(--font-label); color:#a89880; letter-spacing:.1em; text-transform:uppercase; }
  .magRow{ position:relative; display:flex; justify-content:center; align-items:flex-end; gap:clamp(18px, 4vw, 48px); padding:26px 8px 18px; }
  .magRow::after{ content:''; position:absolute; left:-18px; right:-18px; bottom:0; height:16px; background:linear-gradient(#8a6038 0 2px, #6b4626 2px 6px, #5a3a1f 6px 8px, #7a5532 8px 10px, #4a2f18 10px 14px, #2c1b0d 14px); box-shadow:0 6px 12px rgba(0,0,0,.5); }
  .magCover{ position:relative; z-index:1; display:flex; flex-direction:column; padding:0; border:0; cursor:pointer; text-align:left; font:inherit; border-radius:3px;
    box-shadow:0 2px 0 rgba(0,0,0,.25), 0 12px 22px rgba(0,0,0,.6); transform:rotate(var(--r, 0deg)) translateY(var(--lift, 0)); transition:transform .25s cubic-bezier(.3,1.5,.5,1), box-shadow .25s; }
  .magCover[hidden]{ display:none; }
  .magCover:hover, .magCover:focus-visible{ --lift:-10px; outline:none; box-shadow:0 0 0 2px #ffd24a, 0 18px 28px rgba(0,0,0,.6); }
  .magCover .mgTag{ position:absolute; top:-9px; left:50%; transform:translateX(-50%); z-index:3; padding:3px 6px; border-radius:2px; font:7px 'Press Start 2P', monospace; color:#1d1a14; background:#ffd24a; white-space:nowrap; }
  /* the NFT Report: salmon newsprint */
  .magNft{ --r:-1.5deg; width:min(200px, 40vw); aspect-ratio:3/4; padding:9px; color:#2b1d14; background:#f6d9c8; background-image:radial-gradient(rgba(60,30,20,.06) 1px, transparent 1px); background-size:3px 3px; }
  .magNft .nfM{ font:900 16px/1.05 'Playfair Display', Georgia, serif; text-align:center; border-bottom:1px solid #2b1d14; padding-bottom:3px; }
  .magNft .nfD{ font:700 8px 'Old Standard TT', Georgia, serif; letter-spacing:.12em; text-align:center; border-bottom:2px double #2b1d14; padding:2px 0; }
  .magNft .nfH{ margin:6px 0 4px; font:900 12px/1.12 'Playfair Display', Georgia, serif; }
  .magNft .nfC{ width:100%; height:auto; flex:1; min-height:0; object-fit:contain; image-rendering:pixelated; }
  .magNft .nfF{ display:flex; justify-content:space-between; margin-top:4px; padding-top:3px; border-top:1px solid rgba(43,29,20,.35); font:9px 'JetBrains Mono', monospace; }
  /* the Whale Issue: a glossy monthly */
  .magWhale{ --r:1.5deg; width:min(260px, 48vw); aspect-ratio:3/4; overflow:visible; color:#fff; background:#160f33; }
  .magWhale .wcC{ position:absolute; inset:0; width:100%; height:100%; border-radius:3px; }
  .magWhale .wcM{ position:absolute; left:0; right:0; top:7%; text-align:center; font:900 clamp(22px, 3.2vw, 34px)/1 'Playfair Display', Georgia, serif; color:#ffd24a; letter-spacing:.04em; text-shadow:0 2px 0 #6a3a00; }
  .magWhale .wcS{ position:absolute; left:0; right:0; top:18%; text-align:center; font:7px var(--font-label); color:#c9c0ff; letter-spacing:.14em; }
  .magWhale .wcL{ position:absolute; width:42%; font:700 11px/1.15 'Playfair Display', Georgia, serif; color:#fff; text-shadow:0 1px 2px #000; }
  .magWhale .wcL i{ display:block; font:italic 9px 'Old Standard TT', Georgia, serif; color:#ffd24a; }
  .magWhale .wcL.l{ left:7%; top:30%; } .magWhale .wcL.r{ right:7%; top:50%; text-align:right; }
  .magWhale .wcL.w{ left:7%; bottom:15%; width:60%; color:#ffd24a; font-size:10px; }
  .magWhale .wcF{ position:absolute; left:0; right:0; bottom:5%; text-align:center; font:900 12px 'Playfair Display', Georgia, serif; letter-spacing:.14em; }
  /* the reader */
  #magReader{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:24px 16px; background:rgba(4,5,10,.86); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); overflow-y:auto; }
  #magReader[hidden]{ display:none; }
  html.magOpen{ overflow:hidden; }
  #mrClose{ position:fixed; top:14px; right:14px; z-index:2; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.6); color:#fff; font-size:16px; cursor:pointer; }
  #mrClose:hover, #mrClose:focus-visible{ border-color:var(--rh-lime); color:var(--rh-lime); outline:none; }
  .mrStage{ position:relative; display:flex; flex-direction:column; align-items:center; gap:18px; max-height:100%; width:100%; }
  .mrStage.isCover .mrCover{ position:relative; display:flex; flex-direction:column; cursor:pointer; width:min(92vw, calc(min(78vh, 720px) * .75)) !important; height:auto; aspect-ratio:3/4; animation:mrIn .45s cubic-bezier(.2,.8,.25,1); box-shadow:0 30px 60px rgba(0,0,0,.7); }
  .mrStage.isCover .magNft{ padding:clamp(14px, 2vw, 24px); } .mrStage.isCover .magNft .nfM{ font-size:clamp(26px, 4vw, 40px); } .mrStage.isCover .magNft .nfD{ font-size:11px; } .mrStage.isCover .magNft .nfH{ font-size:clamp(16px, 2.2vw, 24px); } .mrStage.isCover .magNft .nfF{ font-size:12px; }
  .mrStage.isCover .magWhale{ } .mrStage.isCover .magWhale .wcM{ font-size:clamp(34px, 6vw, 64px); } .mrStage.isCover .magWhale .wcS{ font-size:10px; } .mrStage.isCover .magWhale .wcL{ font-size:clamp(14px, 2vw, 20px); } .mrStage.isCover .magWhale .wcL i{ font-size:12px; } .mrStage.isCover .magWhale .wcF{ font-size:clamp(16px, 2.2vw, 22px); }
  .mrStage .mgTag{ display:none; }
  .mrRead{ font:10px 'Press Start 2P', monospace; letter-spacing:.06em; color:#1d1a14; background:#ffd24a; border:0; border-radius:3px; padding:12px 18px; cursor:pointer; transform:skewX(-10deg); box-shadow:0 6px 16px rgba(0,0,0,.5); }
  .mrRead:hover, .mrRead:focus-visible{ background:#fff0a8; outline:none; }
  @keyframes mrIn{ from{ transform:perspective(1200px) rotateY(-24deg) scale(.86); opacity:0; } }
  .mrArt{ width:min(760px, 100%); padding:clamp(18px, 4vw, 40px); border-radius:4px; color:#1d1a14; background:#f3ecdb; background-image:radial-gradient(rgba(29,26,20,.06) 1px, transparent 1px); background-size:4px 4px;
    font:15px/1.6 'Old Standard TT', Georgia, serif; box-shadow:0 30px 60px rgba(0,0,0,.7); animation:mrIn .4s cubic-bezier(.2,.8,.25,1); }
  .mrArt.nftArt{ background-color:#f6d9c8; }
  .mrArt .mrHead{ text-align:center; border-bottom:3px double #1d1a14; padding-bottom:8px; margin-bottom:14px; }
  .mrArt .mrK{ font:700 10px 'Old Standard TT', Georgia, serif; letter-spacing:.2em; color:#8a1c1c; }
  .mrArt h2{ margin:6px 0 0; font:900 clamp(24px, 4vw, 38px)/1.08 'Playfair Display', Georgia, serif; }
  .mrArt h3{ margin:18px 0 6px; font:700 13px 'Playfair Display', Georgia, serif; letter-spacing:.12em; text-transform:uppercase; border-bottom:1px solid rgba(29,26,20,.5); padding-bottom:2px; }
  .mrArt .artPic{ display:block; width:min(100%, 420px); height:auto; margin:0 auto; image-rendering:pixelated; border:1px solid rgba(29,26,20,.4); }
  .mrArt .cap{ text-align:center; font:italic 13px 'Old Standard TT', Georgia, serif; color:#5a5244; margin:6px 0 14px; }
  .mrArt .lede{ font-size:17px; }
  .mrArt .mrTable{ width:100%; border-collapse:collapse; font-size:14px; } .mrArt .mrTable td{ padding:5px 0; border-bottom:1px dotted rgba(29,26,20,.4); } .mrArt .mrTable td:last-child{ text-align:right; font-weight:700; }
  .mrArt .fine{ font:italic 12px 'Old Standard TT', Georgia, serif; color:#5a5244; margin-top:12px; }
  .mrArt .spotted{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
  .mrArt .spotted a{ display:block; color:#2b1d14; text-decoration:none; font:10px 'JetBrains Mono', monospace; text-align:center; }
  .mrArt .spotted img{ display:block; width:100%; aspect-ratio:1; object-fit:cover; image-rendering:pixelated; border:1px solid rgba(43,29,20,.4); background:#e8c8b8; }
  .mrArt a{ color:#8a1c1c; }
  html[data-reduce-motion="true"] .mrStage.isCover .mrCover, html[data-reduce-motion="true"] .mrArt{ animation:none; }
  html[data-reduce-motion="true"] .magCover{ transition:none; }

  /* v0.33.0 #5: the newest paper's MORE NEWS band: the season race, from around the web, the Robinhood desk */
  .pMore:empty{ display:none; }
  .pMore{ margin-top:14px; border-top:3px double #1d1a14; padding-top:2px; }
  .pmLab{ text-align:center; font:700 10px 'Old Standard TT', Georgia, serif; letter-spacing:.3em; padding:4px 0; border-bottom:1px solid #1d1a14; }
  .pmCols{ display:grid; grid-template-columns:repeat(3, 1fr); } .pmCols.n2{ grid-template-columns:1.1fr 1fr; } .pmCols.n1{ grid-template-columns:1fr; }
  .pmCols section{ padding:10px 16px; border-left:1px solid rgba(29,26,20,.4); } .pmCols section:first-child{ border-left:0; padding-left:0; } .pmCols section:last-child{ padding-right:0; }
  .pmK{ font:700 10px 'Old Standard TT', Georgia, serif; letter-spacing:.16em; color:#8a1c1c; }
  .pmCols h4{ margin:3px 0 6px; font:900 19px/1.12 'Playfair Display', Georgia, serif; color:#111; }
  .pmCols p{ margin:0 0 8px; color:#1d1a14 !important; font-size:14px; line-height:1.45; }
  .pmRace{ list-style:none; margin:4px 0 0; padding:0; } .pmRace li{ display:flex; gap:8px; align-items:baseline; padding:4px 0; border-bottom:1px dotted rgba(29,26,20,.4); font-size:14px; color:#1d1a14; }
  .pmRace li i{ font-style:normal; width:2em; font-weight:700; color:#7a5530; } .pmRace li b{ margin-left:auto; font:700 12px 'JetBrains Mono', monospace; }
  .pmWeb{ list-style:none; margin:0; padding:0; } .pmWeb li{ padding:6px 0; border-bottom:1px solid rgba(29,26,20,.25); }
  .pmWeb a{ font:700 14px/1.3 'Old Standard TT', Georgia, serif; color:#1d1a14; text-decoration:none; } .pmWeb a:hover{ text-decoration:underline; }
  .pmWeb small{ display:block; margin-top:2px; font:10.5px 'JetBrains Mono', monospace; color:#6a6050; } .pmWeb small i{ font-style:normal; background:#1d1a14; color:#f3ecdb; padding:0 4px; margin-right:6px; border-radius:2px; }
  @media (max-width:860px){ .pmCols, .pmCols.n2{ grid-template-columns:1fr; } .pmCols section{ border-left:0; padding:10px 0; border-top:1px solid rgba(29,26,20,.3); } .pmCols section:first-child{ border-top:0; } }

  /* ==================================================================
     v0.34.0 #1: CLAIM YOUR GENERAL lives on the scroll, under FIND MY WALLET: a roster of the top named wallets
     (chips in their colours), the count enlisted, and the button. The claim dialog previews the name on a real
     killfeed line and on a battlefield banner. Top-trade cards from nameless wallets carry an UNCLAIMED tag.
     ================================================================== */
  .warScroll .claimRoll{ margin:18px 0 0; padding:14px 0 0; border-top:1px solid rgba(43,29,12,.35); text-align:center; }
  .warScroll .crHead{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:4px 12px; }
  .warScroll .crTitle{ font:9px 'Press Start 2P', monospace; letter-spacing:.06em; color:#3a2410; }
  .warScroll .crCount{ font:italic 13px 'Old Standard TT', Georgia, serif; color:#6a4a26; }
  .warScroll .crText{ margin:8px 0 0; text-align:left; font:14px/1.5 'Old Standard TT', Georgia, serif; color:#3b2810; }
  .warScroll .roster{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 8px; margin:12px 0 0; }
  .warScroll .roster[hidden]{ display:none; }
  .warScroll .rg{ display:inline-flex; align-items:baseline; gap:6px; padding:4px 10px 4px 7px; border:1px solid rgba(43,29,12,.45);
    border-left:5px solid var(--gc, #9be7c4); border-radius:2px; background:rgba(255,250,235,.6); font:14px 'Old Standard TT', Georgia, serif; color:#2b1d0c; }
  .warScroll .rg i{ font:700 11px 'Old Standard TT', Georgia, serif; font-style:normal; color:#7a5530; }
  .warScroll .rg b{ font-weight:700; }
  .warScroll .rg small{ font:11px 'JetBrains Mono', monospace; color:#6a5a40; }
  .warScroll .rg:first-child{ background:rgba(255,236,170,.75); border-color:#b88a14; border-left-color:var(--gc, #9be7c4); }
  .warScroll .rg:first-child b::after{ content:' \265B'; color:#b88a14; }
  .warScroll #claimGeneralBtn{ margin-top:12px; color:#f7e9c8; background:#7a1c24; border-color:#5a1018; }
  .warScroll #claimGeneralBtn:hover, .warScroll #claimGeneralBtn:focus-visible{ background:#962430; }
  /* the UNCLAIMED tag on a top-trade card */
  .bigWho:has(.unclaimed){ white-space:normal; }
  .unclaimed{ display:inline-block; vertical-align:1px; margin-left:2px; padding:3px 5px 2px; border:1px dashed rgba(255,211,138,.75); border-radius:2px;
    background:rgba(255,211,138,.08); color:#ffd38a; font:7px 'Press Start 2P', monospace; letter-spacing:.06em; cursor:pointer; }
  .unclaimed:hover, .unclaimed:focus-visible{ background:#ffd38a; color:#1d1a14; border-style:solid; outline:none; }
  /* the dialog's preview: a killfeed line and a banner on a bit of grass */
  .genPreview{ margin:4px 0 12px; }
  .genPreview > small{ display:block; margin-bottom:6px; font:8px var(--font-label, monospace); letter-spacing:.14em; color:var(--muted); }
  .genPreview .gpKf{ padding:7px 9px; border:1px solid var(--line); border-radius:4px; background:#07080e; font:11px/1.5 'JetBrains Mono', monospace; color:#c9c4b4; overflow-wrap:anywhere; }
  .genPreview .gpKf .t{ color:#6a6a7a; } .genPreview .gpKf b{ font-weight:700; } .genPreview .gpKf .verb{ color:var(--buy, #3dff7a); }
  .genPreview .gpKf .detail{ color:#8a8a9a; } .genPreview .gpKf .amt{ color:var(--buy, #3dff7a); font-weight:700; }
  .genPreview .gpField{ position:relative; height:74px; margin-top:8px; border-radius:4px; overflow:hidden;
    background:linear-gradient(180deg, #141c34, #2c3d62 70%, #3a4f78); }
  .genPreview .gpGrass{ position:absolute; left:0; right:0; bottom:0; height:16px; background:linear-gradient(#3f8a3a 0 4px, #2d6a2b 4px 9px, #1f4d1f 9px); image-rendering:pixelated; }
  .genPreview .gpPole{ position:absolute; left:28px; bottom:14px; width:3px; height:56px; background:linear-gradient(90deg, #e9e2cd, #8a826c); }
  .genPreview .gpPole::before{ content:''; position:absolute; left:-2px; top:-4px; width:7px; height:7px; border-radius:50%; background:#ffd24a; }
  .genPreview .gpFlag{ position:absolute; left:31px; top:8px; display:block; padding:5px 18px 5px 8px; background:var(--fc, #9be7c4);
    clip-path:polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%); transform-origin:0 50%; animation:gpWave 2.2s ease-in-out infinite;
    box-shadow:inset 0 -3px 0 rgba(0,0,0,.18); }
  .genPreview .gpFlag b{ font:9px 'Press Start 2P', monospace; letter-spacing:.04em; white-space:nowrap; }
  @keyframes gpWave{ 0%, 100%{ transform:skewY(0deg) scaleX(1); } 50%{ transform:skewY(-3deg) scaleX(.96); } }
  html[data-reduce-motion="true"] .genPreview .gpFlag{ animation:none; }

  /* v0.34.0 #3: the ribbons hang from the rod at the parchment's right edge: silk shading, a fold over the rod,
     swallowtail ends and a gentle sway on hover. The chosen window hangs longer, in gold. */
  .warScroll .ribbons{ top:30px; right:59px; gap:5px; filter:drop-shadow(0 3px 2px rgba(40,20,5,.45)); }
  .warScroll .ribbon{ padding:9px 9px 16px !important; box-shadow:none !important; transform-origin:50% 0; transition:padding .25s cubic-bezier(.3,1.4,.5,1);
    clip-path:polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 8px), 0 100%);
    background:linear-gradient(90deg, #5a1018 0, #8e2430 22%, #b23a46 46%, #8e2430 70%, #5a1018 100%) !important; text-shadow:0 1px 0 rgba(0,0,0,.4); }
  .warScroll .ribbon::before, .warScroll .ribbon:hover::before{ content:''; position:absolute; left:0; right:0; top:0; bottom:auto; width:auto; height:5px; opacity:1; animation:none; background:linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.1)); }
  .warScroll .ribbon::after{ content:''; position:absolute; left:3px; right:3px; bottom:12px; border-top:1px dashed rgba(255,230,190,.45); }
  .warScroll .ribbon.active{ padding-bottom:24px !important; color:#2b1d0c !important; text-shadow:0 1px 0 rgba(255,245,210,.5);
    background:linear-gradient(90deg, #7a5a0c 0, #c39a22 22%, #f0cf5a 46%, #c39a22 70%, #7a5a0c 100%) !important; }
  .warScroll .ribbon.active::after{ bottom:13px; border-top-color:rgba(60,40,5,.45); }
  .warScroll .ribbon:hover, .warScroll .ribbon:focus-visible{ animation:ribbonSway 1.4s ease-in-out infinite; outline:none; }
  .warScroll .ribbon:focus-visible{ filter:brightness(1.15); }
  @keyframes ribbonSway{ 0%, 100%{ rotate:0deg; } 30%{ rotate:3deg; } 70%{ rotate:-2.5deg; } }
  html[data-reduce-motion="true"] .warScroll .ribbon{ animation:none; transition:none; }
  @media (max-width:600px){ .warScroll.unrolled .lbTitle{ justify-content:flex-start; padding-left:40px; gap:8px; } .warScroll.unrolled .lbTitle .seal:last-child{ display:none; }
    .warScroll .ribbons{ top:19px; right:42px; gap:4px; } .warScroll .ribbon{ padding:7px 6px 14px !important; font-size:7px !important; } .warScroll .ribbon.active{ padding-bottom:20px !important; } }

  /* v0.34.0 #2: the dock sits 10px further in from the right and 12px higher, so the cat cube's corner clears the
     curved corners of an iPhone screen. The menu and the field toast move with it. */
  #tabDock{ right:calc(24px + env(safe-area-inset-right, 0px)); bottom:calc(30px + env(safe-area-inset-bottom, 0px)); }
  #dockMenu{ right:calc(28px + env(safe-area-inset-right, 0px)); bottom:calc(106px + env(safe-area-inset-bottom, 0px)); }
  html.dockTop #dockMenu{ top:calc(var(--tmBottom, 70px) + 10px); bottom:auto; right:14px; }
  #fieldToast{ right:calc(24px + env(safe-area-inset-right, 0px)); bottom:calc(104px + env(safe-area-inset-bottom, 0px)); }
  html:not(.dockOut) #fieldToast{ bottom:calc(88px + env(safe-area-inset-bottom, 0px)); }

  /* ==================================================================
     v0.35.0 #1: RIGHT NOW AS A NEWS BROADCAST (CCN). A LIVE bug and a clock in the strip, RAW anchoring behind the
     CCN desk (canvas), the TOP STORY wall beside him with the four monitors under it, PRICE drawing the day's line,
     a BREAKING bar that slides in when a king lands, and the web's headlines crawling along the bottom.
     #2: the WAR ROOM stands on its own, with no panel around it.
     ================================================================== */
  #panel-home .bubble.homeFront, #panel-home .bubble.homeFront:hover{ border:0; border-radius:0; background:none; box-shadow:none; overflow:visible;
    -webkit-backdrop-filter:none; backdrop-filter:none; }
  html[data-reduce-transparency="true"] #panel-home .bubble.homeFront{ background:none; }
  #panel-home .homeFront .frontHead{ padding:0 0 10px; background:none; border-bottom:2px solid rgba(var(--rh-lime-rgb),.4); }
  #panel-home .homeFront .homeBig{ padding:16px 0 20px; }
  #panel-home .homeFront .homeNow{ position:relative; padding:18px 0 0; border-top:1px dashed rgba(255,255,255,.14); }
  @media (max-width:560px){ #panel-home .homeFront .frontHead{ padding:0 0 8px; } #panel-home .homeFront .homeBig, #panel-home .homeFront .homeNow{ padding-left:0; padding-right:0; } }
  /* the strip */
  #homeNow .nowHead{ gap:10px; }
  #homeNow .onAir{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px 3px 7px; border-radius:2px; background:#e0182c; color:#fff; font:8px 'Press Start 2P', monospace; letter-spacing:.08em; }
  #homeNow .onAir .nowDot{ width:7px; height:7px; background:#fff; box-shadow:0 0 6px #fff; }
  #homeNow[data-mode="connecting"] .onAir, #homeNow[data-mode="offline"] .onAir{ background:#4a4f5e; }
  #homeNow .nowHead .frontSub{ font:9px 'Press Start 2P', monospace; letter-spacing:.06em; color:var(--ink); }
  #homeNow .nowClock{ font:11px 'JetBrains Mono', monospace; color:#c9c0ff; letter-spacing:.04em; min-width:8ch; text-align:right; }
  /* the set: RAW at the desk on the left; the TOP STORY wall and the monitors on the right */
  #homeNow .nowStage{ position:relative; grid-template-columns:minmax(210px, .8fr) 1.6fr; grid-template-areas:"raw story" "raw screens"; gap:14px 22px; align-items:stretch; margin-top:14px; }
  #homeNow .rawCast{ align-self:end; }
  #homeNow .rawCast canvas{ max-width:300px; }
  #homeNow .nowStory{ grid-area:story; position:relative; padding:12px 16px 14px; border:2px solid #3a4a80; border-radius:4px;
    background:linear-gradient(180deg, rgba(35,48,90,.85), rgba(11,16,36,.92)); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 22px rgba(0,0,0,.45); }
  #homeNow .nowStory .nsK{ display:inline-block; padding:3px 6px 2px; background:#c9c0ff; color:#141c34; font:7px 'Press Start 2P', monospace; letter-spacing:.1em; }
  #homeNow .nowStory .nowLead{ margin:8px 0 0; font:900 clamp(17px, 2.1vw, 24px)/1.22 'Playfair Display', Georgia, serif; color:#fff; letter-spacing:0; text-shadow:0 2px 0 rgba(0,0,0,.4); }
  #homeNow .nowStory .nowLead.buy{ color:#8dffb2; } #homeNow .nowStory .nowLead.sell{ color:#ff9aa5; }
  #homeNow .nowStory.pop{ animation:storyPop .35s cubic-bezier(.3,1.6,.5,1); }
  #homeNow .nowStory.shake{ animation:storyShake .45s; }
  #homeNow .nowStory.gold{ border-color:#ffd24a; } #homeNow .nowStory.pink{ border-color:#ff5a6e; }
  @keyframes storyPop{ from{ transform:scale(.97); filter:brightness(1.4); } }
  @keyframes storyShake{ 20%, 60%{ transform:translateX(-3px); } 40%, 80%{ transform:translateX(3px); } }
  /* the monitors: no scan lines; PRICE draws the day's line along the bottom of its screen */
  #homeNow .nowStats .nowBlk > i{ height:100%; box-sizing:border-box; }
  #homeNow .nowStats .nowBlk.price > i{ min-height:96px; padding-bottom:40px; }
  #homeNow .nowStats .nowBlk.price .nowSpark{ position:absolute; left:0; right:0; bottom:0; width:100%; height:38px; opacity:1; z-index:0; }
  #homeNow .nowStats .nowBlk.price .nowSpark .spLine{ stroke:rgb(var(--c-scan)); stroke-width:2; filter:drop-shadow(0 0 3px rgba(var(--c-scan),.7)); }
  #homeNow .nowStats .nowBlk.price .nowSpark .spFill{ fill:rgba(var(--c-scan),.14); }
  #homeNow .nowStats .nowBlk.price .nowSpark.down .spLine{ stroke:#ff5a69; filter:drop-shadow(0 0 3px rgba(255,90,105,.7)); } #homeNow .nowStats .nowBlk.price .nowSpark.down .spFill{ fill:rgba(255,90,105,.14); }
  #homeNow .nowStats .nowBlk.price small, #homeNow .nowStats .nowBlk.price b, #homeNow .nowStats .nowBlk.price em{ position:relative; z-index:1; }
  #homeNow .nowStats .nowBlk .spWin{ margin-left:6px; opacity:.6; }
  /* BREAKING */
  #homeNow .nowBreak{ position:absolute; left:0; right:0; bottom:-4px; z-index:5; display:flex; align-items:center; gap:12px; min-height:36px; padding:6px 14px 6px 0;
    background:#ffd24a; color:#1d1a14; font:700 14px/1.3 'JetBrains Mono', monospace; box-shadow:0 6px 18px rgba(0,0,0,.55); }
  #homeNow .nowBreak[hidden]{ display:none; }
  #homeNow .nowBreak i{ align-self:stretch; display:flex; align-items:center; margin:-6px 0; padding:0 12px; font:9px 'Press Start 2P', monospace; font-style:normal; letter-spacing:.06em; background:#e0182c; color:#fff; }
  #homeNow .nowBreak.in{ animation:breakIn .5s cubic-bezier(.2,.9,.3,1); }
  @keyframes breakIn{ from{ transform:translateX(-100%); opacity:.4; } }
  /* the HEADLINES crawl */
  #homeNow .nowCrawl{ display:flex; align-items:stretch; height:34px; margin-top:18px; border-top:2px solid #e0182c; background:#0a0c14; overflow:hidden; }
  #homeNow .nowCrawl[hidden]{ display:none; }
  #homeNow .ncK{ flex:none; display:flex; align-items:center; padding:0 10px; background:#e0182c; color:#fff; font:8px 'Press Start 2P', monospace; letter-spacing:.06em; z-index:1; }
  #homeNow .ncTrack{ position:relative; flex:1; min-width:0; overflow:hidden; }
  #homeNow .ncRun{ position:absolute; top:0; bottom:0; left:0; display:flex; white-space:nowrap; animation:ncCrawl var(--ncDur, 60s) linear infinite; }
  #homeNow .nowCrawl:hover .ncRun, #homeNow .nowCrawl:focus-within .ncRun, #homeNow .nowCrawl.off .ncRun{ animation-play-state:paused; }
  #homeNow .ncSet{ display:flex; align-items:center; padding-left:18px; }
  #homeNow .ncItem{ color:#e8ecf4; text-decoration:none; font:12px 'JetBrains Mono', monospace; }
  #homeNow .ncItem b{ color:#ffd24a; font-weight:700; }
  #homeNow .ncItem small{ margin-left:6px; color:#8a93a8; font-size:10px; }
  #homeNow .ncItem:hover, #homeNow .ncItem:focus-visible{ color:#fff; text-decoration:underline; outline:none; }
  #homeNow .ncSep{ margin:0 18px; color:#e0182c; font-style:normal; font-size:9px; }
  @keyframes ncCrawl{ to{ transform:translateX(-50%); } }
  html[data-reduce-motion="true"] #homeNow .ncRun{ position:static; animation:none; }
  html[data-reduce-motion="true"] #homeNow .ncTrack{ overflow-x:auto; display:flex; }
  html[data-reduce-motion="true"] #homeNow .ncSet[aria-hidden="true"]{ display:none; }
  html[data-reduce-motion="true"] #homeNow .nowStory.pop, html[data-reduce-motion="true"] #homeNow .nowStory.shake, html[data-reduce-motion="true"] #homeNow .nowBreak.in{ animation:none; }
  @media (max-width:700px){
    #homeNow .nowStage{ grid-template-columns:120px 1fr; grid-template-areas:"raw story" "screens screens"; align-items:end; gap:12px; }
    #homeNow .nowStory{ padding:10px 12px 12px; }
    #homeNow .nowStory .nowLead{ font-size:16px; }
    #homeNow .nowHead .nowWindow{ display:none; }
    #homeNow .nowClock{ margin-left:auto; }
    #homeNow .nowBreak{ font-size:11px; gap:8px; } #homeNow .nowBreak i{ padding:0 8px; font-size:7px; }
  }

  /* ==================================================================
     v0.36.0 #2: viewport-fit=cover (index.html) lets the page reach under an iPhone's home bar and makes the
     safe-area insets real; in landscape the page keeps clear of the notch with side padding. (WIN98 / AERO taskbars
     use the bottom inset in their theme files.)
     ================================================================== */
  body{ padding-left:env(safe-area-inset-left, 0px); padding-right:env(safe-area-inset-right, 0px); }

  /* v0.36.0 #3: REFRESH beside PAUSE reloads only the battlefield; the arrow turns while it loads */
  .bfRefresh{ display:inline-flex; align-items:center; gap:6px; }
  .bfRefresh .brIc{ display:inline-block; font-style:normal; font-size:13px; line-height:1; }
  .bfRefresh.spin .brIc{ animation:brSpin .8s linear infinite; }
  .bfRefresh:disabled{ opacity:.7; cursor:progress; }
  @keyframes brSpin{ to{ transform:rotate(360deg); } }
  html[data-reduce-motion="true"] .bfRefresh.spin .brIc{ animation:none; }

  /* v0.36.0 #7: ?obs=news, CCN on its own for an OBS browser source. Only the broadcast shows (site.js moves it into
     #obsStage and scales it to the window); the battlefield keeps running off-screen and muted to feed it.
     &bg=0: a transparent background. */
  html.obsNews, html.obsNews body{ min-height:0; overflow:hidden; background:radial-gradient(120% 90% at 30% 15%, #1c2750, #070a18 70%); }
  html.obsNews.obsClear, html.obsNews.obsClear body{ background:transparent; }
  html.obsNews body > :not(#obsStage):not(#battlefieldSection):not(svg):not(script){ display:none !important; }
  html.obsNews #battlefieldSection{ position:fixed !important; left:-10000px; top:0; width:960px; height:540px; pointer-events:none; }
  html.obsNews body{ display:flex; align-items:center; justify-content:center; height:100vh; padding:0; }
  html.obsNews #obsStage{ width:1100px; margin:0 auto; padding:22px 24px; }
  html.obsNews #obsStage #homeNow{ padding:0; border:0; }
  html.obsNews #obsStage .nowHead .frontSub{ font-size:11px; }

  /* ==================================================================
     v0.36.0 #1: READABILITY FLOOR. Measured on desktop and a 390px phone, the smallest text was 7px pixel type
     (Press Start 2P / Silkscreen are drawn on an 8px grid, so anything under 8px smears) and 9-10px reading text.
     Pixel type now never goes under 8px, and buttons, footers and fine print read at 11px (10.5px in the phone
     battlefield bar, where five buttons share a row). Settings → Text size (the A / A / A / A row) scales the rest.
     ================================================================== */
  .bigKind, .unclaimed, #homeNow .nowStory .nsK, .magCover .mgTag{ font-size:8px; }
  @media (max-width:480px){ .bigKind{ font-size:8px; letter-spacing:0; } }
  @media (max-width:600px){ .warScroll .ribbon{ font-size:8px !important; } }
  .lbTab{ font-size:11px; }
  #feedSwitch .lbTab{ font-size:11px; }
  .bigWin .lbTab{ font-size:10px; }
  #siteFooter .build, #siteFooter .copyline{ font-size:11px; }
  #homeNow .ncItem{ font-size:13px; } #homeNow .ncItem small{ font-size:11px; }
  .feedBadge{ font-size:10px; }
  @media (max-width:500px){
    #feedSwitch .lbTab{ font-size:10px; padding:6px 8px; }
    #feedSwitch .bfRefresh .brTx{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }   /* the arrow alone on phones */
    #feedSwitch .bfRefresh{ padding:6px 10px; }
    #feedSwitch .bfRefresh .brIc{ font-size:15px; }
  }

  /* ==================================================================
     v0.37.0 #2: SMALL LABELS IN JETBRAINS MONO. Every label that was pixel type (Press Start 2P / Silkscreen) under
     10px is now JetBrains Mono bold, uppercase as before, at 10-12px: pixel fonts only stay sharp at 8 / 16 / 24px, so
     small ones smeared. The pixel fonts stay for headings and big numbers (16px and up) and for the art (the
     magazine cover's own print). WIN98 / AERO keep their system fonts (their theme files win).
     ================================================================== */
  :root{ --font-small:'JetBrains Mono', ui-monospace, monospace; }
  #titleRow h1 .h1Live{ font-family:var(--font-small); font-weight:700; font-size:11px; letter-spacing:.14em; }
  .cartLabel, .exBig h3, .timeline b, .projBody b, .themeChip, .noteTopics span, #customizerPanel .custSection h4{ font-family:var(--font-small); font-weight:700; font-size:11px; }
  .frontSeason, .bigKind, .unclaimed, #homeNow .onAir, #homeNow .nowStory .nsK, .nowBlk small, #homeNow .nowStats .nowBlk small, .standSign small, .magSign small,
  #homeNow .ncK, .magCover .mgTag, .readMore, #siteFooter .readMore, .walletBtn .chainTag, .cartStamp, .connHead, .connMk, .petSwap,
  .deck .spTrack small, .lcdTrk, .deck .spVol label, #relayDot{ font-family:var(--font-small); font-weight:700; font-size:10px; }
  .bigKind{ font-size:11px; letter-spacing:.06em; }
  #homeNow .nowHead .frontSub{ font-family:var(--font-small); font-weight:700; font-size:12px; letter-spacing:.14em; }
  .warScroll .ribbon{ font-family:var(--font-small) !important; font-weight:700; font-size:10px !important; letter-spacing:.06em; }
  @media (max-width:600px){
    .warScroll .ribbon{ font-size:10px !important; }
    .warScroll.unrolled .lbTitle, .warScroll .lbTitle{ font-family:var(--font-small) !important; font-weight:700; font-size:12px !important; letter-spacing:.12em; }
  }
  @media (max-width:480px){ .bigKind{ font-size:10px; letter-spacing:.02em; } #titleRow h1 .h1Live{ font-size:10px; } }

  /* v0.37.0 #4: DEMO DATA (assets/demo.js). Sections filled with sample data carry a stamp in their corner, and a
     strip along the bottom says the page is showing sample numbers. */
  .demoStamp{ position:absolute; top:-9px; left:50%; translate:-50% 0; z-index:20; padding:2px 7px 1px; border:2px solid #ff3b4f; border-radius:3px; transform:rotate(-4deg);
    background:rgba(20,6,10,.85); color:#ff6b7c; font:700 10px var(--font-small, 'JetBrains Mono', monospace); letter-spacing:.14em; pointer-events:none; }
  html.demoData body::after{ content:'DEMO: sample numbers (TestCat) where the relay had nothing. Not real trades.'; position:fixed; left:0; right:0; bottom:0; z-index:58;
    padding:4px 12px calc(4px + env(safe-area-inset-bottom, 0px)); background:rgba(224,24,44,.92); color:#fff; font:700 11px var(--font-small, 'JetBrains Mono', monospace); letter-spacing:.06em; text-align:center; pointer-events:none; }
  html.obsNews.demoData body::after{ bottom:auto; top:0; }

  /* ==================================================================
     v0.38.0: THE CCN IS THE WAR ROOM. It opens the page (no panel, no TOP TRADES block above it): the strip carries
     LIVE, the network, ⚔ WAR ROOM with the season countdown, and the clock. Six monitors, 3x2: BUYS, SELLS, PRICE /
     BIGGEST BUY (gold), BIGGEST SELL, LAST TRADE (what it was, not only when); the 24H / 7D / 30D switch sits under
     them. Phones: 2x3 with the two biggest side by side. A new 24H record flashes the gold monitor.
     ================================================================== */
  #panel-home .homeFront .homeNow{ padding-top:0; border-top:0; }
  #homeNow .nowHead{ flex-wrap:wrap; row-gap:6px; padding-bottom:10px; border-bottom:2px solid rgba(var(--rh-lime-rgb),.4); }
  #homeNow .frontRoom{ margin-left:auto; display:inline-flex; align-items:baseline; gap:8px; }
  #homeNow .frontRoom b{ font:700 11px var(--font-small); letter-spacing:.14em; color:var(--rh-lime); }
  #homeNow .frontRoom b i{ font-style:normal; }
  #homeNow .frontRoom .frontSeason{ margin:0; font:700 10px var(--font-small); letter-spacing:.08em; color:var(--muted); text-transform:uppercase; }
  #homeNow .nowStage{ grid-template-areas:"raw story" "raw screens" "raw win"; }
  #homeNow .nowStats{ grid-template-columns:repeat(3, 1fr); gap:12px; }
  #homeNow .nowStats.noBig{ grid-template-columns:1fr 1fr; }
  #homeNow .nowStats.noBig .bigBlk{ display:none; }
  #homeNow .nowStats .nowBlk.bigBuy{ --c-scan:255,210,74; --c-led:#ffd24a; }
  #homeNow .nowStats .nowBlk.bigBuy > i{ background:radial-gradient(130% 120% at 50% 40%, #241b06, #0a0805 80%); }
  #homeNow .nowStats .nowBlk.bigBlk b{ font-size:clamp(16px, 1.9vw, 21px); }
  #homeNow .nowStats .nowBlk .bigWho{ display:block; font:11px/1.45 'JetBrains Mono', monospace; color:rgba(var(--c-scan), .78); white-space:normal; overflow:visible; }
  #homeNow .nowStats .nowBlk .bigWho .bigGen{ font-weight:700; }
  #homeNow .nowStats .nowBlk .bigWho .unclaimed{ margin-left:2px; }
  #homeNow .nowStats .nowBlk.tap{ cursor:pointer; }
  #homeNow .nowStats .nowBlk.tap:hover, #homeNow .nowStats .nowBlk.tap:focus-visible{ outline:2px solid rgba(var(--c-scan), .7); outline-offset:2px; }
  #homeNow .nowStats .nowBlk em#nowLastWhat.up{ color:var(--buy); } #homeNow .nowStats .nowBlk em#nowLastWhat.down{ color:var(--sell); }
  #homeNow .nowStage > .bigWin{ grid-area:win; justify-self:end; display:flex; gap:6px; margin:-4px 0 0; }
  #homeNow .nowStage > .bigWin[hidden]{ display:none; }
  #homeNow .nowStage > .bigWin .lbTab{ padding:4px 10px; font-size:10px; }
  /* a new 24H record: the gold monitor flares three times */
  #homeNow .nowStats .nowBlk.bigBuy.record{ animation:recFlare 1.3s ease-out 3; }
  @keyframes recFlare{ 0%{ box-shadow:0 0 0 2px #ffd24a, 0 0 34px 8px rgba(255,210,74,.75); } 100%{ box-shadow:0 0 0 0 rgba(255,210,74,0), 0 8px 18px rgba(0,0,0,.5); } }
  #homeNow .nowBreak.rec{ background:linear-gradient(90deg, #ffd24a, #fff1a8 50%, #ffd24a); }
  #homeNow .nowBreak.rec i{ background:#7a5a0c; }
  html[data-reduce-motion="true"] #homeNow .nowStats .nowBlk.bigBuy.record{ animation:none; box-shadow:0 0 0 2px #ffd24a; }
  @media (max-width:700px){
    #homeNow .nowStage{ grid-template-areas:"raw story" "screens screens" "win win"; }
    #homeNow .nowStats{ grid-template-columns:1fr 1fr; gap:10px; }
    #homeNow .nowStats .nowBlk.price, #homeNow .nowStats .nowBlk.last{ order:2; }   /* the two biggest stay side by side */
    #homeNow .nowStats .bigWinWrap{ display:none; }   /* the switch under the monitors says which window */
    #homeNow .frontRoom{ margin-left:0; order:3; flex-basis:100%; }
    #homeNow .nowClock{ margin-left:auto; }
  }
  html.obsNews #homeNow .nowStage > .bigWin{ display:none; }   /* nobody can press it on a stream */

  /* v0.39.0: the paper's link to TOKEN → THE EXCHANGE DESK, inked like the rest of the page */
  .pFlow .pfN .pfLink{ color:#8a1c1c; font-weight:700; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; }
  .pFlow .pfN .pfLink:hover, .pFlow .pfN .pfLink:focus-visible{ color:#1d1a14; background:rgba(138,28,28,.12); outline:none; }

  /* v0.40.1 #1: the scroll's two buttons are plain printed blocks: FIND is as tall as the address box with square
     corners, CLAIM YOUR GENERAL a crimson rectangle (no slant, no sword) */
  .warScroll .findWallet input{ height:38px; box-sizing:border-box; }
  .warScroll .scrollBtn{ display:inline-flex; align-items:center; justify-content:center; height:38px; padding:0 18px; border:1px solid #3d2410; border-radius:2px;
    background:#5c3a17; color:#f7e9c8; font:700 11px var(--font-small, 'JetBrains Mono', monospace); letter-spacing:.14em; cursor:pointer;
    box-shadow:inset 0 1px 0 rgba(255,240,210,.18), 0 2px 0 rgba(43,29,12,.35); transform:none; }
  .warScroll .scrollBtn:hover, .warScroll .scrollBtn:focus-visible{ filter:brightness(1.15); outline:2px solid #b88a14; outline-offset:2px; }
  .warScroll .scrollBtn:active{ transform:translateY(1px); box-shadow:inset 0 1px 0 rgba(255,240,210,.18); }
  .warScroll .scrollBtn.claimBtn{ margin-top:12px; padding:0 26px; background:#7a1c24; border-color:#5a1018; }
  html[data-reduce-motion="true"] .warScroll .scrollBtn:active{ transform:none; }

  /* v0.40.1 #3: phones. TOP STORY is one monitor wide and taller, so RAW gets the other half: about 40% bigger */
  @media (max-width:700px){
    #homeNow .nowStage{ grid-template-columns:1fr 1fr; column-gap:10px; align-items:stretch; }
    #homeNow .rawCast{ align-self:end; }
    #homeNow .rawCast canvas{ width:100%; max-width:none; }
    #homeNow .nowStory{ display:flex; flex-direction:column; justify-content:center; min-height:150px; padding:12px; }
    #homeNow .nowStory .nowLead{ font-size:16px; line-height:1.22; }
  }
  @media (max-width:600px){ .warScroll .findWallet label{ flex-basis:100%; } .warScroll .findWallet input{ flex:1 1 140px; } }   /* FIND stays beside the box on phones */

  /* v0.41.0 #1: TOKEN's THE EXCHANGE DESK jump (beside PRICE & LIQUIDITY) and its NEW dot for fresh transfers */
  .verifyLinks .exJump{ border-color:rgba(255,211,138,.55); color:#ffd38a; }
  .verifyLinks .exJump[hidden]{ display:none; }
  .exNew{ display:inline-flex; align-items:center; gap:4px; margin-left:8px; padding:1px 5px; border-radius:2px; background:#e0182c; color:#fff; font:700 9px var(--font-small, 'JetBrains Mono', monospace); letter-spacing:.08em; }
  .exNew[hidden]{ display:none; }
  .exNew i{ position:relative; width:6px; height:6px; border-radius:50%; background:#fff; }
  .exNew i::after{ content:''; position:absolute; inset:-3px; border-radius:50%; border:2px solid #fff; animation:exPing 1.4s ease-out infinite; }
  @keyframes exPing{ from{ transform:scale(.6); opacity:1; } to{ transform:scale(2.2); opacity:0; } }
  .verifyLinks .exJump.hasNew{ animation:exNudge 2.6s ease-in-out infinite; }
  @keyframes exNudge{ 0%, 80%, 100%{ box-shadow:none; } 88%{ box-shadow:0 0 0 2px rgba(224,24,44,.6), 0 0 14px rgba(224,24,44,.5); } }
  html[data-reduce-motion="true"] .exNew i::after, html[data-reduce-motion="true"] .verifyLinks .exJump.hasNew{ animation:none; }

  /* v0.41.0 #2: MEMES' creators in one CREATORS ▾ menu (same pills) */
  .memeCreators{ position:relative; display:inline-flex; }
  .memeCreatorMenu{ position:absolute; top:calc(100% + 6px); left:0; z-index:30; display:flex; flex-direction:column; align-items:stretch; gap:6px; min-width:190px; max-height:min(60vh, 380px); overflow-y:auto;
    padding:8px; border:1px solid rgba(var(--rh-lime-rgb),.35); border-radius:6px; background:rgba(8,10,18,.97); box-shadow:0 14px 30px rgba(0,0,0,.6); }
  .memeCreatorMenu[hidden]{ display:none; }
  .memeCreatorMenu .lbTab{ justify-content:space-between; text-align:left; font-size:10px; padding:6px 11px; }
  .memeCreatorMenu .lbTab small{ margin-left:8px; opacity:.6; font-size:10px; }
  @media (max-width:560px){ .memeCreatorMenu{ left:auto; right:0; } }
  /* v0.41.0 #3: the magazines' deck line under the headline */
  .mrArt .mrDeck{ margin:6px 0 0; font:italic 15px/1.4 'Old Standard TT', Georgia, serif; color:#5a5244; }

  /* v0.41.0 #5: the pet's room is a pixel-wood pet box: a plank frame with corner nails around a dim plank wall */
  .petRoom{ border:10px solid transparent; border-radius:2px;
    border-image:repeating-linear-gradient(90deg, #9b6a35 0 14px, #8a5a2b 14px 16px, #a8763d 16px 30px, #6b4220 30px 32px) 10;
    background:
      radial-gradient(70% 55% at 50% 35%, rgba(255,214,140,.16), transparent 70%),
      repeating-linear-gradient(90deg, #3d2815 0 26px, #301f10 26px 28px, #442d18 28px 54px, #2a1a0d 54px 56px),
      #34230f;
    box-shadow:inset 0 0 0 2px #2a1a0d, inset 0 6px 14px rgba(0,0,0,.45), 0 4px 0 #4a2f16, 0 10px 18px rgba(0,0,0,.45); }
  .petRoom::before{ content:''; position:absolute; inset:-10px; pointer-events:none; z-index:2;
    background:
      radial-gradient(circle, #d8c49a 0 1.5px, #5a3a1a 2px 3px, transparent 3.5px) 3px 3px / 0 0 no-repeat,
      linear-gradient(#5a3a1a, #5a3a1a) 2px 2px / 6px 6px no-repeat, linear-gradient(#d8c49a, #d8c49a) 4px 4px / 2px 2px no-repeat,
      linear-gradient(#5a3a1a, #5a3a1a) calc(100% - 2px) 2px / 6px 6px no-repeat, linear-gradient(#d8c49a, #d8c49a) calc(100% - 4px) 4px / 2px 2px no-repeat,
      linear-gradient(#5a3a1a, #5a3a1a) 2px calc(100% - 2px) / 6px 6px no-repeat, linear-gradient(#d8c49a, #d8c49a) 4px calc(100% - 4px) / 2px 2px no-repeat,
      linear-gradient(#5a3a1a, #5a3a1a) calc(100% - 2px) calc(100% - 2px) / 6px 6px no-repeat, linear-gradient(#d8c49a, #d8c49a) calc(100% - 4px) calc(100% - 4px) / 2px 2px no-repeat; }
  .petRoom:hover{ border-color:transparent; filter:brightness(1.06); }

  /* v0.41.0 #6: RAW can be petted (tap him) */
  #homeNow .rawCast{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
  #homeNow .rawCast:focus-visible{ outline:2px solid var(--rh-lime); outline-offset:4px; border-radius:6px; }