/* =====================================================
   CLEANED & ORGANIZED STYLESHEET
   Breakpoints: lg=1340px, md=980px, sm=760px, xs=380px
   Notes:
   - Consolidated duplicate rules (e.g., accordion, .item .price)
   - Grouped by domain: core, layout, navigation, inventory, trade,
     wallet, profile, chat, tables, select UI, upgrade, overlays, etc.
   - Reduced media queries to four common breakpoints
   - Improved small-screen/touch ergonomics
   - Firefox compatibility fixes applied
   ===================================================== */

/* -----------------------------------------------------
   1) CORE THEME & RESETS
----------------------------------------------------- */
:root{
  /* Colors */
  --bg:#0e1116;
  --panel:rgba(255,255,255,0.06);
  --panel-2:rgba(255,255,255,0.10);
  --panel-3:rgba(255,255,255,0.16);
  --glass:rgba(16,18,24,0.55);
  --text:#eef2f6;
  --muted:#9aa4ad;
  --accent:#ffb84a;
  --accent-2:#e58c2c;
  --good:#59f0a2;
  --bad:#ff6b6b;

  /* Rails (desktop) */
  --left-min: 440px;
  --left-max: 494px;
  --rail-w: 42px;

  /* Scrollbars */
  --scrollbar-size: 8px;
  --scrollbar-radius: 8px;
  --scrollbar-thumb: rgba(255,255,255,.24);
  --scrollbar-thumb-hover: rgba(255,255,255,.34);
  --scrollbar-thumb-active: rgba(255,255,255,.50);
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font:400 15px/1.5 Inter,system-ui,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;
  overflow:hidden;
}

/* Selection & form accents */
::selection, ::-moz-selection{ background:var(--accent); color:#0b0d11 }
input[type="checkbox"],
input[type="radio"],
input[type="range"],
#tradable-deposit,
#tradable-withdraw{ accent-color:var(--accent) }

/* Scrollbars (Firefox + WebKit) */
*{ scrollbar-width:thin; scrollbar-color:var(--scrollbar-thumb) transparent }
::-webkit-scrollbar{ width:var(--scrollbar-size); height:var(--scrollbar-size); background:transparent }
::-webkit-scrollbar-track{ background:transparent }
::-webkit-scrollbar-thumb{
  background-color:var(--scrollbar-thumb);
  border-radius:var(--scrollbar-radius);
  border:2px solid transparent; background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{ background-color:var(--scrollbar-thumb-hover) }
::-webkit-scrollbar-thumb:active{ background-color:var(--scrollbar-thumb-active) }

/* Utilities */
.hidden{ display:none !important }
.pulse{ animation:pulseGlow 1s ease infinite }
@keyframes pulseGlow{ 0%{box-shadow:0 0 0 0 rgba(255,184,74,0)} 70%{box-shadow:0 0 0 10px rgba(255,184,74,0)} 100%{box-shadow:0 0 0 0 rgba(255,184,74,0)} }

.banner.warn{
  background:rgba(255,190,0,.12);
  border:1px solid rgba(255,190,0,.35);
  padding:12px; border-radius:12px;
}

/* -----------------------------------------------------
   2) BACKGROUND & APP LAYOUT
----------------------------------------------------- */
.app-bg{
  position:fixed; inset:0; z-index:0; overflow:hidden;
  background: radial-gradient(1200px 800px at 70% 20%, rgba(255,184,74,.08), transparent 60%),
              radial-gradient(800px 600px at 20% 80%, rgba(51,143,255,.06), transparent 60%),
              #0c0f14;
}
.app-bg::before{
  content:""; position:absolute; inset:-5%; opacity:.25;
  background:url('../cs2-menu-bg.png') center/cover no-repeat;
  filter:saturate(1.3) blur(2px);
  transform:translateZ(0) scale(1.2);
  transition: transform 800ms ease;
}
.app-bg.parallax::before{ transform:translate3d(var(--dx,0px), var(--dy,0px), 0) scale(1) }

.app-shell{
  position:absolute; inset:0; padding:74px 16px 16px;
  display:grid; gap:16px;
  grid-template-columns:minmax(var(--left-min), var(--left-max)) 1fr var(--rail-w);
  z-index: 4;
  transition: grid-template-columns 0.3s ease;
}

/* When sidebar is collapsed - CLASS-BASED (Firefox fallback) */
.app-shell.sidebar-collapsed {
  grid-template-columns: auto 1fr var(--rail-w);
}

/* Modern :has() selector (Chrome, modern Firefox 121+) */
.app-shell:has(.left-col.collapsed) {
  grid-template-columns: auto 1fr var(--rail-w);
}

/* Scroll containers (rails) */
.left-col,.left-panel,.right-rail{
  height:100%; max-height:100%; min-height:0;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
.left-col,.left-panel{ overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; transition: opacity 0.3s ease;}
.right-rail{ overflow-y:visible; overflow-x:visible; scrollbar-gutter:stable both-edges }

.viewport{
  position:relative; border-radius:16px; overflow:hidden;
  border:1px solid var(--panel-2);
  background:linear-gradient(180deg, rgba(15,17,22,.55), rgba(15,17,22,.35));
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  box-shadow:0 20px 40px rgba(0,0,0,.35);
}
.view{ position:absolute; inset:0; padding:18px; overflow:auto; display:none; overflow-x:hidden }
.view.active{ display:block; animation:fadeIn .28s ease both }
@keyframes fadeIn{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

/* -----------------------------------------------------
   3) TOPBAR & NAVIGATION
----------------------------------------------------- */
.topbar{
  position:fixed; inset:0 0 auto 0; height:56px; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px;
  background:linear-gradient(to bottom, rgba(10,12,16,.9), rgba(10,12,16,.55));
  border-bottom:1px solid var(--panel-2);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.brand{ display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:1px }
.brand .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 16px var(--accent) }

.mainnav{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; overflow: visible; }

.nav-pill{
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; min-width:100px; padding:0 16px;
  border:1px solid var(--panel-2); border-radius:10px; background:var(--glass);
  text-transform:uppercase; letter-spacing:.12em; font-weight:700; font-size:12px; color:var(--muted);
  cursor:pointer; user-select:none; transition:all .25s ease;
}
.nav-pill:hover{ color:var(--text); border-color:var(--panel-3); transform:translateY(-1px) scale(1.02) }
.nav-pill.active{ color:#0b0d11; background:linear-gradient(180deg, var(--accent), var(--accent-2)); border-color:transparent }

.top-actions{ display:flex; gap:12px; align-items:center }
.coin-chip{ display:inline-flex; gap:6px; align-items:center; height:36px; padding:0 12px; border:1px solid var(--panel-2); border-radius:999px; background:var(--glass); font-weight:700; font-size:13px;transition:transform .2s ease; letter-spacing:0.04em }
.coin-chip:hover{ transform:scale(1.02) }
.avatar{ width:36px; height:36px; border-radius:50%; overflow:hidden; background:var(--panel-2); border:1px solid var(--panel-3) ;transition:transform .2s ease;}
.avatar:hover{ transform:scale(1.12) }
.avatar img{ width:100%; height:100%; object-fit:cover; }

.btn-steam{
  height:36px; padding:0 14px; border-radius:10px; font-weight:700;
  border:1px solid var(--panel-2); background:var(--panel); color:var(--text);
  cursor:pointer; transition:.25s; text-decoration:none; display:inline-flex; align-items:center; gap:8px;
}
.btn-steam:hover{ border-color:var(--accent); transform:translateY(-1px); box-shadow:0 10px 24px rgba(255,184,74,.12) }

.nav-pill {
  display: flex;
  align-items: center;   /* vertical centering */
  justify-content: center;
  padding: 0.5rem 1rem;
}

.mainnav .bi {
  font-size: 1.5rem;
  line-height: 1;        /* removes extra spacing from the icon font */
  margin-right: 6px;
  display: flex;         /* makes the icon align correctly */
  align-items: center;
}

.nav-pill .label {
  font-size: 0.75rem;
  line-height: 1;        /* makes the text align with icon */
  display: flex;
  align-items: center;
}

/* Hide labels under 960px */
@media (max-width: 960px) {
  .nav-pill .label {
    display: none;
  }
  .mainnav .bi {
    margin-right: 0px;
  }
}

/* -----------------------------------------------------
   4) LEFT/RIGHT PANELS & CARDS
----------------------------------------------------- */
.left-panel,.left-card{
  align-self:start; width:100%; max-width:var(--left-max);
  border:1px solid var(--panel-2); border-radius:16px;
  padding:20px;  /*box-shadow:0 20px 40px rgba(0,0,0,.35);*/
}
.left-panel{ 
  background:linear-gradient(180deg, rgba(14,16,20,.7), rgba(14,16,20,.45)); 
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.left-card{ background:linear-gradient(260deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) }

#leftCardsMount{ 
  grid-column:1/2; 
  display:flex; 
  flex-direction:column; 
  gap:1rem; 
  width:100%; 
  max-width:var(--left-max); 
  align-self:stretch; 
}

.left-card.main .title, .left-panel .title{ font-size:38px; font-weight:800; letter-spacing:.02em; line-height:1.1; margin:6px 0 12px }
.left-card .desc, .left-panel .desc{ color:var(--muted); font-size:14px }

/* CTA button */
.cta{
  display:inline-flex; align-items:center; gap:10px; height:40px; padding:0 18px; border-radius:12px;
  border:1px solid #000; color:#0a0c10; font-weight:900; cursor:pointer;
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
  transition:transform .12s ease, box-shadow .2s ease;
  box-shadow:0 16px 32px rgba(255,184,74,.2), inset 0 1px 0 rgba(255,255,255,.25);
}
.cta .bi{
  font-size: 24px;
  display: flex;
}
.cta .bi .label{
  font-size: 0.85rem;
  font-weight: 540;
  letter-spacing: .06em;
  line-height: 1;        /* makes the text align with icon */
  display: flex;
  align-self: center;
}
.cta:hover{ transform:translateY(-2px) scale(1.01); box-shadow:0 20px 40px rgba(255,184,74,.28), inset 0 1px 0 rgba(255,255,255,.4) }
.cta:active{ transform:translateY(0) scale(.98) }
.cta.is-disabled{ display: none; background: gray; transform: none; box-shadow: none; }
.cta.is-disabled:active{ display: none; background: gray; transform: none; box-shadow: none; }

/* Secondary variant + side-card alias */
.left-card.secondary .card-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px }
.left-card.secondary .card-title{ font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted) }
.left-card.secondary .card-close{ width:28px; height:28px; border-radius:8px; border:1px solid var(--panel-2); background:var(--panel); color:var(--muted); display:grid; place-items:center; cursor:pointer; transition:.2s }
.left-card.secondary .card-close:hover{ border-color:var(--accent); color:var(--text); transform:translateY(-1px) }
.left-card.secondary .card-body{ color:#cfd4da; font-size:14px; line-height:1.4 }
.side-card{ all:unset; display:block }

#activityLog.card-body{
  overflow: auto;
  max-height: 150px;
}

/* Right rail (friends) */
.right-rail{ display:flex; flex-direction:column; gap:10px; align-items:center; padding-top:0px }
.friend{
  width:44px; height:44px; border-radius:12px; position:relative; overflow:hidden; cursor:pointer;
  border:1px solid var(--panel-2);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  transition:transform .2s ease;
}
.friend:hover{ transform:translateY(-2px) scale(1.12) }
.friend::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 2px rgba(0,0,0,.35) }
.friend .online{ position:absolute; right:6px; bottom:6px; width:8px; height:8px; background:var(--good); border-radius:50%; box-shadow:0 0 8px rgba(89,240,162,.8) }
.friend>img,.friend .img{ position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; object-position:center; border-radius:inherit }

/* "+X more" badge styling */
.friend-more-badge {
  cursor: default;
  background: linear-gradient(180deg, rgba(255,184,74,.12), rgba(255,184,74,.06));
  border-color: rgba(255,184,74,.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.friend-more-badge:hover {
  transform: none;
}
.friend-more-text {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

/* -----------------------------------------------------
   5) TOOLBARS, BUTTONS, INPUTS
----------------------------------------------------- */
.toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px }
.search{ flex:1; height:2.5rem; padding:0 12px; border-radius:10px; border:1px solid var(--panel-2); background:var(--panel); color:var(--text) }
.section-title{ font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted) }

.btn{ height:40px; padding:0 14px; border-radius:10px; border:1px solid var(--panel-2); background:var(--panel); color:var(--text); font-weight:700; cursor:pointer }
.btn.primary{ background:linear-gradient(180deg, var(--accent), var(--accent-2)); color:#101318; border-color:transparent }
.btn.ghost{ background:transparent }

/* -----------------------------------------------------
   6) INVENTORY (views, grids, items)
----------------------------------------------------- */
.panels{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.panel{ border:1px solid var(--panel-2); border-radius:14px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); padding:12px; overflow-x:hidden }

.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(18%,1fr)); gap:8px }
.item{
  position:relative; aspect-ratio:1/1; overflow:hidden; cursor:pointer;
  border:1px solid var(--panel-2); border-radius:12px; background:rgba(14,16,20,.55);
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.item:hover{ transform:scale(1.01); box-shadow:0 10px 20px rgba(0,0,0,.35); border-color:var(--panel-3) }
.item.selected{ border-color:var(--accent); box-shadow:0 0 0 2px rgba(255,184,74,.4) inset, 0 14px 28px rgba(255,184,74,.18) }
.item .thumb{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:12px; padding:10px; text-align:center; color:var(--muted) }
.item .thumb img{ width:100%; height:100%; object-fit:contain }
.item .label{ position:absolute; left:8px; right:8px; bottom:8px; font-size:0.8rem; line-height:1.2; color:#cfd4da; text-shadow:0 1px 0 rgba(0,0,0,.5); text-overflow: ellipsis; overflow: hidden;white-space: nowrap;}
.item .tick{ position:absolute; top:8px; right:8px; width:22px; height:22px; border-radius:50%; border:1px solid var(--panel-2); background:rgba(0,0,0,.35); display:grid; place-items:center; font-size:14px; color:transparent; transition:.2s }
.item.selected .tick{ background:linear-gradient(180deg, var(--accent), var(--accent-2)); border-color:transparent; color:#0b0d11; box-shadow:0 6px 14px rgba(255,184,74,.35) }
.lazy-thumb{ filter:blur(2px); opacity:.85; transition:filter .25s ease, opacity .25s ease }
.lazy-thumb:not([data-src]){ filter:none; opacity:1 }

/* Item badges & price (single definition) */
.item .badge{ display:inline-block; margin-left:6px; padding:6px; border:1px solid rgba(255,255,255,.2); border-radius:6px; font-size:12px; opacity:.8 }
.item .price{ position:absolute; top:8px; left:4px; font-weight:800; font-size:12px; line-height:1; padding:4px 6px; text-shadow:0 1px 0 rgba(0,0,0,.5); opacity:1; letter-spacing:0.06em  }
.item.disabled{ opacity:.5; pointer-events:auto; outline:1px dashed rgba(255,255,255,.2); filter:grayscale(.85) }

/* Inventory: wrapper & layout */
.view#inventory{ display:none; overflow:hidden }
.view#inventory.active{ display:flex; flex-direction:column }
.view#inventory .panels{
  flex:1 1 auto; min-height:0; display:grid; gap:14px; overflow:hidden;
  grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr auto;
  grid-template-areas:
    "skins right"
    "skins right"
    "skinsFooter right";
}
#invSkinsPanel{ grid-area:skins; grid-column:1; grid-row:1 / span 2 }
#invSkinsFooter{ grid-area:skinsFooter; border-radius:12px }

/* Right column wrapper holds Achievements + CardSets stacked 50/50 */
#invRightCol{ grid-area:right; display:flex; flex-direction:column; gap:14px; min-height:0 }
#invRightCol > .panel{ flex:1 1 0; min-height:0; display:flex; flex-direction:column }
#invCardSetsPanel{ grid-row:auto; min-width:0 }

/* Card Sets: expanded row above the clicked tile */
#invCardSetsGrid .cs-expanded{
  grid-column:1 / -1;
  position: relative; /* anchor for top-right actions */
  padding:12px 12px;
  background:rgba(0,0,0,.35);
  border:1px solid var(--panel-2);
  border-radius:12px;
}

/* Disabled treatment for expanded row */
#invCardSetsGrid .cs-expanded.disabled{
  opacity:.5;
  filter: grayscale(.85);
  outline: 1px dashed rgba(255, 255, 255, .2);
}

/* Header (icon + name/desc). Keep compact; leave room for actions on the right */
#invCardSetsGrid .cs-header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
  padding-right:180px; /* avoid overlap with the actions group on narrow widths */
}
#invCardSetsGrid .cs-header .thumb{
  flex:0 0 42px; height:42px;
  display:flex; align-items:center; justify-content:center;
}
#invCardSetsGrid .cs-header .thumb img{ width:42px; height:42px; object-fit:contain }
#invCardSetsGrid .cs-header .headings{ display:flex; flex-direction:column; gap:2px; }
#invCardSetsGrid .cs-header .label{ font-weight:700; }
#invCardSetsGrid .cs-header .desc-row{ font-size:.9rem; color:var(--muted); line-height:1.35 }

/* Actions: Equip + suit buttons — pinned top-right */
#invCardSetsGrid .cs-actions{
  position:absolute;
  top:8px;
  right:8px;
  display:flex;
  align-items:center;
  height: 46px;
  gap:8px;
}

/* Equip button (visual parity with suit buttons) */
#invCardSetsGrid .cs-actions .equip-btn{
  min-width:72px;
  height:46px;
  padding:0 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 2px;
}
#invCardSetsGrid .cs-actions .equip-btn:hover{ opacity:1 }
#invCardSetsGrid .cs-actions .equip-btn:active{ transform: translateY(1px) }

/* Suit button group */
#invCardSetsGrid .cs-suit-group{
  display:flex;
  gap:6px;
}
#invCardSetsGrid .cs-suit-group .sbtn{
  min-width:44px;
  height:46px;
  padding:0 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  border:1px solid var(--panel-2);
  background:rgba(14,16,20,.65);
  font-weight:700;
  line-height:1;
  font-size: large;
  user-select:none;
  cursor:pointer;
  opacity:.92;
  transition:transform .08s ease, opacity .12s ease, background .12s ease, border-color .12s ease;
}
#invCardSetsGrid .cs-suit-group .sbtn:hover{ opacity:1 }
#invCardSetsGrid .cs-suit-group .sbtn:active{ transform: translateY(1px) }

#invCardSetsGrid .cs-suit-group .sbtn[data-suit="hearts"],
#invCardSetsGrid .cs-suit-group .sbtn[data-suit="diamonds"]{
  color:#ff6666; /* red suits */
}
#invCardSetsGrid .cs-suit-group .sbtn[data-suit="spades"],
#invCardSetsGrid .cs-suit-group .sbtn[data-suit="clubs"]{
  color:#eaeef5; /* light for dark UI */
}
#invCardSetsGrid .cs-suit-group .sbtn.active{
  background:rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.28);
  box-shadow: 0 2px 10px rgba(0,0,0,.25) inset;
}

/* Cards preview: now full width under the header */
#invCardSetsGrid .cards-preview{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(15%, 1fr));
  gap:8px;
}

#invCardSetsGrid .card-thumb{
  position:relative;
  border:1px solid var(--panel-2);
  border-radius:8px;
  background:rgba(14,16,20,.55);
  height: 8rem;
  overflow:hidden;
  display:grid;
  place-items:center;
}
#invCardSetsGrid .card-thumb img{
  width:100%; height:100%; object-fit:contain;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.4));
}
#invCardSetsGrid .card-thumb .card-cap{
  position:absolute; left:6px; bottom:6px;
  font-size:11px; font-weight:700;
  background:rgba(31, 30, 30, 0.733);
  border:1px solid rgba(255,255,255,0.22);
  border-radius:6px; padding:2px 6px;
}

/* Per-panel scroll & sticky toolbars */
.view#inventory .panel{ display:flex; flex-direction:column; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin }
.item .thumb .badge{ position:sticky; top:1rem; left:1rem }

.item .wear-tag {
  position: absolute;
  bottom: 28px;
  left: 8px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  color: var(--text);
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
}

.item .qty-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  color: var(--text);
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
}

/* Inventory helpers */
#invPanels.grid-1{ grid-template-columns:1fr }
#invPanels.grid-1 .panel{ grid-column:1 / -1 }
.panel[hidden]{ display:none !important }
.inv-empty{ grid-column:1 / -1; text-align:center; padding:2rem 1rem; font-size:1rem; color:#9aa0a6 }

/* Inventory item variants */
.item.inv{ position:relative; border:1px solid rgba(255,255,255,.1) }
.item.inv .label{ font-weight:700; font-size:.95rem; }
.item.inv .meta-row{ display:flex; gap:8px; align-items:center; opacity:.85; font-size:.82rem }
.badge-qty{ padding:2px 6px; border-radius:6px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12) }

/* Rarity coloring */
#invSkinsGrid .item .label{ color:var(--rarity-color, var(--text)); }
#invSkinsGrid .item.rarity-common    .label{ color:#b0bec5 }
#invSkinsGrid .item.rarity-uncommon  .label{ color:#8bc34a }
#invSkinsGrid .item.rarity-rare      .label{ color:#42a5f5 }
#invSkinsGrid .item.rarity-epic      .label{ color:#ab47bc }
#invSkinsGrid .item.rarity-legendary .label{ color:#ffb300 }

/* Achievement ribbons in equip thumbs */
.equip-thumb{ position:relative }

/* tbody or container of the accordion */
#pricesTBody { content-visibility: auto; contain-intrinsic-size: 1200px; }

/* children bodies start hidden already; the rule below helps the engine skip work */
tr.acc-body[style*="display:none"] { content-visibility: hidden; }

/* -----------------------------------------------------
   7) TRADE VIEW (independent scrollers)
----------------------------------------------------- */
.view#trade{ display:none; overflow:hidden }
.view#trade.active{ display:flex; flex-direction:column }
.view#trade .toolbar{ flex:0 0 auto }
.view#trade .panels{ flex:1 1 auto; min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:14px; overflow:hidden }
.view#trade .panel{ overflow-y:auto; scrollbar-width:thin; -webkit-overflow-scrolling:touch }
.view .panel .toolbar{ position:sticky; top:0; z-index:2; margin-bottom:12px; padding:0; border-radius:14px }
.view#trade .footer-bar{ flex:0 0 auto; border-radius:14px; margin-top:1rem }

/* Trade: thumbnail handling */
#tradeOverview .item .thumb img{ width:100%; height:100%; object-fit:contain }
.item img{ width:100%; height:100%; object-fit:contain; image-rendering:-webkit-optimize-contrast; image-rendering:crisp-edges }
.item .thumb.loaded::before{ display:none }

/* -----------------------------------------------------
   8) FOOTER BAR
----------------------------------------------------- */
.footer-bar{
  position:sticky; bottom:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px; border:1px solid var(--panel-2);
  background:linear-gradient(260deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.meta{ color:var(--muted); font-weight:700 }
.meta-medium {
  color: var(--muted);
  font-weight: 500;
  font-size: .85rem;
  line-height: 1;
  vertical-align: middle;
}

.meta-mini{ color:var(--muted); font-weight:250; font-size:.62rem }
.achcomp{ position:absolute; bottom:4px; left:8px }

/* -----------------------------------------------------
   9) TABLES & ACCORDION
----------------------------------------------------- */
.table{ width:100%; border-collapse:collapse; font-size:14px }
.table th,.table td{ padding:8px 10px; border-bottom:1px solid var(--panel-2) }
.table th{ text-align:left; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.08em }
.table tr:hover td{ background:rgba(255,255,255,.04) }
.table.subtable{ width:100%; background:rgba(255,255,255,.02); border-top:1px solid var(--panel-2) }
.table.subtable th,.table.subtable td{ font-size:.95rem }

.table .acc-head td{ cursor:pointer; user-select:none }
.acc-head .caret{
  display:inline-block; width:10px; height:10px; margin-right:8px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(-45deg); transition:transform .12s ease, border-color .12s ease;
}
.acc-head.open .caret{ transform:rotate(45deg); border-color:var(--accent) }
.acc-title{ font-weight:700 }
.acc-type .acc-title{ color:#cfd4da }
.rarity-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; margin-left:8px; box-shadow:0 0 8px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08) inset; border:1px solid rgba(255,255,255,.25) }

/* -----------------------------------------------------
   10) PROFILE & MINI-GRID EQUIPMENTS
----------------------------------------------------- */
.profile-header{ display:flex; align-items:center; gap:16px; border:1px solid var(--panel-2); border-radius:14px; padding:14px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) }
.profile-avatar-large{ width:96px; height:96px; border-radius:14px; border:1px solid var(--panel-2); background:var(--panel-2) center/cover no-repeat; overflow:hidden; display:grid; place-items:center; box-sizing:border-box }
.profile-avatar-large img{ width:100%; height:100%; display:block; object-fit:cover; border-radius:inherit }
.profile-head-right{ flex:1; min-width:0; display:flex; flex-direction:column; gap:8px }
.profile-name-row{ display:block; align-items:center; gap:12px; min-width:0 }
.profile-name{ font-size:1.6rem; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.steamid-row{ display:flex; align-items:center; gap:8px }
.steamid-link{ color:var(--muted); text-decoration:none; border-bottom:1px dashed var(--panel-2) }
.steamid-link:hover{ color:var(--text); border-color:var(--accent) }
.btn-icon{ height:32px !important; padding:0 8px !important; border-radius:8px !important; display:inline-grid; place-items:center }

/* Mini-grid showcase (flex) */
.profile-mini-grid{
  --slot:180px; --gap:1rem;
  margin:3rem auto; display:flex; flex-wrap:wrap; justify-content:center; column-gap:var(--gap); row-gap:var(--gap);
  max-width:calc(5 * var(--slot) + 4 * var(--gap));
}
.profile-mini-grid .slot{
  flex:0 0 var(--slot); width:var(--slot); aspect-ratio:1/1; position:relative; overflow:hidden; user-select:none;
  border:1px dashed var(--panel-2); border-radius:12px; background:rgba(14,16,20,.55);
  display:flex; align-items:center; justify-content:center;
  transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.profile-mini-grid .slot.filled{ border-style:solid; border-color:var(--panel-3) }
.profile-mini-grid .equip-thumb{ width:100%; height:100%; display:flex; align-items:center; justify-content:center }
.profile-mini-grid .equip-thumb img{ max-width:100%; object-fit:contain }
.profile-mini-grid .equip-meta{
  position:absolute; left:0; right:0; bottom:0; padding:8px; font-weight:700; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.6) 100%); z-index:2;
}
.profile-mini-grid .slot:hover{ transform:translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,.35); border-color:var(--panel-3) }
.profile-mini-grid .slot span{ font-size:28px; font-weight:900; color:var(--muted) }

/* Inline equipment picker row */
.profile-equip-row{
  grid-column:1 / 5; border:1px solid var(--panel-2); border-radius:12px; margin-bottom:.75rem; padding:14px; background:rgba(14,16,20,.55);
  --equip-card-w:220px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(var(--equip-card-w), max-content)); gap:10px;
  justify-content:center; justify-items:center; align-content:start; align-items:start;
  overflow-y:auto; overflow-x:hidden; max-height:var(--equip-row-max, 260px); min-height:var(--equip-row-max, 260px);
  position: relative;
}

.button-close{ width:100%; height:28px; border-radius:8px; border:1px solid var(--panel-2); background:var(--panel); color:var(--muted); display:block; place-items:center; cursor:pointer; transition:.2s ; position: sticky; right: 8px; top: 8px;}

.equip-card, .equip-card--none{ width:var(--equip-card-w) }
.equip-card{
  min-width:140px; max-width:220px; border:1px solid var(--panel-2); border-radius:10px; cursor:pointer;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  display:grid; grid-template-rows:80px auto; overflow:clip; clip-path:inset(0 round 10px); scroll-snap-align:start;
  transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.equip-card:hover{ transform:translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,.35); border-color:var(--panel-3) }
.equip-thumb img{ width:100%; height:100%; display:block; object-fit:contain; border-top-left-radius:inherit; border-top-right-radius:inherit; transform:translateZ(0) }
.equip-meta{ padding:8px; font-size:12px; line-height:1.2 }
.equip-meta .name{ font-weight:700; white-space:nowrap; overflow-x:hidden; overflow-y: hidden; text-overflow:ellipsis }
.equip-meta .tag{ color:var(--muted); font-size:11px; text-transform: uppercase;}
.equip-card--none{ border-style:dashed; opacity:.9 }
.equip-card--none .equip-thumb{ display:grid; place-items:center }
.equip-card--none .none-glyph{ font-weight:900; font-size:28px; opacity:.7; line-height:1 }
.equip-card--none:hover .none-glyph{ opacity:1 }

/* --- Profile: Level / XP --- */
.level-row{ display:flex; align-items:center; gap:10px; }
.level-pill{
  font-weight:800; font-size:.9rem; padding:4px 8px; border-radius:999px;
  border:1px solid var(--panel-2); background:rgba(255,255,255,.06);
}

/* ---- Inline XP (stretches to fill space) ---- */
.xp-flex{ display:flex; align-items:center; gap:8px; flex:1; min-width:160px; margin-top: 0.5rem;}
.level-badge{ font-weight:800; font-size:.85rem; padding:4px 8px; border-radius:999px; border:1px solid var(--panel-2); background:var(--panel); }
.xp-bar{
  flex:1; height:10px; border-radius:999px; overflow:hidden;
  border:1px solid var(--panel-2);
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
}
.xp-fill{
  height:100%; width:0%;
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow:0 6px 14px rgba(255,184,74,.25) inset;
}
.xp-txt{ font-weight:700; font-size:.85rem; color:var(--muted); white-space:nowrap; }

/* Settings block placed towards bottom third visually (on desktop) */
.user-settings{
  border:1px solid var(--panel-2);
  border-radius:14px;
  padding:14px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}

/* --- Settings groups --- */
.settings-section{
  margin-top:12px; padding-top:12px; border-top:1px dashed var(--panel-2);
}
.settings-subtitle{
  font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  font-size:.9rem; color:var(--muted); margin-bottom:8px;
}
.settings-section .row{
  display:flex; align-items:center; gap:8px; padding:6px 0;
}

/* -----------------------------------------------------
   11) WALLET (cards, transfer, history)
----------------------------------------------------- */
.wallet-card{ display:grid; gap:12px }
.wallet-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; overflow:hidden; margin-top:.5rem }
.wallet-chip{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; border:1px solid var(--panel-2); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); font-weight:800; letter-spacing:0.07em }
.wallet-chip.big{ gap:10px; padding:12px 16px; font-weight:800; font-size:1.05rem }
.wallet-actions{ display:flex; gap:8px }

.wallet-send{ border:1px solid var(--panel-2); border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); padding:12px; display:grid; gap:8px }
.wallet-send .input{ height:40px; padding:0 10px; border-radius:10px; border:1px solid var(--panel-2); background:var(--panel); color:var(--text); width:100%; flex:1 }
#lcSendForm{ display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; width:100% }
#lcSendForm .input{ width:100% }
#lcSendForm .btn{ height:100% }

.wallet-view{ display:grid; gap:16px; padding:12px }
.wallet-view-head{ display:flex; align-items:center; gap:14px }
.wallet-view-actions{ display:grid; grid-template-columns:repeat(2, minmax(140px, 1fr)); gap:10px }

.contain {gap: 8px; display: grid;}

.wallet-transfer{ border:1px solid var(--panel-2); border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); padding:12px; display:grid; gap:10px }
.wallet-transfer .transfer-head{ display:flex; flex-direction:column; gap:4px }
.wallet-transfer .panel-title{ font-weight:800; text-transform:uppercase; letter-spacing:.02em; color:var(--muted) }
.transfer-form{ display:grid; grid-template-columns:1fr 140px 120px; gap:8px }
.transfer-form .input{ height:40px; padding:0 10px; border-radius:10px; border:1px solid var(--panel-2); background:var(--panel); color:var(--text); width:100%; flex:1 }
.transfer-form .btn{ height:40px }

.wallet-history{ border:1px solid var(--panel-2); border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); padding:12px; display:grid; gap:10px }
.panel-title{ font-weight:800; text-transform:uppercase; letter-spacing:.02em; color:var(--muted) }
.history-list{ display:grid; gap:8px }
.history-item{ display:grid; grid-template-columns:24px 1fr auto; gap:10px; align-items:center; padding:8px 10px; border-radius:10px; background:rgba(255,255,255,.03); border:1px solid var(--panel-2) }
.history-item .meta{ opacity:.8; font-size:.9em }
.amt.plus{ color:#77d977; font-weight:800 }
.amt.minus{ color:#ff8a8a; font-weight:800 }

/* -----------------------------------------------------
   12) CHAT
----------------------------------------------------- */
.chat-card{ display:flex; flex-direction:column; gap:10px; max-height:400px }
.chat-log{ overflow:auto; border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:8px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); margin-top:6px; margin-bottom:2px }
.chat-log .msg{ display:grid; grid-template-columns:32px 1fr; gap:10px; padding:6px 4px; border-bottom:1px solid var(--panel-2) }
.chat-log .msg:last-child{ border-bottom:none }
.chat-avatar{ width:32px; height:32px; border-radius:50%; overflow:hidden; border:1px solid var(--panel-2); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); display:grid; place-items:center; font-weight:800; transition: 0.4s ease; }
.chat-avatar img{ width:100%; height:100%; object-fit:cover; display:block }
.chat-avatar .fallback{ font-size:.8rem; opacity:.9 }
.chat-avatar:hover{transform: scale(1.06);}
.msg-main{ display:flex; flex-direction:column; gap:2px }
.msg-head{ display:flex; align-items:baseline; gap:8px }
.msg .author{ font-weight:700; transition: 0.3s ease; }
.msg .time{ margin-left:auto; opacity:.6 }
.msg .body{ line-height:1.35; opacity:.95 }
.msg.me .author::after{ content:" (you)"; font-weight:400; opacity:.6 }
.chat-form{ display:flex; gap:8px }
.chat-form .input{ flex:1; height:40px; padding:0 10px; border-radius:10px; border:1px solid var(--panel-2); background:var(--panel); color:var(--text) }
.chat-avatar,.author.linklike{ background:none; border:0; padding:0; color:inherit; font:inherit; cursor:pointer }
.author.linklike:hover{ text-decoration:underline; transform: scale(1.02); }

/* -----------------------------------------------------
   13) TOGGLES & CTA GRID (left)
----------------------------------------------------- */
.left-panel .cta-row{ display:flex; gap:10px }
.left-panel .cta-row #toggleSidebar{ aspect-ratio: 1/1 };
.left-panel .cta-row #resetLeftCards{ width: 100% };
.left-panel .cta{ width:100%; display:inline-flex; justify-content:center; align-items:center; padding:12px 10px; border-radius:10px }

.toggles-panel{ margin-top:12px; border:1px solid var(--panel-2); border-radius:16px; background:linear-gradient(260deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); padding:20px;transition: opacity .2s ease;}
.toggles-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px }
.toggles-title{ font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted) }
.toggles-actions{ margin-left:auto; display:flex; gap:8px }
.toggles-grid{ display:grid; grid-template-columns:repeat(2, minmax(80px,1fr)); gap:8px }
.toggle-row{ display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--panel-2); border-radius:10px; background:var(--panel) }
.toggle-row input[type="checkbox"]{ transform:translateY(1px) }
.toggle-row span{ font-weight:600 }

/* -----------------------------------------------------
   14) CUSTOM SELECT UI
----------------------------------------------------- */
.ui-select{ position:relative; width:8rem; font-weight:600 }
.ui-select.seamless .ui-select__list{ top:100%; margin-top:-1px }
.ui-select.seamless .ui-select__button[aria-expanded="true"]{ border-bottom-left-radius:8px; border-bottom-right-radius:8px }

.ui-select__button{
  height:2.5rem; width:100%; border-radius:10px; border:1px solid var(--panel-2);
  background:linear-gradient(180deg, var(--panel), var(--panel-2)); color:var(--text);
  padding:0 12px; text-align:left; cursor:pointer; outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 6px 16px rgba(0,0,0,.25);
  transition:border-color .15s ease, box-shadow .15s ease, transform .06s ease;
}
.ui-select__button:hover{ border-color:color-mix(in srgb, var(--accent) 30%, rgba(255,255,255,.18)); box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 8px 24px color-mix(in srgb, var(--accent) 18%, transparent) }
.ui-select__button[aria-expanded="true"]{ border-color:var(--accent-2); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), inset 0 1px 0 rgba(255,255,255,.05) }
.ui-select__button::after{ content:""; position:absolute; right:12px; top:50%; width:14px; height:14px; transform:translateY(-50%); background-repeat:no-repeat; background-size:14px 14px; background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%239AA0A6' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") }
.ui-select__button[aria-expanded="true"]::after{ background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffb84a' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") }

.ui-select__list{
  position:absolute; z-index:50; left:0; right:0; top:calc(100% + 6px); max-height:260px; overflow:auto;
  border-radius:12px; border:1px solid var(--panel-2);
  background:linear-gradient(180deg, rgba(14,16,20,.95), rgba(14,16,20,.88));
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  box-shadow:0 14px 34px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04) inset;
  padding:6px; display:none;
}
.ui-select.open .ui-select__list{ display:block }
.ui-select__option{ padding:8px 10px; border-radius:8px; color:var(--text); cursor:pointer; font-size:.95rem; line-height:1.2 }
.ui-select__option:hover{ background:rgba(255,184,74,.18) }
.ui-select__option[aria-selected="true"]{ background:linear-gradient(180deg, var(--accent), var(--accent-2)); color:#0b0d11; font-weight:800 }

.select-visually-hidden{ position:absolute !important; inset:0 auto auto 0 !important; width:1px !important; height:1px !important; padding:0 !important; border:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important; white-space:nowrap !important }

/* -----------------------------------------------------
   15) UPGRADE VIEW & ANIMATIONS
----------------------------------------------------- */
.up-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:12px; align-items:center }
.up-card{ position:relative; border:1px solid var(--panel-3); border-radius:12px; padding:10px; display:grid; grid-template-rows:90px auto; background:radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.04), rgba(0,0,0,.12)); overflow:hidden }
.up-card .thumb{ display:grid; place-items:center; border-radius:8px; background:rgba(255,255,255,.04) }
.up-card .thumb img{ width:84px; height:84px; object-fit:contain; filter:drop-shadow(0 6px 18px rgba(0,0,0,.35)) }
.up-card .label{ font-weight:700; font-size:.95rem; line-height:1.2; margin-top:6px }
.up-card .qty{ position:absolute; top:8px; right:8px; font-weight:800; font-size:.8rem; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.14); padding:4px 6px; border-radius:7px }
.up-card.consume .thumb{ filter:brightness(1.12) }
.up-card.consume::after{ content:''; position:absolute; inset:0; background:radial-gradient(40% 40% at 50% 0%, rgba(255,184,74,.15), transparent); pointer-events:none; animation:upPulse .9s ease-in-out infinite }
@keyframes upPulse{ 0%,100%{opacity:.5} 50%{opacity:1} }

#upStage{ position:relative; min-height:220px; display:grid; place-items:center }
.up-funnel{ width:180px; height:180px; border-radius:50%; position:relative; background:radial-gradient(60% 60% at 50% 40%, rgba(255,184,74,.08), rgba(0,0,0,.5)); box-shadow:inset 0 0 30px rgba(255,184,74,.08), 0 16px 60px rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.08); overflow:hidden }
.up-spinner{ position:absolute; inset:0; border-radius:50%; -webkit-mask:radial-gradient(farthest-side, transparent 62%, black 63%); mask:radial-gradient(farthest-side, transparent 62%, black 63%) }
.up-spinner::before{ content:''; position:absolute; inset:-2px; border-radius:50%; background:conic-gradient(from 0deg, var(--accent) 0deg, var(--accent) 120deg, transparent 160deg 360deg); animation:spin 1.15s linear infinite; opacity:.85 }
@keyframes spin{ to{ transform:rotate(360deg) } }
.up-sparks{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(4px 4px at 20% 30%, rgba(255,255,255,.6), transparent 60%), radial-gradient(6px 6px at 70% 60%, rgba(255,184,74,.7), transparent 60%), radial-gradient(3px 3px at 40% 70%, rgba(255,255,255,.5), transparent 60%); filter:blur(.4px); animation:twinkle 1.6s ease-in-out infinite; opacity:.6 }
@keyframes twinkle{ 0%,100%{transform:scale(.98); opacity:.55} 50%{transform:scale(1.02); opacity:.85} }
.up-actions{ display:flex; gap:8px; justify-content:center; margin:12px 0 1rem }
.up-result{ display:grid; place-items:center; text-align:center; gap:6px; margin:2rem 0 1rem }
/* Start size for the result */
.up-result .up-result-thumb {
  width: 180px;
  height: 180px;
  border-radius: 16px;
  border: 1px solid var(--panel-3);
  background: rgba(255,255,255,.04);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 50px rgba(0,0,0,.35);
  animation: growThumb 0.4s ease-out forwards;
}

.up-result .up-result-thumb img {
  width: 160px;
  height: 160px;
  object-fit: contain;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.4));
  animation: growImg 0.3s ease-out forwards;
}

/* Animations */
@keyframes growThumb {
  from { width: 180px; height: 180px; }
  to   { width: 380px; height: 380px; }
}

@keyframes growImg {
  from { width: 160px; height: 160px; }
  to   { width: 360px; height: 360px; }
}

.up-result .up-result-name{ font-weight:900; font-size:1.15rem ;margin-top: 24px;}
.up-result .up-result-rare{ font-weight:700; font-size:.9rem; opacity:.75 }

/* Fly clones */
.fly-clone{ size-adjust:2; position:fixed; z-index:9998; pointer-events:none; will-change:transform, opacity; transition:transform .6s cubic-bezier(.25,.9,.2,1), opacity .6s ease; transform-origin:center; opacity:1 }
/* Fly clones – show the actual skin image */
.fly-clone img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
  pointer-events: none;
}

/* keep your animation on vanish */
#upSelGridPanel {
  transition: opacity .25s ease, transform .25s ease;
}
#upSelGridPanel.vanish {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;    /* blocks clicks while animating */
  /* NO display:none here */
}

/* this one is added after the fade completes */
#upSelGridPanel.vanish-out {
  display: none;
}

/* -----------------------------------------------------
   16) OVERLAYS
----------------------------------------------------- */
#progressOverlay{ position:fixed; inset:0; display:grid; place-items:center; z-index:9999; background:rgba(10,10,14,.58); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px) }
#progressOverlay .progress-card{ width:min(520px, 92vw); padding:18px 18px 14px; border-radius:16px; background:rgba(22,24,29,.92); box-shadow:0 10px 40px rgba(0,0,0,.35) }
.progress-title{ font-weight:700; margin-bottom:10px }
.steps{ list-style:none; margin:0 0 10px; padding:0; display:flex; gap:8px; flex-wrap:wrap }
.steps li{ display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.04); font-size:.9rem }
.steps li.done{ background:rgba(76,175,80,.15) }
.steps .dot{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.35) }
.steps li.done .dot{ background:#4caf50 }
.bar{ width:100%; height:6px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden }
.bar .bar-fill{ height:100%; background:var(--accent, #6ae1ff); transition:width .25s ease }

/* -----------------------------------------------------
   17) RESPONSIVE (lg=1340, md=980, sm=760, xs=380)
----------------------------------------------------- */

/* LG and below: collapse to single-area content */
@media (min-width:3000px){
  .grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(12%,1fr)); gap:8px }
  .item .price{ position:absolute; top:8px; left:4px; font-weight:800; font-size:16px; line-height:1; padding:4px 6px; text-shadow:0 1px 0 rgba(0,0,0,.5); opacity:1 }
  .item .label{font-size: 16px;}
}

@media (min-width:2561px){
  .grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(13%,1fr)); gap:8px }
  .item .price{ position:absolute; top:8px; left:4px; font-weight:800; font-size:16px; line-height:1; padding:4px 6px; text-shadow:0 1px 0 rgba(0,0,0,.5); opacity:1 }
  .item .label{font-size: 16px;}
}

@media (max-width:1920px){
  .grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(19%,1fr)); gap:8px }
}

@media (max-width:1340px){
  .brand{ display:none }
  .mainnav{ gap:6px; overflow: visible; -webkit-overflow-scrolling:touch }
  .nav-pill{ min-width:auto; padding:0 12px }
  .panel{ min-height: 300px; }
  .app-shell{ grid-template-columns:1fr !important; grid-template-rows:1fr !important; padding:74px 12px 12px !important; overflow:visible }
  .left-col,#leftCardsMount,.left-panel,.left-card,.right-rail{ display: none !important;}
  .viewport{ border-radius:12px; height:100% }
  .view{ padding:14px }
  .grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(24%,1fr)); gap:8px }
}

/* MD and below (≤980px): inventory stacks; transfer form wraps */
@media (max-width:980px){
  .view#inventory .panels{
    grid-template-columns:1fr; grid-template-rows:auto; gap:12px;
    grid-template-areas:
      "skins"
      "skinsFooter"
      "cardsets";
  }
  #invSkinsPanel{ grid-area:skins }
  #invSkinsFooter{ grid-area:skinsFooter }
  #invCardSetsPanel{ grid-area:cardsets }
  #invRightCol{ display:contents }

  .transfer-form{ grid-template-columns:1fr 1fr }
  .transfer-form .btn{ grid-column:1 / -1 }
}

/* SM and below (≤760px): single-column panels (trade/inventory), wallet actions single col */
@media (max-width:760px){
  .view#trade .panels, .view#inventory .panels{ grid-template-columns:1fr }
  .wallet-view-actions{ grid-template-columns:1fr }
  #lcSendForm{ grid-template-columns:1fr }
  #lcSendForm .btn{ width:100% }
  .grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:8px }
}

/* XS and below (≤380px): ultra small spacing tweaks */
@media (max-width:380px){
  .app-shell{ padding:70px 8px 8px !important }
  .topbar{ padding:8px 12px }
  .viewport{ min-height:calc(100dvh - 70px - 8px) }
}

/* -----------------------------------------------------
   18) LINK STYLES & HOVER FIXES
----------------------------------------------------- */

.meta-click{
   color:var(--muted); 
   font-weight:700;
   border-bottom:1px dashed var(--panel-2);
}

.meta-click:hover{
  text-decoration: none;
  color: var(--text);
  border-bottom:1px dashed var(--accent);
  cursor: pointer;
  transition: color .2s ease, font-weight .2s ease;
}

/* Inspect link under the price */
.item .inspect-link{
  position:absolute;
  top: 28px;           /* just below .price (which sits at top:8px) */
  left: 4px;
  display:inline-flex;
  align-items:center;
  font-size: 12px;
  line-height: 1;
  opacity:.7;
  padding:4px 6px;
  text-decoration: none;
}
.item .inspect-link:hover{
  opacity:1;
  transform: translateY(-1px);
}
.danger{
  color: var(--bad);
  border-color: var(--bad);
}

/* -----------------------------------------------------
   19) GAME SELECTOR
----------------------------------------------------- */

.game-selector {
  padding: 12px 12px;
  animation: fadeIn 0.3s ease;
  display: flex;
  justify-content: center;
  height: 100%;
}

.game-selector.panel {
  background: #00000000;
  border: 0;
}

.selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  max-width: 1200px;
  width: 100%;
}

.game-card {
  border: 1px solid var(--panel-2);
  border-radius: 16px;
  padding: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
  min-height: 380px;
}

.game-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,184,74,.08), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.game-card:not(.disabled):hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
  border-color: var(--accent);
  cursor: pointer;
}

.game-card:not(.disabled):hover::before {
  opacity: 1;
}

.game-card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.game-card.disabled::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(0,0,0,.1) 10px,
    rgba(0,0,0,.1) 20px
  );
  pointer-events: none;
}

.game-icon {
  font-size: 56px;
  text-align: center;
  line-height: 1;
  text-shadow: 0 4px 12px rgba(0,0,0,.4);
  margin-bottom: 8px;
}

.game-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.game-title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.game-desc {
  color: var(--muted);
  line-height: 1.5;
  font-size: 0.95rem;
}

.game-meta {
  display: flex;
  gap: 16px;
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 600;
  margin-top: 8px;
}

.game-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.game-play-btn {
  width: 100%;
  height: 48px;
  font-size: 1rem;
  margin-top: 8px;
}

.pkr-root {
  animation: fadeIn 0.3s ease;
}

/* Back to Games Button in Poker Lobby */
.pkr-back-to-games {
  margin-bottom: 0px;
}

.pkr-back-to-games .btn {
  display: inline-flex;
  align-items: center;
  width: 100%;
  gap: 8px;
  border: 2px solid;
  justify-content: space-between;
}

/* Responsive adjustments */
@media (max-width: 760px) {
  .selector-grid {
    grid-template-columns: 1fr;
  }
  
  .game-selector {
    padding: 12px 12px;
    overflow-y: scroll;
  }
}

/* Game Rules Accordion */
.game-rules-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

.game-rule-accordion-item {
  background: rgba(20, 22, 28, 0.6);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
}

.game-rule-accordion-item:hover {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(20, 22, 28, 0.8);
}

.game-rule-accordion-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease;
}

.game-rule-accordion-icon {
  font-size: 32px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 211, 77, 0.1);
  border-radius: 8px;
  flex-shrink: 0;
}

.game-rule-accordion-title {
  flex: 1;
}

.game-rule-accordion-title h3 {
  margin: 0 0 4px 0;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.game-rule-accordion-title p {
  margin: 0;
  font-size: 14px;
  color: #999;
}

.game-rule-accordion-caret {
  font-size: 20px;
  color: var(--accent);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.game-rule-accordion-item.open .game-rule-accordion-caret {
  transform: rotate(90deg);
}

.game-rule-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.game-rule-accordion-body {
  padding: 0 24px 24px 24px;
  color: #ccc;
  line-height: 1.6;
}

.game-rule-accordion-body h4 {
  margin: 24px 0 12px 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
}

.game-rule-accordion-body ul {
  margin: 12px 0;
  padding-left: 24px;
}

.game-rule-accordion-body li {
  margin: 8px 0;
}

.game-rule-accordion-body .verification-section {
  margin-top: 32px;
  padding: 24px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(255, 211, 77, 0.2);
}

.game-rule-accordion-body .verification-section h4 {
  margin-top: 0;
}

/* Coming Soon Badge */
.coming-soon-badge {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.center {
  text-align: center;
  align-self: center;
}

/* -----------------------------------------------------
   20) SIDEBAR SYSTEM - FIREFOX COMPATIBLE
----------------------------------------------------- */

/* Left column: HORIZONTAL flex container */
.left-col {
  display: flex;
  flex-direction: row;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  gap: 16px;
  transform: translateZ(0); /* GPU acceleration for Firefox */
}

.left-col.collapsed {
  gap: 0;
}

/* Left strip: contains toggle + icons vertically */
.sidebar-left-strip {
  flex: 0 0 44px;
  width: 44px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transform: translateZ(0); /* GPU acceleration */
}

/* Toggle button - fixed at top of strip */
.sidebar-toggle-btn {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--panel-2);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 1.3rem;
  color: var(--muted);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}

.sidebar-toggle-btn:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08));
  border-color: var(--accent);
  color: var(--accent);
}

.sidebar-toggle-btn i {
  transition: transform 0.3s ease;
}

/* Icon bar - in the strip below toggle */
.sidebar-icons {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  opacity: 1;
  width: 44px;
  overflow: visible;
}

/* Icon buttons - FIXED SIZE */
.sidebar-icon-btn {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--panel-2);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 1.2rem;
  color: var(--muted);
}

.sidebar-icon-btn:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border-color: var(--accent);
  color: var(--accent);
  transform: scale(1.08);
}

.sidebar-icon-btn.active {
  background: linear-gradient(180deg, rgba(255,211,77,.15), rgba(255,211,77,.08));
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 12px rgba(255,211,77,.2);
}

/* Main sidebar content - beside the strip - FIREFOX FIXED */
.sidebar-content {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  max-width: var(--left-max);
  opacity: 1;
  transition: opacity 0.3s ease, max-width 0.3s ease;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  transform: translateZ(0); /* GPU acceleration */
}

/* When collapsed: hide content completely - FIREFOX COMPATIBLE */
.left-col.collapsed .sidebar-content {
  opacity: 0;
  max-width: 0;
  flex: 0 0 0;
  pointer-events: none;
  overflow: hidden;
}

.left-col.collapsed .sidebar-toggle-btn i {
  transform: rotate(180deg);
}

/* Empty state when no cards are active */
.sidebar-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  height: 100%;
  opacity: 0.8;
}

.sidebar-empty-state .empty-icon {
  font-size: 4rem;
  line-height: 1;
  margin-bottom: 16px;
  opacity: 0.6;
}

.sidebar-empty-state .empty-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text);
}

.sidebar-empty-state .empty-text {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.5;
  max-width: 280px;
}

.meta-click.nothing{
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 8;
}

/* Game Helper Card Styles */
.game-helper-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 0.9rem;
}

.helper-empty {
  text-align: center;
  padding: 0px 16px 24px 16px;
}

.helper-icon {
  font-size: 3rem;
  margin-bottom: 12px;
  opacity: 0.5;
}

.helper-title {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.helper-section {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 10px;
}

.helper-section-title {
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 8px;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Hand Rankings */
.hand-rankings {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rank-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  border-radius: 4px;
  transition: background 0.2s;
}

.rank-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  font-weight: 700;
  font-size: 0.75rem;
}

.rank-name {
  font-size: 0.85rem;
}

/* Stats */
.helper-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

.stat-label {
  opacity: 0.7;
  font-size: 0.85rem;
}

.stat-value {
  font-weight: 700;
  font-size: 0.9rem;
}

/* Tips */
.helper-tips {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tip-item {
  padding: 6px 8px;
  background: rgba(255, 211, 77, 0.05);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  font-size: 0.85rem;
  line-height: 1.4;
}

/* ===== RESPONSIVE - HIDE SIDEBAR ON MOBILE ===== */
@media (max-width: 1340px) {
  .left-col {
    display: none !important;
  }
}

/* Quest Grid */
.quests-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(550px, 1fr));
  gap: 16px;
  padding: 4px;
}

@media (max-width: 768px) {
  .quests-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 769px) and (max-width: 1200px) {
  .quests-grid {
    grid-template-columns: 1fr 1fr ;
  }
}

@media (min-width: 1201px) {
  .quests-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* --- Quests UI --- */

/* --- Quests UI --- */

.quest-card {
  background: rgba(14, 16, 20, .55);
  border: 1px solid var(--panel-2);;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease, filter .12s ease;
}
.quest-card:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,0.2);}
.quest-card.locked { opacity: .6; filter: grayscale(.2); outline:1px dashed rgba(255,255,255,.2) }
.quest-card.completed { outline: 1px solid var(--accent); }

.quest-head {
  display: flex; 
  align-items: flex-start; 
  gap: 12px; 
  margin-bottom: 8px;
}

.quest-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,211,77,0.1);
  border: 1px solid rgba(255,211,77,0.2);
  border-radius: 10px;
  font-size: 1.8rem;
  line-height: 1;
}

.quest-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.3));
}

.quest-head-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.quest-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.quest-title {
  font-size: 1.05rem; 
  font-weight: 700; 
  letter-spacing: .2px;
  line-height: 1.2;
}

.quest-badge {
  flex: 0 0 auto;
  font-size: .7rem; 
  padding: 3px 8px; 
  border-radius: 999px;
  background: rgba(255,255,255,0.08); 
  border: 1px solid rgba(255,255,255,0.14);
  text-transform: uppercase; 
  letter-spacing: .6px;
  white-space: nowrap;
}
.quest-badge.ok { 
  background: rgba(255,211,77,0.12); 
  border-color: var(--accent); 
  color: var(--accent); 
}

.quest-desc { 
  color: rgba(255,255,255,.5); 
  font-size: .75rem; 
  line-height: 1.3;
  margin: 0;
}

.quest-rewards { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 8px; 
  margin-top: 10px; 
}
.quest-rewards .reward {
  font-size: .8rem; 
  padding: 4px 8px; 
  border-radius: 10px;
  background: rgba(255,255,255,0.06); 
  border: 1px solid var(--accent);
  color: var(--accent);
}

/* Task list inside a quest card */
.quest-tasks { 
  margin-top: 10px; 
  display: flex;
  flex-direction: column;
  gap: 8px; 
  height: 174px;
  overflow: auto;
}

.quest-task {
  padding: 10px 12px; 
  border-radius: 12px;
  background: rgba(255,255,255,0.04); 
  border: 1px solid rgba(255,255,255,0.12);
  transition: all 0.2s ease;
  position: relative;
}

.quest-task.completed {
  background: rgba(255,211,77,0.12);
  border-color: var(--accent);
}

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

.task-info {
  flex: 1;
  min-width: 0;
}

.task-title { 
  font-size: .9rem; 
  font-weight: 600; 
  color: rgba(255,255,255,0.95);
  margin-bottom: 4px;
  display: none;
}

.task-desc { 
  font-size: .8rem; 
  color: rgba(255,255,255,0.7); 
  line-height: 1.4;
  margin: 0;
}

.task-xp-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 8px;
  background: rgba(255, 211, 77, 0.00);
  border: 1px solid rgba(255,211,77,0.25);
  font-size: .75rem;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

.quest-task.completed .task-xp-badge {
  background: rgba(255,211,77,0.12);
  border-color: rgba(255,211,77,0.25);
  color: var(--accent);
}

.task-progress {
  display: flex;
  align-items: center;
  gap: 10px;
}

.task-progress .bar {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  overflow: hidden;
}

.task-progress .fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.3s ease;
  border-radius: 999px;
}

.quest-task.completed .task-progress .fill {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.task-progress .label {
  font-size: .8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  min-width: 45px;
  text-align: right;
}

/* toggle button look/feel */
.toggle-locked {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .6rem;
  border-radius: .6rem;
  line-height: 1;
}

/* icon sizing + subtle pop on toggle */
.toggle-locked svg {
  width: 20px;
  height: 20px;
  transition: transform .25s ease;
}
.toggle-locked.animate svg {
  transform: scale(1.15);
}

/* shackle “opening” animation */
.toggle-locked .shackle {
  transform-origin: 12px 8px;            /* hinge point */
  transition: transform .25s ease;
}
.toggle-locked.open .shackle {
  transform: translate(2px,-4px) rotate(-24deg); /* looks like 🔓 */
}

/* optional: tiny body bump when toggling */
.toggle-locked.animate .body,
.toggle-locked.animate .body-outline {
  animation: lock-bump .25s ease;
}
@keyframes lock-bump {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-1px); }
  100% { transform: translateY(0); }
}

/* accessibility helper for screen-readers */
.sr-only {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .toggle-locked svg,
  .toggle-locked .shackle,
  .toggle-locked.animate .body,
  .toggle-locked.animate .body-outline {
    transition: none !important;
    animation: none !important;
  }
}

/* --- QUESTS VIEW (independent scroller inside the panel) --- */
.view#quests{ display:none; overflow:hidden; }
.view#quests.active{ display:flex; flex-direction:column; }

/* keep the page header row fixed while panel scrolls */
.view#quests .toolbar{ flex:0 0 auto; }

/* make only the inner panel scroll */
.view#quests .panel{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}

/* if the quests panel itself needs flex layout */
#invQuestPanel{ display:flex; flex-direction:column; }

/* Keep incomplete tasks first; completed ones sink to the bottom */
.quest-tasks .quest-task { order: 1; }
.quest-tasks .quest-task.completed { order: 2; }

/* Small “slide” nudge when a task flips to completed */
.quest-tasks .quest-task.completed {
  animation: quest-task-slide .25s ease;
}
@keyframes quest-task-slide {
  from { transform: translateY(-8px); opacity: .6; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Soft nudge when a quest becomes completed */
.quest-card.completed {
  animation: quest-card-slide .25s ease;
}

@keyframes quest-card-slide {
  from { transform: translateY(-6px); opacity: .7; }
  to   { transform: translateY(0);    opacity: 1; }
}