/* ==========================================================================
   SAB Game UI — Steal a Brainrot Helper skin (v1)
   Look & feel of the Roblox game: chunky outlined panels, bevelled buttons,
   outlined titles, a conveyor belt of real brainrots, HUD header, mobile tab bar.
   Loaded after every other stylesheet; pure presentation, no layout changes
   beyond the header breakpoint and the mobile tab bar.
   ========================================================================== */

/* ---------- 1. Palette (re-themes every page that uses the shared variables) ---------- */
:root{
  --gu-ink:#07021a;
  --gu-ink-2:#12082e;
  --gu-panel-top:#35217a;
  --gu-panel-bot:#221349;
  --gu-yellow:#ffd23f;
  --gu-orange:#ff9f1a;
  --gu-green:#3ef07a;
  --gu-green-d:#12b84a;
  --gu-blue:#5b8cff;
  --gu-pink:#ff3d8b;
  --gu-cyan:#33d4ff;

  --bg:#12082e; --surface:#241552; --surface2:#2f1d68;
  --border:#07021a; --border2:#4b2fa3;
  --accent:#ff3d8b; --accent2:#8b5cf6; --accent3:#ffd23f;
  --green:#3ef07a; --cyan:#33d4ff; --blue:#5b8cff;
  --text:#ffffff; --muted:#c2b9f0; --muted2:#9a8fd4;
  --common:#d3d3df; --rare:#4aa8ff; --epic:#c15bff; --legendary:#ffd400;
  --mythic:#ff7a1a; --god:#ff4d6d; --secret:#2ef2ff; --og:#ffd23f;
  --r-sm:10px; --r-md:16px; --r-lg:24px;

  --refresh-bg:#12082e; --refresh-panel:#241552; --refresh-panel2:#2f1d68;
  --refresh-line:rgba(255,255,255,.16); --refresh-purple:#8b5cf6;
  --refresh-cyan:#33d4ff; --refresh-pink:#ff3d8b; --refresh-green:#3ef07a;
}

/* ---------- 2. Page background: night sky + Roblox "studs" ---------- */
html{
  background:
    radial-gradient(900px 520px at 12% -6%, rgba(255,61,139,.26), transparent 62%),
    radial-gradient(900px 620px at 92% 0%, rgba(51,212,255,.20), transparent 62%),
    linear-gradient(180deg,#1d0c4f 0,#12082e 38%,#0b0620 100%);
  background-attachment:fixed;
  min-height:100%;
}
html body,
body.sab-refresh-home,body.sab-refresh-brainrot,body.sab-refresh-calculator,
body.brainrots-directory-page,body.trade-values-refresh-page,body.exist-counts-refresh-page,
body.trade-modern-page,body.calculator-modern-page{
  background:transparent !important;
  font-family:Fredoka,"Nunito",system-ui,sans-serif;
  font-weight:500;
  color:#fff;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 12px 12px, rgba(255,255,255,.075) 3px, transparent 4.5px) 0 0/24px 24px;
  -webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.55) 60%,rgba(0,0,0,.2) 100%);
          mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.55) 60%,rgba(0,0,0,.2) 100%);
}
body{padding-bottom:env(safe-area-inset-bottom)}
::selection{background:var(--gu-yellow);color:var(--gu-ink)}
*{scrollbar-color:#6d4cd1 #12082e}

/* ---------- 3. Outlined game titles ---------- */
h1,h2,h3,h4,.section-title,.home-section-head h2,.brd-section-head h2,.tvr-section-head h2,.ecr-section-head h2{
  font-family:Fredoka,"Nunito",system-ui,sans-serif;
  font-weight:700;
  letter-spacing:.01em;
  color:#fff;
}
h1,h2,.section-title{
  -webkit-text-stroke:7px var(--gu-ink);
  paint-order:stroke fill;
  text-shadow:0 4px 0 var(--gu-ink),0 8px 18px rgba(0,0,0,.35);
}
h3,h4{
  -webkit-text-stroke:5px var(--gu-ink);
  paint-order:stroke fill;
  text-shadow:0 3px 0 var(--gu-ink);
}
/* gradient-clipped words become solid gold so the outline reads correctly */
.hi,h1 .hi,h1 em,h1 span.hi,.home-hero-refresh h1 .hi,[class*="gradient-text"]{
  background:none !important;
  -webkit-text-fill-color:var(--gu-yellow) !important;
  color:var(--gu-yellow) !important;
}
.home-kicker,.lg-kicker,.brd-section-kicker,.tvr-section-kicker,.ecr-section-kicker,[class*="kicker"],.eyebrow{
  display:inline-block;
  background:linear-gradient(180deg,#4ad7ff,#1b8fe0) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  border:3px solid var(--gu-ink) !important;
  border-radius:999px !important;
  padding:5px 14px !important;
  font-weight:700 !important;
  letter-spacing:.06em;
  text-shadow:0 2px 0 rgba(0,0,0,.45);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 4px 0 var(--gu-ink);
}
/* sub-lines inside h1 (gradient-clipped on many pages) become gold */
h1 span,h1 em,h1 b,h1 strong{
  background:none !important;-webkit-background-clip:border-box !important;background-clip:border-box !important;
  -webkit-text-fill-color:var(--gu-yellow) !important;color:var(--gu-yellow) !important;
}
h2 span,h2 em{-webkit-text-fill-color:currentColor}
p,li{line-height:1.55}
a{transition:color .15s}

/* ---------- 4. Panels: chunky outline, bevel and hard shadow ---------- */
.card,.ecard,.stat-pill,.stat-card,.calc-card,.result-box,.tip-card,.guide-card,.rank-card,.article-section,
.check-card,.answer-box,.formula-box,.intro-box,.tip-box,.warn-box,.timer-box,.time-unit,.community-card,
.brainrotdex-entry,.empty-state,.trait-box,.sim-card,.event-card,.gw-card,.mg-card,.mg-game-card,.mg-hero,
.latest-guide-card,.legal-card,.legal-box,.side-box,.active-code-card,.rng-new-card,.calc-discovery-card,
.tvr-card,.tvr-notice,.tvr-guide,.ecr-card,.ecr-rarest-card,.ecr-modal-panel,.brd-card,.brd-empty,.sv-hero,.sv-card,
.sv-stat,.sv-controls,.sv-dialog,.tmr-panel,.tmr-update,.tmr-reward,.tmr-sources,.sabh-personal-card,.sabh-brainrot-hub,
.sabh-search-dialog,.sabh-recent-item,.sabh-trend-item,.sabh-context-box,.dex-progress-card,.account-trade,
.detail-info,.detail-hero,.trade-card,.faq-item,.rel-link,.cyber-header,.br-row,.taco-br,.hunt-item,.loh-stat,
.loh-br-card,.loh-feedback,.loh-choice,.quiz-explain,.update-badge,.index-account-note,
.brd-search-wrap,.ecr-search-wrap,.tvr-search-wrap,.brd-sort-wrap,.ecr-select-wrap{
  background:linear-gradient(180deg,var(--gu-panel-top),var(--gu-panel-bot)) !important;
  border:3px solid var(--gu-ink) !important;
  border-radius:18px !important;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.14),
    inset 0 -4px 0 rgba(0,0,0,.22),
    0 6px 0 var(--gu-ink),
    0 18px 28px rgba(0,0,0,.32) !important;
  color:#fff;
}
.rel-link,.faq-item,.br-row,.hunt-item,.sabh-recent-item,.sabh-trend-item,.loh-lb-row{border-radius:14px !important}
.card,.ecard,.guide-card,.latest-guide-card,.tvr-card,.brd-card,.ecr-card,.sim-card,.event-card,.gw-card,.mg-game-card,.rel-link,.trade-card,.tip-card,.calc-discovery-card{
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s,filter .18s;
}
.card:hover,.ecard:hover,.guide-card:hover,.latest-guide-card:hover,.tvr-card:hover,.brd-card:hover,.ecr-card:hover,.sim-card:hover,
.event-card:hover,.gw-card:hover,.mg-game-card:hover,.rel-link:hover,.tip-card:hover,.calc-discovery-card:hover{
  transform:translateY(-5px) rotate(-.6deg);
  filter:brightness(1.08);
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.2),
    inset 0 -4px 0 rgba(0,0,0,.22),
    0 10px 0 var(--gu-ink),
    0 24px 34px rgba(0,0,0,.4),
    0 0 0 3px rgba(255,210,63,.55) !important;
}
.home-section,.brd-section,.tvr-section,.ecr-section,.rng-section{position:relative}
.stats-bar{
  background:linear-gradient(180deg,#2b1a69,#1b0f47) !important;
  border:3px solid var(--gu-ink) !important;
  border-radius:22px !important;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.12),0 6px 0 var(--gu-ink),0 18px 28px rgba(0,0,0,.3) !important;
}
.stat-pill .num,.stat-card .num,.stats-bar .num,.sv-stat strong,.loh-stat strong{
  color:var(--gu-yellow) !important;
  -webkit-text-fill-color:var(--gu-yellow) !important;
  text-shadow:0 3px 0 var(--gu-ink);
}
.stat-pill .lbl,.stat-card .lbl{color:#d9d1ff;letter-spacing:.08em;font-weight:600}

/* ---------- 5. Bevelled game buttons ---------- */
.home-hero-btn,.filter-btn,.pgbtn,.add-btn,.calc-btn,.mg-btn,.sv-btn,.ecr-filter,.ecr-btn,.brd-btn,.tvr-btn,
.value-type-btn,.rarity-tab,.mutation-tab,.missing-toggle,.quiz-option,.copy-btn,.gw-btn,.sabh-action,.sabh-watch-btn,
.sabh-claim-btn,.home-section-cta,.home-giveaway-cta,.blog-tab,.sab-picker-tab,.mg-tag,.lg-cta,
button.primary,a.primary,.btn,.button,
.nav-auth-link,.nav-community-actions a{
  font-family:Fredoka,"Nunito",system-ui,sans-serif !important;
  font-weight:700 !important;
  color:#fff !important;
  text-shadow:0 2px 0 rgba(0,0,0,.5);
  background:linear-gradient(180deg,#6f9bff 0,#3a63ea 100%) !important;
  border:3px solid var(--gu-ink) !important;
  border-radius:14px !important;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.38),0 5px 0 #0c1a6e,0 9px 14px rgba(0,0,0,.35) !important;
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
  cursor:pointer;
}
.home-hero-btn.primary,button.primary,a.primary,.btn.primary,.nav-auth-link.primary,.nav-community-actions a.primary,.gw-btn.primary,.sabh-claim-btn.primary,.sv-btn.primary,.add-btn,.calc-btn{
  background:linear-gradient(180deg,#5bff94 0,#1cc255 100%) !important;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.42),0 5px 0 #0a6b2c,0 9px 14px rgba(0,0,0,.35) !important;
}
.filter-btn.active,.rarity-tab.active,.mutation-tab.active,.ecr-filter.active,.blog-tab.active,.sab-picker-tab.active,.value-type-btn.active,.pgbtn.active,.tvr-btn.active{
  background:linear-gradient(180deg,#ffe56a 0,#ffa91f 100%) !important;
  color:#3a1d00 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.45);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.55),0 5px 0 #a24f00,0 9px 14px rgba(0,0,0,.35) !important;
}
.home-hero-btn:hover,.filter-btn:hover,.pgbtn:hover,.add-btn:hover,.calc-btn:hover,.mg-btn:hover,.sv-btn:hover,.ecr-filter:hover,.ecr-btn:hover,
.brd-btn:hover,.tvr-btn:hover,.rarity-tab:hover,.mutation-tab:hover,.quiz-option:hover,.copy-btn:hover,.gw-btn:hover,.sabh-action:hover,
button.primary:hover,a.primary:hover,.btn:hover,.nav-auth-link:hover,.lg-cta:hover{filter:brightness(1.12);transform:translateY(-2px)}
.home-hero-btn:active,.filter-btn:active,.pgbtn:active,.add-btn:active,.calc-btn:active,.mg-btn:active,.sv-btn:active,.ecr-filter:active,
.brd-btn:active,.tvr-btn:active,.quiz-option:active,.copy-btn:active,.gw-btn:active,button.primary:active,a.primary:active,.btn:active,.nav-auth-link:active{
  transform:translateY(3px);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.3),0 1px 0 var(--gu-ink),0 3px 6px rgba(0,0,0,.3) !important;
}
.home-search-launch,.search-box,.brd-search-wrap,.tvr-search-wrap,.ecr-search-wrap{
  border:3px solid var(--gu-ink) !important;border-radius:18px !important;
  background:linear-gradient(180deg,#160a3b,#0f0629) !important;
  box-shadow:inset 0 4px 0 rgba(0,0,0,.4),0 5px 0 var(--gu-ink) !important;
}
:focus-visible{outline:3px solid var(--gu-yellow);outline-offset:2px;border-radius:10px}

/* ---------- 6. Form controls ---------- */
input,select,textarea{
  font-family:Fredoka,"Nunito",system-ui,sans-serif;font-weight:600;color:#fff;
  background:linear-gradient(180deg,#160a3b,#0f0629) !important;
  border:3px solid var(--gu-ink) !important;border-radius:12px !important;
  box-shadow:inset 0 3px 0 rgba(0,0,0,.4);
}
input::placeholder,textarea::placeholder{color:#a79bde}
input:focus,select:focus,textarea:focus{border-color:var(--gu-yellow) !important;box-shadow:inset 0 3px 0 rgba(0,0,0,.4),0 0 0 3px rgba(255,210,63,.35)}

/* ---------- 7. Rarity badges, exactly like the game tiers ---------- */
.rb,[class^="rb-"],[class*=" rb-"],.event-tag,.exp-badge,.cyber-tag,.tag,.sel-tag,.active-badge,.tier-label{
  font-weight:700;border:2px solid var(--gu-ink);border-radius:999px;
  text-shadow:0 1px 0 rgba(0,0,0,.5);box-shadow:0 3px 0 var(--gu-ink);
}
.rb-Common{background:linear-gradient(180deg,#e7e7f0,#a9a9bb)!important;color:#222!important;text-shadow:none}
.rb-Rare{background:linear-gradient(180deg,#7cc0ff,#2f86e6)!important;color:#fff!important}
.rb-Epic{background:linear-gradient(180deg,#d98aff,#9a3ce0)!important;color:#fff!important}
.rb-Legendary{background:linear-gradient(180deg,#ffec6a,#f2b300)!important;color:#3a2a00!important;text-shadow:none}
.rb-Mythic{background:linear-gradient(180deg,#ffa24a,#e8530e)!important;color:#fff!important}
.rb-Brainrot,.rb-God,[class*="rb-Brainrot"]{background:linear-gradient(90deg,#ff4d6d,#ffb84d,#5bff94,#4ad7ff,#c15bff,#ff4d6d)!important;background-size:200% 100%!important;animation:gu-rainbow 4s linear infinite;color:#fff!important}
.rb-Secret{background:linear-gradient(180deg,#2e2e48,#0a0a18)!important;color:var(--secret)!important;box-shadow:0 3px 0 var(--gu-ink),0 0 14px rgba(46,242,255,.55)}
.rb-OG{background:linear-gradient(180deg,#ffe56a,#ff9f1a)!important;color:#3a1d00!important;text-shadow:none;box-shadow:0 3px 0 var(--gu-ink),0 0 14px rgba(255,210,63,.6)}
@keyframes gu-rainbow{to{background-position:200% 0}}

/* ---------- 8. Header = game HUD ---------- */
header#site-header,#site-header{
  position:sticky;top:0;z-index:300;
  background:linear-gradient(180deg,#34207a 0,#1d1049 100%) !important;
  border-bottom:4px solid var(--gu-ink) !important;
  box-shadow:0 4px 0 rgba(255,255,255,.06) inset,0 8px 24px rgba(0,0,0,.45) !important;
  backdrop-filter:none !important;
  padding-left:clamp(10px,2vw,26px) !important;padding-right:clamp(10px,2vw,26px) !important;
}
#site-header::after{
  content:"";position:absolute;left:0;right:0;bottom:-8px;height:4px;pointer-events:none;
  background:linear-gradient(90deg,#ff3d8b,#ffd23f,#3ef07a,#33d4ff,#c15bff,#ff3d8b);
  background-size:200% 100%;animation:gu-rainbow 8s linear infinite;border-bottom:2px solid var(--gu-ink);
}
#site-header .logo img{filter:drop-shadow(0 3px 0 var(--gu-ink));max-height:50px;width:auto}
#site-header nav a,#site-header .nav-calc-link,#site-header .nav-more-btn,#site-header .nav-calc-btn,#site-header .nav-user-toggle{
  font-family:Fredoka,"Nunito",system-ui,sans-serif;font-weight:700 !important;color:#efe9ff !important;
  border:3px solid transparent !important;border-radius:12px !important;
  text-shadow:0 2px 0 rgba(0,0,0,.45);transition:transform .12s,background .12s;
}
#site-header nav a:hover,#site-header .nav-calc-link:hover,#site-header .nav-more-btn:hover{
  background:rgba(255,255,255,.1) !important;transform:translateY(-2px);
}
#site-header nav a.active,#site-header .nav-calc.active>.nav-calc-link,#site-header .nav-more-btn.active{
  background:linear-gradient(180deg,#ffe56a 0,#ffa91f 100%) !important;color:#3a1d00 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.45);
  border-color:var(--gu-ink) !important;box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 3px 0 var(--gu-ink) !important;
}
.nav-calc-menu,.nav-more-menu,.nav-user-menu{
  background:linear-gradient(180deg,var(--gu-panel-top),var(--gu-panel-bot)) !important;
  border:3px solid var(--gu-ink) !important;border-radius:16px !important;
  box-shadow:0 6px 0 var(--gu-ink),0 18px 30px rgba(0,0,0,.45) !important;
}
.nav-calc-menu a,.nav-more-menu a,.nav-user-menu a{color:#fff !important;font-weight:600}
.nav-calc-menu a:hover,.nav-more-menu a:hover,.nav-user-menu a:hover{background:rgba(255,210,63,.18) !important}
.sabh-search-btn,.nav-burger{
  background:linear-gradient(180deg,#6f9bff,#3a63ea) !important;border:3px solid var(--gu-ink) !important;border-radius:14px !important;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.38),0 4px 0 #0c1a6e !important;color:#fff !important;
}
.nav-burger span{background:#fff !important}

/* header never collides with the logo: collapse the menu earlier */
@media (max-width:1180px){
  header#site-header,#site-header{
    display:flex !important;flex-wrap:nowrap !important;align-items:center !important;gap:10px !important;
    height:64px !important;min-height:64px !important;
  }
  #site-header nav,#site-header .nav-community-desktop{display:none !important}
  #site-header .logo{margin-right:auto !important;flex:0 1 auto;min-width:0}
  #site-header .logo img{height:44px !important;width:auto !important;max-width:200px !important}
  #site-header .sabh-search-btn{position:static !important;flex:0 0 auto;width:46px !important;height:46px !important}
  #site-header .nav-burger{display:flex !important;position:static !important;flex:0 0 auto;align-items:center;justify-content:center;width:46px !important;height:46px !important;margin:0 !important}
}
.nav-drawer{
  background:linear-gradient(180deg,#2b1a69,#150a38) !important;border-left:4px solid var(--gu-ink) !important;
  box-shadow:-10px 0 0 rgba(0,0,0,.35),-24px 0 50px rgba(0,0,0,.55) !important;
}
.nav-drawer-head{background:linear-gradient(180deg,#34207a,#1d1049) !important;border-bottom:4px solid var(--gu-ink) !important}
.nav-drawer a{font-weight:700;border-radius:12px}
.nav-drawer a.active,.nav-drawer a:hover{background:linear-gradient(180deg,#ffe56a,#ffa91f) !important;color:#3a1d00 !important}

/* project-status ribbon */
.sabh-project-status,.sabh-project-status-inner{
  background:linear-gradient(180deg,#5b3a00,#3a2300) !important;border-bottom:3px solid var(--gu-ink) !important;
}

/* ---------- 9. Hero (home & hubs) ---------- */
.hero,.home-hero-refresh,.sab-refresh-home .hero.home-hero-refresh{position:relative;isolation:isolate}
.home-hero-refresh h1,.hero h1{font-size:clamp(40px,7.2vw,86px);line-height:1.02}
.home-hero-lead,.hero p{color:#e9e2ff;font-weight:600}
.home-tool-icon,.rl-icon,.mg-icon{
  background:linear-gradient(180deg,#ffe56a,#ffa91f) !important;border:3px solid var(--gu-ink) !important;border-radius:16px !important;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.5),0 4px 0 var(--gu-ink) !important;
}

/* brainrot artwork: framed like the in-game cards */
.detail-img,.lg-media,.brd-card img,.tvr-card-media,.gw-img,.trade-card-img{
  border:3px solid var(--gu-ink) !important;border-radius:16px !important;
  box-shadow:0 5px 0 var(--gu-ink),0 0 0 3px rgba(255,255,255,.08) inset;
}

/* ---------- 10. Tables, details, code ---------- */
table{border-collapse:separate;border-spacing:0}
.table-wrap,.event-table{border:3px solid var(--gu-ink);border-radius:16px;overflow:hidden;box-shadow:0 5px 0 var(--gu-ink)}
th{background:linear-gradient(180deg,#4a2aa6,#341b7c);color:var(--gu-yellow);text-shadow:0 2px 0 var(--gu-ink)}
td{border-color:rgba(255,255,255,.1)}
details>summary{cursor:pointer;font-weight:700}
.code-string,code{background:#0f0629;border:2px solid var(--gu-ink);border-radius:8px;color:var(--gu-yellow)}
footer{
  background:linear-gradient(180deg,#1d1049,#0b0620) !important;border-top:4px solid var(--gu-ink) !important;
  box-shadow:0 -4px 0 rgba(255,255,255,.06) inset;color:#d9d1ff;
}
footer a{color:var(--gu-yellow);font-weight:600}
.breadcrumb a{color:var(--gu-cyan);font-weight:600}

/* ---------- 11. Conveyor belt of real brainrots (injected by sab-game-ui.js) ---------- */
.gu-belt{
  position:relative;z-index:1;height:118px;overflow:hidden;margin:0;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 2px,transparent 2px 22px),
    linear-gradient(180deg,#2a1d52 0,#1a1136 100%);
  border-top:4px solid var(--gu-ink);border-bottom:4px solid var(--gu-ink);
  box-shadow:inset 0 10px 18px rgba(0,0,0,.35);
}
.gu-belt::before{ /* moving belt chevrons */
  content:"";position:absolute;left:0;right:0;bottom:0;height:20px;
  background:repeating-linear-gradient(135deg,var(--gu-yellow) 0 12px,var(--gu-ink) 12px 24px);
  background-size:34px 34px;opacity:.9;animation:gu-belt-lines 1.1s linear infinite;
  border-top:3px solid var(--gu-ink);
}
.gu-belt-track{position:absolute;left:0;top:0;display:flex;gap:46px;align-items:flex-end;height:96px;padding:0 23px;will-change:transform;animation:gu-belt-run 52s linear infinite}
.gu-belt:hover .gu-belt-track{animation-play-state:paused}
.gu-belt-item{flex:0 0 auto;display:block;width:82px;height:82px;position:relative;margin-bottom:6px;animation:gu-bob 2.4s ease-in-out infinite;text-decoration:none}
.gu-belt-item:nth-child(3n){animation-delay:-.8s}.gu-belt-item:nth-child(3n+1){animation-delay:-1.5s}
.gu-belt-item img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 0 rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(255,255,255,.25));transition:transform .15s}
.gu-belt-item:hover img{transform:scale(1.22) rotate(-6deg)}
@keyframes gu-belt-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes gu-belt-lines{to{background-position:34px 0}}
@keyframes gu-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ---------- 12. Mobile tab bar (injected) ---------- */
.gu-tabbar{display:none}
@media (max-width:760px){
  body.gu-has-tabbar{padding-bottom:calc(76px + env(safe-area-inset-bottom)) !important}
  .gu-tabbar{
    display:grid;grid-template-columns:repeat(5,1fr);align-items:end;gap:2px;
    position:fixed;left:0;right:0;bottom:0;z-index:400;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,#34207a,#1a0e44);
    border-top:4px solid var(--gu-ink);
    box-shadow:0 -6px 24px rgba(0,0,0,.5),0 4px 0 rgba(255,255,255,.07) inset;
  }
  .gu-tabbar a,.gu-tabbar button{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    min-height:54px;border:3px solid transparent;border-radius:14px;background:none;color:#e6defc;
    font:700 11px/1.1 Fredoka,system-ui,sans-serif;text-decoration:none;text-shadow:0 2px 0 rgba(0,0,0,.45);
    cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  .gu-tabbar .gu-ico{font-size:22px;line-height:1;filter:drop-shadow(0 2px 0 rgba(0,0,0,.5))}
  .gu-tabbar a.is-active{background:linear-gradient(180deg,#ffe56a,#ffa91f);color:#3a1d00;text-shadow:none;border-color:var(--gu-ink);box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 3px 0 var(--gu-ink)}
  .gu-tabbar a.gu-cta{background:linear-gradient(180deg,#5bff94,#1cc255);color:#fff;border-color:var(--gu-ink);margin-top:-16px;min-height:66px;box-shadow:inset 0 3px 0 rgba(255,255,255,.45),0 5px 0 #0a6b2c,0 10px 16px rgba(0,0,0,.4)}
  .gu-belt{height:96px}.gu-belt-item{width:66px;height:66px}.gu-belt-track{height:78px;gap:30px}
  h1,h2,.section-title{-webkit-text-stroke-width:5px}
}

/* ---------- 13. Fluid sizing on every screen ---------- */
img,video,canvas,svg{max-width:100%}
main,.container,section{min-width:0}
[class*="hero"],[class*="hero"]>*{min-width:0;max-width:100%}
/* brainrot detail: the wrapper is only a grid, the two children are the panels */
.detail-hero{background:none !important;border:0 !important;box-shadow:none !important;padding:0 !important;border-radius:0 !important}
.detail-img{background:linear-gradient(180deg,#3b2a8a,#1f1247) !important;box-shadow:inset 0 3px 0 rgba(255,255,255,.14),0 6px 0 var(--gu-ink),0 18px 28px rgba(0,0,0,.32) !important}
html body .detail-stats{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px !important;margin-top:14px !important}
html body .detail-stats .stat-card{
  background:linear-gradient(180deg,#3b2a8a,#27175e) !important;border:3px solid var(--gu-ink) !important;border-radius:14px !important;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.14),0 5px 0 var(--gu-ink) !important;display:flex !important;flex-direction:column !important;align-items:flex-start !important;justify-content:center;gap:2px;padding:12px 14px !important;min-width:0;grid-template-columns:none !important}
html body .detail-stats .sc-label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#d9d1ff}
html body .detail-stats .sc-val{font-size:clamp(18px,5vw,24px) !important;text-shadow:0 2px 0 var(--gu-ink)}
@media (max-width:820px){
  html body .detail-hero.detail-hero{grid-template-columns:minmax(0,1fr) !important;gap:16px !important}
  .detail-img{min-height:0 !important;height:min(78vw,340px) !important;padding:18px !important}
  html body .detail-hero.detail-hero{grid-template-rows:none !important}
  html body .detail-hero .detail-info{display:flex !important;grid-area:auto !important}
  html body .detail-hero .detail-img{grid-area:auto !important;width:100% !important}
  .detail-info{padding:18px !important}
  .detail-info h1{font-size:clamp(30px,9vw,42px) !important}
}
.update-badge,[class*="update"]{white-space:normal;overflow-wrap:anywhere}
.brd-hero-inner{width:100%}
@media (max-width:760px){
  /* floating push-notification bell clears the tab bar */
  html body .sabh-hunt-toast{bottom:calc(88px + env(safe-area-inset-bottom)) !important;z-index:350}
  [class*="push-bell"],[class*="notif-bell"],[id*="push-bell"],[class*="sabh-bell"],[class*="bell-fab"]{bottom:calc(92px + env(safe-area-inset-bottom)) !important}
}
.table-wrap,.event-table,.tz-table,.tablewrap{overflow-x:auto}
@media (max-width:760px){
  h1{font-size:clamp(30px,9vw,44px) !important}
  h2{font-size:clamp(24px,7vw,34px)}
  .card,.ecard,.stat-pill,.guide-card{border-radius:16px !important}
  .home-hero-btn,.btn,.button{min-height:46px}
  .stats-bar{flex-wrap:wrap}
}
@media (max-width:420px){body{font-size:15px}}

/* ---------- 14. Motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  .gu-belt-track,.gu-belt::before,.gu-belt-item,#site-header::after,.rb-Brainrot,.rb-God{animation:none !important}
  .card:hover,.ecard:hover,.guide-card:hover{transform:none}
}

/* ---------- 15. No horizontal page scroll from decorative hero glows ---------- */
html,body{overflow-x:clip}
.hero,[class*="hero"]{overflow-x:clip}

/* ---------- 16. Tool pages: get the tool above the fold ---------- */
body.calculator-modern-page .hero,body.trade-values-refresh-page .hero,body.exist-counts-refresh-page .hero,body.brainrots-directory-page .hero,
body.calculator-modern-page [class*="hero"],body.trade-values-refresh-page [class*="-hero"]{padding-top:14px !important;padding-bottom:6px !important;min-height:0 !important}
body.calculator-modern-page .hero h1,body.trade-values-refresh-page .hero h1,body.exist-counts-refresh-page .hero h1,body.brainrots-directory-page .hero h1{
  font-size:clamp(26px,4vw,42px) !important;line-height:1.05 !important;margin:6px 0 4px !important}
body.calculator-modern-page .hero p,body.trade-values-refresh-page .hero p,body.exist-counts-refresh-page .hero p,body.brainrots-directory-page .hero p{
  font-size:14px !important;margin:4px auto 0 !important;max-width:640px}
@media (max-width:760px){
  body.calculator-modern-page .hero p,body.trade-values-refresh-page .hero p,body.exist-counts-refresh-page .hero p{display:none !important}
}
/* hero kicker pill must not collide with the breadcrumb; stat bars no longer pull up over hero buttons */
body.calculator-modern-page .hero,body.trade-values-refresh-page .hero,body.exist-counts-refresh-page .hero,body.brainrots-directory-page .hero,
body.trade-values-refresh-page .tvr-hero,body.exist-counts-refresh-page [class*="-hero"],body.brainrots-directory-page [class*="-hero"]{padding-top:24px !important}
body.trade-values-refresh-page .stats-bar,body.exist-counts-refresh-page .stats-bar,body.brainrots-directory-page .stats-bar,
body.trade-values-refresh-page .tvr-stats,body.exist-counts-refresh-page [class*="-stats"],body.brainrots-directory-page [class*="-stats"]{margin-top:16px !important}
.breadcrumb{margin-bottom:6px}
body.calculator-modern-page .hero,body.trade-values-refresh-page .hero,body.exist-counts-refresh-page .hero,body.brainrots-directory-page .hero{margin-top:0 !important}

/* gradient-clipped words inside h2/h3 (e.g. "Rarest <Brainrots>") become solid gold so the outline never swallows them */
h2>span,h3>span,h2>em,h3>em{
  background:none !important;-webkit-background-clip:border-box !important;background-clip:border-box !important;
  -webkit-text-fill-color:var(--gu-yellow) !important;color:var(--gu-yellow) !important;
}

/* ---------- 17. "A wild Brainrot spawned" popup: compact on phones ---------- */
@media (max-width:760px){
  html body .sabh-hunt-toast{left:10px !important;right:10px !important;width:auto !important;bottom:calc(84px + env(safe-area-inset-bottom)) !important;padding:8px 12px 10px !important;border-radius:14px !important;max-width:none}
  .sabh-hunt-title{font-size:13px !important;margin:0 24px 5px 0 !important}
  .sabh-hunt-close{top:6px !important;right:10px !important;font-size:20px !important}
  .sabh-hunt-body{grid-template-columns:42px 1fr !important;gap:9px !important}
  .sabh-hunt-img-shell,.sabh-hunt-img{width:42px !important;height:42px !important}
  .sabh-hunt-one-of-one{display:none !important}
  .sabh-hunt-name{font-size:13px !important;margin:0 !important}
  .sabh-hunt-meta{font-size:11px !important;margin:1px 0 0 !important}
  .sabh-hunt-tags{display:none !important}
  .sabh-hunt-auth-hint{font-size:0 !important;margin-top:2px !important}
  .sabh-hunt-auth-hint br{display:none}
  .sabh-hunt-disable-popups{font-size:11px !important;margin-top:2px !important}
  .sabh-hunt-actions{margin-top:7px !important;gap:6px !important}
  .sabh-hunt-time{font-size:11px !important}
  .sabh-hunt-btn{min-width:0 !important;padding:7px 11px !important;font-size:12px !important}
  .sabh-hunt-register{min-width:0 !important}
  .sabh-hunt-bar{margin-top:7px !important;height:3px !important}
}