/* choomdeck.css — the CHOOMDECK brand surface (front page / menu).
   Per David's style sheet: CHOOMDECK is the simulation TERMINAL belonging to
   CHOOMDEX, not a second CHOOMDEX site. Almost entirely black, signal yellow
   = build/active/system, signal magenta = play/opposing/alert. Roughly
   70% black · 15% yellow · 10% magenta · 5% white-gray, and 80% clean UI /
   15% technical detail / 5% glitch — the logo carries the personality, the
   interface stays restrained so it doesn't compete. */

.cd {
  --void: #030405;
  --terminal: #080A0B;
  --sig-yellow: #FFE500;
  --sig-magenta: #FF0878;
  --hot-pink: #FF1685;
  --dirty-yellow: #D8C900;
  --grid-gray: #15191B;
  --txt: #E8EAEB;
  --muted: #747B80;
  --line: #1c2225;

  min-height: 100vh;
  background:
    /* barely-visible technical grid — must not compete with the logo */
    linear-gradient(rgba(255,229,0,.022) 1px, transparent 1px) 0 0 / 100% 46px,
    linear-gradient(90deg, rgba(255,229,0,.022) 1px, transparent 1px) 0 0 / 46px 100%,
    var(--void);
  color: var(--txt);
  padding: 0 0 40px;
}
#app.cd-page, #app.cd-shellpage { max-width: none; padding: 0; }
/* the shell owns its own tokens (it lives outside .cd) */
.cd-shell { --void:#030405; --terminal:#080A0B; --sig-yellow:#FFE500;
  --sig-magenta:#FF0878; --txt:#E8EAEB; --muted:#747B80; --line:#1c2225; }

/* ---------- system bar ---------- */
.cd-sysbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 22px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--muted); }
.cd-sysbar img { height: 17px; }
.cd-sysbar .sep { flex: 1; }
.cd-sysbar b { color: var(--sig-yellow); font-weight: 400; }
.cd-dot { width: 7px; height: 7px; background: var(--sig-yellow); display: inline-block;
  animation: cd-blink 2.4s steps(1) infinite; }
@keyframes cd-blink { 0%, 70% { opacity: 1; } 71%, 100% { opacity: .25; } }

/* ---------- hero: the logo IS the page ---------- */
.cd-hero { text-align: center; padding: clamp(26px, 6vh, 70px) 20px clamp(18px, 3vh, 34px); }
.cd-hero img { width: min(880px, 88vw); height: auto; object-fit: contain;
  display: block; margin: 0 auto; }
/* Signal-dropout entrance: the logo boots like a display waking up. Applied
   only on a visitor's FIRST arrival (see bootOnce() in ui.js) — an entrance
   that replays on every visit home stops being an entrance. */
.cd-hero img.boots { animation: cd-boot .5s steps(3) both; }
@media (prefers-reduced-motion: reduce) { .cd-hero img.boots { animation: none; } }
@keyframes cd-boot {
  0% { opacity: 0; clip-path: inset(46% 0 46% 0); }
  50% { opacity: 1; clip-path: inset(20% 0 24% 0); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); }
}
.cd-tagline { font-family: var(--mono); font-size: clamp(10px, 1.1vh, 14px);
  letter-spacing: .42em; color: var(--muted); margin-top: 14px; text-transform: uppercase;
  /* the skull eats the left ~26% of the logo, so the wordmark's optical
     centre is right of the image centre — shift to sit under the type,
     matching the Japanese line baked into the art above it */
  padding-left: .42em; }   /* letter-spacing pads the right edge only */
/* nudge under the wordmark only when the logo is wide enough that the skull
   actually skews the optical centre — on a phone this shift bleeds off-screen */
/* superseded: the tagline now lives inside .cd-mark-stack and is nudged
   there, against the logo rather than against the page. */

.cd-divider { display: block; width: min(1100px, 92vw); margin: 6px auto 0; opacity: .75; }

/* ---------- primary actions ---------- */
.cd-actions { display: grid; gap: 14px; padding: clamp(14px, 3vh, 30px) 22px 0;
  max-width: 1240px; margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.cd-act {
  position: relative; background: var(--terminal); border: 1px solid var(--line);
  padding: 22px 16px 18px; cursor: pointer; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: border-color .12s linear, background .12s linear;
  /* angular cutout, not a rounded web button */
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.cd-act img { height: clamp(48px, 7vh, 78px); width: auto; }
.cd-act .cd-en { font-family: var(--mono); font-size: clamp(13px, 1.5vh, 18px);
  letter-spacing: .2em; color: var(--sig-yellow); }
.cd-act .cd-jp { font-family: var(--mono); font-size: clamp(9px, 1vh, 12px);
  letter-spacing: .12em; color: var(--sig-magenta); }
.cd-act .cd-note { font-family: var(--mono); font-size: clamp(9px, .95vh, 12px);
  color: var(--muted); line-height: 1.5; }
.cd-act:hover { border-color: var(--sig-yellow); background: #0d1012; }
.cd-act:hover .cd-en { color: #fff; }
/* PLAY is the centre of gravity — magenta, per the yellow/magenta semantics */
.cd-act.is-play .cd-en { color: var(--sig-magenta); }
.cd-act.is-play:hover { border-color: var(--sig-magenta); }
/* tiny terminal nodes at the corners */
.cd-act::after { content: ""; position: absolute; right: 6px; bottom: 6px;
  width: 4px; height: 4px; background: var(--line); }
.cd-act:hover::after { background: var(--sig-yellow); }

/* ---------- secondary row ---------- */
.cd-second { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  padding: 16px 22px 0; }
.cd-btn { font-family: var(--mono); font-size: 12px; letter-spacing: .16em;
  background: transparent; color: var(--muted); border: 1px solid var(--line);
  padding: 9px 16px; cursor: pointer; min-height: 40px;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); }
.cd-btn:hover { color: var(--sig-yellow); border-color: var(--sig-yellow); background: transparent; }
.cd-btn.magenta:hover { color: var(--sig-magenta); border-color: var(--sig-magenta); }

/* ---------- CHOOM+ cross-sell ----------
   Same membership, opposite pitch depending on which door the visitor came
   in. Here the CHOOMDECK benefits lead (analysis, card backs) and the
   CHOOMDEX index is the bonus; the panel on CHOOMDEX flips it. The audiences
   overlap but arrive wanting different things — players want the table,
   collectors want the index. */
.cd-plus { max-width: 1240px; margin: 0 auto; padding: clamp(18px, 3.4vh, 34px) 22px 0; }
.cd-plus-inner { display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  background: linear-gradient(100deg, rgba(255,8,120,.09), rgba(255,229,0,.05) 60%, transparent);
  border: 1px solid #2a1220; padding: 18px 22px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); }
.plus-mark { font-family: var(--display); font-size: clamp(26px, 3.6vh, 46px);
  color: var(--txt); line-height: 1; letter-spacing: .02em; flex: none; }
.plus-mark em { font-style: normal; color: var(--sig-magenta); }
.plus-copy { flex: 1; min-width: 240px; }
.plus-title { font-family: var(--mono); font-size: clamp(12px, 1.5vh, 17px);
  letter-spacing: .12em; color: var(--sig-yellow); margin-bottom: 8px; }
.plus-list { display: flex; flex-direction: column; gap: 4px; }
.plus-list span { font-family: var(--mono); font-size: clamp(10px, 1.1vh, 13px);
  color: var(--muted); line-height: 1.5; }
.plus-list b { color: var(--txt); font-weight: 400; }
.plus-cta { text-align: center; flex: none; }
.plus-price { font-family: var(--display); font-size: clamp(22px, 3vh, 36px);
  color: var(--sig-magenta); line-height: 1; }
.plus-price i { font-style: normal; font-size: 13px; color: var(--muted); }
.plus-cta .cd-btn { margin-top: 8px; color: var(--sig-magenta); border-color: #5a1030; }
.plus-cta .cd-btn:hover { background: var(--sig-magenta); color: #08090a; border-color: var(--sig-magenta); }
.plus-note { font-family: var(--mono); font-size: 9px; letter-spacing: .18em;
  color: #4a5155; margin-top: 8px; }
@media (max-width: 700px) {
  .cd-plus-inner { padding: 14px; gap: 14px; }
  .plus-cta { width: 100%; }
  .plus-cta .cd-btn { width: 100%; }
}

/* ---------- status strip ---------- */
.cd-stats { display: flex; gap: 26px; flex-wrap: wrap; justify-content: center;
  padding: clamp(18px, 3.4vh, 34px) 22px 0; font-family: var(--mono); }
.cd-stat { text-align: center; }
.cd-stat b { display: block; font-size: clamp(22px, 3.2vh, 40px); color: var(--sig-yellow);
  font-weight: 400; line-height: 1; }
.cd-stat span { font-size: 10px; letter-spacing: .22em; color: var(--muted); }
.cd-stat.magenta b { color: var(--sig-magenta); }

/* ---------- footer micro-copy ---------- */
.cd-foot { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center;
  padding: clamp(20px, 4vh, 40px) 22px 0; font-family: var(--mono); font-size: 10px;
  letter-spacing: .2em; color: #3d4448; }
.cd-foot b { color: var(--muted); font-weight: 400; }

/* ══════════ SHARED CHROME — every page below the front page ══════════
   Same terminal identity as the home screen: sysbar, compact logo, nav with
   the active item underlined in yellow + terminal nodes, and a footer. */
.cd-shell { min-height: 100vh; background:
    linear-gradient(rgba(255,229,0,.022) 1px, transparent 1px) 0 0 / 100% 46px,
    linear-gradient(90deg, rgba(255,229,0,.022) 1px, transparent 1px) 0 0 / 46px 100%,
    var(--void, #030405);
  color: var(--txt, #E8EAEB); display: flex; flex-direction: column; }
.cd-shell .cd-body { flex: 1; max-width: 1240px; width: 100%; margin: 0 auto;
  padding: 20px 22px 40px; }

.cd-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 12px 22px; border-bottom: 1px solid var(--line, #1c2225); }
.cd-head .cd-mark { height: clamp(30px, 4.4vh, 46px); width: auto; flex: none;
  object-fit: contain; align-self: center; cursor: pointer; }
.cd-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.cd-nav button { font-family: var(--mono); font-size: 12px; letter-spacing: .16em;
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: var(--muted, #747B80); padding: 7px 12px 5px; cursor: pointer; min-height: 34px;
  position: relative; }
.cd-nav button:hover { color: var(--txt); background: transparent; }
.cd-nav button.on { color: var(--sig-yellow, #FFE500); border-bottom-color: var(--sig-yellow, #FFE500); }
/* tiny square terminal nodes flanking the active item */
.cd-nav button.on::before, .cd-nav button.on::after {
  content: ""; position: absolute; bottom: -2px; width: 3px; height: 3px;
  background: var(--sig-yellow, #FFE500); }
.cd-nav button.on::before { left: 0; }
.cd-nav button.on::after { right: 0; }
.cd-head .sep { flex: 1; }
.cd-head .cd-status { font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  color: var(--muted, #747B80); display: flex; align-items: center; gap: 8px; }
.cd-head .cd-status b { color: var(--sig-yellow, #FFE500); font-weight: 400; }

.cd-pagehead { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin-bottom: 18px; }
.cd-pagehead img { height: clamp(26px, 3.4vh, 40px); }
.cd-pagehead h2 { font-family: var(--display); font-size: clamp(26px, 4vh, 44px);
  color: var(--txt); line-height: 1; }
.cd-pagehead .sub { font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  color: var(--muted); }

/* ---------- full footer ---------- */
.cd-footer-full { border-top: 1px solid var(--line, #1c2225); margin-top: 40px;
  padding: 0 22px 26px; background: rgba(4,6,7,.6); }
.ft-divider { display: block; width: min(1100px, 92vw); margin: 0 auto 22px; opacity: .45; }
.ft-cols { display: grid; gap: 26px; max-width: 1240px; margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); padding-top: 6px; }
.ft-col { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.ft-head { font-family: var(--mono); font-size: 9px; letter-spacing: .28em;
  color: var(--sig-yellow, #FFE500); margin-bottom: 4px; }
.ft-col button, .ft-col a { font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  background: none; border: 0; padding: 0; color: var(--muted, #747B80);
  cursor: pointer; text-align: left; text-decoration: none; }
.ft-col button:hover, .ft-col a:hover { color: var(--txt, #E8EAEB); background: none; }
.ft-brand { align-items: flex-start; gap: 10px; }
.ft-tag { font-family: var(--mono); font-size: 9px; letter-spacing: .22em; color: #4a5155; }
.ft-soon, .cd-footer-full .foot-discord { display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--muted); }
.ft-soon img, .cd-footer-full .foot-discord img { height: 26px; }
.cd-footer-full .foot-discord:hover { color: var(--sig-magenta, #FF0878); }
.ft-soon { opacity: .55; }
.ft-base { display: flex; gap: 16px; flex-wrap: wrap; align-items: baseline;
  max-width: 1240px; margin: 24px auto 0; padding-top: 14px;
  border-top: 1px solid rgba(28,34,37,.7);
  font-family: var(--mono); font-size: 9px; letter-spacing: .16em; color: #3d4448; }
.ft-base b { color: var(--muted, #747B80); font-weight: 400; }
.ft-base .sep { flex: 1; }
.ft-disc { max-width: 620px; line-height: 1.6; letter-spacing: .04em; text-transform: none; }
@media (max-width: 700px) {
  .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .ft-brand { grid-column: 1 / -1; }
}

.cd-footer { border-top: 1px solid var(--line, #1c2225); padding: 16px 22px;
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: #3d4448; }
.cd-footer b { color: var(--muted, #747B80); font-weight: 400; }
.cd-footer .sep { flex: 1; }
.cd-footer a { color: var(--muted); text-decoration: none; }
.cd-footer a:hover { color: var(--sig-magenta, #FF0878); }

@media (max-width: 700px) {
  .cd-head { gap: 10px; padding: 10px 14px; }
  .cd-nav button { font-size: 10px; padding: 6px 8px 4px; letter-spacing: .1em; }
  .cd-head .cd-status { display: none; }
  .cd-shell .cd-body { padding: 14px; }
}

/* ---------- card-back picker (the store mechanic, minus payment) ---------- */
.back-picker { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.back-opt { display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--line); padding: 8px; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); }
.back-opt img { width: 42%; aspect-ratio: 5/7; object-fit: contain; }
.back-opt { flex-direction: row; flex-wrap: wrap; justify-content: center;
  position: relative; }
.back-opt span { width: 100%; text-align: center; font-family: var(--mono); font-size: 9px;
  letter-spacing: .12em; color: var(--muted); }
.back-opt:hover { border-color: var(--sig-yellow); }
/* Hovering a pack raises a FLOATING preview at real card size (see #backpv).
   It can't be done by scaling the thumbnails: .back-opt carries a clip-path
   for its angular corners, and a clip-path clips its children, so anything
   scaled inside is cut off at the tile boundary. */
#backpv { position: fixed; z-index: 90; display: none; gap: 14px;
  pointer-events: none; padding: 14px;
  background: rgba(6,8,10,.96); border: 1px solid var(--sig-yellow, #FFE500);
  box-shadow: 0 24px 70px rgba(0,0,0,.9); }
#backpv.on { display: flex; }
#backpv figure { margin: 0; text-align: center; }
#backpv img { height: clamp(200px, 42vh, 420px); width: auto; display: block;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.8)); }
#backpv figcaption { font-family: var(--mono); font-size: 9px; letter-spacing: .2em;
  color: var(--muted, #747B80); margin-top: 8px; }
#backpv .bp-name { font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  color: var(--sig-yellow, #FFE500); }
#backpv .bp-meta { font-family: var(--mono); font-size: 10px; color: var(--muted); margin-top: 4px; }
#backpv .bp-side { display: flex; flex-direction: column; justify-content: center;
  max-width: 190px; }
@media (max-width: 900px) { #backpv { display: none !important; } }
.back-opt.on { border-color: var(--sig-magenta); }
.back-opt.on span { color: var(--sig-magenta); }

/* Locked packs keep FULL COLOUR — desaturating them read as broken art
   rather than "not yours yet" (David: "they go weird... like a grey").
   The price badge and the hazard tick carry the locked state instead. */
.back-opt.locked img { filter: none; }
.back-opt.locked span { color: var(--muted); }
.back-opt.locked { border-color: #2a1220; }
.back-opt.locked:hover { border-color: var(--sig-magenta); }
.lockbadge { position: absolute; top: 6px; right: 6px; font-style: normal;
  font-family: var(--mono); font-size: 9px; letter-spacing: .08em;
  background: rgba(255,8,120,.14); border: 1px solid var(--sig-magenta);
  color: var(--sig-magenta); padding: 1px 5px; }

/* ---------- tutorial ---------- */
.tutpanel { position: fixed; z-index: 78; width: clamp(280px, 25vw, 400px);
  background: #0b0d0e; border: 1px solid var(--sig-yellow, #FFE500);
  border-left: 4px solid var(--sig-yellow, #FFE500); padding: 14px 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.8);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.tutpanel.hidden { display: none; }
.tut-head { font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
  color: #FFE500; margin-bottom: 8px; }
.tut-body { font-family: var(--mono); font-size: 13px; line-height: 1.55;
  color: #E8EAEB; margin-bottom: 12px; }
.tut-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tut-actions .cd-btn { font-size: 11px; padding: 7px 12px; min-height: 34px;
  color: #FFE500; border-color: #3a3606; }
.tut-actions .cd-btn:hover { background: #FFE500; color: #08090a; border-color: #FFE500; }
.tut-actions .cd-btn:last-child { color: var(--muted, #747B80); border-color: #1c2225; }
.tut-actions .cd-btn:last-child:hover { background: transparent; color: #FF0878; border-color: #FF0878; }
/* the zone being explained gets ringed */
.tut-ring { outline: 2px solid rgba(255,229,0,.75); outline-offset: 3px;
  animation: tut-pulse 1.6s ease-in-out infinite; }
@keyframes tut-pulse { 50% { outline-color: rgba(255,229,0,.25); } }

/* first-run call-out on the front page */
.cd-firstrun { max-width: 1240px; margin: 18px auto 0; padding: 0 22px; }
.cd-firstrun-inner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(90deg, rgba(255,229,0,.07), transparent 70%);
  border: 1px solid #3a3606; padding: 14px 18px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.cd-firstrun .fr-kick { font-family: var(--mono); font-size: 10px; letter-spacing: .24em;
  color: var(--sig-yellow); }
.cd-firstrun .fr-title { font-family: var(--display); font-size: clamp(20px, 2.6vh, 30px);
  color: var(--txt); line-height: 1.1; }
.cd-firstrun .fr-note { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.cd-firstrun .sep { flex: 1; }
.cd-firstrun .cd-btn { color: var(--sig-yellow); border-color: #3a3606; }
.cd-firstrun .cd-btn:hover { background: var(--sig-yellow); color: #08090a; }

/* ---------- side panels (identity / shop / community) ---------- */
.cd-cols { display: grid; gap: 14px; max-width: 1240px; margin: 0 auto;
  padding: 18px 22px 0; grid-template-columns: minmax(0, 1fr); }
.cd-panel { background: var(--terminal); border: 1px solid var(--line); padding: 14px 16px; }
.cd-panel-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.cd-panel-head h3 { font-family: var(--display); font-size: 20px; color: var(--txt);
  letter-spacing: .04em; }
.cd-panel-head .tag { font-family: var(--mono); font-size: 9px; letter-spacing: .2em;
  color: var(--muted); margin-left: auto; }
.cd-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cd-row .grow { flex: 1; min-width: 0; }
.cd-panel .lbl { font-family: var(--mono); font-size: 9px; letter-spacing: .22em;
  color: var(--muted); display: block; margin-bottom: 5px; }
.cd-panel .val { font-family: var(--mono); font-size: 13px; color: var(--txt); }
.cd-panel .val b { color: var(--sig-yellow); font-weight: 400; }
.cd-panel input, .cd-panel select {
  font-family: var(--mono); font-size: 13px; background: #05070800; color: var(--txt);
  border: 1px solid var(--line); padding: 9px 11px; min-height: 40px; width: 100%; }
.cd-panel input:focus, .cd-panel select:focus { outline: 1px solid var(--sig-yellow); }
.cd-soon { font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  color: var(--muted); border: 1px dashed var(--line); padding: 8px 10px; }

/* Discord — David's own halftone mark, not the stock brand logo */
.cd-discord { display: flex; align-items: center; gap: 12px; width: 100%;
  background: transparent; border: 1px solid var(--line); color: var(--txt);
  padding: 10px 12px; cursor: pointer; text-align: left;
  transition: border-color .12s linear, background .12s linear;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px)); }
.cd-discord img { height: 40px; width: auto; flex: none; }
.cd-discord span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cd-discord b { font-family: var(--mono); font-size: 12px; letter-spacing: .18em;
  color: var(--sig-yellow); font-weight: 400; }
.cd-discord i { font-family: var(--mono); font-size: 10px; font-style: normal;
  letter-spacing: .1em; color: var(--muted); }
.cd-discord:hover { border-color: var(--sig-magenta); background: #0d1012; }
.cd-discord.is-soon { cursor: default; opacity: .6; border-style: dashed; }
.cd-discord.is-soon:hover { border-color: var(--line); background: transparent; }
.foot-discord { display: inline-flex; align-items: center; gap: 6px; }
.foot-discord img { height: 15px; }
@media (min-width: 980px) { .cd-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (max-width: 700px) {
  .tutpanel { left: 8px !important; right: 8px; width: auto;
    top: auto !important; bottom: 10px; }
  .cd-sysbar { font-size: 9px; letter-spacing: .12em; padding: 8px 14px; gap: 8px; }
  .cd-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px; }
  .cd-act { padding: 14px 8px 12px; }
  .cd-stats { gap: 16px; }
}

/* ---------- CARD BACKS store ---------- */
.st-intro { font-family: var(--mono); font-size: clamp(11px, 1.2vh, 14px);
  line-height: 1.6; color: var(--muted); max-width: 720px; margin-bottom: 16px; }
.st-plusbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(100deg, rgba(255,8,120,.09), transparent 70%);
  border: 1px solid #2a1220; padding: 12px 16px; margin-bottom: 22px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--muted);
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px)); }
.st-plusbar b { color: var(--sig-magenta); font-weight: 400; }
.st-plusbar .sep { flex: 1; }
.st-plusbar .cd-btn { color: var(--sig-magenta); border-color: #5a1030; }
.st-h { font-family: var(--mono); font-size: 10px; letter-spacing: .28em;
  color: var(--sig-yellow); margin: 24px 0 10px; }
.st-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.st-pack { background: var(--terminal); border: 1px solid var(--line); padding: 12px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.st-pack.on { border-color: var(--sig-yellow); }
.st-pack.locked { border-color: #2a1220; }
.st-art { display: flex; gap: 8px; justify-content: center; margin-bottom: 10px; }
.st-art img { width: 46%; aspect-ratio: 5/7; object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)); }
.st-name { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--txt); }
.st-note { font-family: var(--mono); font-size: 10px; color: var(--muted); line-height: 1.5; margin-top: 4px; }
.st-artist { font-family: var(--mono); font-size: 9px; letter-spacing: .16em;
  color: #4a5155; margin-top: 6px; }
.st-act { margin-top: 10px; }
.st-act .cd-btn { width: 100%; }
.st-pack.locked .st-act .cd-btn { color: var(--sig-magenta); border-color: #5a1030; }
.st-set { margin-top: 26px; border: 1px solid #2a2410; padding: 16px;
  background: linear-gradient(180deg, rgba(255,229,0,.04), transparent 60%); }
.st-set-head { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.st-set-name { font-family: var(--display); font-size: clamp(20px, 2.6vh, 30px); color: var(--sig-yellow); }
.st-set-buy { margin-left: auto; text-align: right; }
.st-price { font-family: var(--display); font-size: clamp(22px, 3vh, 34px); color: var(--txt); line-height: 1; }
.st-save { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; color: var(--green, #34d399); margin: 4px 0 8px; }
@media (max-width: 700px) {
  .st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .st-set-buy { margin-left: 0; text-align: left; }
}

/* ---------- MY DECKS: show the cards, don't just count them ---------- */
.deck-card { background: var(--terminal, #080A0B); border: 1px solid var(--line, #1c2225);
  padding: 12px 14px; margin-bottom: 10px; }
.dk-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.dk-head .d-name { font-family: var(--display); font-size: 21px; color: var(--txt, #E8EAEB); }
.dk-head .d-meta { font-family: var(--mono); font-size: 10px; color: var(--muted, #747B80); }
.dk-sp { flex: 1; }
.dk-head button { font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  background: transparent; border: 1px solid var(--line); color: var(--muted);
  padding: 6px 12px; min-height: 34px; cursor: pointer; }
.dk-head button:hover { color: var(--sig-yellow, #FFE500); border-color: var(--sig-yellow, #FFE500); background: transparent; }
.dk-head button.danger:hover { color: var(--sig-magenta, #FF0878); border-color: var(--sig-magenta, #FF0878); }
.dk-strip { display: flex; gap: 5px; flex-wrap: wrap; }
.dk-card { position: relative; width: 54px; aspect-ratio: 5/7; flex: none; display: block; }
.dk-card img { width: 100%; height: 100%; object-fit: cover; display: block;
  border: 1px solid rgba(34,211,238,.16); }
.dk-card.legend img { border-color: rgba(255,229,0,.5); }
.dk-card b { position: absolute; right: -2px; bottom: -2px; font-family: var(--mono);
  font-size: 10px; font-weight: 600; padding: 0 4px;
  background: rgba(9,12,18,.92); border: 1px solid var(--line); color: var(--sig-yellow, #FFE500); }
.dk-more { align-self: center; font-family: var(--mono); font-size: 11px; color: var(--muted); }
@media (max-width: 700px) { .dk-card { width: 42px; } }

/* ---------- footer share row ----------
   ONE skull. The brand column used to stack the full skull+wordmark lockup
   above a second bare skull in this row, which read as a duplicate. The
   skull alone is the mark here; the wordmark is already in the header. */
.ft-share { display: flex; align-items: center; gap: 14px; }
.ft-skull { height: 62px; width: auto; flex: none; }
.ft-share-btns { display: flex; flex-direction: column; gap: 7px; }
.ft-share-lbl { font-family: var(--mono); font-size: 9px; letter-spacing: .26em;
  color: #4a5155; }
.sh-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.sh-btn { display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; cursor: pointer;
  background: transparent; border: 1px solid var(--line, #1c2225); color: var(--muted, #747B80);
  transition: color .14s, border-color .14s, box-shadow .14s;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)); }
.sh-btn svg { display: block; }
/* each mark lights up in its own brand colour, drawn from our palette */
.sh-btn.sh-x:hover { color: var(--txt, #E8EAEB); border-color: var(--txt, #E8EAEB);
  box-shadow: 0 0 12px rgba(232, 234, 235, .22); }
.sh-btn.sh-r:hover { color: var(--hot-pink, #FF1685); border-color: var(--hot-pink, #FF1685);
  box-shadow: 0 0 12px rgba(255, 22, 133, .3); }
.sh-btn.sh-d:hover { color: var(--cyan, #22d3ee); border-color: var(--cyan, #22d3ee);
  box-shadow: 0 0 12px rgba(34, 211, 238, .3); }
.sh-btn.sh-c:hover { color: var(--sig-yellow, #FFE500); border-color: var(--sig-yellow, #FFE500);
  box-shadow: 0 0 12px rgba(255, 229, 0, .28); }
.sh-btn:focus-visible { outline: 2px solid var(--sig-yellow, #FFE500); outline-offset: 2px; }

/* a panel heading that navigates should look like it does */
.cd-panel-head.is-link { cursor: pointer; }
.cd-panel-head.is-link:hover h3 { color: var(--sig-yellow); }
.cd-panel-head.is-link:hover .tag { color: var(--sig-yellow); }

/* ---------- CHOOM+ page ----------
   CHOOMDECK's own pitch: the table section reads first and gets the accent,
   the index section is deliberately cooler so it reads as the bonus half of
   the membership rather than a second sales pitch competing with the first. */
.cd-plus.is-link { cursor: pointer; }
.pp-wrap { display: flex; flex-direction: column; gap: 22px; }

.pp-hero { border: 1px solid var(--line, #1c2225); padding: clamp(18px, 3vw, 34px);
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(255, 22, 133, .10), transparent 60%),
    radial-gradient(90% 120% at 92% 100%, rgba(255, 229, 0, .07), transparent 62%),
    #0b0e10;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
.plus-mark.big { font-size: clamp(30px, 5.4vw, 52px); line-height: 1; margin-bottom: 12px; }
.pp-hero h3 { font-family: var(--display, var(--mono)); font-size: clamp(17px, 2.9vw, 28px);
  letter-spacing: .04em; margin: 0 0 10px; color: var(--txt, #E8EAEB); }
.pp-hero h3 i { color: var(--sig-yellow, #FFE500); font-style: normal; }
.pp-hero p { max-width: 62ch; margin: 0; color: var(--muted, #747B80);
  font-size: var(--ui-sm, 13px); line-height: 1.65; }
.pp-buy { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.pp-cancel { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: #4a5155; }
.pp-active { margin-top: 18px; display: inline-block; padding: 9px 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  color: #0b0e10; background: var(--sig-yellow, #FFE500); font-weight: 700; }

.pp-sec { border: 1px solid var(--line, #1c2225); padding: clamp(14px, 2.4vw, 24px); background: #0a0d0f; }
.pp-sec.dex { border-color: #16202a; background: #080a0c; }
.pp-sechead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line, #1c2225); padding-bottom: 10px; margin-bottom: 16px; }
.pp-sechead b { font-family: var(--mono); font-size: var(--ui-sm, 13px);
  letter-spacing: .22em; color: var(--sig-yellow, #FFE500); }
.pp-sec.dex .pp-sechead b { color: var(--cyan, #22d3ee); }
.pp-sechead span { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: #4a5155; }

.pp-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.pp-item { display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid #14191c; padding: 13px 14px; background: #0d1113; min-width: 0; }
.pp-item.is-soon { opacity: .72; }
.pp-tag { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; font-weight: 700;
  color: var(--hot-pink, #FF1685); border: 1px solid currentColor; padding: 3px 6px; flex: none; }
.pp-sec.dex .pp-tag { color: var(--cyan, #22d3ee); }
.pp-item > div { min-width: 0; }
.pp-item b { display: block; font-family: var(--mono); font-size: var(--ui-xs, 11px);
  letter-spacing: .1em; color: var(--txt, #E8EAEB); margin-bottom: 5px; }
.pp-item span { display: block; font-size: var(--ui-xs, 12px); line-height: 1.6; color: var(--muted, #747B80); }
.pp-soon { font-style: normal; font-size: 8px; letter-spacing: .16em; color: #0b0e10;
  background: #4a5155; padding: 2px 5px; margin-left: 6px; vertical-align: middle; }
.pp-dexlink { display: inline-block; margin-top: 14px; font-family: var(--mono);
  font-size: 10px; letter-spacing: .18em; color: var(--cyan, #22d3ee); text-decoration: none; }
.pp-dexlink:hover { text-decoration: underline; }

.pp-compare { border: 1px solid var(--line, #1c2225); padding: clamp(14px, 2.4vw, 24px); background: #0a0d0f; }
.pp-fine { margin: 14px 0 0; font-size: var(--ui-xs, 12px); color: var(--muted, #747B80); line-height: 1.6; }
.pp-fine .lnk { background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--sig-yellow, #FFE500); font: inherit; }
.pp-fine .lnk:hover { text-decoration: underline; }

/* ---------- deck analyser ----------
   Same numbers as CHOOMDEX, presented in this system's voice. Every card
   here uses minmax(0,1fr) / min-width:0 — bare 1fr resolves to min-content
   and has widened this layout past the viewport before. */
.an-wrap { display: flex; flex-direction: column; gap: 16px; }
.an-bararea { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--line, #1c2225); padding: 10px 14px; background: #0a0d0f; }
.an-bararea .sep { flex: 1; }
.an-pick { font-family: var(--mono); font-size: 9px; letter-spacing: .2em; color: #4a5155;
  display: flex; align-items: center; gap: 8px; }
.an-pick select { font-family: var(--mono); font-size: var(--ui-xs, 12px); letter-spacing: .08em;
  background: #0d1113; color: var(--txt, #E8EAEB); border: 1px solid var(--line, #1c2225);
  padding: 7px 10px; max-width: min(58vw, 340px); }
.an-fmt, .an-quota { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: #4a5155; }
.an-fmt b { color: var(--cyan, #22d3ee); font-weight: 400; }
.an-quota b.plusOn { color: var(--sig-yellow, #FFE500); }

.an-empty { border: 1px solid var(--line, #1c2225); background: #0a0d0f; padding: 30px 22px;
  text-align: center; color: var(--muted, #747B80); font-size: var(--ui-sm, 13px); line-height: 1.65; }
.an-empty b { display: block; color: var(--txt, #E8EAEB); font-family: var(--mono);
  letter-spacing: .14em; margin-bottom: 8px; }
.an-empty p { max-width: 52ch; margin: 0 auto 16px; }

.an-top { display: grid; gap: 14px; align-items: stretch;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 300px);
  border: 1px solid var(--line, #1c2225); background: #0a0d0f; padding: 16px; }
@media (max-width: 860px) { .an-top { grid-template-columns: 1fr; } }
.an-grade { display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 108px; padding: 12px 18px; border: 1px solid var(--line, #1c2225); background: #0d1113; }
.an-grade b { font-family: var(--display, var(--mono)); font-size: 54px; line-height: 1;
  color: var(--sig-yellow, #FFE500); }
.an-grade span { font-family: var(--mono); font-size: 13px; color: var(--txt, #E8EAEB); margin-top: 4px; }
.an-grade span i { font-style: normal; font-size: 9px; color: #4a5155; }
.an-grade.g-A b { color: #6ee7a8; } .an-grade.g-B b { color: var(--sig-yellow, #FFE500); }
.an-grade.g-C b { color: #e0b341; } .an-grade.g-D b { color: #e07a41; }
.an-grade.g-F b { color: var(--hot-pink, #FF1685); }
.an-arch { min-width: 0; }
.an-archname { font-family: var(--display, var(--mono)); font-size: clamp(19px, 3vw, 30px);
  color: var(--hot-pink, #FF1685); letter-spacing: .03em; }
.an-arch p { margin: 6px 0 0; color: var(--txt, #E8EAEB); font-size: var(--ui-sm, 13px); line-height: 1.6; }
.an-note { margin-top: 8px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .1em; color: #4a5155; }
.an-ratings { display: flex; flex-direction: column; justify-content: center; gap: 9px; min-width: 0; }
.an-bar { display: grid; grid-template-columns: 92px minmax(0, 1fr) 30px; align-items: center; gap: 9px; }
.an-bl { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; color: #4a5155; }
.an-track { display: block; height: 8px; background: #14191c; overflow: hidden; }
.an-track i { display: block; height: 100%; background: var(--cyan, #22d3ee); }
.an-track i.hi { background: var(--sig-yellow, #FFE500); }
.an-bar b { font-family: var(--mono); font-size: 11px; color: var(--txt, #E8EAEB); text-align: right; }

.an-flags { border: 1px solid #5a1030; background: rgba(255, 22, 133, .06); padding: 12px 16px; }
.an-flags.precon { border-color: #4a3a10; background: rgba(255, 229, 0, .05); }
.an-flags b { font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  color: var(--hot-pink, #FF1685); }
.an-flags.precon b { color: var(--sig-yellow, #FFE500); }
.an-flags ul { margin: 8px 0 0; padding-left: 18px; }
.an-flags li { font-size: var(--ui-xs, 12px); color: var(--txt, #E8EAEB); line-height: 1.7; }
.an-ok { border: 1px solid #1c3a28; background: rgba(110, 231, 168, .05); padding: 10px 16px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: #6ee7a8; }

.an-cols { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.an-card { border: 1px solid var(--line, #1c2225); background: #0a0d0f; padding: 14px 16px; min-width: 0; }
.an-h { font-family: var(--mono); font-size: 9px; letter-spacing: .22em; color: var(--sig-yellow, #FFE500);
  border-bottom: 1px solid var(--line, #1c2225); padding-bottom: 8px; margin-bottom: 12px; }
.an-curve { display: flex; align-items: flex-end; gap: 5px; height: 128px; }
.an-cbar { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; height: 100%; }
.an-cbar span { display: block; width: 100%; background: linear-gradient(180deg, var(--cyan, #22d3ee), #0e7490);
  min-height: 2px; }
.an-cbar em { font-style: normal; font-family: var(--mono); font-size: 9px;
  color: var(--txt, #E8EAEB); order: -1; margin-bottom: 3px; height: 11px; }
.an-cbar i { font-style: normal; font-family: var(--mono); font-size: 9px; color: #4a5155; margin-top: 5px; }
.an-kv { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; }
.an-kv.wide { gap: 8px 18px; }
.an-kv span { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; color: #4a5155; }
.an-kv b { color: var(--txt, #E8EAEB); font-size: 12px; margin-left: 4px; font-weight: 400; }
.an-tbl { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.an-tbl th, .an-tbl td { text-align: left; padding: 6px 10px 6px 0; white-space: nowrap;
  border-bottom: 1px solid #14191c; font-size: var(--ui-xs, 12px); color: var(--txt, #E8EAEB); }
.an-tbl th { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; color: #4a5155; }
.an-tbl td i { font-style: normal; color: #4a5155; font-size: 10px; }
.an-tbl tr.bad td { color: var(--hot-pink, #FF1685); }
.an-early { margin-top: 11px; font-size: var(--ui-xs, 12px); color: var(--txt, #E8EAEB); line-height: 1.6; }
.an-early b { color: var(--sig-yellow, #FFE500); font-weight: 400; }
.an-fine { margin-top: 9px; font-size: 11px; color: #4a5155; line-height: 1.6; }
.an-fine b { color: var(--muted, #747B80); font-weight: 400; }
.an-cols-colours { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.an-chip { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; color: var(--muted, #747B80);
  border: 1px solid var(--line, #1c2225); padding: 4px 8px; }
.an-chip b { color: var(--txt, #E8EAEB); font-weight: 400; }
.an-advice ul { margin: 0; padding-left: 18px; }
.an-advice li { font-size: var(--ui-sm, 13px); color: var(--txt, #E8EAEB); line-height: 1.75; }
.an-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- events / tournaments ---------- */
.ev-wrap { display: flex; flex-direction: column; gap: 16px; }
.ev-intro { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 270px);
  border: 1px solid var(--line, #1c2225); background: #0a0d0f; padding: 16px 18px; }
@media (max-width: 820px) { .ev-intro { grid-template-columns: 1fr; } }
.ev-intro h3 { margin: 0 0 8px; font-family: var(--display, var(--mono));
  font-size: clamp(16px, 2.6vw, 24px); letter-spacing: .04em; color: var(--sig-yellow, #FFE500); }
.ev-intro p { margin: 0; max-width: 62ch; color: var(--muted, #747B80);
  font-size: var(--ui-sm, 13px); line-height: 1.65; }
.ev-fixer { border: 1px solid var(--line, #1c2225); background: #0d1113; padding: 12px 14px; min-width: 0; }
.ev-fx-head { font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  color: var(--muted, #747B80); display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.ev-fx-head b { color: var(--sig-yellow, #FFE500); font-weight: 400; }
.ev-fx-line { font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  color: #4a5155; margin-bottom: 4px; }
.ev-fx-line b { color: var(--txt, #E8EAEB); font-weight: 400; }
.ev-fx-note { margin-top: 9px; font-size: 10px; color: #3a4145; line-height: 1.5; }

.ev-list { display: flex; flex-direction: column; gap: 10px; }
.ev-card { display: grid; gap: 16px; align-items: center;
  grid-template-columns: 118px minmax(0, 1fr) auto;
  border: 1px solid var(--line, #1c2225); background: #0a0d0f; padding: 14px 16px;
  border-left-width: 3px; }
.ev-card.t-casual { border-left-color: #2a3648; }
.ev-card.t-ranked { border-left-color: var(--hot-pink, #FF1685); }
.ev-card.t-prerelease { border-left-color: var(--cyan, #22d3ee); }
.ev-card.is-soon { background: #0d1113; box-shadow: inset 0 0 0 1px rgba(255, 22, 133, .16); }
@media (max-width: 760px) {
  .ev-card { grid-template-columns: 1fr; gap: 10px; }
  .ev-cta { flex-direction: row; align-items: center; }
}
.ev-when { text-align: center; min-width: 0; }
.ev-when b { display: block; font-family: var(--display, var(--mono)); font-size: 21px;
  color: var(--sig-yellow, #FFE500); line-height: 1.1; }
.ev-when span { display: block; font-family: var(--mono); font-size: 10px;
  color: var(--txt, #E8EAEB); margin-top: 3px; }
.ev-when i { font-style: normal; font-family: var(--mono); font-size: 8px;
  letter-spacing: .16em; color: #3a4145; }
.ev-main { min-width: 0; }
.ev-name { font-family: var(--display, var(--mono)); font-size: clamp(15px, 2.2vw, 21px);
  color: var(--txt, #E8EAEB); letter-spacing: .03em; }
.ev-name em { font-style: normal; font-size: 11px; color: var(--sig-magenta, #FF0878);
  margin-left: 8px; letter-spacing: .1em; }
.ev-meta { font-family: var(--mono); font-size: 9px; letter-spacing: .16em;
  color: #4a5155; margin: 5px 0 7px; }
.ev-main p { margin: 0; font-size: var(--ui-xs, 12px); color: var(--muted, #747B80); line-height: 1.6; }
.ev-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex: none; }
.ev-tier { font-family: var(--mono); font-size: 8px; letter-spacing: .2em; color: #3a4145; }

.ev-cols { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.ev-box { border: 1px solid var(--line, #1c2225); background: #0a0d0f; padding: 14px 16px; min-width: 0; }
.ev-box.locked { opacity: .82; }
.ev-box p { margin: 0; font-size: var(--ui-xs, 12px); color: var(--muted, #747B80); line-height: 1.7; }
.ev-box p b { color: var(--txt, #E8EAEB); font-weight: 400; }
.ev-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 13px; }
.ev-soon { display: inline-block; margin-top: 13px; font-family: var(--mono); font-size: 9px;
  letter-spacing: .2em; color: #4a5155; border: 1px dashed #2a3238; padding: 6px 11px; }

/* starter deck blurb — sits between the header and the card strip */
.dk-blurb { font-family: var(--mono); font-size: 11px; line-height: 1.6;
  color: var(--muted, #747B80); margin: -4px 0 10px; }

/* ---------- "what it's worth" ----------
   CHOOMDEX's question, answered inside the analyser. Sold money is the
   headline; asks are visually demoted because an ask is not a sale, and
   showing them at equal weight would imply a market value nobody paid. */
.an-worth-intro { margin: 0 0 12px; font-size: var(--ui-xs, 12px);
  line-height: 1.6; color: var(--muted, #747B80); }
.an-worth-load { font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  color: var(--sig-yellow, #FFE500); padding: 18px 0; }
.an-worth-total { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.an-worth-total b { font-family: var(--display, var(--mono)); font-size: clamp(28px, 4.6vw, 42px);
  line-height: 1; color: var(--sig-yellow, #FFE500); }
.an-worth-total span { font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  color: #4a5155; }
.an-worth-ask { margin-top: 8px; font-size: var(--ui-xs, 12px); color: var(--cyan, #22d3ee); }
.an-worth-ask i { font-style: normal; color: #4a5155; font-size: 11px; }
.an-worth-none { margin-top: 6px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .1em; color: #3a4145; }
.an-worth-top { margin-top: 14px; border-top: 1px solid #14191c; padding-top: 11px; }
.an-worth-lbl { display: block; font-family: var(--mono); font-size: 9px;
  letter-spacing: .18em; color: #4a5155; margin-bottom: 7px; }
.an-worth-row { display: flex; justify-content: space-between; gap: 12px;
  font-size: var(--ui-xs, 12px); color: var(--txt, #E8EAEB); padding: 3px 0; min-width: 0; }
.an-worth-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-worth-row i { font-style: normal; color: #4a5155; }
.an-worth-row b { font-weight: 400; flex: none; color: var(--sig-yellow, #FFE500); }
.an-worth-row b.ask { color: var(--cyan, #22d3ee); }
.an-worth-link { display: inline-block; margin-top: 14px; font-family: var(--mono);
  font-size: 9px; letter-spacing: .16em; color: var(--hot-pink, #FF1685); text-decoration: none; }
.an-worth-link:hover { text-decoration: underline; }

.an-worth-nomarket b { display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: .18em; color: var(--cyan, #22d3ee); margin-bottom: 9px; }
.an-worth-nomarket p { margin: 0 0 9px; font-size: var(--ui-xs, 12px);
  line-height: 1.65; color: var(--muted, #747B80); }
.an-worth-nomarket p b { display: inline; font-size: inherit; letter-spacing: 0;
  color: var(--txt, #E8EAEB); margin: 0; }

/* advice behind CHOOM+ — one line shown so the gate is legible, not blank */
.an-plusflag { font-style: normal; font-size: 8px; letter-spacing: .16em;
  color: #05070b; background: var(--hot-pink, #FF1685); padding: 2px 5px; margin-left: 7px; }
.an-locked { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 11px; border-top: 1px dashed #23292d; }
.an-locked span { font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  color: #4a5155; }
.an-advice.is-locked ul { margin-bottom: 0; }

/* ---------- linked CHOOMDEX account ---------- */
.acct-chip { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  background: transparent; color: var(--txt, #E8EAEB);
  border: 1px solid var(--line, #1c2225); padding: 5px 10px; min-height: 30px;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)); }
.acct-chip:hover { border-color: var(--sig-yellow, #FFE500); }
.acct-chip.is-out { color: var(--muted, #747B80); letter-spacing: .16em; }
.acct-chip.is-out:hover { color: var(--sig-yellow, #FFE500); }
.acct-chip img { width: 18px; height: 18px; object-fit: cover; flex: none; }
.acct-ini { font-style: normal; font-size: 8px; letter-spacing: .04em; width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  background: var(--line, #1c2225); color: var(--txt, #E8EAEB); }
.acct-plus { font-style: normal; font-size: 8px; letter-spacing: .12em;
  color: #05070b; background: var(--sig-yellow, #FFE500); padding: 2px 5px; }
@media (max-width: 760px) { .acct-chip span { display: none; } }

/* ---------- FREE vs CHOOM+ table ----------
   It used to be `display:block` for horizontal scrolling, which makes a
   table shrink to its content — on a wide panel it sat hard left with half
   the page empty. The scroll container is now a wrapper, so the table
   itself can be width:100% and actually fill the panel.

   Styling follows the house rules rather than looking like a spreadsheet:
   no cell borders, group bands instead of a header column, and the CHOOM+
   column lit as a single continuous surface so the eye reads it as one
   thing you are being offered. */
.pp-tablewrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.pp-table { width: 100%; min-width: 460px; border-collapse: collapse; }
.pp-table th, .pp-table td { padding: 11px 14px; font-size: var(--ui-xs, 12.5px);
  border: 0; vertical-align: middle; }
.pp-table thead th { font-family: var(--mono); font-size: 9px; letter-spacing: .22em;
  color: #4a5155; padding-bottom: 8px; font-weight: 400; }
.pp-table th:first-child, .pp-table td:first-child {
  width: auto; text-align: left; color: var(--txt, #E8EAEB); }
.pp-table th:not(:first-child), .pp-table td:not(:first-child) {
  width: 21%; min-width: 92px; text-align: center; white-space: nowrap; }

/* zebra by row rather than lines — quieter, and it survives the group bands */
.pp-table tbody tr:not(.pp-grp):nth-child(odd) td:first-child,
.pp-table tbody tr:not(.pp-grp):nth-child(odd) td:nth-child(2) {
  background: rgba(255, 255, 255, .015); }

/* group band: full width, cut corner, reads as a section not a row */
.pp-table tr.pp-grp td { font-family: var(--mono); font-size: 9px; letter-spacing: .24em;
  color: var(--sig-yellow, #FFE500); background: transparent;
  padding: 22px 0 7px; }
.pp-table tr:first-child.pp-grp td { padding-top: 6px; }

/* the CHOOM+ column is one lit surface top to bottom */
.pp-table th.hi, .pp-table td.hi { background: rgba(255, 229, 0, .045); }
.pp-table thead th.hi { color: var(--sig-yellow, #FFE500);
  background: rgba(255, 229, 0, .085); }
.pp-table tr.pp-grp td.hi { background: rgba(255, 229, 0, .045); }

.pp-table td.y { color: var(--sig-yellow, #FFE500); font-family: var(--mono);
  font-size: 13px; letter-spacing: .06em; }
.pp-table td:nth-child(2).y { color: #6b7378; }     /* free column: present, not a selling point */
.pp-table td.n { color: #2f3538; }
.pp-table td.s { font-family: var(--mono); font-size: 9px; letter-spacing: .16em;
  color: #4a5155; }
@media (max-width: 620px) {
  .pp-table th, .pp-table td { padding: 9px 8px; font-size: 11.5px; }
  .pp-table th:not(:first-child), .pp-table td:not(:first-child) { min-width: 74px; }
}

.an-worth-nomarket b { display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: .18em; color: var(--cyan, #22d3ee); margin-bottom: 9px; }
.an-worth-nomarket p { margin: 0 0 9px; font-size: var(--ui-xs, 12px);
  line-height: 1.65; color: var(--muted, #747B80); }
.an-worth-nomarket p b { display: inline; font-size: inherit; letter-spacing: 0;
  color: var(--txt, #E8EAEB); margin: 0; }

/* ---------- deck viewer (modal) ----------
   VIEW opens the deck as cards, because that is how you recognise a build.
   Grid is the default; list is there for reading costs and counts down a
   column. Choice is remembered — a preference you re-set every time isn't
   a preference. */
body.modal-open { overflow: hidden; }
.dv { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 3vh 2vw; }
.dv-back { position: absolute; inset: 0; background: rgba(3, 4, 5, .82); backdrop-filter: blur(3px); }
.dv-panel { position: relative; display: flex; flex-direction: column;
  width: min(1180px, 96vw); max-height: 94vh; min-width: 0;
  background: #080A0B; border: 1px solid var(--line, #1c2225);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
.dv-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 15px 20px; border-bottom: 1px solid var(--line, #1c2225); }
.dv-title { font-family: var(--display, var(--mono)); font-size: clamp(18px, 2.6vw, 26px);
  color: var(--txt, #E8EAEB); letter-spacing: .02em; }
.dv-meta { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: #4a5155; }
.dv-sp { flex: 1; }
.dv-toggle { display: flex; border: 1px solid var(--line, #1c2225); }
.dv-toggle button { font-family: var(--mono); font-size: 9px; letter-spacing: .18em;
  background: transparent; color: #4a5155; border: 0; padding: 7px 13px; cursor: pointer; }
.dv-toggle button.on { background: var(--sig-yellow, #FFE500); color: #05070b; }
.dv-toggle button:not(.on):hover { color: var(--txt, #E8EAEB); }
.dv-x { background: transparent; border: 1px solid var(--line, #1c2225); color: var(--muted, #747B80);
  width: 30px; height: 30px; cursor: pointer; font-size: 13px; padding: 0; }
.dv-x:hover { color: var(--sig-magenta, #FF0878); border-color: var(--sig-magenta, #FF0878); }
.dv-blurb { padding: 11px 20px 0; font-family: var(--mono); font-size: 11px;
  line-height: 1.6; color: var(--muted, #747B80); }
.dv-warn { margin: 11px 20px 0; padding: 8px 12px; border: 1px solid #5a1030;
  background: rgba(255, 22, 133, .07); font-size: 11px; color: var(--hot-pink, #FF1685); }
.dv-body { overflow-y: auto; padding: 16px 20px 20px; min-height: 0; }
.dv-sec + .dv-sec { margin-top: 20px; }
.dv-sechead { font-family: var(--mono); font-size: 9px; letter-spacing: .24em;
  color: var(--sig-yellow, #FFE500); border-bottom: 1px solid var(--line, #1c2225);
  padding-bottom: 7px; margin-bottom: 12px; }
.dv-sechead i { font-style: normal; color: #4a5155; margin-left: 6px; }

.dv-grid { display: grid; gap: 9px;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.dv-card { position: relative; margin: 0; cursor: zoom-in; aspect-ratio: 5/7; min-width: 0; }
.dv-card img { width: 100%; height: 100%; object-fit: cover; display: block;
  border: 1px solid #1a2026; }
.dv-card:hover img { border-color: var(--sig-yellow, #FFE500); }
.dv-card b { position: absolute; right: 3px; bottom: 3px; font-family: var(--mono);
  font-size: 10px; line-height: 1; padding: 2px 4px;
  background: var(--sig-yellow, #FFE500); color: #05070b; }
@media (max-width: 560px) { .dv-grid { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); } }

.dv-list { display: flex; flex-direction: column; }
.dv-row { display: grid; align-items: center; gap: 10px; cursor: zoom-in;
  grid-template-columns: 34px 26px minmax(0, 1fr) 76px 60px;
  padding: 7px 6px; border-bottom: 1px solid #12171a; min-width: 0; }
.dv-row:hover { background: #0d1113; }
.dv-q { font-family: var(--mono); font-size: 11px; color: var(--sig-yellow, #FFE500); }
.dv-cost { font-family: var(--mono); font-size: 11px; color: var(--muted, #747B80); text-align: center; }
.dv-nm { font-size: var(--ui-xs, 12.5px); color: var(--txt, #E8EAEB);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-tp, .dv-cl { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; color: #4a5155; }
@media (max-width: 560px) {
  .dv-row { grid-template-columns: 30px 22px minmax(0, 1fr); }
  .dv-tp, .dv-cl { display: none; }
}

.dv-foot { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 13px 20px; border-top: 1px solid var(--line, #1c2225); }

/* GOLDFISH is the CHOOM+ half of the play pair — marked, not hidden, so a
   free player can see what the membership is for rather than discovering it
   only at a paywall. */
.cd-act.is-plus { position: relative; }
.cd-act.is-plus::before { content: "CHOOM+"; position: absolute; top: 8px; right: 8px;
  font-family: var(--mono); font-size: 7px; letter-spacing: .16em;
  color: #05070b; background: var(--sig-magenta, #FF0878); padding: 2px 5px; }
.cd-act.is-plus .cd-en { color: var(--sig-magenta, #FF0878); }
.cd-act.is-plus:hover { border-color: var(--sig-magenta, #FF0878); }

/* ---------- AI coach panel ---------- */
.an-coach-intro { margin: 0 0 12px; font-size: var(--ui-xs, 12px);
  line-height: 1.65; color: var(--muted, #747B80); }
.an-coach-load { font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  color: var(--sig-magenta, #FF0878); padding: 18px 0; }
.an-coach-err { font-size: var(--ui-xs, 12px); color: var(--hot-pink, #FF1685);
  margin-bottom: 11px; line-height: 1.6; }
.an-coach-lens { font-family: var(--mono); font-size: 9px; letter-spacing: .2em;
  color: var(--sig-magenta, #FF0878); margin-bottom: 11px; }
.an-coach-lens i { font-style: normal; color: #3a4145; }
.an-coach-list { margin: 0; padding-left: 18px; }
.an-coach-list li { font-size: var(--ui-sm, 13px); line-height: 1.8;
  color: var(--txt, #E8EAEB); margin-bottom: 4px; }
.an-coach-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid #14191c; }
.an-coach-foot .an-fine { margin: 0; }

/* ---------- sign in (CHOOMDECK-skinned) ----------
   The account lives on CHOOMDEX, but a player signing in to CHOOMDECK
   should be looking at CHOOMDECK while they do it. */
.lg-wrap { display: grid; place-items: start center; padding-top: clamp(8px, 3vh, 40px); }
.lg-card { width: min(440px, 94vw); background: #0a0d0f;
  border: 1px solid var(--line, #1c2225); padding: clamp(20px, 4vw, 34px);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); }
.lg-mark { font-family: var(--display, var(--mono)); font-size: clamp(26px, 5vw, 38px);
  line-height: 1; color: var(--txt, #E8EAEB); letter-spacing: .02em; }
.lg-mark em { font-style: normal; color: var(--sig-magenta, #FF0878); }
.lg-sub { margin: 10px 0 20px; font-size: var(--ui-xs, 12px); line-height: 1.65;
  color: var(--muted, #747B80); }
.lg-err { margin-bottom: 16px; padding: 9px 12px; border: 1px solid #5a1030;
  background: rgba(255, 22, 133, .08); color: var(--hot-pink, #FF1685);
  font-size: var(--ui-xs, 12px); }
.lg-f { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .2em;
  color: #4a5155; margin-bottom: 14px; }
.lg-f input { display: block; width: 100%; margin-top: 6px; box-sizing: border-box;
  background: #0d1113; border: 1px solid var(--line, #1c2225); color: var(--txt, #E8EAEB);
  font-family: var(--mono); font-size: 14px; letter-spacing: .04em; padding: 11px 12px; }
.lg-f input:focus { outline: none; border-color: var(--sig-yellow, #FFE500); }
.lg-go { width: 100%; margin-top: 4px; color: var(--sig-yellow, #FFE500);
  border-color: #5a5210; letter-spacing: .2em; }
.lg-go:hover { background: var(--sig-yellow, #FFE500); color: #05070b; }
.lg-go:disabled { opacity: .6; cursor: default; }
.lg-alt { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 14px;
  font-size: var(--ui-xs, 12px); color: #4a5155; }
.lg-alt .lnk, .lg-alt a { background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--cyan, #22d3ee); text-decoration: none; }
.lg-alt .lnk:hover, .lg-alt a:hover { text-decoration: underline; }
.lg-fine { margin: 20px 0 0; padding-top: 14px; border-top: 1px solid #14191c;
  font-size: 11px; line-height: 1.6; color: #3a4145; }

/* ---------- play hub ----------
   Human-vs-human is the hero and the only full-width option: it is the point
   of a multiplayer simulator, and everything below it is practice for it.
   The CHOOM+ flag lives here, next to the one mode it gates, rather than on
   the front page where it decorated the door. */
.pl-wrap { display: flex; flex-direction: column; gap: 18px; }
.pl-card { position: relative; border: 1px solid var(--line, #1c2225); background: #0a0d0f;
  padding: clamp(16px, 2.6vw, 26px); min-width: 0;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.pl-card.is-hero {
  border-color: #3a1226;
  background:
    radial-gradient(120% 180% at 8% 0%, rgba(255, 8, 120, .13), transparent 62%),
    #0a0d0f; }
.pl-name { font-family: var(--display, var(--mono)); font-size: clamp(20px, 3.4vw, 34px);
  color: var(--txt, #E8EAEB); letter-spacing: .02em; line-height: 1.05; }
.pl-card.is-hero .pl-name { color: var(--sig-magenta, #FF0878); }
.pl-name em { font-style: normal; font-size: 11px; letter-spacing: .18em;
  color: #4a5155; margin-left: 10px; vertical-align: middle; }
.pl-card p { margin: 8px 0 14px; max-width: 60ch; font-size: var(--ui-xs, 12.5px);
  line-height: 1.65; color: var(--muted, #747B80); }
.pl-card .cd-btn.primary { color: var(--sig-magenta, #FF0878); border-color: #5a1030; }
.pl-card .cd-btn.primary:hover { background: var(--sig-magenta, #FF0878); color: #05070b; }
.pl-live { display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: #4a5155; }
.pl-live b { color: var(--sig-yellow, #FFE500); font-weight: 400; }
.pl-plus { position: absolute; top: 12px; right: 12px; font-family: var(--mono);
  font-size: 8px; letter-spacing: .16em; color: #05070b;
  background: var(--sig-yellow, #FFE500); padding: 3px 6px; }
.pl-card.is-plus .pl-name { color: var(--sig-yellow, #FFE500); }

.pl-or { display: flex; align-items: center; gap: 14px; }
.pl-or::before, .pl-or::after { content: ""; flex: 1; height: 1px; background: var(--line, #1c2225); }
.pl-or span { font-family: var(--mono); font-size: 9px; letter-spacing: .28em; color: #3a4145; }

.pl-grid { display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.pl-grid .pl-name { font-size: clamp(16px, 2.2vw, 21px); }
.pl-grid .pl-card p { margin-bottom: 12px; }

.pl-foot { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: var(--ui-xs, 12px); color: #4a5155; }
.pl-foot .lnk { background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--cyan, #22d3ee); }
.pl-foot .lnk:hover { text-decoration: underline; }

/* ---------- BETA badge ----------
   Beside the mark, not on it. Vertical on desktop so it reads as a spine
   label against the logo's left edge; on a phone it drops above, because a
   rotated word next to a shrunken logo just makes both harder to read. */
/* The badge FLOATS beside the mark rather than sitting in the flow. As a
   flex sibling it reserved width and shunted the logo off the page's centre
   — which is what knocked the tagline out of alignment in the first place.
   Taken out of the flow, the logo stays centred and BETA tucks in just left
   of the skull. */
.cd-lockup { position: relative; display: flex; align-items: center;
  justify-content: center; }
.cd-beta { font-family: var(--mono); font-size: clamp(9px, 1.1vw, 12px);
  letter-spacing: .42em; color: var(--sig-magenta, #FF0878);
  border: 1px solid currentColor; padding: 8px 5px; flex: none;
  writing-mode: vertical-rl; text-orientation: mixed;
  /* pinned just outside the artwork's left edge: the logo is
     min(880px, 88vw) wide and centred, so its edge is half that from
     centre — sit a hair further out again. */
  position: absolute; top: 50%;
  right: calc(50% + (min(880px, 88vw) / 2) + 10px);
  transform: translateY(-50%); }

/* Below ~760px the margin beside an 88vw logo is too thin to hold the badge
   without crowding the skull, so it goes back into the flow above the mark. */
@media (max-width: 760px) {
  .cd-lockup { flex-direction: column; gap: 10px; }
  .cd-beta { position: static; transform: none;
    writing-mode: horizontal-tb; padding: 3px 9px; letter-spacing: .3em; }
}

/* live player count — lights up only when someone is actually there */
.cd-stat.live b { color: var(--muted, #747B80); }
.cd-stat.live.hot b { color: #6ee7a8; }
.cd-stat.live.hot span { color: #6ee7a8; }

/* ---------- tagline tracks the LOGO, not the page ----------
   The BETA badge sits to the left of the mark, so the lockup's centre is no
   longer the page's centre — and a tagline centred on the page drifted right
   of the wordmark it is supposed to sit under.

   Stacking the tagline with the image fixes it at the source: it now centres
   on the logo whatever else shares the row, so adding or removing the badge
   cannot knock it out of alignment again. The old page-level nudge is
   cancelled here; the remaining shift is only the optical one for the skull,
   which eats the left ~26% of the artwork. */
.cd-mark-stack { display: flex; flex-direction: column; align-items: center; min-width: 0; }
/* MEASURED, not guessed. Scanning the artwork's alpha channel: the skull
   occupies x0-314 of 1382 and the wordmark runs x349-1368, putting its
   centre at 61.6% of the image against the image's own 50%. So the tagline
   needs +11.6% of the logo width to sit under the type — which is what the
   long-standing 11.5% already was. The value was never the problem.
   Applied at EVERY width now: the old desktop-only rule existed because a
   page-wide block translated sideways bled off-screen, and inside this
   logo-width stack it cannot. */
.cd-mark-stack .cd-tagline {
  display: inline-block;
  padding-left: 0;
  transform: translateX(calc(min(880px, 88vw) * 0.116));
}

/* BETA in place of a version number. It is not 1.0 until people have played
   it, and a version string implies a stability nobody has tested yet. */
.ver-beta { color: var(--sig-magenta, #FF0878); font-weight: 400; letter-spacing: .16em; }

/* live player count, promoted to the top bar */
.sysbar-live { color: var(--muted); }
.sysbar-live b { color: var(--muted); font-weight: 400; }
.sysbar-live.hot { color: #6ee7a8; }
.sysbar-live.hot b { color: #6ee7a8; }
/* the decorative readouts yield first when the bar runs out of room */
@media (max-width: 820px) { .cd-sysbar .sys-dim { display: none; } }