
/* Bubbly Bean World — V53.3.1 Global Theme / Batch 1 */
:root{
  --bb-purple:#5b20d8;--bb-violet:#7b3ff2;--bb-pink:#e8329b;
  --bb-blue:#21a9d6;--bb-gold:#ffd34d;--bb-ink:#20164d;
  --bb-soft:#f5f0ff;--bb-white:#fff;--bb-green:#39c875;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--bb-ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  background:
    radial-gradient(circle at 8% 18%,rgba(121,72,255,.18),transparent 25rem),
    radial-gradient(circle at 92% 30%,rgba(255,105,190,.16),transparent 28rem),
    linear-gradient(135deg,#f3f0ff 0%,#fff 48%,#fff5e9 100%);
  min-height:100vh;
}
a{color:inherit}
button,.btn{font:inherit}
header,.bb-nav,.nav,.lc-nav{
  position:relative;z-index:20;
  background:linear-gradient(90deg,#5520d8 0%,#8b2fe4 38%,#e92f9b 70%,#20afd1 100%) !important;
  color:#fff !important;
  box-shadow:0 8px 24px rgba(56,25,130,.20);
}
.bb-nav-in,.navin,.lc-nav-in{
  min-height:76px;padding:10px 22px;display:flex;align-items:center;
  gap:22px;max-width:1400px;margin:auto;
}
.bb-logo,.logo,.lc-logo{
  color:#fff !important;text-decoration:none;font-weight:900;
  font-size:1.35rem;white-space:nowrap;text-shadow:0 2px 8px rgba(0,0,0,.18);
}
.bb-links,.links,.lc-nav-in nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bb-links a,.links a,.lc-nav-in>a:not(.lc-logo){
  color:#fff !important;text-decoration:none;font-weight:800;
  padding:11px 14px;border-radius:16px;transition:.2s ease;
}
.bb-links a:hover,.links a:hover,.lc-nav-in>a:not(.lc-logo):hover{
  background:rgba(255,255,255,.18);transform:translateY(-1px);
}
.wrap,.lc-wrap,.hub-wrap{max-width:1280px;margin:auto;padding:28px 22px 60px}
.hero,.lc-hero{
  border-radius:30px !important;
  border:1px solid rgba(119,72,230,.18);
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(247,242,255,.92),rgba(255,249,235,.94)) !important;
  box-shadow:0 18px 50px rgba(67,35,160,.12);
  text-align:center;padding:48px 28px !important;
  position:relative;overflow:hidden;
}
.hero:before,.lc-hero:before{
  content:"";position:absolute;inset:-80px auto auto -80px;width:240px;height:240px;
  border-radius:50%;background:rgba(123,63,242,.10);pointer-events:none;
}
.hero h1,.lc-hero h1{color:var(--bb-ink) !important;font-weight:950;letter-spacing:-1.5px}
.hero p,.lc-hero p{color:#5f587b !important;font-size:1.08rem}
.icon,.lc-kicker{position:relative;z-index:1}
.actions,.hero-actions,.lc-tabs{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.btn,.lc-btn{
  border:0 !important;border-radius:16px !important;padding:13px 20px !important;
  background:linear-gradient(135deg,var(--bb-purple),var(--bb-violet)) !important;
  color:#fff !important;font-weight:900 !important;text-decoration:none !important;
  box-shadow:0 8px 18px rgba(91,32,216,.20);cursor:pointer;
}
.btn.alt,.lc-btn.alt{
  background:#fff !important;color:var(--bb-purple) !important;
  border:2px solid #e3d9ff !important;
}
.btn:hover,.lc-btn:hover{transform:translateY(-2px)}
.panel,.lc-panel,.lc-section{
  background:rgba(255,255,255,.92) !important;
  border:1px solid #e3d9ff !important;border-radius:28px !important;
  box-shadow:0 12px 35px rgba(69,40,150,.09);
}
.panel{padding:26px !important;margin-top:24px}
.panel h2,.lc-section h2{color:var(--bb-ink)}
.worlds,.badges,.levels,.storygrid,.lc-grid{
  gap:18px !important;
}
.world,.badge,.level,.story,.lc-card{
  border:1px solid #e5dcff !important;border-radius:22px !important;
  background:linear-gradient(180deg,#fff,#faf7ff) !important;
  box-shadow:0 8px 22px rgba(80,48,160,.08) !important;
  transition:transform .2s ease,box-shadow .2s ease;
}
.world:hover,.badge:hover,.level:hover,.story:hover,.lc-card:hover{
  transform:translateY(-4px);box-shadow:0 14px 28px rgba(80,48,160,.14) !important;
}
.locked{opacity:.62}
.lc-kicker{color:var(--bb-violet) !important;font-weight:950;letter-spacing:.08em}
.lc-tabs{margin-top:22px}
.lc-tab{
  border:2px solid #e4d9ff !important;background:#fff !important;
  color:var(--bb-ink) !important;border-radius:999px !important;
  padding:12px 18px !important;font-weight:900 !important;
}
.lc-tab.active{background:linear-gradient(135deg,#7040ef,#9a36dd) !important;color:#fff !important;border-color:transparent !important}
.lc-section{margin-top:24px;padding:26px !important}
.lc-intro{display:flex;gap:15px;align-items:center}
.lc-intro-icon{font-size:2.4rem}
.lc-card{padding:18px !important}
.lc-age{background:#f0e9ff !important;color:#5b20d8 !important;border-radius:999px;padding:5px 9px;font-weight:900}
.search{
  width:100%;padding:15px 18px;border:2px solid #e4d9ff;border-radius:16px;
  outline:none;font-size:1rem;background:#fff;
}
.search:focus{border-color:#7b3ff2;box-shadow:0 0 0 4px rgba(123,63,242,.10)}
.reward{border-radius:22px;padding:24px;background:linear-gradient(135deg,#fff7c9,#ffe7f5,#e4f7ff)}
@media(max-width:850px){
  .bb-nav-in,.navin,.lc-nav-in{padding:9px 12px;gap:8px}
  .bb-links a,.links a,.lc-nav-in>a:not(.lc-logo){padding:8px 9px;font-size:.88rem}
  .wrap,.lc-wrap,.hub-wrap{padding:18px 12px 45px}
  .hero,.lc-hero{padding:34px 18px !important;border-radius:22px !important}
  .hero h1,.lc-hero h1{font-size:clamp(2rem,9vw,4rem)}
}
