:root{
  --bg:#050713;
  --bg-soft:#090d1d;
  --panel:rgba(12,15,39,.8);
  --panel-strong:rgba(12,15,39,.86);
  --panel-soft:rgba(17,22,56,.58);
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(139,92,246,.34);
  --text:#a9b5d2;
  --text-strong:#f4f7ff;
  --text-muted:#7280a2;
  --purple:#8b5cf6;
  --cyan:#22d3ee;
  --teal:#34d399;
  --amber:#fb923c;
  --rose:#fb7185;
  --shadow:0 20px 80px rgba(0,0,0,.34);
  --header:rgba(5,7,19,.68);
  --button:linear-gradient(135deg,#7c3aed,#0ea5e9);
}
.flex-row { display: flex; align-items: center; gap: 12px; }


html.light{
  --bg:#ece8f4;
  --bg-soft:#f4eff9;
  --panel:rgba(251,249,255,.82);
  --panel-strong:rgba(251,249,255,.88);
  --panel-soft:rgba(242,238,249,.62);
  --line:rgba(102,85,166,.13);
  --line-strong:rgba(124,58,237,.3);
  --text:#5e5879;
  --text-strong:#1f1a33;
  --text-muted:#6b688a;
  --purple:#7c3aed;
  --cyan:#0891b2;
  --teal:#0f766e;
  --amber:#ea580c;
  --rose:#e11d48;
  --shadow:0 16px 64px rgba(86,67,132,.12);
  --header:rgba(236,232,244,.72);
  --button:linear-gradient(135deg,#7c3aed,#0891b2);
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{min-height:100%;margin:0;background:var(--bg);color:var(--text-strong);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
html{
  background:var(--bg);
  scrollbar-color:var(--scrollbar, rgba(139,92,246,.36)) var(--bg-soft);
}
body{position:relative;overflow-x:hidden}
body,
.explore-modal,
.explore-modal-dialog{
  scrollbar-color:var(--scrollbar, rgba(139,92,246,.36)) var(--bg-soft);
}
body::-webkit-scrollbar,
.explore-modal::-webkit-scrollbar,
.explore-modal-dialog::-webkit-scrollbar{
  width:12px;
}
body::-webkit-scrollbar-track,
.explore-modal::-webkit-scrollbar-track,
.explore-modal-dialog::-webkit-scrollbar-track{
  background:var(--bg-soft);
}
body::-webkit-scrollbar-thumb,
.explore-modal::-webkit-scrollbar-thumb,
.explore-modal-dialog::-webkit-scrollbar-thumb{
  background:var(--scrollbar, rgba(139,92,246,.36));
  background-clip:padding-box;
  border:3px solid var(--bg-soft);
  border-radius:999px;
}
body::before{
  content:'';
  position:fixed;
  inset:-18%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 14% 18%,rgba(139,92,246,.16),transparent 24%),
    radial-gradient(circle at 82% 24%,rgba(34,211,238,.12),transparent 25%),
    radial-gradient(circle at 52% 86%,rgba(251,146,60,.08),transparent 22%);
}
a{text-decoration:none;color:inherit}
button,input,textarea{font:inherit}
[hidden]{display:none!important}

#stars-bg{position:fixed;inset:0;z-index:0;pointer-events:none}
.page-noise{position:fixed;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(rgba(255,255,255,.06) .6px,transparent .6px);background-size:22px 22px;opacity:.14;mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 80%)}

.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index: 40;
  border-bottom:1px solid var(--line);
  background:var(--header);
  backdrop-filter:blur(20px);
}

.header-shell{
  max-width:1160px;
  margin:0 auto;
  min-height:70px;
  padding:0 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.header-brand{
  font-family:'Orbitron',monospace;
  font-size:16px;
  font-weight:800;
  letter-spacing:.08em;
}

.header-brand span{color:var(--purple)}

.header-nav{
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
}

.header-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--text-muted);
  font-size:13px;
  letter-spacing:.05em;
  transition:color .2s,transform .2s;
}

.header-link:hover,.header-link.active{
  color:var(--text-strong);
  transform:translateY(-1px);
}

.nav-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 5px;
  margin-left:6px;
  font-size:10px;
  font-weight:700;
  line-height:1;
  color:#fff;
  background:var(--danger);
  border-radius:999px;
  box-shadow:0 2px 8px rgba(244,63,94,.45);
}

.header-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.header-cta,.header-account{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:10px 16px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--text);
  transition:transform .25s,border-color .25s,background .25s,box-shadow .25s;
}

.header-cta{
  border:none;
  background:var(--button);
  color:#fff;
  font-family:'Orbitron',monospace;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:0 14px 30px rgba(124,58,237,.22);
}

.header-account.logged-in{
  border-color:var(--line-strong);
  background:rgba(139,92,246,.08);
}

.header-account.active{
  border-color:var(--line-strong);
  background:rgba(139,92,246,.1);
}

.swipe-shortcut-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  padding: 4px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-right: 0;
}

.swipe-shortcut-switch:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--line-strong);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.swipe-shortcut-switch input {
  display: none;
}

.switch-slider {
  position: relative;
  width: 32px;
  height: 18px;
  background: rgba(0,0,0,0.4);
  border-radius: 20px;
  border: 1px solid var(--line);
  transition: all 0.3s ease;
}

.switch-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.swipe-shortcut-switch input:checked + .switch-slider {
  background: rgba(139, 92, 246, 0.2);
  border-color: var(--purple);
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.3);
}

.swipe-shortcut-switch input:checked + .switch-slider::after {
  left: calc(100% - 14px);
  background: var(--purple);
  box-shadow: 0 0 10px var(--purple);
}

.switch-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: color 0.3s;
  font-family: 'Orbitron', sans-serif;
}

.swipe-shortcut-switch input:checked ~ .switch-label {
  color: var(--text-strong);
  text-shadow: 0 0 8px rgba(255,255,255,0.3);
}

.header-cta:hover,.header-account:hover,.pf-theme-toggle:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 36px rgba(124,58,237,.28);
}

.header-account strong{
  display:block;
  color:var(--text-strong);
  font-family:'Orbitron',monospace;
  font-size:12px;
  letter-spacing:.06em;
}

.header-account small{
  color:var(--text);
  font-size:11px;
}

.pf-theme-toggle{
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--text-strong);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:transform .25s,border-color .25s,box-shadow .25s;
}

.pf-theme-toggle .icon-sun{display:none}
html.light .pf-theme-toggle .icon-sun{display:block}
html.light .pf-theme-toggle .icon-moon{display:none}

.page-shell{
  position:relative;
  z-index:2;
  max-width:1160px;
  margin:0 auto;
  padding:92px 20px 40px;
}

.page-stack{display:grid;gap:18px}
.hero-panel,.surface-panel,.mini-panel{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:30px;
  background:linear-gradient(180deg,var(--panel-strong),var(--panel-soft));
  box-shadow:var(--shadow);
}

.hero-panel::before,.surface-panel::before,.mini-panel::before{
  content:'';
  position:absolute;
  left:12%;
  right:12%;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(139,92,246,.42),rgba(34,211,238,.26),transparent);
}

.hero-panel{padding:28px}
.surface-panel{padding:22px}
.mini-panel{padding:22px}

.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:24px;align-items:center}
.hero-compact{padding:24px}
.hero-overview{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);
  gap:18px;
  align-items:start;
}
.hero-overview.full-width{
  grid-template-columns:1fr;
}
.hero-panel{
  position:relative;
}
.btn-logout-corner{
  position:absolute;
  top:24px;
  right:24px;
  z-index:10;
}
.hero-title-simple{
  margin-top:10px;
  font-size:clamp(24px,3vw,34px);
  letter-spacing:-.03em;
}
.hero-side-panel{
  padding:18px;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,255,255,.03);
}
.panel-title-row{
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:12px;
}
.micro-label{
  font-family:'Orbitron',monospace;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.panel-title{
  margin-top:8px;
  font-family:'Orbitron',monospace;
  font-size:20px;
  line-height:1.1;
  color:var(--text-strong);
}
.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--line-strong);
  background:rgba(124,58,237,.08);
  color:#c9bdff;
  font-family:'Orbitron',monospace;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.hero-kicker::before{
  content:'';
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 16px var(--cyan);
}

.hero-title,.section-title{
  margin:18px 0 0;
  font-family:'Orbitron',monospace;
  font-size:clamp(34px,5.8vw,68px);
  line-height:1.02;
  letter-spacing:-.04em;
}

.section-title{font-size:clamp(20px,2.2vw,30px);margin:0}
.hero-copy,.section-copy,.metric-copy,.card-copy,.account-item-meta{
  color:var(--text);
  line-height:1.8;
}

.hero-copy{max-width:none;margin-top:12px;font-size:15px;line-height:1.65}
.section-copy{margin-top:8px;line-height:1.65}

.hero-actions,.inline-actions,.stack-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.hero-actions{margin-top:16px}
.stack-actions{margin-top:14px}

.btn-primary,.btn-secondary,.btn-danger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:10px 16px;
  border-radius:16px;
  cursor:pointer;
  transition:transform .2s,border-color .2s,background .2s,opacity .2s;
}

.btn-primary{
  border:none;
  background:var(--button);
  color:#fff;
  font-family:'Orbitron',monospace;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.btn-secondary{
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--text);
}

.btn-primary:hover,.btn-secondary:hover,.btn-danger:hover{transform:translateY(-2px)}
.btn-danger{
  background:rgba(251,113,133,.08);
  border:1px solid rgba(251,113,133,.22);
  color:#ff99ab;
  font-family:'Orbitron',monospace;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.btn-danger:hover{
  background:rgba(251,113,133,.14);
  border-color:rgba(251,113,133,.35);
  box-shadow:0 0 20px rgba(251,113,133,.15);
}
.btn-secondary.active{
  color:var(--text-strong);
  border-color:var(--line-strong);
  background:rgba(139,92,246,.12);
}
.btn-primary:disabled,.btn-secondary:disabled{opacity:.55;cursor:not-allowed;transform:none}

.metric-grid,.route-grid,.content-grid,.summary-grid{display:grid;gap:14px}
.metric-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:20px}
.summary-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.route-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.content-grid{grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr)}

.metric-card,.route-card,.summary-card,.story-card,.account-item,.store-card,.quest-entry{
  border:1px solid var(--line);
  border-radius:22px;
  background:rgba(255,255,255,.03);
}

.metric-card,.route-card,.summary-card,.story-card,.quest-entry,.store-card{padding:16px}
.route-card{transition:transform .2s,border-color .2s,background .2s}
.route-card:hover,.store-card:hover{border-color:var(--line-strong);transform:translateY(-3px)}

.dashboard-strip{
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin-top:16px;
}

.dashboard-inline{
  margin-top:16px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.compact-strip{
  margin-top:14px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}

.dashboard-card{
  position:relative;
  overflow:hidden;
  min-height:116px;
  padding:14px;
  background:
    radial-gradient(circle at top right,rgba(139,92,246,.16),transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));
}

.dashboard-card::before{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:linear-gradient(180deg,var(--purple),var(--cyan));
  opacity:.8;
}

.dashboard-link{
  text-decoration:none;
  transition:transform .2s,border-color .2s,background .2s;
}

.dashboard-link:hover{
  transform:translateY(-2px);
  border-color:var(--line-strong);
  background:
    radial-gradient(circle at top right,rgba(139,92,246,.2),transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
}

.dashboard-value{
  margin-top:10px;
  font-family:'Orbitron',monospace;
  font-size:clamp(24px,2.6vw,30px);
  line-height:1;
  color:var(--text-strong);
}

.dashboard-copy{
  margin-top:7px;
  color:var(--text);
  font-size:12px;
  line-height:1.5;
}

.metric-label,.card-label,.section-kicker,.pill,.store-badge{
  font-family:'Orbitron',monospace;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.label-with-icon{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.label-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  color:var(--text-muted);
}

.label-icon svg{
  width:14px;
  height:14px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.metric-value{
  margin-top:10px;
  font-family:'Orbitron',monospace;
  font-size:28px;
  color:var(--text-strong);
}

.metric-copy{margin-top:8px;font-size:13px}
.card-title,.account-item-title,.store-title,.quest-title{
  font-family:'Orbitron',monospace;
  font-size:15px;
  letter-spacing:.04em;
  color:var(--text-strong);
}

.card-copy{margin-top:8px;font-size:14px}
.section-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--purple);
}

.section-kicker::before,.section-kicker::after{
  content:'';
  width:28px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(139,92,246,.45),transparent);
}

.page-head{display:flex;align-items:end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.page-lead{max-width:680px}
.section-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.section-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  font-family:'Orbitron',monospace;
  font-size:11px;
  color:var(--text);
}
.badge-row,.chip-row,.store-actions,.account-quicklinks{display:flex;flex-wrap:wrap;gap:10px}
.pill,.store-badge,.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--text);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.chip::before,.store-badge::before{
  content:'';
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--cyan);
}

.field{display:grid;gap:8px}
.field label{
  font-family:'Orbitron',monospace;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-muted);
}

.input,.textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.03);
  color:var(--text-strong);
  padding:12px 14px;
  outline:none;
}

.input:focus,.textarea:focus{border-color:var(--line-strong)}
.textarea{min-height:140px;resize:vertical}
select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23a9b5d2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
}
select.input option {
  background-color: var(--bg-soft);
  color: var(--text-strong);
}
.search-field{margin-bottom:12px}
.status-wrap{min-height:38px}
.status-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--text);
  font-size:13px;
}

.status-pill .dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 12px var(--teal);
}

.status-pill.error{
  color:#ffd3dd;
  border-color:rgba(255,111,145,.24);
  background:rgba(255,111,145,.08);
}

.status-pill.error .dot{background:var(--rose);box-shadow:0 0 12px var(--rose)}

.account-list{display:grid;gap:12px}
.account-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;}
.account-grid .account-item-expanded{grid-column:1 / -1;}
#chat-thread-list{
  max-height: 560px;
  overflow-y: auto;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-right: 6px;
  margin-right: -6px;
}
#chat-thread-list::-webkit-scrollbar { width: 4px; }
#chat-thread-list::-webkit-scrollbar-track { background: transparent; }
#chat-thread-list::-webkit-scrollbar-thumb { background: var(--accent-border, rgba(139, 92, 246, 0.2)); border-radius: 4px; }
#chat-thread-list::-webkit-scrollbar-thumb:hover { background: var(--scrollbar, rgba(139, 92, 246, 0.4)); }

.account-item-shell{
  position:relative;
}

.account-item-shell.is-active{
  z-index:1;
}

.account-item-shell.has-unread .account-item{
  border-color:rgba(34,211,238,.36);
  background:
    radial-gradient(circle at top right,rgba(34,211,238,.2),transparent 38%),
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
  box-shadow:0 0 0 1px rgba(34,211,238,.1), 0 18px 30px rgba(4,16,28,.24);
}

.account-item-shell.has-unread .account-item::before{
  background:linear-gradient(90deg,rgba(34,211,238,.75),rgba(110,231,255,.45),transparent);
}

.account-item{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:12px;
  align-items:start;
  padding:12px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at top right,rgba(139,92,246,.14),transparent 40%),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  transition: transform 0.2s, border-color 0.2s, background 0.2s;
}

.account-item.is-connected {
  border-color: rgba(139, 92, 246, 0.4);
  background: 
    radial-gradient(circle at top right, rgba(34, 211, 238, 0.1), transparent 40%),
    linear-gradient(180deg, rgba(139, 92, 246, 0.08), rgba(255, 255, 255, 0.02));
}

.account-item-remove-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel-strong);
  color: var(--text-muted);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, color 0.2s, border-color 0.2s, background 0.2s;
  z-index: 10;
  padding: 0;
  line-height: 1;
}

.account-item:hover .account-item-remove-btn {
  opacity: 1;
}

.account-item-remove-btn:hover {
  background: var(--rose);
  color: #fff;
  border-color: var(--rose);
}

.account-item-sync-btn {
  position: absolute;
  top: 28px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel-strong);
  color: var(--text-muted);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
  z-index: 10;
  padding: 0;
  line-height: 1;
}

.account-item:hover .account-item-sync-btn {
  opacity: 1;
}

.account-item-sync-btn:hover {
  background: var(--purple);
  color: #fff;
  border-color: var(--purple);
}

.account-item-sync-btn.is-syncing {
  animation: spin 1s linear infinite;
  pointer-events: none;
  opacity: 1 !important;
}

.account-item-avatar-btn {
  position: absolute;
  top: 52px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel-strong);
  color: var(--text-muted);
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, color 0.2s, border-color 0.2s, background 0.2s;
  z-index: 10;
  padding: 0;
  line-height: 1;
}

.account-item:hover .account-item-avatar-btn {
  opacity: 1;
}

.account-item-avatar-btn:hover {
  background: var(--cyan);
  color: #fff;
  border-color: var(--cyan);
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.account-item::before{
  content:'';
  position:absolute;
  left:14px;
  right:14px;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(139,92,246,.38),rgba(34,211,238,.22),transparent);
}

.account-item-art{
  height:56px;
  width:56px;
  flex-shrink:0;
  border-radius:16px;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at top left,rgba(139,92,246,.2),transparent 42%),
    linear-gradient(180deg,rgba(34,211,238,.12),rgba(255,255,255,.03));
  display:grid;
  place-items:center;
  overflow:hidden;
  font-family:'Orbitron',monospace;
  font-size:20px;
}

/* Compact Sidebar Styles */
.is-compact .account-item{
  grid-template-columns:42px 1fr;
  padding:8px;
  gap:10px;
}
.is-compact .account-item-art{
  height:42px;
  width:42px;
  border-radius:12px;
  font-size:16px;
}
.is-compact .account-item-title{
  font-size:13px;
  margin-bottom:4px;
}
.is-compact .account-item-meta{
  font-size:11px;
}
.is-compact .chat-summary-badge{
  padding:2px 6px;
  font-size:9px;
}
.is-compact .account-item-menu-button{
  width:24px;
  height:24px;
  font-size:8px;
}
.is-compact .account-item-pin-badge{
  width:24px;
  height:24px;
  font-size:10px;
  right:36px;
}
.is-compact .account-item::before{
  left:8px;
  right:8px;
}

.account-item-art img{width:100%;height:100%;object-fit:cover;display:block}
.account-item-art--ea .library-platform-icon{
  width:24px;
  height:24px;
}
.account-item-meta{font-size:13px;margin-top:7px}
.selection-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
  transition: all 0.2s;
  cursor: pointer;
}
.selection-item:hover {
  background: rgba(255,255,255,0.05);
  border-color: var(--line-strong);
}
.selection-item.is-selected {
  background: rgba(139,92,246,0.1);
  border-color: var(--purple);
}
.selection-item-art {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--panel-soft);
  display: grid;
  place-items: center;
  overflow: hidden;
  font-family: 'Orbitron', monospace;
  font-size: 14px;
  flex-shrink: 0;
}
.selection-item-art img { width: 100%; height: 100%; object-fit: cover; }
.selection-item-title {
  font-family: 'Orbitron', monospace;
  font-size: 13px;
  color: var(--text-strong);
  flex: 1;
}
.chat-summary-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}

.chat-summary-badge{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  font-family:'Orbitron',monospace;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.chat-summary-badge.unread{
  border-color:rgba(34,211,238,.4);
  background:rgba(34,211,238,.16);
  color:#b8f7ff;
  box-shadow:0 0 14px rgba(34,211,238,.12);
}

.chat-summary-badge.pin{
  border-color:var(--line-strong);
  background:rgba(255,255,255,.04);
  color:var(--cyan);
}

.chat-summary-badge.read{
  color:var(--text-muted);
  background:rgba(255,255,255,.03);
}

.chat-summary-preview{
  margin-top:9px;
}

.chat-summary-preview.is-unread{
  color:var(--text-strong);
  font-weight:600;
}

.account-item-link{
  display:grid;
  color:inherit;
  text-decoration:none;
  transition:transform .2s,border-color .2s,background .2s;
}

.account-item-shell .account-item-link{
  padding-right:68px;
}

.account-item-link:hover,
.account-item-link.is-active{
  transform:translateY(-2px);
  border-color:var(--line-strong);
  background:
    radial-gradient(circle at top right,rgba(139,92,246,.18),transparent 40%),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));
}

.account-item-pin-badge,
.account-item-menu-button{
  position:absolute;
  top:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(12,18,32,.82);
  color:var(--text-strong);
  cursor:pointer;
  transition:transform .18s,border-color .18s,background .18s;
}

.account-item-pin-badge{
  right:52px;
  font-size:0;
  line-height:0;
  color:var(--cyan);
  border-color:var(--line-strong);
  background:linear-gradient(180deg,var(--panel-soft),rgba(255,255,255,.03));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}

.account-item-pin-badge::before{
  content:'';
  width:17px;
  height:17px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4h6l-1.35 4.35 3.35 3.15v1.25H7v-1.25l3.35-3.15L9 4Zm2.2 8.75V20h1.6v-7.25h-1.6ZM10 20h4v1h-4z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4h6l-1.35 4.35 3.35 3.15v1.25H7v-1.25l3.35-3.15L9 4Zm2.2 8.75V20h1.6v-7.25h-1.6ZM10 20h4v1h-4z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
}

.account-item-menu-shell{
  position:absolute;
  top:12px;
  right:12px;
}

.account-item-menu-button{
  position:relative;
  top:auto;
  right:auto;
  font-family:'Orbitron',monospace;
  font-size:18px;
  font-weight:700;
  letter-spacing:.08em;
}

.account-item-pin-badge:hover,
.account-item-menu-button:hover{
  transform:translateY(-1px);
  border-color:var(--line-strong);
  background:rgba(20,28,48,.94);
}

/* Light mode overrides for account item buttons */
html.light .account-item-menu-button,
html.light .account-item-pin-badge {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--text-strong);
}
html.light .account-item-menu-button:hover,
html.light .account-item-pin-badge:hover {
  background: rgba(0, 0, 0, 0.12);
  border-color: var(--line-strong);
}
html.light .account-item-pin-badge {
  color: var(--cyan);
  background: rgba(8, 145, 178, 0.08);
}

/* Light mode legibility enhancements */
html.light .chat-summary-badge.unread {
  color: #047481;
  background: rgba(34, 211, 238, 0.12);
  border-color: rgba(34, 211, 238, 0.3);
}
html.light .chat-summary-badge.pin {
  color: var(--purple);
  background: rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.2);
}
html.light .chat-summary-badge.read {
  color: var(--text);
  background: rgba(0, 0, 0, 0.04);
}
html.light .chat-bubble-meta,
html.light .account-item-meta,
html.light .chat-summary-preview {
  color: var(--text) !important;
  opacity: 0.85;
}

.account-item-menu{
  position:absolute;
  top:42px;
  right:0;
  min-width:190px;
  max-height:200px;
  overflow-y:auto;
  padding:8px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(12,18,32,.96);
  box-shadow:0 16px 32px rgba(0,0,0,.28);
  display:none;
  gap:6px;
  z-index:100;
}

.account-item-menu::-webkit-scrollbar { width: 5px; }
.account-item-menu::-webkit-scrollbar-track { background: transparent; }
.account-item-menu::-webkit-scrollbar-thumb { background: var(--accent-border, rgba(139, 92, 246, 0.3)); border-radius: 3px; }
.account-item-menu::-webkit-scrollbar-thumb:hover { background: var(--scrollbar, rgba(139, 92, 246, 0.5)); }

.account-item-menu.is-open{
  display:grid;
}

.account-item-menu-action{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid transparent;
  background:rgba(255,255,255,.03);
  color:var(--text);
  text-align:left;
  cursor:pointer;
  transition:border-color .18s,background .18s,color .18s;
}

.account-item-menu-action:hover{
  border-color:var(--line-strong);
  color:var(--text-strong);
  background:rgba(255,255,255,.06);
}

.account-item-menu-action:disabled{
  opacity:.6;
  cursor:not-allowed;
}

.account-item-menu-action.danger{
  color:#ffd3dd;
}

.account-item-menu-action.danger:hover{
  border-color:rgba(248,113,113,.35);
  background:rgba(248,113,113,.12);
}

.privacy-panel{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--line);
  display:grid;
  gap:14px;
}

.privacy-grid{
  display:grid;
  gap:12px;
}

.privacy-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  padding:14px;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,255,255,.03);
}

.privacy-toggle{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px;
}

.account-item-muted{
  opacity:.82;
}

.chat-window{
  display:flex !important;
  flex-direction:column !important;
  height: 65vh !important;
  min-height: 500px !important;
  max-height: 900px !important;
  gap: 0 !important;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(0,0,0,0.1);
  overflow: hidden;
}

.chat-window-head {
  flex-shrink: 0;
  padding: 14px 20px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--line);
}

.chat-message-list {
  flex: 1;
  overflow-y: auto !important;
  padding: 20px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}


.chat-compose {
  flex-shrink: 0;
  padding: 16px 20px;
  background: rgba(255,255,255,0.02);
  border-top: 1px solid var(--line);
}



.chat-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:14px;
}

.chat-page-label{
  min-width:88px;
  text-align:center;
  font-size:12px;
  color:var(--text-muted);
}

.chat-window-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
  height:44px;
  flex-shrink:0;
}

.chat-window-head strong{
  font-family:'Orbitron',monospace;
  font-size:14px;
  color:var(--text-strong);
}

.chat-window-head span{
  font-size:12px;
  color:var(--text-muted);
}

.chat-bubble{
  max-width:88%;
  padding:12px 14px;
  border-radius:18px 18px 18px 8px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--text);
  line-height:1.6;
}

.chat-bubble.self{
  margin-left:auto;
  border-radius:18px 18px 8px 18px;
  background:rgba(139,92,246,.1);
  border-color:rgba(139,92,246,.2);
  color:var(--text-strong);
}

/* Inside a flex row that already row-reverses to handle alignment,
   the auto margin would push the bubble away from its own avatar.
   Reset it so the avatar (which now carries visible frame + companion
   overlays) sits flush against the bubble. */
.chat-bubble-row.self > .chat-bubble.self{
  margin-left:0;
}

.chat-bubble-meta{
  margin-top:8px;
  font-size:11px;
  color:var(--text-muted);
}
.chat-bubble-quest .chat-bubble-meta{
  padding: 0 16px 16px;
  margin-top: 0;
}


.chat-bubble-request,
.chat-bubble-system{
  background:rgba(255,255,255,.04);
}

.chat-request-card{
  display:grid;
  gap:10px;
}

.chat-request-card strong{
  font-family:'Orbitron',monospace;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-strong);
}

.chat-request-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}

.chat-bubble-quest .chat-request-actions{
  padding: 0 14px 14px;
  margin-top: -4px;
}

.chat-request-accept{
  background:#1f9d55;
}

.chat-request-decline{
  border-color:rgba(248,113,113,.35);
}

.chat-bubble-quest{
  background:rgba(15, 18, 45, 0.95);
  border-color:rgba(139,92,246,.3);
  padding:0 !important;
  overflow:hidden;
  max-width:340px;
  display: flex;
  flex-direction: column;
  border-radius:18px 18px 18px 8px;
}

.chat-bubble-quest.self{
  border-radius:18px 18px 8px 18px;
}

.chat-quest-card{
  padding:0;
  display: flex;
  flex-direction: column;
}

.chat-quest-head{
  display:grid;
  grid-template-columns: auto 1fr;
  gap:14px;
  padding: 16px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid var(--line);
  align-items: center;
}

.chat-quest-info {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
}


.chat-quest-art-wrap{
  position:relative;
  width:84px;
  height:44px;
  border-radius:8px;
  overflow:hidden;
  border:1px solid var(--line);
  flex-shrink:0;
}

.chat-quest-art-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.chat-quest-sale-badge{
  position:absolute;
  top:2px;
  right:2px;
  background:var(--rose);
  color:#fff;
  font-size:7px;
  font-weight:900;
  padding:1px 3px;
  border-radius:3px;
}

.chat-quest-price{
  font-family:'Orbitron',monospace;
  font-size:10px;
  color:var(--teal);
  background:rgba(52,211,153,.15);
  padding:2px 6px;
  border-radius:6px;
  white-space: nowrap;
}

.chat-quest-text{
  padding:14px;
  font-size:13px;
  line-height:1.5;
  color:var(--text);
  margin:0;
}

.chat-quest-status {
  padding: 0 14px 14px;
  font-size:10px;
  font-family:'Orbitron',monospace;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.05em;
}

.chat-quest-status.success {
  color:var(--teal);
}
}

.chat-message-list{
  display:grid;
  gap:12px;
  flex-grow:1;
  overflow-y:auto;
  padding-right:8px;
  align-content:start;
  min-height:0;
}

.chat-compose{
  display:grid;
  gap:10px;
  flex-shrink:0;
}

.chat-compose-input{
  min-height:100px;
}

.chat-compose-actions{
  display:flex;
  justify-content:flex-end;
}

.chat-inline-note{
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.03);
  color:var(--text);
  font-size:13px;
  line-height:1.6;
}

.chat-inline-note.error{
  border-color:rgba(248,113,113,.35);
  background:rgba(248,113,113,.08);
}

.empty-state{
  padding:22px;
  border-radius:22px;
  border:1px dashed var(--line);
  background:rgba(255,255,255,.02);
  color:var(--text);
  line-height:1.8;
}

.auth-surface,.mission-surface,.wallet-surface,.command-surface,.side-surface{
  background:
    radial-gradient(circle at top right,rgba(139,92,246,.14),transparent 42%),
    linear-gradient(180deg,var(--panel-strong),var(--panel-soft));
}

.auth-tabs .btn-secondary{
  flex:1 1 0;
  min-width:0;
}

.auth-surface-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media(min-width:768px) {
  .hero-overview.full-width .auth-surface-layout {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 36px;
  }
  .hero-overview.full-width .hero-side-panel.auth-surface {
    padding: 32px;
  }
}

.store-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.store-card{
  display:grid;
  gap:14px;
  transition:transform .2s,border-color .2s;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at top right,rgba(139,92,246,.16),transparent 44%),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
}

.store-card::before{
  content:'';
  position:absolute;
  left:14px;
  right:14px;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(139,92,246,.38),rgba(34,211,238,.22),transparent);
}

.store-art{
  min-height:128px;
  border-radius:18px;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at top left,rgba(139,92,246,.22),transparent 40%),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  display:grid;
  place-items:center;
  font-family:'Orbitron',monospace;
  font-size:28px;
}

.store-card:nth-child(3n+2) .store-art{
  background:
    radial-gradient(circle at top left,rgba(34,211,238,.22),transparent 40%),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
}

.store-card:nth-child(3n) .store-art{
  background:
    radial-gradient(circle at top left,rgba(251,146,60,.22),transparent 40%),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
}

.store-title{font-size:16px}
.store-copy{color:var(--text);font-size:14px;line-height:1.8}
.store-badge.owned{color:var(--teal);border-color:rgba(77,230,192,.22);background:rgba(77,230,192,.08)}
.store-badge.legendary{color:#ffd6a0;border-color:rgba(255,180,84,.22);background:rgba(255,180,84,.08)}

.simple-shell{
  padding:26px;
  background:
    radial-gradient(circle at top left,rgba(139,92,246,.18),transparent 34%),
    radial-gradient(circle at bottom right,rgba(34,211,238,.1),transparent 28%),
    linear-gradient(180deg,var(--panel-strong),var(--panel-soft));
}

body[data-page="explore"] .surface-panel.simple-shell,
body[data-page="library"] .surface-panel.simple-shell,
body[data-page="quests"] .surface-panel.simple-shell,
body[data-page="chats"] .surface-panel.simple-shell,
body[data-page="support"] .surface-panel.simple-shell,
body[data-page="cosmetics"] .surface-panel.simple-shell{
  background:linear-gradient(180deg,rgba(12,15,39,.96),rgba(17,22,56,.9));
}

html.light body[data-page="explore"] .surface-panel.simple-shell,
html.light body[data-page="library"] .surface-panel.simple-shell,
html.light body[data-page="quests"] .surface-panel.simple-shell,
html.light body[data-page="chats"] .surface-panel.simple-shell,
html.light body[data-page="support"] .surface-panel.simple-shell,
html.light body[data-page="cosmetics"] .surface-panel.simple-shell{
  background:linear-gradient(180deg,rgba(251,249,255,.96),rgba(242,238,249,.94));
}

body[data-page="explore"] .explore-status-pill,
body[data-page="explore"] .explore-tag-panel,
body[data-page="explore"] .explore-tag-category,
body[data-page="explore"] .explore-tag-chip,
body[data-page="library"] .explore-status-pill,
body[data-page="library"] .explore-tag-panel,
body[data-page="library"] .explore-tag-category,
body[data-page="library"] .explore-tag-chip{
  background:rgba(12,15,39,.72);
}

html.light body[data-page="explore"] .explore-status-pill,
html.light body[data-page="explore"] .explore-tag-panel,
html.light body[data-page="explore"] .explore-tag-category,
html.light body[data-page="explore"] .explore-tag-chip,
html.light body[data-page="library"] .explore-status-pill,
html.light body[data-page="library"] .explore-tag-panel,
html.light body[data-page="library"] .explore-tag-category,
html.light body[data-page="library"] .explore-tag-chip{
  background:rgba(251,249,255,.9);
}

.simple-shell-top{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,.95fr);
  gap:18px;
  align-items:start;
}

.simple-hero-copy{
  min-width:0;
}

.simple-shell-side{
  display:grid;
  gap:14px;
}

.simple-stat-grid{
  display:grid;
  gap:12px;
}

.simple-stat-grid-4{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.simple-stat-grid-3{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.simple-stat-card{
  padding:14px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.03);
  display:grid;
  gap:8px;
  min-height:92px;
}

.simple-stat-label{
  font-family:'Orbitron',monospace;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-muted);
}

.simple-stat-value{
  font-family:'Orbitron',monospace;
  font-size:26px;
  line-height:1;
  color:var(--text-strong);
}

.simple-shell-body{
  margin-top:22px;
  padding-top:22px;
  border-top:1px solid var(--line);
}

.simple-section-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

.chats-section-grid{
  grid-template-columns:minmax(280px,1.05fr) minmax(0,1.95fr);
  align-items:stretch;
  gap:20px;
}

#chat-friends-search{
  flex-shrink:0;
}

#chat-thread-list.chats-scroll-panel{
  flex-grow:1;
  overflow-y:auto;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-right:6px;
  min-height:0;
  /* Pack items at the top instead of letting the grid distribute them
     across the entire scroll-panel height. Without this, when the list
     has only a couple of items they get pushed apart by the implicit
     row sizing inside the flex-grown container. */
  align-content:start;
  grid-auto-rows:min-content;
}

/* Custom Scrollbar for Chat */
.chats-scroll-panel::-webkit-scrollbar,
.chat-message-list::-webkit-scrollbar{
  width:4px;
}
.chats-scroll-panel::-webkit-scrollbar-track,
.chat-message-list::-webkit-scrollbar-track{
  background:transparent;
}
.chats-scroll-panel::-webkit-scrollbar-thumb,
.chat-message-list::-webkit-scrollbar-thumb{
  background:var(--accent-border, rgba(139,92,246,.2));
  border-radius:10px;
}
.chats-scroll-panel::-webkit-scrollbar-thumb:hover,
.chat-message-list::-webkit-scrollbar-thumb:hover{
  background:var(--scrollbar, rgba(139,92,246,.4));
}

.simple-section{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-bottom:32px;
}
.chats-section-grid .simple-section{
  height:680px;
  background:rgba(255,255,255,.015);
  border:1px solid var(--line);
  border-radius:24px;
  padding:20px;
}

.simple-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:42px;
  margin-bottom:4px;
}

.profile-library-list{
  max-height:470px;
  overflow-y:auto;
  padding-right:12px;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar) transparent;
}

.portal-scroll-list {
  height: 720px;
  overflow-y: auto;
  overflow-x: hidden;
  background: rgba(0,0,0,0.15);
  border-radius: 16px;
  border: 1px solid var(--line);
  padding: 4px;
}

.portal-scroll-list::-webkit-scrollbar {
  width: 6px;
}
.portal-scroll-list::-webkit-scrollbar-track {
  background: transparent;
}
.portal-scroll-list::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 10px;
}
.portal-scroll-list::-webkit-scrollbar-thumb:hover {
  background: var(--purple);
}

.profile-library-list::-webkit-scrollbar {
  width: 6px;
}

.profile-library-list::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: 10px;
}

.profile-library-list .account-item {
  flex-shrink: 0;
  min-height: 102px;
}

.simple-section-title{
  margin:0;
  font-family:'Orbitron',monospace;
  font-size:18px;
  letter-spacing:-.02em;
  color:var(--text-strong);
}

.simple-actions{
  justify-content:flex-start;
}

.friend-profile-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}

.friend-profile-ident{
  display:flex;
  align-items:flex-start;
  gap:16px;
}

.friend-profile-avatar{
  width:86px;
  height:86px;
  border-radius:24px;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at top left,rgba(139,92,246,.22),transparent 42%),
    linear-gradient(180deg,rgba(34,211,238,.12),rgba(255,255,255,.03));
  display:grid;
  place-items:center;
  overflow:hidden;
  font-family:'Orbitron',monospace;
  font-size:26px;
  color:var(--text-strong);
}

.friend-profile-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.loadout-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;
}

.loadout-card{
  position:relative;
  overflow:hidden;
  padding:16px;
  border:1px solid var(--line);
  border-radius:22px;
  background:
    radial-gradient(circle at top right,rgba(34,211,238,.14),transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));
}

.loadout-card::before{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:linear-gradient(180deg,var(--cyan),var(--purple));
}

.loadout-slot{
  font-family:'Orbitron',monospace;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-muted);
}

.loadout-name{
  margin-top:12px;
  font-family:'Orbitron',monospace;
  font-size:16px;
  color:var(--text-strong);
}

.loadout-copy{
  margin-top:8px;
  color:var(--text);
  font-size:13px;
  line-height:1.7;
}

.cosmetics-page{
  gap:0;
}

.cosmetics-shell{
  padding:26px;
  background:
    radial-gradient(circle at top left,rgba(139,92,246,.18),transparent 34%),
    radial-gradient(circle at bottom right,rgba(34,211,238,.1),transparent 28%),
    linear-gradient(180deg,var(--panel-strong),var(--panel-soft));
}

.cosmetics-shell-top{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);
  gap:18px;
  align-items:start;
}

.cosmetics-shell-body{
  margin-top:10px;
  padding-top:0;
  border-top:none;
}

.cosmetics-title{
  margin-top:12px;
}

.cosmetics-summary-copy{
  max-width:680px;
}

.cosmetics-feedback{
  margin-top:16px;
  min-height:0;
}

.cosmetics-feedback:empty{
  display:none;
}

.cosmetics-coins-inline{
  justify-self:end;
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border-radius:18px;
  border:1px solid rgba(139,92,246,.2);
  background:rgba(255,255,255,.04);
}

.cosmetics-coins-inline strong{
  font-family:'Orbitron',monospace;
  font-size:28px;
  line-height:1;
  color:var(--text-strong);
}

.cosmetics-coin-badge{
  display:inline-grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:14px;
  border:1px solid rgba(139,92,246,.22);
  background:rgba(139,92,246,.12);
  color:#f8e29e;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}

.cosmetics-coin-badge svg,
.cosmetics-lane-icon svg{
  width:24px;
  height:24px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.cosmetics-page-head{
  margin-bottom:14px;
}

.cosmetics-store-grid .store-card{
  min-height:100%;
}

.cosmetics-filter-bar{
  display:grid;
  gap:16px;
  padding:8px 0 18px;
  margin-bottom:4px;
  border-top:none;
  border-bottom:1px solid var(--line);
}

.cosmetics-filter-group{
  display:grid;
  gap:10px;
}

.cosmetics-filter-label{
  font-family:'Orbitron',monospace;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-muted);
}

.quest-list{display:grid;gap:14px}
.quest-entry{
  display:grid;
  gap:14px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at top right,rgba(139,92,246,.15),transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));
}

.quest-entry::before{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:linear-gradient(180deg,var(--purple),var(--cyan));
}

.quest-title{font-size:16px}
.quest-copy{
  padding-left:18px;
  border-left:2px solid var(--purple);
  color:var(--text-strong);
  line-height:1.8;
}

.quest-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.quest-meta-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  font-family:'Orbitron',monospace;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text);
}

.quest-meta-chip::before{
  content:'';
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--cyan);
}

.quest-objective-box {
  margin-top: 10px;
  padding: 16px;
  border-radius: 20px;
  background: rgba(139, 92, 246, 0.04);
  border: 1px solid rgba(139, 92, 246, 0.12);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

.quest-objective-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.2), transparent);
}

.quest-objective-text {
  font-size: 13px;
  color: var(--text-strong);
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}

.objective-label {
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  background: rgba(8, 145, 178, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

.quest-progress-outer {
  height: 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.quest-progress-inner {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.4);
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.quest-entry.is-ready {
  border-color: rgba(52, 211, 153, 0.4);
  background: 
    radial-gradient(circle at top right, rgba(52, 211, 153, 0.12), transparent 45%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.quest-entry.is-ready::before {
  background: linear-gradient(180deg, var(--teal), var(--cyan));
}

.pill.status-active { color: var(--cyan); border-color: rgba(34, 211, 238, 0.25); background: rgba(34, 211, 238, 0.12); }
.pill.status-completed { color: var(--teal); border-color: rgba(52, 211, 153, 0.25); background: rgba(52, 211, 153, 0.12); }
.pill.reward { color: #fbbf24; border-color: rgba(251, 191, 36, 0.25); background: rgba(251, 191, 36, 0.12); font-weight: 600; }
.pill.mode { color: var(--purple); border-color: rgba(139, 92, 246, 0.25); background: rgba(139, 92, 246, 0.12); }
.pill.platform, .platform-indicator { 
  color: var(--teal); 
  border-color: rgba(45, 212, 191, 0.25); 
  background: rgba(45, 212, 191, 0.12); 
  text-transform: uppercase; 
  letter-spacing: 0.05em; 
  font-size: 10px; 
  padding: 4px 10px; 
  border-radius: 999px; 
  border: 1px solid currentColor; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  backdrop-filter: blur(10px); 
  -webkit-backdrop-filter: blur(10px); 
}
.platform-indicator.steam { color: var(--blue); border-color: rgba(59, 130, 246, 0.25); background: rgba(59, 130, 246, 0.12); }
.platform-indicator.playstation { color: #4dabff; border-color: rgba(77, 171, 255, 0.25); background: rgba(77, 171, 255, 0.12); }
.platform-indicator.epic { color: #fff; border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.1); }

.platform-select-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--line-strong) !important;
  transform: translateY(-1px);
}
.platform-select-btn.active {
  background: rgba(139, 92, 246, 0.15) !important;
  border-color: var(--purple) !important;
  color: var(--text-strong) !important;
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.2);
}
.platform-icon-tiny {
  width: 12px;
  height: 12px;
  margin-right: 6px;
  opacity: 0.8;
}

.quest-abandon-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.5;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.quest-abandon-btn:hover {
  color: #ef4444;
  opacity: 1;
  background: rgba(239, 68, 68, 0.1);
  transform: rotate(90deg) scale(1.1);
}

.sync-spinner-tiny {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: portal-spin 1.2s linear infinite;
  margin-right: 6px;
}

@keyframes portal-spin {
  to { transform: rotate(360deg); }
}

.quest-tracking-note {
  display: flex;
  align-items: center;
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'Orbitron', monospace;
  letter-spacing: 0.02em;
}

/* ── Explore page ──────────────────────────────────── */

.explore-controls{
  display:grid;
  gap:22px;
  margin-bottom:24px;
}

.explore-search-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.explore-platform-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.platform-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  padding: 9px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-size: 12px;
  line-height: 1.15;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.platform-filter-btn:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.06);
}

.platform-filter-btn.active {
  border-color: var(--cyan);
  background: rgba(34, 211, 238, 0.1);
  color: var(--text-strong);
  box-shadow: 0 0 15px rgba(34, 211, 238, 0.2);
}

.platform-filter-btn .platform-icon {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.platform-filter-btn.active .platform-icon {
  opacity: 1;
  color: var(--cyan);
}

.explore-search-field{
  flex:1 1 420px;
  max-width:none;
}

.explore-status-inline{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px;
}

.explore-status-pill{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:52px;
  padding:10px 14px;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}

.explore-status-label{
  font-family:'Orbitron',monospace;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-muted);
}

.explore-status-value{
  font-family:'Orbitron',monospace;
  font-size:22px;
  line-height:1;
  color:var(--text-strong);
}

.explore-tag-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.explore-tag-header-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.explore-tag-categories{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.explore-tag-category{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--text);
  font-size:12px;
  cursor:pointer;
  transition:transform .15s,border-color .15s,background .15s,color .15s;
}

.explore-tag-category:hover{
  transform:translateY(-1px);
  border-color:var(--line-strong);
  color:var(--text-strong);
}

.explore-tag-category:focus-visible,
.explore-tag-chip:focus-visible{
  outline:none;
  box-shadow:none;
}

.explore-tag-category.open{
  border-color:var(--line);
  background:rgba(255,255,255,.03);
  color:var(--text);
}

.explore-tag-panel{
  margin-top:8px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.03);
  display:grid;
  gap:8px;
}

.explore-tag-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.explore-tag-group-label{
  font-family:'Orbitron',monospace;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-muted);
}

.explore-tag-category-count{
  opacity:.56;
  font-size:11px;
}

.explore-tag-category-selected{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  background:rgba(139,92,246,.16);
  color:var(--text-strong);
  font-size:10px;
}

.explore-tag-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.explore-tag-chip{
  display:inline-flex;
  align-items:center;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--text);
  font-size:12px;
  cursor:pointer;
  transition:transform .15s,border-color .15s,background .15s,color .15s;
}

.explore-tag-chip:hover{
  transform:translateY(-1px);
  border-color:var(--line-strong);
  color:var(--text-strong);
}

.explore-tag-chip.active{
  border-color:rgba(139,92,246,.35);
  background:rgba(255,255,255,.03);
  color:var(--text-strong);
  box-shadow:none;
}

.explore-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:14px;
}

.results-load-more{
  display:flex;
  justify-content:center;
  margin-top:18px;
}

.explore-card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  cursor:pointer;
  transition:transform .2s,border-color .2s;
}

.explore-card:hover{
  transform:translateY(-4px);
  border-color:var(--line-strong);
}

.explore-card::before{
  content:'';
  position:absolute;
  left:12%;
  right:12%;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(139,92,246,.38),rgba(34,211,238,.22),transparent);
}

.explore-card-art {
  height:165px;
  overflow:hidden;
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.03), transparent 70%),
    linear-gradient(135deg, rgba(255,255,255,0.02), rgba(0,0,0,0.2));
  display:grid;
  place-items:center;
  font-family:'Orbitron',monospace;
  font-size:32px;
  color:var(--text-muted);
  position:relative;
}

.explore-card-art img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  z-index: 1;
}

.explore-card-body{
  padding:16px;
  display:grid;
  gap:8px;
}

.explore-card-title{
  font-family:'Orbitron',monospace;
  font-size:14px;
  letter-spacing:-.01em;
  color:var(--text-strong);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}

.explore-card-meta{
  font-size:12px;
  color:var(--text-muted);
}

.explore-card-summary{
  font-size:13px;
  color:var(--text);
  line-height:1.6;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.explore-card-tags{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:4px;
}

.explore-card-tag{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  font-size:10px;
  color:var(--text-muted);
}

.library-card-topline{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  width:100%;
  overflow:hidden;
}

.library-card-platforms,
.library-platform-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  flex-shrink:0;
}

.library-platform-icon-wrap {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text-strong);
  width:28px;
  padding:0;
}

.library-platform-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text-strong);
  min-width:36px;
  width:36px;
  height:36px;
  padding:0;
  cursor:pointer;
  transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration:none;
}

.library-platform-badge:hover {
  background:var(--accent-glow);
  border-color:var(--accent);
  transform:translateY(-2px);
  box-shadow:0 0 15px var(--accent-glow);
  color:white;
}

.library-platform-badge:active {
  transform:translateY(0);
}

.library-platform-icon-wrap{
  width:28px;
  padding:0;
}

.library-platform-icon{
  width:16px;
  height:16px;
  display: block;
}

.library-card-summary,
.library-owned-meta{
  font-size:12px;
  color:var(--text-muted);
}

.library-owned-list{
  display:grid;
  gap:10px;
}

.library-owned-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.03);
}

.library-owned-title{
  font-family:'Orbitron',monospace;
  font-size:13px;
  color:var(--text-strong);
}

/* ── Explore detail modal ──────────────────────────── */

.explore-modal{
  position:fixed;
  inset:0;
  z-index:50;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:24px;
  padding-top:100px;
  overflow-y:auto;
}

.explore-modal[hidden]{
  display:none;
}

.explore-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(5,7,19,.72);
  backdrop-filter:blur(12px);
}

.explore-modal-dialog{
  position:relative;
  z-index:1;
  width:min(100%,680px);
  max-height:calc(100vh - 140px);
  overflow-y:auto;
  padding:26px;
  border-radius:28px;
  background:linear-gradient(180deg,var(--panel-strong),var(--panel-soft));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}

.explore-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
}

.explore-detail-body{
  display:grid;
  gap:16px;
}

.explore-detail-art{
  height:320px;
  border-radius:20px;
  overflow:hidden;
  background:rgba(255,255,255,.03);
  display:flex;
  align-items:center;
  justify-content:center;
}

.explore-detail-art img{
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.explore-detail-summary{
  color:var(--text);
  line-height:1.8;
  font-size:14px;
}

.explore-detail-meta{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:10px;
}

.explore-detail-meta-item{
  padding:12px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}

.explore-detail-meta-label{
  font-family:'Orbitron',monospace;
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:6px;
}

.explore-detail-meta-value{
  font-size:14px;
  color:var(--text-strong);
}

.explore-detail-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.explore-detail-tag{
  display:inline-flex;
  align-items:center;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  font-size:12px;
  color:var(--text);
}

.explore-detail-tag .tag-cat{
  margin-left:6px;
  font-size:10px;
  color:var(--text-muted);
}

/* ── Explore detail – Platform icon buttons (Library-style) ─────── */
.explore-platform-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.explore-platform-icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text-muted);
  text-decoration:none;
  transition:background .15s, color .15s, border-color .15s;
}

.explore-platform-icon-btn:hover{
  background:rgba(255,255,255,.1);
  color:var(--text);
  border-color:rgba(255,255,255,.2);
}

.explore-detail-platform-icon{
  width:18px;
  height:18px;
  fill:currentColor;
}

.explore-detail-editions{
  display:grid;
  gap:8px;
}

.explore-detail-edition{
  padding:10px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  font-size:13px;
  color:var(--text);
}

.btn-small{
  padding:8px 12px;
  font-size:11px;
}


.footer-note{
  display: none;
}

/* Footer upgraded */
.site-footer {
  position: relative;
  z-index: 1;
  margin-top: 64px;
  padding: 80px 24px 48px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(5, 7, 19, 0) 0%, rgba(5, 7, 19, 0.4) 100%);
  backdrop-filter: blur(20px);
}

.footer-shell {
  max-width: 1160px;
  margin: 0 auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(2, 1fr);
  gap: 48px;
  margin-bottom: 64px;
}

.footer-brand-col .footer-logo {
  font-family: 'Orbitron', monospace;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--text-strong);
  margin-bottom: 20px;
  display: block;
  text-decoration: none;
}

.footer-brand-col .footer-logo span {
  color: var(--purple);
}

.footer-brand-col p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 280px;
}

.footer-col-title {
  font-family: 'Orbitron', monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 24px;
}

/* Account Platform Refactor Styles */
.account-platform-details { padding-top: 4px; }
.account-details-row { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1; }
.detail-divider { width: 3px; height: 3px; border-radius: 50%; background: var(--line); opacity: 0.4; }
.status-indicator { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); }
.status-indicator.active { background: var(--teal); box-shadow: 0 0 10px var(--teal); }
.account-stat-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 12px;
  font-family: "Orbitron", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-strong);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.account-stat-tag:hover {
  background: rgba(139, 92, 246, 0.15);
  border-color: var(--purple);
  transform: translateY(-1px);
}

.info-trigger {
  margin-left: 6px;
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  vertical-align: middle;
  color: var(--text-muted);
}
.info-trigger:hover {
  opacity: 1;
  background: var(--purple);
  border-color: var(--purple);
  color: white;
  transform: scale(1.1);
  box-shadow: 0 0 10px var(--purple-glow);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-link {
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s, transform 0.2s;
}

.footer-link:hover {
  color: var(--text-strong);
  transform: translateX(4px);
}


.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-disclaimer {
  font-size: 12px;
  color: var(--text-muted);
  max-width: none;
  line-height: 1;
  text-align: justify;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  .footer-disclaimer {
    white-space: normal;
  }
}

.footer-copy {
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.footer-socials {
  display: flex;
  gap: 16px;
}

.footer-social-link {
  color: var(--text-muted);
  transition: color 0.2s;
}

.footer-social-link:hover {
  color: var(--purple);
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  .footer-brand-col p {
    margin: 0 auto;
  }
  .footer-links {
    align-items: center;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width:980px){
  .hero-grid,.hero-overview,.content-grid{grid-template-columns:1fr}
  .metric-grid{grid-template-columns:1fr}
  .dashboard-inline{grid-template-columns:repeat(2,minmax(0,1fr))}
  .simple-shell-top,.simple-section-grid,.chats-section-grid{grid-template-columns:1fr}
  .cosmetics-shell-top{grid-template-columns:1fr}
  .cosmetics-coins-inline{justify-self:start}
  .explore-status-inline{justify-content:flex-start}
}

@media (max-width:760px){
  .header-shell{padding:14px 16px;align-items:flex-start;flex-direction:column}
  .header-nav,.header-actions{width:100%}
  .header-link,.header-cta,.header-account{flex:1 1 auto}
  .page-shell{padding:128px 16px 36px}
  .hero-panel,.surface-panel,.mini-panel{padding:22px}
  .account-item{grid-template-columns:1fr}
  .account-item-shell .account-item-link{padding-right:12px;padding-top:54px}
  .account-item-pin-badge{right:52px}
  .privacy-row{grid-template-columns:1fr}
  .privacy-toggle{justify-content:flex-start}
  .dashboard-inline{grid-template-columns:1fr}
  .simple-shell{padding:22px}
  .simple-stat-grid-3,.simple-stat-grid-4{grid-template-columns:1fr}
  .cosmetics-shell{padding:22px}
  .library-owned-item{align-items:flex-start;flex-direction:column}
}

@media (max-width: 760px){
  .site-header{
    position:sticky;
  }

  .header-shell{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    min-height:0;
    gap:10px;
    padding:12px 14px;
  }

  .header-brand{
    grid-column:1;
    grid-row:1;
    min-width:0;
    font-size:15px;
  }

  .header-nav{
    grid-column:1 / -1;
    grid-row:2;
    width:calc(100% + 28px);
    display:flex;
    flex-wrap:nowrap;
    gap:8px;
    overflow-x:auto;
    padding:0 14px 4px;
    margin:0 -14px;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }

  .header-nav::-webkit-scrollbar{
    display:none;
  }

  .header-link{
    flex:0 0 auto;
    min-height:34px;
    padding:8px 11px;
    border:1px solid var(--line);
    border-radius:999px;
    background:rgba(255,255,255,.03);
    font-size:11px;
    white-space:nowrap;
  }

  .header-link.active{
    border-color:var(--line-strong);
    background:rgba(139,92,246,.12);
  }

  .header-actions{
    grid-column:2;
    grid-row:1;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    width:auto;
    min-width:0;
  }

  .header-account{
    min-width:0;
    width:auto;
    max-width:min(38vw,150px);
    min-height:40px;
    padding:8px 12px;
    border-radius:999px;
  }

  .header-account strong,
  .header-account small{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .header-account small{
    display:none;
  }

  .header-avatar-badge{
    margin-right:6px;
  }

  .pf-theme-toggle{
    width:40px;
    height:40px;
    flex:0 0 auto;
  }

  .page-shell{
    padding:18px 14px 34px;
  }

  .hero-panel,
  .surface-panel,
  .mini-panel,
  .simple-shell,
  .cosmetics-shell{
    border-radius:22px;
    padding:18px;
  }

  .hero-title,
  .section-title{
    letter-spacing:0;
    overflow-wrap:anywhere;
  }

  .hero-actions,
  .inline-actions,
  .stack-actions,
  .simple-actions,
  .store-actions,
  .account-quicklinks,
  .badge-row,
  .chip-row{
    align-items:stretch;
  }

  .btn-primary,
  .btn-secondary,
  .btn-danger,
  .header-cta{
    width:100%;
    min-height:44px;
    padding-inline:12px;
  }

  .explore-search-row,
  .explore-status-inline,
  .explore-tag-header,
  .simple-section-head,
  .panel-title-row,
  .friend-profile-head,
  .preview-banner-inner,
  .profile-card{
    align-items:stretch;
    flex-direction:column;
  }

  .explore-search-field,
  .explore-status-pill,
  .platform-filter-btn{
    width:100%;
  }

  .explore-search-field{
    flex:0 1 auto;
  }

  .explore-status-pill{
    justify-content:space-between;
  }

  .explore-platform-filters,
  .explore-tag-categories,
  .explore-tag-chips{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .platform-filter-btn,
  .explore-tag-category,
  .explore-tag-chip{
    justify-content:center;
    min-width:0;
    text-align:center;
  }

  .explore-grid,
  .store-grid,
  .loadout-grid{
    grid-template-columns:1fr;
  }

  .explore-card-art{
    height:150px;
  }

  .chats-section-grid .simple-section{
    height:auto;
    min-height:0;
    padding:16px;
  }

  #chat-thread-list,
  #chat-thread-list.chats-scroll-panel,
  .portal-scroll-list,
  .profile-library-list{
    max-height:60vh;
    height:auto;
  }

  .account-item{
    gap:10px;
  }

  .selection-item{
    align-items:flex-start;
    padding:10px;
  }

  .selection-item-title{
    min-width:0;
    overflow-wrap:anywhere;
  }

  .explore-modal{
    padding:12px;
  }

  .explore-modal-dialog{
    width:100%;
    max-height:calc(100dvh - 24px);
    padding:18px;
    border-radius:22px;
  }

  .explore-modal-head,
  .explore-detail-body{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
  }

  .explore-detail-art{
    min-height:220px;
  }

  .footer-grid{
    gap:28px;
  }
}

@media (max-width: 420px){
  .page-shell{
    padding-inline:10px;
  }

  .explore-platform-filters,
  .explore-tag-categories,
  .explore-tag-chips{
    grid-template-columns:1fr;
  }

  .simple-stat-value,
  .dashboard-value,
  .cosmetics-coins-inline strong{
    font-size:22px;
  }
}

/* ── Chat Avatars ── */
.chat-bubble-row{
  display:flex;
  align-items:flex-end;
  gap:8px;
}
.chat-bubble-row.self{
  flex-direction:row-reverse;
}
.chat-avatar{
  width:32px;
  height:32px;
  min-width:32px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:15px;
  color:#fff;
  overflow:hidden;
  background:
    radial-gradient(circle at top left,rgba(139,92,246,.3),transparent 50%),
    linear-gradient(180deg,rgba(34,211,238,.15),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.1);
  flex-shrink:0;
}
.chat-avatar img{
  width:100%;height:100%;object-fit:cover;display:block;
}

/* ── Chat System Messages ── */
.chat-system-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 16px 0;
  text-align: center;
}
.chat-system-text {
  font-size: 11px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 12px;
  border-radius: 99px;
  border: 1px solid var(--line);
  max-width: 80%;
  line-height: 1.4;
}
.chat-system-meta {
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 4px;
  opacity: 0.6;
}

/* ── Emoji Picker ── */
.chat-compose-field{
  position:relative;
}
.chat-emoji-picker{
  position: absolute;
  bottom: calc(100% + 12px);
  left: 16px;
  background: rgba(15, 10, 30, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px;
  max-height: 240px;
  width: 280px;
  overflow-y: auto;
  z-index: 100;
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
  opacity: 0;
  transform: translateY(10px) scale(0.95);
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.chat-emoji-picker.is-open{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.chat-emoji-grid{
  display:flex;
  flex-wrap:wrap;
  gap:2px;
}
.chat-emoji-btn{
  width:36px;
  height:36px;
  border:none;
  background:none;
  font-size:20px;
  cursor:pointer;
  border-radius:8px;
  display:grid;
  place-items:center;
  transition:background .12s;
}
.chat-emoji-btn:hover{
  background:rgba(139,92,246,.18);
}
.chat-emoji-btn-custom img{
  width:28px;
  height:28px;
  border-radius:6px;
  object-fit:cover;
}
.chat-emoji-section-label{
  font-size:11px;
  font-family:'Orbitron',monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-muted);
  padding:6px 2px 2px;
}
.chat-custom-emoji{
  display:inline-block;
  width:22px;
  height:22px;
  vertical-align:middle;
  border-radius:4px;
  margin:0 1px;
}

/* ── Store Card Images ── */
.store-art-img{
  width:100%;
  max-height:128px;
  object-fit:contain;
  border-radius:12px;
}
.store-card-emoji .store-art{
  min-height:96px;
  background:
    radial-gradient(circle at center,rgba(139,92,246,.1),transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
}
.store-card-emoji .store-art-img{
  max-height:72px;
  width:72px;
}

/* ── Profile Card Preview ── */
.profile-card{
  display:flex;
  align-items:center;
  gap:20px;
  padding:20px;
  border-radius:20px;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at top left,rgba(139,92,246,.12),transparent 40%),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
}
.profile-card-avatar-wrap{
  padding:4px;
  border-radius:50%;
  border:2px solid var(--line);
  flex-shrink:0;
}
.profile-card-avatar-wrap.profile-card-frame-neon-grid{
  border-color:rgba(139,92,246,.6);
  box-shadow:0 0 12px rgba(139,92,246,.3);
}
.profile-card-avatar-wrap.profile-card-frame-cyber-sunrise{
  border-color:rgba(34,211,238,.6);
  box-shadow:0 0 14px rgba(34,211,238,.35);
}
.profile-card-avatar-wrap.profile-card-frame-vanta-raid{
  border-color:rgba(30,30,30,.8);
  box-shadow:0 0 16px rgba(0,0,0,.5),inset 0 0 6px rgba(139,92,246,.15);
}
.profile-card-avatar{
  width:64px;
  height:64px;
  border-radius:50%;
  display:grid;
  place-items:center;
  overflow:hidden;
  font-family:'Orbitron',monospace;
  font-size:24px;
  color:#fff;
}
.profile-card-avatar img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.profile-card-info{
  display:grid;
  gap:4px;
}
.profile-card-name{
  font-family:'Orbitron',monospace;
  font-size:16px;
  font-weight:700;
  color:var(--text-strong);
}
.profile-card-title{
  font-size:12px;
  font-family:'Orbitron',monospace;
  letter-spacing:.06em;
  color:rgba(139,92,246,.8);
}
.profile-card-title.empty{
  color:var(--text-muted);
  font-family:'Inter',sans-serif;
  letter-spacing:normal;
}
.profile-card-companion{
  font-size:11px;
  color:var(--text-muted);
  display:flex;
  align-items:center;
  gap:6px;
}
.profile-card-companion-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:50%;
  background:rgba(139,92,246,.12);
  border:1px solid rgba(139,92,246,.2);
  font-size:8px;
  font-family:'Orbitron',monospace;
  color:var(--text);
}
.profile-card-frame-label{
  font-size:10px;
  color:var(--text-muted);
  margin-top:2px;
}
.profile-card-level{
  /* Player level pill sits on the right edge of the profile card,
     pushed there by margin-left:auto. Uses Orbitron for the gamer-stat
     feel and a subtle purple-cyan pill treatment so it reads as identity. */
  margin-left:auto;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  border-radius:99px;
  font-family:'Orbitron',monospace;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-strong);
  background:linear-gradient(135deg,rgba(139,92,246,.22),rgba(56,189,248,.18));
  border:1px solid rgba(139,92,246,.35);
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}

/* ── Locked Theme Dropdown ── */
.theme-option-locked{
  opacity:.45;
  cursor:not-allowed;
  position:relative;
}
.theme-lock-badge{
  margin-left:auto;
  font-size:9px;
  font-family:'Orbitron',monospace;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-muted);
  padding:2px 6px;
  border:1px solid var(--line);
  border-radius:6px;
}

/* ── Avatar Customization ── */
.avatar-preview-row{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 0;
}
.avatar-preview-badge{
  width:56px;
  height:56px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:26px;
  color:#fff;
  border:2px solid rgba(255,255,255,.12);
  box-shadow:0 4px 20px rgba(139,92,246,.25);
  flex-shrink:0;
}
.avatar-preview-img{
  width:56px;
  height:56px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid rgba(255,255,255,.12);
  box-shadow:0 4px 20px rgba(139,92,246,.25);
  flex-shrink:0;
}
.avatar-upload-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.avatar-upload-btn{
  cursor:pointer;
  display:inline-block;
}
.avatar-file-name{
  font-size:13px;
  color:var(--text-muted);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.avatar-upload-error{
  margin-top:8px;
  font-size:13px;
  color:#ef4444;
}
.avatar-preview-label{
  display:grid;
  gap:2px;
}
.avatar-preview-label strong{
  font-family:'Orbitron',monospace;
  font-size:14px;
  color:var(--text-strong);
}
.avatar-preview-label span{
  font-size:12px;
  color:var(--text-muted);
}
.avatar-picker-section{
  margin-top:14px;
}
.avatar-picker-section .simple-stat-label{
  margin-bottom:8px;
}
.avatar-color-grid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.avatar-color-swatch{
  width:32px;
  height:32px;
  border-radius:50%;
  border:2px solid transparent;
  cursor:pointer;
  transition:border-color .15s, transform .15s;
}
.avatar-color-swatch:hover{
  transform:scale(1.15);
}
.avatar-color-swatch.active{
  border-color:#fff;
  box-shadow:0 0 0 2px rgba(139,92,246,.5);
}
.avatar-icon-grid{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.avatar-icon-swatch{
  width:38px;
  height:38px;
  border:1px solid transparent;
  background:rgba(255,255,255,.04);
  border-radius:10px;
  font-size:20px;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:background .15s, border-color .15s;
}
.avatar-icon-swatch:hover{
  background:rgba(139,92,246,.15);
}
.avatar-icon-swatch.active{
  border-color:rgba(139,92,246,.6);
  background:rgba(139,92,246,.12);
  box-shadow:0 0 8px rgba(139,92,246,.2);
}

/* ── Header Avatar Badge ── */
.header-avatar-badge{
  width:28px;
  height:28px;
  min-width:28px;
  max-width:28px;
  min-height:28px;
  max-height:28px;
  border-radius:50%;
  display:inline-grid;
  place-items:center;
  font-size:14px;
  color:#fff;
  vertical-align:middle;
  margin-right:8px;
  border:1px solid rgba(255,255,255,.15);
  flex-shrink:0;
  overflow:hidden;
}
.header-avatar-badge img{
  width:28px;height:28px;max-width:28px;max-height:28px;object-fit:cover;display:block;
}

/* -- HLTB Progress Bar -- */
.hltb-progress-container {
  margin-top: 24px;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid var(--line-strong);
  background: rgba(139, 92, 246, 0.05);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
.hltb-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.hltb-progress-title {
  font-family: 'Orbitron', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--purple);
  text-transform: uppercase;
}
.hltb-progress-value {
  font-family: 'Orbitron', monospace;
  font-size: 14px;
  color: var(--text-strong);
}
.hltb-progress-bar-bg {
  height: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 12px;
}
.hltb-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--purple), var(--cyan));
  box-shadow: 0 0 15px var(--purple);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.hltb-progress-status {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}
.quest-tracking-note {
  font-size: 11px;
  color: var(--teal);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: 'Orbitron', monospace;
  opacity: 0.8;
  display: flex;
  align-items: center;
  gap: 8px;
}

.quest-tracking-note::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 8px var(--teal);
  animation: pulse 2s infinite;
}

.sync-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255,255,255,.1);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-right: 8px;
  vertical-align: middle;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0% { opacity: 0.4; }
  50% { opacity: 1; }
  100% { opacity: 0.4; }
}


/* -- Toast & Custom Popups -- */
#toast-container {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast-msg {
  background: var(--card-bg);
  color: var(--text-strong);
  padding: 12px 24px;
  border-radius: 14px;
  font-size: 13px;
  backdrop-filter: blur(20px);
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
  border: 1px solid var(--line-strong);
  animation: toast-in 0.4s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  pointer-events: auto;
  text-align: center;
  min-width: 240px;
}

.toast-msg.fade-out {
  animation: toast-out 0.3s ease-in forwards;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(10px) scale(0.95); }
}

.confirm-modal-content {
  padding: 8px 4px;
}

.confirm-modal-content p {
  font-size: 15px;
  color: var(--text);
  margin-bottom: 24px;
}

.xp-info-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.05);
  color: var(--text-muted);
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  font-weight: bold;
  cursor: help;
  margin-left: 6px;
  vertical-align: middle;
  position: relative;
  transition: all 0.2s;
}

.xp-info-trigger:hover {
  background: var(--purple);
  color: white;
  border-color: var(--purple);
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.4);
}

.xp-info-trigger::after {
  content: attr(data-tooltip);
  position: fixed;
  top: var(--xp-tooltip-top, 0);
  left: var(--xp-tooltip-left, 0);
  /* Tooltip anchors its bottom-right corner near (left, top), then we
     shift left by its own width and up by its own height, plus a small
     gap and slide-in offset that animates on hover. */
  transform: translate(-100%, -100%) translateY(-10px);
  padding: 12px 16px;
  background: var(--panel-strong);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  color: var(--text-strong);
  font-size: 12px;
  line-height: 1.6;
  white-space: pre;
  width: max-content;
  min-width: 180px;
  max-width: min(320px, calc(100vw - 24px));
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s cubic-bezier(0.23, 1, 0.32, 1), transform 0.25s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.25s;
  z-index: 9999;
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
  text-align: left;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0;
  pointer-events: none;
}

.xp-info-trigger:hover::after,
.xp-info-trigger:focus::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-100%, -100%) translateY(-4px);
}

/* Preview-mode banner shown at the top of friend-profile.html when the user
   is viewing their own profile through the "Preview profile" button. */
.preview-banner {
  margin: 0 0 4px;
  padding: 14px 18px;
  border-radius: 18px;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(135deg, rgba(139,92,246,.18), rgba(56,189,248,.10));
  position: relative;
  overflow: hidden;
}

.preview-banner::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--purple), var(--cyan));
}

.preview-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-left: 8px;
}

.preview-banner-inner strong {
  display: block;
  font-family: 'Orbitron', monospace;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-strong);
  margin-bottom: 4px;
}

.preview-banner-inner p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

@media (max-width: 1320px){
  .site-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index: 40;
  }

  .site-header .header-shell{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:10px!important;
    min-height:0!important;
    padding:12px 16px!important;
  }

  .site-header .header-brand{
    grid-column:1!important;
    grid-row:1!important;
    min-width:0;
  }

  .site-header .header-actions{
    grid-column:2!important;
    grid-row:1!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:8px!important;
    width:auto!important;
    min-width:0!important;
  }

  .site-header .header-nav{
    grid-column:1 / -1!important;
    grid-row:2!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
    width:calc(100% + 32px)!important;
    margin:0 -16px!important;
    padding:0 16px 4px!important;
    overflow-x:auto!important;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }

  .site-header .header-nav::-webkit-scrollbar{
    display:none;
  }

  .site-header .header-link{
    flex:0 0 auto!important;
    min-height:34px;
    padding:8px 12px;
    border:1px solid var(--line);
    border-radius:999px;
    background:rgba(255,255,255,.03);
    font-size:12px;
    white-space:nowrap;
  }

  .site-header .header-link.active{
    border-color:var(--line-strong);
    background:rgba(139,92,246,.12);
  }

  .site-header .header-account{
    flex:0 1 auto!important;
    order:1;
    width:auto!important;
    max-width:min(36vw,220px);
    min-height:40px;
    padding:8px 13px;
    border-radius:999px;
  }

  .site-header .header-account small{
    display:none;
  }

  .site-header .pf-theme-toggle{
    flex:0 0 40px!important;
    width:40px!important;
    height:40px!important;
  }

  .page-shell{
    padding-top:80px;
  }

  .app-shell{
    padding-top:80px;
  }
}

@media (max-width: 760px){
  .site-header .header-shell{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:10px!important;
    min-height:0!important;
    padding:12px 14px!important;
  }

  .site-header .header-brand{
    grid-column:1!important;
    grid-row:1!important;
    min-width:0;
    font-size:15px;
  }

  .site-header .header-actions{
    grid-column:2!important;
    grid-row:1!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:8px!important;
    width:auto!important;
    min-width:0!important;
  }

  .site-header .header-nav{
    grid-column:1 / -1!important;
    grid-row:2!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
    width:calc(100% + 28px)!important;
    margin:0 -14px!important;
    padding:0 14px 4px!important;
    overflow-x:auto!important;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }

  .site-header .header-nav::-webkit-scrollbar{
    display:none;
  }

  .site-header .header-link{
    flex:0 0 auto!important;
    min-height:34px;
    padding:8px 11px;
    font-size:11px;
    white-space:nowrap;
  }

  .site-header .header-account{
    flex:0 1 auto!important;
    width:auto!important;
    max-width:min(38vw,150px);
    min-height:40px;
    padding:8px 12px;
    border-radius:999px;
  }

  .site-header .header-account small{
    display:none;
  }

  .site-header .pf-theme-toggle{
    flex:0 0 40px!important;
    width:40px!important;
    height:40px!important;
  }
}

@media (max-width: 1320px){
  .site-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index: 40;
  }

  .site-header .header-shell{
    position:relative;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:12px!important;
    min-height:64px!important;
    padding:10px 16px!important;
  }

  .site-header .header-brand{
    grid-column:1!important;
    grid-row:1!important;
    min-width:0;
  }

  .site-header .header-actions{
    grid-column:2!important;
    grid-row:1!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:8px!important;
    width:auto!important;
  }

  .site-header .header-nav{
    position:absolute!important;
    top:calc(100% + 8px);
    right:16px;
    z-index:60;
    width:min(320px, calc(100vw - 32px))!important;
    margin:0!important;
    padding:10px!important;
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:8px!important;
    border:1px solid var(--line);
    border-radius:20px;
    background:linear-gradient(180deg,var(--bg-soft),var(--bg));
    box-shadow:0 20px 60px rgba(0,0,0,.38);
    backdrop-filter:blur(20px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px) scale(.98);
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
  }

  .site-header.nav-open .header-nav{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0) scale(1);
  }

  .site-header .header-link{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:10px 12px;
    border:1px solid var(--line);
    border-radius:14px;
    background:rgba(255,255,255,.03);
    font-size:12px;
    text-align:center;
    white-space:nowrap;
  }

  .site-header .header-link.active{
    border-color:var(--line-strong);
    background:rgba(139,92,246,.14);
  }

  .site-header .header-account{
    flex:0 1 auto!important;
    width:auto!important;
    max-width:min(34vw,220px);
    min-height:42px;
    padding:8px 14px;
    border-radius:999px;
  }

  .site-header .header-account small{
    display:none;
  }

  .site-header .pf-theme-toggle,
  .site-header .mobile-menu-toggle{
    flex:0 0 42px!important;
    width:42px!important;
    height:42px!important;
  }

  .site-header .theme-selector-wrap{
    order:2;
  }

  .site-header .mobile-menu-toggle{
    order:3;
  }

  .mobile-menu-toggle{
    display:inline-grid;
    place-items:center;
    gap:4px;
    border:1px solid var(--line);
    border-radius:999px;
    background:var(--panel);
    color:var(--text-strong);
    cursor:pointer;
    transition:transform .2s,border-color .2s,background .2s;
  }

  .mobile-menu-toggle:hover{
    transform:translateY(-1px);
    border-color:var(--line-strong);
    background:rgba(139,92,246,.1);
  }

  .mobile-menu-toggle span{
    display:block;
    width:16px;
    height:2px;
    border-radius:999px;
    background:currentColor;
    transition:transform .18s ease, opacity .18s ease;
  }

  .site-header.nav-open .mobile-menu-toggle span:nth-child(1){
    transform:translateY(6px) rotate(45deg);
  }

  .site-header.nav-open .mobile-menu-toggle span:nth-child(2){
    opacity:0;
  }

  .site-header.nav-open .mobile-menu-toggle span:nth-child(3){
    transform:translateY(-6px) rotate(-45deg);
  }

  .page-shell,
  .app-shell{
    padding-top:80px;
  }
}

@media (min-width: 1321px){
  .mobile-menu-toggle{
    display:none;
  }
}

@media (max-width: 520px){
  .site-header .header-shell{
    padding:10px 12px!important;
    gap:8px!important;
  }

  .site-header .header-brand{
    font-size:15px;
  }

  .site-header .header-account{
    max-width:124px;
    padding-inline:11px;
  }

  .site-header .header-account strong{
    max-width:84px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .site-header .pf-theme-toggle,
  .site-header .mobile-menu-toggle{
    flex-basis:40px!important;
    width:40px!important;
    height:40px!important;
  }

  .site-header .header-nav{
    right:12px;
    width:calc(100vw - 24px)!important;
  }
}

/* ── Rating filter section (replaces sliders) ─────────────── */
.explore-metacritic-section {
}

.explore-metacritic-sliders {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 8px;
}

.score-input-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 150px;
}

.score-input-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.score-input-row--pf .score-input-label {
  color: var(--purple);
}

.score-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.score-input {
  width: 100%;
  background: var(--input-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text-strong);
  font-family: 'Orbitron', monospace;
  font-size: 15px;
  font-weight: 700;
  padding: 10px 44px 10px 14px;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  -moz-appearance: textfield;
}

.score-input::-webkit-inner-spin-button,
.score-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.score-input::placeholder {
  color: var(--text-muted);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
}

.score-input:focus {
  border-color: var(--accent);
  background: rgba(139, 92, 246, 0.06);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.score-input-row--pf .score-input:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

.score-input-unit {
  position: absolute;
  right: 12px;
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'Inter', sans-serif;
  pointer-events: none;
  user-select: none;
}

/* ── Metacritic / PF Score Badges in Game Cards ─────────────── */
.game-ratings-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  text-transform: uppercase;
}

.rating-badge.critic-high {
  background: rgba(102, 204, 51, 0.12);
  border: 1px solid rgba(102, 204, 51, 0.35);
  color: #66cc33;
}

.rating-badge.critic-medium {
  background: rgba(255, 204, 51, 0.12);
  border: 1px solid rgba(255, 204, 51, 0.35);
  color: #ffcc33;
}

.rating-badge.critic-low {
  background: rgba(255, 0, 0, 0.12);
  border: 1px solid rgba(255, 0, 0, 0.35);
  color: #ff3333;
}

.rating-badge.user-high {
  background: rgba(51, 153, 255, 0.12);
  border: 1px solid rgba(51, 153, 255, 0.35);
  color: #3399ff;
}

.rating-badge.user-medium {
  background: rgba(255, 204, 51, 0.12);
  border: 1px solid rgba(255, 204, 51, 0.35);
  color: #ffcc33;
}

.rating-badge.user-low {
  background: rgba(255, 0, 0, 0.12);
  border: 1px solid rgba(255, 0, 0, 0.35);
  color: #ff3333;
}

/* Playfinder Community Score badge — distinct purple/cyan gradient */
.rating-badge.pf-high {
  background: linear-gradient(135deg, rgba(139,92,246,0.18), rgba(56,189,248,0.10));
  border: 1px solid rgba(139, 92, 246, 0.45);
  color: #c4b5fd;
  box-shadow: 0 0 8px rgba(139,92,246,0.18);
}

.rating-badge.pf-medium {
  background: rgba(139, 92, 246, 0.10);
  border: 1px solid rgba(139, 92, 246, 0.30);
  color: #a78bfa;
}

.rating-badge.pf-low {
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.20);
  color: #7c3aed;
}

.rating-badge-label {
  opacity: 0.7;
  font-size: 8px;
  font-weight: 500;
  margin-right: 1px;
}

/* Premium User Rating Widget styling */
.pf-rating-container {
  margin-top: 20px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
}

.pf-rating-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.pf-rating-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: #c4b5fd;
  text-shadow: 0 0 8px rgba(139,92,246,0.3);
}

.pf-rating-value-display {
  font-family: 'Orbitron', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #38bdf8;
  text-shadow: 0 0 10px rgba(56,189,248,0.4);
}

.pf-rating-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.pf-rating-btn {
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.3);
  color: #c4b5fd;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.pf-rating-btn:hover {
  background: rgba(139, 92, 246, 0.3);
  border-color: #a78bfa;
  transform: scale(1.05);
}

.pf-rating-btn:active {
  transform: scale(0.95);
}

.pf-rating-slider {
  flex: 1;
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
  outline: none;
  cursor: pointer;
  transition: background 0.3s;
}

.pf-rating-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
}

.pf-rating-slider::-webkit-slider-thumb {
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: #38bdf8;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -6px;
  box-shadow: 0 0 10px rgba(56,189,248,0.6);
  transition: transform 0.1s, background-color 0.2s;
}

.pf-rating-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  background: #7dd3fc;
}

.pf-rating-save-btn {
  width: 100%;
  height: 40px;
  border-radius: 20px;
  border: 1px solid rgba(56, 189, 248, 0.4);
  background: linear-gradient(135deg, rgba(139,92,246,0.2), rgba(56,189,248,0.2));
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(139,92,246,0.1);
}

.pf-rating-save-btn:hover {
  background: linear-gradient(135deg, rgba(139,92,246,0.4), rgba(56,189,248,0.4));
  border-color: #38bdf8;
  box-shadow: 0 4px 15px rgba(56,189,248,0.25);
  transform: translateY(-1px);
}

.pf-rating-save-btn:active {
  transform: translateY(1px);
}

.pf-rating-widget-unauth {
  margin-top: 20px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Collapsible Filter Panels */
.collapsible-header {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  transition: opacity 0.2s ease;
}

.collapsible-header:hover {
  opacity: 0.85;
}

.collapsible-header .chevron {
  font-size: 14px;
  color: var(--text-muted);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
}

.collapsible-section.expanded .chevron {
  transform: rotate(180deg);
}

.collapsible-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin-top 0.3s ease;
  opacity: 0;
  margin-top: 0;
}

.collapsible-content > div {
  overflow: hidden;
}

.collapsible-section.expanded .collapsible-content {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 8px;
  overflow: visible;
}

.collapsible-section.expanded .collapsible-content > div {
  overflow: visible;
}

/* Active Filter Badges */
.active-filters-list {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  vertical-align: middle;
}

.active-filter-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.25);
  padding: 4px 10px;
  border-radius: 10px;
  font-family: 'Orbitron', monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-strong);
  transition: all 0.2s ease;
  cursor: default;
}

.active-filter-badge:hover {
  background: rgba(139, 92, 246, 0.22);
  border-color: rgba(139, 92, 246, 0.45);
}

.filter-clear-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  margin-left: 0;
  width: 0;
  opacity: 0;
  overflow: hidden;
  transition: width 0.2s ease, margin-left 0.2s ease, opacity 0.2s ease, color 0.2s ease;
  line-height: 1;
}

.active-filter-badge:hover .filter-clear-x {
  width: 14px;
  opacity: 1;
  margin-left: 8px;
}

.filter-clear-x:hover {
  color: var(--rose, #ff4a7d);
}

/* Horizontal Filter Bar Styling */
.explore-filter-triggers-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  margin-bottom: 4px;
}

.filter-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-muted);
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.filter-trigger-btn:hover {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.filter-trigger-btn.expanded {
  border-color: var(--cyan);
  background: rgba(34, 211, 238, 0.06);
  color: var(--text-strong);
  box-shadow: 0 0 15px rgba(34, 211, 238, 0.15);
}

.filter-trigger-btn .chevron {
  font-size: 10px;
  color: var(--text-muted);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
}

.filter-trigger-btn.expanded .chevron {
  transform: rotate(180deg);
  color: var(--cyan);
}

.explore-filter-panels:not(:has(.expanded)) { display: none; }

.explore-filter-panels {
  display: flex;
  flex-direction: column;
  gap: 12px;
}




.account-item .modded-switch-btn { opacity: 0; transition: opacity 0.2s ease; }
.account-item:hover .modded-switch-btn { opacity: 1; }

.profile-platform-icon-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}

.profile-platform-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.profile-platform-icon img, .profile-platform-icon svg {
  width: 36px;
  height: 36px;
  object-fit: contain;
  z-index: 1;
}

.profile-platform-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 0;
}

.profile-platform-icon:hover {
  transform: translateY(-2px);
  border-color: var(--text);
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.profile-platform-icon:hover::after {
  opacity: 1;
}

.profile-platform-icon.active {
  border-color: var(--cyan);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.2);
  transform: translateY(-2px);
}

.profile-platform-detail-panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.profile-platform-detail-panel.updating {
  opacity: 0 !important;
}

.profile-platform-detail-panel.open {
  max-height: 400px;
  opacity: 1;
}

.profile-platform-detail-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 8px;
}

.platform-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.platform-detail-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.platform-stat-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.platform-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 600;
}

.platform-stat-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

/* Ensure equal height columns on the profile section grid */
.friend-profile-layout-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.friend-profile-column {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.friend-profile-library-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 400px;
}

.friend-profile-library-container .account-list {
  flex: 1;
  overflow-y: auto;
  padding-right: 8px;
  /* Custom scrollbar for library */
}
.friend-profile-library-container .account-list::-webkit-scrollbar {
  width: 6px;
}
.friend-profile-library-container .account-list::-webkit-scrollbar-track {
  background: transparent;
}
.friend-profile-library-container .account-list::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 3px;
}
.friend-profile-library-container .account-list::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}


/* --- Lists Feature CSS --- */
.explore-list-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.05);
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}
.explore-list-chip:hover {
  background: rgba(255, 255, 255, 0.1);
}
.explore-list-chip.active {
  background: var(--purple);
  color: white;
}
.explore-list-name {
  font-weight: 500;
  font-size: 14px;
}
.explore-list-actions {
  display: flex;
  align-items: center;
  opacity: 0.5;
}
.explore-list-chip:hover .explore-list-actions {
  opacity: 1;
}
.list-dots-btn {
  background: none;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
}
.list-dropdown {
  position: absolute;
  background: var(--bg-dark);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 8px 0;
  z-index: 100;
  min-width: 120px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.list-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: white;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 13px;
}
.list-dropdown button:hover {
  background: rgba(255,255,255,0.05);
}
.list-dropdown button.delete-btn {
  color: #ff4a7d;
}
.game-modal-lists {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.game-list-toggle {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: all 0.2s;
}
.game-list-toggle:hover {
  background: rgba(255,255,255,0.1);
}
.game-list-toggle.in-list {
  background: var(--purple);
  color: white;
  border-color: var(--purple);
}
.bulk-search-results {
  max-height: 300px;
  overflow-y: auto;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bulk-search-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,0.05);
  padding: 8px;
  border-radius: 8px;
}
.bulk-search-item img {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  object-fit: cover;
  margin-right: 12px;
}
.site-header {
  view-transition-name: site-header;
}
::view-transition-group(site-header) {
  z-index: 20000;
}

/* Lists Game Card Dots Menu */
.explore-card { position: relative; }
.game-dots-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
  z-index: 10;
  backdrop-filter: blur(4px);
}
.explore-card:hover .game-dots-btn {
  opacity: 1;
}
.game-dots-btn:hover {
  background: rgba(139, 92, 246, 0.8);
}
.game-card-menu {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  min-width: 150px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}
.game-card-menu .list-menu-item {
  background: transparent;
  border: none;
  padding: 8px 12px;
  text-align: left;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s;
}
.game-card-menu .list-menu-item:hover {
  background: rgba(139, 92, 246, 0.1);
  color: var(--text-strong);
}

/* Game Details Modal Lists */
.game-modal-lists {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.game-list-toggle {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.game-list-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--border-hi);
}
.game-list-toggle.in-list {
  background: rgba(34, 211, 238, 0.1);
  border-color: rgba(34, 211, 238, 0.35);
  color: var(--cyan);
}

/* Detail Modal List Button */
.explore-detail-meta-btn {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px dashed var(--line-strong) !important;
  font: inherit;
  color: var(--text-strong);
  transition: all 0.2s ease;
}
.explore-detail-meta-btn:hover {
  background: rgba(139, 92, 246, 0.1) !important;
  border-color: var(--purple) !important;
}
.explore-detail-meta-btn .explore-detail-meta-value {
  color: var(--purple);
  font-weight: bold;
  font-size: 16px;
  line-height: 1;
}