/* Site wide UI polish: custom dropdowns (public/selects.js), sidebar, mobile fixes. */
.fnew { display: block; margin: 8px auto; border-radius: var(--r-lg); position: sticky; top: 72px; z-index: 5; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.sc-golive { margin-top: 16px; }
.sc-golive h2 { margin: 0 0 4px; font-size: 20px; }
.growth-recap h2 { margin: 0 0 2px; font-size: 18px; }
.growth-recap { margin-bottom: 14px; }
/* Custom dropdowns (public/selects.js): same feel as the post destination picker */
.ss-wrap { position: relative; display: inline-flex; max-width: 100%; min-width: 0; vertical-align: middle; }
.ss-wrap[hidden] { display: none !important; }
.ss-native { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; pointer-events: none; margin: 0 !important; }
.ss-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-width: 0; padding: 8px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--panel2); color: var(--text); font-weight: 600; cursor: pointer; text-align: left; transition: border-color .15s, background .15s; }
.ss-btn:hover { border-color: rgba(232, 116, 59, 0.6); }
.ss-wrap.open .ss-btn { border-color: var(--accent2, #e8743b); background: rgba(232, 116, 59, 0.12); }
.ss-btn:disabled { opacity: .55; cursor: default; }
.ss-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ss-caret { display: inline-flex; opacity: .7; flex: none; transition: transform .15s; }
.ss-wrap.open .ss-caret { transform: rotate(180deg); }
select.mini + .ss-btn, .ss-wrap:has(select.mini) .ss-btn { padding: 4px 10px; font-size: 13px; }
.ss-menu { position: fixed; z-index: 2000; max-width: min(360px, calc(100vw - 16px)); max-height: 320px; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); padding: 6px; }
.ss-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; padding: 9px 10px; border: 0; border-radius: var(--r-md); background: none; color: var(--text); cursor: pointer; font-weight: 500; }
.ss-opt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-opt:hover, .ss-opt.act { background: #ffffff0d; }
.ss-opt.on { background: rgba(232, 116, 59, 0.15); color: var(--text); font-weight: 600; }
.ss-opt.on svg { color: var(--accent2, #e8743b); flex: none; }
.ss-opt:disabled { opacity: .45; cursor: default; }
.ss-group { font-size: 11px; color: var(--muted); padding: 8px 10px 4px; }
@media (max-width: 760px) { .ss-btn { font-size: 16px; } .ss-menu { max-height: 50vh; } .ss-opt { padding: 11px 12px; } }
.sc-golive h3 { margin: 18px 0 8px; font-size: 16px; }
.sc-golive .gl-picks { margin-bottom: 4px; }
.sc-golive #glTitle { width: 100%; margin-top: 8px; }
.sc-golive .gl-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
/* Category filters as clean text links (owner, Nov 2026: "look cleaner, like this across the board").
   Applies to every .mood chip row: Watch vibes / genres, Position Tracker moods, boards. The picked one turns accent. */
.moods { gap: 2px 6px; align-items: center; }
.mood, .mood.vchip, .mood.mchip { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: var(--r-md); padding: 5px 7px !important; color: var(--muted); font-weight: 600; font-size: 14px; line-height: 1.3; }
.mood:hover { color: var(--text); background: #ffffff0a !important; }
.mood.on, .mood.vchip.on, .mood.mchip.on { color: var(--accent2, #e8743b) !important; background: none !important; }
.mood.on::after { content: ''; }
.mood-more { background: none; border: 0; padding: 5px 7px; color: var(--accent2, #e8743b); font-weight: 600; font-size: 14px; cursor: pointer; }
.mood-more:hover { text-decoration: underline; }
.mood.mood-folded { display: none !important; }
.wfrow .wlabel { padding-top: 5px; }
.whub-hero .wfrow .mood { padding: 5px 7px !important; font-size: 14px; }

/* Admin: moderate a user (warn / timeout / suspend with ready made reasons) */
.mod-reason { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; align-items: end; margin: 10px 0; }
.mod-reason input { width: 100%; }
.mod-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; margin: 6px 0 12px; }
.mod-act { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel2); min-width: 0; }
.mod-act .row-btns { margin: 0; flex-wrap: wrap; }
.tag.warn { background: #f0b42922; color: #f0b429; }
@media (max-width: 760px) { .mod-reason { grid-template-columns: minmax(0, 1fr); } }

/* Neighborhood: live cards show the game faintly behind them; calendar tab */
.nb-live-card.has-art { position: relative; overflow: hidden; isolation: isolate; }
.nb-live-card.has-art::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--nb-art) center 30% / cover no-repeat; opacity: .14; filter: blur(1px) saturate(1.1); }
.nb-live-card.has-art::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--panel) 15%, transparent 140%); opacity: .7; }
.nb-cal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.nb-cal-head h3 { margin: 0; }
.nb-cal-head .spacer { flex: 1; }

/* Settings → Help & feedback (was a pop-up) */
#settingsHelp .subnav { margin: 4px 0 12px; }
#settingsHelp .fb-pane { max-width: 760px; }
/* Friends bar (bottom right) in the site's purple so it stands out (owner, Nov 2026) */
.fdock-bar { background: var(--accent2) !important; color: var(--on-accent) !important; border-color: var(--accent2) !important; }
.fdock-bar:hover { background: var(--accent-hover) !important; }
.fdock-bar .muted, .fdock-bar .fdock-n { color: #ffffffcc !important; }
.fdock-bar .dk-dot.online { background: #4ade80; box-shadow: 0 0 0 2px var(--accent2); }
.fdock-bar .fdock-req.count { background: var(--on-accent); color: #fff; }
.fdock-bar .fdock-chev { color: #fff; border-color: #fff; }
.fdock-bar { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.fdock { border-color: var(--accent2); }

/* Site search in the header (public/search.js) */
.gs { position: relative; display: flex; align-items: center; gap: 6px; flex: 1 1 auto; max-width: 620px; min-width: 0; margin: 0 auto 0 24px; }
.gs .ss-wrap { flex: none; }
.gs .ss-btn, .gs .gs-type { padding: 7px 10px; font-size: 13px; }
.gs-field { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 0 12px; height: 38px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel2); color: var(--muted); }
.gs-field:focus-within { border-color: var(--accent2); }
.gs-field input { flex: 1; min-width: 0; border: 0; background: none; padding: 0; outline: none; height: 100%; font-size: 14px; }
.gs-pop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60; max-height: min(70vh, 560px); overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); padding: 6px; }
.gs-h { font-size: 11px; color: var(--muted); padding: 10px 10px 4px; }
.gs-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--r-lg); background: none; color: var(--text); text-decoration: none; text-align: left; font: inherit; cursor: pointer; }
.gs-row:hover, .gs-row:focus { background: #ffffff0d; outline: none; }
.gs-all { color: var(--accent2); }
.gs-main { display: flex; flex-direction: column; min-width: 0; }
.gs-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.gs-main span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-av { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; }
.gs-av-t { display: inline-flex; align-items: center; justify-content: center; background: var(--panel2); font-size: 11px; font-weight: 600; color: var(--muted); border-radius: var(--r-lg); }
.gs-art { width: 28px; height: 38px; border-radius: var(--r-sm); object-fit: cover; flex: none; }
.gs-hash { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-lg); background: var(--panel2); color: var(--muted); font-weight: 600; flex: none; }
.gs-adv { display: block; padding: 8px 10px 6px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); margin-top: 6px; }
.gs-toggle { display: none; background: none; border: 0; color: var(--text); padding: 6px; }
a.hashtag { color: var(--accent2); text-decoration: none; font-weight: 600; }
a.hashtag:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .gs { position: fixed; top: 56px; left: 0; right: 0; max-width: none; margin: 0; padding: 8px 10px; background: var(--panel); border-bottom: 1px solid var(--line); z-index: 70; display: none; }
  .gs.open { display: flex; }
  .gs-toggle { display: inline-flex; margin-left: auto; }
  .gs .ss-wrap { max-width: 120px; }
}
/* Search results page (#search/...) */
.sr-head { display: grid; gap: 10px; margin-bottom: 14px; }
.sr-form { display: flex; gap: 8px; }
.sr-field { height: 44px; }
.sr-types { display: flex; gap: 2px 6px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.sr-types button { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 8px 8px; color: var(--muted); font-weight: 600; }
.sr-types button.on { color: var(--text); border-bottom-color: var(--accent2); }
.sr-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sr-chip { font-size: 12px; padding: 3px 8px; border-radius: var(--r-md); background: var(--panel2); color: var(--text); }
.sr-adv summary { cursor: pointer; font-weight: 600; }
.sr-adv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px 14px; margin-top: 12px; }
.sr-adv-grid input { width: 100%; }
.sr-adv-go { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sr-adv-go code { font-size: 12px; }
.sr-sec { margin: 18px 0; }
.sr-sec-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.sr-sec-h h3 { margin: 0; }
.sr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.sr-person, .sr-squad { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); min-width: 0; }
.sr-person .gs-av { width: 44px; height: 44px; }
.sr-stream { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--text); padding: 8px; min-width: 0; }
.sr-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: var(--panel2); }
.sr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-viewers { position: absolute; left: 6px; bottom: 6px; background: #000c; color: #fff; font-size: 12px; padding: 1px 6px; border-radius: var(--r-sm); }
.sr-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.sr-tag { display: flex; flex-direction: column; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); text-decoration: none; color: var(--text); }
.sr-tag b { color: var(--accent2); }
.sr-tag span { font-size: 12px; color: var(--muted); }
.sr-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; }
.sr-game { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--text); font-size: 13px; min-width: 0; }
.sr-game img, .sr-noart { width: 100%; aspect-ratio: 104 / 144; object-fit: cover; border-radius: var(--r-lg); background: var(--panel2); display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--muted); }
.sr-game b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
/* Back buttons (selects.js `backs`): every "← X" link is a button with a chevron */
.back-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel2); color: var(--text) !important; font-size: 13px; font-weight: 600; text-decoration: none !important; line-height: 1.2; cursor: pointer; transition: border-color .15s, background .15s; }
.back-btn:hover { border-color: var(--accent2); background: rgba(232, 116, 59, 0.12); }
.back-btn svg { flex: none; opacity: .85; }
.back-row { display: flex !important; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0 !important; margin: 4px 0 14px; }
.back-row[hidden] { display: none !important; }
.back-row > * { font-size: 14px; }
.back-row > .muted { font-size: 14px; }
.crumb-btn { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: var(--r-md); background: none; border: 1px solid transparent; color: var(--muted) !important; font-size: 13px !important; font-weight: 600; text-decoration: none !important; }
.crumb-btn:hover { color: var(--text) !important; border-color: var(--line); }
/* Watch page: Twitch style Streamer vibe + Category tag dropdowns */
.tdd-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 6px 0; }
.tdd { position: relative; }
.tdd-btn { display: inline-flex; align-items: center; gap: 10px; min-width: 200px; justify-content: space-between; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel2); color: var(--text); font-weight: 600; cursor: pointer; }
.tdd-btn:hover, .tdd.open .tdd-btn { border-color: var(--accent2); }
.tdd-btn.has { border-color: var(--accent2); background: rgba(232, 116, 59, 0.12); }
.tdd-caret { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .7; transition: transform .15s; }
.tdd.open .tdd-caret { transform: rotate(-135deg) translateY(-2px); }
.tdd-panel { position: absolute; z-index: 50; top: calc(100% + 6px); left: 0; width: 280px; max-width: calc(100vw - 24px); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); padding: 6px; }
.tdd-search { display: flex; align-items: center; gap: 6px; padding: 0 10px; height: 36px; border: 2px solid var(--accent2); border-radius: var(--r-md); background: var(--panel2); margin-bottom: 6px; }
.tdd-search::before { content: ''; width: 11px; height: 11px; border: 2px solid var(--muted); border-radius: 50%; flex: none; }
.tdd-search input { flex: 1; min-width: 0; border: 0; background: none; padding: 0; outline: none; }
.tdd-list { display: flex !important; flex-direction: column; flex-wrap: nowrap !important; gap: 0 !important; max-height: 320px; overflow-y: auto; margin: 0 !important; -webkit-mask-image: none !important; mask-image: none !important; padding: 0 !important; }
.tdd-list .mood, .whub-hero .wfrow .tdd-list .mood { display: flex !important; justify-content: space-between; width: 100%; text-align: left; padding: 8px 10px !important; border-radius: var(--r-md); font-size: 14px; color: var(--text); font-weight: 500; }
.tdd-list .mood[hidden] { display: none !important; }
.tdd-list .mood:hover { background: #ffffff12 !important; }
.tdd-list .mood.on { color: var(--text) !important; background: rgba(232, 116, 59, 0.18) !important; font-weight: 600; }
.tdd-list .mood.on::after { content: '✓'; color: var(--accent2); }
.tdd-list .mood-more { display: none !important; }
@media (max-width: 760px) { .tdd-row { flex-wrap: nowrap; } .tdd { flex: 1; min-width: 0; } .tdd-btn { min-width: 0; width: 100%; } .tdd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tdd[data-tdd=genres] .tdd-panel { left: auto; right: 0; } }

/* YouTube live members on the Watch page (rule 48): a plain text label, never a logo. */
.yt-label { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .3px; padding: 1px 6px; border-radius: var(--r-sm); background: #c4302b; color: #fff; vertical-align: 2px; }
.wadd-mode .wcard.yt { display: none; } /* Twitch watch parties can't hold YouTube streams */
.yt-offline { margin: 12px 0; }
/* Pricing: YouTube creators section (Pro / Creator Pro / Creator Bundle) */
.pr-yt { display: flex; flex-direction: column; gap: 14px; }
.pr-yt > h2, .pr-yt > p { margin: 0; text-align: center; }
.pr-plans.pr-plans3 { max-width: 1040px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }


/* posts columns can shrink on phones (no sideways scroll) */
.dev-layout > * { min-width: 0; }
.tw-actions { flex-wrap: wrap; min-width: 0; }

/* ---------- Stream etiquette badges, Surprise me options, Series tab (src/etiquette.js, src/series.js) ---------- */
.wetqs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; min-width: 0; }
.wetq, .wjoin, .whype { font-size: 12px; padding: 2px 8px; border-radius: var(--r-lg); white-space: nowrap; border: 1px solid var(--line); background: transparent; color: var(--muted); }
.wjoin { color: #9fd8ff; border-color: #2d4f66; }
.whype { color: #ffd27a; border-color: #5c4a22; }
.wetq-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; min-width: 0; }
.card-etq, .hc-etq { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.hc-etq { margin: 6px 0; }
.tdd-note { margin: 6px 8px 2px; }
.tdd-row .wrandom { margin-left: auto; }
.wsurp { position: relative; display: flex; flex: none; }
.wsurp #wSurprise { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.wsurp-opt { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 1px solid #ffffff33; padding-left: 10px; padding-right: 12px; display: inline-flex; align-items: center; }
.wsurp-opt .tdd-caret { opacity: .9; }
.wsurp-panel { position: absolute; z-index: 60; top: calc(100% + 6px); right: 0; width: 240px; max-width: calc(100vw - 32px); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); padding: 12px; display: grid; gap: 8px; }
.wsurp-panel[hidden] { display: none; }
.wsurp-panel select { width: 100%; margin-top: 4px; }
.wsurp-panel p { margin: 0; }
.sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.scard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px; min-width: 0; }
.scard-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; margin-bottom: 8px; }
.scard-h b { font-size: 16px; }
.scard-games { display: grid; gap: 6px; }
.sgame { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: var(--r-lg); background: var(--panel2); color: var(--text); text-decoration: none; min-width: 0; }
.sgame:hover { outline: 1px solid var(--accent); text-decoration: none; }
.sgame img, .sgame .gcard-ph { width: 34px; height: 45px; object-fit: cover; border-radius: var(--r-lg); flex: none; display: flex; align-items: center; justify-content: center; font-size: 11px; background: var(--panel); }
.sgame-body { display: flex; flex-direction: column; min-width: 0; }
.sgame-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wseries-note { margin: 0 0 10px; }
.gm-series { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel2); font-size: 14px; }
.etq-grid { display: grid; gap: 8px; margin: 8px 0 12px; }
.etq-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.etq-label { width: 100px; flex: none; font-weight: 600; font-size: 13px; color: var(--muted); }
.etq-row .chips-wrap { flex: 1; min-width: 0; }
.etq-flags { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 8px; margin-bottom: 12px; }
.etq-flag { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 8px 10px; white-space: normal; }
@media (max-width: 760px) {
  .tdd-row .wrandom { display: none; }
  /* three dropdowns share the row: each list opens full row width so none runs off the screen */
  .whub-hero .tdd-row { position: relative; } .whub-hero .tdd { position: static; }
  .whub-hero .tdd .tdd-panel, .whub-hero .tdd[data-tdd=genres] .tdd-panel { left: 0; right: 0; width: auto; max-width: none; }
  .etq-label { width: 100%; }
}
.etq-flag.on .muted { color: #ffffffd9; }
/* ---------- Command Center → Path to Affiliate (public/affiliate.js) ---------- */
.pa-intro { margin: -4px 0 14px; }
.pa-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.pa-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pa-card { min-width: 0; margin: 0 !important; }
.pa-card h3 { margin-bottom: 8px; }
.pa-req { padding: 8px 0; border-top: 1px solid var(--line); }
.pa-req:first-child { border-top: 0; }
.pa-req-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.pa-req-num { font-weight: 600; white-space: nowrap; }
.pa-req .event-progress { margin: 6px 0; height: 8px; }
.pa-req.met .event-progress div { background: var(--strong, #3ecf8e); }
.pa-req p { margin: 0; }
.pa-est { display: block; margin-top: 4px; font-style: italic; }
.pa-good { color: var(--strong, #3ecf8e); }
.pa-plan-line { margin: 0 0 8px; font-size: 15px; }
.pa-tip { background: var(--panel2); border-radius: var(--r-lg); padding: 8px 10px; }
.pa-stats { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.pa-list { list-style: none; margin: 0 0 10px; padding: 0; }
.pa-list li { padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.pa-list li:first-child { border-top: 0; }
.pa-check { display: flex; flex-direction: column; gap: 2px; }
.pa-anniv { display: flex; align-items: center; gap: 10px; }
.pa-anniv .grow { flex: 1; min-width: 0; }
.pa-ret { margin: 0; }
.pa-ret svg { width: 100%; height: auto; display: block; }
.pa-peak { fill: var(--accent); }
.pa-dropline { stroke: var(--muted); stroke-dasharray: 4 4; stroke-width: 1; }
.pa-net { font-size: 16px; margin: 0 0 8px; }
.pa-fbars { display: flex; align-items: center; gap: 4px; height: 70px; margin: 6px 0 8px; }
.pa-fbar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.pa-fbar i { display: block; width: 100%; min-height: 1px; }
.pa-fbar .up { background: var(--strong, #3ecf8e); border-radius: var(--r-sm) var(--r-sm) 0 0; align-self: flex-end; height: 0; }
.pa-fbar { position: relative; }
.pa-fbar .up { position: absolute; bottom: 50%; } .pa-fbar .down { position: absolute; top: 50%; background: var(--long, #e8a33d); border-radius: 0 0 var(--r-sm) var(--r-sm); }
.pa-fbars { border-top: 0; position: relative; }
.pa-locked { opacity: .92; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 760px) { .pa-grid { grid-template-columns: minmax(0, 1fr); } .pa-req-top { flex-wrap: wrap; } }
/* Phones: the stream report comes right after progress (phone first), then the rest in reading order. */
@media (max-width: 760px) {
  .pa-grid { display: flex; flex-direction: column; }
  .pa-col { display: contents; }
  #paProgress { order: 1; } #paReport { order: 2; } #paPlan { order: 3; } #paDrag { order: 4; } #paRetention { order: 5; } #paCheck { order: 6; } #paFollow { order: 7; } #paAnniv { order: 8; }
  .pa-grid > .pa-col > .pa-locked { order: 9; }
}
/* ===== Following Hub (/following, public/following.js, public/gamefollow.js, public/followhub.js) ===== */
.following .fol-hero { padding-bottom: 0; }
.fol-squads h2, .fol-games h2 { margin-top: 0; }
.fol-squad { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--line); }
.fol-squad:first-of-type { border-top: 0; }
.fol-squad .grow, .fol-person .grow, .fol-slot .grow { flex: 1; min-width: 0; }
.fol-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.fol-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: var(--r-md); padding: 3px 4px 3px 8px; font-size: 13px; max-width: 100%; }
.fol-chip a { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fol-add input { width: 100%; max-width: 420px; }
.fol-sugg, .fol-recent { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fol-rg { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 3px 4px 3px 8px; font-size: 13px; flex-wrap: wrap; max-width: 100%; }
.fol-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fol-big { display: inline-flex; gap: 6px; align-items: center; }
.fol-week-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.fol-week-top .grow { flex: 1; min-width: 0; margin: 0; }
.fol-day h3 { margin: 0 0 6px; }
.fol-slot { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.fol-slot:first-of-type { border-top: 0; }
.fol-slot.live .fol-time { color: var(--accent); }
.fol-time { width: 92px; flex: none; font-weight: 600; font-size: 14px; display: flex; flex-direction: column; }
.fol-what .muted { overflow: hidden; text-overflow: ellipsis; }
.fol-person { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.fol-person:first-child { border-top: 0; }
.fol-card { text-align: left; }
.fol-card h3 { font-size: 14px; margin: 14px 0 4px; }
.fol-actions { justify-content: flex-end; margin-top: 16px; }
.fol-reach { display: flex; align-items: center; gap: 14px; }
.fol-reach h3 { margin: 0 0 4px; }
.fol-reach-n b { font-size: 30px; color: var(--text); }
.fol-sqbtns { display: contents; }
.gf-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gcard-wrap { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gcard-wrap .gfollow { width: 100%; }
.gfollow.on, [data-gfollow].on { color: var(--accent); border-color: var(--accent); }
@media (max-width: 600px) {
  .fol-slot { flex-wrap: wrap; }
  .fol-squad .grow { flex-basis: 100%; }
  .fol-time { width: auto; flex-direction: row; gap: 4px; }
}
/* ---------- Raid tools (public/raids.js): raid status, drop ins, raid pool, marks on raid targets, ledger ---------- */
.rk-panel { display: grid; gap: 8px; min-width: 0; }
.rk-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rk-head h3 { margin: 0; }
.rk-seg { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; width: max-content; max-width: 100%; }
.rk-seg button { background: none; border: 0; border-right: 1px solid var(--line); color: var(--muted); padding: 7px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.rk-seg button:last-child { border-right: 0; }
.rk-seg button.on { background: var(--accent2); color: var(--on-accent); }
.rk-line, .rk-panel p { margin: 0; }
.rk-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.rk-row .check-row { padding: 6px 10px; }
.rk-note { flex: 1 1 180px; min-width: 0; }
.rk-hiline { color: var(--text); }
.rk-drops h4 { margin: 6px 0; }
.rk-drop, .rk-lrow { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); min-width: 0; }
.rk-drop .grow, .rk-lrow .grow { min-width: 0; overflow-wrap: anywhere; }
.rk-marks { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; min-width: 0; }
.rk-chip { font-size: 12px; padding: 2px 8px; border-radius: var(--r-md); background: var(--panel2); color: var(--text); border: 1px solid var(--line); white-space: nowrap; }
.rk-chip.warn { background: #f0b42922; border-color: #f0b42966; color: var(--long); }
.rk-chip.ok { background: #2ecc7118; border-color: #2ecc7155; color: var(--strong); }
.rk-chip.est { color: var(--muted); }
.rk-closed { opacity: .65; }
.rk-closed button[disabled] { cursor: not-allowed; }
.rk-hi { position: fixed; left: 16px; bottom: 16px; z-index: 60; display: flex; align-items: center; gap: 10px; max-width: min(420px, calc(100vw - 32px));
  background: var(--panel); border: 1px solid var(--accent); border-radius: var(--r-lg); padding: 10px 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.rk-modal { text-align: left; }
.rk-pickcard { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-lg); margin: 8px 0; min-width: 0; }
.rk-pickcard .grow { min-width: 0; }
.rk-center { justify-content: flex-start; flex-wrap: wrap; }
.rk-ledger h3 { margin-top: 0; }
.rk-ledger-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.rk-teaser { padding: 8px 10px; border: 1px dashed var(--line); border-radius: var(--r-lg); color: var(--muted); }
.hw-rk { margin-top: 6px; }
.rk-chat { background: #3a2a14; color: #ffd9a0; }
@media (max-width: 760px) {
  .rk-ledger-cols { grid-template-columns: minmax(0, 1fr); }
  .rk-hi { bottom: 76px; left: 12px; right: 12px; max-width: none; }
  .rk-seg { width: 100%; }
  .rk-seg button { flex: 1 1 auto; }
  .rk-chip { white-space: normal; }
}
/* ---------- Public beta (src/beta.js, public/beta.js) ---------- */
body.beta-free .pro-tag::after { content: ' · free during beta'; text-transform: none; font-weight: 600; letter-spacing: 0; opacity: .85; }
.pill.plan-beta { white-space: nowrap; }
@media (max-width: 760px) { body.beta-free .pill.plan-beta { display: none; } }
.pro-beta { align-self: flex-start; font-size: 12px; font-weight: 600; color: var(--strong); background: #2ecc7118; border: 1px solid #2ecc7144; border-radius: var(--r-sm); padding: 2px 8px; }
.pr-beta { display: flex; gap: 14px; align-items: flex-start; max-width: 860px; margin: 22px auto 0; padding: 16px 18px; border-radius: var(--r-lg); background: #2ecc7112; border: 1px solid #2ecc7144; text-align: left; min-width: 0; }
.pr-beta > div { min-width: 0; }
.pr-beta h2 { margin: 0 0 6px; font-size: 19px; }
.pr-beta p { margin: 0; }
.pr-beta-tag { flex: none; font-size: 11px; font-weight: 600; color: var(--strong); border: 1px solid #2ecc7166; border-radius: var(--r-sm); padding: 3px 8px; }
@media (max-width: 560px) { .pr-beta { flex-direction: column; gap: 8px; } }
.founding-badge { display: inline-block; font-size: 12px; font-weight: 600; color: var(--long); background: #f0b42918; border: 1px solid #f0b42955; border-radius: var(--r-sm); padding: 3px 10px; }
.card-badges .founding-badge { font-size: 13px; padding: 4px 12px; background: #f0b42918; border-color: #f0b42955; color: var(--long); }
.founding-box { margin: 10px 0; padding: 10px 12px; border: 1px solid #f0b42944; border-radius: var(--r-lg); background: #f0b4290d; }
.founding-box p { margin: 6px 0 0; }
/* Calm mode: hide your own viewer counts, show the calm notes instead. */
[data-calm-alt] { display: none; }
body.calm [data-viewers] { display: none !important; }
body.calm [data-calm-alt] { display: block; }
body.calm span[data-calm-alt] { display: inline; }
.calm-opts { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 6px 0; }
.calm-opt { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.pace-card { border-color: #4aa8ff55; background: #4aa8ff0d; }
.pace-card h3 { margin-top: 0; }
.ms-note { margin: 4px 0 0; }
.wadd-bar .ms-note { display: block; }
.wbest-how { flex-basis: 100%; min-width: 0; }
.wbest-how summary { cursor: pointer; color: var(--muted); width: fit-content; }
.wbest-how p { margin: 4px 0 0; color: var(--muted); max-width: 640px; }
/* Changelog and promise pages */
.cl-entry { margin: 26px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.cl-entry h2 { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 20px; margin: 0 0 6px; }
.cl-entry h2 time { font-size: 13px; color: var(--muted); font-weight: 600; }
.cl-ask { padding: 10px 14px; border-radius: var(--r-lg); background: var(--panel2); border: 1px solid var(--line); }
.pm-block { margin: 22px 0 0; }
.pm-block h2 { font-size: 20px; margin: 0 0 6px; }
.pm-note { padding: 12px 14px; border-radius: var(--r-lg); background: var(--panel2); border: 1px solid var(--line); }
.cl-page, .promise-page { overflow-wrap: anywhere; }
#calmSettings .calm-opts label.calm-opt { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; color: var(--text); font-size: 14px; }
/* ===== Extras (owner, Nov 2026): Clip Vault, Streamerversary, Mod hub, VOD views, channel points, talk prompts, VOD spot checks ===== */
.vault { min-width: 0; }
.vault.loading { opacity: .6; }
.vault-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; min-width: 0; }
.vault-bar .ss-wrap, .vault-bar select { width: auto; min-width: 92px; max-width: 120px; }
.vault-search { display: flex; gap: 6px; flex: 1 1 220px; min-width: 0; }
.vault-search input { flex: 1; min-width: 0; }
.vault-months { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.vault-mo { background: none; border: 1px solid var(--line); color: var(--muted); border-radius: var(--r-lg); padding: 4px 9px; font-weight: 600; font-size: 13px; cursor: pointer; }
.vault-mo.on { color: var(--accent2, #e8743b); border-color: var(--accent2, #e8743b); }
.vault-mo:disabled { opacity: .35; cursor: default; }
.vault-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 10px; min-width: 0; }
.vault-clip { display: flex; flex-direction: column; gap: 3px; text-align: left; background: var(--panel2, #1e1e22); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 6px; color: var(--text); cursor: pointer; min-width: 0; }
.vault-clip.on, .vault-clip:hover { border-color: var(--accent2, #e8743b); }
.vault-th { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: var(--panel2); }
.vault-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vault-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 12px; font-weight: 600; }
.vault-dur { position: absolute; right: 4px; bottom: 4px; background: #000b; color: #fff; font-size: 11px; padding: 1px 5px; border-radius: var(--r-sm); }
.vault-t { font-size: 13px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vault-player { margin: 6px 0 12px; max-width: 760px; }
.vault-pinfo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; }
.vault-pinfo b { flex: 1 1 100%; }
.vault-demo { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; text-align: center; color: #ddd; padding: 12px; background: var(--panel2); }
.vault-page { max-width: 1100px; margin: 0 auto; padding: 16px; min-width: 0; }
.vault-otd .otd-year { margin-bottom: 10px; }
.otd-row { margin-bottom: 8px; }
.otd-clip { display: flex; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.otd-clip .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-kicker { font-weight: 600; font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.sv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 110px), 1fr)); gap: 8px; margin: 14px 0 6px; }
.sv-stats div { background: var(--panel2, #1e1e22); border-radius: var(--r-lg); padding: 8px; display: flex; flex-direction: column; min-width: 0; }
.sv-stats b { font-size: 20px; } .sv-stats .sv-game { font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.sv-h { font-size: 18px; margin: 18px 0 2px; }
.sv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; margin: 10px 0 16px; text-align: left; }
.sv-month { display: flex; flex-direction: column; gap: 2px; background: var(--panel2, #1e1e22); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 6px; color: var(--text); text-decoration: none; min-width: 0; }
.sv-month.empty { opacity: .6; }
.sv-th { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: var(--panel2); }
.sv-th img { width: 100%; height: 100%; object-fit: cover; }
.sv-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.sv-m { font-size: 12px; color: var(--muted); font-weight: 600; }
.sv-t { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-card { max-width: 820px; }
.vod-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.vod-row .grow { min-width: 0; }
.vod-row b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spark { color: var(--accent2, #e8743b); flex: none; }
.xg-tabs { display: flex; gap: 4px; margin-bottom: 6px; }
.cp-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.cp-row .grow { min-width: 0; }
.modhub-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.modhub-row .grow { min-width: 0; flex: 1 1 220px; }
.modhub-row.live b { color: var(--text); }
.modhub-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-moods { display: flex; flex-wrap: wrap; gap: 2px 4px; margin-bottom: 6px; }
.tp-mood { background: none; border: 0; color: var(--muted); font-weight: 600; font-size: 13px; padding: 3px 6px; border-radius: var(--r-md); cursor: pointer; }
.tp-mood.on { color: var(--accent2, #e8743b); }
.tp-card { background: var(--panel2, #1e1e22); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 14px; min-height: 92px; }
.tp-text { font-size: 17px; line-height: 1.4; margin: 4px 0 0; }
.tp-btns { margin-top: 8px; flex-wrap: wrap; }
.fbf-vod { background: var(--panel2, #1e1e22); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 8px 10px; margin: 6px 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.fbf-vodreply { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.fbf-vodreply input { width: 100%; min-width: 0; }

/* ---------- Themed form controls everywhere (checkboxes, radios, file pickers) ---------- */
input[type=checkbox], input[type=radio] {
  -webkit-appearance: none; appearance: none; flex: 0 0 18px !important; margin: 0; padding: 0;
  width: 18px !important; height: 18px !important; min-width: 18px; max-width: 18px;
  display: inline-grid; place-content: center; vertical-align: middle; cursor: pointer;
  background: var(--bg); border: 1.5px solid #4a4a5a; border-radius: var(--r-md);
  transition: background .12s, border-color .12s, box-shadow .12s;
}
input[type=radio] { border-radius: 50%; }
input[type=checkbox]::before {
  content: ''; width: 10px; height: 10px; transform: scale(0); transition: transform .12s;
  background: var(--on-accent); clip-path: polygon(14% 44%, 0 59%, 40% 100%, 100% 22%, 86% 8%, 39% 72%);
}
input[type=radio]::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--on-accent); transform: scale(0); transition: transform .12s; }
input[type=checkbox]:checked, input[type=radio]:checked { background: var(--accent2); border-color: var(--accent2); }
input[type=checkbox]:checked::before, input[type=radio]:checked::before { transform: scale(1); }
input[type=checkbox]:indeterminate { background: var(--accent2); border-color: var(--accent2); }
input[type=checkbox]:indeterminate::before { clip-path: none; height: 2px; transform: scale(1); }
input[type=checkbox]:hover:not(:disabled), input[type=radio]:hover:not(:disabled) { border-color: var(--accent); }
input[type=checkbox]:focus, input[type=radio]:focus { outline: none; }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { box-shadow: 0 0 0 3px rgba(232, 116, 59, 0.33); }
input[type=checkbox]:disabled, input[type=radio]:disabled { opacity: .45; cursor: not-allowed; }
label.switch input, .switch input { display: none !important; }
/* rows with a checkbox: tidy, left aligned, highlighted when ticked */
.check-row { justify-content: flex-start; text-align: left; background: var(--panel); transition: border-color .12s, background .12s; }
.check-row:hover { border-color: #4a4a5a; }
.check-row:has(input:checked) { border-color: var(--accent2); background: rgba(232, 116, 59, 0.11); }
.check-row:has(input:disabled) { cursor: not-allowed; }
.fbf-attach .check-row { width: auto; max-width: 100%; }
/* file pickers */
input[type=file] { max-width: 100%; padding: 6px; font-size: 13px; color: var(--muted); background: var(--panel); border: 1px dashed #4a4a5a; border-radius: var(--r-md); cursor: pointer; }
input[type=file]:hover { border-color: var(--accent); }
input[type=file]::file-selector-button { margin-right: 10px; padding: 6px 12px; border: 0; border-radius: var(--r-md); background: var(--accent2); color: var(--on-accent); font: inherit; font-weight: 600; cursor: pointer; }
input[type=file]::file-selector-button:hover { background: var(--accent-hover); }

/* Invite friends window: search + highlighted picks */
.wpi-search { width: 100%; margin: 4px 0 8px; }
.wpi-row { border: 1px solid transparent; transition: background .12s, border-color .12s; }
.wpi-row:has(input:checked:not(:disabled)) { background: rgba(232, 116, 59, 0.11); border-color: var(--accent2); }
.wpi-row:has(input:disabled) { opacity: .65; cursor: default; }
.wpi-empty { padding: 8px; }

/* Streamers / Following / Games / Consoles / Series bar: Following is a link (its own page), the rest are tabs on /watch */
.wtabs .wtab-link { color: var(--muted); padding: 10px 16px; font-weight: 600; text-decoration: none; white-space: nowrap; box-shadow: inset 0 -2px 0 transparent; }
.wtabs .wtab-link:hover { color: var(--text); }
.wtabs .wtab-link.on { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.whub-top .wtabs .wtab-link { padding: 7px 14px; border-radius: var(--r-md); box-shadow: none; }
.whub-top .wtabs .wtab-link.on { background: var(--panel2); box-shadow: none; }
.whub-top .wtabs button { white-space: nowrap; }
.following .whub-top { margin-bottom: 8px; }
@media (max-width: 760px) {
  .whub-top .wtabs { overflow-x: auto; scrollbar-width: none; }
  .whub-top .wtabs::-webkit-scrollbar { display: none; }
  .whub-top .wtabs button, .whub-top .wtabs .wtab-link { flex: 1 0 auto; text-align: center; padding: 6px 10px; font-size: 14px; }
}

/* Raids box, slim version: one row + a "More raid options" fold */
.rk-compact { gap: 6px; }
.rk-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.rk-bar h3 { margin: 0 4px 0 0; font-size: 16px; }
.rk-bar .rk-seg button { padding: 6px 11px; }
.rk-bar .check-row { padding: 5px 10px; }
.rk-spacer { flex: 1 1 0; }
.rk-more summary { cursor: pointer; color: var(--muted); width: max-content; list-style: none; }
.rk-more summary::-webkit-details-marker { display: none; }
.rk-more summary::after { content: ' +'; }
.rk-more[open] summary::after { content: ' −'; }
.rk-more[open] { display: grid; gap: 8px; }
.rk-more p { margin: 0; }
@media (max-width: 600px) { .rk-spacer { display: none; } .rk-bar .btn { width: 100%; } }

/* Sidebar count badges: one size, always right aligned (Friends sits just left of its arrow, the top links at the edge) */
.wside .snav-head .wrail-count, .snav-homelink .snav-hl .wrail-count { position: static; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-md); font-size: 11px; line-height: 1; }
.wside .snav-head .wrail-count + .snav-chev { margin-left: 6px; }
.wside .snav-head .snav-label + .snav-chev { margin-left: auto; }
.snav-homelink a { display: flex; width: 100%; box-sizing: border-box; }
.snav-homelink .snav-hl { flex: 1; min-width: 0; padding-right: 22px; }
.wlayout.collapsed .snav-homelink .snav-hl { padding-right: 0; }
.wlayout.collapsed .wside .snav-head .wrail-count, .wlayout.collapsed .snav-homelink .snav-hl .wrail-count { position: absolute; top: 2px; right: 2px; margin: 0; font-size: 10px; min-width: 17px; height: 17px; }
/* Squad page tabs (owner, Nov 2026): Feed first, then Live now / Calendar / Watch parties / About, same look as the Neighborhood. */
#sub-squadpage .sq-tabs { margin: 0 0 12px; }
#sub-squadpage .sq-tabs button { white-space: nowrap; }
#sub-squadpage .sq-pane { min-width: 0; }
#sub-squadpage .sq-open-note { margin: 0 0 8px; }
#sub-squadpage .sq-cal .nb-cal-head h2 { margin: 0; font-size: 18px; }
#sub-squadpage .sq-parties h2 { margin-top: 0; }

/* Clip Vault tab in the Command Center */
.cv-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; }
.cv-head .tab-title { margin: 0; }
#tab-clips > .muted { margin: 4px 0 12px; }
/* Neighborhood page: two columns under the hero, like the squad page (public/neighborhoods.js; Raids box from raids.js) */
.nb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; margin-top: 4px; }
.nb-main, .nb-side { min-width: 0; }
.nb-side { position: sticky; top: 76px; display: grid; gap: 12px; max-height: calc(100vh - 92px); overflow-y: auto; scrollbar-width: thin; padding-top: 14px; }
.nb-sbox { margin: 0; padding: 14px; display: grid; gap: 8px; min-width: 0; }
.nb-sbox h3, .nb-sbox h4 { margin: 0; font-size: 15px; }
.nb-sbox p { margin: 0; }
.nb-sbox-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.nb-side-faces { display: flex; flex-wrap: wrap; gap: 4px; }
.nb-side-face { display: inline-block; border-radius: 50%; line-height: 0; }
.nb-side-face.is-live { box-shadow: 0 0 0 2px #e5534b; }
.nb-side-all { justify-self: start; }
.nb-side-up { padding: 7px 0 0; border-top: 1px solid var(--line); min-width: 0; overflow-wrap: anywhere; }
.nb-side-btns { display: flex; gap: 6px; flex-wrap: wrap; }
/* the Raids box squeezed into the side column */
.nb-side .rk-bar { gap: 8px; }
.nb-side .rk-bar h3 { flex: 1 0 100%; }
.nb-side .rk-seg { width: 100%; }
.nb-side .rk-seg button { flex: 1 1 auto; padding: 6px 6px; font-size: 12.5px; }
.nb-side .rk-spacer { display: none; }
.nb-side .rk-bar .btn { width: 100%; }
.nb-side .rk-drop .btn { flex: none; }
/* Live now: Raid status dropdown + count */
.nb-live-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; min-width: 0; }
.nb-live-bar .tdd-panel { width: 240px; }
#nbLiveEmpty { margin-top: 12px; display: grid; gap: 10px; justify-items: center; }
#nbLiveEmpty[hidden] { display: none; }
#nbLiveEmpty p { margin: 0; }
@media (max-width: 980px) {
  .nb-layout { grid-template-columns: minmax(0, 1fr); }
  .nb-side { position: static; max-height: none; overflow: visible; padding-top: 0; }
}
@media (max-width: 760px) { .nb-live-bar .tdd { flex: 1 1 auto; min-width: 0; } .nb-live-bar .tdd-btn { width: 100%; min-width: 0; } }
.nb-side > .card-box { margin: 0; }
.nb-layout .nb-tabs { gap: 0; }
.nb-layout .nb-tabs button { padding: 10px 9px; font-size: 14px; }
.nb-live-grid > .card-box + .card-box { margin-top: 0; }
/* ---------- header icons: Messages, bell, points chip, plan pill (one family, owner Nov 2026) ----------
   Same 36px square buttons, 7px corners, muted line SVG icons (stroke 1.7, like the sidebar), one badge style. */
header.top .who { gap: 6px; }
header.top .hdr-ico { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--r-md); background: none; color: color-mix(in srgb, var(--text) 78%, var(--muted)); font-size: 0; cursor: pointer; transition: background .12s, color .12s; }
header.top .hdr-ico svg { width: 20px; height: 20px; display: block; }
header.top .hdr-ico:hover, header.top .hdr-ico[aria-expanded="true"], header.top .bell-wrap:has(.bell-panel:not([hidden])) .hdr-ico { background: var(--panel2); color: var(--text); }
header.top .hdr-ico:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
header.top .hdr-ico .count { position: absolute; top: 1px; right: -3px; left: auto; margin: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: var(--none); color: #fff; font-size: 10px; font-weight: 600; line-height: 16px; box-shadow: 0 0 0 2px var(--panel); }
header.top .hdr-chip { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: var(--r-md); background: none; color: var(--muted); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
header.top .hdr-chip svg { flex: none; }
header.top #planBadge { box-sizing: border-box; height: 30px; line-height: 28px; vertical-align: middle; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: none; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; }
header.top #planBadge.pro { color: var(--text); }
header.top #planBadge.pro-tag::after { color: var(--muted); font-weight: 500; opacity: 1; }
@media (max-width: 760px) { header.top .hdr-ico { width: 34px; height: 34px; } }

/* Clip Vault downloads */
.vault-dlmsg { margin: 6px 0 0; color: var(--muted); }
.vault-dlmsg a { margin-left: 4px; }

/* Sidebar top links: icons never squash (long names + a count badge), My profile uses your avatar bubble */
.snav-hl > svg { flex: none; }
.snav-me { flex: none; width: 18px; height: 18px; border-radius: 50%; object-fit: cover; display: inline-grid; place-items: center; background: var(--accent2); color: var(--on-accent); font-size: 10px; font-weight: 600; line-height: 1; }
.wlayout.collapsed .snav-homelink .snav-hl .snav-me { width: 20px; height: 20px; font-size: 11px; }
/* Live for you (Home feed right column, public/homelive.js). The player is the official Twitch embed and must be at
   least 400x300 (rule 32), so the right column widens on wide screens; below that it's a thumbnail + Play / Watch. */
@media (min-width: 1100px) { .forum-wrap:has(#fsLive) { grid-template-columns: minmax(0, 1fr) 460px; } #fsLive { padding-left: 10px; padding-right: 10px; } }
.fs-live .fsl-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fs-live .fsl-head h3 { margin: 0; }
.fs-live .fsl-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 8px 0; min-width: 0; }
.fs-live .fsl-meta > * { min-width: 0; overflow-wrap: anywhere; }
.fsl-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: var(--panel2); }
.fsl-stage.on { min-height: 300px; background: #000; }
.fsl-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.fsl-stage .fsl-fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 10px; color: var(--muted); font-weight: 600; text-align: center; }
.fsl-stage .fsl-img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.fsl-stage .fsl-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; }
.fs-live .fsl-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; }
.fs-live .fsl-foot > span { min-width: 0; flex: 1 1 140px; }
.fs-live .fsl-how { margin: 8px 0 0; }
.fs-live-more h3 { margin-top: 0; }
.fsl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fsl-card { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--text); text-decoration: none; }
.fsl-card b, .fsl-card .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fsl-cthumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: var(--panel2); margin-bottom: 4px; }
.fsl-cthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fsl-badge { position: absolute; left: 5px; bottom: 5px; padding: 1px 6px; border-radius: var(--r-sm); background: rgba(0, 0, 0, .7); color: #fff; font-size: 11px; font-weight: 600; }
.fsl-card:hover b { color: var(--accent); }
/* Go live plan: search your own games for today's game (public/growth.js glSearchHtml; Pro, free sees a teaser) */
.gl-search { position: relative; margin-top: 10px; max-width: 560px; min-width: 0; }
.gl-search-box { display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel2); color: var(--muted); min-width: 0; }
.gl-search-box:focus-within { border-color: var(--accent2, #e8743b); }
.gl-search-box svg { flex: none; }
.gl-search-box input { flex: 1 1 auto; min-width: 0; width: 100%; border: 0; background: none; padding: 10px 0; outline: none; }
.gl-search.locked .gl-search-box { opacity: .6; }
.gl-search-note { margin: 6px 0 0; }
.gl-sugg { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50; max-height: 340px; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); padding: 6px; }
.gl-sopt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 6px 8px; border: 0; border-radius: var(--r-md); background: none; font-weight: 400; min-width: 0; }
.gl-sopt:hover, .gl-sopt.act { background: #ffffff0d; }
.gl-sopt img, .gl-sopt .art { width: 30px; height: 40px; border-radius: var(--r-md); object-fit: cover; flex: none; display: grid; place-items: center; background: #ffffff0a; font-size: 11px; }
.gl-sopt .grow { display: flex; flex-direction: column; min-width: 0; }
.gl-sopt .grow b, .gl-sopt .grow span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-snone { margin: 6px 8px; }
.gl-pick-txt { min-width: 0; }
.gl-pick.searched { border-style: dashed; }
.gl-pick.searched.on { border-style: solid; }
#scHero .sc-hero { margin-bottom: 4px; }
@media (max-width: 760px) { .gl-search-box input { font-size: 16px; } .gl-sugg { max-height: 50vh; } }
/* Pinned posts in a squad / neighborhood feed (src/pins.js) + the post card "..." menu */
.tw-post.pinned .tw-pinned { color: var(--accent2); }
.tw-pinned svg { transform: rotate(35deg); }
.tw-menu { position: relative; flex: none; }
.tw-menu-list { position: absolute; right: 0; bottom: calc(100% + 4px); z-index: 30; min-width: 190px; max-width: calc(100vw - 32px); padding: 4px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.tw-menu-list button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--r-md); background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.tw-menu-list button:hover, .tw-menu-list button:focus-visible { background: var(--panel2); }
.tw-menu-list svg { width: 16px; height: 16px; flex: none; }

/* Gallery (#gallery, public/gallery.js) */
.gal-head { margin-bottom: 14px; }
.gal-head p { margin: 4px 0 10px; }
.gal-form { display: flex; gap: 8px; max-width: 620px; }
.gal-form .btn { flex: none; }
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.gal-tile { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--panel); color: var(--text); text-decoration: none; }
.gal-tile:hover, .gal-tile:focus-visible { border-color: var(--accent2); }
.gal-img { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--panel2); }
.gal-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gal-more { position: absolute; right: 6px; bottom: 6px; padding: 1px 7px; border-radius: var(--r-lg); background: rgba(0, 0, 0, .65); color: #fff; font-size: 12px; font-weight: 600; }
.gal-cap { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; min-width: 0; }
.gal-cap b { font-size: 14px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.gal-cap .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gal-empty { text-align: center; padding: 32px 16px; }
.gal-empty p { max-width: 460px; margin: 6px auto 12px; }
.gal-morebtn { display: block; margin: 16px auto 0; }
@media (max-width: 760px) { .gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .gal-cap { padding: 6px 8px 8px; } }

/* Home feed Trending tab: hashtag chips above the posts */
.ftrend { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; min-width: 0; }
.ftrend .sr-tag { cursor: pointer; font: inherit; }
.ftrend .sr-tag.on { border-color: var(--accent2); background: rgba(232, 116, 59, 0.11); }

/* Home feed (owner, Nov 2026): the post box sticks to the top of the feed while you scroll, and the right column scrolls
   on its own when your mouse is over it. Desktop only; phones keep one normal scroll. */
@media (min-width: 1000px) {
  #forumWrap #forumHome > .fcompose { position: sticky; top: var(--hdr-h, 56px); z-index: 4; }
  #forumWrap #forumHome > .fcompose textarea { min-height: 38px; }
  #forumWrap .forum-side { position: sticky; top: calc(var(--hdr-h, 56px) + 8px); max-height: calc(100vh - var(--hdr-h, 56px) - 16px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 4px; }
  #forumWrap .forum-side::-webkit-scrollbar { width: 6px; }
  #forumWrap .forum-side::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-sm); }
}

.fs-live .fsl-nav { display: inline-flex; gap: 6px; }

/* Scrollbars themed site wide (owner, Nov 2026): thin, dark, purple on hover. Elements that hide theirs keep doing so. */
html { scrollbar-color: #3a3a4a var(--bg); }
* { scrollbar-width: thin; scrollbar-color: #3a3a4a transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background-color: #3a3a4a; border-radius: var(--r-lg); border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background-color: var(--accent2); }
*::-webkit-scrollbar-corner { background: transparent; }

/* The Home feed pattern everywhere (owner: "do this for the rest of the website"): post boxes stick flush under the
   header while the feed scrolls, and side columns scroll on their own when the mouse is over them. Desktop only. */
@media (min-width: 1000px) {
  [data-forum] > .fcompose, .pf-compose { position: sticky; top: var(--hdr-h, 56px); z-index: 4; }
  .pf-compose { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px; }
  /* only once it is actually stuck (public/sidebar.js adds .is-stuck): shadow + a strip that hides posts sliding above it */
  .fcompose.is-stuck, .pf-compose.is-stuck { box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
  .fcompose.is-stuck::before, .pf-compose.is-stuck::before { content: ''; position: absolute; left: -2px; right: -2px; bottom: 100%; height: 60px; background: var(--bg); pointer-events: none; }
  .sp-side, .card-side, .nb-side { position: sticky; top: calc(var(--hdr-h, 56px) + 8px); max-height: calc(100vh - var(--hdr-h, 56px) - 16px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding-right: 4px; }
}
/* ---------- profile widgets (/u/<login>, src/profilelayout.js + public/profilelayout.js) ---------- */
.pw-col { min-width: 0; }
.pw-main { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; margin: 16px 0 12px; }
.pw-main > .pw { grid-column: 1 / -1; min-width: 0; }
.pw-main > .pw.pw-half { grid-column: auto; }
.pw-main > .pw { display: flex; flex-direction: column; }
.pw-main > .pw > .card-box { margin: 0; flex: 1 1 auto; }
.pw-side > .pw { min-width: 0; }
.pw-side > .pw > .card-box + .card-box { margin-top: 14px; }
.pw-side .card-stats b { font-size: 20px; }
.pw-bare > * + * { margin-top: 10px; }
.pw-about .card-bio { margin: 0 0 12px; }
.pw-about .card-tags { margin-bottom: 10px; }
.pw-sub { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.pw-empty { display: none; }
.card-page:not(.pw-editing) .pw-side[data-empty="1"] { display: none; }
.card-page:not(.pw-editing).has-side:has(.pw-side[data-empty="1"]) .card-layout { grid-template-columns: minmax(0, 1fr); }
.card-sub .founding-badge { font-size: 12px; }
/* Gallery fallback: sample tiles until the gallery script fills it */
.pw-samples { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 96px), 1fr)); gap: 6px; margin-bottom: 8px; }
.pw-sample { aspect-ratio: 1; border-radius: var(--r-lg); position: relative; overflow: hidden; }
.pw-sample span { position: absolute; left: 6px; bottom: 6px; font-size: 11px; font-weight: 600; color: #ffffffcc; background: #0006; border-radius: var(--r-lg); padding: 1px 6px; }
.pw-side .pw-samples { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* edit mode ("Customize page" on your own profile) */
.pw-bar { margin: 14px 0 4px; padding: 12px; border: 1px solid var(--accent); border-radius: var(--r-lg); background: var(--panel2); position: sticky; top: 64px; z-index: 5; }
.pw-bar-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pw-bar-row .spacer { flex: 1; }
.pw-add { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.pw-sub-h { font-size: 12px; font-weight: 600; color: var(--muted); margin-right: 4px; }
.pw-note { margin: 8px 0 0; }
.pw-editing .pw-empty { display: block; }
.pw-editing .pw { outline: 1px dashed var(--line); outline-offset: 3px; border-radius: var(--r-lg); cursor: grab; }
.pw-editing .pw.dragging { opacity: .45; }
.pw-editing .pw-ph { opacity: .75; border-style: dashed; }
.pw-editing .pw-side { min-height: 160px; border: 1px dashed var(--line); border-radius: var(--r-lg); padding: 8px; position: static; }
.pw-editing .pw-side[data-empty="1"]::before { content: 'Side column: move widgets here'; color: var(--muted); font-size: 13px; }
.pw-editing .pw-main { min-height: 120px; }
.pw-editing .pw-main > .pw.pw-half { grid-column: 1 / -1; }
.pw-editing iframe { pointer-events: none; }
.pw-tools { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.pw-tools .spacer { flex: 1; }
.pw-name { font-size: 12px; font-weight: 600; color: var(--text); }
@media (max-width: 760px) {
  .pw-bar { position: static; }
}
.card-side.pw-side { position: static; }
.pw-editing .shine { display: none; }
/* ---------- Image posts (public/images.js, src/images.js; gated by uploadsEnabled) ---------- */
.tw-imgbtn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: transparent; color: var(--accent); font-weight: 600; font-size: 13px; cursor: pointer; }
.tw-imgbtn:hover { border-color: var(--accent2); background: var(--panel2); }
.img-tray { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 8px; margin: 8px 0; }
.img-pend { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.img-pend img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); border: 1px solid var(--line); display: block; }
.img-pend.busy img { opacity: .5; }
.img-busy { position: absolute; left: 6px; top: 6px; padding: 1px 6px; border-radius: var(--r-lg); background: rgba(0, 0, 0, .7); color: #fff; font-size: 12px; }
.img-x { position: absolute; right: 4px; top: 4px; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .7); color: #fff; font-size: 16px; line-height: 26px; cursor: pointer; }
.img-alt { width: 100%; min-width: 0; font-size: 12px; padding: 4px 6px; }
.tw-media a[data-lb] { display: block; min-width: 0; cursor: zoom-in; }
.lb { position: fixed; inset: 0; z-index: 1000; background: rgba(5, 5, 10, .9); display: flex; align-items: center; justify-content: center; padding: 16px; }
.lb-inner { position: relative; display: flex; flex-direction: column; gap: 10px; max-width: min(1100px, 100%); max-height: 100%; min-width: 0; }
.lb-img { max-width: 100%; max-height: calc(100vh - 120px); object-fit: contain; border-radius: var(--r-lg); display: block; margin: 0 auto; background: var(--panel2); }
.lb-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: #fff; }
.lb-alt { min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.lb-nav { position: absolute; top: calc(50% - 40px); width: 40px; height: 56px; border: 0; border-radius: var(--r-md); background: rgba(0, 0, 0, .55); color: #fff; font-size: 28px; cursor: pointer; }
.lb-nav.prev { left: 6px; } .lb-nav.next { right: 6px; }
.gal-box { min-width: 0; }
.gal-search { position: relative; display: flex; align-items: center; margin-bottom: 10px; }
.gal-search .gal-sic { position: absolute; left: 10px; color: var(--muted); display: flex; }
.gal-search input { width: 100%; min-width: 0; padding-left: 36px; }
.gal-note { margin: 0 0 10px; }
.gal-sample { cursor: default; }
.gal-sample:hover { border-color: var(--line); }
.gal-badge { position: absolute; left: 6px; top: 6px; padding: 1px 7px; border-radius: var(--r-sm); background: rgba(0, 0, 0, .7); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.gal-more-btn { display: block; margin: 14px auto 0; }
.sq-pane[data-sq-pane="gallery"] { min-width: 0; }
.mod-img { display: block; max-width: min(320px, 100%); max-height: 240px; object-fit: contain; border-radius: var(--r-lg); border: 1px solid var(--line); margin: 6px 0; }
.pf-compose-row .tw-imgbtn { order: -1; } /* drawn first, but after Post in the markup so "the first button" stays Post */

/* Profile Customize page: the whole widget drags (grab cursor), Top / Bottom buttons next to the arrows */
.pw-editing .pw-col > .pw[draggable="true"] { cursor: grab; user-select: none; }
.pw-editing .pw-col > .pw.dragging { cursor: grabbing; opacity: .55; }
.pw-tools .pw-grip { color: var(--muted); margin-right: 6px; font-size: 14px; line-height: 1; }

/* Following page, look of /watch (owner, Nov 2026): same hero, slim view row, Watch page cards, multistream picker */
.following .whub-top { margin-bottom: 0; }
.fol-views { margin: 0 0 4px; }
.fol-views .wpreset.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.fol-count { margin: 4px 0 10px; font-size: 20px; }
.fol-sqline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 14px 0 2px; min-width: 0; }
.fol-sq { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.fol-sqmore { margin: 6px 0 0; }
.fol-games { margin-top: 18px; }
#fPickBtn { flex: none; }
.fpick-mode main { padding-bottom: 110px; }
.wcard.fpick-card { cursor: pointer; }
.wcard.fpick-card .wthumb::after { content: '+ Pick'; position: absolute; right: 6px; top: 6px; padding: 3px 8px; border-radius: var(--r-md); background: var(--accent2); color: var(--on-accent); font-size: 12px; font-weight: 600; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.wcard.fpick-card.fpicked { outline: 2px solid var(--accent2); outline-offset: 2px; }
.wcard.fpick-card.fpicked .wthumb::after { content: attr(data-pickn); background: #0f0f11d9; color: var(--accent); }
.wcard.fpick-card.fpick-full:not(.fpicked) .wthumb::after { content: 'Full'; background: #0f0f11d9; color: var(--muted); }
.fpick-mode .wcard.yt { opacity: .4; }
.fpick-bar #fPickCancel, .fpick-bar #fPickGo { flex: none; }
@media (max-width: 760px) {
  .whub-hero .fol-search #fPickBtn { width: auto; padding: 8px 12px; font-size: 14px; }
  .fol-views { margin-top: 2px; }
  .fol-views .wpresets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
  .fol-views .wpresets::-webkit-scrollbar { display: none; }
  .fol-views .wpreset { flex: none; }
  .fol-views #fViewNote { display: none; }
  .fpick-bar .ms-note { display: none; }
}

/* ---------- Growth loop (src/growthloop.js, public/growthloop.js): Partner badge, squad unlock, What's new, install tip ---------- */
.partner-badge { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; font-size: 12px; font-weight: 600; line-height: 1; color: var(--on-accent); background: var(--accent); border-radius: var(--r-sm); padding: 3px 7px; margin-left: 6px; white-space: nowrap; }
.partner-badge svg { flex: none; }
h1 .partner-badge { font-size: 13px; padding: 4px 8px; position: relative; top: -2px; }
.partner-line { display: inline-block; font-size: 12px; color: var(--muted); margin-left: 8px; }
.tw-partner { flex: none; font-size: 11px; font-weight: 600; color: var(--muted); border: 1px solid currentColor; border-radius: var(--r-lg); padding: 0 5px; line-height: 16px; }
.btn.is-locked { opacity: .75; }
.sq-unlock { margin: 6px 0 16px; display: grid; gap: 6px; max-width: 640px; min-width: 0; }
.sq-unlock p { margin: 0; }
.sq-ul-bar { display: block; height: 6px; border-radius: 999px; background: var(--panel2); overflow: hidden; }
.sq-ul-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.sc-grow { margin: 14px 2px 0; }
.sc-grow .linkbtn { padding: 0; color: var(--accent); font-weight: 600; }
.wn-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-left: auto; flex: none; }
.wn-toast { position: fixed; left: 16px; bottom: 16px; z-index: 60; display: flex; align-items: center; gap: 10px; max-width: min(420px, calc(100vw - 32px)); background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-lg); padding: 10px 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.wn-toast .grow { display: grid; min-width: 0; }
.wn-toast .grow .small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.wn-x { background: none; border: 0; color: var(--muted); font-size: 18px; padding: 0 4px; }
@media (max-width: 760px) { .wn-toast { bottom: 76px; left: 12px; right: 12px; max-width: none; } }
.pt-page { display: grid; gap: 16px; min-width: 0; }
.pt-hero { display: flex; gap: 20px; align-items: center; min-width: 0; }
.pt-hero h1 { margin: 0 0 6px; }
.pt-hero p { margin: 4px 0; }
.pt-preview { flex: none; display: flex; align-items: center; gap: 2px; padding: 14px 18px; border: 1px dashed var(--line); border-radius: var(--r-lg); }
.pt-preview .pt-name { font-weight: 600; }
.pt-on { color: var(--text); } .pt-off { color: var(--muted); }
.pt-msg { color: var(--accent); }
.pt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.pt-steps ol { margin: 0; padding-left: 20px; display: grid; gap: 14px; }
.pt-steps li { display: grid; gap: 6px; min-width: 0; }
.pt-steps .code-row { display: flex; gap: 8px; min-width: 0; }
.pt-steps .code-row input { flex: 1; min-width: 0; }
.pt-kit { display: grid; gap: 8px; align-content: start; min-width: 0; }
.pt-kit p { margin: 0; }
.pt-panel { width: 320px; max-width: 100%; height: auto; border-radius: var(--r-lg); display: block; }
.pt-kit textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.pt-fine { margin: 0; }
@media (max-width: 760px) { .pt-grid { grid-template-columns: minmax(0, 1fr); } .pt-hero { flex-direction: column; align-items: flex-start; } }
.cl-idea-list { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.cl-idea { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.cl-idea-t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cl-idea-v { flex: none; }
.cl-idea-st { flex: none; font-size: 11px; font-weight: 600; border-radius: var(--r-lg); padding: 1px 6px; border: 1px solid var(--line); color: var(--muted); }
.cl-idea-st.st-in_progress { color: var(--accent); border-color: var(--accent); }
.cl-idea-st.st-done { color: var(--strong, #2ecc71); border-color: currentColor; }
.install-sheet ol { padding-left: 20px; display: grid; gap: 6px; }
.pt-page > .card-box, .pt-grid > .card-box { margin: 0; }
.pt-grid h2 { margin-top: 0; }

/* Tab rows, site wide (owner, Nov 2026): the Tabletop look. The active tab gets a FLAT 2px accent bar with square ends,
   sitting right on the row's bottom line. No rounded underlines, no inset shadows. */
.tw-tabs button, .wtabs button, .wtabs .wtab-link, .yt-tabs button, .nb-tabs button, .wpchat-tabs button, .sr-types button,
.bell-tabs.nb-tabs button, .tt-tabs button, .tt-stabs button {
  border-radius: 0 !important; box-shadow: none !important; border: 0; border-bottom: 2px solid transparent;
}
.tw-tabs button.on, .wtabs button.on, .wtabs .wtab-link.on, .yt-tabs button.on, .nb-tabs button.on, .wpchat-tabs button.on,
.sr-types button.on, .bell-tabs.nb-tabs button.on, .tt-tabs button.on, .tt-stabs button.on { border-bottom-color: var(--accent); }
/* the Watch page's compact Streamers / Following / Games box is a segmented control, not an underline row */
.whub-top .wtabs button, .whub-top .wtabs .wtab-link { border-bottom: 0; border-radius: var(--r-md) !important; }

/* =====================================================================================================================
   De-vibe pass 2 (owner, Nov 2026): no purple, no gold, no decorative green or blue, filled (never outlined) status
   badges, selected = solid orange fill, calm type (nothing above 600), small corners (--r-lg 4 / --r-md 3 / --r-sm 2).
   Keep this block last so it wins over older per screen rules.
   ===================================================================================================================== */
:root { --chip-bg: #26262c; --chip-text: #c9c9cf; --on-fill: #12130f; }
body { font-weight: 400; }
h1, h2, h3, h4, h5, h6, th, b, strong { font-weight: 600; }
button, .btn, .tab, label, .chip, .linkbtn, .wside-link, .snav-head, .subnav button, .fsort button { font-weight: 500; }
input, select, textarea { font-weight: 400; }
.btn, button { font-size: 14px; }
.btn.small, button.small, .small-btn { font-size: 13px; }
.btn.big, button.big { font-size: 16px; padding: 12px 22px; }
.brand { font-weight: 600; }
.wside .wside-link, .snav-head { font-size: 14px; }

/* 1. No purple buttons: "Log in with Twitch" and every old .btn.twitch / .btn.steam is the normal orange primary button */
.btn.twitch, .btn.steam, a.btn.twitch, a.btn.steam { background: var(--accent); border-color: var(--accent); color: var(--on-accent); filter: none; }
.btn.twitch:hover, .btn.steam:hover { background: var(--accent-hover); border-color: var(--accent-hover); filter: none; }
.twitch-banner { background: var(--accent) !important; color: var(--on-accent); }
.wtw-hint { background: var(--panel2); color: var(--text); border: 1px solid var(--line); }
.ob-role.on { background: var(--accent-tint); }
.tag.req, .fflair[data-flair="Raid train"] { background: var(--chip-bg); color: var(--chip-text); }
/* squad / hangout banner themes: muted, desaturated tones (stored theme names unchanged) */
.sq-theme-violet { background: #2a2833; } .sq-theme-teal { background: #232f2e; } .sq-theme-sunset { background: #33282b; }
.sq-theme-forest { background: #252e28; } .sq-theme-ocean { background: #252b33; } .sq-theme-rose { background: #312629; }
.sq-theme-gold { background: #312b21; } .sq-theme-slate { background: #2a2c32; }
.sp-hero-inner { background: rgba(0, 0, 0, .35); }
.sq-logo, .sp-logo, .hg-icon, .hg-logo { border: 0 !important; box-shadow: none; background: rgba(0, 0, 0, .35); }
.sq-tagline { color: var(--text); }
.sq-badge, .sq-badge.open, .sq-badge.ask, .sq-badge.invite, .sq-badge.private { color: var(--muted); background: none; }
.sq-privline, .sq-liveline { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.sq-lock { flex: none; }
.sq-live { background: rgba(0, 0, 0, .55); color: var(--text); }
.code { letter-spacing: 0; color: var(--text); font-weight: 400; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* 2. Pricing fits in: a quiet outline link in the public header, a normal (slightly stronger) row in the sidebar */
.tab-pricing, .nav-pricing, header.top .pub-nav .nav-pricing { background: none !important; color: var(--text) !important; border: 1px solid var(--line) !important; font-weight: 500 !important; filter: none !important; padding: 6px 12px !important; border-radius: var(--r-md) !important; }
.tab-pricing:hover, .tab-pricing.active, .nav-pricing:hover, .nav-pricing.active { background: var(--panel2) !important; color: var(--text) !important; }
.snav-pricing { background: none; color: var(--text); font-weight: 500; padding: 7px 10px; font-size: 14px; border-radius: var(--r-md); }
.snav-pricing:hover, .snav-pricing.on { background: var(--panel2); filter: none; }
.snav-pricing .snav-pro { background: none; color: var(--accent); font-weight: 500; padding: 0; font-size: 12px; }
.pill.demo, .pill.free, .pill.pro, .pill.points, .pill.plan-beta, .pro-beta, .pr-beta-tag, #planBadge { background: var(--chip-bg) !important; color: var(--chip-text) !important; border: 0 !important; letter-spacing: 0; font-weight: 500; }

/* 3. Counts: neutral grey pills in the sidebar, red only for unread */
.wrail-count, .wside .snav-head .wrail-count, .snav-homelink .snav-hl .wrail-count { background: var(--panel2) !important; color: var(--muted) !important; border: 0; border-radius: 99px !important; font-weight: 500; }
.snav-live { color: var(--muted); font-weight: 500; }
.wf-strip:hover { border-color: #3a3a42; }
/* no left border stripes (AI tell): flat panels, neutral */
.cotd.slim, .sd-tip-row, .trk-chip, .trk-chip.trk-good, .trk-chip.trk-ok, .trk-chip.trk-low, .wn-toast, .yt-cut div.cut, .fb-reply { border-left: 1px solid var(--line) !important; }
.cotd.slim { border: 1px solid var(--line) !important; }
.cal-chip { border-left: 0 !important; }
.cal-chip.you { background: var(--accent-tint); }
.cal-chip.playtest { background: var(--chip-bg); }
.cal-dot.you { background: var(--accent); } .cal-dot.playtest { background: var(--muted); }
.rich blockquote, .post article blockquote, .report blockquote { border-left: 2px solid var(--line); }
.cotd-label, .big-num, .wtw-ok, .st-demo { color: var(--text); }

/* 4. Profile and card pages use the site styling; the theme color only tints the avatar ring and banner */
.card-sub a { color: var(--accent); }
.btn.follow { background: var(--accent); color: var(--on-accent); }
.card-tags span { border: 0; background: var(--chip-bg); color: var(--chip-text); font-weight: 500; }
.card-stats b, .card-schedule b { color: var(--text); }
.sp-games { color: var(--muted); }
.link-up { border-color: var(--line); }
.card-actions .btn.primary:first-child { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.card-badges span, .hc-badges span { background: var(--chip-bg); border: 0; color: var(--chip-text); }
.founding-badge { background: var(--long); color: var(--on-fill); border: 0; font-weight: 500; }
.person-tags span.same { border-color: transparent; color: var(--on-accent); background: var(--accent); }

/* 5. Status badges are FILLED with dark text; score = filled circle, label under it in muted text */
.badge { border: 0; color: var(--on-fill); background: var(--chip-bg); font-weight: 500; }
.badge.t-top { background: var(--strong); color: var(--on-fill); }
.badge.t-first { background: var(--decent); color: var(--on-fill); }
.badge.t-scroll { background: var(--long); color: var(--on-fill); }
.badge.t-buried { background: var(--none); color: var(--on-fill); }
.score { border: 0; color: var(--on-fill); background: var(--chip-bg); }
.score.v-strong { background: var(--strong); } .score.v-decent { background: var(--decent); } .score.v-long { background: var(--long); }
.score.v-none { background: var(--none); } .score.v-ghost { background: var(--ghost); color: #fff; } .score.v-whale { background: var(--muted); }
.verdict, .verdict.v-strong, .verdict.v-decent, .verdict.v-long, .verdict.v-none, .verdict.v-ghost, .verdict.v-whale { color: var(--muted); font-weight: 500; }
.gm-rank { border-color: var(--line) !important; background: var(--panel2) !important; }
.gm-rank b { color: var(--text); }
.rk-chip.ok { background: var(--strong); border-color: transparent; color: var(--on-fill); }
.rk-chip.warn { background: var(--long); border-color: transparent; color: var(--on-fill); }
.tag.warn { background: var(--long); color: var(--on-fill); }
.tag.danger { background: var(--none); color: var(--on-fill); border: 0; }
.tag.ap-approved { background: var(--strong); color: var(--on-fill); }
.cl-idea-st { border: 0 !important; background: var(--chip-bg); color: var(--chip-text) !important; }
.cl-idea-st.st-in_progress { background: var(--accent); color: var(--on-accent) !important; }
.cl-idea-st.st-done { background: var(--strong); color: var(--on-fill) !important; }



/* 6 + 7. Game buttons: one full width orange primary, then ONE joined toolbar of five that never wraps (rule 31) */
.card .card-actions, .gc-actions, .gm-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.card .card-actions > .btn, .gc-actions > .btn, .gm-actions > .btn { justify-content: center; width: 100%; margin: 0; }
.gtool { display: flex; width: 100%; flex: 1 1 100%; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--panel2); }
.gtool > .btn, .gtool > button, .gtool > a { flex: 1 1 0; min-width: 0; margin: 0 !important; display: inline-flex; justify-content: center; align-items: center; gap: 0;
  padding: 6px 2px !important; font-size: 12px !important; font-weight: 500; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: none !important; border: 0 !important; border-right: 1px solid var(--line) !important; border-radius: 0 !important; color: var(--text) !important; }
.gtool > :last-child { border-right: 0 !important; }
.gtool > :hover { background: var(--panel) !important; }
.gtool > .on, .gtool > [aria-pressed="true"] { background: var(--accent) !important; color: var(--on-accent) !important; }
.gtool svg { display: none; }
.row-btns > .gtool { flex-basis: 100%; }

/* 8. Small tags: neutral filled chips; the highlighted one (owned on Steam etc.) is orange filled */
.tag { background: var(--chip-bg); color: var(--chip-text); border: 0; }
.tag.own { background: var(--accent); color: var(--on-accent); }
.tag.chatty { background: var(--chip-bg); color: var(--chip-text); border: 0; }
.wspot-card.gem { border-color: var(--line); } .wspot-card.gem:hover { border-color: #3a3a42; } .wspot-card.gem .wspot-tag { color: var(--muted); }

/* 9. Status checkmarks (connected, on, linked) */
.ico-check { display: inline-block; vertical-align: -1px; margin-right: 4px; color: var(--strong); flex: none; }
.ok-text { color: var(--text); }
.shine-box { display: inline-block; width: 11px; height: 11px; border: 1px solid var(--muted); border-radius: var(--r-sm); margin-right: 4px; vertical-align: -1px; }
.gt-check .ico-check { margin: 0; color: var(--on-accent); }

/* 10. Selected state = solid orange fill with dark text (tabs keep the flat underline) */
.vault-mo.on, .react.on, .vote.on, .hw-tool.on, .gfollow.on, [data-gfollow].on, .wpt-pick button.on, .ftrend .sr-tag.on,
.chips button.on, .chip.on, .fsort button.on, .rk-seg button.on, .cal-bar .seg button.on, .trk-btn.on,
.pill-btn, .deal-watch.on, .wpp-listen.on, .tt-tool.on { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--on-accent) !important; }
.dev-game.on, .game-tile.on, .gl-pick.on, .vis-pick label:has(input:checked), .check-row:has(input:checked), .wpi-row:has(input:checked:not(:disabled)),
.tt-turns li.on, .pk-live.on, .nb-ladder div.on, .tt-titem.on, .tt-scrow.on, .slot.mine, .plan.pro, .pr-pro, .sp-post:target, .cal-item.you, .tt-turns li.mine { border-color: var(--line) !important; background: var(--accent-tint) !important; }
.wms-btn { background: var(--panel2); border-color: var(--line); color: var(--text); }
.pw-bar, .rk-hi, .tt-sresult, .tt-textin, .fdock, .slot.done { border-color: var(--line) !important; }
.share-chip { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
/* dropdown triggers stay neutral when open or focused; the picked option inside the menu keeps the orange tint */
.ss-btn, .ss-wrap.open .ss-btn, .tdd.open .tdd-btn, .tdd-btn.has, .fc-dest, .fc-dest[aria-expanded="true"] { border-color: var(--line) !important; background: var(--panel2) !important; color: var(--text) !important; box-shadow: none !important; }
.ss-btn:hover, .tdd-btn:hover, .fc-dest:hover { border-color: #3a3a42 !important; }
.ss-btn:focus, .tdd-btn:focus, .fc-dest:focus { outline: 0; }
.ss-btn:focus-visible, .tdd-btn:focus-visible, .fc-dest:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tdd-search { border: 1px solid var(--line); }
input:focus, select:focus { outline: 1px solid #4a4a52; outline-offset: 0; }
input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button:hover { border-color: #3a3a42; }
button.primary:hover, .btn:hover { border-color: var(--accent-hover); }
.btn.ghost:hover { border-color: #3a3a42; }
/* dev portal and other sub tab rows: flat underline tabs (rule 60) */
.subnav { gap: 2px; padding-bottom: 0; }
.subnav button { background: none !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; padding: 8px 12px; margin-bottom: -1px; }
.subnav button.on { color: var(--text); border-bottom-color: var(--accent) !important; }

/* Info, tip and reassurance boxes are neutral panels, never tinted */
.beta, .pr-beta, .ai-none, .ok-box, .pace-card, .yt-private, .tip { background: var(--panel2) !important; border: 1px solid var(--line) !important; color: var(--text); }
.cut { background: var(--chip-bg) !important; color: var(--text) !important; }

/* Social actions: hover changes background only, no colored icons */
.tw-reply:hover, .tw-repost:hover, .tw-bookmark:hover { color: var(--text); background: var(--panel2); }
.tw-repost.on, .tw-bookmark.on { color: var(--accent); }

@media (max-width: 380px) { .gtool > .btn, .gtool > button, .gtool > a { font-size: 11px !important; } }
.gc-verdict { display: inline-block; color: var(--on-fill, #12130f); font-weight: 500; padding: 1px 7px; border-radius: var(--r-sm); font-size: 12px; }
.wrail-btn.on, .wside .snav-sec.here > .snav-head { box-shadow: none; }
.plan.pro, .pr-pro { background: var(--panel) !important; border-color: var(--line) !important; }
.card-page .card-actions .btn.primary:first-child, .card-actions .btn.primary:first-child { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--on-accent) !important; }
.shine { border-color: var(--line); }
.tw-imgbtn { color: var(--text) !important; border-color: var(--line) !important; background: var(--panel2) !important; }

/* Game card toolbar: give it the full card width (it runs under the score circle) and size segments by their label,
   so "Category" never gets clipped (owner, Nov 2026) */
.card > .scorebox { min-width: 72px; }
@media (min-width: 761px) {
  .card:not(.big) .card-actions { margin-right: calc(-72px - 14px); }
  .card.big .card-actions { max-width: 520px; }
}
.gtool > .btn, .gtool > button, .gtool > a { flex: 1 1 auto !important; padding: 6px 6px !important; }
/* Score pills in the My games table: filled like the score circles (they were dark text on nothing) */
.badge.v-strong { background: var(--strong); color: var(--on-fill); } .badge.v-decent { background: var(--decent); color: var(--on-fill); }
.badge.v-long { background: var(--long); color: var(--on-fill); } .badge.v-none { background: var(--none); color: var(--on-fill); }
.badge.v-ghost { background: var(--ghost); color: #fff; } .badge.v-whale { background: var(--muted); color: var(--on-fill); }
.badge[class*="v-"] { border: 0; font-weight: 500; }
/* The small launch button next to a game name: orange with a play icon */
.launch-mini { background: var(--accent) !important; border: 0 !important; color: var(--on-accent) !important; border-radius: var(--r-md); }
.launch-mini svg { display: block; }
/* Little tags everywhere (vibes, moods, looking for...): neutral filled chips, no colored outlines (owner, Nov 2026).
   A shared / matching tag is orange filled; nothing else gets color. */
.person-tags span, .hc-tags span, .card-tags span, .chips span:not(.on), .tag, .vtag, .etq-badge { border: 0 !important; background: var(--chip-bg); color: var(--chip-text); font-weight: 500; }
.person-tags span.same, .hc-tags span.same { background: var(--accent) !important; color: var(--on-accent) !important; }
.person-tags span.close { background: var(--chip-bg) !important; color: var(--chip-text) !important; }
.person { border-top: 1px solid var(--line) !important; }
.card-badges span, .hc-badges span, .pill.points, .pill.pro, .ai-none, .trk-btn.on { border: 0 !important; background: var(--chip-bg) !important; color: var(--chip-text) !important; }
.trk-btn.on { background: var(--accent) !important; color: var(--on-accent) !important; }
.slot.done, .ok-box { border-color: var(--line) !important; }
/* Sidebar Pricing row: more prominent but calm (owner): a soft orange tint row, orange icon, "Free beta" as a small solid pill */
.snav-pricing { background: var(--accent-tint) !important; color: var(--text) !important; font-weight: 600 !important; padding: 9px 10px !important; border: 0 !important; }
.snav-pricing svg { color: var(--accent); }
.snav-pricing:hover, .snav-pricing.on { background: rgba(232,116,59,.22) !important; }
.snav-pricing .snav-pro { background: var(--accent) !important; color: var(--on-accent) !important; padding: 1px 7px !important; border-radius: var(--r-sm); font-size: 11px !important; font-weight: 600 !important; margin-left: auto; }
/* Start page (landing, owner Nov 2026): no navbar, a small logo top left, one "Get started" button. Sign up first,
   then onboarding asks who you are (public/app.js). */
.lp-start .lp-logo { position: absolute; top: 18px; left: 22px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; font-size: 15px; text-decoration: none; }
.lp-start .lp-logo:hover { text-decoration: none; color: var(--text); }
.lp-start .hero { padding-top: 76px; }
.lp-cta { margin: 26px 0 0; }
.lp-alt { margin: 14px 0 0; color: var(--muted); line-height: 1.7; }
.lp-note { margin: 14px 0 0; max-width: 520px; }
.lp-cost .lp-beta { text-align: left; max-width: 680px; margin: 14px auto 0; padding: 18px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
.lp-cost .lp-beta p { margin: 0; } .lp-cost .lp-beta p + p { margin-top: 8px; }
@media (max-width: 980px) { .lp-note { margin-left: auto; margin-right: auto; } }
@media (max-width: 760px) {
  .lp-start .lp-logo { top: 14px; left: 16px; }
  .lp-start .hero { padding-top: 58px; }
}
.dev-what .lp-rows { max-width: 820px; margin-left: auto; margin-right: auto; }
.lp-start .hero-split .hero-copy h1 { font-size: clamp(32px, 3.6vw, 46px); line-height: 1.08; margin-bottom: 14px; }
.lp-start .hero-split .hero-copy .sub { font-size: 17px; margin-bottom: 0; }
.lp-start .hero-split { align-items: start; }
.lp-start .hero-fig { margin-top: 18px; }
.ob-likes { flex-wrap: wrap; justify-content: center; }
.ob-likes-h { margin: 12px 0 6px; color: var(--muted); }

/* Logged out pages: no top nav, the logo sits left next to the menu button (the sidebar is the menu) */
.logged-out header.top { justify-content: flex-start; gap: 12px; }
.snav-guest { border-bottom: 0; }
.ob-progress { display: flex; align-items: center; justify-content: space-between; min-height: 24px; margin-bottom: 6px; }
.ob-progress #obStepOf { margin-left: auto; }
.ob-row { justify-content: center; margin-top: 14px; }
.dev-alt { margin-top: 12px; }
/* Landing: real screenshots of the app (public/img/landing, made by tests/e2e/landingshots.cjs). Varied rhythm:
   a wide row, the same row flipped, then a narrower pair. Images are flat with a 1px border, no shadows or glows. */
.lp-show { display: grid; gap: 56px; max-width: 1180px; }
.lp-shot { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 36px; align-items: center; text-align: left; }
.lp-shot.lp-flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
.lp-shot.lp-flip img { order: 2; }
.lp-pair2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: center; text-align: left; max-width: 920px; margin: 0 auto; }
.lp-show img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.lp-shot-text h2 { margin: 0 0 10px; font-size: 26px; }
.lp-shot-text p { margin: 0 0 10px; color: var(--text); line-height: 1.55; }
.lp-shot-text p.muted { color: var(--muted); }
@media (max-width: 900px) {
  .lp-show { gap: 40px; }
  .lp-shot, .lp-shot.lp-flip, .lp-pair2 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lp-shot.lp-flip img { order: 0; }
}
/* The score circle only takes its own height, and the toolbar sits above it, so it never swallows clicks on Track */
.card > .scorebox { align-self: start; }
.card .card-actions { position: relative; z-index: 1; }

/* Landing logo: never under a phone notch or flush with the edge (owner: "the icon is cut off") */
.lp-start .lp-logo { left: max(24px, calc(env(safe-area-inset-left) + 12px)); top: max(18px, calc(env(safe-area-inset-top) + 10px)); padding: 2px 0; }
.lp-start .lp-logo img, header.top .brand img { flex: none; display: block; }
@media (max-width: 760px) { .lp-start .lp-logo { left: max(18px, calc(env(safe-area-inset-left) + 12px)); top: max(14px, calc(env(safe-area-inset-top) + 8px)); } }

/* Start page wizard (/start, src/start.js + public/start.js): questions before sign up, one screen at a time.
   Neutral panel, orange only for picked options and the primary button, small corners, light type. */
.start-page header.top { padding-left: max(24px, calc(env(safe-area-inset-left) + 12px)); padding-right: max(24px, calc(env(safe-area-inset-right) + 12px)); }
.start-page .foot { margin-top: 24px; }
.sw-wrap { max-width: 680px; margin: 0 auto; padding: 40px 24px 24px; min-height: calc(100vh - 160px); }
.sw-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 28px 28px; min-width: 0; }
.sw-top { display: flex; align-items: center; min-height: 26px; }
.sw-top .sw-back { padding-left: 0; }
.sw-stepof { margin-left: auto; }
.sw-bar { height: 3px; background: var(--panel2); border-radius: var(--r-sm); margin: 8px 0 22px; overflow: hidden; }
.sw-bar span { display: block; height: 100%; background: var(--accent); transition: width .2s ease; }
.sw-title { font-size: 26px; line-height: 1.2; margin: 0 0 6px; outline: none; }
.sw-sub { margin: 0 0 18px; }
.sw-q { margin: 20px 0 8px; color: var(--text); font-weight: 500; }
.sw-body > .sw-q:first-child { margin-top: 4px; }
.sw-opts { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.sw-opts.sw-row3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sw-opts.sw-row4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sw-opts.sw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sw-opt { display: flex; align-items: flex-start; gap: 10px; text-align: left; width: 100%; min-width: 0; padding: 12px 14px; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-lg); cursor: pointer; font: inherit; font-weight: 400; }
.sw-opts.sw-chips .sw-opt { width: auto; padding: 7px 12px; border-radius: var(--r-md); align-items: center; }
.sw-opts.sw-row3 .sw-opt, .sw-opts.sw-row4 .sw-opt { justify-content: center; text-align: center; align-items: center; min-height: 52px; }
.sw-opt:hover { border-color: #3a3a42; background: #232328; }
.sw-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sw-opt.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.sw-opt.on:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.sw-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sw-txt b { font-weight: 500; font-size: 15px; }
.sw-opts.sw-chips .sw-txt b { font-size: 14px; }
.sw-txt span { color: var(--muted); font-size: 13px; line-height: 1.45; }
.sw-opt.on .sw-txt span { color: var(--on-accent); }
.sw-big .sw-opt { padding: 16px; }
.sw-tick { flex: none; width: 16px; height: 16px; margin-top: 2px; border: 1px solid #4a4a52; border-radius: var(--r-sm); background: var(--bg); }
.sw-chips .sw-tick { display: none; }
.sw-opt.on .sw-tick { border-color: var(--on-accent); background: var(--on-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%23e8743b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.sw-nav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
.sw-next[disabled] { opacity: .5; cursor: not-allowed; }
.sw-keys { margin-left: auto; }
.sw-sum { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }
.sw-sum li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
.sw-sum svg { flex: none; margin-top: 3px; color: #3fbf6a; }
.sw-form { margin: 0; }
.sw-go { width: 100%; justify-content: center; }
.sw-why { margin: 10px 0 0; }
.sw-alt { margin: 12px 0 0; }
.sw-alt .linkbtn { padding-left: 0; font-size: 14px; color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.sw-legal { margin: 16px 0 0; }
.sw-foot { text-align: center; margin: 16px 0 0; }
.sw-noscript { padding: 16px; }
@media (max-width: 760px) {
  .sw-wrap { padding: 20px 16px 16px; min-height: 0; }
  .sw-card { padding: 18px 16px 20px; }
  .sw-title { font-size: 22px; }
  .sw-opts.sw-row4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sw-keys { display: none; }
  .sw-nav .sw-next { flex: 1; justify-content: center; }
}
@media (max-width: 420px) { .sw-opts.sw-row3 { grid-template-columns: minmax(0, 1fr); } }

/* ===== How you look in the row (public/rowpreview.js) + stream layout editor ===== */
.rp { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 14px; min-width: 0; }
.rp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rp-head h3 { margin: 0; }
.rp-intro { margin: 6px 0 10px; }
.game-modal.gm-wide { max-width: min(1400px, 100%); }
.rp-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.rp-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rp-field:first-child { flex: 1 1 260px; }
.rp-field input[type="text"], .rp-field input:not([type]) { width: 100%; }
.rp-file { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rp-file label.btn { cursor: pointer; }
.rp-squint { margin: 0 0 6px; }
.rp-local { margin: 6px 0 12px; }
.rp-sum { margin: 0 0 10px; }
.rp-grid { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rp-row { display: grid; grid-template-columns: repeat(var(--per, 4), minmax(0, 1fr)); gap: 14px 12px; margin-bottom: 10px; }
.rp-rowlbl { color: var(--muted); }
.rp-rowlbl.mine { color: var(--text); font-weight: 500; }
.rp-gap { padding: 6px 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); text-align: center; margin: 4px 0 8px; }
.rp-card { min-width: 0; border-radius: var(--r-lg); }
.rp-card.you { background: var(--accent-tint); }
.rp-card.you .rp-meta { padding: 6px 8px; }
.rp-thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.rp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rp-blur .rp-thumb img, .rp-blur .rp-ph { filter: blur(4px); }
.rp-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 13px; }
.rp-viewers { position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 5px; background: rgba(0, 0, 0, .7); color: #fff; font-size: 12px; padding: 1px 6px; border-radius: var(--r-sm); }
.rp-you { position: absolute; left: 6px; top: 6px; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 600; padding: 1px 7px; border-radius: var(--r-sm); }
.rp-meta { display: flex; flex-direction: column; min-width: 0; padding-top: 6px; }
.rp-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-title { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-card.you .rp-title { color: var(--text); }
.rp-setups { margin-top: 14px; padding: 12px 14px; background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-lg); }
.rp-setups h4 { margin: 0 0 6px; }
.rp-sline { margin: 0 0 6px; }
.rp-tip { margin: 0 0 8px; } .rp-tip b { margin-right: 4px; }
.rp-break { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.rp-brow { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.rp-bitems { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.card-setup { margin-top: 6px; }
#setupSettings .etq-grid, #cSetup .etq-grid { margin: 8px 0; }
#setupSettings .chip[disabled], #cSetup .chip[disabled] { opacity: .45; cursor: not-allowed; }
@media (max-width: 760px) {
  .rp-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; }
  .rp-brow { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .rp-name { font-size: 13px; } .rp-title { font-size: 12px; }
}
/* Stand out plans (public/rowpreview.js, src/lookplan.js) */
.lp { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); min-width: 0; }
.lp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.lp-head h4 { margin: 0; }
.lp-how { margin: 8px 0 0; }
.lp-steps { margin: 10px 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.lp-steps li { min-width: 0; }
.lp-steps li.done span { color: var(--muted); text-decoration: line-through; }
.lp-changed { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.lp-changed .lp-date { width: auto; }
.lp-result { margin: 8px 0; padding-top: 8px; border-top: 1px solid var(--line); }
.lp-result h4 { margin: 0 0 4px; }
table.lib.lp-ba, .lp-ba { width: auto; max-width: 100%; }
.lp-ba th, .lp-ba td { padding-right: 18px; }
.lp-growth .lp-gcard { padding: 10px 0; border-top: 1px solid var(--line); }
.lp-growth .lp-gcard:first-of-type { border-top: 0; }
.rp-cut { display: block; margin-top: 2px; overflow-wrap: anywhere; }
.rp-cutoff { text-decoration: line-through; opacity: .6; }
.lp-act { margin-left: 30px; }
/* Legal pages: table of contents on /privacy and lawyer blanks on /terms */
.legal-toc { margin: 14px 0 6px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
.legal-toc ol { margin: 6px 0 0; padding-left: 20px; columns: 2; column-gap: 24px; }
.legal-toc li { margin: 3px 0; break-inside: avoid; }
@media (max-width: 600px) { .legal-toc ol { columns: 1; } }
.legal h3[id] { scroll-margin-top: 16px; }
.legal-blank { padding: 10px 14px; border: 1px dashed var(--line); border-radius: var(--r-lg); background: var(--panel); color: var(--muted, #a0a0a8); }

/* ---------- Sponsorship rate calculator (/tools/sponsor-rates, src/rates.js, public/rates.js) ---------- */
.rates-page { flex: 1; min-width: 0; max-width: 1180px; margin: 0 auto; padding: 28px 24px 48px; text-align: left; }
.rates-page h1 { font-size: 28px; font-weight: 600; margin: 0 0 6px; }
.rates-page h2 { font-size: 16px; font-weight: 600; margin: 0 0 8px; }
.rt-lead { max-width: 720px; margin: 0 0 20px; }
.rt-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.rt-form { display: grid; gap: 14px; min-width: 0; }
.rt-form fieldset { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); padding: 12px 14px 14px; margin: 0; min-width: 0; display: grid; gap: 8px; }
.rt-form legend { font-weight: 500; padding: 0 6px; }
.rt-form label { min-width: 0; }
.rt-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; align-items: end; }
.rt-row > label { display: grid; gap: 4px; font-size: 13px; font-weight: 500; color: var(--muted); }
.rt-row input { width: 100%; min-width: 0; box-sizing: border-box; }
.rt-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.rt-checks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.rt-form .check-row { align-items: flex-start; }
.rt-form .check-row > span { min-width: 0; }
.rt-note { display: block; margin-top: 2px; }
.rt-prefill { margin: 0; }
.rt-out { display: grid; gap: 14px; min-width: 0; }
.rt-range { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rt-tier { display: grid; gap: 4px; align-content: start; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); min-width: 0; }
.rt-tier b { font-size: 24px; font-weight: 600; overflow-wrap: anywhere; }
.rt-tier.rt-fair { border-color: #4a4a5a; background: var(--panel2); }
.rt-k { font-size: 13px; font-weight: 500; color: var(--muted); }
#rtPer { margin: -6px 0 0; }
.rt-tiny, .rt-box, .rt-math { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); padding: 12px 14px; min-width: 0; }
.rt-tiny p { margin: 6px 0 0; }
.rt-math summary { cursor: pointer; font-weight: 500; }
.rt-math ol { margin: 8px 0 6px; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; overflow-wrap: anywhere; }
.rt-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
.rt-pitch { width: 100%; box-sizing: border-box; min-height: 220px; resize: vertical; font: inherit; font-size: 14px; line-height: 1.5; }
.rt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.rt-ftc p { margin: 0; }
@media (max-width: 900px) { .rt-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .rates-page { padding: 18px 16px 40px; }
  .rates-page h1 { font-size: 22px; }
  .rt-row2, .rt-checks { grid-template-columns: minmax(0, 1fr); }
  .rt-range { grid-template-columns: minmax(0, 1fr); }
  .rt-tier { grid-template-columns: auto 1fr; align-items: baseline; column-gap: 12px; }
  .rt-tier .small { grid-column: 1 / -1; }
}

/* ---- Freshness labels (public/fresh.js) + row checks (public/rowchecks.js) + How it works (src/howitworks.js) ---- */
.fresh { color: var(--muted); font-size: 12px; font-weight: 400; white-space: nowrap; }
.fresh.stale { color: var(--long); }
#freshness .fresh { font-size: inherit; }
.card-fresh { margin: 4px 0 0; line-height: 1.3; }
.gc-fresh { margin: -2px 0 2px; }
.gm-fresh { margin: 4px 0 0; color: var(--muted); }
.wcount-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.wcount-row #wCount { margin-right: 0; }
.rc-line { margin: 2px 0 10px; }
.rc-table td, .rc-table th { white-space: nowrap; }
.rc-box { overflow-x: auto; }
.hiw { overflow-wrap: anywhere; padding-bottom: 32px; }
.hiw h1 { margin-bottom: 8px; }
.hiw-lead { font-size: 17px; line-height: 1.55; margin: 0 0 10px; }
.hiw-live { margin: 0 0 6px; color: var(--muted); font-size: 14px; }
.hiw-live .fresh { font-size: 14px; color: var(--text); }
.hiw-live .fresh.stale { color: var(--long); }
.hiw-sec { margin: 34px 0 0; }
.hiw-sec h2 { font-size: 21px; margin: 0 0 8px; font-weight: 600; }
.hiw-list { padding-left: 18px; margin: 8px 0; }
.hiw-list li { margin: 8px 0; }
.hiw-formula { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; margin: 8px 0 12px; }
.hiw-dl { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr); gap: 10px 18px; margin: 14px 0; }
.hiw-dl dt { font-weight: 600; }
.hiw-dl dd { margin: 0; color: var(--text); }
.hiw-big { font-size: 18px; margin: 4px 0 12px; line-height: 1.45; }
.hiw-big b { font-size: 30px; font-weight: 600; margin-right: 6px; white-space: nowrap; }
.hiw-table { width: 100%; border-collapse: collapse; margin: 8px 0 10px; font-size: 14px; }
.hiw-table th, .hiw-table td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-top: 1px solid var(--line); }
.hiw-table th { width: 32%; font-weight: 500; }
.hiw-never { list-style: none; padding: 0; margin: 8px 0; columns: 2; column-gap: 28px; }
.hiw-never li { break-inside: avoid; padding: 6px 0; border-top: 1px solid var(--line); }
.hiw-test { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; }
.hiw-test h2 { margin-top: 0; }
@media (max-width: 760px) {
  .hiw-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .hiw-dl dd { margin-bottom: 10px; }
  .hiw-never { columns: 1; }
  .hiw-table th, .hiw-table td { display: block; width: auto; padding: 4px 0; }
  .hiw-table td { border-top: 0; padding-bottom: 10px; }
}

/* Row preview: where your picture came from */
.rp-card .rp-meta .rp-src, .rp-card .rp-src { display: block; font-size: 11px !important; color: var(--muted) !important; margin-top: 2px; }

/* Stand out plan: how Twitch's live thumbnail works */
.lp-tip { background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 10px; margin: 6px 0 8px; color: var(--text); }

/* Themed confirm window (public/confirm.js, replaces the browser's confirm()) */
.ss-confirm { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .6); }
.ss-confirm-card { width: 100%; max-width: 400px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); text-align: left; }
.ss-confirm-card h3 { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.ss-confirm-card p { margin: 0 0 8px; color: var(--text); font-size: 14px; line-height: 1.45; }
.ss-confirm-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.ss-confirm-row button { min-height: 36px; padding: 0 16px; border-radius: var(--r-md); font: inherit; font-weight: 500; cursor: pointer; }
.ss-c-no { border: 1px solid var(--line); background: var(--panel2); color: var(--text); }
.ss-c-no:hover { background: var(--line); }
.ss-c-yes { border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); }
.ss-c-yes:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.ss-c-yes.danger { border-color: #eb3b3b; background: #eb3b3b; color: #fff; }
.ss-c-yes.danger:hover { background: #d42f2f; border-color: #d42f2f; }
.ss-confirm button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 760px) { .ss-confirm { place-items: end stretch; padding: 0; } .ss-confirm-card { max-width: none; border-radius: var(--r-lg) var(--r-lg) 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom)); } }

/* Selected chips with their own colored text inside (Trending hashtags): keep the text dark on the orange fill */
.ftrend .sr-tag.on b, .ftrend .sr-tag.on span, .sr-tags .sr-tag.on b, .sr-tags .sr-tag.on span { color: var(--on-accent) !important; }
.ftrend .sr-tag.on span { opacity: .8; }

/* ==== Light theme (default; dark is one click away in Settings or the avatar menu). public/theme.js sets
   <html data-theme>. Tokens here; hard coded colors are mapped in the GENERATED public/light.css
   (node scripts/light-theme.mjs). ==== */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #e6e6e2; --panel: #f3f3f0; --panel2: #eaeae6; --line: #d6d6d0; --text: #18181b; --muted: #55555d;
  --accent: #b84f1b; --accent2: #b84f1b; --accent-hover: #a24516; --accent-dark: #973f14; --accent-tint: rgba(184, 79, 27, .12); --on-accent: #ffffff;
  --twitch: #b84f1b;
  --ghost: #8a8a96;
  --chip-bg: #ececea; --chip-text: #3c3c43;
}
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] .ok-text { color: #1e8e4e; }
:root[data-theme="light"] .err-text { color: #c62828; }
:root[data-theme="light"] .fdock-bar .fdock-req.count { background: #fff; color: var(--accent); }
:root[data-theme="light"] .ss-confirm { background: rgba(20, 20, 24, .35); }
:root[data-theme="light"] .ss-confirm-card,
:root[data-theme="light"] .tw-menu-list { box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }

/* Theme switch (Settings → Account, avatar menu) */
.theme-switch { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.theme-switch button { padding: 6px 14px; border: 0; background: var(--panel); color: var(--text); font: inherit; font-weight: 500; cursor: pointer; }
.theme-switch button + button { border-left: 1px solid var(--line); }
.theme-switch button.on { background: var(--accent); color: var(--on-accent); }
.me-menu .me-theme { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 12px; }
.me-menu .me-theme .theme-switch button { padding: 4px 10px; font-size: 13px; }

/* Game card buttons: four separate small buttons, not one glued toolbar (owner, Nov 2026: "glued together... looks kinda silly") */
.gtool { gap: 6px; border: 0 !important; border-radius: 0; overflow: visible; background: none; }
.gtool > .btn, .gtool > button, .gtool > a { border: 1px solid var(--line) !important; border-radius: var(--r-md) !important; background: var(--panel2) !important; }
.gtool > :last-child { border-right: 1px solid var(--line) !important; }
.gtool > :hover { background: var(--panel) !important; border-color: var(--muted) !important; }
.gtool > .on, .gtool > [aria-pressed="true"] { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--on-accent) !important; }

/* Dropdown search boxes (.tdd): no half drawn magnifier, one quiet border; the box itself shows focus, not the input */
.tdd-search::before { content: none; display: none; }
.tdd-search { border: 1px solid var(--line) !important; padding: 0 10px; }
.tdd-search:focus-within { border-color: var(--accent) !important; }
.tdd-search input, .tdd-search input:focus, .tdd-search input:focus-visible { outline: none !important; border: 0 !important; box-shadow: none !important; background: none !important; }

/* Settings → Streaming → When I launch a game (public/swlaunch.js) */
.sw-launch-box .check-row { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; text-align: left; padding: 10px 12px; margin: 0 0 6px; }
.sw-launch-box .sw-custom { margin: 4px 0 8px; }
.sw-launch-box .sw-url { width: 100%; box-sizing: border-box; font-family: ui-monospace, monospace; }
/* Command Center: "Launch opens" picker next to Tag finder (public/streamcenter.js) */
.sc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sc-launch { display: inline-flex; align-items: center; gap: 8px; }
.sc-launch .ss-wrap { min-width: 170px; }
@media (max-width: 760px) { .sc-actions { width: 100%; } .sc-launch { width: 100%; justify-content: space-between; } }

.sc-launch-box { margin-top: 16px; }
.sc-launch-box .sw-title { margin: 0 0 12px; font-size: 18px; font-weight: 600; }
.sw-launch-box .row-btns { margin: 10px 0 6px; }

/* ---- AI helpers (public/ai.js, opt in, separate add on). Quiet on purpose: a neutral tag, never a glow or sparkle. ---- */
.ai-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.ai-row .muted { min-width: 0; }
.ai-tag { display: inline-block; font-size: 11px; font-weight: 500; padding: 1px 6px; border-radius: var(--r-sm); background: var(--panel2); border: 1px solid var(--line); color: var(--muted); vertical-align: middle; }
.ai-out { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
.ai-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
.ai-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ai-items li { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--line); }
.ai-items li:first-child { border-top: 0; }
.ai-items li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.ai-acts { display: flex; gap: 6px; flex: none; }
.ai-form { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ai-form textarea { grid-column: 1 / -1; }
.ai-rules { margin: 6px 0 10px; padding-left: 18px; }
@media (max-width: 560px) { .ai-form { grid-template-columns: minmax(0, 1fr); } .ai-items li { flex-direction: column; } }

/* ---- Live for you: search with picture suggestions, chat under the player (public/homelive.js) ---- */
.fsl-search { position: relative; margin-bottom: 10px; }
.fsl-search input { width: 100%; }
.fsl-sugg { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 8px 24px rgba(0,0,0,.35); max-height: 420px; overflow-y: auto; padding: 4px; }
.fsl-shead { font-size: 12px; font-weight: 500; color: var(--muted); padding: 6px 8px 2px; }
.fsl-sopt { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; background: none; border: 0; border-radius: var(--r-md); padding: 6px 8px; color: inherit; cursor: pointer; }
.fsl-sopt:hover, .fsl-sopt:focus-visible { background: var(--panel2); outline: none; }
.fsl-sthumb { flex: none; width: 64px; height: 36px; border-radius: var(--r-sm); overflow: hidden; background: var(--panel2); }
.fsl-sbox { flex: none; width: 26px; height: 36px; border-radius: var(--r-sm); overflow: hidden; background: var(--panel2); }
.fsl-sthumb img, .fsl-sbox img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fsl-stxt { display: flex; flex-direction: column; min-width: 0; }
.fsl-stxt b, .fsl-stxt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsl-sempty { padding: 10px; }
.fsl-ctx { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; margin-bottom: 6px; }
.fsl-chat:empty { display: none; }
.fsl-chat { margin-top: 8px; }
.fsl-chatbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
/* Tall enough that Twitch's pinned hype train / gift banners leave room for the chat itself (owner, Nov 2026). */
.fsl-chatframe { display: block; width: 100%; height: clamp(500px, 72vh, 760px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel2); }

/* ---- Landing hero video: the bottom melts into the page (owner, Nov 2026: "make the bottom fade into the rest of the
   website"). The mask fades the video itself; the shade keeps text readable. Muted, no audio track (server.js heroMedia). */
.hero-bg { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%); }
.hero-shade { background: radial-gradient(ellipse at center, rgba(15, 15, 17, .25) 0%, rgba(15, 15, 17, .7) 70%), linear-gradient(to bottom, transparent 50%, var(--bg) 100%); }
:root[data-theme="light"] .hero-shade { background: radial-gradient(ellipse at center, rgba(230, 230, 226, .35) 0%, rgba(230, 230, 226, .75) 70%), linear-gradient(to bottom, transparent 50%, var(--bg) 100%); }

/* ---- Landing: pops of orange (owner, Nov 2026: "some orange sections for a pop of color"). Landing page only.
   A full width orange band ("Think of Twitch like Google"), a soft orange wash behind Good Neighbors, a solid orange
   block offset behind each screenshot, orange labels in "We skip the traps". Bands go edge to edge without sideways
   scroll (box-shadow spread + clip-path). */
.lp-band { position: relative; background: var(--accent); box-shadow: 0 0 0 100vmax var(--accent); clip-path: inset(0 -100vmax); padding-top: 56px; padding-bottom: 56px; color: var(--on-accent); }
.lp-band h2, .lp-band .sub, .lp-band .lp-list li, .lp-band .lp-list b { color: var(--on-accent); }
.lp-band .sub { opacity: .92; }
.lp-band .lp-list li { border-top-color: color-mix(in srgb, var(--on-accent) 28%, transparent); }
.lp-band .lp-list li { opacity: .95; }
.spotlight { background: var(--accent-tint); box-shadow: 0 0 0 100vmax var(--accent-tint); clip-path: inset(0 -100vmax); padding-top: 48px; padding-bottom: 52px; }
.spotlight .spot { cursor: default; border-top: 3px solid var(--accent); }
.spotlight .spot:hover { border-color: var(--line); border-top-color: var(--accent); }
.spotlight .spot img, .spotlight .spot .av { box-shadow: 0 0 0 3px var(--accent); }
.lp-show .lp-shot img, .lp-show .lp-pair2 img { box-shadow: 12px 12px 0 var(--accent); }
.lp-show .lp-shot.lp-flip img { box-shadow: -12px 12px 0 var(--accent); }
.lp-traps dt { color: var(--accent); }
@media (max-width: 900px) { .lp-show .lp-shot img, .lp-show .lp-pair2 img, .lp-show .lp-shot.lp-flip img { box-shadow: 8px 8px 0 var(--accent); } }

/* Landing: light / dark switch top right (owner, Nov 2026), same [data-theme-set] buttons as Settings (public/theme.js). */
.lp-start .lp-theme { position: absolute; top: 14px; right: 22px; z-index: 2; }
.lp-theme button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 13px; }
.lp-theme button.on { background: var(--accent); color: var(--on-accent); }
@media (max-width: 560px) { .lp-start .lp-theme { top: 10px; right: 16px; } .lp-theme button { padding: 6px 9px; } }
/* A more visible hero video (owner: "make the video a bit more visible"); the shade still keeps the headline readable. */
.hero-video { opacity: .62; filter: none; }
.hero-shade { background: radial-gradient(ellipse at 30% 40%, rgba(15, 15, 17, .55) 0%, rgba(15, 15, 17, .25) 65%), linear-gradient(to bottom, transparent 55%, var(--bg) 100%); }
:root[data-theme="light"] .hero-shade { background: radial-gradient(ellipse at 30% 40%, rgba(230, 230, 226, .7) 0%, rgba(230, 230, 226, .3) 65%), linear-gradient(to bottom, transparent 55%, var(--bg) 100%); }

/* Landing: "From the blog" (src/blog.js landingBlogHtml). The blog is public and in the sitemap for search engines. */
.lp-blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 18px 0 14px; text-align: left; }
.lp-post { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--r-lg); color: var(--text); text-decoration: none; min-width: 0; }
.lp-post:hover { border-color: var(--accent); text-decoration: none; }
.lp-post b { font-size: 17px; line-height: 1.3; }
.lp-post span:not(.muted) { color: var(--muted); line-height: 1.5; }
@media (max-width: 900px) { .lp-blog-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- Mobile pass (owner, Nov 2026: "We HAVE to get this looking good on mobile") ---- */
/* Watch: filters fold behind "Filters" on phones so results start in the first screen (rule 22). */
.wf-toggle { display: none; }
@media (max-width: 760px) {
  .wf-toggle { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 8px; }
  .wf-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--on-accent); font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
  .wf-count[hidden] { display: none; }
  #wPaneStreamers:not(.wf-open) > .wme, #wPaneStreamers:not(.wf-open) > .wsummary, #wPaneStreamers:not(.wf-open) > .wfrow, #wPaneStreamers:not(.wf-open) > .wfilters { display: none; }
  .whub-hero .sub.left { display: none; }
}
/* Light theme contrast fixes found on phones: the squad / studio hero sits on a dark banner with a dark fade, and the
   Tabletop board tools sit on the dark board, so both keep light text in either theme. */
:root[data-theme="light"] .sp-hero-inner, :root[data-theme="light"] .sp-hero-inner h1, :root[data-theme="light"] .sp-hero-inner .muted, :root[data-theme="light"] .sp-hero-inner a:not(.btn) { color: #f4f4f6; }
:root[data-theme="light"] .sp-hero-inner .muted { color: #d6d6dc; }
:root[data-theme="light"] .tt-tool:not(.on) { color: #ececf0; }
/* Swipe hint on sideways scrolling rows (public/mobile.js marks them sx-r / sx-l). */
.sx-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.sx-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
.sx-r.sx-l { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
/* Phone composer: one tidy row (destination, images, Post), smaller type, the avatar goes. */
@media (max-width: 560px) {
  .tw-compose .tw-row > .av, .tw-compose .tw-row > img { display: none; }
  .tw-compose textarea { font-size: 16px; min-height: 44px; }
  .tw-compose-bar { flex-wrap: nowrap; gap: 6px; }
  .tw-compose-bar > * { min-width: 0; }
  .tw-compose-bar > .muted { display: none; }
  .tw-compose-bar .btn.primary, .tw-compose-bar button[type="submit"] { margin-left: auto; flex: none; }
  .tw-compose-bar .fc-dest-wrap { flex: 0 1 auto; min-width: 0; }
  .tw-compose-bar .fc-dest-wrap button, .tw-compose-bar .tw-imgbtn { padding: 6px 9px; }
}

/* ---- Mobile round 2: thumb sized tap targets (about 44px, Apple / Google guidance) and no zoom on focus ---- */
@media (max-width: 760px) {
  .btn, button.btn, a.btn, button.primary { min-height: 44px; }
  .btn.small, a.btn.small, button.small, .small-btn, .gtool, .chip, button.chip, .vault-mo, .wpreset, .tw-imgbtn, .pill-btn, .theme-switch button { min-height: 40px; }
  .chip, button.chip, .vault-mo, .pill-btn { display: inline-flex; align-items: center; }
  .tw-act, .tw-more { min-height: 40px; min-width: 40px; justify-content: center; }
  button.linkbtn, a.linkbtn, .back-btn, .hw-more, .tw-more-link { min-height: 36px; display: inline-flex; align-items: center; }
  summary { padding-top: 8px; padding-bottom: 8px; }
  .trk-x { min-width: 36px; min-height: 36px; }
  /* iPhones zoom the page when a field with text under 16px is tapped: keep form text at 16px on phones. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select, textarea { font-size: 16px; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select { min-height: 44px; }
  .check-row { min-height: 44px; }
  .wtabs button, .wtab-link, [class*="tabs"] > button, [role="tablist"] > button { min-height: 40px; }
}
/* Stream page on phones: the player, then who it is (Follow, Watch together), then chat. CSS order only, so the player
   and chat iframes are never moved or reloaded (rule 32). */
@media (max-width: 900px) {
  main.wchannel { display: flex; flex-direction: column; }
  main.wchannel > * { order: 5; }
  main.wchannel > p.small, main.wchannel > .wtw-hint, main.wchannel > .wms-bar, main.wchannel > .wetq-row { order: 0; }
  main.wchannel > .wplayer-wrap { display: contents; }
  main.wchannel .wplayer { order: 1; margin-top: 10px; }
  main.wchannel > .wabout { order: 2; margin-top: 12px; }
  main.wchannel .wchat { order: 3; margin: 12px 0 16px; height: 380px; }
}
/* Badges that were hard to read: chat mode is an amber status badge, "Join in" a neutral tag (no blue in chrome). */
.wbadge.rk-chat, .rk-chat { background: #f2b544; color: #1d1405; border-color: transparent; }
.wjoin { color: var(--text); background: var(--panel2); border-color: var(--line); }
/* Pop-up sheets on phones: a real close button in the top right, and the action buttons stay stuck to the bottom of the
   sheet so a long form (Create a squad, My preferences) never hides its Save button. */
@media (max-width: 760px) {
  .modal-card { position: relative; }
  .modal-card > .close, .modal-card > button.close, .modal-card > .linkbtn.close { position: absolute; top: 8px; right: 8px; left: auto; width: 40px; height: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; z-index: 3; }
  .modal-card > h2:first-of-type, .modal-card > h3:first-of-type { padding-right: 44px; }
  .modal-card > .row-btns:last-child, .modal-card > form > .row-btns:last-child, .modal-card > form > button.primary:last-child, .modal-card .sheet-actions {
    position: sticky; bottom: calc(-18px - env(safe-area-inset-bottom)); z-index: 2; background: var(--panel); margin-bottom: calc(-18px - env(safe-area-inset-bottom));
    padding: 10px 0 calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
}
/* Live pill on profiles: readable in both looks (light pink text on a pink tint vanished on the light theme). */
:root[data-theme="light"] .live-pill { background: #fde4e2; border-color: #f2b8b4; color: #9d1c14 !important; }
/* Phones and tablets can't launch Steam games or OBS: no launch boxes or Steam launch links there (owner, Nov 2026).
   Buttons are rebuilt as "Set category" by ssNoLaunch (public/theme.js); this hides anything left over. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  [data-sw-launch], .sw-launch-box, .sc-launch-box, a[href^="steam://"], .launch-mini.launch:not([data-golive]) { display: none !important; }
}
/* Folded helper text on phones (public/mobile.js). */
@media (max-width: 760px) {
  .fold-p:not(.fold-open) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0; }
  .fold-more { display: inline-flex; padding: 2px 0; margin: 0 0 8px; color: var(--accent); font-size: 13px; min-height: 32px; }
}
@media (min-width: 761px) { .fold-more { display: none; } .fold-p { display: block; } }
/* Phone menu (owner, Nov 2026): the drawer fills the screen under the header, the header (with the ☰, now an X) stays on
   top so you can close it, and the page behind can't scroll. Swipe left to close (public/sidebar.js). */
@media (max-width: 900px) {
  body.drawer-open header.top { z-index: 70; }
  /* Lock the page, not the body: overflow on <body> makes it the scroll box for sticky things, so the header and the page
     picker jumped away when the menu opened mid page (owner, Nov 2026: "nav bar broke here on the series page"). */
  html:has(body.drawer-open) { overflow: hidden; }
  .wlayout.drawer .snav-collapse { display: none; }
  .wlayout.drawer .wside.snav, .wlayout.drawer .wside { top: var(--hdr-h, 56px); height: calc(100dvh - var(--hdr-h, 56px)); width: 100vw; max-width: 100vw; box-shadow: none; z-index: 65; overflow-y: auto; overscroll-behavior: contain; padding-top: 12px; border-right: 0; }
}
/* Tab pickers on phones (public/mobile.js): one full width button instead of a row that runs off the screen. */
.tabpick { display: none; }
@media (max-width: 760px) {
  .tabpick { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 46px; padding: 10px 14px; margin: 4px 0 12px;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--text); font-size: 16px; font-weight: 600; text-align: left; }
  .tabpick span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabpick svg { flex: none; color: var(--accent); }
  .tabpick-row { display: none !important; }
  .tabpick-sheet { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .55); display: flex; align-items: flex-end; }
  .tabpick-card { width: 100%; max-height: 80dvh; overflow-y: auto; background: var(--panel); border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 8px 12px calc(16px + env(safe-area-inset-bottom)); animation: sheet-up .18s ease-out; }
  .tabpick-h { font-size: 13px; color: var(--muted); padding: 8px 6px; }
  .tabpick-opt { display: block; width: 100%; text-align: left; min-height: 48px; padding: 12px 14px; margin: 2px 0; background: transparent; border: 0; border-radius: var(--r-md); font-size: 16px; font-weight: 500; color: var(--text); }
  .tabpick-opt.on { background: var(--accent); color: var(--on-accent); }
}
/* Game cards on phones (owner, Nov 2026: "make the circle for strong shot at the top and more prominent ... SUPER easy to
   understand at a glance"): the score and its verdict lead the card in a big, clear strip. */
@media (max-width: 760px) {
  .card .scorebox, .card.big .scorebox { grid-column: 1 / -1; grid-row: 1; order: -1; display: flex; align-items: center; gap: 14px; text-align: left;
    padding: 0 0 12px; margin-bottom: 2px; border-bottom: 1px solid var(--line); }
  .card .score, .card.big .score { width: 64px; height: 64px; font-size: 24px; border-width: 0; margin: 0; flex: none; }
  .card .verdict, .card.big .verdict { font-size: 20px; font-weight: 600; color: var(--text); margin: 0; white-space: normal; }
}
/* Position Tracker on phones (owner, Nov 2026: "WAY too much text at the top ... icons, images"): the top is two quick
   tiles (your viewers, how fresh the numbers are) and the tracked games strip; the explanations live on How it works. */
@media (max-width: 760px) {
  #tab-picks .tab-title .muted, #viewersSource, #freshness > span:not(.fresh), #rcLine, #tab-picks .trk-head .muted { display: none !important; }
  #tab-picks .viewerline { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-bottom: 12px; }
  #tab-picks .viewerline .spacer { display: none; }
  #tab-picks .viewerline > [data-viewers], #tab-picks .viewerline > #freshness { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 8px 12px;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--text); }
  #tab-picks .viewerline > [data-viewers] { font-size: 0; }
  #tab-picks .viewerline > [data-viewers] .pill-btn { font-size: 16px; min-height: 36px; padding: 4px 10px; }
  #tab-picks .viewerline > [data-viewers]::after { content: "viewers"; font-size: 14px; color: var(--muted); }
  #tab-picks .viewerline > [data-viewers]::before, #tab-picks .viewerline > #freshness::before { content: ""; flex: none; width: 20px; height: 20px; background: var(--accent);
    -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
  #tab-picks .viewerline > [data-viewers]::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E"); }
  #tab-picks .viewerline > #freshness { font-size: 14px; }
  #tab-picks .viewerline > #freshness::before { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
  #tab-picks .viewerline > [data-calm-alt] { grid-column: 1 / -1; }
}

/* Phones: squad and neighborhood tabs show just their own content (owner, Nov 2026: "Just leave it as the feed",
   "remove this from the bottom of all the pages outside of the live now page"). The side column (Coming up, Members,
   drop ins) only sits under Live now (squads: also About, where the invite code and join requests live). Raids are
   never shown on phones ("Nobody is going live from their phone"). */
@media (max-width: 760px) {
  .nb-layout:not(:has([data-nb-tab="live"].on)) > .nb-side { display: none !important; }
  .sp-layout:not(:has([data-sq-tab="live"].on)):not(:has([data-sq-tab="about"].on)) > .sp-side { display: none !important; }
  #rkPanelHood, .nb-side .rk-panel { display: none !important; }
}

/* Phones: the Streamers / Following / Games / Consoles / Series box fits on one line, every tab the same height and
   centered (owner, Nov 2026: "askew"). Links and buttons share one box model so nothing sits higher than its neighbor. */
@media (max-width: 760px) {
  .whub-top .wtabs { display: flex; align-items: stretch; overflow: hidden; }
  .whub-top .wtabs > button, .whub-top .wtabs > .wtab-link { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; margin: 0; padding: 0 6px; font-size: 13px; line-height: 1; }
  /* Stream page chat: tall enough that Twitch's pinned messages and goals don't eat it (owner: "WAY too small"). */
  main.wchannel .wchat { height: max(480px, calc(100dvh - var(--hdr-h, 56px) - 96px)); }
}

/* Phones: Home feed opens with your neighborhood above the posts, and Live for you is off (owner, Nov 2026). The side
   column's boxes join the page's single column (display: contents) so the neighborhood can sit first. */
@media (max-width: 760px) {
  #forumWrap.forum-wrap { display: flex; flex-direction: column; gap: 14px; }
  #forumWrap > .forum-main { order: 1; }
  #forumWrap > .forum-side { display: contents; }
  #forumWrap > .forum-side > * { order: 2; margin: 0; }
  #forumWrap > .forum-side > .fs-hood { order: 0; }
  #forumWrap #fsLive, #forumWrap #fsLiveMore { display: none !important; }
  /* Squads: the extra numbers move off the hero, and the side column only shows under Live now and About. */
  .sp-hero .sq-hero-more { display: none; }
  .sq-opts-btns { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sq-opts-btns > *, .sq-opts-btns .fol-sqbtns > * { width: 100%; justify-content: center; margin: 0; }
  .sq-opts-btns .fol-sqbtns { display: contents; }
  .sq-opts-btns .fol-sqbtns:empty { display: none; }
  .sq-hero-join { margin-top: 10px; }
  .sp-layout:not(:has([data-sq-tab="about"].on)) > .sp-side { display: none !important; }
  /* Prices: filters behind one button, games above the fold. */
  .pp-bar:not(.open) { display: none; }
  .pp-toggle { margin-bottom: 12px; }
}
.pp-toggle { display: none; }
@media (max-width: 760px) { .pp-toggle { display: inline-flex; align-items: center; gap: 6px; } }
@media (max-width: 760px) { .sp-layout > .sp-side { order: 2; } .sp-layout > .sp-main { order: 1; } }

/* Watch party header: the title column never gets squeezed by the buttons (owner, Nov 2026: 4 streams on a phone
   "BLOWS UP"). The title takes the full row and the buttons wrap under it. */
.wparty-head > .grow { flex: 1 1 320px; }
.wparty-head h1 { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .wparty-head { flex-direction: column; align-items: stretch; }
  .wparty-head > .grow { flex: none; width: 100%; }
  .wparty-head .wp-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .wparty-head .wp-actions > * { width: 100%; margin: 0; justify-content: center; }
  .wp-titlerow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .wp-titlerow h1 { font-size: 22px; }
}
/* /multistream (src/multiview.js) */
.mv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.mv-head h1 { margin: 0; font-size: 26px; }
@media (max-width: 760px) { .mv-head h1 { font-size: 22px; } }

/* Stream page on phones (owner, Nov 2026: "these buttons just look messy", "diminish the text", "a More thing"): name,
   live line and two buttons up top; the other buttons, the title, bio and vibes fold behind More. */
.wabout-toggle { display: none; }
@media (max-width: 760px) {
  .wabout .wabout-head { flex-wrap: wrap; }
  .wabout .wabout-head h1 { font-size: 20px; }
  .wabout .wabout-head > .row-btns { flex: 1 0 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .wabout .wabout-head > .row-btns > * { width: 100%; margin: 0; justify-content: center; }
  .wabout:not(.open) .wabout-head > .row-btns > :nth-child(n+3) { display: none; }
  .wabout:not(.open) .wabout-more { display: none; }
  .wabout-toggle { display: inline-flex; margin-top: 8px; }
  .wabout-more p { font-size: 14px; }
  .wms-bar .wms-note { display: none; }
}

/* Indie game page buy box: Follow and Share are the same height, side by side (owner, Nov 2026: "extra slim"). */
.gp-buy-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; }
.gp-buy-row > .btn, .gp-buy-row > button { min-height: 40px; margin: 0; justify-content: center; display: inline-flex; align-items: center; }
.gp-buy-row > .follow-btn.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* Search boxes: one box, one focus ring (owner, Nov 2026: "freaks out when clicked on"). The input inside a search
   field never draws its own border, background, outline or tap target size; the field shows focus. */
.snav-search input, .gs-field input { border: 0 !important; background: none !important; outline: 0 !important; box-shadow: none !important; min-height: 0 !important; margin: 0 !important; border-radius: 0 !important; }
.snav-search:focus-within, .gs-field:focus-within { border-color: var(--accent); box-shadow: none; outline: 0; }
.snav-gsearch { display: none; }
@media (max-width: 760px) {
  .snav-search { display: none !important; }
  .snav-gsearch { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 14px; margin: 0 0 6px; background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--muted); font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
  .snav-gsearch svg { flex: none; color: var(--text); }
  /* the header search on phones: just the field (type picker lives on the results page), full width, 44px */
  .gs .gs-type, .gs .ss-wrap { display: none !important; }
  .gs-field { height: 44px; background: var(--panel2); }
  .gs-field input { font-size: 16px; }
}
@media (max-width: 760px) { #forumWrap > .forum-side > .fs-hood { width: 100%; box-sizing: border-box; } }

/* Phones: the page picker ("Feed", "Overview"...) sticks under the header once you scroll past it (owner, Nov 2026). */
@media (max-width: 760px) {
  .tabpick { position: sticky; top: calc(var(--hdr-h, 56px) + 6px); z-index: 30; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
}
/* Phones: post with a round pencil button bottom right instead of an inline box (public/mobile.js). */
.compose-fab { display: none; }
@media (max-width: 760px) {
  .fcompose:not(.sheet-open), .pf-compose:not(.sheet-open) { display: none !important; }
  .compose-fab { display: inline-flex; align-items: center; justify-content: center; position: fixed; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 60; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); cursor: pointer; }
  .compose-fab[hidden] { display: none !important; }
  .fab-back { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .5); }
  .fcompose.sheet-open, .pf-compose.sheet-open { display: block !important; position: fixed !important; left: 0; right: 0; bottom: 0; top: auto !important; z-index: 91; margin: 0 !important; max-height: 85vh; overflow-y: auto; padding: 52px 16px calc(16px + env(safe-area-inset-bottom)) !important; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(0, 0, 0, .35); }
  .sheet-open .cf-x { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; border: 0; background: none; color: var(--text); font-size: 18px; cursor: pointer; border-radius: var(--r-md); }
  .sheet-open textarea { min-height: 120px; }
  html:has(body.fab-sheet) { overflow: hidden; }
}
@media (max-width: 760px) { body:has(.chat-dock > *) .compose-fab { bottom: calc(134px + env(safe-area-inset-bottom)); } }

/* Post backgrounds (src/postextras.js BGS): our own flat colors for short text posts, on cards and in the composer. */
.pbg-ember { --pbg: #e8743b; --pfg: #160c06; }
.pbg-night { --pbg: #17171a; --pfg: #ffffff; }
.pbg-plum { --pbg: #5b2a6e; --pfg: #ffffff; }
.pbg-ocean { --pbg: #1d4e7a; --pfg: #ffffff; }
.pbg-forest { --pbg: #24573c; --pfg: #ffffff; }
.pbg-berry { --pbg: #b0284a; --pfg: #ffffff; }
.pbg-sun { --pbg: #f2c14e; --pfg: #1b1405; }
.pbg-mint { --pbg: #bfe8d2; --pfg: #0f2a1c; }
.pbg-sky { --pbg: #cfe3f7; --pfg: #0d1f33; }
.pbg-sand { --pbg: #efe4d2; --pfg: #2a2116; }
.px-sw[class*="pbg-"] { background: var(--pbg); }
.tw-bgtext { background: var(--pbg) !important; color: var(--pfg) !important; min-height: 180px; display: flex !important; align-items: center; justify-content: center; text-align: center; padding: 24px 18px !important; border-radius: var(--r-lg); font-size: 22px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.tw-bgtext a, .tw-bgtext .hashtag { color: inherit; text-decoration: underline; }
textarea.tw-bgtext { display: block !important; resize: none; border: 0 !important; }
textarea.tw-bgtext::placeholder { color: var(--pfg); opacity: .7; }
/* "Add to your post" row (public/postextras.js) */
.px-bar { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-md); }
.px-label { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; color: var(--muted); }
.px-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: none; border: 1px solid transparent; border-radius: var(--r-md); color: var(--text); cursor: pointer; }
.px-btn:hover { background: var(--panel2); }
.px-btn.on { background: var(--accent); color: var(--on-accent); }
.px-panel { margin-top: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel2); }
.px-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.px-sw { width: 34px; height: 34px; padding: 0; border: 2px solid var(--line); border-radius: var(--r-md); cursor: pointer; }
.px-sw.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--panel2) inset; }
.px-none { background: var(--panel); position: relative; }
.px-none::after { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; background: var(--muted); transform: rotate(-45deg); }
.px-etabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin-bottom: 8px; }
.px-etabs button { flex: none; padding: 5px 10px; background: none; border: 1px solid var(--line); border-radius: var(--r-md); color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.px-etabs button.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.px-emoji { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 2px; max-height: 220px; overflow-y: auto; }
.px-emoji button { height: 38px; padding: 0; background: none; border: 0; border-radius: var(--r-md); font-size: 22px; line-height: 1; cursor: pointer; }
.px-emoji button:hover { background: var(--panel); }
.px-gsearch { display: block; margin-bottom: 8px; }
.px-gsearch input { width: 100%; box-sizing: border-box; }
.px-ggrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; max-height: 300px; overflow-y: auto; }
.px-g { padding: 0; border: 0; background: var(--panel); border-radius: var(--r-md); overflow: hidden; cursor: pointer; aspect-ratio: 1; }
.px-g img { width: 100%; height: 100%; object-fit: cover; display: block; }
.px-ggrid > p { grid-column: 1 / -1; }
.px-powered { margin-top: 6px; font-size: 11px; color: var(--muted); text-align: right; }
.px-gifprev { position: relative; display: inline-block; margin-top: 8px; max-width: 100%; }
.px-gifprev img { display: block; max-width: 100%; max-height: 260px; border-radius: var(--r-lg); }
.px-gifx { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .65); color: #fff; cursor: pointer; }
.px-gifprev .tw-via { position: absolute; left: 6px; bottom: 6px; background: rgba(0, 0, 0, .6); color: #fff; padding: 1px 6px; border-radius: var(--r-sm); }
.tw-gif { position: relative; margin-top: 8px; max-width: 100%; }
.tw-gif img { display: block; max-width: 100%; height: auto; max-height: 360px; width: auto; border-radius: var(--r-lg); }
.tw-via { font-size: 11px; color: var(--muted); }
.tw-gif .tw-via { display: block; margin-top: 3px; }
@media (max-width: 760px) {
  .px-btn { width: 44px; height: 44px; }
  .px-label { font-size: 14px; }
}

/* Phones: Home feed side boxes (owner, Nov 2026): trending hashtags at the top as one swipeable chip row, then the feed;
   Friends online, Trending squads and Your squads are desktop only. */
@media (max-width: 760px) {
  #forumWrap > .forum-side > .fs-tags { order: 0; padding: 10px 12px; }
  #forumWrap > .forum-side > .fs-tags h3 { font-size: 14px; margin: 0 0 6px; }
  #forumWrap > .forum-side > .fs-tags > div:last-child, #forumWrap .fs-tags .fs-tagrow { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  #forumWrap .fs-tags a, #forumWrap .fs-tags button { flex: none; }
  #forumWrap .fs-friends, #forumWrap .fs-trendsq, #forumWrap .fs-mine { display: none !important; }
}
/* "Where to post": a search box in the list; on phones the list is a full width sheet above the post sheet. */
.fc-dsearch { display: block; padding: 6px 6px 4px; position: sticky; top: 0; background: var(--panel); z-index: 1; }
.fc-dsearch input { width: 100%; box-sizing: border-box; }
.fc-opt[hidden], .fc-opt-h[hidden] { display: none !important; }
@media (max-width: 760px) {
  .fc-destmenu { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: auto !important; max-width: none !important; max-height: 70vh !important; z-index: 96 !important; border-radius: var(--r-lg) var(--r-lg) 0 0 !important; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -8px 24px rgba(0, 0, 0, .35); }
  .fc-destmenu .fc-opt { min-height: 52px; }
}
/* A picker alone in its own small box (like the Command Center's #ccNav) can't stick inside it: the box sticks instead. */
@media (max-width: 760px) {
  :has(> .tabpick):not(:has(> :not(.tabpick):not(.tabpick-row))) { position: sticky; top: calc(var(--hdr-h, 56px) + 6px); z-index: 30; }
  :has(> .tabpick):not(:has(> :not(.tabpick):not(.tabpick-row))) > .tabpick { position: static; }
}
@media (max-width: 760px) {
  #ccNav:has(> .tabpick) { position: sticky; top: calc(var(--hdr-h, 56px) + 6px); z-index: 30; }
  #ccNav > .tabpick { position: static; }
}
/* The page picker's list hangs from the button at the top of the screen (owner, Nov 2026), not a sheet from the bottom. */
@media (max-width: 760px) {
  .tabpick-sheet { align-items: flex-start; background: rgba(0, 0, 0, .45); }
  .tabpick-card { margin: var(--tp-top, 120px) 12px 0; width: calc(100% - 24px); max-height: calc(100dvh - var(--tp-top, 120px) - 90px); border-radius: var(--r-lg); padding: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); animation: none; }
  .tabpick-h { display: none; }
}
/* My games on phones: long names wrap and the Set category button stays on the right edge (owner, Nov 2026). */
@media (max-width: 760px) {
  #libBody td:nth-child(2) { white-space: normal; }
  #libBody td:nth-child(2):has(.launch-mini) { display: flex; align-items: center; gap: 10px; }
  #libBody td:nth-child(2) > a { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
  #libBody td:nth-child(2) > .launch-mini { flex: none; margin-left: auto; width: 32px; height: 32px; }
  #libBody { max-width: 100%; }
  #libBody td:first-child { width: 44px; }
}
/* Clip Angel rows (owner, Nov 2026: "Clips of you section is broken"): picture + title + one line, buttons on their own row. */
.clip-row { display: grid !important; grid-template-columns: 120px minmax(0, 1fr); gap: 6px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.clip-row .clip-th { width: 120px; height: 68px; object-fit: cover; border-radius: var(--r-md); }
.clip-row .grow { min-width: 0; }
.clip-row .grow a b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.clip-row .clip-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
@media (min-width: 761px) { .clip-row .clip-acts { grid-column: 2; } }
@media (max-width: 760px) { .clip-row { grid-template-columns: 96px minmax(0, 1fr); } .clip-row .clip-th { width: 96px; height: 54px; } }
/* My games on phones: each game is a small card (picture | name + Set category / shot + row / Hide), never squeezed. */
@media (max-width: 760px) {
  #libBody, #libBody ~ thead, table:has(> #libBody) > thead { display: block; }
  table:has(> #libBody) > thead { display: none; }
  table:has(> #libBody) { display: block; width: 100%; min-width: 0 !important; }
  #libBody tr { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
  #libBody td { display: block; padding: 0 !important; border: 0 !important; min-width: 0; }
  #libBody td:nth-child(1) { grid-row: 1 / span 3; align-self: start; }
  #libBody td:nth-child(2) { grid-column: 2 / -1; font-weight: 500; }
  #libBody td:nth-child(2) > a { overflow-wrap: normal; word-break: normal; }
  #libBody td:nth-child(3) { grid-column: 2; font-size: 13px; }
  #libBody td:nth-child(4) { grid-column: 2; }
  #libBody td:nth-child(5) { grid-column: 2; font-size: 13px; }
  #libBody td:nth-child(6), #libBody td:nth-child(7) { display: none; }
  #libBody td:nth-child(8) { grid-column: 3; grid-row: 2 / span 2; align-self: center; }
  #libBody td.empty-row { grid-column: 1 / -1; }
}
/* The page picker fades to orange once it sticks under the header (owner, Nov 2026). */
.tabpick { transition: background-color .4s ease, color .4s ease, border-color .4s ease; }
@media (max-width: 760px) {
  .tabpick.stuck { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
  .tabpick.stuck svg { color: var(--on-accent); }
  .tabpick.tabpick-top { margin: 0 0 10px; }
}
@media (prefers-reduced-motion: reduce) { .tabpick { transition: none; } }
/* Neighborhood calendar: title on its own line, then one tidy row: < Week of Nov 8 > (owner, Nov 2026: arrows misaligned). */
.nb-cal-head { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.nb-cal-head h3 { margin: 0; }
.nb-cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nb-cal-arrow { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0 !important; }
/* Follow buttons (games, studios) look like every other button (owner, Nov 2026: "oddly shaped"). */
.follow-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel2); color: var(--text); font: inherit; font-weight: 500; line-height: 1; cursor: pointer; }
.follow-btn:hover { border-color: var(--muted); }
.follow-btn.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.row-btns > .follow-btn, .row-btns > .btn { min-height: 40px; }
.dev-studiolink { margin: -6px 0 14px; }
/* Blog cards carry a picture (owner, Nov 2026). */
.post-card { overflow: hidden; }
.post-card-img { display: block; width: calc(100% + 40px); max-width: none; height: auto; aspect-ratio: 640 / 336; object-fit: cover; margin: -18px -20px 14px; background: var(--panel2); }
/* Home feed on phones: the bar with the page picker (Discover / Following / Trending / Bookmarks) and For you / Latest
   sticks under the header (owner, Nov 2026). */
@media (max-width: 760px) {
  .fbar:has(> .tabpick) { position: sticky; top: calc(var(--hdr-h, 56px) + 4px); z-index: 30; background: var(--bg); padding: 4px 0 6px; }
  .fbar > .tabpick { position: static; margin-bottom: 6px; }
}

/* Galleries on phones look like Instagram (owner, Nov 2026): three square pictures per row with thin gaps, no captions or
   borders, edge to edge in their box. The search stays; the "N images" line goes. Tapping opens the post as before. */
@media (max-width: 760px) {
  .gal-box { padding: 10px 0 0 !important; overflow: hidden; }
  .gal-box .gal-search { margin: 0 10px 10px; }
  .gal-box .gal-note { display: none; }
  .gal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 2px !important; }
  .gal-tile { border: 0 !important; border-radius: 0 !important; background: var(--panel2); }
  .gal-img { aspect-ratio: 1 / 1 !important; }
  .gal-cap { display: none !important; }
  .gal-more { right: 4px; bottom: 4px; font-size: 11px; }
  .gal-badge { font-size: 10px; }
  .gal-more-btn, .gal-morebtn { margin: 10px auto !important; }
  .gal-empty { padding: 24px 12px; }
}
/* Sticky page pickers touch the header: no gap where the page shows through when scrolling (owner, Nov 2026). The
   wrappers get a solid page background, and a stuck button paints the strip above it so nothing peeks between. */
@media (max-width: 760px) {
  .tabpick { top: var(--hdr-h, 56px) !important; }
  #ccNav:has(> .tabpick), .fbar:has(> .tabpick),
  :has(> .tabpick):not(:has(> :not(.tabpick):not(.tabpick-row))) { top: var(--hdr-h, 56px) !important; background: var(--bg); box-shadow: 0 -12px 0 0 var(--bg); padding-top: 6px; }
  .tabpick.stuck { box-shadow: 0 -10px 0 0 var(--bg), 0 6px 16px rgba(0, 0, 0, .18); }
  .fbar:has(> .tabpick) { margin-left: -2px; margin-right: -2px; padding-left: 2px; padding-right: 2px; }
}
/* Command Center on phones: no "Command Center" label above the picker; the picker box touches the header. */
@media (max-width: 760px) {
  #ccNav .cc-title { display: none !important; }
  #ccNav:has(> .tabpick) { top: var(--hdr-h, 56px) !important; margin-top: 0; padding-top: 6px; }
}

/* ===== Small phones (owner, Nov 2026: "So much is busted on my phone. Its a smaller screen"; about 350px wide with
   bigger text). Everything below must fit 320px. ===== */
@media (max-width: 760px) {
  /* Game cards: small cover next to the title; tags, reason and every button use the full card width. */
  .card, .card.big { grid-template-columns: 56px minmax(0, 1fr) !important; gap: 8px 12px; padding: 14px !important; }
  .card > .art, .card.big > .art { width: 56px !important; height: 75px !important; grid-row: span 3; align-self: start; }
  .card > .card-body { display: contents; }
  .card > .card-body > * { grid-column: 2; min-width: 0; }
  .card > .card-body > .meta, .card > .card-body > .reason, .card > .card-body > .card-actions { grid-column: 1 / -1; }
  .card h4, .card.big h4 { font-size: 18px; overflow-wrap: anywhere; }
  .card .gtool > .btn, .card .gtool > button, .card .gtool > a, .gtool > * { font-size: 13px !important; padding: 0 4px !important; white-space: nowrap; }
}
@media (max-width: 760px) { .gtool > .btn, .gtool > button, .gtool > a { width: auto !important; flex: 1 1 0 !important; } }
@media (max-width: 330px) {
  .gtool { flex-wrap: wrap; }
  .gtool > .btn, .gtool > button, .gtool > a { flex: 1 1 calc(50% - 1px) !important; min-height: 40px; border-bottom: 1px solid var(--line) !important; }
}
@media (max-width: 760px) {
  /* Position Tracker tiles wrap their words instead of cutting them, and stack on narrow phones. */
  #tab-picks .viewerline { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important; }
  #tab-picks .viewerline > * { min-width: 0; white-space: normal !important; overflow-wrap: normal; }
  /* Home: trending hashtags scroll inside their box. */
  #forumWrap .fs-tags { max-width: 100%; min-width: 0; overflow: hidden; box-sizing: border-box; }
  #forumWrap .fs-tags .sr-tags { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; }
  /* Tables never push the page wider: they scroll inside themselves. */
  #tab-growth table, #tab-library table:not(:has(#libBody)), .card-box table { display: block; max-width: 100%; overflow-x: auto; }
  /* Watch: the featured strip scrolls sideways inside the page. */
  #wFeatured, .wspot-group { max-width: 100%; min-width: 0; }
  .wspot-list { display: flex; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .wspot-card { flex: 0 0 auto; }
  /* Watch tabs: when they can't all fit (small phones, big text) they turn into the page picker instead of squishing. */
  .whub-top .wtabs { overflow-x: auto !important; scrollbar-width: none; }
  .whub-top .wtabs > button, .whub-top .wtabs > .wtab-link { flex: 0 0 auto !important; padding: 0 10px !important; }
  /* Shared post previews inside a post: no big letter column, text uses the width. */
  .tw-card, .share-card { display: block !important; }
  .tw-card > .tw-card-ic, .share-card > .sc-ic, .tw-card-letter { display: none !important; }
}
@media (max-width: 760px) {
  .share-cardlet.tw-quote { display: block !important; padding: 10px 12px !important; }
  .share-cardlet.tw-quote > .sc-icon { display: none !important; }
  .share-cardlet.tw-quote > img { display: block; width: 100%; max-height: 160px; object-fit: cover; margin-bottom: 8px; border-radius: var(--r-md); }
}
/* The strip above the stuck orange bar is gone (owner, Nov 2026: "a weird bar on top of the navbar when I scroll up"):
   wrappers add no background, padding or shadow, the stuck button sits exactly under the header with square top corners. */
@media (max-width: 760px) {
  #ccNav:has(> .tabpick), .fbar:has(> .tabpick), :has(> .tabpick):not(:has(> :not(.tabpick):not(.tabpick-row))) { background: none !important; box-shadow: none !important; padding-top: 0 !important; margin-top: 0 !important; }
  #ccNav > .tabpick, .fbar > .tabpick { margin-top: 0 !important; }
  .tabpick.stuck { box-shadow: 0 6px 16px rgba(0, 0, 0, .18) !important; border-top-left-radius: 0; border-top-right-radius: 0; }
  .fbar:has(> .tabpick) > :not(.tabpick):not(.tabpick-row) { background: var(--bg); }
}
@media (max-width: 760px) {
  /* Tabletop panel tabs: a little smaller so all six fit (no "Tabl"), then they scroll if the text is big. */
  .tt-side .tt-stabs { overflow-x: auto; scrollbar-width: none; }
  .tt-side .tt-stabs > button { flex: 0 0 auto; padding: 10px 9px !important; font-size: 13px !important; }
}
@media (max-width: 760px) {
  /* Game card buttons stay inside the card (an old desktop rule pulled them 86px to the right). */
  .card .card-actions, .card:not(.big) .card-actions, .card.big .card-actions { margin-right: 0 !important; max-width: 100% !important; min-width: 0; }
  .card .card-actions > * { max-width: 100%; min-width: 0; }
  /* Safety net: nothing can make a phone page scroll sideways (clip keeps sticky bars working). */
  html, body { overflow-x: clip; }
  /* The page picker's list always fits the screen. */
  .tabpick-card { width: auto !important; max-width: calc(100vw - 24px); margin-left: 12px !important; margin-right: 12px !important; box-sizing: border-box; flex: 1 1 auto; }
}
@media (max-width: 760px) { .card .card-actions { flex-wrap: nowrap !important; height: auto !important; } }
.card .card-actions { flex-wrap: nowrap; }
@media (max-width: 760px) {
  /* Indie store: search and sort share the full width. */
  .sf-right { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; width: 100%; }
  .sf-right > * { width: 100% !important; min-width: 0; box-sizing: border-box; }
}
/* My games on phones (owner, Nov 2026: "the game boxes look terrible", "the orange boxes don't need to exist because nobody
   is gonna launch their game from mobile", "make the game icons bigger and line up on the page"): no launch buttons, a
   bigger cover on the left, name / platform / shot / row stacked beside it, Hide and Remove as small links under that. */
@media (max-width: 760px) {
  #libBody .launch-mini { display: none !important; }
  #libBody tr { grid-template-columns: 72px minmax(0, 1fr) !important; gap: 4px 14px !important; padding: 12px 0 !important; align-items: start !important; }
  #libBody td:nth-child(1) { grid-row: 1 / span 5 !important; width: auto !important; }
  #libBody td:nth-child(1) img, #libBody td:nth-child(1) .art { width: 72px !important; height: 96px !important; object-fit: cover; border-radius: var(--r-md); display: block; }
  #libBody td:nth-child(2) { grid-column: 2 !important; display: block !important; font-size: 17px; font-weight: 600; }
  #libBody td:nth-child(3), #libBody td:nth-child(4), #libBody td:nth-child(5) { grid-column: 2 !important; }
  #libBody td:nth-child(8) { grid-column: 2 !important; grid-row: auto !important; display: flex !important; gap: 18px; padding-top: 4px !important; }
  #libBody td:nth-child(8) .linkbtn { padding: 0; min-height: 32px; font-size: 14px; }
}
@media (max-width: 760px) { #libBody tr { padding-left: 16px !important; padding-right: 16px !important; } }
/* My games: the score circle (like the game cards) shows on phones, top right of each game; desktop keeps the badge. */
.lib-score { display: none; }
@media (max-width: 760px) {
  #libBody tr { position: relative; padding-right: 76px !important; }
  #libBody .lib-score { display: flex; align-items: center; justify-content: center; position: absolute; top: 14px; right: 16px; width: 52px; height: 52px; border-radius: 50%; font-size: 19px; font-weight: 600; margin: 0; border: 0; }
  #libBody .lib-num { display: none; }
}
/* The sticky page picker: a bit taller with a stronger shadow so it's easy to spot (owner, Nov 2026). */
@media (max-width: 760px) {
  .tabpick { min-height: 54px !important; font-size: 17px; }
  .tabpick.stuck { box-shadow: 0 14px 32px rgba(0, 0, 0, .45), 0 4px 10px rgba(0, 0, 0, .3) !important; }
}

/* Following: only the page picker sticks; the Live now / My week picker scrolls with the page (two orange bars stacked
   looked broken). */
@media (max-width: 760px) { .fol-views > .tabpick { position: static !important; } }

/* Posts open their thread on click (Twitter style). Hover is a background change only (rule 60: no lifts). */
.tw-post.tw-open { cursor: pointer; }
.tw-post.tw-open:hover { background: color-mix(in srgb, var(--panel2) 55%, transparent); }

/* Profile Customize on phones: one list, a big drag handle and a remove button, nothing else (owner, Nov 2026). */
@media (max-width: 760px) {
  .pw-phone-edit .pw-side { display: none !important; }
  .pw-phone-edit .pw-main > .pw { outline-offset: 2px; }
  .pw-tools-phone { flex-wrap: nowrap; gap: 8px; margin-bottom: 8px; padding: 4px 4px 4px 0; border-bottom: 1px solid var(--line); }
  .pw-tools-phone .pw-touchgrip { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; color: var(--muted); touch-action: none; cursor: grab; border-radius: var(--r-md); }
  .pw-tools-phone .pw-touchgrip:active { background: var(--panel2); color: var(--text); }
  .pw-tools-phone .pw-name { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pw-tools-phone .pw-x { width: 44px; height: 44px; padding: 0; font-size: 16px; flex: none; }
  .pw-phone-edit .pw.dragging { opacity: .6; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
  .pw-phone-edit .pw-add { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .pw-phone-edit .pw-add .btn { flex: none; }
  .pw-phone-edit .pw-bar-row { gap: 6px; }
}
@media (max-width: 760px) {
  .pw-phone-edit .pw-bar-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pw-phone-edit .pw-bar-row > b, .pw-phone-edit .pw-bar-row > .muted { grid-column: 1 / -1; }
  .pw-phone-edit .pw-bar-row > .spacer { display: none; }
  .pw-phone-edit .pw-bar-row > .btn { width: 100%; min-width: 0; white-space: normal; line-height: 1.2; }
  .pw-phone-edit .pw-add { flex-wrap: wrap; overflow: visible; }
  .pw-phone-edit .pw-add .pw-sub-h { flex: 1 0 100%; }
  body:has(.pw-editing) .compose-fab { display: none !important; }
}
@media (max-width: 760px) {
  /* phone edit = a short list of names to drag, add and remove */
  .pw-phone-edit .pw-main > .pw > :not(.pw-tools) { display: none !important; }
  .pw-phone-edit .pw-main > .pw { padding: 2px 4px; background: var(--panel); border: 1px solid var(--line); outline: 0; }
  .pw-phone-edit .pw-main { gap: 8px; }
  .pw-phone-edit .pw-tools-phone { border-bottom: 0; margin: 0; }
  .pw-phone-edit .card-foot, .pw-phone-edit .shine { display: none; }
}

/* Profile feed on phones (owner, Nov 2026: "still all bunched up"): the feed runs edge to edge inside the profile card
   instead of sitting in three nested boxes, so posts get the width. */
@media (max-width: 760px) {
  .card-main .pw > .card-box.pf { margin-left: -16px; margin-right: -16px; border-left: 0; border-right: 0; border-radius: 0; padding: 12px 0 0; background: transparent; }
  .card-box.pf > .pf-head, .card-box.pf > .pf-why, .card-box.pf > .pf-more { margin-left: 16px; margin-right: 16px; }
  .card-box.pf .pf-list { border-left: 0; border-right: 0; border-radius: 0; margin: 0; }
  .card-box.pf .pf-list > .tw-post { padding: 12px 16px; }
  .card-box.pf .pf-tabs { margin: 0; }
  .tw-actions { flex-wrap: nowrap; justify-content: space-between; }
  .tw-actions .tw-act { min-width: 36px; padding: 6px 4px; }
  .tw-actions .tw-spacer { display: none; }
}
/* Thread pages (#post/upost-<id>, #post/spost-<id>) */
.th-replies .th-h { margin: 0 0 8px; font-size: 16px; }
.th-reply { display: flex; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.th-reply:first-of-type { border-top: 0; }
.th-reply .grow { min-width: 0; flex: 1; }
.th-reply .th-text { margin: 2px 0 4px; overflow-wrap: anywhere; }
.th-acts { display: flex; align-items: center; gap: 12px; }
.th-acts .tw-act { margin-left: -6px; }
.th-ctx { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.th-ctx-who { display: flex; align-items: center; gap: 8px; color: var(--text); }
.th-why { margin: 8px 0 0; }
/* Replies are full posts on thread pages (owner, Nov 2026): what a reply answers sits above it, joined by a thin line. */
.tw-replyto { font-size: 13px; color: var(--muted); margin: 0 0 2px; }
.th-above { padding: 0; margin-bottom: 0; border-bottom: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.th-above + .tw-thread { border-top-left-radius: 0; border-top-right-radius: 0; }
.th-above .tw-post { position: relative; }
.th-above .tw-post::after { content: ''; position: absolute; left: 32px; top: 58px; bottom: -6px; width: 2px; background: var(--line); }
.th-cards { margin: 0 -16px -16px; border: 0; }
.th-cards > .tw-post { border-top: 1px solid var(--line); }

/* Following: the Live now / My week picker never sticks, even when it's alone in its box (it slid over the page picker). */
@media (max-width: 760px) { .fol-views:has(> .tabpick) { position: static !important; } }
/* The header always paints above the page pickers (layer 30) so a picker scrolling away slides under it, never over it. */
@media (max-width: 760px) { header.top { z-index: 40; } }
/* Toasts ride above the Friends box and chat windows docked at the bottom (--dock-h from public/dock.js). */
.toast { bottom: max(20px, calc(var(--dock-h, 0px) + 12px)); }
@media (max-width: 760px) { .toast { bottom: max(calc(76px + env(safe-area-inset-bottom)), calc(var(--dock-h, 0px) + 12px)); } }

/* Game buttons, take 3 (owner, Nov 2026: "the layout is... weird"). One clear orange main action with a play icon, then
   Category / Times / Tags / Track as a quiet toolbar: icon over a short label, no boxes, hover = soft background. Icons are
   CSS masks so they survive the Track button rewriting its own text (public/tracks.js). */
body .gb-main { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
body .gb-main.launch::before, body .gb-main[data-appid]::before { content: ''; width: 14px; height: 14px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M7%204.5v15l13-7.5z'%20fill%3D'black'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M7%204.5v15l13-7.5z'%20fill%3D'black'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
body .gtool { display: flex !important; flex-wrap: nowrap !important; gap: 2px !important; margin-top: 6px; padding-top: 4px; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; background: none !important; overflow: visible; }
body .gtool > .btn, body .gtool > button, body .gtool > a {
  flex: 1 1 0 !important; min-width: 0; min-height: 0 !important; display: inline-flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 6px 2px !important; margin: 0 !important; border: 0 !important; border-radius: var(--r-md) !important; background: none !important;
  color: var(--muted) !important; font-size: 12px !important; font-weight: 500; line-height: 1.1; white-space: nowrap; text-decoration: none; box-shadow: none !important; }
body .gtool > :hover { background: var(--panel2) !important; color: var(--text) !important; }
body .gtool > .btn::before, body .gtool > button::before, body .gtool > a::before { content: ''; width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.9'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'3'%20width%3D'7'%20height%3D'7'%20rx%3D'1'%2F%3E%3Crect%20x%3D'14'%20y%3D'3'%20width%3D'7'%20height%3D'7'%20rx%3D'1'%2F%3E%3Crect%20x%3D'3'%20y%3D'14'%20width%3D'7'%20height%3D'7'%20rx%3D'1'%2F%3E%3Crect%20x%3D'14'%20y%3D'14'%20width%3D'7'%20height%3D'7'%20rx%3D'1'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.9'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'3'%20width%3D'7'%20height%3D'7'%20rx%3D'1'%2F%3E%3Crect%20x%3D'14'%20y%3D'3'%20width%3D'7'%20height%3D'7'%20rx%3D'1'%2F%3E%3Crect%20x%3D'3'%20y%3D'14'%20width%3D'7'%20height%3D'7'%20rx%3D'1'%2F%3E%3Crect%20x%3D'14'%20y%3D'14'%20width%3D'7'%20height%3D'7'%20rx%3D'1'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
body .gtool > [data-heat]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.9'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'9'%2F%3E%3Cpath%20d%3D'M12%207v5l3%202'%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.9'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'9'%2F%3E%3Cpath%20d%3D'M12%207v5l3%202'%2F%3E%3C%2Fsvg%3E"); }
body .gtool > [data-tags]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.9'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M20.6%2013.4%2013.4%2020.6a2%202%200%200%201-2.8%200L3%2013V3h10l7.6%207.6a2%202%200%200%201%200%202.8z'%2F%3E%3Ccircle%20cx%3D'7.5'%20cy%3D'7.5'%20r%3D'1.5'%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.9'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M20.6%2013.4%2013.4%2020.6a2%202%200%200%201-2.8%200L3%2013V3h10l7.6%207.6a2%202%200%200%201%200%202.8z'%2F%3E%3Ccircle%20cx%3D'7.5'%20cy%3D'7.5'%20r%3D'1.5'%2F%3E%3C%2Fsvg%3E"); }
body .gtool > [data-track]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.9'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M6%208a6%206%200%200%201%2012%200c0%207%203%209%203%209H3s3-2%203-9'%2F%3E%3Cpath%20d%3D'M10.3%2021a1.9%201.9%200%200%200%203.4%200'%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.9'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M6%208a6%206%200%200%201%2012%200c0%207%203%209%203%209H3s3-2%203-9'%2F%3E%3Cpath%20d%3D'M10.3%2021a1.9%201.9%200%200%200%203.4%200'%2F%3E%3C%2Fsvg%3E"); }
body .gtool > a[href^="#game/"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.9'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'9'%2F%3E%3Cpath%20d%3D'M12%2011v5M12%208h.01'%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.9'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'9'%2F%3E%3Cpath%20d%3D'M12%2011v5M12%208h.01'%2F%3E%3C%2Fsvg%3E"); }
body .gtool > .on, body .gtool > [aria-pressed="true"] { color: var(--accent) !important; background: var(--accent-tint) !important; }
body .gtool > .on:hover, body .gtool > [aria-pressed="true"]:hover { background: var(--accent-tint) !important; }
@media (max-width: 760px) { body .gtool > .btn, body .gtool > button, body .gtool > a { min-height: 48px !important; font-size: 12px !important; } }

/* "Reconnecting" note while the server is briefly unreachable (public/app.js serverHiccup) */
#ssReconnect { position: fixed; top: calc(var(--hdr-h, 56px) + 10px); left: 50%; transform: translateX(-50%); z-index: 95; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 8px 24px rgba(0,0,0,.35); font-size: 14px; }

/* Phones (owner, Nov 2026): Command Center tabs already say their name in the picker bar, so the page heading and
   the intro line go; the Clip Vault becomes a tight 2 column grid; the Position Tracker numbers sit side by side. */
@media (max-width: 760px) {
  #tab-picks > .tab-title, #tab-clips .cv-head > .tab-title, #tab-clips > p.muted { display: none !important; }
  #tab-clips .cv-head { justify-content: flex-end; margin-bottom: 8px; }
  #tab-picks .viewerline > [data-viewers], #tab-picks .viewerline > #freshness { min-height: 44px; padding: 6px 10px; gap: 6px; }
  #tab-picks .viewerline > #freshness { font-size: 13px !important; min-width: 0; overflow: hidden; }
  #tab-picks .viewerline > #freshness .fresh { white-space: normal !important; min-width: 0; line-height: 1.25; }
  #tab-picks .viewerline { grid-template-columns: auto minmax(0, 1fr) !important; }
  .vault-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .vault-clip { padding: 4px; gap: 2px; }
  .vault-t { font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .vault-clip .small { font-size: 12px; }
  .vault-otd .otd-year { margin-top: 8px; }
  .vault-bar { flex-wrap: wrap; gap: 6px; }
  .vault-bar .vault-search { flex: 1 1 100%; display: flex; gap: 6px; }
  .vault-bar .vault-search input { flex: 1; min-width: 0; }
  .vault-bar .spacer { display: none; }
}

/* The Undercard logo (owner, Nov 2026, "Card stack"): the card mark + a lowercase Space Grotesk Bold wordmark (self hosted,
   SIL Open Font License, public/fonts/OFL.txt). The back card follows the text color so the mark works light and dark;
   the front card stays logo orange #e8743b on purpose. */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/space-grotesk-700.woff2') format('woff2'); }
.brand, .lp-logo.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; }
.brand .brand-mark { flex: none; width: 30px; height: 30px; color: var(--text); }
.brand .brand-word { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; text-transform: lowercase; letter-spacing: -0.03em; font-size: 22px; line-height: 1; }
@media (max-width: 760px) { .brand .brand-word { font-size: 20px; } .brand .brand-mark { width: 28px; height: 28px; } }
/* Tight headers keep just the mark, like before: mid size laptops (crowded header) and very small phones. */
@media (max-width: 1120px) and (min-width: 761px) { header.top .brand .brand-word { display: none; } }
@media (max-width: 380px) { header.top .brand .brand-word { display: none; } header.top .brand { gap: 0; } }