:root {
  /* Default skin (Eggshell). These four drive everything — borders and shadows derive from
     --ink — and client/js/themes.js overwrites them at boot for the chosen skin. Kept in
     sync with THEMES.eggshell so the first paint, before JS runs, is already correct. */
  --ink: #14120f; --paper: #f2eee4; --gray: #8a8477; --fill: #e3ded0; --accent: #14120f;
  --bd: 3px solid var(--ink);
  /* Shadows and the click target take --accent, not --ink. That's where a skin's tertiary
     colour lives: neither carries text, so an accent can be a saturated flag colour instead
     of another dark neutral, and it lands on ~19 surfaces plus the biggest thing on screen. */
  --shadow: 5px 5px 0 var(--accent);
  --shadow-sm: 3px 3px 0 var(--accent);
  --nav-h: 4.75rem;
  /* Panel sizes. Persisted per browser (see panels.js): the drag handles write these, and
     both the panel's own size and the bottom panel's inset read them, so everything stays
     aligned through a single value. Clamped in JS to sane bounds. */
  --panel-left-w: min(25vw, 22rem);
  --panel-right-w: min(33vw, 28rem);
  --panel-bottom-h: 50vh;
  --banner-h: 2.6rem;
  --display: "Archivo Black", "Arial Black", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--paper); color: var(--ink); font-family: var(--body); }
body { overflow: hidden; -webkit-font-smoothing: antialiased; }
button { font-family: var(--display); cursor: pointer; background: var(--paper); color: var(--ink); border: var(--bd); }
button:disabled { color: var(--gray); border-color: var(--gray); cursor: not-allowed; }
/* Form controls don't inherit colour from the page — browsers paint them from the UA
   stylesheet, which means black text regardless of the skin. Buttons were covered above;
   these are the rest. Without this, every select and text field renders black-on-dark under
   Midnight. Later rules add sizing and only some set a background, so the colour is pinned
   here once rather than repeated at each site. */
input, select, textarea { font-family: var(--body); color: var(--ink); background: var(--paper); }
/* The open dropdown list is drawn by the OS on some platforms and ignores this; the
   color-scheme hint set in themes.js is what covers those. */
option { color: var(--ink); background: var(--paper); }
a { color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.display { font-family: var(--display); }
.muted { color: var(--gray); font-size: 0.85rem; }
.hidden, [hidden] { display: none !important; }

/* ----- centered full-screen states (boot + auth) ----- */
.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 200; background: var(--paper); }
.card { width: min(24rem, 100%); border: var(--bd); box-shadow: var(--shadow); background: var(--paper); padding: 1.25rem; }
.card h1 { font-family: var(--display); font-size: 2rem; margin: 0 0 0.75rem; letter-spacing: 0.02em; }
.card input { width: 100%; font-size: 1rem; padding: 0.55rem 0.6rem; margin: 0.3rem 0; border: var(--bd); }
.card .field-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.4rem; color: var(--gray); }
.btn-primary { width: 100%; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.7rem; margin-top: 0.6rem; box-shadow: var(--shadow-sm); }
.btn-primary:active { transform: translate(3px, 3px); box-shadow: none; }
.swap { margin: 0.7rem 0 0; font-size: 0.9rem; }
#authError, #finishError, #resetError { background: var(--ink); color: var(--paper); padding: 0.4rem 0.5rem; margin-top: 0.6rem; font-size: 0.85rem; }
#authError:empty, #finishError:empty, #resetError:empty { display: none; }
.or-div { display: flex; align-items: center; gap: 0.5rem; margin: 0.9rem 0 0.6rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray); }
.or-div::before, .or-div::after { content: ""; flex: 1; border-top: var(--bd); }
.oauth-btn { box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; height: 44px; font-family: var(--body); font-size: 0.95rem; font-weight: 600; text-transform: none; letter-spacing: 0; cursor: pointer; border-radius: 4px; background: var(--paper); border: 2px solid var(--ink); color: var(--ink); }
.oauth-btn svg { flex: none; display: block; }
.oauth-btn + .oauth-btn { margin-top: 0.5rem; }
.oauth-btn--google { background: #fff; border: 1px solid #747775; color: #1f1f1f; }
.oauth-btn--google:hover { background: #f7f8f8; }
.oauth-btn--discord { background: #5865f2; border-color: #5865f2; color: #fff; }
.oauth-btn--discord:hover { background: #4752c4; border-color: #4752c4; }
.link-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.link-row .ro-k { flex: 0 0 5.5rem; }
.link-row .ro-v { flex: 1; color: var(--gray); }
.link-row .wbtn { flex: 0 0 auto; }

/* ----- #A1 main: fixed, always centered ----- */
/* The play area centres the Pixel in whatever space is actually visible. Its left/right edges
   follow any open side panels (same variables the panels use), so the Pixel stays centred in
   the gap between them rather than under a panel — until the panels are wide enough to reach
   it, at which point it simply centres in what room is left. The counts sit absolutely at the
   top so they never push the Pixel off-centre. */
/* container-type lets the counts below size to THIS element's width (via cqw units) instead
   of the viewport, so when panels narrow the play area the text scales down to fit rather
   than overflowing — the same way the area itself responds to panels. */
#a1 { position: fixed; top: 0; bottom: 0; left: 0; right: 0; container-type: inline-size; padding: 1rem 1rem calc(var(--nav-h) + 1rem); display: flex; align-items: center; justify-content: center; z-index: 1; transition: left 0.15s ease, right 0.15s ease; }
body.left-open #a1 { left: var(--panel-left-w); }
body.right-open #a1 { right: var(--panel-right-w); }
/* When the shop is open, the play area's bottom edge rises to the shop's top edge (which sits
   above the nav), so the Pixel centres in the space left above the shop rather than behind it.
   The nav-height padding is dropped because that region is now the shop, not empty. */
body.bottom-open #a1 { bottom: calc(var(--nav-h) + var(--panel-bottom-h)); padding-bottom: 1rem; transition: left 0.15s ease, right 0.15s ease, bottom 0.15s ease; }
#counts { position: absolute; top: 1.5rem; left: 0; right: 0; text-align: center; padding: 0 1rem; pointer-events: none; }
#pts { font-family: var(--display); font-size: clamp(2rem, 8cqw, 4.25rem); line-height: 1; font-variant-numeric: tabular-nums; }
#pts::after { content: " Pixels"; font-size: 0.45em; }
#rate { font-family: var(--display); font-size: clamp(0.85rem, 2.5cqw, 1.15rem); margin-top: 0.5rem; color: var(--ink); }
#pixel { width: clamp(104px, 22vw, 196px); aspect-ratio: 1; background: var(--accent); border: var(--bd); box-shadow: var(--shadow); padding: 0; }
#pixel:active { transform: translate(5px, 5px); box-shadow: none; }

/* ----- bottom nav: persistent, above panels on desktop ----- */
#nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem; padding: 0.6rem; z-index: 60; }
.navbtn { width: 4.25rem; height: 3.75rem; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em; box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; text-align: center; }
.navbtn:active { transform: translate(3px, 3px); box-shadow: none; }
.navbtn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
#modeTag { display: none; font-family: var(--display); font-size: 0.7rem; letter-spacing: 0.12em; background: var(--ink); color: var(--paper); padding: 0.15rem 0.55rem; margin-bottom: 0.45rem; }
body.event-mode #modeTag { display: inline-block; }
body.event-mode #pts::after { content: " Event Pixels"; }

/* ----- panels (overlays) ----- */
.panel { position: fixed; background: var(--paper); border: var(--bd); z-index: 50; display: flex; flex-direction: column; overflow: hidden; }
.panel > header { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.75rem; border-bottom: var(--bd); }
.panel > header h2 { font-family: var(--display); font-size: 1.1rem; margin: 0; text-transform: uppercase; letter-spacing: 0.03em; }
.panel .body { padding: 0.75rem; overflow: auto; flex: 1; }
.closeX { width: 2rem; height: 2rem; line-height: 1; font-size: 1.1rem; box-shadow: var(--shadow-sm); }
.closeX:active { transform: translate(3px, 3px); box-shadow: none; }
.panel[data-side="left"] { left: 0; top: 0; bottom: 0; width: var(--panel-left-w); min-width: 12rem; max-width: 90vw; border-left: none; border-top: none; border-bottom: none; }
.panel[data-side="right"] { right: 0; top: 0; bottom: 0; width: var(--panel-right-w); min-width: 14rem; max-width: 90vw; border-right: none; border-top: none; border-bottom: none; }
.panel[data-side="bottom"] { left: 0; right: 0; bottom: var(--nav-h); height: var(--panel-bottom-h); min-height: 8rem; max-height: 85vh; border-left: none; border-right: none; border-bottom: var(--bd); }
/* the bottom shop insets to whatever side panels are open (desktop; the mobile rule below forces full width) */
#verifyBanner { position: fixed; top: 0; left: 0; right: 0; z-index: 90; box-sizing: border-box; min-height: var(--banner-h); display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.35rem 0.7rem; background: var(--ink); color: var(--paper); border-bottom: var(--bd); font-size: 0.8rem; }
body.has-banner #a1 { padding-top: calc(1rem + var(--banner-h)); }
body.has-banner #counts { top: calc(1.5rem + var(--banner-h)); }
body.has-banner .panel[data-side="left"], body.has-banner .panel[data-side="right"] { top: var(--banner-h); }
.vb-actions { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
.vb-btn { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.28rem 0.55rem; background: var(--paper); color: var(--ink); border: 2px solid var(--paper); box-shadow: none; }
.vb-btn:active { transform: translate(2px, 2px); }
.vb-x { font-size: 1.2rem; line-height: 1; background: none; border: none; color: var(--paper); padding: 0 0.25rem; }
body.left-open .panel[data-side="bottom"] { left: var(--panel-left-w); }
body.right-open .panel[data-side="bottom"] { right: var(--panel-right-w); }

/* shop (#A2) */
.shop-tabs { display: flex; gap: 0.4rem; }
.tab { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.4rem 0.6rem; box-shadow: var(--shadow-sm); }
.tab:active { transform: translate(3px, 3px); box-shadow: none; }
.tab[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
#shop .body { padding: 0.6rem; }
.shop-row { display: block; }
.dcard { border: var(--bd); box-shadow: var(--shadow-sm); background: var(--paper); padding: 0.6rem 0.65rem; margin-bottom: 0.7rem; }
.dcard:last-child { margin-bottom: 0; }
.dcard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
/* Buy and the disclosure travel together on the right. As three separate children,
   space-between stranded the buy button in the middle of the card. */
.d-actions { flex: none; display: flex; align-items: stretch; gap: 0.35rem; }
.d-meta { min-width: 0; } /* the name yields first when a bulk price gets long */
.d-name { font-family: var(--display); font-size: 0.92rem; line-height: 1.05; }
.d-sub { font-size: 0.72rem; color: var(--gray); margin-top: 0.15rem; }
.d-stat { margin-left: 0.45rem; font-family: var(--body); font-size: 0.7rem; font-weight: 400; color: var(--gray); white-space: nowrap; }
.d-buy { flex: none; border: var(--bd); box-shadow: var(--shadow-sm); background: var(--paper); color: var(--ink); font-family: var(--display); font-size: 0.78rem; padding: 0.35rem 0.6rem; cursor: pointer; white-space: nowrap; }
.d-buy:active { transform: translate(3px, 3px); box-shadow: none; }
.d-buy.cant { color: var(--gray); border-color: var(--gray); box-shadow: none; }
/* Per-display disclosure. The control is always present, so a card's header height never
   changes as upgrades become available — only the count inside it does. */
.d-toggle { flex: none; display: flex; align-items: center; gap: 0.25rem; border: var(--bd); background: var(--paper); color: var(--ink); font-family: var(--display); font-size: 0.72rem; padding: 0.3rem 0.4rem; cursor: pointer; line-height: 1; }
.d-count { min-width: 0.75rem; text-align: center; }
.d-toggle .chev { display: inline-block; font-size: 0.7rem; transition: transform 0.12s ease; }
.d-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.d-toggle[aria-expanded="false"] .d-count { color: var(--gray); }
.up-none { font-size: 0.72rem; color: var(--gray); margin: 0.55rem 0 0; }

.up-label { font-size: 0.66rem; color: var(--gray); text-transform: uppercase; letter-spacing: 0.04em; margin: 0.55rem 0 0.3rem; }
.up-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.9rem, 1fr)); gap: 0.35rem; }
.up { border: var(--bd); background: var(--paper); color: var(--ink); padding: 0.3rem 0.1rem; text-align: center; font-size: 0.7rem; line-height: 1.15; cursor: pointer; }
.up:active { transform: translate(2px, 2px); }
.up.own { background: var(--fill); color: var(--gray); border-color: var(--gray); cursor: default; }
.shop-empty { color: var(--gray); font-size: 0.85rem; }

/* ranks (#A4) */
#leaderboard .body { padding: 0; }
#lbActions { padding: 0.6rem 0.6rem 0; }
#lbList { padding: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; }
.lb-row { border: var(--bd); box-shadow: var(--shadow-sm); padding: 0.4rem 0.5rem; }
.lb-row.me { background: var(--ink); color: var(--paper); }
.lb-main { display: flex; align-items: center; gap: 0.5rem; }
.lb-rank { font-family: var(--display); font-size: 0.95rem; min-width: 1.7rem; text-align: right; }
.pfp.sm { width: 1.7rem; height: 1.7rem; font-size: 0.8rem; border-width: 2px; }
.lb-row.me .pfp.sm { border-color: var(--paper); }
.lb-name { font-family: var(--display); font-size: 0.88rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-score { font-family: var(--display); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.badge { font-family: var(--body); font-weight: 700; font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.05em; border: 2px solid currentColor; padding: 0 0.25rem; margin-left: 0.35rem; }
.lb-ctrls { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.ctrl { font-family: var(--body); font-weight: 700; font-size: 0.68rem; padding: 0.25rem 0.4rem; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.ctrl:active { transform: translate(2px, 2px); box-shadow: none; }
.lb-prompt { padding: 0.7rem; display: flex; flex-direction: column; gap: 0.5rem; }
.lb-prompt input { font-family: var(--body); font-size: 0.95rem; padding: 0.5rem; border: var(--bd); }
.wbtn { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.55rem; box-shadow: var(--shadow-sm); }
.wbtn:active { transform: translate(3px, 3px); box-shadow: none; }
.wbtn.danger { background: var(--ink); color: var(--paper); }
.lb-empty { color: var(--gray); font-size: 0.85rem; padding: 0.7rem; }
.joinable .lb-row { cursor: pointer; }
.joinable .lb-row:hover { background: var(--fill); }
.joinable .lb-row:active { transform: translate(2px, 2px); box-shadow: none; }
.join-hint { font-size: 0.78rem; color: var(--gray); padding: 0 0.1rem; }
.lb-count { font-size: 0.78rem; color: var(--gray); padding: 0 0.1rem; font-weight: 700; }
.lb-pager { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 0.5rem; border-top: var(--bd); }
.lb-pager button { width: 2.6rem; height: 2.2rem; box-shadow: var(--shadow-sm); }
.lb-pager button:active { transform: translate(3px, 3px); box-shadow: none; }
#lbPage { font-family: var(--display); font-size: 0.85rem; }
.lb-foot { display: flex; gap: 0.4rem; padding: 0.6rem; border-top: var(--bd); }
.lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0.75rem; border-bottom: var(--bd); }
.lb-fresh { font-size: 0.7rem; color: var(--gray); }

.lb-search { display: flex; gap: 0.4rem; padding: 0.6rem; border-top: var(--bd); align-items: center; }
.lb-search input { flex: 1; min-width: 0; font-family: var(--body); font-size: 0.95rem; padding: 0.5rem; border: var(--bd); }
.lb-search .wbtn { padding: 0.5rem 0.7rem; }
.lb-sub { font-size: 0.72rem; color: var(--gray); white-space: nowrap; }
.lb-row.me .lb-sub { color: var(--paper); }
.evrow { cursor: pointer; }
.evrow:hover { background: var(--fill); }
.evrow:active { transform: translate(2px, 2px); box-shadow: none; }
.ev-go { font-size: 0.78rem; color: var(--gray); white-space: nowrap; }
.ev-place { font-size: 0.74rem; color: var(--gray); margin-left: 0.5rem; }
.pastToggle { margin-left: 0.4rem; padding: 0.4rem 0.7rem; }
.foot-btn { flex: 1; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.55rem 0.3rem; box-shadow: var(--shadow-sm); }
.foot-btn:active { transform: translate(3px, 3px); box-shadow: none; }

/* settings user block */
.userblock { display: flex; align-items: center; gap: 0.7rem; padding-bottom: 0.75rem; border-bottom: var(--bd); margin-bottom: 0.75rem; }
.pfp { width: 3rem; height: 3rem; border: var(--bd); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 1.3rem; flex: 0 0 auto; }
#who { font-family: var(--display); font-size: 1.15rem; word-break: break-word; }
.settings-actions { display: flex; flex-direction: column; gap: 0.5rem; }
.settings-actions button { padding: 0.6rem; text-align: left; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.85rem; box-shadow: var(--shadow-sm); }
.settings-actions button:active { transform: translate(3px, 3px); box-shadow: none; }
.spacer-grow { flex: 1; }
.settings-actions button:disabled { box-shadow: none; }

/* settings sub-views (#A3) */
#settings .body { display: flex; flex-direction: column; }
#settingsMain { flex: 1; display: flex; flex-direction: column; }
.logout-btn { width: 100%; padding: 0.6rem; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.85rem; box-shadow: var(--shadow-sm); margin-top: 0.75rem; }
.logout-btn:active { transform: translate(3px, 3px); box-shadow: none; }
.back-btn { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.4rem 0.55rem; box-shadow: var(--shadow-sm); }
.back-btn:active { transform: translate(3px, 3px); box-shadow: none; }
.sub-h { font-family: var(--display); font-size: 1.2rem; margin: 0.7rem 0 0.2rem; }
.f-label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray); margin-top: 0.6rem; }
.set-select { width: 100%; font-size: 0.95rem; padding: 0.5rem; border: var(--bd); margin-top: 0.25rem; }
.set-row { display: flex; align-items: center; justify-content: space-between; margin-top: 0.9rem; }
.set-k { font-family: var(--display); font-size: 0.9rem; }
.toggle { font-family: var(--display); font-size: 0.78rem; padding: 0.35rem 0.95rem; border: var(--bd); box-shadow: var(--shadow-sm); background: var(--paper); }
.toggle[aria-checked="true"] { background: var(--ink); color: var(--paper); }
.toggle:active { transform: translate(2px, 2px); box-shadow: none; }
.set-hint { font-size: 0.74rem; margin-top: 0.35rem; }
body.no-anim *, body.no-anim *::before, body.no-anim *::after { transition: none !important; animation: none !important; }
#settingsAccount input { width: 100%; font-family: var(--body); font-size: 0.95rem; padding: 0.5rem; border: var(--bd); margin-top: 0.2rem; }
#accountMsg { margin-top: 0.5rem; }

#bulkPicker { margin-left: auto; margin-right: 0.5rem; }
#bulkPicker .tab { min-width: 2.6rem; }

/* Resize handles. A thin strip on each panel's inner edge; drag to resize, and the size is
   saved to this browser. Hidden on mobile, where panels are forced full-screen. */
.resize-h { position: absolute; z-index: 60; touch-action: none; background: transparent; }
.resize-h:hover, .resize-h.dragging { background: var(--ink); opacity: 0.18; }
.panel[data-side="left"] .resize-h { top: 0; bottom: 0; right: 0; width: 6px; cursor: ew-resize; }
.panel[data-side="right"] .resize-h { top: 0; bottom: 0; left: 0; width: 6px; cursor: ew-resize; }
.panel[data-side="bottom"] .resize-h { left: 0; right: 0; top: 0; height: 6px; cursor: ns-resize; }
body.resizing { user-select: none; cursor: inherit; }

/* announcement overlay */
.overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0, 0, 0, 0.45); }
.overlay[hidden] { display: none; }
.ann-card { position: relative; width: min(30rem, 100%); max-height: 80vh; overflow-y: auto; background: var(--paper); border: var(--bd); box-shadow: var(--shadow); padding: 1.1rem 1.2rem 1.2rem; }
/* The close button is pinned to the corner rather than left in the content flow, where it
   was pushing the title down and sitting on top of it. The card's own top padding plus the
   title's right margin keep them clear of it. */
#annClose { position: absolute; top: 0.7rem; right: 0.7rem; margin: 0; }
.ann-card h2 { font-family: var(--display); font-size: 1.1rem; margin: 0 2.75rem 0.35rem 0; overflow-wrap: anywhere; }
.ann-meta { margin: 0 2.75rem 0 0; }
/* pre-wrap keeps the admin's line breaks without the body ever being parsed as markup */
.ann-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.88rem; line-height: 1.45; margin-top: 0.7rem; }
.ann-nav { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 1rem; }
.ann-nav button { font-size: 0.72rem; padding: 0.3rem 0.5rem; }
.ann-nav button[disabled] { visibility: hidden; }

/* player profile card (Ranks panel) */
.lb-row.tappable { cursor: pointer; }
.pfp.lg { width: 3.2rem; height: 3.2rem; font-size: 1.4rem; }
.prof-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.8rem; }
.prof-id { min-width: 0; }
.prof-name { font-family: var(--display); font-size: 1.05rem; line-height: 1.1; overflow-wrap: anywhere; }
.prof-sub { font-size: 0.75rem; color: var(--gray); margin-top: 0.2rem; overflow-wrap: anywhere; }
.prof-none { font-size: 0.8rem; color: var(--gray); margin: 0.6rem 0 0; }
input:disabled { background: var(--fill); color: var(--gray); cursor: not-allowed; }

/* skin picker */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 0.4rem; margin-bottom: 0.9rem; }
.theme-group { grid-column: 1 / -1; margin: 0.4rem 0 0; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray); }
.theme-sw { display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.4rem; border: var(--bd); background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 0.75rem; cursor: pointer; text-align: left; }
.theme-sw[aria-pressed="true"] { box-shadow: var(--shadow-sm); }
.sw-chip { flex: none; width: 1.15rem; height: 1.15rem; border: 2px solid; display: flex; align-items: center; justify-content: center; }
.sw-dot { width: 0.5rem; height: 0.5rem; }
.sw-acc { position: absolute; right: -3px; bottom: -3px; width: 0.42rem; height: 0.42rem; border: 1px solid var(--ink); }
.sw-chip { position: relative; }
.ro-block { border-top: var(--bd); margin-top: 1rem; padding-top: 0.5rem; }
.cred-block { border-top: var(--bd); margin-top: 1.1rem; padding-top: 0.8rem; }
.danger-warn { font-size: 0.82rem; line-height: 1.35; border: 2px solid var(--ink); padding: 0.55rem; margin: 0.3rem 0 0.6rem; }
.danger-actions { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.danger-actions .wbtn { flex: 1; }
.cred-h { font-family: var(--display); font-size: 1rem; margin: 0 0 0.4rem; }
.ro-row { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.25rem 0; }
.ro-k { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray); }
.ro-v { font-family: var(--display); font-size: 0.82rem; word-break: break-word; text-align: right; }
.wip-note { margin-top: 0.75rem; font-style: italic; }

#status { position: fixed; top: 0.5rem; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; align-items: center; gap: 0.4rem; background: var(--ink); color: var(--paper); padding: 0.35rem 0.35rem 0.35rem 0.6rem; font-size: 0.8rem; max-width: 90vw; }
#status[hidden] { display: none; }
.status-x { flex: none; font-size: 1.1rem; line-height: 1; background: none; border: none; color: var(--paper); padding: 0 0.2rem; cursor: pointer; }

/* hover tooltip — exact prices (and later, item descriptions). Positioned in JS; pointer
   events off so it can never sit between the cursor and the thing being hovered. */
#tip { position: fixed; z-index: 200; max-width: 16rem; padding: 0.35rem 0.5rem; background: var(--paper); border: var(--bd); box-shadow: var(--shadow-sm); font-size: 0.75rem; line-height: 1.25; pointer-events: none; }
/* touch devices have no hover: a tip would stick after a tap, so never show one */
@media (hover: none) { #tip { display: none !important; } }

/* ----- mobile: panels go full-screen, above the nav ----- */
@media (max-width: 720px) {
  .panel { z-index: 80; left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; width: 100vw !important; height: auto !important; max-height: none !important; border: none !important; }
  /* the drag handles are meaningless when panels are full-screen */
  .resize-h { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* spacing utilities (were inline style= attrs, which CSP blocks) */
.mt-8 { margin-top: 0.8rem; }
.mt-6 { margin-top: 0.6rem; }