/* The creator-facing theme: Creator Pass (docs/mockups, 6 Oct 2026). Loads after style.css and overrides it under
   body.portal, so the shared script, toasts and form behaviour stay the same while the look is the campaign's.
   Gold is #FFD000 (the game's style guide). Every animation is off under prefers-reduced-motion and every page is
   complete at rest without it. */
@font-face { font-family: "Oswald"; src: url("/static/fonts/Oswald-Variable.woff2") format("woff2"); font-weight: 200 700; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url("/static/fonts/Rajdhani-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url("/static/fonts/Rajdhani-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Share Tech Mono"; src: url("/static/fonts/ShareTechMono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
/* the handoff's type (docs/design_handoff_creator_hub, 15 Oct 2026), self-hosted like the rest: titles and figures in
   Barlow Condensed, body in Barlow, labels and data in JetBrains Mono */
@font-face { font-family: "Barlow Condensed"; src: url("/static/fonts/BarlowCondensed-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/static/fonts/BarlowCondensed-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/static/fonts/BarlowCondensed-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/static/fonts/Barlow-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/static/fonts/Barlow-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/static/fonts/Barlow-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/static/fonts/JetBrainsMono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/static/fonts/JetBrainsMono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/static/fonts/JetBrainsMono-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

body.portal { --bg: #060708; --panel: rgba(14,16,18,.92); --panel-2: #101315; --panel-3: #181b1e; --card: #0e1113; --card-2: #121517;
  --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.16); --line-strong: rgba(255,255,255,.14);
  --yel: #ffd000; --yel-line: rgba(255,208,0,.4); --yel-dim: rgba(255,208,0,.12); --gold: #e6a838;
  --txt: #eceee8; --dim: #9aa09a; --mute: #565c58; --txt-dim: var(--dim); --txt-mute: var(--mute);
  --grn: #6ec9a8; --red: #e0503a; --hazard: repeating-linear-gradient(-55deg, var(--yel) 0 5px, #0a0a08 5px 11px);
  --disp: "Barlow Condensed", "Oswald", "Arial Narrow", Impact, sans-serif; --body: "Barlow", "Rajdhani", system-ui, sans-serif; --mono: "JetBrains Mono", "Share Tech Mono", ui-monospace, Menlo, monospace;
  --text: var(--txt); --muted: var(--dim); --faint: var(--mute); --accent: var(--yel); --accent-2: var(--yel); --ok: var(--grn); --bad: var(--red); --warn: var(--yel);
  --live: var(--grn); --ease: cubic-bezier(.2,.9,.3,1); --head: 60px; --bar: 60px; --tabs: 44px; --measure: 560px;   /* the bar (the hazard strip is gone since 15 Oct 2026, so --head is the bar); its tab row when it is on two; the width of a form's blocks */
  background: var(--bg); color: var(--txt); font-family: var(--body); font-size: 15px; font-weight: 500; letter-spacing: 0; color-scheme: dark; overflow-x: hidden; }
body.portal main { max-width: none; padding: 0; position: relative; z-index: 2; }
body.portal main > * { animation: none; }
body.portal ::selection { background: var(--yel); color: #0c0d08; }
body.portal a { color: var(--yel); text-decoration-color: var(--yel-line); }
body.portal :focus-visible { outline: 1px solid var(--yel); outline-offset: 3px; border-radius: 0; }
body.portal .gold { color: var(--yel); }

/* ---------- atmosphere: fixed overlays, pointer-events none ---------- */
.cp-scanlines { position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .05; background: repeating-linear-gradient(0deg, rgba(255,255,255,.35) 0 1px, transparent 1px 3px); }
.cp-vignette { position: fixed; inset: 0; z-index: 49; pointer-events: none; box-shadow: inset 0 0 220px rgba(0,0,0,.8); }
.cp-noise { position: fixed; inset: 0; z-index: 48; pointer-events: none; opacity: .045;
  background-image: 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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"); }

/* ---------- the one navbar ---------- */
/* The bar as the handoff of 15 Oct 2026 draws it (docs/design_handoff_creator_hub): 60px, a hairline under it, "MW4" and
   "CREATOR PASS" on the left, the tabs centred, the name and a square avatar on the right; the hazard tape at the top is
   gone and the game's mark waits in the markup for the cleared logo. `.cpn-wrap` is the full-width bar and `.cpn` the
   page column in it, a grid of named areas: `.cpn-left` holds the brand and the clock, `.cpn-right` stays `display:
   contents` so the tabs and the chip take their own areas. `has-tabs` (an active creator) is what sticks: one row
   whole, and under 1280px two rows (brand and chip, then tabs) with the first scrolled away, so the tab row alone stays.
   Without tabs the bar is one row that scrolls off, which the onboarding block that sticks "once the bar has gone"
   counts on. The bottom line is an inset shadow so the bar is exactly --bar tall. */
.hazard-top { display: none; }
.cpn-wrap { position: relative; z-index: 3; background: var(--bg); box-shadow: inset 0 -1px 0 var(--line); }
.cpn-wrap.has-tabs { position: sticky; top: 0; }
.cpn { max-width: 1440px; margin: 0 auto; padding: 0 48px; height: var(--bar); display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "brand tabs chip"; align-items: center; line-height: 1.2; }
.cpn-left { grid-area: brand; display: flex; align-items: center; gap: 22px; min-width: 0; }
.cpn-right { display: contents; }
/* `body.portal a` is yellow and outranks a rule of one class: the brand's words and every idle tab were yellow until
   these rules carried `body.portal` too (7 Oct 2026), as the chip's rule below already did for `body.portal button` */
body.portal .cpn-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--txt); }
.cpn-mark, .cpn-sep, .cpn-txt i { display: none; }
.cpn-txt { display: flex; align-items: center; gap: 14px; }
.cpn-txt .mw { font-family: var(--disp); font-weight: 700; font-size: 22px; letter-spacing: .04em; line-height: 1; }
.cpn-txt b { font-family: var(--disp); font-weight: 600; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; line-height: 1; white-space: nowrap; color: var(--yel); }
.cpn-txt b em { font-style: normal; }
/* the campaign clock beside the brand (Aaron, 7 Oct 2026) */
.cpn-clock { padding-left: 22px; border-left: 1px solid var(--line-strong); white-space: nowrap; }
.cpn-clock span { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: #77756e; }
.cpn-clock b { font-family: var(--disp); font-weight: 600; font-size: 14px; letter-spacing: .08em; color: var(--yel); font-variant-numeric: tabular-nums; }
/* tabs are words, centred; the page you are on is white, the others dim */
.cpn-nav { grid-area: tabs; display: flex; align-items: center; gap: 32px; justify-self: center; }
body.portal .cpn-nav a { display: flex; align-items: center; gap: 8px; font-family: var(--disp); font-weight: 600; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: #77756e; white-space: nowrap; transition: color .2s; }
body.portal .cpn-nav a:hover { color: var(--txt); }
body.portal .cpn-nav a.on { color: #fff; }
/* how many of the creator's challenges are waiting for the team, on the Challenges tab of every page */
.cpn-n { font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; color: var(--grn); border: 1px solid rgba(110,201,168,.4); background: rgba(110,201,168,.07); padding: 1px 5px; line-height: 1.3; }
/* signed out: the way between applying and signing in (7 Oct 2026), where the chip would be */
.cpn-switch { grid-area: chip; justify-self: end; display: flex; align-items: center; gap: 14px; }
.cpn-switch span { font-size: 14px; color: var(--dim); }
body.portal .cpn-switch a { font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: #111; background: var(--yel); padding: 10px 18px; white-space: nowrap; }
body.portal .cpn-switch a:hover { background: #fff; }
.cpn-op { grid-area: chip; justify-self: end; position: relative; }
/* `body.portal button` below makes every button the gold primary one, and it outranks a rule of one class: the chip is
   the name in mono and a 28px square avatar with a gold edge (the handoff), nothing else */
body.portal .cpn-op-btn { position: relative; display: flex; align-items: center; gap: 10px; padding: 0; background: transparent; border: 0; color: var(--txt); cursor: pointer; clip-path: none; overflow: visible; font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0; text-transform: none; box-shadow: none; transform: none; }
body.portal .cpn-op-btn:hover, body.portal .cpn-op.open .cpn-op-btn { background: transparent; box-shadow: none; transform: none; color: #fff; }
.cpn-op .av { order: 2; width: 28px; height: 28px; overflow: hidden; display: grid; place-items: center; background: transparent; border: 1px solid var(--yel); font-family: var(--mono); font-weight: 600; color: var(--yel); font-size: 10px; flex: none; }
.cpn-op .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cpn-op .who { order: 1; text-align: right; }
.cpn-op .who b { display: block; font-weight: 500; font-size: 12px; letter-spacing: 0; line-height: 1.1; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpn-op .who i { display: none; }
.cpn-op .caret { order: 3; color: var(--mute); font-size: 10px; }
.cpn-op .menu { display: none; position: absolute; right: 0; top: calc(100% + 10px); min-width: 200px; background: #0d0f11; border: 1px solid var(--line-2); border-radius: 0; padding: 0; z-index: 60; box-shadow: 0 18px 50px rgba(0,0,0,.7); }
.cpn-op.open .menu { display: block; }
.cpn-op .m-xp { width: 262px; padding: 14px 16px 15px; border-bottom: 1px solid var(--line); }
.cpn-op .m-k { font-family: var(--mono); font-size: 9px; letter-spacing: .28em; text-transform: uppercase; color: var(--mute); }
.cpn-op .m-v { font-family: var(--disp); font-weight: 600; font-size: 17px; letter-spacing: .08em; margin-top: 3px; }
.cpn-op .m-v small { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--dim); letter-spacing: .06em; }
.cpn-op .m-bar { height: 4px; background: #17191c; margin: 10px 0 8px; }
.cpn-op .m-bar span { display: block; height: 100%; background: linear-gradient(90deg, #a28400, var(--yel)); }
.cpn-op .m-s { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.cpn-op .m-s b { color: var(--txt); font-weight: 400; }
.cpn-op .m-clock { display: none; padding: 11px 16px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.cpn-op .m-clock b { color: var(--yel); font-weight: 400; }
.cpn-op .menu a, .cpn-op .menu button { display: block; width: 100%; text-align: left; font-family: var(--disp); font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); text-decoration: none; padding: 13px 16px; background: none; border: 0; clip-path: none; box-shadow: none; transform: none; cursor: pointer; }
.cpn-op .menu a:hover, .cpn-op .menu button:hover { color: var(--yel); background: rgba(255,208,0,.06); box-shadow: none; transform: none; }
/* a link to a card, an item or a read lands clear of the bar that now stays (the tab row alone under 1280px) */
html:has(.cpn-wrap.has-tabs) { scroll-padding-top: 84px; }

/* ---------- buttons and fields ---------- */
body.portal .btn, body.portal button, .btn-primary { font-family: var(--disp); font-weight: 700; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: #0c0d08; background: var(--yel); border: 0; border-radius: 0;
  padding: 13px 30px; clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); box-shadow: none; transform: none; position: relative; overflow: hidden; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .2s, box-shadow .25s, background .25s, color .25s; }
.btn-primary::after { content: ""; position: absolute; top: 0; bottom: 0; width: 44px; left: -60px; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transition: left .5s; }
.btn-primary:hover::after { left: 110%; }
body.portal .btn:hover, body.portal button:hover, .btn-primary:hover { background: var(--yel); box-shadow: 0 8px 30px rgba(255,208,0,.35); transform: translateY(-2px); filter: none; }
body.portal .btn:active, body.portal button:active { transform: none; }
body.portal button:disabled { background: #3a3c30; color: #787a6c; box-shadow: none; transform: none; cursor: not-allowed; }
/* .btn-ghost carries `body.portal` for the same reason as the chip: on a <button> (Back) it was the gold primary button */
body.portal .btn.secondary, body.portal button.secondary, body.portal .btn-ghost, body.portal button.ghost { background: none; color: var(--dim); border: 1px solid var(--line-2); clip-path: none; font-weight: 600; padding: 12px 24px; text-decoration: none; }
body.portal .btn.secondary:hover, body.portal button.secondary:hover, body.portal .btn-ghost:hover, body.portal button.ghost:hover { color: var(--txt); border-color: var(--dim); background: none; box-shadow: none; transform: none; }
body.portal .btn-ghost:disabled { background: none; color: #7b817c; border-color: var(--line); }
body.portal button.danger { background: rgba(224,80,58,.12); color: var(--red); border: 1px solid rgba(224,80,58,.4); clip-path: none; }
body.portal button.danger:hover { background: rgba(224,80,58,.2); box-shadow: none; transform: none; }
body.portal button.confirming { background: var(--red); color: #fff; }
body.portal .btn.sm, body.portal button.sm { padding: 8px 16px; font-size: 10.5px; }
body.portal input, body.portal select, body.portal textarea, .f-in { background: #0d0f11; border: 1px solid var(--line-2); border-radius: 0; color: var(--txt); font-family: var(--body); font-weight: 600; font-size: 15px; letter-spacing: .04em; padding: 12px 14px; transition: border-color .25s, box-shadow .25s; }
body.portal input:hover, body.portal select:hover { background: #0d0f11; }
body.portal input:focus, body.portal select:focus, body.portal textarea:focus { border-color: var(--yel); box-shadow: 0 0 0 1px var(--yel), 0 0 18px rgba(255,208,0,.15); background: #0d0f11; }
body.portal input::placeholder { color: var(--mute); font-weight: 500; }
body.portal select { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ffd000'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
body.portal label, .f-lbl { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .3em; color: var(--dim); text-transform: uppercase; margin-bottom: 7px; font-weight: 400; }
.f-grid { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: var(--measure); }
.f-field { display: flex; flex-direction: column; } .f-field.full { grid-column: 1 / -1; } .f-field .f-in { width: 100%; }
/* the email and its button on one line (_email_form.html) */
.f-row { margin-top: 26px; display: flex; align-items: flex-end; gap: 14px; max-width: var(--measure); }
.f-row .f-field { flex: 1; min-width: 0; } .f-row .f-in, .f-row .btn-primary { height: 48px; } .f-row .btn-primary { white-space: nowrap; }
.f-help { margin-top: 14px; font-size: 13.5px; color: var(--dim); max-width: 520px; line-height: 1.5; }
.ob-err { margin-top: 18px; padding: 12px 16px; border: 1px solid rgba(224,80,58,.5); border-left-width: 3px; background: rgba(224,80,58,.08); color: #ffb3a7; font-weight: 600; max-width: var(--measure); }
.ob-err[hidden] { display: none; }
/* a notice that is not an error: a link already sent, a session that ended */
.ob-note { margin-top: 18px; padding: 12px 16px; border: 1px solid var(--yel-line); border-left-width: 3px; background: rgba(255,208,0,.06); color: var(--txt); max-width: var(--measure); }
.ob-note[hidden] { display: none; } .ob-note b { font-family: var(--mono); font-weight: 400; color: var(--yel); letter-spacing: .06em; }

/* ---------- the onboarding layout: key art left, panels right ---------- */
.ob { display: flex; min-height: calc(100vh - var(--head)); }
.ob-left { flex: 0 0 42%; position: relative; background: var(--bg); }
/* The art, the lockup and the rail sit in a block the window's height that sticks once the bar has scrolled away (7 Oct
   2026). They were laid over a column as tall as the form, pinned to its foot, so the lockup stood at a different height
   on every step and the art was cropped to each step's length. They are mirrored onto the column's right edge, beside
   the form, each diamond after its label; the negative margins take back the letter-spacing after a line's last letter. */
.ob-left-inner { position: sticky; top: 0; z-index: 2; height: calc(100vh - var(--head)); min-height: 560px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; text-align: right; padding: 48px 44px;
  background: url("/static/img/creator-pass.jpg") 32% center / cover no-repeat; }
.ob-left-inner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(6,7,8,.3) 0%, rgba(6,7,8,.55) 60%, var(--bg) 100%), linear-gradient(0deg, var(--bg) 0%, rgba(6,7,8,.85) 14%, transparent 46%); }
.ob-left-inner > * { position: relative; }
.ob-lockup .l1 { margin-right: -.4em; } .ob-lockup .l3 { margin-left: auto; }
.ob-lockup .l1, .ob-band .l1 { font-family: var(--mono); font-size: 10px; letter-spacing: .4em; color: var(--yel); margin-bottom: 14px; text-transform: uppercase; }
.ob-lockup .l2, .ob-band .l2 { font-family: var(--disp); font-weight: 700; font-size: clamp(34px, 3.4vw, 52px); line-height: 1; text-transform: uppercase; letter-spacing: .02em; text-shadow: 0 4px 30px rgba(0,0,0,.9); }
.ob-lockup .l2 span, .ob-band .l2 span { color: var(--yel); }
.ob-lockup .l3 { margin-top: 14px; font-size: 15px; color: #c4c9c2; max-width: 380px; }
.ob-rail { margin-top: 30px; display: flex; flex-direction: column; align-items: flex-end; }
.obs { display: flex; flex-direction: row-reverse; align-items: center; gap: 14px; padding: 9px 0; opacity: .4; transition: opacity .3s; }
.obs.active { opacity: 1; } .obs.done { opacity: .75; }
.obs-n { width: 26px; height: 26px; flex: none; transform: rotate(45deg); border: 1.5px solid var(--mute); display: grid; place-items: center; transition: all .3s; }
.obs-n span { transform: rotate(-45deg); font-family: var(--mono); font-size: 10px; color: var(--dim); }
.obs.active .obs-n { border-color: var(--yel); background: var(--yel-dim); box-shadow: 0 0 12px rgba(255,208,0,.3); } .obs.active .obs-n span { color: var(--yel); }
.obs.done .obs-n { border-color: var(--yel); background: var(--yel); } .obs.done .obs-n span { color: #0c0d08; }
.obs-t { font-family: var(--disp); font-weight: 600; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; margin-right: -.24em; }
/* overflow-x: clip, with the panel sliding in from 16px and not 30: at phone width the 30px ran past the screen's edge, and
   a phone widens its layout to fit what overflows, so the page opened at 402px on a 390px screen */
.ob-right { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow-x: clip; }
.ob-hazard { height: 8px; background: var(--hazard); flex: none; }
.ob-panels { flex: 1; padding: 56px 68px; max-width: 800px; margin: 0; }
.ob-panel { animation: obIn .5s var(--ease) both; }
.js .ob-panels:not(.all) .ob-panel:not(.on) { display: none; }
.ob-panels.all .ob-panel + .ob-panel, .no-js .ob-panel + .ob-panel { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--line); }
.ob-panels.all [data-next], .ob-panels.all [data-back], .no-js [data-next], .no-js [data-back] { display: none; }
@keyframes obIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.ob-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .36em; color: var(--yel); margin-bottom: 12px; text-transform: uppercase; }
body.portal .ob-h { font-family: var(--disp); font-weight: 700; font-size: 34px; text-transform: uppercase; letter-spacing: .03em; line-height: 1.05; margin: 0; }
.ob-p { margin-top: 14px; font-size: 15.5px; color: var(--dim); max-width: 520px; line-height: 1.55; }
.ob-p b { color: var(--txt); font-weight: 600; }
.ob-list { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; max-width: var(--measure); }   /* was 520px beside 560px fields */
.ob-list.after-form { margin-top: 36px; padding-top: 30px; border-top: 1px solid var(--line); }
.ob-li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--yel); }
.ob-li svg { width: 20px; height: 20px; flex: none; stroke: var(--yel); margin-top: 1px; }
.ob-li .t { font-family: var(--disp); font-weight: 600; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.ob-li .d { font-size: 13.5px; color: var(--dim); margin-top: 3px; }
.ob-nav { margin-top: 38px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
/* under 1080px, in place of the left column (_ob_narrow.html): a band of the art on the front pages, one line for the step */
.ob-band, .ob-steps { display: none; }
.ob-band { position: relative; flex-direction: column; justify-content: flex-end; height: 190px; padding: 0 34px 22px; background: url("/static/img/creator-pass.jpg") center 24% / cover no-repeat; }
.ob-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,7,8,.72) 0%, rgba(6,7,8,.25) 70%), linear-gradient(0deg, var(--bg) 0%, rgba(6,7,8,.6) 34%, transparent 80%); }
.ob-band > * { position: relative; } .ob-band .l1 { margin-bottom: 8px; } .ob-band .l2 { font-size: 32px; }
.ob-steps { padding: 16px 34px 0; }
.ob-steps .row { display: flex; align-items: baseline; gap: 12px; }
.ob-steps .n { font-family: var(--mono); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--yel); }
.ob-steps .t { font-family: var(--disp); font-weight: 600; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; }
.ob-steps .bar { margin-top: 10px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.ob-steps .bar i { height: 3px; background: var(--line-2); }
.ob-steps .bar i.done { background: rgba(255,208,0,.55); } .ob-steps .bar i.on { background: var(--yel); box-shadow: 0 0 10px rgba(255,208,0,.4); }
.ob-form { margin-top: 8px; }

/* chips: a radio or checkbox inside each */
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
body.portal label.chip { position: relative; display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 11px 16px; border-radius: 0; clip-path: none; box-shadow: none;
  font-family: var(--disp); font-weight: 600; font-size: 13.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim);
  border: 1px solid var(--line-2); background: #0d0f11; cursor: pointer; transition: color .2s, border-color .2s, background .2s; user-select: none; }
body.portal label.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
body.portal label.chip svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
body.portal label.chip:hover { border-color: var(--yel-line); color: var(--txt); background: #0d0f11; }
body.portal label.chip:has(input:checked) { background: var(--yel-dim); border-color: var(--yel); color: var(--yel); box-shadow: inset 3px 0 0 var(--yel); }
body.portal label.chip:has(input:focus-visible) { outline: 1px solid var(--yel); outline-offset: 2px; }
body.portal .ob-h2 { font-family: var(--disp); color: var(--txt); font-weight: 700; font-size: 22px; text-transform: uppercase; letter-spacing: .04em; line-height: 1.1; margin: 40px 0 0; padding-top: 32px; border-top: 1px solid var(--line); max-width: var(--measure); }
.f-opt { font-family: var(--mono); font-size: 9px; letter-spacing: .2em; color: var(--mute); margin-left: 10px; text-transform: none; }

/* channel rows */
.ch-list { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; max-width: var(--measure); }
.ch-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 40px; gap: 10px; align-items: center; animation: obIn .3s var(--ease) both; }
.ch-row .f-in { width: 100%; }
body.portal .ch-x { background: none; color: var(--mute); border: 1px solid var(--line); clip-path: none; padding: 0; width: 40px; height: 44px; font-size: 18px; font-family: var(--body); letter-spacing: 0; }
body.portal .ch-x:hover { color: var(--red); border-color: rgba(224,80,58,.5); box-shadow: none; transform: none; }
body.portal .ch-add { margin-top: 12px; background: none; color: var(--yel); border: 1px dashed var(--yel-line); clip-path: none; padding: 10px 18px; font-size: 11px; }
body.portal .ch-add:hover { background: var(--yel-dim); box-shadow: none; transform: none; }
.ch-chip { display: inline-flex; gap: 6px; align-items: baseline; margin: 0 10px 6px 0; padding: 4px 10px; background: var(--panel-2); border: 1px solid var(--line); font-size: 14px; }
.ch-chip b { font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; color: var(--yel); text-transform: uppercase; }

/* rules */
/* `body.portal label` (the 9px capitals of a field label) outranked `label.rule-check`: the consent line was capitals with its box above it */
body.portal label.rule-check { margin-top: 26px; margin-bottom: 0; display: flex; gap: 14px; align-items: flex-start; max-width: var(--measure); cursor: pointer; user-select: none; text-transform: none; letter-spacing: 0; font-family: var(--body); font-size: 14.5px; font-weight: 500; position: relative; }
label.rule-check input { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; }
.rc-box { width: 24px; height: 24px; flex: none; border: 1.5px solid var(--line-2); background: #0d0f11; display: grid; place-items: center; transition: all .25s; margin-top: 1px; }
.rc-box svg { width: 14px; height: 14px; stroke: #0c0d08; opacity: 0; transition: opacity .2s; }
label.rule-check:has(input:checked) .rc-box { background: var(--yel); border-color: var(--yel); }
label.rule-check:has(input:checked) .rc-box svg { opacity: 1; }
label.rule-check:has(input:focus-visible) .rc-box { outline: 1px solid var(--yel); outline-offset: 2px; }
.rc-t { color: var(--dim); font-weight: 500; line-height: 1.5; } .rc-t b { color: var(--txt); font-weight: 600; }

/* status */
.status-card { margin-top: 28px; max-width: var(--measure); border: 1px solid var(--yel-line); background: var(--panel-2); padding: 26px; }
.status-card.off { border-color: var(--line-2); }
.status-card .s1 { display: flex; align-items: center; gap: 12px; font-family: var(--disp); font-weight: 700; font-size: 18px; letter-spacing: .14em; text-transform: uppercase; color: var(--yel); }
.status-card.off .s1 { color: var(--dim); }
.status-card .s1 .dot { width: 10px; height: 10px; border-radius: 0; margin: 0; background: var(--yel); transform: rotate(45deg); animation: nodePulse 1.8s ease-in-out infinite; }
.status-card.off .s1 .dot { background: var(--mute); animation: none; }
.status-card .s2 { margin-top: 12px; font-size: 14.5px; color: var(--dim); line-height: 1.6; }
.status-card .s3 { margin-top: 20px; display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; } .status-card .s3 a { font-size: 14.5px; }
.status-steps { margin-top: 18px; display: flex; flex-direction: column; }
.ss { display: flex; gap: 14px; align-items: center; padding: 8px 0; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.ss .m { width: 8px; height: 8px; transform: rotate(45deg); flex: none; }
.ss.done { color: var(--dim); } .ss.done .m { background: var(--grn); }
.ss.now { color: var(--yel); } .ss.now .m { background: var(--yel); animation: nodePulse 1.8s infinite; }
.ss.next { color: var(--mute); } .ss.next .m { border: 1px solid var(--mute); }
.ss.bad { color: var(--red); } .ss.bad .m { background: var(--red); }
@keyframes nodePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,208,0,.45); } 50% { box-shadow: 0 0 0 8px rgba(255,208,0,0); } }
.sub-kv { grid-template-columns: 150px 1fr; max-width: var(--measure); }
.sub-kv dt { font-family: var(--mono); font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--dim); padding-top: 3px; }
details.withdraw { margin-top: 30px; max-width: var(--measure); }
details.withdraw summary { font-family: var(--mono); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--mute); }
details.withdraw summary:hover { color: var(--red); }

/* ---------- the one page column: navbar, content and footer share it ---------- */
.cp-shell { position: relative; z-index: 2; max-width: 1440px; margin: 0 auto; padding: 44px 34px 0; }
.cp-shell.narrow { max-width: 708px; padding-top: 70px; padding-bottom: 60px; }
.cp-head { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; margin-bottom: 26px; }
.cp-t1 { font-family: var(--disp); font-weight: 700; font-size: 26px; letter-spacing: .14em; text-transform: uppercase; line-height: 1; }
.cp-t1 em { font-style: normal; color: var(--yel); }
.cp-t2 { font-family: var(--mono); font-size: 9.5px; letter-spacing: .28em; color: var(--mute); margin-top: 8px; text-transform: uppercase; max-width: 70ch; line-height: 1.6; }
.cp-sum { margin-left: auto; display: flex; flex-wrap: wrap; gap: 10px; }
.cp-sum .s { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--line); padding: 7px 12px; white-space: nowrap; }
.cp-sum .s b { font-family: var(--disp); font-weight: 700; font-size: 15px; letter-spacing: .04em; margin-right: 8px; color: var(--txt); }
.cp-sum .s.g b { color: var(--grn); } .cp-sum .s.y b { color: var(--yel); }
.cp-tabs { margin: 0 0 26px; display: flex; flex-wrap: wrap; gap: 8px; }
body.portal .cp-tabs button { font-family: var(--disp); font-weight: 600; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; padding: 10px 18px; background: #0d0f11; border: 1px solid var(--line-strong); color: var(--dim); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); box-shadow: none; transform: none; transition: color .25s, border-color .25s, background .25s; }
body.portal .cp-tabs button:hover { color: var(--txt); border-color: var(--yel-line); background: #0d0f11; }
body.portal .cp-tabs button[aria-pressed="true"] { background: var(--yel); border-color: var(--yel); color: #0c0d08; }
.cp-panel { background: var(--panel); border: 1px solid var(--line); padding: 24px 26px; clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); animation: panelUp .8s var(--ease) both; }
@keyframes panelUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.cp-campaign + .cp-campaign { margin-top: 40px; }
body.portal .cp-h2 { font-family: var(--disp); font-weight: 600; font-size: 14px; letter-spacing: .3em; text-transform: uppercase; color: var(--txt); margin: 0 0 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }
.cp-h2 .muted { color: var(--dim); letter-spacing: .2em; }
.cp-h2-window { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: var(--mute); border: 1px solid var(--line); padding: 5px 10px; margin-left: auto; }

/* ---------- challenge cards (docs/mockups/challenges.html) ---------- */
.cc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.cc { position: relative; background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--line); overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); animation: ccIn .6s var(--ease) both; }
.cc:nth-child(2) { animation-delay: .08s; } .cc:nth-child(3) { animation-delay: .16s; } .cc:nth-child(n+4) { animation-delay: .24s; }
@keyframes ccIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.cc[hidden] { display: none; }
.cc-strip { height: 4px; background: var(--yel); }
/* three tiers since 14 Oct 2026: daily and weekly in gold, the season's (once monthly, featured, evergreen) in amber on the hazard strip */
.cc-season .cc-strip { height: 6px; background: var(--hazard); }
.cc-verified .cc-strip { background: var(--grn); }
.cc-rejected .cc-strip { background: #3a3e42; }
.cc-in { padding: 22px 26px 24px; }
.cc-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.cc-type { display: flex; align-items: center; gap: 10px; }
.cc-type .diamond { width: 9px; height: 9px; transform: rotate(45deg); background: var(--yel); flex: none; }
.cc-season .cc-type .diamond { background: var(--gold); }
.cc-type .t { font-family: var(--disp); font-weight: 600; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--dim); }
.cc-season .cc-type .t { color: var(--gold); }
.cc-window { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--mute); border: 1px solid var(--line); padding: 5px 10px; white-space: nowrap; }
.cc-row { display: flex; gap: 18px; align-items: flex-start; }
.cc-ico { width: 52px; height: 52px; flex: none; display: grid; place-items: center; background: #0a0c0d; border: 1px solid var(--line-strong); transform: rotate(45deg); margin: 6px 8px 0 6px; }
.cc-ico svg { width: 26px; height: 26px; transform: rotate(-45deg); color: var(--yel); }
.cc-season .cc-ico { border-color: rgba(230,168,56,.45); } .cc-season .cc-ico svg { color: var(--gold); }
.cc-body { flex: 1; min-width: 0; }
body.portal .cc-title { font-family: var(--disp); font-weight: 700; font-size: 26px; letter-spacing: .05em; text-transform: uppercase; line-height: 1.05; margin: 0; }
.cc-meta { margin-top: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; padding: 5px 9px; border: 1px solid var(--line-strong); color: var(--dim); background: #0a0c0d; white-space: nowrap; }
.pill.live { color: var(--red); border-color: rgba(224,80,58,.45); background: rgba(224,80,58,.07); }
.pill.live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); animation: livePulse 1.5s ease-in-out infinite; }
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.pill.posts { color: var(--grn); border-color: rgba(110,201,168,.4); background: rgba(110,201,168,.06); }
.pill.mode { color: var(--yel); border-color: var(--yel-line); background: rgba(255,208,0,.06); }
.pill.mode.social { color: #b39bd6; border-color: rgba(179,155,214,.4); background: rgba(179,155,214,.07); }
.cc-desc { margin: 9px 0 0; font-size: 15.5px; font-weight: 500; color: var(--dim); line-height: 1.5; max-width: 480px; }
.cc-desc b { color: var(--txt); font-weight: 600; }
.cc-prog { margin-top: 18px; display: flex; align-items: center; gap: 14px; }
.cc-bar { flex: 1; height: 5px; background: #1a1d20; position: relative; overflow: hidden; }
.cc-bar i { position: absolute; inset: 0; width: 0; background: linear-gradient(90deg, #a28400, var(--yel)); animation: ccGrow 1.4s .3s var(--ease) both; transform-origin: left; }
@keyframes ccGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.cc-season .cc-bar i { background: linear-gradient(90deg, #9a6a1a, var(--gold)); }
.cc-pending .cc-bar i { background: repeating-linear-gradient(90deg, var(--yel) 0 4px, #1a1d20 4px 8px); }
.cc-verified .cc-bar i { background: var(--grn); }
.cc-rejected .cc-bar i { background: #3a3e42; }
.cc-frac { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--dim); white-space: nowrap; text-transform: uppercase; }
.cc-frac b { color: var(--txt); font-weight: 400; }
.cc-foot { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.vtag { font-family: var(--mono); font-size: 8.5px; letter-spacing: .22em; text-transform: uppercase; padding: 5px 10px; border: 1px solid; white-space: nowrap; }
.vtag.review { color: var(--yel); border-color: var(--yel-line); background: rgba(255,208,0,.06); }
.vtag.done { color: var(--grn); border-color: rgba(110,201,168,.4); background: rgba(110,201,168,.06); }
.vtag.bad { color: var(--red); border-color: rgba(224,80,58,.45); background: rgba(224,80,58,.07); }
.cc-xp { text-align: right; font-family: var(--disp); }
.cc-xp .v { font-weight: 700; font-size: 24px; color: var(--yel); letter-spacing: .04em; line-height: 1; }
.cc-verified .cc-xp .v { color: var(--grn); } .cc-season .cc-xp .v { color: var(--gold); } .cc-rejected .cc-xp .v { color: var(--mute); text-decoration: line-through; }
.cc-xp .u { font-family: var(--mono); font-size: 8px; letter-spacing: .3em; text-transform: uppercase; color: var(--mute); margin-top: 4px; }
.cc-evidence { margin-top: 14px; }
.cc-evidence summary { font-family: var(--mono); font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--mute); cursor: pointer; }
.cc-evidence summary:hover { color: var(--yel); }
.cc-evidence ul, .cc-evidence p { margin-top: 10px; }
.cc-evidence li { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 13.5px; }
.cc-evidence li:last-child { border-bottom: 0; }

/* ---------- the account page and shared bits ---------- */
body.portal .page-head { margin-bottom: 30px; }
body.portal .page-head h1, body.portal h1 { font-family: var(--disp); font-weight: 700; font-size: 34px; letter-spacing: .03em; text-transform: uppercase; }
body.portal .page-head p { font-family: var(--body); font-size: 15.5px; color: var(--dim); }
body.portal h2 { font-family: var(--mono); font-size: 10px; letter-spacing: .3em; color: var(--dim); text-transform: uppercase; font-weight: 400; }
body.portal h3 { font-family: var(--disp); font-weight: 600; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; }
body.portal .card { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--yel); padding: 22px 24px; margin-bottom: 22px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); }
body.portal .kv { font-family: var(--body); } body.portal .kv dt { color: var(--dim); }
body.portal .badge { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-weight: 400; }
body.portal .stat { font-family: var(--disp); font-weight: 700; font-size: 28px; letter-spacing: .04em; }
body.portal .stat small { font-family: var(--mono); letter-spacing: .14em; }
body.portal .progress { height: 5px; border-radius: 0; background: #1a1d20; } body.portal .progress > div { background: linear-gradient(90deg, #a28400, var(--yel)); border-radius: 0; }
body.portal th { font-family: var(--mono); letter-spacing: .24em; font-size: 9.5px; }
body.portal th, body.portal td { padding: 12px 10px; }
body.portal .empty strong { font-family: var(--disp); text-transform: uppercase; letter-spacing: .08em; }
body.portal .toast { border-radius: 0; background: var(--yel); color: #0c0d08; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); font-family: var(--disp); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
body.portal .toast::before { background: #0c0d08; } body.portal .toast-x { color: #0c0d08; }

/* ---------- legal pages and the footer ---------- */
.cp-legal { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; padding: 56px clamp(16px, 3vw, 40px) 90px; }
.cp-legal .eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--yel); font-weight: 400; margin: 0 0 10px; }
.cp-legal h1 { margin: 0 0 6px; }
.cp-legal .meta { font-size: 13px; color: var(--dim); margin: 0 0 22px; }
.cp-legal .draft { border: 1px solid var(--yel-line); background: rgba(255,208,0,.06); color: var(--txt); padding: 12px 14px; font-size: 14px; line-height: 1.55; margin: 0 0 28px; }
.cp-legal h2 { font-size: 17px; letter-spacing: -.01em; text-transform: none; color: var(--txt); margin: 32px 0 8px; font-weight: 700; font-family: var(--body); }
.cp-legal h3 { font-size: 14.5px; margin: 18px 0 4px; font-weight: 600; color: var(--txt); letter-spacing: 0; text-transform: none; font-family: var(--body); }
.cp-legal p, .cp-legal li { font-size: 15px; line-height: 1.62; color: var(--dim); margin: 0 0 10px; }
.cp-legal li { margin-bottom: 6px; }
.cp-legal ul { padding-left: 20px; margin: 0 0 10px; }
.cp-legal strong { color: var(--txt); font-weight: 600; }
.cp-legal a { color: var(--txt); }
/* the footer as the handoff draws it (15 Oct 2026): one line, "MW4 CREATOR PASS" and "PRIVACY · TERMS" */
.cp-foot { position: relative; z-index: 2; max-width: 1440px; margin: 44px auto 0; padding: 16px 48px 32px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #55534d; }
/* the partners strip (Tim, 27 Oct 2026): above the footer on the Challenges page and the hub, the footer's width */
.partners { position: relative; z-index: 2; max-width: 1440px; margin: 48px auto 0; padding: 0 48px; }
/* on the hub it is a band in the stack, above the accounts bar (Tim, 27 Oct 2026): the stack's own hairline under it */
.h2 > .partners { max-width: none; margin: 0; padding: 20px 48px 24px; }
.partners-k { font-family: var(--mono); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--yel); }
.partners-row { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.partners-box { height: 84px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.partners-box img { max-height: 48px; max-width: 80%; filter: grayscale(1); opacity: .8; transition: filter .25s, opacity .25s; }
.partners-box:hover img { filter: none; opacity: 1; }
.partners-box.empty span { font-family: var(--mono); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: #55534d; }
@media (max-width: 760px) { .partners { padding: 0 16px; } .partners-row { grid-template-columns: repeat(3, 1fr); gap: 10px; } .partners-box { height: 64px; } }
/* the sign-in code (27 Oct 2026): eight digits, large and spaced, where the email field would be */
body.portal .f-code { font-family: var(--mono); font-size: 24px; letter-spacing: .28em; text-align: center; max-width: 280px; }
.cp-foot nav { display: flex; }
body.portal .cp-foot a { color: #55534d; text-decoration: none; }   /* `body.portal a` is yellow and outranks a rule of one class */
.cp-foot a + a::before { content: "·"; margin: 0 8px; }
body.portal .cp-foot a:hover { color: var(--yel); }

@media (min-width: 1500px) { .cc-grid { grid-template-columns: repeat(3, 1fr); } }
/* one row down to a 1280px laptop: tighter tabs and a shorter name leave 50px between the clock and the tabs at 1280
   with the longest name the chip shows (they touched) */
@media (min-width: 1280px) and (max-width: 1399px) { .cpn-nav { gap: 24px; } .cpn-op .who b { max-width: 140px; } }
/* the bar on two rows: brand and chip, then the tabs; it sticks with the first row scrolled away. The clock stays
   beside the brand (the "clock" area is kept in the template for the row the tabs take). */
@media (max-width: 1279px) {
  html:has(.cpn-wrap.has-tabs) { scroll-padding-top: 62px; }
  .cpn-wrap.has-tabs { top: calc(-1 * var(--bar)); }
  .cpn-wrap.has-tabs::before { content: ""; position: absolute; left: 0; right: 0; top: var(--bar); height: 1px; background: var(--line); }
  .has-tabs .cpn { height: auto; grid-template-columns: auto 1fr auto; grid-template-rows: var(--bar) var(--tabs); grid-template-areas: "brand . chip" "tabs tabs clock"; }
  .has-tabs .cpn-nav { justify-self: start; gap: 30px; }
}
@media (max-width: 1080px) { .cc-grid { grid-template-columns: 1fr; }
  /* the form runs between the bar's two edges (34px, 16px under 760px); the step line says what the kicker would */
  .ob { flex-direction: column; } .ob-left, .ob-hazard { display: none; } .ob-band { display: flex; } .ob-steps { display: block; }
  .ob-panels { max-width: none; padding: 34px 34px 48px; --measure: 100%; }
  .ob-steps ~ .ob-panels .ob-panel > .ob-eyebrow:first-child { display: none; }
}
@media (max-width: 760px) { .ob-panels { padding-left: 16px; padding-right: 16px; } .ob-band { height: 150px; padding: 0 16px 18px; } .ob-band .l2 { font-size: 28px; } .ob-steps { padding: 14px 16px 0; }
  .cpn, .cp-shell { padding-left: 16px; padding-right: 16px; } .cp-foot { padding: 16px 16px 32px; }
  /* the bar on a phone: the brand, the avatar, then the tabs across; the clock is in the chip's menu */
  body.portal { --head: 56px; --bar: 56px; --tabs: 44px; }
  .cpn-txt { gap: 10px; } .cpn-txt .mw { font-size: 19px; } .cpn-txt b { font-size: 11px; letter-spacing: .16em; }
  .has-tabs .cpn { grid-template-areas: "brand . chip" "tabs tabs tabs"; } .has-tabs .cpn-nav { gap: 0; justify-content: space-between; width: 100%; }
  body.portal .has-tabs .cpn-nav a { font-size: 10.5px; letter-spacing: .12em; gap: 5px; } .cpn-n { font-size: 8.5px; padding: 0 4px; }
  .cpn-clock, .has-tabs .cpn-clock { display: none; } .cpn-op .m-clock { display: block; }
  .cpn-op .who, .cpn-op .caret { display: none; } }
@media (max-width: 640px) {
  .f-grid { grid-template-columns: 1fr; } .ch-row { grid-template-columns: minmax(0, 1fr) 40px; } .ch-row select { grid-column: 1 / -1; }
  .ob-panels { padding-top: 26px; padding-bottom: 40px; } body.portal .ob-h { font-size: 28px; }
  .ob-panels .f-in { font-size: 16px; }   /* under 16px a phone zooms the page when a field takes focus */
  .ob-nav { gap: 12px; } .ob-nav .btn-primary, .ob-nav .btn-ghost { width: 100%; } .ob-nav .btn-primary { order: -1; }
  .f-row { flex-direction: column; align-items: stretch; } .f-row .btn-primary, .status-card .s3 .btn-ghost { width: 100%; }
  /* signed out on a phone: the brand and the switch on one line */
  .cpn-switch span { display: none; } body.portal .cpn-switch a { padding: 10px 13px; }
  .cc-row { flex-direction: column; gap: 8px; } .cc-foot { flex-wrap: wrap; } body.portal .cc-title { font-size: 22px; } .cc-in { padding: 18px 16px 20px; }
  .cp-head .cp-sum { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.portal *, body.portal *::before, body.portal *::after { animation: none !important; transition: none !important; }
  .cp-noise, .cp-scanlines { display: none; }
}

/* ---------- the Creator Hub (docs/mockups/index.html) ---------- */
.hub-bg { position: absolute; top: 0; left: 0; right: 0; height: 760px; z-index: 1; pointer-events: none; background: url("/static/img/creator-pass.jpg") center 18% / cover no-repeat; }
.hub-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,7,8,.55) 0%, rgba(6,7,8,.72) 45%, var(--bg) 96%), linear-gradient(90deg, rgba(6,7,8,.4), transparent 30%, transparent 70%, rgba(6,7,8,.4)); }
/* the game's state on My games (14 Oct 2026): Complete, Processing, Rejected */
.gs { display: inline-block; font-family: var(--mono); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; padding: 4px 9px; border: 1px solid var(--line-2); color: var(--dim); white-space: nowrap; }
.gs.complete { color: var(--grn); border-color: rgba(110,201,168,.45); } .gs.processing { color: var(--yel); border-color: var(--yel-line); border-style: dashed; } .gs.rejected { color: var(--mute); text-decoration: line-through; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
body.portal .panel-head h3 { font-family: var(--disp); font-weight: 600; font-size: 14px; letter-spacing: .3em; text-transform: uppercase; margin: 0; }
.panel-head h3 span { color: var(--yel); }
.panel-head .reset { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--yel); }
.ph-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ph-link { font-family: var(--disp); font-weight: 600; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--line); padding: 6px 12px; text-decoration: none; transition: color .25s, border-color .25s; }
.ph-link:hover { color: var(--yel); border-color: var(--yel-line); }
.cc:target { border-color: var(--yel-line); }
.lk { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
/* a row of a list on the Matches page (the links sent, under .lk-list); it was the hub's leaderboard row until 15 Oct 2026 */
.lb-row { display: flex; align-items: center; gap: 14px; padding: 11px 12px; margin: 0 -12px; border-bottom: 1px solid rgba(255,255,255,.05); transition: background .25s; }
.lb-row:hover { background: rgba(255,255,255,.03); } .lb-row:last-child { border-bottom: none; }
.lb-rank { width: 26px; font-family: var(--disp); font-weight: 700; font-size: 16px; color: var(--mute); text-align: center; }
.lb-av { width: 30px; height: 30px; flex: none; background: #15171a; border: 1px solid var(--line); display: grid; place-items: center; font-family: var(--disp); font-weight: 700; font-size: 11px; color: var(--yel); }
.lb-name { flex: 1; font-family: var(--disp); font-weight: 500; font-size: 14px; letter-spacing: .08em; }
.lb-name .flag { font-family: var(--mono); font-size: 9px; color: var(--mute); letter-spacing: .2em; text-transform: uppercase; margin-left: 8px; }
.lb-xp { font-family: var(--mono); font-size: 12px; color: var(--yel); }

/* ---------- the Creator Hub as the handoff draws it (docs/design_handoff_creator_hub, option 3a, 15 Oct 2026) ----------
   Full-width bands under hairlines on #0c0c0c, 48px gutters, no panels, no shadows, a radius only on avatars and the
   type icons. The design's values are lifted as they are; the page's own tokens are prefixed --h-. The atmosphere
   overlays are off here, and the page's gold is the design's. Every `body.portal` prefix below is there because the
   portal's generic button, input and link rules outrank a rule of one class (CLAUDE.md). */
body.hub2 { --h-bg: #0c0c0c; --h-txt: #e8e6e0; --h-2: #a9a79f; --h-mute: #8a8880; --h-dim: #77756e; --h-faint: #55534d; --h-yel: #f2c012; --h-grn: #3ecf9a; --h-red: #e5533d; --h-line: rgba(255,255,255,.08); --h-row: rgba(255,255,255,.06);
  --bg: var(--h-bg); --yel: var(--h-yel); --txt: var(--h-txt); background: var(--h-bg); }
body.hub2 .cp-noise, body.hub2 .cp-vignette, body.hub2 .cp-scanlines { display: none; }
body.hub2 .cp-foot { margin-top: 0; }
.h2 { max-width: 1440px; margin: 0 auto; }
.h2 > section { border-bottom: 1px solid var(--h-line); }
/* the hero: the season and the week's place; the key art on the right, dimmed to 30% and faded in from the left */
.h2-hero { position: relative; padding: 52px 48px 36px; overflow: hidden; }
.h2-art { position: absolute; inset: 0; left: 45%; background: url("/static/img/creator-pass.jpg") center / cover no-repeat; opacity: .3; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); }
.h2-hero-in { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
body.portal .h2-hero h1 { margin: 0; font: 700 92px/.9 var(--disp); letter-spacing: -.02em; text-transform: uppercase; color: var(--h-txt); } .h2-hero h1 span { color: var(--h-yel); }
.h2-hero-l p { margin: 18px 0 0; max-width: 420px; font: 400 15px/1.45 var(--body); color: var(--h-2); }
.h2-place { text-align: right; flex: none; }
.h2-place .k { font: 400 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--h-dim); }
.h2-place .n { display: flex; align-items: baseline; justify-content: flex-end; gap: 14px; margin-top: 8px; }
.h2-place .n b { font: 700 112px/.9 var(--disp); letter-spacing: -.03em; color: var(--h-txt); }
.h2-place .sfx { font: 600 36px/1 var(--disp); color: var(--h-dim); } .h2-place .of { font: 500 36px/1 var(--disp); color: var(--h-faint); margin-left: 6px; }
.h2-place .l { margin-top: 12px; font: 400 12px var(--mono); color: var(--h-mute); } .h2-place .l em { font-style: normal; color: var(--h-yel); } .h2-place .l .xp-count { color: var(--h-mute); }
/* the week's result (15 Oct 2026): one line under the hero once a week has closed; gold when the creator won */
.h2-week { display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap; padding: 16px 48px; }
.h2-week .k { font: 400 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--h-dim); }
.h2-week .r { font: 400 12px var(--mono); color: var(--h-mute); } .h2-week .r b { font: 700 22px var(--disp); color: var(--h-txt); margin-right: 4px; }
.h2-week .t { font-size: 13px; color: var(--h-mute); }
.h2-week.won { background: rgba(242,192,18,.06); } .h2-week.won .r b, .h2-week.won .k { color: var(--h-yel); } .h2-week.won .t { color: var(--h-txt); }
/* the Activision ID band (not in the design; kept because nothing is credited without a confirmed ID) */
.h2-id { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 18px 48px; background: rgba(242,192,18,.05); }
.h2-id .t { font: 600 15px var(--disp); letter-spacing: .04em; text-transform: uppercase; color: var(--h-yel); }
.h2-id .d { margin-top: 4px; font-size: 13px; color: var(--h-mute); max-width: 70ch; } .h2-id .d b { color: var(--h-txt); font-weight: 600; }
.h2-id form { display: flex; gap: 8px; }
body.portal .h2-id input { width: 240px; padding: 10px 12px; font: 500 12px var(--mono); color: var(--h-txt); background: transparent; border: 1px solid rgba(255,255,255,.2); border-radius: 0; }
body.portal .h2-id button { padding: 10px 16px; font: 600 10px var(--mono); letter-spacing: .14em; color: #111; background: var(--h-yel); border: 0; clip-path: none; box-shadow: none; transform: none; }
.h2-id .wait { font: 500 10px var(--mono); letter-spacing: .12em; color: var(--h-yel); }
/* the linked-account tiles: five in the design, four since YouTube came off the bar (Tim, 27 Oct 2026) */
.h2-acc { display: grid; grid-template-columns: repeat(var(--tiles, 4), 1fr); }   /* two tiles while social is off (0053) */
.h2-acc-c { display: grid; grid-template-columns: 32px 1fr auto; column-gap: 14px; align-items: center; padding: 16px 20px 16px 48px; border-right: 1px solid var(--h-line); min-width: 0; }
.h2-acc-c:last-child { border-right: 0; }
.h2-acc-c .tile { width: 32px; height: 32px; padding: 0; box-sizing: border-box; display: grid; place-items: center; overflow: hidden; color: var(--h-faint); border: 1px solid rgba(255,255,255,.15); }
.h2-acc-c .tile svg { display: block; width: 17px; height: 17px; fill: currentColor; } .h2-acc-c .tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h2-acc-c.on .tile { background: var(--h-yel); color: #111; border-color: var(--h-yel); } .h2-acc-c.on .tile.pic { background: transparent; }
.h2-acc-c .w { min-width: 0; }
.h2-acc-c .role { font: 400 9px var(--mono); letter-spacing: .14em; color: var(--h-dim); line-height: 1; white-space: nowrap; }
.h2-acc-c .hd { margin-top: 7px; font: 500 13px var(--mono); line-height: 1; color: var(--h-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .h2-acc-c.on .hd { color: var(--h-txt); }
body.portal .h2-acc-c .act { align-self: end; padding-bottom: 1px; font: 500 9px var(--mono); letter-spacing: .12em; color: var(--h-yel); text-decoration: none; }
/* the main body: standings 5fr, the challenge list 7fr */
.h2-main { display: grid; grid-template-columns: 5fr 7fr; }
.h2-stand { padding: 28px 40px 28px 48px; border-right: 1px solid var(--h-line); min-width: 0; }
.h2-ch { padding: 28px 48px 28px 40px; min-width: 0; }
.h2-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
body.portal .h2-h h2 { margin: 0; font: 700 20px var(--disp); letter-spacing: .06em; text-transform: uppercase; color: var(--h-txt); }
.h2-h h2 span { color: var(--h-dim); font-weight: 500; font-size: 13px; letter-spacing: .12em; }
.h2-period { display: flex; gap: 16px; }
body.portal .h2-period button { padding: 0 0 3px; background: none; border: 0; border-bottom: 1px solid transparent; color: var(--h-dim); font: 500 10px var(--mono); letter-spacing: .12em; clip-path: none; box-shadow: none; transform: none; cursor: pointer; }
body.portal .h2-period button[aria-selected="true"] { color: var(--h-yel); border-bottom-color: var(--h-yel); }
body.portal .h2-period button:hover { background: none; color: var(--h-txt); box-shadow: none; transform: none; }
.h2-line { margin-bottom: 18px; }
.h2-line .lbl { display: flex; justify-content: space-between; font: 400 10px var(--mono); color: var(--h-dim); margin-bottom: 6px; }
.h2-line .trk { position: relative; height: 2px; background: rgba(255,255,255,.1); } .h2-line .trk i { display: block; height: 100%; background: var(--h-yel); }
.h2-line .trk b { position: absolute; right: 0; top: -3px; width: 1px; height: 8px; background: #fff; }
/* the numbers line up down the board (Tim, 27 Oct 2026): the place right-aligned in its column with tabular digits, the XP
   right-aligned too, and every row carrying the same left padding, so this creator's highlighted row sits on the same
   columns as the rest (its place had 8px more) */
.h2-r { display: grid; grid-template-columns: 30px 26px 1fr auto; gap: 10px; align-items: center; padding: 6px 0 6px 8px; border-top: 1px solid var(--h-row); font-size: 13px; color: var(--h-txt); font-variant-numeric: tabular-nums; }
.h2-r .rk { font: 600 14px var(--disp); color: var(--h-mute); text-align: right; font-variant-numeric: tabular-nums; } .h2-r .rk.top { color: var(--h-yel); }
.h2-r .av { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font: 500 9px var(--mono); color: var(--h-2); }
.h2-r .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h2-r .nm { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .h2-r .nm i { font: 400 10px var(--mono); color: var(--h-faint); margin-left: 4px; }
.h2-r .xp { font: 400 11px var(--mono); color: var(--h-2); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.h2-r.you { color: var(--h-yel); background: rgba(242,192,18,.06); box-shadow: inset 2px 0 0 var(--h-yel); } .h2-r.you .rk { color: var(--h-yel); }
.h2-dots { text-align: center; font: 400 10px var(--mono); color: var(--h-faint); padding: 6px 0; }
.h2-note { margin: 0; font-size: 13px; color: var(--h-mute); line-height: 1.5; max-width: 60ch; } .h2-note b { color: var(--h-txt); } body.portal .h2-note a { color: var(--h-yel); }
/* an empty section is a box with two words (Tim, 15 Oct 2026): COMING SOON or NONE YET */
.h2-empty { padding: 30px 16px; border: 1px dashed rgba(255,255,255,.15); text-align: center; font: 500 10px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--h-faint); }
.h2-empty + .h2-empty { margin-top: 8px; }
/* one starrable list: the filter in the head, the pinned group, then the rest */
.h2-filter { display: flex; gap: 2px; }
body.portal .h2-filter button { padding: 5px 10px; font: 500 10px var(--mono); letter-spacing: .1em; background: transparent; border: 1px solid rgba(255,255,255,.15); color: var(--h-mute); clip-path: none; box-shadow: none; transform: none; cursor: pointer; }
body.portal .h2-filter button[aria-pressed="true"] { background: var(--h-yel); border-color: var(--h-yel); color: #111; }
body.portal .h2-filter button:hover { box-shadow: none; transform: none; }
.h2-glbl { font: 400 9px var(--mono); letter-spacing: .16em; color: var(--h-dim); padding: 18px 0 8px; } .h2-glbl.pin { color: var(--h-yel); padding-top: 0; }
.h2-c { display: grid; grid-template-columns: 24px 30px 1fr 140px 56px 90px 70px; column-gap: 14px; align-items: center; padding: 11px 0; border-top: 1px solid var(--h-row); }
.h2-c:hover { background: rgba(255,255,255,.04); }
[data-group="pinned"] .h2-c { background: rgba(242,192,18,.04); } [data-group="pinned"] .h2-c:hover { background: rgba(242,192,18,.07); }
.h2-c .star { margin: 0; text-align: right; }
body.portal .h2-c .star button { padding: 0; background: none; border: 0; font: 400 15px/1 var(--body); color: var(--h-faint); clip-path: none; box-shadow: none; transform: none; cursor: pointer; }
body.portal .h2-c .star button[aria-pressed="true"] { color: var(--h-yel); }
body.portal .h2-c .star button:hover { background: none; box-shadow: none; transform: none; color: var(--h-yel); }
.h2-c .ico { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.2); display: grid; place-items: center; } .h2-c .ico i { width: 7px; height: 7px; border-radius: 50%; background: var(--h-mute); }
.h2-c .nm { min-width: 0; }
.h2-c .nm .t { font: 600 15px var(--disp); letter-spacing: .04em; text-transform: uppercase; color: var(--h-txt); } .h2-c .nm .kd { font: 400 9px var(--mono); letter-spacing: .12em; color: var(--h-dim); margin-left: 6px; }
.h2-c .nm .m { font-size: 12px; color: var(--h-mute); margin-top: 2px; }
.h2-c .pg .bar { height: 2px; background: rgba(255,255,255,.1); } .h2-c .pg .bar i { display: block; height: 100%; background: var(--h-yel); } .h2-c .pg .f { font: 400 10px var(--mono); color: var(--h-2); margin-top: 5px; }
.h2-c .xp { font: 700 17px var(--disp); text-align: right; color: var(--h-txt); }
.h2-c .st { font: 500 9px var(--mono); letter-spacing: .1em; text-align: right; color: var(--h-mute); }
body.portal .h2-c .dt { font: 500 9px var(--mono); letter-spacing: .12em; text-align: center; color: var(--h-txt); border: 1px solid rgba(255,255,255,.2); padding: 6px 0; text-decoration: none; }
body.portal .h2-c .dt:hover { border-color: var(--h-yel); color: var(--h-yel); }
/* the states' colours: in progress grey, verified green, pending yellow, not approved red with the figures dimmed */
.h2-c.ver .ico i, .h2-c.ver .pg .bar i { background: var(--h-grn); } .h2-c.ver .st, .h2-c.ver .xp { color: var(--h-grn); }
.h2-c.pend .ico i { background: var(--h-yel); } .h2-c.pend .st, .h2-c.pend .xp { color: var(--h-yel); }
.h2-c.rej .ico i { background: var(--h-red); } .h2-c.rej .pg .bar i { background: var(--h-faint); } .h2-c.rej .st { color: var(--h-red); } .h2-c.rej .xp { color: var(--h-faint); }
/* recent games and recent posts, side by side */
.h2-two { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 32px 48px; }
.h2-two.one { grid-template-columns: 1fr; }   /* the games alone while social is off (0053, 30 Oct 2026) */
.h2-two .h2-h { align-items: baseline; margin-bottom: 12px; }
.h2-sum { font: 400 10px var(--mono); letter-spacing: .1em; color: var(--h-dim); } body.portal .h2-sum a { color: var(--h-dim); text-decoration: none; } body.portal .h2-sum a:hover { color: var(--h-yel); }
.h2-g, .h2-p { display: grid; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--h-row); font-size: 13px; color: var(--h-txt); }
.h2-g { grid-template-columns: 96px 1fr auto 86px; } .h2-p { grid-template-columns: 56px 1fr auto 86px; }
.h2-g .wh, .h2-p .wh { font: 400 10px var(--mono); color: var(--h-dim); }
.h2-g .md, .h2-p .md { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .h2-g .md i, .h2-p .md i { font: 400 9px var(--mono); color: var(--h-faint); margin-left: 4px; }
body.portal .h2-p .md a { color: var(--h-txt); text-decoration: none; } body.portal .h2-p .md a:hover { color: var(--h-yel); }
.h2-g .sc { font: 400 11px var(--mono); white-space: nowrap; } .h2-g .sc em { font-style: normal; } .h2-g .sc em.lost { color: var(--h-mute); }
.h2-p .mt { font: 400 11px var(--mono); color: var(--h-2); white-space: nowrap; }
.h2-g .st, .h2-p .st { font: 500 9px var(--mono); letter-spacing: .1em; text-align: right; }
.h2-g .st.complete, .h2-p .st.ver { color: var(--h-grn); } .h2-g .st.processing, .h2-p .st.pend { color: var(--h-yel); } .h2-g .st.rejected, .h2-p .st.rej { color: var(--h-red); }
/* the dispute band: the words, how many are in review, and the one button */
.h2-dq { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 20px 48px; }
.h2-dq .t { font-size: 13px; color: var(--h-mute); } .h2-dq .n { font: 400 10px var(--mono); letter-spacing: .1em; color: var(--h-faint); margin-left: 8px; }
body.portal .h2-btn { display: inline-block; padding: 12px 22px; font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #111; background: var(--h-yel); border: 0; clip-path: none; box-shadow: none; transform: none; cursor: pointer; text-decoration: none; }
body.portal .h2-btn:hover { background: #fff; color: #111; box-shadow: none; transform: none; }
/* the dispute page (15 Oct 2026): bands in the hub's style; the form is the pop-up's, with the challenge as a field */
.h2-band { padding: 28px 48px; }
.h2-band .h2-h { margin-bottom: 12px; }
.dp-page { max-width: 760px; }
body.portal .dq-sel { width: 100%; max-width: 560px; padding: 10px 12px; font: 500 13px var(--mono); color: var(--h-txt); background: #111; border: 1px solid rgba(255,255,255,.2); border-radius: 0; }
.dp-page label[hidden] { display: none; }   /* a stream outside the challenge picked; the label is a grid otherwise */
.h2-d { display: grid; grid-template-columns: 56px 1fr auto 86px; gap: 6px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--h-row); font-size: 13px; color: var(--h-txt); }
.h2-d .wh { font: 400 10px var(--mono); color: var(--h-dim); }
.h2-d .md { font-weight: 500; min-width: 0; } .h2-d .md i { font: 400 9px var(--mono); color: var(--h-faint); margin-left: 4px; }
.h2-d .tm { font: 400 11px var(--mono); color: var(--h-2); white-space: nowrap; }
.h2-d .st { font: 500 9px var(--mono); letter-spacing: .1em; text-align: right; color: var(--h-mute); }
.h2-d .st.review { color: var(--h-yel); } .h2-d .st.added { color: var(--h-grn); } .h2-d .st.rejected { color: var(--h-red); }
.h2-d .rp { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--h-mute); } .h2-d .rp b { color: var(--h-txt); }
/* narrower: the standings above the challenges under 1024px; games and posts stacked and the accounts 2-up under 768px */
@media (max-width: 1023px) {
  .h2-main { grid-template-columns: 1fr; } .h2-stand { border-right: 0; border-bottom: 1px solid var(--h-line); padding: 28px 48px; } .h2-ch { padding: 28px 48px; }
  .h2-c { grid-template-columns: 24px 30px 1fr 110px 50px 86px; } body.portal .h2-c .dt { display: none; }
}
@media (max-width: 767px) {
  .h2-two { grid-template-columns: 1fr; gap: 32px; } .h2-acc { grid-template-columns: 1fr 1fr; } .h2-acc-c { padding: 14px 16px; border-bottom: 1px solid var(--h-line); }
  .h2-hero, .h2-stand, .h2-ch, .h2-two, .h2-dq, .h2-id, .h2-band { padding-left: 16px; padding-right: 16px; }
  .h2-d { grid-template-columns: 56px 1fr 86px; } .h2-d .tm { display: none; }
  body.portal .h2-hero h1 { font-size: 56px; } .h2-place .n b { font-size: 72px; } .h2-hero-in { flex-direction: column; align-items: flex-start; } .h2-place { text-align: left; } .h2-place .n { justify-content: flex-start; }
  .h2-c { grid-template-columns: 24px 1fr 56px; } .h2-c .ico, .h2-c .pg, .h2-c .st { display: none; }
  .h2-g { grid-template-columns: 80px 1fr 86px; } .h2-g .sc { display: none; } .h2-p { grid-template-columns: 56px 1fr 86px; } .h2-p .mt { display: none; }
}

/* Matches, and the hub's recent reads (_reads.html): a row per stream, recording, match or post */
.mt-gap { margin-top: 22px; }
.mt-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 4px 20px; align-items: baseline; padding: 12px; margin: 0 -12px; border-bottom: 1px solid rgba(255,255,255,.05); }
.mt-row:last-child { border-bottom: none; } .mt-row:target { background: linear-gradient(90deg, rgba(255,208,0,.1), transparent); box-shadow: inset 2px 0 0 var(--yel); }
.mt-what { font-family: var(--disp); font-weight: 500; font-size: 14px; letter-spacing: .08em; min-width: 0; }
body.portal .mt-what a, body.portal .mt-state a { color: var(--txt); text-decoration: none; border-bottom: 1px solid var(--yel-line); }
body.portal .mt-what a:hover, body.portal .mt-state a:hover { color: var(--yel); }
.mt-row .ext { color: var(--yel); margin-left: 6px; font-size: 11px; }
.mt-row .flag { font-family: var(--mono); font-size: 9px; color: var(--dim); letter-spacing: .2em; text-transform: uppercase; margin-left: 10px; white-space: nowrap; }
.mt-state { font-family: var(--mono); font-size: 12px; color: var(--yel); }
.mt-state.reading { color: var(--grn); } .mt-state.empty, .mt-state.stopped, .mt-state.queued { color: var(--dim); } .mt-state.failed, .mt-state.floor { color: #ffb3a7; }
.mt-note { font-size: 13.5px; color: var(--dim); min-width: 0; }
body.portal .cc-more { font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; margin-left: 6px; white-space: nowrap; }
.lk .f-in { flex: 1 1 220px; min-width: 0; }

/* ---------- Matches as two lists (8 Oct 2026, docs/mockups/matches-links.html) ----------
   What was read on the left, what a creator can send on the right. The right column stays in view under the bar while
   the list scrolls and never outgrows the window ("Your links" scrolls inside itself past a handful). */
.mt-cols { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 22px; align-items: start; }
.mt-cols.one { grid-template-columns: minmax(0, 1fr); }
.mt-side { position: sticky; top: calc(var(--bar) + 18px); max-height: calc(100vh - var(--bar) - 36px); overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 14px; }
.mt-side::-webkit-scrollbar { display: none; }
.mt-side .cp-panel { padding: 20px 22px; }
.mt-side .panel-head { margin-bottom: 12px; padding-bottom: 12px; }
body.portal .mt-side .panel-head h3 { font-size: 13px; letter-spacing: .26em; }
.mt-side .panel-head .reset { font-size: 9px; }
.mt-side .ch-desc { margin: 0; }
.mt-side .lk { flex-wrap: nowrap; gap: 10px; margin-top: 12px; }
.mt-side .lk .f-in { flex: 1 1 0; } body.portal .mt-side .lk button { padding: 0 20px; flex: none; }
.lk-list { max-height: 232px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2a2d30 transparent; }
.lk-list .lb-row { margin: 0; padding: 10px 0; align-items: baseline; } .lk-list .lb-name { font-size: 13.5px; min-width: 0; } .lk-list .lb-xp { font-size: 11.5px; white-space: nowrap; }
/* the panel's two lists as tabs in its head: an icon and a word, the one showing with the gold line on the head's bottom
   edge, as the bar's tabs are, each with how many it holds. `body.portal button` is the gold primary button and outranks a
   rule of one class, so these carry `body.portal` and undo it (the clip, the padding, the lift on hover, the hidden
   overflow that would cut the line off). */
.panel-head.tabbed { align-items: stretch; padding-bottom: 0; }
.panel-head.tabbed .reset { align-self: center; padding-bottom: 14px; }
.pt { display: flex; gap: 30px; }
body.portal .pt button { position: relative; overflow: visible; display: inline-flex; align-items: center; gap: 0; background: none; border: 0; padding: 0 0 14px; clip-path: none; box-shadow: none; transform: none; cursor: pointer; font-family: var(--disp); font-weight: 600; font-size: 14px; letter-spacing: .3em; text-transform: uppercase; color: var(--mute); white-space: nowrap; transition: color .2s; }
body.portal .pt button:hover { background: none; box-shadow: none; transform: none; color: var(--dim); }
body.portal .pt button.on { color: var(--txt); }
.pt button svg { width: 17px; height: 17px; margin-right: 10px; flex: none; color: var(--mute); transition: color .2s; }
.pt button:hover svg { color: var(--dim); } .pt button.on svg { color: var(--yel); }
.pt button i { font-style: normal; font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: .04em; line-height: 1.3; color: var(--dim); border: 1px solid var(--line-2); padding: 1px 6px; margin-left: 10px; }
.pt button.on i { color: var(--yel); border-color: var(--yel-line); }
.pt button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--yel); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.pt button.on::after { transform: scaleX(1); box-shadow: 0 0 12px rgba(255,208,0,.5); }
/* without the script both lists are on the page: the second one's name, which the tabs replace */
.pt-sub { margin: 22px 0 6px; padding-top: 18px; border-top: 1px solid var(--line); font-family: var(--disp); font-weight: 600; font-size: 14px; letter-spacing: .3em; text-transform: uppercase; }
.tabs-on .pt-sub { display: none; }
/* a stream or recording and, under it, the matches it gave that count: said once by where they sit. One that gave none
   is a row with nothing to open. */
.st { border-bottom: 1px solid rgba(255,255,255,.05); } .st:last-of-type { border-bottom: none; }
.st-row { display: grid; grid-template-columns: 18px minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 4px 14px; align-items: baseline; padding: 14px 12px; margin: 0 -12px; list-style: none; }
.st-row::-webkit-details-marker { display: none; }
.st-row::before { content: ""; grid-column: 1; }
summary.st-row { cursor: pointer; transition: background .2s; } summary.st-row:hover { background: rgba(255,255,255,.03); }
summary.st-row::before { content: "▸"; color: var(--yel); font-size: 13px; line-height: 1; align-self: center; justify-self: center; display: inline-block; transition: transform .2s; }
details[open] > summary.st-row::before { transform: rotate(90deg); }
details[open] > summary.st-row, .st:target > .st-row { background: linear-gradient(90deg, rgba(255,208,0,.07), transparent 70%); }
.st:target > .st-row { box-shadow: inset 2px 0 0 var(--yel); }
.st-row .ext { color: var(--yel); margin-left: 6px; font-size: 11px; }
.st-row .flag { font-family: var(--mono); font-size: 9px; font-weight: 400; color: var(--dim); letter-spacing: .2em; text-transform: uppercase; margin-left: 10px; white-space: nowrap; }
.st-state { font-family: var(--mono); font-size: 12px; color: var(--yel); }
.st-state.reading { color: var(--grn); } .st-state.empty, .st-state.stopped, .st-state.queued { color: var(--dim); } .st-state.failed, .st-state.floor { color: #ffb3a7; }
.st-sum { font-size: 13.5px; color: var(--dim); text-align: right; }
.st-sum b { font-family: var(--disp); font-weight: 700; font-size: 15px; letter-spacing: .04em; color: var(--grn); margin-right: 8px; }
.st-sum.n { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.st-body { margin: 0 0 14px 7px; padding: 2px 0 2px 24px; border-left: 1px solid var(--yel-line); }
.mt-m { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 4px 20px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.mt-m:last-child { border-bottom: none; } .mt-m:target { background: linear-gradient(90deg, rgba(255,208,0,.1), transparent); box-shadow: -24px 0 0 rgba(255,208,0,.1), inset 2px 0 0 var(--yel); }
.mt-m .mt-what { font-size: 13.5px; }
.mt-m .flag { display: block; margin-top: 4px; font-family: var(--mono); font-size: 9px; color: var(--dim); letter-spacing: .2em; text-transform: uppercase; }
.st-foot { margin: 0; padding: 10px 0 2px; font-size: 13px; color: var(--mute); }
.st-none { margin-top: 14px; }
#posts .mt-row .flag { display: block; margin: 4px 0 0; } .mt-note.tags { text-align: right; }

/* ---------- disputes (8 Oct 2026, docs/mockups/challenge-dispute.html) ----------
   Under a card's foot: what counted on the left, the way to dispute it on the right; an opened list takes the row. */
.cc-more-row { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 20px; }
.cc-more-row .cc-evidence { margin-top: 0; } .cc-more-row .cc-evidence[open] { flex: 1 1 100%; }
/* `body.portal a` is yellow and outranks a rule of one class: the words are quiet and only "Dispute" is the chip */
body.portal .cc-dispute, body.portal .cc-dispute-link { font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); text-decoration: none; white-space: nowrap; cursor: pointer; }
.cc-dispute b, .cc-dispute-link b { font-weight: 400; color: var(--yel); border: 1px solid var(--yel-line); background: rgba(255,208,0,.06); padding: 4px 9px; margin-left: 8px; transition: background .2s, border-color .2s; }
.cc-dispute:hover b, .cc-dispute-link:hover b { background: var(--yel-dim); border-color: var(--yel); }
/* a dispute in the card's list, its label to the right of the stream: in review, added, rejected */
.dq-list { margin-top: 0; }
.cc-evidence ul + .dq-list li:first-child { border-top: 1px solid rgba(255,255,255,.05); }
.cc-evidence li.dq, .dq-list li.dq { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.dq-t { flex: 1 1 260px; min-width: 0; }
.dq-l { flex: none; font-family: var(--mono); font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase; padding: 3px 8px; border: 1px solid; white-space: nowrap; }
.dq-l.rev { color: var(--yel); border-color: var(--yel-line); background: rgba(255,208,0,.06); }
.dq-l.ok { color: var(--grn); border-color: rgba(110,201,168,.4); background: rgba(110,201,168,.06); }
.dq-l.no { color: var(--red); border-color: rgba(224,80,58,.45); background: rgba(224,80,58,.07); }
.dp-reply { flex: 1 1 100%; margin: 4px 0 2px; padding: 10px 12px; border-left: 2px solid var(--line-2); background: rgba(255,255,255,.02); font-size: 13.5px; color: var(--dim); }
.dp-reply b { color: var(--txt); font-weight: 600; }
/* the pop-up: the challenge it is for, which stream, when in it, a word if they like. On a page of its own (.dpd-page)
   it is the same box in the column. */
body.portal dialog.dpd { width: min(680px, calc(100vw - 24px)); max-height: min(880px, calc(100vh - 24px)); padding: 0; border: 1px solid var(--yel-line); background: #0b0d0e; color: var(--txt); box-shadow: 0 30px 90px rgba(0,0,0,.8); overflow: hidden; }
body.portal dialog.dpd[open] { display: flex; flex-direction: column; }
dialog.dpd::backdrop { background: rgba(3,4,4,.78); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dpd-page { border: 1px solid var(--yel-line); background: #0b0d0e; }
.dpd-top { height: 5px; background: var(--hazard); flex: none; }
.dpd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px 16px; border-bottom: 1px solid var(--line); flex: none; }
body.portal .dp-h { margin: 0; font-family: var(--disp); font-weight: 600; font-size: 13px; letter-spacing: .26em; text-transform: uppercase; line-height: 1.3; } .dp-h span { color: var(--yel); }
.dpd-line { margin-top: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); line-height: 1.6; }
body.portal .dpd-x { flex: none; width: 32px; height: 32px; padding: 0; background: none; border: 1px solid var(--line); color: var(--dim); font-family: var(--body); font-size: 16px; font-weight: 400; letter-spacing: 0; line-height: 1; clip-path: none; box-shadow: none; transform: none; overflow: visible; }
body.portal .dpd-x:hover { background: none; color: var(--txt); border-color: var(--line-2); box-shadow: none; transform: none; }
.dp { padding: 18px 24px 22px; overflow-y: auto; margin: 0; }
.dp-p { margin: 0 0 16px; font-size: 14px; color: var(--dim); max-width: 62ch; }
.dp-step { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 8px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--dim); }
.dp-step:first-of-type { margin-top: 0; }
.dp-step u { text-decoration: none; color: var(--yel); } .dp-step i { font-style: normal; color: var(--mute); margin-left: auto; letter-spacing: .2em; } .dp-step i.req { color: var(--yel); }
.dp-all { margin: -2px 0 8px; font-size: 13px; color: var(--dim); } .dp-all:empty { display: none; }
.dp-none { margin: 0; font-size: 14px; color: var(--dim); }
.dp-list { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); max-height: 236px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #33373a transparent; }
.dp-list:empty { display: none; }
/* `body.portal label` makes every label a 9px field label, and `body.portal input` every input a field: a stream's row
   is a label around a radio, so both carry `body.portal` and undo them */
body.portal label.dp-s { display: grid; grid-template-columns: 18px minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .9fr) auto; gap: 4px 12px; align-items: baseline; margin: 0; padding: 11px 8px; border-bottom: 1px solid var(--line); cursor: pointer; font-family: var(--body); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--txt); transition: background .2s; }
body.portal label.dp-s:last-child { border-bottom: none; } body.portal label.dp-s:hover { background: rgba(255,255,255,.03); }
body.portal label.dp-s:has(input:checked) { background: linear-gradient(90deg, rgba(255,208,0,.1), transparent 80%); box-shadow: inset 2px 0 0 var(--yel); }
body.portal label.dp-s.off { cursor: not-allowed; } body.portal label.dp-s.off > span { opacity: .55; } body.portal label.dp-s.off:hover { background: none; }
body.portal .dp-s input { appearance: none; -webkit-appearance: none; width: 12px; height: 12px; margin: 0; padding: 0; align-self: center; transform: rotate(45deg); border: 1.5px solid #4a4f53; border-radius: 0; background: #0c0d0a; cursor: inherit; box-shadow: none; }
body.portal .dp-s input:checked { background: var(--yel); border-color: var(--yel); box-shadow: 0 0 8px rgba(255,208,0,.6); }
.dp-what { font-family: var(--disp); font-weight: 500; font-size: 13.5px; letter-spacing: .08em; }
.dp-what em { font-style: normal; font-family: var(--mono); font-size: 9px; color: var(--dim); letter-spacing: .2em; text-transform: uppercase; margin-left: 10px; white-space: nowrap; }
.dp-state { font-family: var(--mono); font-size: 11.5px; color: var(--yel); }
.dp-state.reading { color: var(--grn); } .dp-state.empty, .dp-state.stopped, .dp-state.queued { color: var(--dim); } .dp-state.failed, .dp-state.floor { color: #ffb3a7; }
.dp-here { font-size: 13px; color: var(--dim); text-align: right; } .dp-here b { font-family: var(--disp); font-weight: 700; color: var(--grn); margin-right: 5px; }
body.portal .dp-open { justify-self: end; font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--yel); text-decoration: none; border: 1px solid var(--yel-line); padding: 4px 8px; white-space: nowrap; }
body.portal .dp-open:hover { background: var(--yel-dim); border-color: var(--yel); }
.dp-time { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px 14px; }
body.portal label.dp-t { display: flex; flex-direction: column; gap: 6px; margin: 0; } body.portal label.dp-t span { font-family: var(--mono); font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: var(--txt); }
body.portal label.dp-t span i { font-style: normal; color: var(--mute); margin-left: 8px; letter-spacing: .2em; } body.portal label.dp-t span i.req { color: var(--yel); }
body.portal .dp-t input { width: 132px; font-family: var(--mono); font-size: 18px; font-weight: 400; letter-spacing: .08em; padding: 10px 12px; text-align: center; }
body.portal .dp-t input.bad { border-color: var(--red); }
.dp-hint { flex: 1 1 220px; font-size: 13px; color: var(--dim); } .dp-hint b { color: var(--txt); font-weight: 600; }
.dp-err { flex: 1 1 100%; margin: 0; font-size: 13px; color: #ffb3a7; } .dp-err[hidden], .dp-none[hidden] { display: none; }
body.portal .dp-note { width: 100%; min-height: 0; height: 68px; resize: vertical; display: block; }
.dp-priv { margin: 6px 0 0; font-size: 12.5px; color: var(--mute); }
.dp-foot { margin-top: 20px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; }
body.portal .dp-cancel { background: none; border: 0; padding: 0; clip-path: none; box-shadow: none; transform: none; overflow: visible; font-family: var(--mono); font-size: 9.5px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); text-decoration: none; cursor: pointer; }
body.portal .dp-cancel:hover { background: none; color: var(--txt); box-shadow: none; transform: none; }
.dp-alt { margin-left: auto; font-size: 13px; color: var(--mute); }
/* the clip form (27 Oct 2026, 0049): the kind rows are three columns of the stream rows' grid, the link field is wide,
   and a section the kind does not name is hidden by the pop-up's script (the page shows both) */
body.portal label.dp-s.sb-k { grid-template-columns: 18px minmax(0, 1fr) minmax(0, 1.4fr); }
body.portal label.dp-s.sb-k .dp-here { text-align: left; }
body.portal label.dp-t.sb-url { flex: 1 1 320px; } body.portal .sb-url input { width: 100%; text-align: left; font-size: 14px; letter-spacing: 0; }
[data-sb-for][hidden] { display: none; }
/* the same disputes on Matches, a third tab: the label, the challenge, the stream and the time given, when it was sent */
.dx-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 4px 20px; align-items: baseline; padding: 13px 12px; margin: 0 -12px; border-bottom: 1px solid rgba(255,255,255,.05); }
.dx-row:last-child { border-bottom: none; } .dx-row:target { background: linear-gradient(90deg, rgba(255,208,0,.1), transparent); box-shadow: inset 2px 0 0 var(--yel); }
.dx-row .dq-l { justify-self: start; } .dx-row .mt-note b { color: var(--txt); font-weight: 600; font-family: var(--mono); font-size: 12px; }
.dx-when { font-family: var(--mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.dx-row .dp-reply { grid-column: 2 / -1; margin: 2px 0 0; }
@media (max-width: 760px) {
  .dpd-head { padding: 16px 16px 14px; } .dp { padding: 16px 16px 20px; }
  body.portal label.dp-s { grid-template-columns: 18px minmax(0, 1fr) auto; } .dp-what { grid-column: 2; } body.portal .dp-open { grid-column: 3; grid-row: 1; } .dp-state { grid-column: 2; } .dp-here { grid-column: 3; }
  body.portal label.dp-t { flex: 1 1 120px; } body.portal .dp-t input { width: 100%; } body.portal .dp-cancel { order: 3; width: 100%; padding: 6px 0; text-align: center; } .dp-alt { margin-left: 0; }
  body.portal .dp-foot button[type=submit] { width: 100%; }
  .dx-row { grid-template-columns: 1fr auto; } .dx-row .dq-l { grid-column: 1; grid-row: 1; } .dx-when { grid-column: 2; grid-row: 1; } .dx-row .mt-what, .dx-row .mt-note, .dx-row .dp-reply { grid-column: 1 / -1; }
}

/* a narrower column on a laptop; under the two-row bar only its tab row is in the way; under 1200px one column, the
   links after the list */
@media (max-width: 1359px) { .mt-cols { grid-template-columns: minmax(0, 1fr) 360px; } }
@media (max-width: 1279px) { .mt-side { top: calc(var(--tabs) + 18px); max-height: calc(100vh - var(--tabs) - 36px); } }
@media (max-width: 1199px) { .mt-cols { grid-template-columns: minmax(0, 1fr); } .mt-side { position: static; max-height: none; overflow: visible; } .lk-list { max-height: none; } }
@media (max-width: 760px) {
  /* three tabs across a phone, the third being Disputes (8 Oct 2026) */
  .pt { gap: 14px; } body.portal .pt button { font-size: 11.5px; letter-spacing: .1em; } .pt button svg { width: 14px; height: 14px; margin-right: 5px; } .pt button i { margin-left: 5px; padding: 0 4px; font-size: 9px; } .panel-head.tabbed .reset { display: none; }
  .st-row { grid-template-columns: 18px minmax(0, 1fr) auto; } .st-row .mt-what { grid-column: 2 / -1; } .st-state { grid-column: 2; } .st-sum { grid-column: 3; }
  .st-sum:not(.n) { grid-column: 2 / -1; text-align: left; } .st-body { margin-left: 5px; padding-left: 14px; } .mt-m { grid-template-columns: 1fr; }
  .mt-note.tags { text-align: left; } .mt-side .cp-panel { padding: 18px 16px; } .mt-side .lk .f-in { font-size: 16px; }
}

/* filter tabs as links (the Challenges page's filter is buttons, above). The Armory's rules sat here until 14 Oct 2026. */
.cp-tabs a { font-family: var(--disp); font-weight: 600; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; padding: 10px 18px; background: #0d0f11; border: 1px solid var(--line-strong); color: var(--dim); text-decoration: none; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.cp-tabs a:hover { color: var(--txt); border-color: var(--yel-line); } .cp-tabs a[aria-pressed="true"] { background: var(--yel); border-color: var(--yel); color: #0c0d08; }

/* ---------- the status page on its own (14 Oct 2026): no art column, no step rail, the whole width ---------- */
.cp-shell.status-page { max-width: 860px; padding-top: 64px; padding-bottom: 60px; }
.status-page .status-card, .status-page .sub-kv, .status-page details.withdraw { max-width: none; }
.status-page .ob-p { max-width: 64ch; }

/* ---------- the launch countdown (14 Oct 2026): the coming-soon page and the Campaign View ---------- */
.soon { position: relative; z-index: 2; min-height: calc(100vh - var(--head)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 20px; }
.soon .k1, .cv-launch .k1 { font-family: var(--mono); font-size: 10px; letter-spacing: .4em; color: var(--yel); text-transform: uppercase; }
body.portal .soon h1 { font-family: var(--disp); font-weight: 700; font-size: clamp(44px, 7vw, 92px); line-height: .95; text-transform: uppercase; letter-spacing: .03em; margin: 14px 0 0; text-shadow: 0 4px 30px rgba(0,0,0,.9); }
.soon h1 span { color: var(--yel); }
.soon .k2 { margin: 16px 0 0; font-size: 16px; font-weight: 500; color: #c4c9c2; max-width: 56ch; line-height: 1.55; text-shadow: 0 2px 12px rgba(0,0,0,.9); }
.soon-note { margin: 26px 0 0; font-size: 14.5px; color: var(--dim); max-width: 60ch; line-height: 1.55; }
.soon-cta + .soon-note { margin-top: 22px; }      /* the Apply button's rules sit with the handoff's buttons, below */
/* the Activision ID band on the countdown the hub shows until launch (15 Oct 2026) */
.soon .h2-id { width: 100%; max-width: 980px; margin-top: 36px; text-align: left; border: 1px solid rgba(242,192,18,.35); }
.cd { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; justify-content: center; }
.cd .u { min-width: 120px; padding: 18px 16px 14px; background: var(--panel); border: 1px solid var(--line); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.cd .u b { display: block; font-family: var(--disp); font-weight: 700; font-size: 44px; line-height: 1; color: var(--txt); font-variant-numeric: tabular-nums; }
.cd .u i { display: block; margin-top: 8px; font-family: var(--mono); font-style: normal; font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--mute); }
.cd .cd-live { display: none; font-family: var(--disp); font-weight: 700; font-size: 34px; letter-spacing: .2em; text-transform: uppercase; color: var(--yel); padding: 18px 0; }
.cd.live .u { display: none; } .cd.live .cd-live { display: block; }
.cd-when { margin-top: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.cv-launch { text-align: center; margin-bottom: 26px; } .cv-launch .cd { margin-top: 18px; }
.cv-list { margin: 0; }
.cv-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto auto auto; gap: 8px 16px; align-items: center; padding: 12px; margin: 0 -12px; border-bottom: 1px solid rgba(255,255,255,.05); }
.cv-row:last-child { border-bottom: none; }
.cv-tier { font-family: var(--mono); font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: var(--yel); border: 1px solid var(--yel-line); padding: 3px 7px; text-align: center; }
body.portal .cv-row a { color: inherit; text-decoration: none; font-family: var(--disp); font-weight: 600; font-size: 14.5px; letter-spacing: .06em; text-transform: uppercase; } body.portal .cv-row a:hover { color: var(--yel); }
.cv-frac { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.cv-xp { font-family: var(--disp); font-weight: 700; font-size: 14px; color: var(--yel); white-space: nowrap; min-width: 56px; text-align: right; }

@media (max-width: 760px) { .cv-row { grid-template-columns: 1fr auto; } .cv-row a { grid-column: 1 / -1; } .cv-tier { grid-row: 1; justify-self: start; } }
/* a Matches row stacks on a phone; this has to follow the rows' own rules, which are below the first set of queries */
@media (max-width: 640px) { .mt-row { grid-template-columns: 1fr; } .mt-row .flag { margin-left: 0; display: block; margin-top: 2px; }
  .cp-panel { padding: 18px 16px; }
  .cd .u { min-width: 0; flex: 1 1 40%; } .cd .u b { font-size: 34px; } .h2-id form, body.portal .h2-id input { width: 100%; } }

/* ---------- the handoff's skin on every portal page (15 Oct 2026, Tim: "update the other pages in that style") ----------
   The hub's tokens and language for the pages the handoff did not draw: flat #0c0c0c, hairlines, bands rather than
   panels, no cut corners, no overlays, titles in Barlow Condensed, labels and figures in JetBrains Mono. This section
   sits after the pages' own rules so it wins at equal specificity; the originals stay for the tests that pin them. */
body.portal { --bg: #0c0c0c; --panel: #0c0c0c; --panel-2: #111; --panel-3: #161616; --card: #0c0c0c; --card-2: #111;
  --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.16); --line-strong: rgba(255,255,255,.14);
  --yel: #f2c012; --yel-line: rgba(242,192,18,.4); --yel-dim: rgba(242,192,18,.12); --gold: #f2c012;
  --txt: #e8e6e0; --dim: #8a8880; --mute: #55534d; --grn: #3ecf9a; --red: #e5533d; --hazard: var(--yel); }
/* the hub's own tokens on every portal page (16 Oct 2026): a rule that names them, the empty box, a hairline, holds off the
   hub too. Until then `var(--h-row)` was undefined off the hub, so those borders fell back to the text colour. */
body.portal { --h-bg: #0c0c0c; --h-txt: #e8e6e0; --h-2: #a9a79f; --h-mute: #8a8880; --h-dim: #77756e; --h-faint: #55534d; --h-yel: #f2c012; --h-grn: #3ecf9a; --h-red: #e5533d; --h-line: rgba(255,255,255,.08); --h-row: rgba(255,255,255,.06); }
body.portal .cp-noise, body.portal .cp-vignette, body.portal .cp-scanlines { display: none; }
/* the countdown's brand line, alone and larger (Tim, 16 Oct 2026) */
.soon .k1 { font-size: 15px; letter-spacing: .5em; }
/* the password forms (16 Oct 2026): two fields side by side, the button under them; one column on a phone */
.pw-form .f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; max-width: 520px; }
.pw-form .f-field { min-width: 0; } .pw-form .f-in { width: 100%; }
body.portal .pw-form .btn-primary { margin-top: 18px; }
.pw-page .f-help a, .ob-panel .f-help a { color: var(--yel); }
@media (max-width: 767px) { .pw-form .f-row { grid-template-columns: 1fr; } }
.cp-shell > .h2-empty { margin-top: 24px; }
/* the page column, its head and the panels: bands under hairlines */
.cp-shell { padding: 36px 48px 0; }
.cp-head { align-items: flex-end; margin-bottom: 8px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.cp-t1 { font-size: 20px; letter-spacing: .06em; }
.cp-t2 { font-size: 10px; letter-spacing: .16em; text-transform: none; color: var(--dim); }
.cp-sum .s { border: 0; padding: 0; font-size: 10px; letter-spacing: .1em; color: var(--dim); } .cp-sum .s b { font-size: 14px; margin-right: 6px; }
.cp-panel { background: transparent; border: 0; border-top: 1px solid var(--line); padding: 24px 0; clip-path: none; animation: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.panel-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 12px; }
body.portal .panel-head h3 { font: 700 20px var(--disp); letter-spacing: .06em; } .panel-head h3 span { color: var(--dim); font-weight: 500; font-size: 13px; letter-spacing: .12em; }
.panel-head .reset { font-size: 10px; letter-spacing: .1em; color: var(--dim); }
.ph-link { border: 0; padding: 0; font: 400 10px var(--mono); letter-spacing: .1em; color: var(--dim); }
/* buttons and fields */
body.portal .btn, body.portal button, .btn-primary { clip-path: none; font: 600 11px var(--mono); letter-spacing: .14em; padding: 12px 22px; color: #111; }
body.portal .btn:hover, body.portal button:hover, .btn-primary:hover { background: #fff; color: #111; box-shadow: none; transform: none; }
.btn-primary::after { display: none; }
body.portal .btn.secondary, body.portal button.secondary, body.portal .btn-ghost, body.portal button.ghost { font: 500 10px var(--mono); letter-spacing: .12em; padding: 11px 16px; border: 1px solid rgba(255,255,255,.2); color: var(--txt); background: none; }
body.portal .btn.secondary:hover, body.portal button.secondary:hover, body.portal .btn-ghost:hover, body.portal button.ghost:hover { background: none; color: var(--yel); border-color: var(--yel); }
body.portal .btn.sm, body.portal button.sm { padding: 8px 14px; font-size: 10px; }
/* a visitor's way in on the countdown: one big Apply button in the middle of the page (Tim, 27 Oct 2026). It is a `.btn`,
   so `body.portal .btn` (above) already outranks `body.portal a` and keeps the text dark on gold; this rule comes after
   the handoff's button rule at the same specificity and takes the size. */
body.portal .soon-cta { margin-top: 40px; font: 700 17px var(--mono); letter-spacing: .24em; padding: 20px 56px; text-decoration: none;
  box-shadow: 0 10px 40px rgba(242,192,18,.25); }
body.portal .soon-cta:hover { box-shadow: 0 14px 50px rgba(242,192,18,.35); }
@media (max-width: 480px) { body.portal .soon-cta { font-size: 15px; padding: 18px 36px; width: 100%; max-width: 360px; } }
body.portal button.danger { background: transparent; }
body.portal input, body.portal select, body.portal textarea, .f-in { background: #111; border: 1px solid rgba(255,255,255,.2); font: 500 13px var(--mono); letter-spacing: 0; padding: 10px 12px; }
body.portal input:hover, body.portal select:hover { background: #111; }
body.portal input:focus, body.portal select:focus, body.portal textarea:focus { border-color: var(--yel); box-shadow: none; background: #111; }
body.portal select { padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23f2c012'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
body.portal label, .f-lbl { letter-spacing: .16em; }
.f-help { font-size: 13px; color: var(--mute); }
/* the challenge cards as rows of one list, as the hub lists them */
.cc-grid { grid-template-columns: 1fr; gap: 0; }
.cc { background: transparent; border: 0; border-top: 1px solid var(--h-row); clip-path: none; animation: none; overflow: visible; }
.cc:hover { background: rgba(255,255,255,.03); }
.cc-strip { display: none; } .cc-in { padding: 16px 0 18px; }
.cc-head { margin-bottom: 10px; } .cc-type .t { font: 400 9px var(--mono); letter-spacing: .16em; color: var(--dim); } .cc-type .diamond { width: 7px; height: 7px; transform: none; border-radius: 50%; animation: none; }
.cc-window { border: 0; padding: 0; font-size: 9px; letter-spacing: .12em; }
.cc-ico { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.2); background: transparent; transform: none; margin: 2px 0 0; }
.cc-ico svg { width: 14px; height: 14px; transform: none; color: var(--dim); }
body.portal .cc-title { font-size: 15px; letter-spacing: .04em; }
.cc-desc { font-size: 12px; font-weight: 400; margin-top: 2px; } .cc-meta { margin-top: 8px; }
.pill, .vtag { background: transparent; }
.cc-prog { margin-top: 12px; } .cc-bar { height: 2px; background: rgba(255,255,255,.1); } .cc-bar i { animation: none; }
.cc-foot { margin-top: 12px; padding-top: 0; border-top: 0; } .cc-xp .v { font-size: 17px; }
.cc-evidence summary { letter-spacing: .14em; }
body.portal .cp-tabs button, .cp-tabs a { font: 500 10px var(--mono); letter-spacing: .1em; padding: 5px 10px; clip-path: none; background: transparent; border: 1px solid rgba(255,255,255,.15); color: var(--dim); box-shadow: none; transform: none; }
body.portal .cp-tabs button[aria-pressed="true"], .cp-tabs a[aria-pressed="true"] { background: var(--yel); border-color: var(--yel); color: #111; }
body.portal .cp-h2 { font: 700 20px var(--disp); letter-spacing: .06em; } .cp-h2 .muted { font-size: 13px; letter-spacing: .12em; } .cp-h2-window { border: 0; padding: 0; font-size: 10px; }
/* Matches: the tabs, the rows and the link column */
body.portal .pt button { font: 600 12px var(--disp); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); padding-bottom: 10px; }
body.portal .pt button.on { color: #fff; } .pt button.on::after { box-shadow: none; }
.pt button i { border: 0; padding: 0; color: var(--mute); margin-left: 6px; }
.mt-side .cp-panel { padding: 18px 0; } .mt-side .cp-panel + .cp-panel { margin-top: 0; }
.st, .mt-row { border-color: var(--h-row); }
.mt-what { font-size: 13px; letter-spacing: .04em; }
/* the account page and My games, whose classes come from style.css */
body.portal .page-head { padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 0; }
body.portal .page-head h1, body.portal h1 { font-size: 20px; letter-spacing: .06em; }
body.portal .page-head p { font-size: 13px; color: var(--mute); }
body.portal .card { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 24px 0; margin: 0; clip-path: none; box-shadow: none; }
body.portal .card .card { border-top: 0; padding-top: 0; margin-bottom: 18px; }
body.portal .grid.two { gap: 0 48px; }
body.portal h2 { font: 700 20px var(--disp); letter-spacing: .06em; text-transform: uppercase; color: var(--txt); margin: 0 0 12px; }
body.portal .kv dt { font: 400 9px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
body.portal .badge { border-radius: 0; background: transparent; border: 1px solid rgba(255,255,255,.15); font-size: 9px; letter-spacing: .12em; }
body.portal .badge.ok { color: var(--grn); border-color: rgba(62,207,154,.4); } body.portal .badge.warn { color: var(--yel); border-color: var(--yel-line); } body.portal .badge.bad { color: var(--red); border-color: rgba(229,83,61,.4); }
body.portal .badge.muted { color: var(--mute); }
body.portal table th { font: 400 9px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
body.portal th, body.portal td { border-color: var(--h-row); }
body.portal .stat { font-size: 22px; }
body.portal .empty { background: transparent; border: 1px dashed rgba(255,255,255,.15); font: 500 10px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); text-align: center; padding: 30px; }
/* the application and the sign-in pages: the same language on their panels; the key art stays */
.ob-hazard { display: none; }
.ob-left-inner::before { background: linear-gradient(105deg, rgba(12,12,12,.3) 0%, rgba(12,12,12,.6) 60%, var(--bg) 100%), linear-gradient(0deg, var(--bg) 0%, rgba(12,12,12,.85) 14%, transparent 46%); }
.ob-panels { padding: 44px 48px; }
body.portal .ob-h { font-size: 28px; letter-spacing: .04em; }
.ob-p { font-size: 15px; } .ob-eyebrow { letter-spacing: .16em; }
.ob-li { background: transparent; border: 1px solid var(--line); border-left: 2px solid var(--yel); }
.obs-n { border-radius: 50%; transform: none; } .obs-n span { transform: none; }
.obs.active .obs-n { box-shadow: none; } .obs.done .obs-n { background: var(--yel); }
.status-card { background: transparent; border: 1px solid rgba(255,255,255,.15); }
.status-card .s1 .dot { animation: none; border-radius: 50%; transform: none; }
.ob-err, .ob-note { background: transparent; }
body.portal .toast { clip-path: none; font: 600 11px var(--mono); letter-spacing: .12em; }
/* the dispute pop-up and page */
.dpd-top { height: 2px; }
.dpd-page { border-color: rgba(255,255,255,.15); background: #0c0c0c; }
/* a phone: one column, the page's gutters, the head stacked */
@media (max-width: 767px) {
  .cp-shell { padding-left: 16px; padding-right: 16px; }
  .cp-head { flex-direction: column; align-items: flex-start; gap: 10px; } .cp-sum { margin-left: 0; gap: 14px; }
  body.portal .grid.two { grid-template-columns: 1fr; }
  .ob-panels { padding: 28px 16px 40px; }
  body.portal .page-head h1, body.portal h1 { font-size: 18px; }
  /* the accounts table stacks each row: the four cells ran 100px past a phone's edge */
  body.portal table.stack thead { display: none; }
  body.portal table.stack, body.portal table.stack tbody { display: block; }
  body.portal table.stack tr { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 14px 0; border-top: 1px solid var(--h-row); }
  body.portal table.stack td { display: block; border: 0; padding: 0; }
  body.portal table.stack td:first-child { font: 600 14px var(--disp); letter-spacing: .06em; text-transform: uppercase; }
  body.portal table.stack td:empty { display: none; }
  body.portal table.stack form.inline input { flex: 1 1 140px; min-width: 0; }
}