:root {
  --bg: #07060d;
  --ink: #f2f4fa;
  --muted: #a9abc0;
  --ice: #d4ff8a;
  --violet: #9b4dff;
  --pink: #ff3dcb;
  --cyan: #2ff3ff;
  --slime: #b6ff1a;
  --gold: #ffc933;
  --chrome: linear-gradient(180deg, #ffffff 0%, #dfe4ee 20%, #8791a4 46%, #f7f9fc 53%, #b3bccb 72%, #eef1f7 100%);
  --iri: linear-gradient(135deg, #efffb8, #b6ff1a 30%, #4f9f08 62%, #c8ff4a);  /* slime edge (was the rainbow) */
  --slime-gloss: linear-gradient(180deg, #efffb8, #b6ff1a 45%, #5fbf0a 55%, #c8ff4a);
  --slime-blob: radial-gradient(circle at 35% 28%, #f6ffd2, #b6ff1a 42%, #4f9f08 92%);
  --lcd-green: linear-gradient(#0e2410, #061307);
  --iri-conic: conic-gradient(from 210deg, #efffb8, #b6ff1a, #3f8f06, #d6ff5c, #7ed321, #efffb8);
  --display: "Syncopate", "Arial Black", sans-serif;
  --blackletter: "Pirata One", "Old English Text MT", serif;
  --lcd: "Share Tech Mono", "Courier New", monospace;
  --body: Tahoma, Verdana, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 70px; }
body { margin: 0; color: var(--ink); font: 15px/1.6 var(--body); background: var(--bg); overflow-x: hidden; }
a { color: var(--ice); }
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; z-index: 60; background: #fff; color: #000; padding: 8px 12px; }

/* ── background: drifting iridescent haze + glitter ─── */
.haze { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.haze i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; opacity: .28; animation: drift 26s ease-in-out infinite alternate; }
.haze i:nth-child(1) { left: -25vmax; top: -20vmax; background: radial-gradient(circle, var(--violet), transparent 62%); }
.haze i:nth-child(2) { right: -30vmax; top: 20vh; background: radial-gradient(circle, var(--pink), transparent 62%); animation-duration: 32s; opacity: .18; }
.haze i:nth-child(3) { left: 10vw; bottom: -40vmax; background: radial-gradient(circle, var(--cyan), transparent 62%); animation-duration: 38s; opacity: .16; }
@keyframes drift { to { transform: translate(8vmax, 6vmax) scale(1.1); } }
.haze::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 120px 90px, rgba(255,255,255,.7), transparent), radial-gradient(1.5px 1.5px at 200px 160px, #fff, transparent), radial-gradient(1px 1px at 60px 180px, rgba(255,255,255,.6), transparent); background-size: 240px 220px; opacity: .35; }

/* ── shared pieces ─────────────────────────────────── */
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.track { padding-top: 96px; }
.track-head { text-align: center; margin-bottom: 30px; }
.track-no { margin: 0; font-family: var(--lcd); font-size: 13px; letter-spacing: .32em; color: var(--ice); text-shadow: 0 0 8px rgba(182,255,26,.45); }
.track-no::before, .track-no::after { content: "✦"; margin: 0 .8em; color: var(--slime); }
.chrome { display: inline-block; margin: 8px 0 0; font-family: var(--display); font-weight: 700; font-size: clamp(24px, 6.2vw, 52px); line-height: 1.05; letter-spacing: .02em; text-transform: uppercase; transform: skewX(-8deg);
  background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 #1b1f2a) drop-shadow(0 0 20px rgba(182,255,26,.35)); }
.kicker { margin: 0; font-family: var(--blackletter); font-size: clamp(22px, 5vw, 32px); line-height: 1.1; color: #fff; text-shadow: 0 0 10px var(--slime), 0 0 26px rgba(182,255,26,.45); }
.glass { background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.18); border-radius: 24px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 24px 50px rgba(0,0,0,.5); }
.fine { margin: 18px auto 0; max-width: 40em; font-size: 12px; color: var(--muted); text-align: center; }

/* glossy aqua pills */
.pill { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; overflow: hidden; cursor: pointer; text-decoration: none; text-align: center;
  font-family: var(--display); font-weight: 700; font-size: clamp(12px, 3.4vw, 15px); letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; color: #1a1000;
  padding: 16px 28px; border-radius: 999px; border: 1px solid rgba(0,0,0,.45);
  background: linear-gradient(180deg, #ffe58a, #ffc933 45%, #e39a00 55%, #ffd24a);
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.25), 0 8px 22px rgba(255,201,51,.35), 0 0 0 3px rgba(255,255,255,.12); transition: transform .1s; }
.pill::before { content: ""; position: absolute; left: 9%; right: 9%; top: 3px; height: 44%; border-radius: 999px; background: linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.08)); pointer-events: none; }
.pill:hover { transform: translateY(-2px); }
.pill:active { transform: translateY(2px); }
.pill.slime { color: #0d2a04; background: var(--slime-gloss); box-shadow: inset 0 -3px 6px rgba(0,0,0,.25), 0 8px 22px rgba(182,255,26,.3), 0 0 0 3px rgba(255,255,255,.12); }
.pill.sm { padding: 9px 16px; font-size: 11px; }
.pill.big { padding: 20px 34px; font-size: clamp(14px, 3.8vw, 18px); }
.pill.glow { animation: glow 2s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: inset 0 -3px 6px rgba(0,0,0,.25), 0 0 40px 8px rgba(255,201,51,.5), 0 0 0 3px rgba(255,255,255,.2); } }

/* ── top bar ────────────────────────────────────────── */
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(10,8,20,.74); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.14); }
.tb-logo { flex: none; font-family: var(--blackletter); font-size: 26px; line-height: 1; color: #fff; text-decoration: none; text-shadow: 0 0 10px var(--slime); }
.lcd { position: relative; flex: 1; min-width: 0; height: 36px; overflow: hidden; border-radius: 10px; background: var(--lcd-green); border: 2px solid #9aa6b8; box-shadow: inset 0 2px 8px rgba(0,0,0,.8), 0 0 0 1px #3d4656; }
.lcd-track { position: absolute; top: 0; left: 0; height: 100%; display: flex; align-items: center; white-space: nowrap; animation: crawl 55s linear infinite; font-family: var(--lcd); font-size: 16px; color: var(--ice); text-shadow: 0 0 6px rgba(182,255,26,.8); }
.lcd-track > span { padding-right: 2em; }
.lcd-track b { font-weight: normal; color: var(--slime); text-shadow: 0 0 6px rgba(182,255,26,.7); }
@keyframes crawl { to { transform: translateX(-50%); } }
.orb-btn { flex: none; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 17px; line-height: 1; border: 1px solid rgba(255,255,255,.4); background: radial-gradient(circle at 35% 28%, #ffffff, #c3ccdb 38%, #5b6679 80%); box-shadow: 0 4px 10px rgba(0,0,0,.55), inset 0 -2px 4px rgba(0,0,0,.3); }
.orb-btn.hit { animation: bump .4s; }
.orb-btn.gun { display: grid; place-items: center; padding: 0; color: #141821; }
.orb-btn.gun svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 0 rgba(255,255,255,.5)); }
/* no tap flash, selection box or square click outline on buttons (phones and some browsers draw these in blue). keyboard focus still gets a ring */
button, .pill { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
button:focus:not(:focus-visible), .pill:focus:not(:focus-visible) { outline: none; }
.orb-btn:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }
@keyframes bump { 40% { transform: scale(.85) rotate(-10deg); } 70% { transform: scale(1.1) rotate(8deg); } }

/* ── intro ────────────────────────────────── */
.hero { padding-top: 40px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; align-items: center; text-align: center; }
@media (min-width: 880px) { .hero-grid { grid-template-columns: 400px minmax(0, 1fr); gap: 50px; text-align: left; } }
.orb-wrap { position: relative; width: min(370px, 80vw); aspect-ratio: 1; margin: 0 auto; }
/* iced-out rim: polished gold, a row of diamonds and a row of gold beads (studs drawn by iceRing()) */
.orb-ring { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: conic-gradient(from 30deg, #fff3b0, #d9a520 10%, #7a5200 20%, #ffd24a 32%, #fff6c8 40%, #b98612 52%, #7a5200 62%, #ffe38a 74%, #a36e00 86%, #fff3b0); box-shadow: 0 0 0 1.5px #5a3d00, 0 0 38px rgba(255,201,51,.38), 0 20px 44px rgba(0,0,0,.55); }
.orb-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.orb-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; mix-blend-mode: overlay; background: conic-gradient(from 0deg, transparent 0 25deg, rgba(255,255,255,.8) 40deg, transparent 55deg 205deg, rgba(255,255,255,.55) 220deg, transparent 235deg); animation: spin 8s linear infinite; }
.orb-ring .glint { transform-box: fill-box; transform-origin: center; animation: twinkle 2.8s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.orb { position: absolute; inset: 8.5%; border-radius: 50%; overflow: hidden; background: #111; box-shadow: inset 0 0 0 2px rgba(255,236,170,.85); }
.orb img { width: 100%; height: 100%; object-fit: cover; }
.orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(ellipse 60% 38% at 34% 16%, rgba(255,255,255,.55), transparent 62%), radial-gradient(circle at 50% 50%, transparent 62%, rgba(0,0,0,.35)); pointer-events: none; }
.spark { position: absolute; color: #fff; pointer-events: none; text-shadow: 0 0 8px #fff, 0 0 18px var(--ice); animation: twinkle 2.6s ease-in-out infinite; }
.spark:nth-child(3) { top: 2%; left: 8%; font-size: 30px; }
.spark:nth-child(4) { top: 16%; right: -2%; font-size: 20px; animation-delay: .7s; }
.spark:nth-child(5) { bottom: 6%; left: -2%; font-size: 22px; animation-delay: 1.3s; }
.spark:nth-child(6) { bottom: -2%; right: 14%; font-size: 34px; animation-delay: 1.9s; }
@keyframes twinkle { 0%, 100% { transform: scale(.25) rotate(0); opacity: 0; } 50% { transform: scale(1) rotate(90deg); opacity: 1; } }
/* the intro label and kicker sit centered over the logo at every width */
.hero-head { width: min(520px, 100%); margin: 0 auto; text-align: center; }
@media (min-width: 880px) { .hero-head { margin: 0; } }
.hero .bio { border-color: rgba(182,255,26,.22); }
.logo { margin: 0 auto; width: min(520px, 100%); }
@media (min-width: 880px) { .logo { margin: 0; } }
.logo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 18px rgba(0,0,0,.55)); }
.bio { margin: 6px 0 18px; padding: 16px 18px; font-size: 16px; text-align: left; }
.bio strong { color: var(--slime); }
.bio strong.g { color: var(--gold); }
.stats { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 560px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stats li { padding: 10px 8px 9px; border-radius: 14px; text-align: center; background: linear-gradient(#0e2410, #061307); border: 1.5px solid rgba(182,255,26,.35); box-shadow: inset 0 2px 8px rgba(0,0,0,.8), 0 0 18px rgba(182,255,26,.07); }
.stats b { display: block; font-family: var(--lcd); font-weight: normal; font-size: clamp(20px, 5.4vw, 28px); line-height: 1.1; color: var(--slime); text-shadow: 0 0 8px rgba(182,255,26,.6); }
.stats span { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #a4c98e; }
/* buy + copy fill the width of the stat boxes above (side by side on desktop, stacked on phones) */
.cta-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cta-row .pill { width: 100%; padding-left: 14px; padding-right: 14px; }
@media (max-width: 560px) { .cta-row { grid-template-columns: minmax(0, 1fr); } }
.socials { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.soc { display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; border-radius: 999px; text-decoration: none; color: var(--ink); text-align: left;
  background: linear-gradient(rgba(9,20,8,.9), rgba(9,20,8,.9)) padding-box, var(--iri) border-box; border: 2px solid transparent; box-shadow: 0 0 14px rgba(182,255,26,.14); transition: transform .12s, box-shadow .12s; }
.soc:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(182,255,26,.32); }
/* slime-drop icon: glossy lime blob */
.soc svg { flex: none; width: 36px; height: 36px; padding: 7px; border-radius: 50%; color: #0d2a04; background: var(--slime-blob); box-shadow: 0 3px 8px rgba(0,0,0,.5), inset 0 -2px 4px rgba(0,0,0,.18); }
.soc span { min-width: 0; font-size: 12px; line-height: 1.25; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc b { display: block; font-family: var(--display); font-size: 11px; letter-spacing: .08em; color: var(--ink); }
.soc em { display: block; font-style: normal; overflow: hidden; text-overflow: ellipsis; }
.hidden-track .socials { max-width: 620px; margin: 22px auto 0; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 0 0 18px; font-family: var(--lcd); font-size: 14px; }

/* ── beat the case: framed platinum plaque ───────────────── */
/* sized in cqw (1% of the frame's width) so it scales like one object, from phone to desktop */
.plaque { container-type: inline-size; position: relative; width: min(520px, 100%); margin: 0 auto; border-radius: 3px;
  background: linear-gradient(145deg, #2c2c30, #0b0b0d 38%, #19191c 70%, #050506);
  box-shadow: inset 0 0 0 1px #3d3d44, inset 0 2px 0 rgba(255,255,255,.12), 0 34px 60px rgba(0,0,0,.75), 0 0 0 1px #000; }
/* black velvet display mat: a soft spotlight behind the record, fine fabric grain, and a thin silver fillet line */
.pq-mat { position: relative; margin: 6.5cqw; padding: 7.5cqw 7cqw 7cqw;
  background: 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 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(ellipse 75% 42% at 50% 33%, #2a2a30, #141417 62%, #0b0b0d);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), inset 4px 6px 16px rgba(0,0,0,.8); }
.pq-mat::before { content: ""; position: absolute; inset: 2.4cqw; border: 1px solid rgba(214,219,226,.28); pointer-events: none; }
.pq-glass { position: absolute; inset: 6.5cqw; pointer-events: none; background: linear-gradient(118deg, transparent 18%, rgba(255,255,255,.2) 26%, transparent 34%, transparent 62%, rgba(255,255,255,.08) 70%, transparent 76%); }
/* the record: polished grooves split into track bands, a bright rim, and a light sheen that slowly turns */
.pq-disc { position: relative; width: 82%; aspect-ratio: 1; margin: 0 auto; border-radius: 50%;
  background:
    radial-gradient(circle closest-side, transparent 0 49.3%, rgba(70,76,86,.55) 49.6% 50.3%, transparent 50.6% 60.3%, rgba(70,76,86,.55) 60.6% 61.3%, transparent 61.6% 71.3%, rgba(70,76,86,.55) 71.6% 72.3%, transparent 72.6% 82.3%, rgba(70,76,86,.55) 82.6% 83.3%, transparent 83.6% 94.3%, rgba(70,76,86,.6) 94.6% 95.4%, #f4f6f8 95.8% 98.4%, #8a919c 98.8% 100%),
    repeating-radial-gradient(circle closest-side, #eef1f4 0 .45%, #bcc3cc .45% .9%),
    #d6dbe1;
  box-shadow: 0 1.8cqw 3.6cqw rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.3); }
.pq-sheen { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; mix-blend-mode: soft-light;
  background: conic-gradient(from 20deg, rgba(255,255,255,.95), transparent 30deg, rgba(0,0,0,.45) 70deg, transparent 105deg, rgba(255,255,255,.95) 180deg, transparent 210deg, rgba(0,0,0,.45) 250deg, transparent 285deg, rgba(255,255,255,.95));
  animation: spin 14s linear infinite; }
.pq-label { position: absolute; inset: 32%; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 .6cqw #f4f6f8, 0 0 0 .8cqw #9aa1ac; }
.pq-label img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pq-label svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pq-label::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9%; height: 9%; transform: translate(-50%, -50%); border-radius: 50%; background: #e9e9e5; box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.pq-tape { position: absolute; left: 50%; bottom: -13%; width: 40%; height: auto; transform: translateX(-50%); filter: drop-shadow(0 1.2cqw 1.6cqw rgba(0,0,0,.65)); }
/* engraved brushed-metal plate + holographic seal */
.pq-row { display: flex; align-items: center; gap: 2.4cqw; margin-top: 15cqw; }
.pq-plate { flex: 1; min-width: 0; padding: 3.2cqw 2.6cqw; text-align: center; color: #2b3039; font-family: Arial, Helvetica, sans-serif; font-size: 2.35cqw; line-height: 1.45; letter-spacing: .05em; text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255,255,255,.7); border: 1px solid #6f7682;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 1px, rgba(0,0,0,.05) 1px 2px, transparent 2px 4px), linear-gradient(180deg, #dfe3e8, #b3bac3 45%, #d4d9df 70%, #aab1bb);
  box-shadow: inset 0 0 0 1.2cqw rgba(255,255,255,.08), inset 1px 1px 0 rgba(255,255,255,.8), 0 1cqw 2cqw rgba(0,0,0,.6); }
.pq-plate p { margin: 0; }
.pq-plate .pq-big { font-size: 3.5cqw; font-weight: 700; letter-spacing: .07em; }
.pq-plate .pq-mid { margin-top: .4cqw; font-size: 2.9cqw; font-weight: 700; font-style: italic; }
.pq-holo { flex: none; width: 29%; aspect-ratio: 1; display: grid; place-items: center; padding: 1.2cqw; border: 1px solid #7d8591; border-radius: 1.2cqw;
  background: linear-gradient(115deg, #d8f7c8, #b6ff1a 18%, #7ff0d2 32%, #ffe38a 48%, #c9f59a 62%, #8fe7ff 78%, #e7ffd0) 0 0 / 300% 300%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 1cqw 2cqw rgba(0,0,0,.6); animation: pq-holo 6s ease-in-out infinite alternate; }
.pq-seal { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
@keyframes pq-holo { to { background-position: 100% 100%; } }
.pq-cap { max-width: 520px; margin: 18px auto 0; text-align: center; }
.pq-cap p { margin: 0; }
.pq-quote { font-size: 15px; font-style: italic; }
.pq-meta { margin-top: 6px !important; font-family: var(--lcd); font-size: 14px; color: var(--slime); }
.pq-foot { margin-top: 6px !important; font-size: 11.5px; color: var(--muted); }
.court { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; align-items: center; max-width: 860px; margin: 60px auto 0; text-align: center; }
@media (min-width: 760px) { .court { grid-template-columns: 300px minmax(0, 1fr); text-align: left; } }
.court-snap { position: relative; width: min(290px, 74vw); margin: 0 auto; padding: 10px 10px 42px; background: #fbfbf6; color: #1c1c1c; transform: rotate(-3deg); box-shadow: 0 24px 44px rgba(0,0,0,.6); }
.court-snap img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.court-snap figcaption { position: absolute; left: 0; right: 0; bottom: 9px; text-align: center; font-family: var(--blackletter); font-size: 25px; line-height: 1; }
.dismissed { position: absolute; left: 50%; top: 42%; padding: 5px 12px; white-space: nowrap; font-family: var(--display); font-weight: 700; font-size: clamp(12px, 3.6vw, 16px); letter-spacing: .06em; color: #ff2d55; background: rgba(255,255,255,.88); border: 4px solid #ff2d55; border-radius: 8px; transform: translate(-50%, -50%) rotate(-16deg); box-shadow: 0 0 18px rgba(255,45,85,.45); }
.court-copy p:not(.kicker) { margin: 10px 0 18px; }
.court-copy b { color: var(--slime); }

/* ── slime tv ─────────────────────────────── */
.player { max-width: 960px; margin: 0 auto; padding: 16px; border-radius: 40px 40px 54px 54px; background: linear-gradient(160deg, #f4f6fa, #9ba5b6 30%, #e8ecf2 50%, #7c8698 75%, #d9dee7); box-shadow: inset 0 2px 0 #fff, inset 0 -3px 8px rgba(0,0,0,.35), 0 30px 60px rgba(0,0,0,.7); }
.player-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 18px; border-radius: 28px 28px 40px 40px; background: radial-gradient(ellipse at 50% 0, #1d1830, #09080f 70%); box-shadow: inset 0 3px 10px rgba(0,0,0,.9); }
@media (min-width: 800px) { .player-in { grid-template-columns: 290px minmax(0, 1fr); gap: 26px; padding: 22px; } }
.screen { position: relative; width: min(290px, 72vw); margin: 0 auto; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 0 0 4px #1a1a22, 0 0 0 6px #6c7485, 0 0 30px rgba(182,255,26,.25); }
.screen video { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; }
.screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(rgba(0,0,0,.18) 0 1px, transparent 1px 3px), radial-gradient(ellipse 70% 30% at 30% 6%, rgba(255,255,255,.22), transparent 70%); }
.rank { position: absolute; top: 10px; left: 10px; z-index: 1; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 17px; color: #1a1000; background: radial-gradient(circle at 35% 28%, #fff6c8, var(--gold) 50%, #a36b00); box-shadow: 0 4px 12px rgba(0,0,0,.6); }
.rank.hot { width: auto; height: auto; padding: 7px 12px; border-radius: 999px; font-size: 11px; letter-spacing: .06em; color: #fff; background: #ff2d55; box-shadow: 0 4px 12px rgba(255,45,85,.5); }
.np { padding: 14px 16px; border-radius: 16px; background: var(--lcd-green); border: 2px solid #9aa6b8; box-shadow: inset 0 2px 10px rgba(0,0,0,.85); font-family: var(--lcd); color: var(--ice); text-shadow: 0 0 6px rgba(182,255,26,.7); }
.np .lbl { margin: 0; font-size: 12px; letter-spacing: .3em; color: #8fbf6a; }
.np .title { margin: 4px 0 2px; font-size: clamp(18px, 4.8vw, 24px); line-height: 1.2; color: #fff; }
.np .meta { margin: 0; font-size: 16px; color: var(--slime); text-shadow: 0 0 6px rgba(182,255,26,.6); }
.eq { display: flex; align-items: flex-end; gap: 4px; height: 36px; margin-top: 10px; }
.eq i { flex: 1; height: 100%; background: linear-gradient(to top, #4f9f08, var(--slime) 60%, #efffb8); border-radius: 2px 2px 0 0; animation: eq 1s ease-in-out infinite alternate; transform-origin: bottom; }
.eq i:nth-child(3n) { animation-duration: .7s; }
.eq i:nth-child(3n+1) { animation-duration: 1.3s; }
.eq i:nth-child(4n) { animation-duration: .55s; }
@keyframes eq { from { transform: scaleY(.15); } to { transform: scaleY(1); } }
.player.paused .eq i { animation-play-state: paused; }
.transport { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0; }
.transport button { width: 48px; height: 48px; border-radius: 50%; cursor: pointer; font-size: 16px; color: #1c2230; border: 1px solid rgba(0,0,0,.35); background: radial-gradient(circle at 35% 28%, #ffffff, #c3ccdb 40%, #6b7689 85%); box-shadow: 0 4px 10px rgba(0,0,0,.6), inset 0 -2px 4px rgba(0,0,0,.25); }
.transport button#pp { width: 58px; height: 58px; font-size: 20px; }
.transport a { margin-left: auto; font-family: var(--lcd); font-size: 14px; }
.playlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.playlist button { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; cursor: pointer; text-align: left; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); font-family: var(--lcd); font-size: 15px; line-height: 1.25; }
.playlist button:hover { background: rgba(255,255,255,.09); }
.playlist button[aria-current="true"] { border-color: transparent; background: linear-gradient(90deg, rgba(182,255,26,.22), rgba(182,255,26,.05)); box-shadow: inset 3px 0 0 var(--slime); }
.playlist .rk { font-size: 18px; color: var(--gold); }
.playlist .tt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.playlist .vw { color: var(--slime); }

/* ── the coin on a chain ──────────────────── */
.coin-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; align-items: center; text-align: center; }
@media (min-width: 880px) { .coin-grid { grid-template-columns: 380px minmax(0, 1fr); gap: 50px; } }
.pendant { position: relative; width: min(330px, 80vw); margin: 0 auto; animation: swing 4.5s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes swing { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
/* the chain + bail image lines up with the top of the pendant disc underneath it */
.chain { position: relative; z-index: 1; display: block; width: 64.72%; height: auto; margin-left: 17.95%; pointer-events: none; -webkit-mask-image: linear-gradient(transparent, #000 28%); mask-image: linear-gradient(transparent, #000 28%); filter: drop-shadow(0 8px 10px rgba(0,0,0,.55)); }
.coin-stage { position: relative; width: 100%; aspect-ratio: 1; margin-top: -1.67%; perspective: 1000px; }
.coin { display: block; position: relative; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; transform-style: preserve-3d; transition: transform 1.6s cubic-bezier(.2,.8,.25,1); -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.coin:focus { outline: none; }
.card, .cover, .zoom { -webkit-tap-highlight-color: transparent; }
.coin-stage:has(.coin:focus-visible)::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--ice); pointer-events: none; }
.coin-face { position: absolute; inset: 0; display: block; border-radius: 50%; overflow: hidden; background: #0b0a10; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.coin-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* each face carries its own glow so it turns edge-on with the coin: gold for rich, plain silver (no blue) for broke */
.coin-front { box-shadow: 0 0 46px rgba(255,201,51,.45), 0 18px 34px rgba(0,0,0,.55); }
.coin-back { transform: rotateY(180deg); box-shadow: 0 0 40px rgba(240,240,240,.2), 0 18px 34px rgba(0,0,0,.55); }
.coin-shine { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.5) 48%, transparent 60%); background-size: 300% 300%; animation: shine 3.5s ease-in-out infinite; }
@keyframes shine { 0% { background-position: 100% 100%; } 60%, 100% { background-position: 0 0; } }
.ice-spark { position: absolute; color: #fff; font-size: 18px; text-shadow: 0 0 8px #fff, 0 0 16px var(--ice); animation: twinkle 2.2s ease-in-out infinite; pointer-events: none; }
.ice-spark:nth-of-type(1) { left: 6%; bottom: 20%; }
.ice-spark:nth-of-type(2) { right: 4%; bottom: 34%; animation-delay: .8s; font-size: 24px; }
.ice-spark:nth-of-type(3) { right: 22%; bottom: 2%; animation-delay: 1.5s; }
.coin-copy .chrome { font-size: clamp(34px, 9vw, 64px); }
.flip-result { margin: 10px 0 20px; font-family: var(--lcd); font-size: 19px; line-height: 1.3; color: var(--muted); min-height: 1.3em; }
.flip-result b { font-weight: normal; }
.flip-result .rich { color: var(--gold); }
.flip-result .broke { color: #ff6b8a; }
.warn { margin: 14px 0 0; font-size: 12.5px; color: var(--gold); }

/* two-way pager holding the contract address */
.pager { position: relative; max-width: 440px; margin: 22px auto 0; padding: 16px 16px 14px; border-radius: 26px 26px 36px 36px; text-align: left;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 14px), linear-gradient(160deg, rgba(200,255,130,.5), rgba(38,110,18,.66) 60%, rgba(175,255,90,.48));
  border: 1px solid rgba(255,255,255,.55); box-shadow: inset 0 2px 0 rgba(255,255,255,.6), inset 0 -4px 10px rgba(0,0,0,.25), 0 18px 34px rgba(0,0,0,.55); }
.pager::before { content: ""; position: absolute; left: 10%; right: 10%; top: 4px; height: 26%; border-radius: 22px; background: linear-gradient(rgba(255,255,255,.55), transparent); pointer-events: none; }
.pager-brand { display: flex; justify-content: space-between; margin: 0 4px 8px; font-family: var(--display); font-weight: 700; font-size: 10px; letter-spacing: .16em; color: #f4ffe6; text-shadow: 0 1px 0 rgba(0,0,0,.3); }
.pager-lcd { position: relative; padding: 10px 12px; border-radius: 10px; background: linear-gradient(#c3dfab, #a9c992); color: #16240f; font-family: var(--lcd); font-size: 15px; line-height: 1.35; box-shadow: inset 0 2px 6px rgba(0,0,0,.45); }
.pager-lcd p { margin: 0; }
.pager-lcd code { display: block; margin-top: 2px; font-family: var(--lcd); font-size: 16px; word-break: break-all; cursor: pointer; }
.pager-keys { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 10px; }
.pager-keys i { width: 26px; height: 14px; border-radius: 8px; background: linear-gradient(#e6eef6, #8fa2b8); box-shadow: 0 2px 3px rgba(0,0,0,.4); }
.pager-keys button { padding: 6px 16px; border-radius: 12px; cursor: pointer; border: 1px solid rgba(0,0,0,.35); font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .1em; color: #0d2a04; background: var(--slime-gloss); box-shadow: 0 3px 6px rgba(0,0,0,.4); }
.pager.pending .pager-keys button { display: none; }
.pager.pending code { cursor: default; }
.steps { list-style: none; counter-reset: s; margin: 40px auto 0; padding: 0; max-width: 960px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; text-align: left; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps li { counter-increment: s; position: relative; padding: 18px 18px 18px 96px; min-height: 84px; display: flex; align-items: center; }
.steps li::before { content: "0" counter(s); position: absolute; left: 16px; top: 50%; transform: translateY(-50%) skewX(-8deg); font-family: var(--display); font-weight: 700; font-size: 30px; background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.plasma { max-width: 780px; margin: 40px auto 0; padding: 14px 14px 34px; border-radius: 16px; position: relative; background: linear-gradient(180deg, #eef1f6, #9aa3b1 55%, #cfd5de); box-shadow: inset 0 2px 0 #fff, 0 24px 44px rgba(0,0,0,.6); }
.plasma::after { content: "SLIME-VISION PLASMA"; position: absolute; left: 0; right: 0; bottom: 9px; text-align: center; font-family: var(--display); font-weight: 700; font-size: 9px; letter-spacing: .3em; color: #4b5463; }
.plasma-screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: #1438c8; box-shadow: inset 0 0 0 3px #111, inset 0 0 40px rgba(0,0,0,.5); }
.plasma-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.osd { position: absolute; font-family: var(--lcd); color: #fff; text-shadow: 2px 2px 0 rgba(0,0,0,.35); }
.osd.av { top: 14px; left: 18px; font-size: 22px; color: #9ff29f; }
.osd.ns { inset: 0; display: grid; place-content: center; gap: 6px; text-align: center; }
.osd.ns b { font-weight: normal; font-size: clamp(28px, 7vw, 48px); line-height: 1; }
.osd.ns small { font-size: clamp(14px, 3.6vw, 18px); color: #cfdaff; }

.home-link { margin: 34px 0 0; text-align: center; font-family: var(--lcd); font-size: 15px; letter-spacing: .06em; }
.home-link a { color: var(--ice); }

/* ── rich era / broke era ─────────────────────────────────── */
.seg-ctl { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 6px; margin: 0 auto 26px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); }
.seg-ctl button { padding: 10px 16px; border-radius: 999px; cursor: pointer; border: 0; background: none; font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .08em; color: var(--muted); }
.seg-ctl button[aria-pressed="true"] { color: #1a1000; background: linear-gradient(180deg, #ffe58a, #ffc933 45%, #e39a00 55%, #ffd24a); box-shadow: 0 4px 12px rgba(255,201,51,.35); }
.seg-ctl button[data-era="broke"][aria-pressed="true"] { color: #fff; background: linear-gradient(180deg, #ff8fb0, #ff3d7a 45%, #b3004a 55%, #ff5c8e); box-shadow: 0 4px 12px rgba(255,61,122,.4); }
.eras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 760px) { .eras { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
.era-card { position: relative; display: block; width: 100%; padding: 8px 8px 12px; cursor: zoom-in; text-align: left; border-radius: 22px; transition: transform .15s; }
.era-card:hover { transform: translateY(-4px); }
.era-card[hidden] { display: none; }
.era-card img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 25%; border-radius: 16px; }
.era-card .cap { display: block; padding: 10px 6px 0; font-size: 13px; line-height: 1.35; }
.chip { position: absolute; top: 16px; left: 16px; padding: 5px 10px; border-radius: 999px; font-family: var(--lcd); font-size: 12px; line-height: 1.2; }
.chip.rich { color: #1a1000; background: linear-gradient(180deg, #fff6c8, var(--gold)); box-shadow: 0 0 16px rgba(255,201,51,.6); }
.chip.broke { color: #ffd3dd; background: rgba(0,0,0,.72); border: 1px solid #ff6b8a; }
.era-card.rich-glow::after { content: "✦"; position: absolute; top: 18px; right: 18px; color: #fff; font-size: 22px; text-shadow: 0 0 10px #fff, 0 0 20px var(--ice); animation: twinkle 2.4s ease-in-out infinite; }

/* ── rookie card: slime refractor ────────── */
/* --hx/--hy (0-100%) move the foil and glare; --rx/--ry tilt the card. set by the mouse on desktop, by the scroll on phones */
.card-stage { --hx: 50%; --hy: 40%; width: min(310px, 80vw); margin: 0 auto; perspective: 1200px; }
.card-tilt { --rx: 0deg; --ry: 0deg; transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.8,.3,1); }
.card-tilt.live { transition: transform .08s linear; }
.card { position: relative; display: block; width: 100%; aspect-ratio: 5 / 7; padding: 0; border: 0; background: none; cursor: pointer; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3,1.4,.5,1); }
.card[aria-pressed="true"] { transform: rotateY(180deg); }
.card-face { position: absolute; inset: 0; display: block; border-radius: 16px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 9px solid transparent; box-shadow: 0 24px 44px rgba(0,0,0,.65), 0 0 34px rgba(182,255,26,.2); }
/* Safari (every iPhone browser) ignores backface-visibility on the foil layers and z-fights two faces that share a plane,
   so: nudge the faces apart in depth, and fully hide whichever face is turned away, swapping at 87ms, the moment the flip passes 90deg (measured on the .7s bounce curve) */
.card-face > * { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.card-front { transform: translateZ(1px); transition: visibility 0s 87ms; }
.card[aria-pressed="true"] .card-front { visibility: hidden; }
.card-back { visibility: hidden; transition: visibility 0s 87ms; }
.card[aria-pressed="true"] .card-back { visibility: visible; }
.card-front { background: linear-gradient(#07120a, #07120a) padding-box, var(--iri-conic) border-box; }
.card-front img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }
.cf-drip { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 70px; pointer-events: none; filter: drop-shadow(0 3px 3px rgba(0,0,0,.45)); }
/* holo foil: green/teal/gold bands that slide with --hx/--hy, a glitter grid, and a glare spot */
.holo, .glare { position: absolute; inset: 0; z-index: 1; border-radius: 7px; pointer-events: none; transition: opacity .35s; }
.holo { opacity: .16; mix-blend-mode: color-dodge;
  background: repeating-linear-gradient(115deg, transparent 0%, rgba(182,255,26,.55) 3%, rgba(60,255,200,.45) 6%, rgba(255,226,110,.5) 9%, rgba(182,255,26,.55) 12%, transparent 15%) var(--hx) var(--hy) / 250% 250%; }
.holo::after { content: ""; position: absolute; inset: 0; opacity: .55; mix-blend-mode: overlay; background: radial-gradient(circle, rgba(255,255,255,.95) 0 1px, transparent 1.6px) calc(var(--hx) * .4) calc(var(--hy) * .4) / 13px 13px; }
.glare { opacity: 0; mix-blend-mode: overlay; background: radial-gradient(circle at var(--hx) var(--hy), rgba(255,255,255,.75), rgba(255,255,255,.18) 24%, transparent 55%); }
.card-stage.shine .holo { opacity: .5; }
.card-stage.shine .glare { opacity: .7; }
.cf-tag { position: absolute; top: 14px; left: 10px; z-index: 3; padding: 4px 9px; border-radius: 999px; font-family: var(--display); font-weight: 700; font-size: 9px; letter-spacing: .14em; color: #0d2a04; background: var(--slime-gloss); border: 1px solid #3f8f06; box-shadow: 0 2px 6px rgba(0,0,0,.45); }
.cf-rc { position: absolute; top: 12px; right: 10px; z-index: 3; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 13px; color: #0d2a04; background: var(--slime-blob); border: 2px solid #eaffb0; box-shadow: 0 3px 8px rgba(0,0,0,.5); transform: rotate(-12deg); }
.cf-name { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 10px 12px; text-align: left; background: linear-gradient(180deg, rgba(4,14,6,.15), rgba(4,14,6,.94)); border-top: 1px solid rgba(182,255,26,.45); }
.cf-name .nm { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .04em; background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.cf-name .pos { padding: 2px 6px; border-radius: 4px; font-family: var(--display); font-weight: 700; font-size: 9px; color: #0d2a04; background: var(--slime); }
.cf-name .num { margin-left: auto; font-family: var(--blackletter); font-size: 30px; line-height: 1; color: var(--gold); text-shadow: 0 0 10px rgba(255,201,51,.4); }
.card-back { transform: rotateY(180deg) translateZ(1px); display: flex; flex-direction: column; padding: 14px; text-align: left; color: #e3f2d6; background: radial-gradient(ellipse 90% 60% at 30% 0%, #21401a, #07120a 72%) padding-box, var(--iri-conic) border-box; }
.card-back .holo { opacity: .1; }
.card-back > :not(.holo) { position: relative; z-index: 2; }
.card-back .cb-name { display: block; margin: 0 0 2px; font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: .04em; color: #fff; }
.card-back .cb-sub { display: block; margin-bottom: 10px; font-size: 10px; font-weight: bold; letter-spacing: .1em; color: var(--slime); }
.stats-card { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0 0 10px; font-size: 12.5px; line-height: 1.3; }
.stats-card dt { font-family: var(--lcd); font-size: 12px; color: var(--slime); }
.stats-card dd { margin: 0; }
.card-back .notes { margin-top: auto; padding-top: 8px; font-size: 11.5px; line-height: 1.4; border-top: 2px solid rgba(182,255,26,.5); }
.card-back .notes b { color: var(--gold); }
.hint { margin: 18px 0 0; font-family: var(--lcd); font-size: 16px; color: var(--muted); text-align: center; }

/* ── burned CDs ───────────────────────────── */
.cds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; }
@media (min-width: 760px) { .cds { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 34px 26px; } }
.cdx { margin: 0; min-width: 0; }
.jewel { position: relative; width: 86%; }
.disc { position: absolute; top: 3%; left: 14%; width: 94%; aspect-ratio: 1; border-radius: 50%; transition: transform .5s cubic-bezier(.3,1.2,.5,1);
  background: radial-gradient(circle, #07060d 0 7%, #c9ced6 7.5% 10%, transparent 10.5% 17%, rgba(255,255,255,.3) 17.5% 18%, transparent 18.5%),
    conic-gradient(from 20deg, #d9e6d2, #b6ff1a, #eaffc4, #7ed321, #d6ff9a, #c8f5dc, #9bea3c, #efffd6, #d9e6d2);
  box-shadow: 0 6px 14px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.5); }
.cdx:hover .disc, .cdx:focus-within .disc { transform: translateX(16%) rotate(160deg); }
.jewel .cover { position: relative; z-index: 1; display: block; width: 100%; padding: 0; border: 0; line-height: 0; cursor: zoom-in; border-radius: 3px; overflow: hidden; background: #111; box-shadow: 0 10px 20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.35); }
.jewel .cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(125deg, rgba(255,255,255,.3), transparent 32%); }
.jewel img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.cdx figcaption { margin-top: 10px; font-size: 12px; line-height: 1.35; color: var(--muted); }
.cdx figcaption b { display: block; font-family: var(--lcd); font-weight: normal; font-size: 12px; color: var(--slime); text-shadow: 0 0 6px rgba(182,255,26,.45); }

/* ── feed fat slime ───────────────────────── */
.feed-lede { max-width: 30em; margin: 0 auto 22px; text-align: center; font-size: 16px; }
.feed { max-width: 560px; margin: 0 auto; padding: 18px 18px 16px; }
.feed-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.feed-tier { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(14px, 4vw, 19px); letter-spacing: .06em; line-height: 1.15; color: var(--gold); text-shadow: 0 0 14px rgba(255,201,51,.35); }
.feed-note { margin: 4px 0 0; font-size: 13px; line-height: 1.35; color: var(--muted); }
.feed-amt { margin: 0; flex: none; font-family: var(--display); font-weight: 700; font-size: clamp(40px, 12vw, 60px); line-height: 1; background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.plate-hint { font-family: var(--lcd); font-size: 17px; letter-spacing: .06em; fill: var(--muted); }
.plate-svg { display: block; width: 100%; height: auto; margin-top: 4px; overflow: visible; }
.food { opacity: 0; transform: translateY(-14px) scale(.9); transform-box: fill-box; transform-origin: 50% 100%; transition: opacity .2s, transform .45s cubic-bezier(.2,1.5,.4,1); }
.food.on { opacity: 1; transform: none; }
.ceo-stars path { transform-box: fill-box; transform-origin: center; animation: twinkle 2.4s ease-in-out infinite; }
.ceo-stars path:nth-child(2) { animation-delay: .5s; }
.ceo-stars path:nth-child(3) { animation-delay: 1s; }
.ceo-stars path:nth-child(4) { animation-delay: 1.5s; }
.ceo-stars path:nth-child(5) { animation-delay: 2s; }
.fuel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 8px 0 6px; padding: 8px 12px; border-radius: 12px; background: var(--lcd-green); border: 2px solid #9aa6b8; box-shadow: inset 0 2px 8px rgba(0,0,0,.8); font-family: var(--lcd); font-size: 13px; line-height: 1.2; color: var(--ice); text-shadow: 0 0 6px rgba(182,255,26,.6); }
.fuel-bar { height: 12px; overflow: hidden; border-radius: 3px; background: repeating-linear-gradient(90deg, rgba(182,255,26,.13) 0 8px, transparent 8px 10px); }
.fuel-bar i { display: block; width: 0; height: 100%; background: repeating-linear-gradient(90deg, var(--slime) 0 8px, transparent 8px 10px); transition: width .4s; }
.fuel-cal { color: var(--slime); text-shadow: 0 0 6px rgba(182,255,26,.6); }
.feed-range { --p: 0%; display: block; width: 100%; height: 36px; margin: 8px 0 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; touch-action: pan-y; }
.feed-range::-webkit-slider-runnable-track { height: 12px; border-radius: 999px; background: linear-gradient(90deg, #ffe58a, var(--gold) var(--p), rgba(255,255,255,.14) var(--p)); box-shadow: inset 0 1px 3px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.2); }
.feed-range::-moz-range-track { height: 12px; border-radius: 999px; background: linear-gradient(90deg, #ffe58a, var(--gold) var(--p), rgba(255,255,255,.14) var(--p)); box-shadow: inset 0 1px 3px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.2); }
.feed-range::-webkit-slider-thumb { width: 34px; height: 34px; margin-top: -11px; border-radius: 50%; border: 2px solid #7a5200; background: radial-gradient(circle at 35% 30%, #fff6c8, #ffc933 45%, #b07a10); box-shadow: 0 4px 10px rgba(0,0,0,.5), 0 0 16px rgba(255,201,51,.55); -webkit-appearance: none; appearance: none; }
.feed-range::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #7a5200; background: radial-gradient(circle at 35% 30%, #fff6c8, #ffc933 45%, #b07a10); box-shadow: 0 4px 10px rgba(0,0,0,.5), 0 0 16px rgba(255,201,51,.55); }
.feed-range:focus-visible { outline: 2px solid var(--ice); outline-offset: 4px; border-radius: 999px; }
.range-ends { display: flex; justify-content: space-between; margin-top: 2px; font-family: var(--lcd); font-size: 13px; color: var(--muted); }
/* the buy button lives in the card and shows the amount picked on the slider */
.pill.tip-btn { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 12px; width: 100%; margin-top: 16px; padding: 16px 20px; font-size: clamp(12px, 3.3vw, 16px); }
.tip-amt { padding: 1px 10px; border-radius: 999px; color: #fff6c8; background: #3a2600; box-shadow: inset 0 1px 3px rgba(0,0,0,.5); }
.feed-fine { margin: 12px auto 0; }

/* ── liner notes ──────────────────────────── */
.booklet { max-width: 780px; margin: 0 auto; padding: 30px 24px; border-radius: 8px;
  background: linear-gradient(rgba(10,8,18,.84), rgba(10,8,18,.93)), url("img/d4-flex.jpg") center / cover;
  border: 1px solid rgba(255,255,255,.2); box-shadow: 0 24px 50px rgba(0,0,0,.6); }
.booklet h3 { margin: 0 0 12px; font-family: var(--blackletter); font-weight: normal; font-size: clamp(28px, 7vw, 40px); line-height: 1.05; text-align: center; color: var(--gold); text-shadow: 0 0 14px rgba(255,201,51,.4); }
.thanks { margin: 0 0 20px; font-size: 13.5px; line-height: 1.8; letter-spacing: .02em; text-align: center; }
.thanks span::after { content: " ✦ "; color: var(--slime); }
.thanks span:last-child::after { content: ""; }
.credits { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 24px; margin: 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.2); text-align: left; font-family: var(--lcd); font-size: 13px; }
@media (min-width: 640px) { .credits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.credits div { display: flex; gap: 8px; }
.credits dt { color: var(--ice); flex: none; }
.credits dd { margin: 0; color: var(--muted); }

/* ── interlude: 468x60 banner ───────────────────────── */
.banner { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; width: min(468px, 100%); aspect-ratio: 468 / 60; margin: 0 auto; overflow: hidden; text-decoration: none; color: #000;
  font-family: var(--display); font-weight: 700; font-size: clamp(9px, 2.6vw, 13px); letter-spacing: .02em; white-space: nowrap; border: 3px outset #d8dde6;
  background: linear-gradient(90deg, #b6ff1a, #efffb8, #5fbf0a, #ffc933, #b6ff1a); background-size: 300% 100%; animation: bnr 3s linear infinite; }
@keyframes bnr { to { background-position: 300% 0; } }
.banner em { font-style: normal; animation: flash .6s steps(2) infinite; }
@keyframes flash { 50% { opacity: 0; } }
.banner-cap { margin: 8px 0 0; text-align: center; font-size: 11px; color: var(--muted); }
.banner-cap a { color: var(--muted); }

/* ── slime jersey ─────────────────────────── */
.chrome .cs { display: block; margin-top: 8px; font-size: .5em; letter-spacing: .14em; }
.jersey-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; align-items: center; }
@media (min-width: 800px) { .jersey-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jersey-shot { position: relative; width: min(330px, 76vw); margin: 0 auto; padding: 8px; border-radius: 20px; background: var(--chrome); box-shadow: 0 24px 50px rgba(0,0,0,.6), 0 0 44px rgba(182,255,26,.2); }
.zoom { display: block; width: 100%; padding: 0; border: 0; overflow: hidden; cursor: zoom-in; background: #111; }
.jersey-shot .zoom { border-radius: 14px; }
.jersey-shot img { display: block; width: 100%; height: auto; aspect-ratio: 720 / 1290; object-fit: cover; }
.swing-tag { position: absolute; right: -16px; top: 1%; width: 110px; padding: 9px 10px 9px 22px; color: #1a1030; background: #f1e3bd; font-family: var(--lcd); font-size: 12px; line-height: 1.25; text-align: left; transform: rotate(-9deg); clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%); }
.swing-tag b { display: block; font-family: var(--display); font-size: 11px; letter-spacing: .06em; color: #2f6b00; }
.jersey-copy { text-align: center; }
.jersey-copy p { max-width: 30em; margin: 0 auto 20px; }
.snap { width: min(240px, 60vw); margin: 0 auto 18px; padding: 10px 10px 34px; background: #fbfbf8; color: #222; transform: rotate(3deg); box-shadow: 0 16px 30px rgba(0,0,0,.55); }
.snap img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.snap figcaption { margin-top: 8px; font-family: var(--lcd); font-size: 13px; }

/* ── join the crew ────────────────────────── */
.crew { max-width: 820px; margin: 0 auto; padding: 26px 22px 24px; text-align: center; }
.crew-lede { max-width: 34em; margin: 8px auto 22px; }
.crew-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; text-align: left; }
@media (min-width: 620px) { .crew-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.crew-links a { display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 10px 18px 10px 10px; border-radius: 999px; text-decoration: none; color: var(--ink);
  background: linear-gradient(rgba(9,20,8,.9), rgba(9,20,8,.9)) padding-box, var(--iri) border-box; border: 2px solid transparent; box-shadow: 0 0 14px rgba(182,255,26,.12); transition: transform .12s, box-shadow .12s; }
.crew-links a:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(182,255,26,.35); }
.crew-links .ic { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: #0d2a04; background: var(--slime-blob); box-shadow: 0 3px 8px rgba(0,0,0,.5), inset 0 -2px 4px rgba(0,0,0,.18); }
.crew-links .ic svg { width: 22px; height: 22px; }
.crew-links .tx { min-width: 0; font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.crew-links b { display: block; font-family: var(--display); font-size: 13px; letter-spacing: .06em; color: var(--ink); }
.crew-links .crew-x { background: var(--slime-gloss) padding-box, var(--iri) border-box; }
.crew-links .crew-x .tx, .crew-links .crew-x b { color: #0d2a04; }
.crew-links .crew-x .ic { color: var(--slime); background: radial-gradient(circle at 35% 28%, #3f5f2c, #0d2a04 80%); }
.crew .safe { margin: 18px 0 0; font-size: 12.5px; color: var(--gold); }

/* ── hidden track ─────────────────────────── */
.hidden-track { text-align: center; }
.mini-orb { position: relative; width: 150px; aspect-ratio: 1; margin: 0 auto 18px; }
.mini-orb .orb-ring { box-shadow: 0 0 0 1px #5a3d00, 0 0 30px rgba(255,201,51,.45); }
.hidden-track p { max-width: 34em; margin: 10px auto 0; }
.final-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 22px; }

/* ── footer: 88x31 buttons ──────────────────────────── */
.footer { max-width: 1040px; margin: 110px auto 0; padding: 26px 16px 46px; text-align: center; font-size: 12px; color: var(--muted); border-top: 1px solid rgba(255,255,255,.12); }
.b88 { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 20px; padding: 0; }
.b88 li { display: flex; width: 88px; height: 31px; overflow: hidden; border: 1px solid #000; box-shadow: 0 0 0 1px #777; font-family: var(--lcd); font-size: 9.5px; line-height: 1.05; text-transform: uppercase; }
.b88 span { display: grid; place-items: center; padding: 0 3px; text-align: center; }
.b88 span:first-child { width: 38%; color: #000; }
.b88 span:last-child { flex: 1; color: #fff; background: #111; }
.b88 li:nth-child(1) span:first-child { background: var(--slime); }
.b88 li:nth-child(2) span:first-child { background: var(--ice); }
.b88 li:nth-child(3) span:first-child { background: var(--gold); }
.b88 li:nth-child(4) span:first-child { background: #7ed321; }
.b88 li:nth-child(5) span:first-child { background: #fff; }
.b88 li:nth-child(6) span:first-child { background: #2f6b00; color: #fff; }
.footer .disclaimer { max-width: 40em; margin: 0 auto 14px; padding: 12px 14px; text-align: left; line-height: 1.55; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); }
.disclaimer b { color: var(--ink); }
.footer p { margin: 5px 0; }

/* ── lightbox, toast, effects ───────────────────────── */
.lightbox { padding: 0; border: 0; border-radius: 18px; background: #0b0a12; color: var(--ink); max-width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 0 0 2px rgba(255,255,255,.3), 0 30px 60px rgba(0,0,0,.8); }
.lightbox::backdrop { background: rgba(4,3,10,.86); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.lightbox img { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: contain; background: #000; }
.lightbox p { margin: 0; padding: 12px 52px 14px 14px; font-size: 14px; }
.lightbox button { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 15px; color: #1c2230; border: 1px solid rgba(0,0,0,.35); background: radial-gradient(circle at 35% 28%, #fff, #c3ccdb 40%, #6b7689 85%); }
.toast { position: fixed; left: 50%; bottom: 20px; z-index: 50; max-width: calc(100vw - 32px); padding: 11px 18px; transform: translate(-50%, 180%); transition: transform .25s; text-align: center; font-family: var(--lcd); font-size: 15px; color: var(--ice); border-radius: 14px; background: var(--lcd-green); border: 2px solid #9aa6b8; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.toast.show { transform: translate(-50%, 0); }
.fx { position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none; will-change: transform; font-size: 24px; }
.fx.bill { font-size: 26px; }
.fx.drop { width: 11px; height: 14px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 35% 30%, #f6ffd2, #b6ff1a 45%, #4f9f08); box-shadow: 0 0 6px rgba(182,255,26,.55); }
.glitter { position: fixed; z-index: 40; pointer-events: none; font-size: 12px; animation: glit .8s ease-out forwards; }
@keyframes glit { to { transform: translateY(26px) scale(.2) rotate(120deg); opacity: 0; } }

@media (max-width: 560px) {
  .tb-logo { display: none; }
  .pill.sm { padding: 9px 12px; }
  .plasma-screen { aspect-ratio: 4 / 5; }
  .swing-tag { right: -4px; }
  .stats span { font-size: 9px; letter-spacing: .06em; }
  /* phones: three compact tiles in one row (icon + name) instead of three stacked pills */
  .socials { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .soc { flex-direction: column; gap: 6px; padding: 10px 4px 9px; border-radius: 18px; text-align: center; }
  .soc span { width: 100%; }
  .soc b { font-size: 10px; letter-spacing: .06em; }
  .soc em { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .lcd-track { animation: none; }
  .card-front, .card-back { transition-delay: 0s !important; }
}