html:root {
 --bg:#070707!important; --bg-deep:#030303!important; --bg-elevated:rgba(12,12,12,.82)!important;
 --surface:rgba(12,12,12,.65)!important; --surface-solid:rgba(12,12,12,.72)!important;
 --surface-soft:rgba(255,255,255,.035)!important; --surface-hover:rgba(255,255,255,.07)!important;
 --border:rgba(255,255,255,.12)!important; --border-strong:rgba(255,255,255,.22)!important;
 --text:#f6f6f6!important; --text-soft:#d0d0d0!important; --muted:#a0a0a0!important;
 --shadow:0 24px 70px rgba(0,0,0,.4)!important;
}
:root body { background:radial-gradient(ellipse at 85% 15%,rgba(255,255,255,.025),transparent 45%),#050505; background-attachment:fixed; }
:root .app-shell { background:transparent; }
:root .app-shell::before { display:block; background:#fff; opacity:.075; }
:root :is(.topbar,.pet-card,.player-card,.egg-card,.offer-card,.trade-card,.bounty-card,.leaderboard-card,.offer-builder,.messages-shell,.calculator-panel,.pet-profile-left,.pet-profile-right,.pets-controls) {
 background:radial-gradient(circle at 88% 20%,rgba(255,255,255,.055),transparent 45%),rgba(10,10,10,.72);
 border:1px solid rgba(255,255,255,.12);
 backdrop-filter:blur(18px) saturate(125%); -webkit-backdrop-filter:blur(18px) saturate(125%);
 box-shadow:0 24px 70px rgba(0,0,0,.4); 
}
:root .topbar { background:rgba(10,10,10,.7); backdrop-filter:blur(20px) saturate(130%); -webkit-backdrop-filter:blur(20px) saturate(130%); border-radius:21px; }
:root .pets-controls { border-radius:20px; }
:root :is(.mobile-menu,.nav-dropdown-menu,.search-results,.global-search-results,.account-menu,.site-select-options,.inventory-tooltip) {
 background:rgba(12,12,12,.94); border-color:rgba(255,255,255,.12);
 backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
 box-shadow:0 22px 48px rgba(0,0,0,.42);
}
:root :is(.global-search,.data-search,.pets-search,.offers-search,.site-select-trigger,.offer-builder-side,.offer-card-sides section,.trade-pane,.inventory-item,.pets-toolbar,.players-toolbar,.offers-feed-heading) {
 background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.1);
}
:root .pet-card:not([data-variant="shiny"]):not([data-variant="shinymythic"]) .pet-artwork { background:radial-gradient(ellipse at 50% 45%,rgba(255,255,255,.035),transparent 72%); }
:root :is(.pet-card-copy,.pet-info,.pet-card-footer) { background-color:transparent; }
:root .offer-pet-card[data-variant="normal"] { background:rgba(255,255,255,.025); }
:root :is(.pet-card,.player-card,.egg-card):hover { border-color:rgba(255,255,255,.24); box-shadow:0 24px 70px rgba(0,0,0,.4); }
:root .nav-link:hover, :root .nav-link.is-active { background:rgba(255,255,255,.08); }
html[data-theme="light"]:root {
 --bg:#ebebeb!important; --bg-deep:#e3e3e3!important; --bg-elevated:rgba(255,255,255,.85)!important;
 --surface:rgba(255,255,255,.65)!important; --surface-solid:rgba(255,255,255,.72)!important; --surface-soft:rgba(0,0,0,.025)!important; --surface-hover:rgba(0,0,0,.055)!important;
 --border:rgba(0,0,0,.12)!important; --border-strong:rgba(0,0,0,.2)!important;
 --text:#171717!important; --text-soft:#454545!important; --muted:#737373!important;
}
html[data-theme="light"] body { background:#ebebeb; }
html[data-theme="light"] .app-shell::before { background:#000; opacity:.055; }
html[data-theme="light"] :is(.topbar,.pet-card,.player-card,.egg-card,.offer-card,.trade-card,.bounty-card,.leaderboard-card,.offer-builder,.messages-shell,.calculator-panel,.pet-profile-left,.pet-profile-right,.pets-controls) {
 background:radial-gradient(circle at 88% 20%,rgba(255,255,255,.55),transparent 45%),rgba(255,255,255,.64);
 border-color:rgba(255,255,255,.65); box-shadow:0 24px 70px rgba(0,0,0,.1);
}
@media(max-width:760px) { :root :is(.pet-card,.player-card,.egg-card,.offer-card,.trade-card) { backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } }

/* Render expensive filters only for cards near the viewport. */
:root :is(.pet-card,.player-card,.egg-card,.offer-card,.trade-card,.bounty-card) {
 backdrop-filter:none!important; -webkit-backdrop-filter:none!important;
 transition:border-color .16s ease; 
}
:root :is(.pet-card,.player-card,.egg-card,.offer-card,.trade-card,.bounty-card).glass-visible {
 backdrop-filter:blur(10px)!important; -webkit-backdrop-filter:blur(10px)!important;
}
:root :is(.pet-card,.player-card,.egg-card):hover { transform:none; }
:root .app-shell::before { inset:0; transform:none; }
@media(max-width:760px){
 :root :is(.pet-card,.player-card,.egg-card,.offer-card,.trade-card,.bounty-card).glass-visible {backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important;}
}

/* Keep card and artwork geometry stable during hover, focus and image loading. */
:root :is(.pet-card,.player-card,.egg-card,.hat-card,.offer-card,.trade-card,.bounty-card),
:root :is(.pet-card,.player-card,.egg-card,.hat-card,.offer-card,.trade-card,.bounty-card):is(:hover,:focus-visible) { transform:none!important; }
:root .pet-card .pet-artwork-image,
:root :is(.egg-card,.hat-card) .catalog-art-image { transform:none!important; transition:opacity .18s ease!important; }
:root .pet-card { contain-intrinsic-size:auto 270px; }

html[data-theme="light"] :is(.mobile-menu,.nav-dropdown-menu,.search-results,.global-search-results,.account-menu,.site-select-options,.inventory-tooltip) { background:rgba(255,255,255,.94); border-color:rgba(0,0,0,.12); }

/* A short, predictable lift settles once; artwork remains fixed inside cards. */
@media(hover:hover) and (pointer:fine) {
 :root :is(.pet-card,.player-card,.egg-card,.hat-card,.offer-card,.trade-card,.bounty-card) {
  transition:transform .22s cubic-bezier(.2,.7,.2,1),border-color .22s ease,box-shadow .22s ease;
 }
 :root :is(.pet-card,.player-card,.egg-card,.hat-card,.offer-card,.trade-card,.bounty-card):is(:hover,:focus-visible) {
  transform:translateY(-2px)!important;
  border-color:rgba(255,255,255,.27);
  box-shadow:0 16px 40px rgba(0,0,0,.32),0 0 0 1px rgba(255,255,255,.035);
 }
}
:root .home-page { padding-top:18px; }
@media(max-width:760px) { :root .home-page { padding-top:12px; } }
@media(prefers-reduced-motion:reduce) {
 :root :is(.pet-card,.player-card,.egg-card,.hat-card,.offer-card,.trade-card,.bounty-card) { transition:none!important; }
 :root :is(.pet-card,.player-card,.egg-card,.hat-card,.offer-card,.trade-card,.bounty-card):is(:hover,:focus-visible) { transform:none!important; }
}

/* The home hero uses the same smoked glass as the other main panels. */
:root .home-hero {
 background:radial-gradient(circle at 88% 20%,rgba(255,255,255,.055),transparent 45%),rgba(10,10,10,.72);
 border-color:rgba(255,255,255,.12);
 backdrop-filter:blur(18px) saturate(125%); -webkit-backdrop-filter:blur(18px) saturate(125%);
 box-shadow:0 24px 70px rgba(0,0,0,.4);
}
:root .home-clock { background:rgba(255,255,255,.025); }
html[data-theme="light"] .home-hero {
 background:radial-gradient(circle at 88% 20%,rgba(255,255,255,.55),transparent 45%),rgba(255,255,255,.64);
 border-color:rgba(255,255,255,.65); box-shadow:0 24px 70px rgba(0,0,0,.1);
}

/* Home feed cards and statistics share the same frosted panel treatment. */
:root :is(.latest-pet,.home-stats,.home-bounty) {
 background:radial-gradient(circle at 88% 20%,rgba(255,255,255,.055),transparent 45%),rgba(10,10,10,.72);
 border-color:rgba(255,255,255,.12); box-shadow:0 24px 70px rgba(0,0,0,.4);
}
:root .latest-pet { backdrop-filter:none; -webkit-backdrop-filter:none; transition:transform .22s cubic-bezier(.2,.7,.2,1),border-color .22s ease; }
:root .latest-pet.glass-visible,:root .home-stats { backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
:root .home-bounty { backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
:root .stat-item { background:transparent; }
:root :is(.latest-pet-image,.home-member-card) { background:rgba(255,255,255,.025); }
html[data-theme="light"] :is(.latest-pet,.home-stats,.home-bounty) {
 background:radial-gradient(circle at 88% 20%,rgba(255,255,255,.55),transparent 45%),rgba(255,255,255,.64);
 border-color:rgba(255,255,255,.65); box-shadow:0 24px 70px rgba(0,0,0,.1);
}
@media(max-width:760px) { :root .latest-pet.glass-visible { backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } }
@media(prefers-reduced-motion:reduce) { :root .latest-pet { transition:none; } :root .latest-pet:hover { transform:none; } }