/* Shared chrome — "Classic Steam client" (2003-04 olive VGUI look).
   Loaded LAST on every page. Restyles what every page shares: the site header
   (nav, mini search, bell, sign-in / user menu), footer, search typeahead, and
   the JS-appended windows (Terms / Privacy / rating explainer / settings, saved
   players, confirm, suspended, tag picker, XP breakdown, viewer queue, admin).
   Same tokens and recipes as home-classic.css / profile-classic.css: 1px bevels
   (light top-left, dark bottom-right), 26px title bands with an etched underline,
   raised buttons, sunken fields and lists. Square corners; only avatars and tiny
   status dots keep their shapes. No emoji.
   Plain class selectors only: they beat site.css / notif.css / reviews.css /
   saved.css / progression.css / matchhistory.css by load order, while the
   page-scoped rules in home-classic.css / profile-classic.css (higher
   specificity) still win on those two pages. Because these rules load after
   site.css at equal specificity, they also beat site.css's mobile rules — every
   such property is re-stated in the breakpoint blocks at the end. */

:root{
  --desk:   #333929;   /* page background */
  --win:    #4C5844;   /* window / panel olive */
  --win-dk: #3E4637;   /* darker panel: fields, lists, title bands */
  --well:   #22271C;   /* deep display well */
  --hi:     #8C9284;   /* bevel light edge */
  --lo:     #282E22;   /* bevel dark edge */
  --edge:   #171B13;   /* 1px outline around windows */
  --etch:   #66705B;   /* light half of an etched line */
  --tx:     #D8DED3;   /* body text */
  --tx-hi:  #F2F5EE;   /* headings, values */
  --tx-2:   #B7C0AC;   /* secondary text */
  --tx-3:   #A0AA95;   /* tertiary text */
  --hc-gold:#C4B550;   /* Steam accent yellow */
  --gold-hi:#D6C866;   /* accent as text on olive */
  --sel:    #958831;   /* selected / hover */
  --ok:     #9fdba0;
  --bad:    #e6796a;
  --ui:   Tahoma, Verdana, "Segoe UI", Geneva, sans-serif;
  --num:  Verdana, Tahoma, Geneva, sans-serif;
  --hcmono: "Lucida Console", Consolas, "Courier New", monospace;
}

/* ============================================================================
   A. HEADER
   ========================================================================== */
.shead{ background:#15180F; padding:7px 16px 10px; font-family:var(--ui);
  border:1px solid; border-color:#4F5745 #0A0C07 #0A0C07 #4F5745;
  box-shadow:0 0 0 1px var(--edge), 5px 5px 0 rgba(0,0,0,.22); }
.shead__bar{ min-height:28px; }
.shead__url{ font-family:var(--ui); }
.shead__rule{ height:2px; background:none; margin:8px 0 10px;
  border-top:1px solid #c9cdbf; border-bottom:1px solid #000; }
/* 20px (the profile / homepage headers use 22px): the 820px-wide pages need the
   room so the whole nav stays on one line beside the logo */
.slogo__wm{ font:700 20px/1 var(--num); letter-spacing:-.01em; }
.shead__row{ gap:16px; }
.shead__right{ gap:8px; }
.shead__actions{ gap:8px 16px; }

/* nav: gold text items; hover = selection-gold raised item, current page = pressed */
.snav{ display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; row-gap:2px; font-size:13px; line-height:1.4; }
.snav a, .snav button, .snav .tut-link{ color:var(--hc-gold); font:700 13px var(--ui); line-height:1.3;
  padding:3px 6px; margin:0; background:none; border:1px solid transparent; border-radius:0;
  cursor:pointer; text-decoration:none; }
.snav a:hover, .snav button:hover, .snav .tut-link:hover{ background:var(--sel); color:#fff; text-decoration:none;
  border-color:#B7A94A #5E5520 #5E5520 #B7A94A; }
.snav a:focus-visible, .snav button:focus-visible{ outline:1px dotted var(--tx-hi); outline-offset:-3px; }
.snav a.is-active{ color:var(--tx-hi); background:#0C0E08; text-decoration:none;
  border-color:#0A0C07 #4F5745 #4F5745 #0A0C07; box-shadow:inset 0 -2px 0 var(--hc-gold); }
.snav span{ color:#6E7766; margin:0 1px; }

/* mini search ("Another profile...") — also the profile error page's lookup box */
.search--mini{ display:flex; gap:7px; }
.shead .search--mini{ width:252px; max-width:252px; flex:none; margin:0; }
.search--mini .search__input{ flex:1 1 auto; min-width:0; height:auto; background:var(--win-dk); color:var(--tx-hi);
  font:12px var(--hcmono); padding:5px 8px; outline:none; border-radius:0;
  border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); box-shadow:inset 1px 1px 0 #1d2218; }
.search--mini .search__input::placeholder{ color:var(--tx-3); }
.search--mini .search__input:focus{ background:#434C3B; outline:none; }
.search--mini .search__btn{ flex:none; display:inline-flex; align-items:center; justify-content:center; min-width:46px; margin:0;
  font:700 12px var(--ui); letter-spacing:.02em; padding:4px 12px; cursor:pointer; border-radius:0;
  background:var(--hc-gold); color:#1C2014; border:1px solid; border-color:#E6DC96 #5F5620 #5F5620 #E6DC96; box-shadow:0 0 0 1px #0E110A; }
.search--mini .search__btn:hover{ background:#D2C35C; color:#1C2014; }
.search--mini .search__btn:active{ border-color:#5F5620 #E6DC96 #E6DC96 #5F5620; background:#B8A948; }
.search--mini .search__btn:focus-visible{ outline:1px dotted #1C2014; outline-offset:-4px; }

/* raised header buttons: bell (notif.js) + Steam sign-in / user box (auth.js) */
#notif-slot{ min-width:28px; }
.notif-btn, .auth-signin, .auth-user__btn{ border-radius:0;
  background:#2A3023; border:1px solid; border-color:#6E7766 #0A0C07 #0A0C07 #6E7766;
  box-shadow:0 0 0 1px #000; color:var(--tx); }
.notif-btn{ width:28px; height:26px; }
.auth-signin{ font:700 12px var(--ui); padding:5px 12px; }
.auth-user__btn{ gap:6px; padding:2px 8px 2px 2px; font:700 12px var(--ui); }
.notif-btn:hover, .auth-signin:hover, .auth-user__btn:hover{
  color:var(--hc-gold); text-decoration:none; border-color:#6E7766 #0A0C07 #0A0C07 #6E7766; }
.notif-btn:active, .auth-signin:active, .auth-user__btn:active,
.notif-btn[aria-expanded="true"], .auth-user__btn[aria-expanded="true"]{
  border-color:#0A0C07 #6E7766 #6E7766 #0A0C07; background:#20251A; }
.notif-btn:focus-visible, .auth-signin:focus-visible, .auth-user__btn:focus-visible{ outline:1px dotted var(--tx-hi); outline-offset:-4px; }
.auth-user__av{ width:20px; height:20px; border:1px solid #0A0C07; background:var(--well); }
.auth-user__name{ color:var(--tx-hi); }
.auth-user__btn:hover .auth-user__name{ color:var(--hc-gold); }
.auth-user__caret{ color:var(--tx-2); font-size:9px; }

/* ============================================================================
   C. USER MENU (auth.js #auth-menu) — classic drop-down menu
   ========================================================================== */
.auth-menu{ top:calc(100% + 3px); right:0; min-width:170px; padding:2px; z-index:60; border-radius:0;
  background:var(--win-dk); font:12px/1.4 var(--ui);
  border:1px solid; border-color:var(--hi) var(--lo) var(--lo) var(--hi);
  box-shadow:0 0 0 1px var(--edge), 4px 4px 0 rgba(0,0,0,.35); }
.auth-menu a{ display:block; padding:5px 14px 5px 10px; color:var(--tx); font:12px/1.4 var(--ui);
  border:0; text-decoration:none; white-space:nowrap; }
.auth-menu a:hover, .auth-menu a:focus-visible{ background:var(--sel); color:var(--tx-hi); text-decoration:none; outline:none; }
/* etched separator before "Sign out" */
.auth-menu__out{ position:relative; margin-top:6px; }
.auth-menu a.auth-menu__out{ color:var(--tx-2); }
.auth-menu a.auth-menu__out:hover, .auth-menu a.auth-menu__out:focus-visible{ color:var(--tx-hi); }
.auth-menu__out::before{ content:""; position:absolute; left:-1px; right:-1px; top:-4px; height:0;
  border-top:1px solid var(--lo); border-bottom:1px solid var(--etch); pointer-events:none; }

/* ============================================================================
   D. NOTIFICATIONS (notif.js)
   ========================================================================== */
.notif-badge{ top:-6px; right:-6px; min-width:15px; height:14px; padding:0 3px; border-radius:0;
  background:#B8321F; color:#fff; font:700 9px/12px var(--num); text-align:center;
  border:1px solid; border-color:#E08070 #5A140B #5A140B #E08070; box-shadow:0 0 0 1px #000; }
.notif-menu{ top:calc(100% + 3px); right:0; width:300px; max-width:calc(100vw - 20px); max-height:70vh;
  overflow-y:auto; padding:0; border-radius:0; z-index:60;
  background:var(--win); color:var(--tx); font:12px/1.4 var(--ui);
  border:1px solid; border-color:var(--hi) var(--lo) var(--lo) var(--hi);
  box-shadow:0 0 0 1px var(--edge), 4px 4px 0 rgba(0,0,0,.35); }
.notif-head{ position:sticky; top:0; z-index:1; min-height:26px; padding:0 5px 0 8px; gap:8px;
  background:var(--win-dk); border-bottom:1px solid var(--lo); box-shadow:0 1px 0 var(--etch);
  font:700 11px var(--ui); letter-spacing:.06em; text-transform:uppercase; color:var(--tx-hi); }
.notif-head__t{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.notif-clear{ padding:2px 7px; margin:0; border-radius:0; cursor:pointer;
  background:var(--win); color:var(--tx-hi); font:700 10px/1.2 var(--ui); letter-spacing:.02em; text-transform:none;
  border:1px solid; border-color:var(--hi) var(--lo) var(--lo) var(--hi); box-shadow:0 0 0 1px var(--edge); }
.notif-clear:hover{ color:var(--hc-gold); text-decoration:none; }
.notif-clear:active{ border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.notif-clear:focus-visible{ outline:1px dotted var(--tx-hi); outline-offset:-3px; }
.notif-item{ border-bottom:1px solid #3E4637; background:transparent; }
.notif-item:hover{ background:#56624D; }
.notif-item--tag{ background:transparent; box-shadow:inset 3px 0 0 var(--hc-gold); }
.notif-item--tag:hover{ background:#56624D; }
.notif-item__link{ gap:9px; padding:7px 4px 7px 10px; color:var(--tx); text-decoration:none; }
.notif-item__link:hover{ text-decoration:none; }
.notif-item__link:focus-visible{ outline:1px dotted var(--tx-hi); outline-offset:-3px; }
.notif-item__ico{ width:18px; height:18px; background-color:var(--gold-hi); }
.notif-item__name{ font:700 12px/1.25 var(--ui); color:var(--tx-hi); }
.notif-item__cat{ font:11px/1.35 var(--ui); color:var(--tx-2); }
.notif-item__cat--tag{ color:var(--gold-hi); font-weight:700; }
.notif-item__when{ font:10px var(--num); color:var(--tx-3); }
.notif-item__x{ width:28px; color:var(--tx-2); opacity:.55; }
.notif-item:hover .notif-item__x{ opacity:.85; }
.notif-item__x:hover{ opacity:1; color:var(--bad); }
.notif-item__x:focus-visible{ opacity:1; outline:1px dotted var(--tx-hi); outline-offset:-4px; }
.notif-empty{ padding:16px 12px; font:12px/1.5 var(--ui); color:var(--tx-2); text-align:center; }
.notif-all{ display:block; margin:6px; padding:5px 10px; text-align:center; text-decoration:none;
  background:var(--win); color:var(--tx-hi); font:700 11px var(--ui); letter-spacing:.04em; text-transform:uppercase;
  border:1px solid; border-color:var(--hi) var(--lo) var(--lo) var(--hi); box-shadow:0 0 0 1px var(--edge); }
.notif-all:hover{ background:var(--win); color:var(--hc-gold); text-decoration:none; }
.notif-all:active{ border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.notif-all:focus-visible{ outline:1px dotted var(--tx-hi); outline-offset:-4px; }

/* ============================================================================
   E. SEARCH TYPEAHEAD (search.js) — sunken list under the input
   ========================================================================== */
.ac-box{ top:calc(100% + 2px); padding:1px; z-index:60; max-height:340px; overflow-y:auto; text-align:left;
  background:var(--win-dk); border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo);
  box-shadow:0 0 0 1px var(--edge), 4px 4px 0 rgba(0,0,0,.3); }
.ac-item{ gap:8px; padding:4px 7px; color:var(--tx); font:12px var(--ui); text-decoration:none;
  border-bottom:1px solid #373F31; }
.ac-item:last-child{ border-bottom:0; }
.ac-item:hover, .ac-item.is-active{ background:var(--sel); color:var(--tx-hi); text-decoration:none; }
.ac-av{ width:22px; height:22px; border:1px solid var(--lo); background:var(--well); }
.ac-name{ font:700 12px var(--ui); color:var(--tx-hi); }
.ac-score{ font:700 11px var(--num); color:var(--gold-hi); }
.ac-item:hover .ac-score, .ac-item.is-active .ac-score{ color:#fff; }

/* ============================================================================
   B. FOOTER
   ========================================================================== */
.sfoot{ margin-top:12px; padding:8px 14px 2px; text-align:center; font-family:var(--ui);
  border-top:1px solid #20251A; box-shadow:inset 0 1px 0 #4A5340; }
.sfoot__nav{ margin:2px 0 4px; color:var(--hc-gold); }
.sfoot__nav a, .sfoot__nav button, .sfoot__nav .sfoot__lb, .sfoot__nav .tut-link{
  color:var(--hc-gold); font:700 13px var(--ui); text-decoration:none; }
.sfoot__nav a:hover, .sfoot__nav .sfoot__lb:hover, .sfoot__nav .tut-link:hover{ color:var(--gold-hi); text-decoration:underline; }
.sfoot__lb:focus-visible, .sfoot__nav .tut-link:focus-visible{ outline:1px dotted var(--tx-hi); outline-offset:2px; }
.sfoot__nav span{ color:#6E7766; }
.sfoot__copy{ color:var(--tx-2); }

/* ============================================================================
   Shared window pieces for the JS-appended modals below:
   bevel frame, 26px title band, small bevelled [x] close button
   ========================================================================== */
.legal-modal__backdrop, .saved-modal__backdrop, .admin-modal__backdrop{
  background:rgba(10,12,8,.62); -webkit-backdrop-filter:none; backdrop-filter:none; }
.legal-modal__panel, .saved-modal__panel, .admin-modal__panel,
.admin-confirm__box, .banned-box, .bpick, .xpb{
  background:var(--win); color:var(--tx); font:13px/1.5 var(--ui); border-radius:0;
  border:1px solid; border-color:var(--hi) var(--lo) var(--lo) var(--hi);
  box-shadow:0 0 0 1px var(--edge), 6px 6px 0 rgba(0,0,0,.3); }
.legal-modal__close, .saved-modal__close, .admin-modal__close{
  position:absolute; top:4px; right:5px; z-index:3; width:18px; height:17px; padding:0 0 1px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; border-radius:0;
  background:var(--win); color:var(--tx-hi); font:700 14px/1 var(--num);
  border:1px solid; border-color:var(--hi) var(--lo) var(--lo) var(--hi); box-shadow:0 0 0 1px var(--edge); }
.bpick__x, .xpb__x{
  position:relative; flex:none; width:18px; height:17px; padding:0 0 1px; margin:0;
  display:flex; align-items:center; justify-content:center; cursor:pointer; border-radius:0;
  background:var(--win); color:var(--tx-hi); font:700 11px/1 var(--num);
  border:1px solid; border-color:var(--hi) var(--lo) var(--lo) var(--hi); box-shadow:0 0 0 1px var(--edge); }
.legal-modal__close:hover, .saved-modal__close:hover, .admin-modal__close:hover,
.bpick__x:hover, .xpb__x:hover{ color:var(--hc-gold); background:var(--win); }
.legal-modal__close:active, .saved-modal__close:active, .admin-modal__close:active,
.bpick__x:active, .xpb__x:active{ border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.legal-modal__close:focus-visible, .saved-modal__close:focus-visible, .admin-modal__close:focus-visible,
.bpick__x:focus-visible, .xpb__x:focus-visible{ outline:1px dotted var(--tx-hi); outline-offset:-4px; }

/* classic scrollbars inside the scrolling window bodies */
.legal-modal__body, .saved-modal__body, .admin-modal__body, .bpick__body, .xpb{ scrollbar-width:auto; scrollbar-color:auto; }
.legal-modal__body::-webkit-scrollbar, .saved-modal__body::-webkit-scrollbar, .admin-modal__body::-webkit-scrollbar,
.bpick__body::-webkit-scrollbar, .xpb::-webkit-scrollbar{ width:16px; background:#353C2F; }
.legal-modal__body::-webkit-scrollbar-track, .saved-modal__body::-webkit-scrollbar-track, .admin-modal__body::-webkit-scrollbar-track,
.bpick__body::-webkit-scrollbar-track, .xpb::-webkit-scrollbar-track{ background:#353C2F; }
.legal-modal__body::-webkit-scrollbar-thumb, .saved-modal__body::-webkit-scrollbar-thumb, .admin-modal__body::-webkit-scrollbar-thumb,
.bpick__body::-webkit-scrollbar-thumb, .xpb::-webkit-scrollbar-thumb{ background:var(--win); min-height:24px; border-radius:0;
  border:1px solid; border-color:var(--hi) var(--lo) var(--lo) var(--hi); }

/* shared bevel buttons inside those windows */
.set-btn, .admin-btn, .banned-box__out, .bpick__none, .bpick__editcustom, .cab__del, .cab__tdel{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; text-decoration:none; white-space:nowrap;
  background:var(--win); color:var(--tx-hi); font:700 11px/1.2 var(--ui); letter-spacing:.02em; text-transform:none; border-radius:0;
  border:1px solid; border-color:var(--hi) var(--lo) var(--lo) var(--hi); box-shadow:0 0 0 1px var(--edge); }
.set-btn:hover:not(:disabled), .admin-btn:hover, .banned-box__out:hover, .bpick__none:hover, .bpick__editcustom:hover,
.cab__del:hover, .cab__tdel:hover{ color:var(--hc-gold); background:var(--win); text-decoration:none;
  border-color:var(--hi) var(--lo) var(--lo) var(--hi); }
.set-btn:active:not(:disabled), .admin-btn:active:not(:disabled), .banned-box__out:active, .bpick__none:active,
.bpick__editcustom:active, .cab__del:active, .cab__tdel:active{ border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.set-btn:focus-visible, .admin-btn:focus-visible, .banned-box__out:focus-visible, .bpick__none:focus-visible,
.bpick__editcustom:focus-visible{ outline:1px dotted currentColor; outline-offset:-4px; }

/* shared sunken fields */
.set-input, .admin-search, .admin-bladd__id, .admin-bladd__reason, .admin-syscard__in, .admin-banform__reason, .cab__in, .cab__sel{
  background:var(--win-dk); color:var(--tx-hi); border-radius:0;
  border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); box-shadow:inset 1px 1px 0 #1d2218; }
.set-input:focus, .admin-search:focus, .admin-bladd__id:focus, .admin-bladd__reason:focus, .admin-syscard__in:focus,
.admin-banform__reason:focus, .cab__in:focus, .cab__sel:focus{ outline:none; background:#434C3B;
  border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.set-input::placeholder, .admin-search::placeholder, .admin-bladd__id::placeholder, .admin-bladd__reason::placeholder,
.admin-syscard__in::placeholder, .admin-banform__reason::placeholder, .cab__in::placeholder{ color:var(--tx-3); }

/* ============================================================================
   F. TEXT WINDOW — #legal-modal (Terms / Privacy), #score-info-modal (rating
   explainer), #ms-avg-info-modal (averages info), #settings-modal (Privacy & data).
   Title band = the panel's ::before; the body scrolls under it, so the [x]
   stays put.
   ========================================================================== */
.legal-modal{ padding:20px; }
.legal-modal__panel{ display:flex; flex-direction:column; width:100%; max-width:640px; max-height:85vh;
  overflow:hidden; padding:0; }
.legal-modal__panel::before{ content:"steamcommunity.report"; content:"steamcommunity.report" / "";
  flex:none; display:block; height:26px; padding:0 34px 0 8px; background:var(--win-dk);
  border-bottom:1px solid var(--lo); box-shadow:0 1px 0 var(--etch);
  font:700 11px/26px var(--ui); letter-spacing:.06em; color:var(--tx-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.legal-modal__body{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:14px 18px 18px;
  color:var(--tx); font:13px/1.6 var(--ui); }
.legal-modal__body > :last-child{ margin-bottom:0; }
.legal-modal__body .legal__h2{ margin:0 0 4px; font:700 19px/1.25 var(--num); letter-spacing:.01em; color:var(--tx-hi); }
.legal-modal__body .legal__meta{ margin:0 0 14px; padding:0 0 9px; font:11px var(--hcmono); color:var(--tx-2);
  border-bottom:1px solid var(--lo); box-shadow:0 1px 0 var(--etch); }
.legal-modal__body h3{ margin:18px 0 7px; padding:0 0 4px; font:700 11px/1.4 var(--ui); letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold-hi); border-bottom:1px solid var(--lo); box-shadow:0 1px 0 var(--etch); }
.legal-modal__body h3.legal__h3--flash{ color:#fff; background:var(--sel); padding-left:6px; margin-left:-6px; }
.legal-modal__body p{ margin:0 0 10px; }
.legal-modal__body a{ color:var(--gold-hi); }
.legal-modal__body a:hover{ color:var(--hc-gold); }
.legal-modal__body b, .legal-modal__body strong{ color:var(--tx-hi); }
.legal-modal__body code{ padding:0 4px; background:var(--well); color:var(--gold-hi); font:12px var(--hcmono); }
.legal-modal__body .legal__lead{ margin:0 0 16px; padding:8px 12px; font-size:13px; line-height:1.6; color:var(--tx);
  background:var(--win-dk); border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo);
  box-shadow:inset 3px 0 0 var(--hc-gold); }

/* rating explainer / averages info: each card is an etched group box, its
   heading the legend on the top edge */
.score-info .score-info__intro{ margin:0 0 16px; color:var(--tx-2); line-height:1.55; }
.score-info .legal__meta + .score-info__card{ margin-top:18px; }
.score-info__card{ margin:18px 0 12px; padding:0 12px 10px; background:none; border-radius:0;
  border:1px solid var(--lo); box-shadow:inset 1px 1px 0 var(--etch), 1px 1px 0 var(--etch); }
.score-info .score-info__h{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px;
  width:-moz-fit-content; width:fit-content; max-width:calc(100% + 6px);
  margin:-9px 0 6px -6px; padding:0 6px; background:var(--win); border:0; box-shadow:none;
  font:700 11px/17px var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--gold-hi); }
.score-info__tag{ padding:1px 5px; border-radius:0; font:700 9px/1.3 var(--ui); letter-spacing:.08em; color:var(--tx-2);
  background:var(--well); border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.score-info__card p{ margin:0 0 8px; font-size:12.5px; line-height:1.55; color:var(--tx); }
.score-info .score-info__sub{ margin:10px 0 5px; font:700 10px/1.4 var(--ui); letter-spacing:.12em; text-transform:uppercase; color:var(--tx-hi); }
.score-info .score-info__list{ margin:0 0 8px; padding:0 0 0 18px; }
.score-info__list li{ margin:0 0 3px; font-size:12.5px; line-height:1.55; color:var(--tx); }
.score-info__cal{ font:11px var(--hcmono); color:var(--tx-3); }
.score-info .score-info__foot{ margin:6px 0 0; font-size:12px; color:var(--tx-2); }
.score-info a{ color:var(--gold-hi); }

/* Privacy & data settings (settings.js) — generic pieces only; the match
   tracking card's own internals are styled elsewhere */
.set-body .set-intro{ margin:0 0 14px; font-size:12.5px; line-height:1.6; color:var(--tx-2); }
.set-body .set-muted, .set-muted{ font-size:12.5px; color:var(--tx-2); }
.set-body .set-err, .set-err{ font-size:12.5px; color:#F4B7A9; }
.set-card{ margin:0 0 12px; padding:10px 12px 12px; background:rgba(0,0,0,.06); border-radius:0;
  border:1px solid var(--lo); box-shadow:inset 1px 1px 0 var(--etch), 1px 1px 0 var(--etch); }
.set-card--danger{ background:rgba(142,59,46,.12); border-color:#4A1A12; box-shadow:inset 1px 1px 0 #8A4A3C, 1px 1px 0 #8A4A3C; }
.set-body .set-card__h{ margin:0 0 6px; padding:0; border:0; box-shadow:none; background:none;
  font:700 12px/1.4 var(--ui); letter-spacing:.06em; text-transform:uppercase; color:var(--gold-hi); }
.set-body .set-card--danger .set-card__h{ color:#F4B7A9; }
.set-body .set-card__d{ margin:0 0 10px; font-size:12.5px; line-height:1.55; color:var(--tx); }
.set-body .set-card__err{ margin:8px 0 0; font-size:12px; color:#F4B7A9; }
.set-btn{ padding:5px 12px; min-height:26px; margin:2px 0; }
.set-btn:disabled{ opacity:1; color:var(--tx-3); cursor:default; text-shadow:1px 1px 0 var(--lo); }
.set-btn--danger{ background:#8E3B2E; color:#fff; border-color:#C9786A #4A1A12 #4A1A12 #C9786A; }
.set-btn--danger:hover:not(:disabled){ background:#A04535; color:#fff; border-color:#C9786A #4A1A12 #4A1A12 #C9786A; }
.set-btn--danger:active:not(:disabled){ border-color:#4A1A12 #C9786A #C9786A #4A1A12; }
.set-pill{ padding:2px 7px; border-radius:0; font:700 10px/1.3 var(--ui); letter-spacing:.06em; }
.set-pill--hidden{ color:var(--tx-2); background:var(--well); border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.set-pill--beta{ padding:1px 5px; font-size:9px; letter-spacing:.08em; text-transform:uppercase; vertical-align:middle;
  color:#cdd6ff; background:#2B3050; border:1px solid; border-color:#6A72A8 #151830 #151830 #6A72A8; }
.set-stats{ font-size:12.5px; color:var(--tx); }
.set-input{ padding:5px 8px; min-height:28px; font:12px var(--hcmono); }
.set-trade-row{ gap:7px; }

/* Privacy & data: a wide two-column window on desktop so it fits without a
   scrollbar (match tracking left, account cards right); one column on phones */
#settings-modal .legal-modal__panel{ max-width:1040px; max-height:94vh; }
#settings-modal.set--sync .legal-modal__panel{ max-width:720px; }
#settings-modal.set--privacy .legal-modal__panel{ max-width:860px; }
/* Privacy & data: the account cards two per row, and the one-line pointer to
   the Sync my matches window above them */
.set-grid--cards{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.set-grid--cards > .set-card{ margin:0; }
.set-card.set-link{ display:flex; align-items:center; gap:12px; margin:0 0 10px; padding:8px 12px; }
.set-link__t{ flex:1 1 auto; min-width:0; font-size:12.5px; line-height:1.45; color:var(--tx); }
.set-link__t b{ color:var(--gold-hi); letter-spacing:.04em; text-transform:uppercase; font-size:12px; margin-right:6px; }
.set-link__s{ color:var(--tx-2); }
.set-link > .set-btn{ flex:none; margin:0; }
#settings-modal .legal-modal__body{ padding:12px 16px 14px; }
#settings-modal .legal__meta{ margin-bottom:8px; }
.set-body .set-intro{ margin:0 0 10px; }
.set-grid{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:10px; align-items:start; }
.set-col{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.set-col > .set-card{ margin:0; }
.set-col .set-card__d{ margin-bottom:7px; }
.set-body .set-stats{ display:flex; flex-wrap:wrap; gap:2px 14px; margin:0 0 8px; padding:0; list-style:none; }
.set-body .set-stats li{ margin:0; }
.set-btn--sm{ min-height:22px; padding:2px 8px; font-size:11px; margin:0; }

/* your sync codes */
.set-codes{ margin:0 0 10px; padding:8px 10px 10px; background:var(--well);
  border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.set-body .set-codes__head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0 0 6px;
  font:700 11px/1.4 var(--ui); letter-spacing:.08em; text-transform:uppercase; }
.set-body .set-codes__head b{ color:var(--tx-hi); }
.set-body .set-codes__head a{ display:inline-flex; align-items:center; gap:4px; font-weight:400; letter-spacing:0;
  text-transform:none; font-size:12px; white-space:nowrap; }
.set-code{ display:grid; grid-template-columns:120px minmax(0,1fr) 96px; align-items:center; gap:4px 8px;
  padding:4px 0; border-top:1px solid rgba(0,0,0,.25); }
.set-code:first-of-type{ border-top:0; }
.set-code__l{ font-size:12px; color:var(--tx-2); }
.set-body code.set-code__v{ padding:0; background:none; font:11.5px/1.4 var(--hcmono); color:var(--gold-hi);
  overflow-wrap:anywhere; user-select:all; }
.set-code__v.set-muted{ font-size:12px; }
.set-code__btns{ display:flex; justify-content:flex-end; gap:4px; }
.set-body .set-codes__d{ margin:6px 0 8px; font-size:12px; line-height:1.5; color:var(--tx-2); }
.set-codes > .set-btn{ margin:0; }
.set-codes__wiz{ margin:-2px 0 10px; }
.set-card--fixing .set-opts, .set-card--fixing .set-codes__d, .set-card--fixing .set-conn-d,
.set-card--updating [data-set-action="mh-disconnect"]{ display:none; }
.set-card--fixing .set-codes{ margin-bottom:8px; }
.set-card--fixing .set-codes > .set-btn{ margin-top:6px; }
.set-codes__wiz[hidden]{ display:none; }

/* option rows: label + state, one-line explanation, one button */
.set-opts{ margin:0 0 10px; border-top:1px solid var(--lo); box-shadow:0 -1px 0 var(--etch) inset; }
.set-opt{ display:flex; align-items:center; gap:12px; padding:7px 0; border-bottom:1px solid var(--lo);
  box-shadow:0 1px 0 var(--etch); }
.set-opt__t{ flex:1 1 auto; min-width:0; }
.set-body .set-opt__h{ margin:0; font-size:12.5px; line-height:1.4; }
.set-body .set-opt__d{ margin:1px 0 0; font-size:12px; line-height:1.45; color:var(--tx-2); }
.set-opt__s{ margin-left:4px; padding:0 5px; font:700 9.5px/15px var(--ui); letter-spacing:.08em; text-transform:uppercase;
  color:var(--tx-2); background:var(--well); border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.set-opt__s.is-on{ color:#1d2016; background:var(--hc-gold); border-color:#E6DC96 #6E6524 #6E6524 #E6DC96; }
.set-opt > .set-btn{ flex:none; min-width:108px; }
.set-opt .set-persona__sel{ flex:none; width:200px; }
.set-persona__saved{ margin-left:6px; font-size:11.5px; font-weight:400; color:#9fdba0; }
/* the sync wizard, tightened to fit the window's left column */
@media (min-width:861px){
  #settings-modal .sync-ui .sync{ margin:2px 0 8px; padding:10px 12px 4px; }
  #settings-modal .sync-ui .sync__why{ margin:0 0 6px; font-size:12.5px; line-height:1.45; }
  #settings-modal .sync-ui .sync__safe{ padding:5px 9px; line-height:1.45; }
  #settings-modal .sync-ui .sync-step{ padding:8px 0; }
  #settings-modal .sync-ui .sync-step__h{ margin:2px 0 6px; }
  #settings-modal .sync-ui .sync-step__d{ margin-top:5px; line-height:1.45; }
  #settings-modal .sync-ui .sync-step__d--top{ margin:0 0 6px; }
  #settings-modal .sync-ui .sync-btn--big{ min-height:32px; padding:5px 14px; font-size:13px; }
  #settings-modal .sync-ui .sync-paste{ min-height:0; height:46px; }
  #settings-modal .sync-ui .sync-chips{ margin-top:6px; gap:3px; }
  #settings-modal .sync-ui .sync-chip{ grid-template-columns:16px 132px minmax(0,1fr) auto; grid-template-areas:"ico label val state"; min-height:28px; padding:4px 9px; }
  #settings-modal .sync-ui .sync-chip__l{ white-space:nowrap; }
  #settings-modal .sync-ui .sync-chip__s{ font-size:10px; }
  #settings-modal .sync-ui [data-sync-step="3"] .sync-step__body{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; }
  #settings-modal .sync-ui [data-sync-step="3"] .sync-step__h{ flex:0 0 100%; margin-bottom:2px; }
  #settings-modal .sync-ui [data-sync-step="3"] .sync-ready{ margin:0; flex:1 1 180px; }
  #settings-modal .sync-ui [data-sync-step="3"] .sync-progress,
  #settings-modal .sync-ui [data-sync-step="3"] .sync-alert{ flex:0 0 100%; }
  #settings-modal .sync-ui .sync-faq__sum{ min-height:28px; padding-top:4px; }
}
@media (max-width:860px){
  .set-grid{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:520px){
  .set-code{ grid-template-columns:minmax(0,1fr) auto; }
  .set-code__l{ grid-column:1 / -1; }
  .set-opt{ flex-wrap:wrap; gap:6px 10px; }
  .set-opt > .set-btn, .set-opt .set-persona__sel{ width:100%; min-width:0; }
}

/* ============================================================================
   G. SAVED PLAYERS (saved.js) — the head is the title band
   ========================================================================== */
.saved-modal{ padding:20px; }
.saved-modal__panel{ display:flex; flex-direction:column; width:100%; max-width:560px; max-height:85vh; overflow:hidden; padding:0; }
.saved-modal__head{ flex:none; display:flex; align-items:center; flex-wrap:nowrap; gap:8px; height:26px; margin:0; padding:0 34px 0 8px;
  background:var(--win-dk); border-bottom:1px solid var(--lo); box-shadow:0 1px 0 var(--etch); }
.saved-modal__title{ margin:0; font:700 12px/26px var(--ui); letter-spacing:.06em; text-transform:uppercase; color:var(--tx-hi);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.saved-modal__count{ flex:none; min-width:18px; padding:1px 5px; border-radius:0; font:700 10px/1.2 var(--num); letter-spacing:0;
  color:var(--gold-hi); background:var(--well); border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.saved-modal__body{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:10px 12px 12px; }
.saved-list{ background:var(--win-dk); border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.saved-row{ gap:9px; margin:0; padding:6px 8px; background:transparent; border:0; border-bottom:1px solid #373F31; }
.saved-row:last-child{ border-bottom:0; }
.saved-row:hover{ background:#465040; }
.saved-av{ width:26px; height:26px; border:1px solid var(--lo); background:var(--well); }
.saved-av--ph{ background:var(--well); }
.saved-name{ font:700 12px/1.3 var(--ui); color:var(--tx-hi); }
.saved-name:hover{ color:var(--hc-gold); text-decoration:none; }
.saved-note{ font:11.5px/1.4 var(--ui); color:var(--tx-2); }
.saved-remove{ position:relative; width:18px; height:17px; margin-left:4px; padding:0 0 1px; border-radius:0; cursor:pointer;
  background:var(--win); color:var(--tx-hi); font:700 13px/1 var(--num);
  border:1px solid; border-color:var(--hi) var(--lo) var(--lo) var(--hi); box-shadow:0 0 0 1px var(--edge); }
.saved-remove:hover{ color:var(--bad); }
.saved-remove:active{ border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.saved-remove:focus-visible{ outline:1px dotted var(--tx-hi); outline-offset:-4px; }
.saved-empty{ padding:24px 14px; font:12px/1.5 var(--ui); color:var(--tx-2);
  background:var(--win-dk); border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.saved-empty--err{ color:#F4B7A9; background:var(--win-dk); border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.saved-rowerr{ font-size:12px; color:#F4B7A9; }

/* ============================================================================
   H. CONFIRM DIALOG (admin.js / reviews.js askConfirm, appended to <body>)
   ========================================================================== */
.admin-confirm{ background:rgba(10,12,8,.55); }
.admin-confirm__box{ max-width:400px; padding:0 0 12px; }
.admin-confirm__title{ height:26px; margin:0 0 12px; padding:0 8px; background:var(--win-dk);
  font:700 12px/26px var(--ui); letter-spacing:.04em; color:var(--tx-hi); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  border-bottom:1px solid var(--lo); box-shadow:0 1px 0 var(--etch); }
.admin-confirm__msg{ margin:0 12px 14px; font:12px/1.55 var(--ui); color:var(--tx); }
.admin-confirm__row{ gap:8px; margin:0 12px; }
.admin-confirm__box .admin-btn{ min-width:74px; padding:5px 13px; background:var(--win); color:var(--tx-hi);
  font:700 11px var(--ui); letter-spacing:.02em; border-radius:0;
  border:1px solid; border-color:var(--hi) var(--lo) var(--lo) var(--hi); box-shadow:0 0 0 1px var(--edge); }
.admin-confirm__box .admin-btn:hover{ color:var(--hc-gold); background:var(--win); border-color:var(--hi) var(--lo) var(--lo) var(--hi); }
.admin-confirm__box .admin-btn:active{ border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.admin-confirm__box .admin-btn:focus-visible{ outline:1px dotted currentColor; outline-offset:-4px; }
.admin-confirm__box .admin-btn--go{ background:var(--hc-gold); color:#1C2014; border-color:#E6DC96 #5F5620 #5F5620 #E6DC96; box-shadow:0 0 0 1px #0E110A; }
.admin-confirm__box .admin-btn--go:hover{ background:#D2C35C; color:#1C2014; border-color:#E6DC96 #5F5620 #5F5620 #E6DC96; }
.admin-confirm__box .admin-btn--danger{ background:#8E3B2E; color:#fff; border-color:#C9786A #4A1A12 #4A1A12 #C9786A; }
.admin-confirm__box .admin-btn--danger:hover{ background:#A04535; color:#fff; border-color:#C9786A #4A1A12 #4A1A12 #C9786A; }

/* ============================================================================
   I. SUSPENDED OVERLAY (auth.js #banned-overlay)
   ========================================================================== */
.banned-overlay{ background:rgba(10,12,8,.9); -webkit-backdrop-filter:none; backdrop-filter:none; }
.banned-box{ display:flex; flex-direction:column; max-width:420px; padding:0 0 12px; text-align:left; }
.banned-box__title{ height:26px; margin:0 0 12px; padding:0 8px; background:var(--win-dk);
  font:700 12px/26px var(--ui); letter-spacing:.06em; text-transform:uppercase; color:#F4B7A9;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  border-bottom:1px solid var(--lo); box-shadow:0 1px 0 var(--etch); }
.banned-box__msg{ margin:0 12px 8px; font-size:12.5px; line-height:1.55; color:var(--tx); }
.banned-box__reason{ margin:0 12px 8px; padding:6px 9px; font:12px/1.5 var(--ui); color:var(--tx-hi);
  background:var(--win-dk); border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.banned-box__foot{ margin:0 12px 12px; font-size:11.5px; color:var(--tx-2); }
.banned-box__out{ align-self:flex-end; margin:0 12px; padding:5px 16px; font-size:12px; }

/* ============================================================================
   J. TAG PICKER (.bpick) + XP BREAKDOWN (.xpb) — progression.js
   ========================================================================== */
.bpick-overlay, .xpb-overlay{ background:rgba(10,12,8,.62); }
.bpick{ padding:0; }
.bpick__head{ height:26px; padding:0 5px 0 8px; gap:8px; background:var(--win-dk);
  border-bottom:1px solid var(--lo); box-shadow:0 1px 0 var(--etch);
  font:700 12px var(--ui); letter-spacing:.04em; color:var(--tx-hi); }
.bpick__top{ gap:8px; padding:10px 12px; border-bottom:1px solid var(--lo); box-shadow:0 1px 0 var(--etch); }
.bpick__topk{ margin-right:2px; font:700 10px var(--ui); letter-spacing:.12em; color:var(--gold-hi); }
.bpick__none, .bpick__editcustom{ padding:4px 11px; min-height:24px; }
.bpick__editcustom{ color:var(--gold-hi); }
.bpick__locktag{ font:11px var(--ui); letter-spacing:0; color:var(--tx-2); }
/* filter tabs = toggle buttons; the active one pressed in selection gold */
.bpick__tabs{ gap:6px; padding:10px 12px 0; }
.bpick__tab{ padding:3px 8px; border-radius:0; cursor:pointer; background:var(--win); color:var(--tx);
  font:700 10px/1.3 var(--ui); letter-spacing:.06em; text-transform:uppercase;
  border:1px solid; border-color:var(--hi) var(--lo) var(--lo) var(--hi); box-shadow:0 0 0 1px var(--edge); }
.bpick__tab:hover{ color:var(--hc-gold); border-color:var(--hi) var(--lo) var(--lo) var(--hi); }
.bpick__tab:focus-visible{ outline:1px dotted var(--tx-hi); outline-offset:-3px; }
.bpick__tab.is-active, .bpick__tab.is-active:hover{ background:var(--sel); color:#fff; border-color:#5E5520 #B7A94A #B7A94A #5E5520; }
.bpick__tabn{ color:var(--tx-2); margin-left:5px; font-weight:400; }
.bpick__tab.is-active .bpick__tabn{ color:rgba(255,255,255,.78); }
.bpick__body{ margin:10px 12px 12px; padding:0 10px 10px; background:var(--win-dk); box-shadow:none;
  border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.bpick__glbl{ margin:0 -10px 8px; padding:8px 10px 4px; background:var(--win-dk);
  font:700 10px var(--ui); letter-spacing:.12em; color:var(--gold-hi);
  border-bottom:1px solid var(--lo); box-shadow:0 1px 0 var(--etch); }
.bpick__grid{ gap:6px; }
.bpick__cell{ border-radius:0; background:var(--win); transition:none;
  border:1px solid; border-color:var(--hi) var(--lo) var(--lo) var(--hi); box-shadow:0 0 0 1px var(--edge); }
.bpick__cell:hover{ background:#56624D; border-color:var(--hi) var(--lo) var(--lo) var(--hi); }
.bpick__cell:focus-visible{ outline:1px dotted var(--tx-hi); outline-offset:-4px; }
.bpick__cell.is-equipped, .bpick__cell.is-equipped:hover{ background:#585A35; border-color:#B7A94A #5E5520 #5E5520 #B7A94A;
  box-shadow:0 0 0 1px var(--edge), inset 0 0 0 1px var(--hc-gold); }
.bpick__cell.is-locked{ opacity:.55; }
.bpick__cell.is-locked:hover{ background:var(--win); border-color:var(--hi) var(--lo) var(--lo) var(--hi); }
.bpick__hint{ font:700 9px/1.3 var(--ui); letter-spacing:.03em; color:var(--tx-2); }
.bpick__cell.is-equipped .bpick__hint{ color:var(--gold-hi); }
.bpick__progbar{ height:6px; background:var(--well); border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.bpick__progfill{ background:var(--hc-gold); }
.bpick__progtxt{ font:700 9px var(--num); color:var(--tx-2); }
/* locked-cell padlock (inline SVG, currentColor) */
.bpick__lock{ display:block; top:6px; right:7px; line-height:0; color:var(--tx-2); opacity:.9; }
.bpick__lock svg, .bpick__locktag svg{ display:inline-block; vertical-align:-1px; }
.bpick__admin{ padding:1px 5px; border-radius:0; font:700 9px var(--ui); letter-spacing:.04em; color:var(--gold-hi);
  background:var(--win-dk); border:1px solid; border-color:var(--hi) var(--lo) var(--lo) var(--hi); }
.bpick__admin:hover{ color:#fff; background:var(--sel); border-color:#B7A94A #5E5520 #5E5520 #B7A94A; }
.bpick__empty{ font:italic 11px var(--ui); letter-spacing:0; color:var(--tx-2); }
/* the equip-failed note is appended to the overlay (beside the dialog): pin it
   as a status bar at the bottom of the screen instead */
.bpick__err{ position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:1001;
  max-width:calc(100vw - 32px); padding:6px 12px; font:700 12px/1.4 var(--ui); color:#fff; text-align:center;
  background:#8E3B2E; border:1px solid; border-color:#C9786A #4A1A12 #4A1A12 #C9786A; box-shadow:0 0 0 1px #000, 4px 4px 0 rgba(0,0,0,.3); }

.xpb{ padding:0 0 12px; }
.xpb__head{ position:sticky; top:0; z-index:2; height:26px; padding:0 5px 0 8px; gap:8px; background:var(--win-dk);
  border-bottom:1px solid var(--lo); box-shadow:0 1px 0 var(--etch);
  font:700 12px var(--ui); letter-spacing:.04em; color:var(--tx-hi); }
.xpb__sub{ margin:10px 12px 10px; font:700 10px var(--ui); letter-spacing:.1em; color:var(--tier, var(--gold-hi)); }
.xpb__list{ margin:0 12px; padding:10px; gap:9px; background:var(--win-dk);
  border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.xpb__label{ font:700 12px var(--ui); letter-spacing:0; color:var(--tx-hi); }
.xpb__rate{ font:10px var(--num); color:var(--tx-2); }
.xpb__val{ font:700 12px var(--num); color:var(--tier, var(--gold-hi)); }
.xpb__track{ height:10px; background:#11140D; border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.xpb__bar{ background:var(--tier, var(--hc-gold)); box-shadow:none; }
.xpb__foot{ margin:10px 12px 0; padding-top:8px; border-top:1px solid var(--lo); box-shadow:inset 0 1px 0 var(--etch);
  font:11px/1.5 var(--ui); letter-spacing:0; color:var(--tx-2); }

/* ============================================================================
   K. TRUST TOOLTIP, REFRESH TOAST, PROFILE LOADING / ERROR STATES
   ========================================================================== */
/* trust factor "i" tooltip */
.trust-info__tip{ padding:6px 9px; border-radius:0; background:var(--win-dk); color:var(--tx); font:11px/1.5 var(--ui);
  border:1px solid; border-color:var(--hi) var(--lo) var(--lo) var(--hi);
  box-shadow:0 0 0 1px var(--edge), 3px 3px 0 rgba(0,0,0,.3); }
.trust-info__tip::after{ border-top-color:var(--edge); }
.trust-info__tip strong{ color:var(--tx-hi); }

/* "Refreshing..." toast */
.scr-refresh{ gap:8px; padding:5px 10px; border-radius:0; background:var(--win); color:var(--tx-hi);
  font:700 11px var(--ui); letter-spacing:.03em;
  border:1px solid; border-color:var(--hi) var(--lo) var(--lo) var(--hi);
  box-shadow:0 0 0 1px var(--edge), 4px 4px 0 rgba(0,0,0,.3); }

/* busy indicators: a sunken well with gold blocks marching through it (the old
   client's marquee progress bar) instead of a round spinner */
.ldg__spin, .admin-spinner{ width:135px; height:14px; border-radius:0;
  border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo);
  background-color:var(--well);
  background-image:repeating-linear-gradient(90deg, var(--hc-gold) 0 7px, transparent 7px 9px);
  background-repeat:no-repeat; background-size:36px 100%; background-position:-36px 0;
  box-shadow:inset 0 0 0 2px var(--well);
  animation:cc-marquee 1.9s steps(19) infinite; }
.admin-spinner{ margin-bottom:10px; }
.scr-refresh__dot{ flex:none; width:27px; height:10px; border-radius:0;
  border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo);
  background-color:var(--well);
  background-image:repeating-linear-gradient(90deg, var(--hc-gold) 0 5px, transparent 5px 7px);
  background-repeat:no-repeat; background-size:14px 100%; background-position:-14px 0;
  box-shadow:inset 0 0 0 1px var(--well);
  animation:cc-marquee-sm 1.1s steps(6) infinite; }
@keyframes cc-marquee{ from{ background-position:-36px 0; } to{ background-position:135px 0; } }
@keyframes cc-marquee-sm{ from{ background-position:-14px 0; } to{ background-position:28px 0; } }

.ldg__msg{ font:700 13px var(--ui); letter-spacing:.06em; text-transform:uppercase; color:var(--gold-hi); }
.ldg__sub{ font:12px/1.5 var(--ui); color:var(--tx-2); }
.state--error{ color:var(--tx); font-family:var(--ui); }
.err-msg{ font:700 14px/1.4 var(--ui); color:#F4B7A9; }
.err-hint{ margin-top:12px; font:12px var(--ui); color:var(--tx-2); }
.err-try{ margin-top:10px; font:12px var(--ui); color:var(--tx-2); }
.err-try a{ color:var(--gold-hi); }
.err-try a:hover{ color:var(--hc-gold); }

/* ============================================================================
   L. ADMIN PANEL (admin.js #admin-modal) — lighter pass: classic window,
   title band, property-sheet tabs, raised table header, bevel controls. The
   body scrolls under the fixed head / overview / tabs.
   ========================================================================== */
.admin-modal__panel{ display:flex; flex-direction:column; width:100%; max-width:860px; max-height:85vh; overflow:hidden; padding:0; }
.admin-modal__head{ flex:none; display:flex; align-items:center; gap:10px; height:26px; margin:0; padding:0 34px 0 8px;
  background:var(--win-dk); border-bottom:1px solid var(--lo); box-shadow:0 1px 0 var(--etch); overflow:hidden; white-space:nowrap; }
.admin-modal__title{ flex:none; margin:0; font:700 12px/26px var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--tx-hi); }
.admin-modal__sub{ min-width:0; margin:0; font:11px/26px var(--ui); letter-spacing:.02em; color:var(--tx-2); overflow:hidden; text-overflow:ellipsis; }
.admin-overview{ flex:none; margin:10px 12px 0; border-radius:0; background:var(--well);
  border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.admin-ov{ padding:8px 6px; background:transparent; border-left:1px solid #373F31; }
.admin-ov__val{ font:700 16px/1.1 var(--num); }
.admin-ov__lbl{ font:700 9px var(--ui); letter-spacing:.08em; color:var(--tx-2); }
.admin-tabs{ flex:none; display:flex; align-items:flex-end; flex-wrap:wrap; gap:2px; margin:10px 12px 0; padding:0 0 0 4px;
  border-bottom:1px solid var(--hi); }
.admin-tab{ height:24px; margin:0; padding:0 10px; gap:6px; cursor:pointer; border-radius:0; transition:none;
  background:var(--win-dk); color:var(--tx-2); font:700 11px var(--ui); letter-spacing:.06em; text-transform:uppercase;
  border:1px solid; border-bottom:0; border-color:var(--hi) var(--lo) transparent var(--hi); }
.admin-tab:hover{ color:var(--hc-gold); }
.admin-tab:focus-visible{ outline:1px dotted var(--tx-hi); outline-offset:-4px; }
/* only the active tab dips 1px over the strip's bottom line, so it merges with the sheet */
.admin-tab--active, .admin-tab--active:hover{ position:relative; z-index:1; height:27px; margin-bottom:-1px; padding-bottom:1px;
  background:var(--win); color:var(--tx-hi); border-color:var(--hi) var(--lo) transparent var(--hi); }
.admin-tab__count{ padding:1px 5px; border-radius:0; font:700 10px/1.2 var(--num); letter-spacing:0; color:var(--tx-2);
  background:var(--well); border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.admin-tab--active .admin-tab__count{ color:var(--gold-hi); border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.admin-modal__body{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding:12px 12px 14px; }

/* states */
.admin-empty{ font-size:12px; color:var(--tx-2); }
.admin-empty--err{ color:#F4B7A9; }
.admin-state{ padding:24px 14px; background:var(--win-dk); border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.admin-state--loading{ background:var(--win-dk); border-style:solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.admin-state--err{ background:rgba(142,59,46,.16); border-color:#4A1A12 #C9786A #C9786A #4A1A12; }
.admin-state__title{ font:700 13px var(--ui); color:var(--tx-hi); }
.admin-state__hint{ color:var(--tx-2); }
.admin-state--err .admin-state__msg{ color:#F4B7A9; }

/* table: sunken list, raised header cells */
.admin-table{ background:var(--win-dk); border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.admin-table th{ padding:4px 8px; background:var(--win); color:var(--tx); font:700 10px var(--ui); letter-spacing:.08em;
  border-bottom:1px solid var(--lo); box-shadow:inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo); }
.admin-th--rating{ color:var(--tx-3); }
.admin-table td{ border-bottom:1px solid #373F31; color:var(--tx); }
.admin-table tbody tr:hover td{ background:#465040; }
.admin-table a{ color:var(--gold-hi); }
.admin-row--open td{ background:rgba(196,181,80,.10); }
.admin-player{ color:var(--tx); }
.admin-player__name{ color:var(--tx-hi); }
.admin-player:hover .admin-player__name{ color:var(--hc-gold); }
.admin-player__name--id{ color:var(--tx-2); }
.admin-player__id{ color:var(--tx-3); opacity:1; }
.admin-comment{ color:var(--tx); }
.admin-time, .admin-banmeta, .admin-anon{ color:var(--tx-2); }
.admin-muted{ color:var(--tx-3); }
.admin-verified, .admin-rowok{ color:var(--ok); }
.admin-avatar{ border:1px solid var(--lo); background:var(--well); }
.admin-avatar--ph{ background:var(--well); }
.admin-staff-tag, .admin-role-tag--owner{ color:var(--gold-hi); background:var(--well);
  border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); }

/* icon buttons + text buttons */
.admin-ico{ background:var(--win); color:var(--tx-hi); transition:none;
  border:1px solid; border-color:var(--hi) var(--lo) var(--lo) var(--hi); box-shadow:0 0 0 1px var(--edge); }
.admin-ico:active:not(:disabled){ border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.admin-ico:focus-visible{ outline:1px dotted var(--tx-hi); outline-offset:-4px; }
.admin-caret{ color:var(--tx-2); transition:none; }
.admin-caret:hover{ color:var(--hc-gold); border-color:var(--lo); }
.admin-caret--open{ color:var(--gold-hi); }
.admin-btn{ padding:4px 11px; transition:none; }
.admin-btn:disabled, .admin-btn:disabled:hover{ opacity:.55; cursor:default; color:var(--tx-hi); background:var(--win);
  border-color:var(--hi) var(--lo) var(--lo) var(--hi); }
.admin-btn--go{ background:var(--hc-gold); color:#1C2014; border-color:#E6DC96 #5F5620 #5F5620 #E6DC96; box-shadow:0 0 0 1px #0E110A; }
.admin-btn--go:hover{ background:#D2C35C; color:#1C2014; border-color:#E6DC96 #5F5620 #5F5620 #E6DC96; }
.admin-btn--danger{ background:#8E3B2E; color:#fff; border-color:#C9786A #4A1A12 #4A1A12 #C9786A; }
.admin-btn--danger:hover{ background:#A04535; color:#fff; border-color:#C9786A #4A1A12 #4A1A12 #C9786A; }
.admin-btn--ghost{ background:none; color:var(--tx-2); border-color:transparent; box-shadow:none; }
.admin-btn--ghost:hover{ background:none; color:var(--hc-gold); border-color:transparent; }

/* users tab: search, filter chips, pager */
.admin-search{ padding:5px 8px; font:12px var(--hcmono); }
.admin-usertools__count, .admin-pager__range{ font:11px var(--num); color:var(--tx-2); }
.admin-chip, .admin-pagebtn{ border-radius:0; cursor:pointer; transition:none;
  background:var(--win); color:var(--tx); font:700 10px/1.2 var(--ui); letter-spacing:.06em;
  border:1px solid; border-color:var(--hi) var(--lo) var(--lo) var(--hi); box-shadow:0 0 0 1px var(--edge); }
.admin-chip{ padding:3px 9px; }
.admin-pagebtn{ padding:3px 8px; letter-spacing:.02em; }
.admin-chip:hover, .admin-pagebtn:hover:not(:disabled){ color:var(--hc-gold); border-color:var(--hi) var(--lo) var(--lo) var(--hi); }
.admin-chip:focus-visible, .admin-pagebtn:focus-visible{ outline:1px dotted var(--tx-hi); outline-offset:-3px; }
.admin-chip--on, .admin-chip--on:hover, .admin-pagebtn--on, .admin-pagebtn--on:hover{
  background:var(--sel); color:#fff; border-color:#5E5520 #B7A94A #B7A94A #5E5520; }
.admin-pagegap{ color:var(--tx-3); }
.admin-pager{ border-top:1px solid var(--lo); box-shadow:inset 0 1px 0 var(--etch); }
.admin-userexp td{ background:var(--win); border-bottom:1px solid var(--lo); }
.admin-userdetail__inner{ background:var(--well); border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.admin-userdetail__k{ color:var(--tx-2); }
.admin-userdetail__v{ color:var(--tx-hi); }
.admin-banform{ background:var(--win); border:1px solid; border-color:var(--hi) var(--lo) var(--lo) var(--hi);
  box-shadow:0 0 0 1px var(--edge), 4px 4px 0 rgba(0,0,0,.3); }
.admin-banform__reason{ padding:5px 8px; font:12px var(--ui); }
.admin-banform__err, .admin-bladd__err{ color:#F4B7A9; }
.admin-blnote{ color:var(--tx-2); }
.admin-bladd__id, .admin-bladd__reason{ padding:5px 8px; font-size:12px; }

/* system tab */
.admin-syscard{ background:none; border-radius:0; border:1px solid var(--lo); box-shadow:inset 1px 1px 0 var(--etch), 1px 1px 0 var(--etch); }
.admin-syscard--danger{ border-color:#4A1A12; box-shadow:inset 1px 1px 0 #8A4A3C, 1px 1px 0 #8A4A3C; }
.admin-syscard__h{ font:700 11px/1.3 var(--ui); letter-spacing:.08em; color:var(--gold-hi); }
.admin-syscard__d{ color:var(--tx-2); }
.admin-syscard__in{ padding:5px 8px; font:12px var(--hcmono); }
.admin-syscard__result{ font:12px var(--hcmono); color:var(--tx-2); }
.admin-syscard__result--ok{ color:var(--ok); }
.admin-syscard__result--err{ color:#F4B7A9; }

/* custom tab builder */
.cab{ color:var(--tx); }
.cab__in, .cab__sel{ padding:5px 8px; font:12px var(--ui); }
.cab__color{ background:var(--win-dk); border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.cab__create{ cursor:pointer; border-radius:0; font:700 12px var(--ui); padding:6px 12px;
  background:var(--hc-gold); color:#1C2014; border:1px solid; border-color:#E6DC96 #5F5620 #5F5620 #E6DC96; box-shadow:0 0 0 1px #0E110A; }
.cab__create:hover{ background:#D2C35C; color:#1C2014; }
.cab__create:active{ border-color:#5F5620 #E6DC96 #E6DC96 #5F5620; }
.cab__err{ font:700 11px var(--ui); color:#F4B7A9; }
.cab__glbl{ font:700 10px var(--ui); letter-spacing:.12em; color:var(--gold-hi); }
.cab__row{ background:var(--win-dk); border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.cab__rn{ font:700 12px var(--ui); color:var(--tx-hi); }
.cab__rn b{ color:var(--gold-hi); }
.cab__rr{ font:700 10px var(--num); color:var(--tx-2); }
.cab__del, .cab__tdel{ padding:2px 7px; font-size:9px; letter-spacing:.04em; text-transform:uppercase; }
.cab__del:hover, .cab__tdel:hover{ color:var(--bad); }
.cab__msg{ color:var(--tx-2); }
.cab__sec{ font:700 12px var(--ui); color:var(--tx-hi); }
.cab__sec--tag{ border-top:1px solid var(--lo); box-shadow:inset 0 1px 0 var(--etch); }
.cab__sechint{ font:10px var(--ui); color:var(--tx-2); }

/* ============================================================================
   REDUCED MOTION (these rules re-set the site.css reduced-motion overrides)
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .ldg__spin, .admin-spinner{ animation:none; background-position:36px 0; }
  .scr-refresh__dot{ animation:none; background-position:7px 0; opacity:.8; }
}

/* ============================================================================
   SMALLER SCREENS
   ========================================================================== */
/* header stacks (mirrors site.css's <=720px header block, which the rules above
   out-rank by load order) */
@media (max-width:720px){
  .shead{ padding:9px 12px 11px; }
  .shead__bar{ gap:8px 12px; flex-wrap:wrap; min-height:0; }
  .shead__rule{ margin:8px 0 9px; }
  .shead__row{ flex-direction:column; align-items:stretch; gap:10px; }
  .slogo__wm{ font-size:17px; }
  .shead__actions{ flex-direction:column; align-items:stretch; gap:10px; width:100%; }
  .snav{ justify-content:flex-start; }
  .shead .search--mini{ width:100%; max-width:100%; }

  .legal-modal, .saved-modal, .admin-modal{ padding:10px; }
  .legal-modal__panel, .saved-modal__panel, .admin-modal__panel{ max-height:90vh; }
  .legal-modal__body{ padding:12px 12px 16px; }
  .admin-modal__body{ padding:10px 10px 12px; }
  .admin-overview, .admin-tabs{ margin-left:10px; margin-right:10px; }
  .admin-tab{ padding:0 8px; font-size:10px; letter-spacing:.03em; }
  .admin-modal__sub{ display:none; }
}

/* phones: ~32px tap targets (min-* so the page-scoped sizes on the homepage /
   profile still set the look), a full-width bell menu, bigger [x] hit areas */
@media (max-width:640px){
  .snav a, .snav button, .snav .tut-link{ display:inline-flex; align-items:center; min-height:32px; }
  .notif-btn{ min-width:32px; min-height:32px; }
  .auth-signin, .auth-user__btn{ min-height:32px; }
  .search--mini .search__input, .search--mini .search__btn{ min-height:32px; }
  .auth-menu a{ padding:8px 14px 8px 10px; }
  .ac-item{ min-height:36px; }
  .sfoot{ padding-left:8px; padding-right:8px; }
  .sfoot__nav{ line-height:2.2; }

  /* the bell's menu opens under the whole header bar, full width, instead of
     hanging off the left edge of the screen */
  .shead__bar{ position:relative; }
  .notif{ position:static; }
  .notif-menu{ top:calc(100% + 4px); left:0; right:0; width:auto; max-width:none; max-height:65vh; }
  .notif-item__x{ width:34px; }

  /* invisible 32px hit area around the small bevelled [x] buttons */
  .legal-modal__close::after, .saved-modal__close::after, .admin-modal__close::after,
  .bpick__x::after, .xpb__x::after, .saved-remove::after{ content:""; position:absolute; inset:-8px; }
  .saved-remove{ margin-left:8px; }

  .set-btn{ min-height:32px; white-space:normal; text-align:center; }
  .set-input{ min-height:32px; }
  .admin-confirm{ padding:12px; }
  .admin-confirm__box .admin-btn{ min-height:32px; }
  .banned-box__out{ min-height:32px; }
  .bpick-overlay, .xpb-overlay{ padding:10px; }
  .bpick__top{ padding:8px 10px; }
  .bpick__tabs{ padding:8px 10px 0; gap:5px; }
  .bpick__tab{ min-height:28px; }
  .bpick__none, .bpick__editcustom{ min-height:32px; }
  .bpick__body{ margin:8px 10px 10px; }
  .admin-chip, .admin-pagebtn{ min-height:28px; }
}

@media (max-width:420px){
  .shead{ padding:8px 10px 10px; }
  .snav a, .snav button, .snav .tut-link{ padding:3px 5px; }
  .snav span{ margin:0; }
  .auth-user__name{ max-width:96px; }
  .legal-modal__body .legal__h2{ font-size:17px; }
}

/* short landscape phones: let the admin window scroll as a whole again so the
   fixed head + overview + tabs don't squeeze the body to nothing */
@media (max-height:520px){
  .admin-modal__panel{ overflow-y:auto; }
  .admin-modal__body{ flex:none; overflow:visible; }
}

/* ==========================================================================
   "Loading..." window: a copy of pookie.report's startup loader (the old
   Steam client dialog): Steam logo + "Loading...", a status line, a sunken
   bar that fills with gold blocks in uneven jumps, and the ArialPixel pixel
   font. SCR.loadingHtml() (core.js) builds it; the profile boot screen puts
   it on a black backdrop exactly like pookie.report.
   ========================================================================== */
@font-face{ font-family:ArialPixel; src:url("/assets/fonts/arial-pixel.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
.scr-load{ box-sizing:border-box; width:394px; max-width:100%; margin:0 auto; padding:4px; text-align:left;
  background:#4a5942; color:#dedfd6; border:1px solid; border-color:#8c9284 #292c21 #292c21 #8c9284; }
.scr-load *{ box-sizing:border-box; }
.scr-load, .scr-load *{ font-family:ArialPixel, Arial, sans-serif; font-size:16px; line-height:15px; font-weight:400; letter-spacing:0; text-transform:none; }
.scr-load__title{ display:flex; align-items:center; gap:5px; margin-top:3px; padding-left:2px; color:#fff; }
.scr-load__logo{ flex:none; width:16px; height:15px; background:no-repeat url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27%3E%3Cpath d=%27M1,12 2,12 2,13 1,13 M2,13 3,13 3,14 2,14 M3,12 4,12 4,13 3,13 M14,7 15,7 15,8 14,8 %27 fill=%27%238c9284%27/%3E%3Cpath d=%27M3,14 4,14 4,15 3,15 %27 fill=%27%23a5aa9c%27/%3E%3Cpath d=%27M0,11 1,11 1,12 0,12 M10,3 11,3 11,4 10,4 M10,5 11,5 11,6 10,6 M12,3 13,3 13,4 12,4 M12,5 13,5 13,6 12,6 M12,8 13,8 13,9 12,9 %27 fill=%27%23bdbeb5%27/%3E%3Cpath d=%27M0,10 1,10 1,11 0,11 M0,9 1,9 1,10 0,10 M0,8 1,8 1,9 0,9 M1,8 2,8 2,9 1,9 M1,9 2,9 2,10 1,10 M1,10 2,10 2,11 1,11 M2,10 3,10 3,11 2,11 M2,9 3,9 3,10 2,10 M3,9 4,9 4,10 3,10 M3,10 4,10 4,11 3,11 M4,9 5,9 5,10 4,10 M4,10 5,10 5,11 4,11 M5,10 6,10 6,11 5,11 M1,11 2,11 2,12 1,12 M2,11 3,11 3,12 2,12 M3,11 4,11 4,12 3,12 M4,11 5,11 5,12 4,12 M5,11 6,11 6,12 5,12 M3,13 4,13 4,14 3,14 M6,8 7,8 7,9 6,9 M6,7 7,7 7,8 6,8 M7,7 8,7 8,8 7,8 M7,8 8,8 8,9 7,9 M8,7 9,7 9,8 8,8 M8,8 9,8 9,9 8,9 M9,7 10,7 10,8 9,8 M9,8 10,8 10,9 9,9 M10,7 11,7 11,8 10,8 M10,8 11,8 11,9 10,9 M7,9 8,9 8,10 7,10 M8,9 9,9 9,10 8,10 M9,9 10,9 10,10 9,10 M7,6 8,6 8,7 7,7 M8,6 9,6 9,7 8,7 M8,5 9,5 9,6 8,6 M8,4 9,4 9,5 8,5 M8,3 9,3 9,4 8,4 M7,11 8,11 8,12 7,12 M11,3 12,3 12,4 11,4 M11,4 12,4 12,5 11,5 M10,4 11,4 11,5 10,5 M11,5 12,5 12,6 11,6 M12,4 13,4 13,5 12,5 M9,2 10,2 10,3 9,3 M13,2 14,2 14,3 13,3 M13,7 14,7 14,8 13,8 M14,6 15,6 15,7 14,7 M14,5 15,5 15,6 14,6 M14,4 15,4 15,5 14,5 M14,3 15,3 15,4 14,4 M10,1 11,1 11,2 10,2 M11,1 12,1 12,2 11,2 M12,1 13,1 13,2 12,2 %27 fill=%27%23ffffff%27/%3E%3Cpath d=%27M0,7 1,7 1,8 0,8 M11,0 12,0 12,1 11,1 M7,4 8,4 8,5 7,5 M8,1 9,1 9,2 8,2 %27 fill=%27%23848e84%27/%3E%3Cpath d=%27M2,8 3,8 3,9 2,9 M3,8 4,8 4,9 3,9 M6,14 7,14 7,15 6,15 M7,13 8,13 8,14 7,14 M10,9 11,9 11,10 10,10 M15,4 16,4 16,5 15,5 M15,5 16,5 16,6 15,6 %27 fill=%27%239ca29c%27/%3E%3Cpath d=%27M4,8 5,8 5,9 4,9 M6,9 7,9 7,10 6,10 %27 fill=%27%23d6d7ce%27/%3E%3Cpath d=%27M4,14 5,14 5,15 4,15 M5,14 6,14 6,15 5,15 M8,10 9,10 9,11 8,11 %27 fill=%27%23dedfde%27/%3E%3Cpath d=%27M5,8 6,8 6,9 5,9 M11,7 12,7 12,8 11,8 M12,7 13,7 13,8 12,8 M11,8 12,8 12,9 11,9 %27 fill=%27%23f7f7f7%27/%3E%3Cpath d=%27M2,12 3,12 3,13 2,13 M6,13 7,13 7,14 6,14 M7,12 8,12 8,13 7,13 M7,10 8,10 8,11 7,11 M7,5 8,5 8,6 7,6 %27 fill=%27%23efefef%27/%3E%3Cpath d=%27M4,12 5,12 5,13 4,13 M5,12 6,12 6,13 5,13 M9,6 10,6 10,7 9,7 %27 fill=%27%23cecfce%27/%3E%3Cpath d=%27M8,2 9,2 9,3 8,3 M9,1 10,1 10,2 9,2 M13,1 14,1 14,2 13,2 M14,2 15,2 15,3 14,3 %27 fill=%27%23d6dbd6%27/%3E%3Cpath d=%27M13,6 14,6 14,7 13,7 %27 fill=%27%23949e94%27/%3E%3Cpath d=%27M5,9 6,9 6,10 5,10 M6,10 7,10 7,11 6,11 M6,11 7,11 7,12 6,12 M6,12 7,12 7,13 6,13 M4,13 5,13 5,14 4,14 M5,13 6,13 6,14 5,14 M13,5 14,5 14,6 13,6 M13,3 14,3 14,4 13,4 M13,8 14,8 14,9 13,9 M9,10 10,10 10,11 9,11 M7,14 8,14 8,15 7,15 %27 fill=%27%235a6952%27/%3E%3Cpath d=%27M10,6 11,6 11,7 10,7 M11,6 12,6 12,7 11,7 M12,6 13,6 13,7 12,7 M13,4 14,4 14,5 13,5 M12,2 13,2 13,3 12,3 M11,2 12,2 12,3 11,3 M10,2 11,2 11,3 10,3 M9,3 10,3 10,4 9,4 M9,4 10,4 10,5 9,5 M9,5 10,5 10,6 9,6 M5,7 6,7 6,8 5,8 M7,2 8,2 8,3 7,3 M7,3 8,3 8,4 7,4 M9,0 10,0 10,1 9,1 M10,0 11,0 11,1 10,1 M12,0 13,0 13,1 12,1 M14,1 15,1 15,2 14,2 %27 fill=%27%23525d4a%27/%3E%3Cpath d=%27M6,6 7,6 7,7 6,7 %27 fill=%27%23adb6ad%27/%3E%3C/svg%3E"); }
.scr-load__body{ padding:5px 12px 16px; }
.scr-load__status{ margin:0 0 10px; color:#a0aa95; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scr-load__row{ display:flex; align-items:center; gap:8px; }
.scr-load__bar{ flex:1 1 280px; max-width:280px; height:24px; padding:3px; overflow:hidden; background:#3e4637;
  border:1px solid; border-color:#292c21 #8c9284 #8c9284 #292c21; }
.scr-load__fill{ height:100%; width:8%; background-image:linear-gradient(to right, #c4b550 8px, transparent 2px); background-size:12px 16px;
  animation:scr-load-fill 9s forwards; }
.scr-load__fill.is-done{ animation:none; width:100%; }
.scr-load__cancel{ flex:none; width:72px; margin:0; text-align:left; cursor:pointer; color:#fff; background:#4a5942; padding:4px 5px 3px; border-radius:0;
  border:1px solid; border-color:#8c9284 #292c21 #292c21 #8c9284; }
.scr-load__cancel:active{ border-color:#292c21 #8c9284 #8c9284 #292c21; }
.scr-load__cancel:focus-visible{ outline:1px dotted #fff; outline-offset:-4px; }
/* fast at first, then slower, never quite done until the page says so (is-done) */
@keyframes scr-load-fill{
  0%{ width:8%; animation-timing-function:steps(2,end); } 4%{ width:15%; animation-timing-function:steps(2,end); }
  8%{ width:24%; animation-timing-function:steps(1,end); } 12%{ width:33%; animation-timing-function:steps(2,end); }
  17%{ width:44%; animation-timing-function:steps(1,end); } 24%{ width:56%; animation-timing-function:steps(2,end); }
  33%{ width:65%; animation-timing-function:steps(2,end); } 45%{ width:73%; animation-timing-function:steps(1,end); }
  60%{ width:80%; animation-timing-function:steps(2,end); } 78%{ width:86%; animation-timing-function:steps(1,end); } 100%{ width:91%; } }
@media (prefers-reduced-motion: reduce){ .scr-load__fill{ animation:none; width:60%; } }
/* the profile boot screen: black backdrop, window centered (pookie.report's look) */
.state--loading.scr-boot{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:12px; background:#000; }
.state--loading.scr-boot[hidden]{ display:none; }
/* inline use inside a page panel */
.scr-load-wrap{ display:flex; align-items:center; justify-content:center; padding:28px 12px; }