/* 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)}
}


/* =========================================================
   BUBBLY BEAN V53.3.6 — WORLD MAP ADVENTURE MAKEOVER
   ========================================================= */

body{
  overflow-x:hidden;
}

.wrap{
  max-width:1320px!important;
  padding-top:30px!important;
}

/* Hero */
.hero{
  min-height:365px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 10% 30%,rgba(88,213,255,.16),transparent 18rem),
    radial-gradient(circle at 90% 25%,rgba(255,92,183,.15),transparent 20rem),
    linear-gradient(135deg,#fff 0%,#f5f0ff 52%,#fff5e5 100%) !important;
}
.hero:after{
  content:"🌈   ⭐   ✨";
  position:absolute;
  right:28px;
  top:22px;
  font-size:2rem;
  opacity:.48;
  letter-spacing:12px;
}
.hero .icon{
  font-size:4.8rem!important;
  line-height:1!important;
  filter:drop-shadow(0 9px 12px rgba(84,37,177,.16));
}
.hero h1{
  font-size:clamp(2.7rem,6vw,5rem)!important;
  margin:18px 0 8px!important;
  letter-spacing:-.045em;
}
.hero p{
  max-width:850px;
  font-size:1.12rem!important;
  line-height:1.55;
}

/* Main map panel */
.map-panel-v536{
  margin-top:24px;
}

.map-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  border-radius:20px;
  background:linear-gradient(90deg,#f2eaff,#fff7d5,#e6f8ff);
  border:1px solid #e4d9ff;
}

.map-title b{
  font-size:1rem;
  color:var(--bb-purple);
}

.xp{
  height:12px!important;
  width:100%;
  background:#ebe4ff!important;
  border-radius:999px!important;
  overflow:hidden;
  box-shadow:inset 0 2px 5px rgba(45,20,100,.08);
}
.xp span{
  display:block;
  height:100%;
  width:0;
  border-radius:999px;
  background:linear-gradient(90deg,#6f32e8,#e9369d,#20afd1);
  transition:width .35s ease;
}

/* Adventure path */
.map{
  position:relative;
  margin-top:18px;
}
.path{
  position:absolute;
  left:7%;
  right:7%;
  top:50%;
  height:10px;
  transform:translateY(-50%);
  border-radius:999px;
  background:repeating-linear-gradient(90deg,#d8c8ff 0 24px,#fff 24px 38px);
  box-shadow:0 4px 12px rgba(78,38,160,.08);
  z-index:0;
}
.worlds{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px!important;
}

/* World cards */
.world{
  min-height:235px;
  padding:20px!important;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  overflow:hidden;
  border:2px solid #e4d9ff!important;
  border-radius:25px!important;
  background:linear-gradient(155deg,#fff,#f5f0ff)!important;
}
.world:before{
  content:"";
  position:absolute;
  width:110px;
  height:110px;
  border-radius:50%;
  right:-45px;
  top:-45px;
  background:rgba(255,211,77,.18);
}
.world:after{
  content:"✨";
  position:absolute;
  right:14px;
  top:13px;
  opacity:.65;
  font-size:1.3rem;
}
.world:nth-child(4n+1){background:linear-gradient(155deg,#fff,#effff1)!important;border-color:#c8edcf!important}
.world:nth-child(4n+2){background:linear-gradient(155deg,#fff,#f1f7ff)!important;border-color:#cddfff!important}
.world:nth-child(4n+3){background:linear-gradient(155deg,#fff,#fff2f8)!important;border-color:#f1d0e3!important}
.world:nth-child(4n){background:linear-gradient(155deg,#fff,#fff7e9)!important;border-color:#f4dfb7!important}

.world .emoji{
  width:70px;
  height:70px;
  display:grid;
  place-items:center;
  margin-bottom:12px;
  border-radius:22px;
  background:#fff;
  font-size:2.8rem;
  box-shadow:0 9px 18px rgba(70,35,150,.11);
}
.world h3{
  margin:0 0 7px!important;
  font-size:1.13rem!important;
  color:var(--bb-ink)!important;
}
.world p{
  margin:0!important;
  color:#6b6680!important;
  line-height:1.4;
  font-size:.9rem;
}
.world button{
  width:100%;
  margin-top:16px;
  min-height:44px;
  border:0!important;
  border-radius:15px!important;
  background:linear-gradient(135deg,#7130e7,#5b20d8)!important;
  color:#fff!important;
  font-weight:950!important;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(91,32,216,.22)!important;
  transition:.18s ease;
}
.world button:hover{
  transform:translateY(-2px);
  filter:brightness(1.04);
}
.world.locked{
  opacity:.72!important;
  filter:saturate(.78);
}
.world.locked button{
  background:linear-gradient(135deg,#aaa1c4,#887fa6)!important;
  box-shadow:none!important;
}
.world-status{
  display:inline-flex;
  align-items:center;
  width:max-content;
  margin-top:11px;
  padding:5px 9px;
  border-radius:999px;
  background:#eafbea;
  color:#247c42;
  font-size:.7rem;
  font-weight:950;
}
.world.locked .world-status{
  background:#eee9f8;
  color:#6e6681;
}

/* Passport levels */
.levels{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px!important;
}
.level{
  padding:20px!important;
  min-height:180px;
  text-align:center;
  border-radius:23px!important;
}
.level .emoji,.badge .emoji{
  font-size:2.6rem;
}
.level h3{
  margin:9px 0 4px!important;
}
.level.locked{
  opacity:.58!important;
  filter:grayscale(.15);
}

/* Badges */
.badges{
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:14px!important;
}
.badge{
  min-height:135px;
  padding:16px!important;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
}
.badge.locked{
  opacity:.52!important;
}

/* Star earning CTA */
.panel .actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.panel .actions .btn{
  min-width:140px;
  text-align:center;
}

/* Modal polish */
.modal{
  position:fixed;
  inset:0;
  display:none;
  place-items:center;
  padding:20px;
  background:rgba(33,20,70,.48);
  backdrop-filter:blur(6px);
  z-index:100;
}
.modal.open{display:grid}
.modalbox{
  width:min(520px,100%);
  padding:34px;
  text-align:center;
  border-radius:28px;
  background:linear-gradient(145deg,#fff,#f7f0ff,#fff8e8);
  border:2px solid #e4d9ff;
  box-shadow:0 25px 70px rgba(40,20,100,.25);
}
.modalbox .actions{
  justify-content:center;
}

/* Decorative section heading */
.panel>h2{
  font-size:1.55rem!important;
  margin-top:0;
}
.notice{
  color:#6b6680!important;
  line-height:1.5;
}

/* Responsive */
@media(max-width:1100px){
  .worlds{grid-template-columns:repeat(3,minmax(0,1fr))}
  .levels{grid-template-columns:repeat(3,minmax(0,1fr))}
  .badges{grid-template-columns:repeat(4,minmax(0,1fr))}
  .path{display:none}
}
@media(max-width:720px){
  .worlds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .levels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .badges{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero{min-height:320px}
  .hero:after{display:none}
  .map-title{flex-direction:column;align-items:stretch}
}
@media(max-width:480px){
  .worlds,.levels,.badges{grid-template-columns:1fr}
  .world{min-height:215px}
  .hero h1{font-size:2.45rem!important}
}

/* =========================================================
   BUBBLY BEAN V53.3.7 — INTERACTIVE ADVENTURE MAP
   ========================================================= */

.bb-map-adventure-panel{
  overflow:hidden;
}

.bb-map-subline{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  flex-wrap:wrap;
  margin:-4px 0 15px;
  color:#6b6680;
}

.bb-next-adventure{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:999px;
  background:linear-gradient(90deg,#fff4ad,#eaf7ff);
  color:#4f28a9;
  font-weight:900;
  font-size:.82rem;
  border:1px solid #e3d7ff;
}

.bb-map-progress{
  margin:14px 0 18px;
  padding:14px 16px;
  border-radius:20px;
  background:linear-gradient(90deg,#f1eaff,#fff4d6,#e4f8ff);
  border:1px solid #e2d7ff;
}
.bb-map-progress>div:first-child{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:9px;
  color:#4e2ca2;
  font-weight:950;
  font-size:.85rem;
}
.bb-progress-track{
  height:13px;
  border-radius:999px;
  background:#e8e0f8;
  overflow:hidden;
  box-shadow:inset 0 2px 5px rgba(60,30,130,.09);
}
#bbMapProgressFill{
  display:block;
  height:100%;
  width:0;
  border-radius:999px;
  background:linear-gradient(90deg,#6930e9,#e9369d,#22afd0);
  transition:width .45s ease;
}

.bb-adventure-stage{
  position:relative;
}
.bb-adventure-stage .worlds{
  position:relative;
  z-index:2;
}
.bb-route-route{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
}
.bb-route-route:before{
  content:"";
  position:absolute;
  left:7%;
  right:7%;
  top:50%;
  height:8px;
  transform:translateY(-50%);
  border-radius:999px;
  background:repeating-linear-gradient(
    90deg,#b9a2ff 0 18px,transparent 18px 31px
  );
  opacity:.75;
}
.route-dot{
  position:absolute;
  width:17px;
  height:17px;
  border-radius:50%;
  background:#fff;
  border:5px solid #8b5cf6;
  box-shadow:0 3px 9px rgba(70,30,160,.18);
}
.r1{left:12%;top:50%;}.r2{left:25%;top:50%;}
.r3{left:38%;top:50%;}.r4{left:51%;top:50%;}
.r5{left:64%;top:50%;}.r6{left:77%;top:50%;}
.r7{left:86%;top:34%;}.r8{left:86%;top:66%;}

.bb-bean-traveller{
  position:absolute;
  z-index:5;
  left:3%;
  top:calc(50% - 34px);
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  border:3px solid #ffd84d;
  box-shadow:0 9px 18px rgba(66,28,130,.2);
  font-size:2rem;
  transition:left .55s ease, top .55s ease, transform .2s ease;
}
.bb-bean-traveller.bb-bounce{
  animation:bbBeanBounce .7s ease;
}
@keyframes bbBeanBounce{
  0%,100%{transform:translateY(0) scale(1)}
  40%{transform:translateY(-9px) scale(1.08)}
  70%{transform:translateY(0) scale(.98)}
}

.world{
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.world:not(.locked):hover{
  transform:translateY(-4px);
  box-shadow:0 15px 28px rgba(71,32,153,.12);
}
.world.bb-current{
  outline:4px solid rgba(255,207,64,.35);
  box-shadow:0 0 0 2px #ffd84d,0 18px 34px rgba(87,42,180,.14);
}
.world.bb-current:after{
  content:"📍 YOU ARE HERE";
  right:12px;
  top:12px;
  padding:5px 8px;
  border-radius:999px;
  background:#fff2a8;
  color:#6f5200;
  font-size:.62rem;
  font-weight:950;
  letter-spacing:.02em;
}
.world.bb-next{
  outline:3px dashed rgba(233,54,157,.35);
}
.world.bb-next .world-status{
  background:#ffe4f2!important;
  color:#a31c65!important;
}
.world.bb-visited .world-status{
  background:#e7f8eb!important;
  color:#247c42!important;
}
.world.bb-visited .world-status:before{
  content:"✓ ";
}

.bb-route-legend{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:16px;
}
.bb-route-legend span{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px 10px;
  border-radius:999px;
  background:#f7f2ff;
  color:#5a3a9f;
  font-size:.72rem;
  font-weight:900;
  border:1px solid #e6dcff;
}

@media(max-width:1100px){
  .bb-route-route:before,.route-dot{display:none}
  .bb-bean-traveller{display:none}
}
@media(max-width:720px){
  .bb-map-subline{font-size:.86rem}
  .bb-map-progress>div:first-child{flex-direction:column}
}