/* === LOADING SCREEN === */
.loader-screen{
  position:fixed;inset:0;z-index:9999;background:#FEFEFE;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity 0.6s ease, visibility 0.6s ease;
}
.loader-screen.hide{opacity:0;visibility:hidden;pointer-events:none}
.loader-brain{font-size:5rem;animation:loaderPulse 1s ease-in-out infinite}
@keyframes loaderPulse{
  0%,100%{transform:scale(1) rotate(0deg)}
  25%{transform:scale(1.15) rotate(-5deg)}
  50%{transform:scale(1) rotate(0deg)}
  75%{transform:scale(1.15) rotate(5deg)}
}
.loader-title{
  font-size:2rem;font-weight:900;margin-top:12px;
  background:linear-gradient(90deg,#396DFF,#54D0E3,#BCE6F2);
  -webkit-background-clip:text;color:transparent;
}
.loader-dots{color:#5F6266;font-size:1rem;margin-top:8px}
.loader-dots::after{content:'';animation:dots 1.5s steps(4,end) infinite}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}

/* === FLOATING PARTICLES === */
.particles{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.particle{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:rgba(84,208,227,0.15);
  animation:particleFloat linear infinite;
}
@keyframes particleFloat{
  0%{transform:translateY(100vh) translateX(0);opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{transform:translateY(-10vh) translateX(30px);opacity:0}
}

:root {
  --bg: #FEFEFE;
  --card: #F3F5F7;
  --card-light: #ECEEF1;
  --border: #D0D2D6;
  --white: #0B1220;
  --dim: #5F6266;
  --gold: #396BF6;
  --red: #ff3b6b;
  --green: #06d6a0;
  --blue: #396BF6;
  --purple: #396DFF;
  --pink: #BCE6F2;
  --orange: #54D0E3;
  --cyan: #BCE6F2;
}
html { font-size: 19px; scroll-behavior: smooth; }
@media (max-width: 600px) {
  html { font-size: 17px; }
  #blBar{top:6px!important;right:8px!important;gap:5px!important;font-size:0.72rem!important;padding:5px 10px!important}
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--white);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 10% 40%, rgba(30, 60, 220, 0.75), transparent 60%),
    radial-gradient(ellipse 80% 65% at 85% 20%, rgba(57, 109, 255, 0.70), transparent 55%),
    radial-gradient(ellipse 85% 70% at 50% 50%, rgba(50, 180, 220, 0.55), transparent 60%),
    radial-gradient(ellipse 70% 55% at 95% 65%, rgba(220, 140, 100, 0.25), transparent 55%),
    radial-gradient(ellipse 90% 75% at 50% 90%, rgba(80, 120, 255, 0.60), transparent 60%),
    radial-gradient(ellipse 70% 55% at 20% 10%, rgba(57, 107, 246, 0.65), transparent 50%),
    radial-gradient(ellipse 75% 60% at 75% 75%, rgba(60, 200, 255, 0.50), transparent 55%),
    radial-gradient(ellipse 110% 100% at 50% 50%, rgba(40, 80, 230, 0.20), transparent 75%);
  pointer-events: none;
  z-index: 0;
  animation: bgFlow 8s ease-in-out infinite alternate;
  transform-origin: center center;
  filter: blur(50px);
  inset: -60px;
}
@keyframes bgFlow {
  0% { transform: scale(1) translate(0px, 0px) rotate(0deg); }
  15% { transform: scale(1.12) translate(50px, -35px) rotate(2deg); }
  35% { transform: scale(1.05) translate(-40px, 45px) rotate(-1.5deg); }
  55% { transform: scale(1.15) translate(-55px, -25px) rotate(1deg); }
  75% { transform: scale(1.08) translate(45px, 35px) rotate(-2deg); }
  100% { transform: scale(1.1) translate(30px, -40px) rotate(1.5deg); }
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle, rgba(57,107,246,0.02) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}
.wrap {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin: 0 auto;
  padding: 60px 20px 40px;
  text-align: center;
}
.park-logo { margin-bottom: 12px; animation: float 3s ease-in-out infinite; text-align: center; }
@keyframes float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.park-title {
  font-size: 3.5rem;
  font-weight: 600;
  letter-spacing: -1px;
  margin: 0 auto 8px;
  background: linear-gradient(90deg, #396DFF, #54D0E3, #BCE6F2, #3267FD, #54D0E3, #396DFF);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbow-shift 6s linear infinite;
  line-height: 1;
  text-shadow: none;
  filter: drop-shadow(0 0 30px rgba(57,107,246,0.3));
}
@keyframes rainbow-shift {
  0%   { background-position: 0% center; }
  100% { background-position: 300% center; }
}
.park-tagline {
  color: var(--white);
  font-size: 1.2rem;
  margin: 8px 0 4px;
}
.park-subline {
  color: var(--dim);
  font-size: 0.95rem;
  margin-bottom: 40px;
}

.area-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 820px) { .area-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .area-grid { grid-template-columns: 1fr; } }

.area-card {
  --area-color: var(--blue);
  --area-glow: rgba(57, 107, 246, 0.12);
  background: linear-gradient(160deg, rgba(220,230,255,0.55), rgba(200,215,250,0.40));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 2px solid transparent;
  border-image: linear-gradient(160deg, var(--area-color), transparent 70%) 1;
  border-radius: 20px;
  padding: 28px 22px;
  text-align: left;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px var(--area-glow), inset 0 1px 0 rgba(255,255,255,0.15);
  text-decoration: none;
  color: inherit;
  display: block;
}
/* Animated gradient border */
.area-card{
  border-image:none;
  border:2px solid var(--area-color);
  background-clip:padding-box;
}
.area-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, var(--area-glow), transparent 60%);
  pointer-events: none;
  opacity: 0.7;
  transition: opacity 0.35s ease;
}
.area-card:hover::before{opacity:1}
.area-card:hover {
  transform: translateY(-8px) scale(1.03) perspective(600px) rotateX(3deg);
  box-shadow: 0 20px 50px var(--area-glow), 0 0 30px var(--area-glow), inset 0 1px 0 rgba(255,255,255,0.1);
  border-color: var(--area-color);
  filter: brightness(1.1);
}
.area-card:hover .area-icon{animation:iconBounce 0.5s ease}
@keyframes iconBounce{
  0%{transform:scale(1)}30%{transform:scale(1.3) rotate(-10deg)}50%{transform:scale(0.9) rotate(5deg)}70%{transform:scale(1.1) rotate(-3deg)}100%{transform:scale(1) rotate(0deg)}
}
/* Shimmer sweep on hover */
.area-card::after{
  content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
  background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.08) 50%,transparent 70%);
  transition:transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94);transform:translateX(-100%);pointer-events:none;
}
.area-card:hover::after{transform:translateX(100%)}
/* Pulse glow animation on cards */
@keyframes cardPulse{
  0%,100%{box-shadow:0 8px 32px var(--area-glow)}
  50%{box-shadow:0 8px 32px var(--area-glow), 0 0 20px var(--area-glow)}
}
.area-card:not(.locked){animation:cardPulse 4s ease-in-out infinite}
.area-card.locked {
  cursor: not-allowed;
  opacity: 0.55;
  filter: grayscale(0.3);
}
.area-card.locked:hover { transform: none; }

.area-card.math       { --area-color: #396BF6; --area-glow: rgba(57, 107, 246, 0.30); }
.area-card.english    { --area-color: #54D0E3; --area-glow: rgba(84, 208, 227, 0.30); }
.area-card.science    { --area-color: #3267FD; --area-glow: rgba(50, 103, 253, 0.30); }
.area-card.geography  { --area-color: #BCE6F2; --area-glow: rgba(188, 230, 242, 0.25); }
.area-card.art        { --area-color: #396DFF; --area-glow: rgba(57, 109, 255, 0.30); }
.area-card.code       { --area-color: #54D0E3; --area-glow: rgba(84, 208, 227, 0.30); }
.area-card.focus      { --area-color: #06d6a0; --area-glow: rgba(6, 214, 160, 0.30); }
.area-card.rubiks     { --area-color: #FF6B35; --area-glow: rgba(255, 107, 53, 0.30); }

.area-icon {
  font-size: 3.5rem;
  margin-bottom: 12px;
  position: relative;
  filter: drop-shadow(0 0 18px var(--area-glow));
  transition: transform 0.3s, filter 0.3s;
}
.area-card:hover .area-icon{
  filter: drop-shadow(0 0 28px var(--area-glow)) drop-shadow(0 0 8px var(--area-color));
}
.area-name {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--area-color);
  margin-bottom: 6px;
  text-shadow: 0 0 10px var(--area-glow);
  position: relative;
}
.area-tag {
  display: inline-block;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--area-color);
  color: var(--area-color);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 12px;
  margin-bottom: 10px;
  position: relative;
}
.area-desc {
  color: var(--dim);
  font-size: 0.9rem;
  line-height: 1.45;
  position: relative;
  min-height: 3.8em;
}
.area-status {
  margin-top: 14px;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--area-color);
  position: relative;
}
.area-status .arrow { display: inline-block; transition: transform 0.2s; }
.area-card:hover .arrow { transform: translateX(4px); }
.locked-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #0B1220;
  border: 1px solid var(--border);
  color: var(--dim);
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 12px;
  z-index: 2;
}

.footer {
  margin-top: 60px;
  color: var(--dim);
  font-size: 0.82rem;
}

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--card);
  border: 2px solid var(--gold);
  color: var(--gold);
  padding: 14px 22px;
  border-radius: 12px;
  font-weight: 700;
  z-index: 100;
  display: none;
  box-shadow: 0 8px 32px rgba(255, 214, 10, 0.3);
}
.toast.show { display: block; animation: pop 0.3s; }
@keyframes pop {
  0%   { transform: translate(-50%, 10px) scale(0.9); opacity: 0; }
  100% { transform: translate(-50%, 0)    scale(1);   opacity: 1; }
}

/* === DARK/LIGHT MODE === */
body.light{background:#f0f0f5}
body.light::before{
  background:radial-gradient(circle at 15% 20%,rgba(255,59,107,0.08),transparent 55%),
  radial-gradient(circle at 85% 25%,rgba(76,201,240,0.08),transparent 55%);
}
body.light::after{background-image:radial-gradient(circle,rgba(0,0,0,0.04) 1px,transparent 1px)}
body.light .wrap,body.light .area-desc,body.light .park-subline{color:#333}
body.light .area-card{background:linear-gradient(160deg,rgba(220,230,255,0.55),rgba(200,215,250,0.40));box-shadow:0 8px 32px var(--area-glow)}
body.light .park-tagline{color:#333}
body.light .footer{color:#999}
body.light .achieve-title{color:#b8860b}
body.light .badge-card{background:#fff;border-color:#e0e0e0}
body.light .badge-card.earned{border-color:#396BF6}
body.light #blBar button{color:#333!important}

/* === XP & LEVEL SYSTEM === */
.xp-bar-wrap{
  max-width:400px;margin:0 auto 30px;text-align:center;
}
.xp-info{display:flex;justify-content:space-between;font-size:0.78rem;margin-bottom:6px;color:var(--dim)}
.xp-info .xp-level{color:#396BF6;font-weight:900;font-size:0.9rem}
.xp-bar-outer{
  height:14px;border-radius:10px;background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.1);overflow:hidden;position:relative;
}
.xp-bar-inner{
  height:100%;border-radius:10px;
  background:linear-gradient(90deg,#396DFF,#54D0E3,#BCE6F2);
  transition:width 0.8s cubic-bezier(0.25,0.46,0.45,0.94);position:relative;
  overflow:hidden;
}
.xp-bar-inner::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(
    -45deg,
    transparent,transparent 6px,
    rgba(255,255,255,0.12) 6px,rgba(255,255,255,0.12) 12px
  );
  animation:xpStripes 0.8s linear infinite;
  border-radius:10px;
}
@keyframes xpStripes{0%{transform:translateX(0)}100%{transform:translateX(17px)}}
.xp-bar-inner::before{
  content:'';position:absolute;top:0;left:0;right:0;height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,0.3),transparent);
  border-radius:10px 10px 0 0;
}

/* === DAILY CHALLENGE === */
.daily-card{
  max-width:500px;margin:0 auto 30px;
  background:linear-gradient(160deg,rgba(255,214,10,0.08),rgba(255,59,107,0.08));
  border:2px solid rgba(255,214,10,0.3);border-radius:18px;padding:20px;
  text-align:center;position:relative;overflow:hidden;
}
.daily-card::before{
  content:'';position:absolute;top:-50%;right:-50%;width:200%;height:200%;
  background:radial-gradient(circle,rgba(255,214,10,0.06),transparent 60%);pointer-events:none;
}
.daily-badge{
  display:inline-block;background:rgba(255,214,10,0.15);border:1px solid rgba(255,214,10,0.3);
  color:#396BF6;font-size:0.7rem;font-weight:800;padding:3px 10px;border-radius:12px;margin-bottom:8px;
}
.daily-question{font-size:1.05rem;font-weight:700;margin:10px 0;line-height:1.5}
.daily-options{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.daily-opt{
  background:rgba(255,255,255,0.06);border:2px solid rgba(255,255,255,0.12);
  border-radius:12px;padding:12px;cursor:pointer;font-size:0.9rem;font-weight:600;
  transition:all 0.2s;text-align:left;color:var(--white);font-family:inherit;
}
.daily-opt:hover{border-color:#396BF6;background:rgba(255,214,10,0.08);transform:translateX(4px)}
.daily-opt.correct{border-color:#06d6a0;background:rgba(6,214,160,0.15);color:#06d6a0}
.daily-opt.wrong{border-color:#ff3b6b;background:rgba(255,59,107,0.1);color:#ff3b6b}
.daily-opt:disabled{cursor:default;transform:none!important}
.daily-reward{font-size:0.85rem;font-weight:700;margin-top:10px;min-height:1.2em}

/* === SPARKY CHATBOT === */
@keyframes mascotBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
#sparkyBtn:hover{transform:scale(1.12)!important}
#sparkyChat{font-family:'Instrument Sans',system-ui,sans-serif}
#sparkyMessages::-webkit-scrollbar{width:4px}
#sparkyMessages::-webkit-scrollbar-thumb{background:rgba(57,107,246,0.2);border-radius:4px}

/* === LEADERBOARD === */
.lb-section{max-width:500px;margin:30px auto;text-align:center}
.lb-title{font-size:1.3rem;font-weight:900;color:#4cc9f0;margin-bottom:14px}
.lb-table{width:100%;border-collapse:collapse}
.lb-table th{
  font-size:0.7rem;text-transform:uppercase;letter-spacing:1px;
  color:var(--dim);padding:8px;text-align:left;border-bottom:1px solid var(--border);
}
.lb-table td{padding:10px 8px;border-bottom:1px solid rgba(255,255,255,0.04);font-size:0.88rem}
.lb-rank{font-weight:900;width:36px;text-align:center}
.lb-name{font-weight:700}
.lb-xp{color:#396BF6;font-weight:800;text-align:right}
.lb-you{background:rgba(76,201,249,0.08);border-radius:10px}
.lb-medal{font-size:1.1rem}

/* === FRIENDS === */
.friends-section{max-width:500px;margin:20px auto;text-align:center}
.friends-title{font-size:1.1rem;font-weight:900;color:#396BF6;margin-bottom:12px}
.friend-row{
  display:flex;align-items:center;gap:12px;padding:10px;
  background:rgba(255,255,255,0.03);border:1px solid var(--border);
  border-radius:12px;margin-bottom:8px;text-align:left;
}
.friend-avatar{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,#396DFF,#ff70a6);
  display:flex;align-items:center;justify-content:center;
  font-size:0.75rem;font-weight:900;color:#fff;flex-shrink:0;
}
.friend-info{flex:1}
.friend-name{font-weight:700;font-size:0.88rem}
.friend-status{font-size:0.72rem;color:var(--dim)}

/* === AVATAR BUILDER === */
.avatar-preview{
  width:100px;height:100px;border-radius:50%;margin:0 auto 12px;
  background:linear-gradient(135deg,#4cc9f0,#396DFF);
  display:flex;align-items:center;justify-content:center;font-size:2.8rem;
  border:3px solid #4cc9f0;position:relative;overflow:hidden;
}
.avatar-options{
  display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:8px 0;
}
.avatar-opt{
  width:40px;height:40px;border-radius:10px;border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;
  cursor:pointer;transition:all 0.2s;background:rgba(255,255,255,0.04);
}
.avatar-opt:hover{border-color:#4cc9f0;transform:scale(1.1)}
.avatar-opt.selected{border-color:#396BF6;background:rgba(255,214,10,0.15)}

/* === NOTIFICATION CENTER === */
.notif-bell{
  position:relative;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
  cursor:pointer;transition:all 0.2s;
}
.notif-bell:hover{background:rgba(255,255,255,0.15);transform:scale(1.08)}
.notif-badge{
  position:absolute;top:-2px;right:-2px;background:#ff3b6b;color:#fff;
  font-size:0.6rem;font-weight:900;width:16px;height:16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.notif-panel{
  position:fixed;top:56px;right:14px;width:300px;max-height:400px;overflow-y:auto;
  background:var(--card);border:2px solid var(--border);border-radius:16px;
  box-shadow:0 16px 48px rgba(0,0,0,0.5);z-index:1000;display:none;
}
.notif-panel.show{display:block;animation:pop 0.2s}
.notif-header{padding:12px 16px;border-bottom:1px solid var(--border);font-weight:800;font-size:0.9rem;color:var(--blue)}
.notif-item{
  padding:10px 16px;border-bottom:1px solid rgba(255,255,255,0.04);
  font-size:0.82rem;display:flex;gap:10px;align-items:flex-start;
}
.notif-item:last-child{border-bottom:none}
.notif-item .ni-icon{font-size:1.2rem;flex-shrink:0}
.notif-item .ni-text{flex:1;color:#c4b5d4;line-height:1.4}
.notif-item .ni-time{font-size:0.65rem;color:#666;white-space:nowrap}
.notif-empty{padding:20px;text-align:center;color:var(--dim);font-size:0.85rem}

/* === POWER-UPS SHOP === */
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;max-width:600px;margin:0 auto}
.shop-item{
  background:linear-gradient(160deg,rgba(243,245,247,0.9),rgba(255,255,255,0.85));
  border:2px solid rgba(208,210,214,0.5);border-radius:14px;padding:14px;text-align:center;
  cursor:pointer;transition:all 0.2s;
}
.shop-item:hover{border-color:#396BF6;transform:translateY(-3px);box-shadow:0 8px 20px rgba(255,214,10,0.15)}
.shop-icon{font-size:2rem;margin-bottom:4px}
.shop-name{font-weight:800;font-size:0.82rem}
.shop-cost{font-size:0.75rem;color:#396BF6;font-weight:700;margin-top:4px}
.shop-owned{font-size:0.7rem;color:#06d6a0;margin-top:4px;font-weight:700}

/* === STATS DASHBOARD === */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;max-width:600px;margin:10px auto}
.stat-card{
  background:rgba(243,245,247,0.8);border:1px solid rgba(208,210,214,0.5);
  border-radius:14px;padding:14px;text-align:center;
}
.stat-card .sc-value{font-size:1.6rem;font-weight:900;color:#396BF6}
.stat-card .sc-label{font-size:0.72rem;color:var(--dim);margin-top:4px}
.xp-chart{
  max-width:500px;height:80px;margin:14px auto;background:rgba(243,245,247,0.6);
  border:1px solid rgba(208,210,214,0.5);border-radius:12px;position:relative;overflow:hidden;padding:8px;
}
.xp-chart-bar{
  display:inline-block;width:12%;margin:0 0.5%;border-radius:4px 4px 0 0;
  background:linear-gradient(180deg,#396BF6,#54D0E3);vertical-align:bottom;
  transition:height 0.4s;min-height:4px;
}

/* === CUSTOM THEMES === */
.theme-grid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0}
.theme-btn{
  width:44px;height:44px;border-radius:12px;cursor:pointer;border:2px solid transparent;
  transition:all 0.2s;position:relative;overflow:hidden;
}
.theme-btn:hover{transform:scale(1.1)}
.theme-btn.active{border-color:#fff;box-shadow:0 0 12px rgba(255,255,255,0.3)}

/* Music player removed */

/* === ANIMATED TRANSITIONS === */
.fade-in{animation:fadeIn 0.4s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.slide-up{animation:slideUp 0.3s ease}
@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

/* === CONFETTI & CELEBRATIONS === */
.confetti{position:fixed;width:10px;height:10px;border-radius:2px;z-index:9999;pointer-events:none}
@keyframes confettiDrop{
  0%{transform:translateY(-10vh) rotate(0deg);opacity:1}
  100%{transform:translateY(110vh) rotate(720deg);opacity:0}
}
.firework{
  position:fixed;width:6px;height:6px;border-radius:50%;z-index:9999;pointer-events:none;
  animation:fireworkBurst 0.8s ease-out forwards;
}
@keyframes fireworkBurst{
  0%{transform:scale(1);opacity:1}
  100%{transform:scale(0);opacity:0}
}
.screen-shake{animation:shake 0.3s ease}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* === SEASONAL EVENT BANNER === */
.event-banner{
  max-width:500px;margin:0 auto 20px;
  border-radius:16px;padding:16px;text-align:center;position:relative;overflow:hidden;
  animation:fadeIn 0.5s ease;
}
.event-banner .eb-title{font-size:1.1rem;font-weight:900;margin-bottom:4px}
.event-banner .eb-desc{font-size:0.82rem;opacity:0.85;line-height:1.4}
.event-banner .eb-timer{font-size:0.75rem;margin-top:8px;font-weight:700;opacity:0.7}

/* === MINI GAMES === */
.minigames-section{max-width:600px;margin:30px auto;text-align:center}
.minigames-title{font-size:1.3rem;font-weight:900;color:#06d6a0;margin-bottom:14px}
.minigame-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.minigame-card{
  background:linear-gradient(160deg,rgba(243,245,247,0.9),rgba(255,255,255,0.85));
  border:2px solid rgba(208,210,214,0.5);border-radius:14px;padding:16px;
  cursor:pointer;transition:all 0.2s;text-align:center;
}
.minigame-card:hover{border-color:#06d6a0;transform:translateY(-3px);box-shadow:0 8px 20px rgba(6,214,160,0.2)}
.mg-icon{font-size:2rem;margin-bottom:6px}
.mg-name{font-weight:800;font-size:0.85rem;color:#06d6a0}
.mg-desc{font-size:0.7rem;color:var(--dim);margin-top:4px}
.mg-best{font-size:0.65rem;color:#396BF6;margin-top:6px;font-weight:700}

/* Mini game modal */
.mg-modal{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,0.9);z-index:1001;
  align-items:center;justify-content:center;padding:16px;
}
.mg-modal.show{display:flex}
.mg-game{
  background:linear-gradient(160deg,rgba(220,230,255,0.97),rgba(235,240,255,0.97));border:2px solid #06d6a0;
  border-radius:20px;padding:24px;max-width:400px;width:100%;text-align:center;
  box-shadow:0 20px 60px rgba(6,214,160,0.3);position:relative;
}
.mg-close{
  position:absolute;top:12px;right:14px;background:none;border:none;
  color:#5F6266;font-size:1.4rem;cursor:pointer;
}
.mg-timer{font-size:2rem;font-weight:900;color:#396BF6;margin:10px 0}
.mg-score{font-size:1rem;color:#06d6a0;font-weight:700}
.mg-area{margin:16px 0;min-height:120px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px}
.mg-btn{
  padding:14px 24px;border-radius:12px;border:2px solid #06d6a0;
  background:rgba(6,214,160,0.1);color:#06d6a0;font-size:1rem;font-weight:800;
  cursor:pointer;transition:all 0.15s;font-family:inherit;
}
.mg-btn:hover{background:rgba(6,214,160,0.2);transform:scale(1.05)}
.mg-btn.start{background:linear-gradient(90deg,#06d6a0,#4cc9f0);color:#0B1220;border:0;font-size:1.1rem;padding:14px 32px}

/* Memory tiles */
.mem-tile{
  width:60px;height:60px;border-radius:10px;border:2px solid var(--border);
  background:var(--card);display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;cursor:pointer;transition:all 0.2s;
}
.mem-tile.flipped{border-color:#4cc9f0;background:rgba(76,201,249,0.1)}
.mem-tile.matched{border-color:#06d6a0;background:rgba(6,214,160,0.15);cursor:default}

/* === ACHIEVEMENTS === */
.achieve-section{margin-top:40px;text-align:center}
.achieve-title{font-size:1.5rem;font-weight:900;margin-bottom:16px;color:#396BF6}
.achieve-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:12px;max-width:900px;margin:0 auto;
}
.badge-card{
  background:linear-gradient(160deg,rgba(243,245,247,0.9),rgba(255,255,255,0.85));
  border:2px solid rgba(208,210,214,0.5);border-radius:16px;padding:16px 12px;
  text-align:center;transition:all 0.3s;position:relative;overflow:hidden;
}
.badge-card.earned{border-color:#396BF6;box-shadow:0 4px 20px rgba(255,214,10,0.2)}
.badge-card.earned:hover{transform:translateY(-4px);box-shadow:0 8px 30px rgba(255,214,10,0.35)}
.badge-card.locked{opacity:0.4;filter:grayscale(0.6)}
.badge-icon{font-size:2.2rem;margin-bottom:6px}
.badge-name{font-size:0.78rem;font-weight:800;color:var(--white)}
.badge-desc{font-size:0.65rem;color:var(--dim);margin-top:4px;line-height:1.3}
.badge-card.locked .badge-icon::after{content:'🔒';font-size:0.9rem;position:absolute;bottom:2px;right:2px}

/* === PROFILE MODAL === */
.profile-stat{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--border);font-size:0.88rem;
}
.profile-stat:last-child{border-bottom:none}
.profile-stat-label{color:var(--dim)}
.profile-stat-value{color:var(--white);font-weight:700}

/* === MOBILE FIX === */
@media(max-width:520px){
  /* Hide device picker — not needed on mobile */
  #devicePicker{display:none!important}

  /* Stack: topLeftBar centered on row 1 */
  #topLeftBar{
    top:6px!important;left:50%!important;right:auto!important;
    transform:translateX(-50%);
    gap:6px!important;flex-wrap:nowrap!important;max-width:none!important;
  }
  #topLeftBar select{padding:5px 10px!important;font-size:0.72rem!important;border-radius:12px!important}
  #topLeftBar button{padding:5px 10px!important;font-size:0.72rem!important;border-radius:12px!important}

  /* Stack: blBar centered on row 2, below topLeftBar */
  #blBar{
    top:42px!important;left:50%!important;right:auto!important;
    transform:translateX(-50%);
    gap:5px!important;font-size:0.7rem!important;padding:4px 10px!important;
  }
  #blBar button,#blBar a{padding:4px 8px!important;font-size:0.65rem!important}
  #blBar span{font-size:0.65rem!important}

  .achieve-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
  .badge-card{padding:12px 8px}
  .badge-icon{font-size:1.8rem}
}

/* Extra-small phones */
@media(max-width:390px){
  #topLeftBar{gap:4px!important}
  #topLeftBar select{padding:4px 8px!important;font-size:0.66rem!important}
  #topLeftBar button{padding:4px 8px!important;font-size:0.66rem!important}
  #blBar{gap:3px!important;padding:3px 8px!important;font-size:0.62rem!important}
  #blBar button,#blBar a{padding:3px 6px!important;font-size:0.58rem!important}
}

/* === WELCOME TUTORIAL === */
.tutorial-overlay{
  position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,0.92);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity 0.4s;pointer-events:none;
}
.tutorial-overlay.active{opacity:1;pointer-events:all}
.tutorial-box{
  background:linear-gradient(160deg,rgba(220,230,255,0.97),rgba(235,240,255,0.97));border:2px solid #396BF6;
  border-radius:24px;padding:36px;max-width:420px;width:90%;text-align:center;
  transform:scale(0.85);transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.tutorial-overlay.active .tutorial-box{transform:scale(1)}
.tut-icon{font-size:4rem;margin-bottom:12px;animation:float 3s ease-in-out infinite}
.tut-title{font-family:'Fredoka','Instrument Sans',sans-serif;font-size:1.8rem;font-weight:700;background:linear-gradient(90deg,#6C5CE7,#00B4D8);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:8px}
.tut-text{font-size:0.9rem;color:#5F6266;line-height:1.6;margin-bottom:20px}
.tut-dots{display:flex;gap:8px;justify-content:center;margin-bottom:16px}
.tut-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.15);transition:all 0.3s}
.tut-dot.active{background:#396BF6;transform:scale(1.3)}
.tut-btn{
  padding:12px 32px;border-radius:14px;border:none;font-weight:900;font-size:1rem;
  cursor:pointer;font-family:inherit;transition:all 0.2s;
  background:linear-gradient(90deg,#396BF6,#54D0E3);color:#0B1220;
}
.tut-btn:hover{transform:scale(1.05);box-shadow:0 6px 20px rgba(255,214,10,0.4)}
.tut-skip{
  display:block;margin:10px auto 0;background:none;border:none;color:#5F6266;
  font-size:0.78rem;cursor:pointer;font-family:inherit;
}
.tut-skip:hover{color:#fff}

/* === SPIN WHEEL === */
.wheel-wrap{max-width:300px;margin:0 auto;position:relative}
.wheel-canvas{border-radius:50%;border:4px solid #396BF6;box-shadow:0 0 30px rgba(255,214,10,0.3)}
.wheel-pointer{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  font-size:2rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5));z-index:2;
}
.wheel-btn{
  margin-top:14px;padding:14px 36px;border-radius:16px;border:none;
  background:linear-gradient(90deg,#396BF6,#54D0E3);color:#0B1220;
  font-weight:900;font-size:1.1rem;cursor:pointer;font-family:inherit;
  box-shadow:0 6px 20px rgba(255,214,10,0.3);transition:all 0.2s;
}
.wheel-btn:hover{transform:scale(1.05)}
.wheel-btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}

/* === STREAK REWARDS === */
.streak-bar{
  max-width:500px;margin:0 auto 20px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;
}
.streak-day{
  width:48px;height:48px;border-radius:14px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;font-size:0.65rem;font-weight:800;
  border:2px solid rgba(208,210,214,0.5);background:rgba(243,245,247,0.6);
  transition:all 0.3s;
}
.streak-day.reached{border-color:#396BF6;background:rgba(255,214,10,0.12);color:#396BF6}
.streak-day.milestone{border-color:#ff3b6b;background:rgba(255,59,107,0.12)}
.streak-day .sd-icon{font-size:1.1rem}

/* === WEEKLY GOAL === */
.weekly-goal{
  max-width:400px;margin:0 auto 20px;background:rgba(76,201,240,0.06);
  border:2px solid rgba(76,201,240,0.2);border-radius:16px;padding:16px;text-align:center;
}
.wg-bar{height:12px;border-radius:8px;background:rgba(255,255,255,0.08);overflow:hidden;margin-top:8px}
.wg-fill{height:100%;border-radius:8px;background:linear-gradient(90deg,#4cc9f0,#06d6a0);transition:width 0.6s}

/* === SEARCH BAR === */
.search-wrap{max-width:500px;margin:0 auto 24px;position:relative}
.search-input{
  width:100%;padding:14px 20px 14px 44px;border-radius:16px;
  border:2px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.04);
  color:var(--white);font-size:0.95rem;font-family:inherit;
  transition:all 0.3s;backdrop-filter:blur(8px);
}
.search-input:focus{border-color:#396BF6;outline:none;box-shadow:0 0 20px rgba(57,107,246,0.15)}
.search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:1rem;opacity:0.5}

/* === ZONE PROGRESS === */
.zone-progress{
  display:flex;gap:4px;margin-top:8px;align-items:center;position:relative;
}
.zp-bar{flex:1;height:6px;border-radius:4px;background:rgba(255,255,255,0.08);overflow:hidden}
.zp-fill{height:100%;border-radius:4px;background:var(--area-color);transition:width 0.5s}
.zp-text{font-size:0.7rem;color:var(--dim);min-width:32px;text-align:right}

/* === STUDY TIMER === */
.timer-section{
  max-width:350px;margin:0 auto 24px;background:rgba(255,59,107,0.06);
  border:2px solid rgba(255,59,107,0.2);border-radius:16px;padding:16px;text-align:center;
}
.timer-display{font-size:2.8rem;font-weight:900;color:#ff3b6b;font-variant-numeric:tabular-nums}
.timer-btns{display:flex;gap:8px;justify-content:center;margin-top:10px}
.timer-btn{
  padding:8px 18px;border-radius:12px;border:none;font-weight:800;
  cursor:pointer;font-family:inherit;font-size:0.85rem;transition:all 0.2s;
}

/* === FUN FACTS TICKER === */
.facts-ticker{
  max-width:600px;margin:0 auto 20px;overflow:hidden;height:28px;position:relative;
}
.facts-inner{
  animation:tickerScroll 30s linear infinite;white-space:nowrap;
  font-size:0.82rem;color:var(--dim);
}
@keyframes tickerScroll{0%{transform:translateX(100%)}100%{transform:translateX(-200%)}}

/* === QUOTE OF THE DAY === */
.quote-card{
  max-width:500px;margin:0 auto 24px;
  background:linear-gradient(160deg,rgba(57,107,246,0.06),rgba(76,201,240,0.08));
  border:1px solid rgba(57,107,246,0.15);border-radius:16px;padding:20px;
  text-align:center;font-style:italic;position:relative;
}
.quote-text{font-size:1rem;line-height:1.6;color:var(--white)}
.quote-author{font-size:0.8rem;color:var(--dim);margin-top:8px;font-style:normal;font-weight:700}

/* === SECTION DIVIDERS === */
.section-divider{
  max-width:700px;margin:48px auto 12px;text-align:center;position:relative;
}
.section-divider::before{
  content:'';position:absolute;top:50%;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent);
}
.section-label{
  display:inline-block;background:var(--bg);padding:4px 24px;position:relative;
  font-size:1.5rem;font-weight:900;letter-spacing:-0.5px;
  border-radius:30px;
}
.section-label .sl-icon{font-size:1.6rem;margin-right:8px}
.section-collapse{
  display:inline-block;margin-left:8px;font-size:0.75rem;color:var(--dim);
  cursor:pointer;transition:all 0.2s;vertical-align:middle;
}
.section-collapse:hover{color:var(--white)}
.section-content{transition:max-height 0.4s ease,opacity 0.3s ease;overflow:hidden}
.section-content.collapsed{max-height:0!important;opacity:0;margin:0;padding:0}
/* Section wrapper cards */
.section-box{
  max-width:700px;margin:0 auto 16px;
  background:rgba(243,245,247,0.8);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(208,210,214,0.5);
  border-radius:24px;padding:24px 20px;
}
@media(max-width:600px){.section-box{padding:16px 12px;border-radius:18px}}

/* Quick Nav Bar */
.quick-nav{
  position:sticky;top:46px;z-index:50;
  display:flex;gap:5px;justify-content:flex-start;flex-wrap:nowrap;
  padding:8px 14px;margin:8px auto 0;max-width:700px;
  background:rgba(255,255,255,0.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-radius:999px;border:1px solid rgba(208,210,214,0.5);
  box-shadow:0 4px 20px rgba(0,0,0,0.06);
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
}
.quick-nav::-webkit-scrollbar{display:none}
.quick-nav a{
  padding:5px 10px;border-radius:999px;font-size:0.65rem;font-weight:500;
  color:var(--dim);text-decoration:none;
  background:rgba(243,245,247,0.6);border:1px solid rgba(208,210,214,0.4);
  transition:all 0.2s;white-space:nowrap;flex-shrink:0;
}
.quick-nav a:hover{background:rgba(57,107,246,0.08);color:#396BF6;transform:translateY(-1px)}

/* Section fade-in on scroll */
.section-box{opacity:0;transform:translateY(20px);transition:opacity 0.5s ease,transform 0.5s ease}
.section-box.visible{opacity:1;transform:translateY(0)}

/* Improved footer */
.footer{
  text-align:center;padding:24px 16px;color:rgba(255,255,255,0.25);font-size:0.75rem;
  border-top:1px solid rgba(255,255,255,0.04);margin-top:30px;
}

/* === LEVEL PICKER === */
.lvl-overlay{
  display:none;position:fixed;inset:0;z-index:1002;background:rgba(0,0,0,0.88);
  align-items:center;justify-content:center;
}
.lvl-overlay.show{display:flex}
.lvl-box{
  background:linear-gradient(160deg,rgba(220,230,255,0.97),rgba(235,240,255,0.97));border-radius:24px;
  padding:28px;max-width:420px;width:92%;text-align:center;position:relative;
  border:2px solid var(--gold);box-shadow:0 20px 60px rgba(255,214,10,0.2);
  animation:lvlPopIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes lvlPopIn{0%{transform:scale(0.85);opacity:0}100%{transform:scale(1);opacity:1}}
.lvl-close{
  position:absolute;top:12px;right:14px;background:none;border:none;
  color:#5F6266;font-size:1.4rem;cursor:pointer;
}
.lvl-close:hover{color:#fff}
.lvl-zone-icon{font-size:3.5rem;margin-bottom:8px}
.lvl-zone-name{font-size:1.3rem;font-weight:900;margin-bottom:4px}
.lvl-zone-sub{font-size:0.82rem;color:var(--dim);margin-bottom:16px}
.lvl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.lvl-btn{
  padding:16px 8px;border-radius:16px;border:2px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.04);cursor:pointer;transition:all 0.25s;
  text-align:center;font-family:inherit;color:var(--white);
}
.lvl-btn:hover{border-color:var(--gold);background:rgba(255,214,10,0.1);transform:translateY(-3px)}
.lvl-btn.selected{border-color:var(--gold);background:rgba(255,214,10,0.15);box-shadow:0 0 16px rgba(255,214,10,0.2)}
.lvl-btn-label{font-size:1.3rem;font-weight:900;color:var(--gold)}
.lvl-btn-sub{font-size:0.7rem;color:var(--dim);margin-top:2px}
.lvl-go{
  padding:14px 40px;border-radius:16px;border:none;font-weight:900;font-size:1.05rem;
  cursor:pointer;font-family:inherit;transition:all 0.2s;
  background:linear-gradient(90deg,#396BF6,#54D0E3);color:#0B1220;
  box-shadow:0 6px 20px rgba(255,214,10,0.3);
}
.lvl-go:hover{transform:scale(1.05)}
.lvl-saved{font-size:0.72rem;color:var(--dim);margin-top:10px}

/* === BATTLE PASS === */
.bp-wrap{max-width:600px;margin:0 auto 24px}
.bp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.bp-title{font-size:1.1rem;font-weight:900;color:#396BF6}
.bp-season{font-size:0.75rem;color:var(--dim);font-weight:700}
.bp-track{display:flex;gap:4px;overflow-x:auto;padding:8px 0;scrollbar-width:thin}
.bp-tier{
  min-width:56px;text-align:center;border-radius:12px;padding:8px 4px;
  background:rgba(243,245,247,0.8);border:2px solid rgba(208,210,214,0.5);
  transition:all 0.3s;flex-shrink:0;
}
.bp-tier.unlocked{border-color:#396BF6;background:rgba(255,214,10,0.1)}
.bp-tier.current{border-color:#ff3b6b;background:rgba(255,59,107,0.12);animation:bpPulse 2s infinite}
@keyframes bpPulse{0%,100%{box-shadow:none}50%{box-shadow:0 0 12px rgba(255,59,107,0.4)}}
.bp-tier-icon{font-size:1.3rem}
.bp-tier-num{font-size:0.6rem;font-weight:800;color:var(--dim);margin-top:2px}
.bp-tier-reward{font-size:0.55rem;color:#396BF6;font-weight:700;margin-top:2px}
.bp-progress{height:8px;border-radius:6px;background:rgba(208,210,214,0.4);margin-top:8px;overflow:hidden}
.bp-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,#396BF6,#ff3b6b);transition:width 0.6s}

/* === PET COMPANION === */
.pet-area{
  position:fixed;bottom:20px;left:20px;z-index:997;
  display:flex;flex-direction:column;align-items:center;cursor:pointer;
}
.pet-sprite{font-size:2.5rem;transition:transform 0.3s;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.4))}
.pet-sprite:hover{transform:scale(1.2) rotate(-5deg)}
.pet-name{font-size:0.65rem;font-weight:800;color:var(--dim);margin-top:2px}
.pet-level{font-size:0.55rem;color:#396BF6;font-weight:700}
.pet-bubble{
  background:var(--card);border:1px solid var(--border);border-radius:12px;
  padding:8px 12px;font-size:0.75rem;color:var(--white);max-width:160px;
  position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  margin-bottom:6px;display:none;text-align:center;
}
.pet-area:hover .pet-bubble{display:block}
.pet-modal{
  display:none;position:fixed;inset:0;z-index:1001;background:rgba(0,0,0,0.85);
  align-items:center;justify-content:center;
}
.pet-modal-inner{
  background:linear-gradient(160deg,rgba(220,230,255,0.97),rgba(235,240,255,0.97));border:2px solid #06d6a0;
  border-radius:24px;padding:28px;max-width:400px;width:90%;text-align:center;
}

/* === LIVE CLOCK === */
.live-clock{
  position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:99;
  font-size:0.72rem;font-weight:700;color:#555;
  background:rgba(255,255,255,0.6);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  padding:4px 14px;border-radius:12px;border:1px solid rgba(255,255,255,0.5);
  font-variant-numeric:tabular-nums;box-shadow:0 2px 8px rgba(0,0,0,0.04);
}

/* === WEATHER EFFECTS === */
.weather-drop{
  position:fixed;width:2px;background:linear-gradient(transparent,rgba(76,201,240,0.4));
  z-index:0;pointer-events:none;animation:rainDrop linear infinite;
}
@keyframes rainDrop{0%{transform:translateY(-10vh);opacity:0}10%{opacity:1}100%{transform:translateY(110vh);opacity:0}}

/* === COMBO SYSTEM === */
.combo-display{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9998;
  font-size:3rem;font-weight:900;pointer-events:none;
  animation:comboPopIn 0.6s ease forwards;
}
@keyframes comboPopIn{
  0%{transform:translate(-50%,-50%) scale(0.3);opacity:0}
  50%{transform:translate(-50%,-50%) scale(1.2);opacity:1}
  100%{transform:translate(-50%,-70%) scale(1);opacity:0}
}

/* === TYPEWRITER === */
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.typewriter-cursor{animation:blink 0.7s infinite;color:#396BF6}

/* === JOURNAL & HOMEWORK === */
.journal-section{max-width:500px;margin:20px auto;text-align:center}
.journal-textarea{
  width:100%;height:100px;border-radius:14px;border:2px solid var(--border);
  background:rgba(255,255,255,0.04);color:var(--white);padding:12px;
  font-family:inherit;font-size:0.85rem;resize:vertical;
}
.journal-textarea:focus{border-color:#396BF6;outline:none}
.journal-entries{text-align:left;margin-top:10px;max-height:200px;overflow-y:auto}
.journal-entry{
  padding:10px;margin-bottom:6px;background:rgba(255,255,255,0.04);
  border-radius:10px;border:1px solid rgba(255,255,255,0.06);font-size:0.82rem;
}
.journal-entry .je-date{font-size:0.7rem;color:var(--dim);margin-bottom:4px}
.hw-list{text-align:left;margin-top:10px}
.hw-item{
  display:flex;align-items:center;gap:8px;padding:8px 10px;margin-bottom:4px;
  background:rgba(255,255,255,0.04);border-radius:10px;font-size:0.85rem;
}
.hw-item.done{opacity:0.5;text-decoration:line-through}
.hw-check{
  width:22px;height:22px;border-radius:6px;border:2px solid var(--border);
  background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:0.75rem;transition:all 0.2s;flex-shrink:0;
}
.hw-check.checked{background:#06d6a0;border-color:#06d6a0;color:#0B1220}

/* === EXTRA STYLES === */
.bl-plan{background:var(--card);border:2px solid var(--border);border-radius:14px;padding:14px 12px;cursor:pointer;text-align:center;transition:all .2s;flex:1;min-width:0}
.bl-plan:hover{border-color:#5F6266;transform:translateY(-2px)}
.bl-plan.selected{border-color:#396BF6;box-shadow:0 6px 24px rgba(255,214,10,0.25);transform:translateY(-3px)}
.bl-plan .plan-icon{font-size:1.6rem;line-height:1}
.bl-plan .plan-name{font-weight:900;font-size:0.95rem;margin:4px 0 2px}
.bl-plan .plan-price{color:#396BF6;font-weight:800;font-size:0.85rem}
.bl-plan .plan-period{color:#5F6266;font-size:0.7rem}
.bl-plan .plan-tag{display:inline-block;font-size:0.6rem;padding:2px 6px;border-radius:8px;margin-top:4px;font-weight:700}
.bl-plan[data-plan=pro] .plan-name{color:#396BF6}
.bl-plan[data-plan=proplus] .plan-name{color:#396BF6}
.bl-plan[data-plan=lifetime] .plan-name{color:#06d6a0}

/* ============================================================
   IMPROVEMENTS — Scroll Reveal, Better Sections, Polish
   ============================================================ */

/* Scroll reveal animation */
.section-box {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
}
.section-box.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered card entrance */
.area-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94),
              box-shadow 0.35s, filter 0.35s, border-color 0.35s;
}
.area-card.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Better section dividers */
.section-divider {
  position: relative;
}
.section-divider::after {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(57,107,246,0.2), rgba(84,208,227,0.2), transparent);
  margin-top: 8px;
  border-radius: 2px;
}

/* Improved section label */
.section-label {
  backdrop-filter: blur(8px);
  transition: transform 0.2s;
}
.section-label:hover {
  transform: scale(1.02);
}

/* Better mini-game cards */
.minigame-card {
  transition: all 0.3s cubic-bezier(0.25,0.46,0.45,0.94) !important;
  position: relative;
  overflow: hidden;
}
.minigame-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(57,107,246,0.08), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.minigame-card:hover::before { opacity: 1; }
.minigame-card:hover {
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow: 0 12px 30px rgba(57,107,246,0.15) !important;
}
.minigame-card:active {
  transform: translateY(-2px) scale(0.98) !important;
}

/* Smooth number counters */
.xp-counter-anim {
  animation: countPop 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes countPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); color: #54D0E3; }
  100% { transform: scale(1); }
}

/* Better daily challenge card */
.daily-card {
  background: linear-gradient(160deg, rgba(57,107,246,0.06), rgba(84,208,227,0.06)) !important;
  border: 2px solid rgba(57,107,246,0.2) !important;
}
.daily-badge {
  background: rgba(57,107,246,0.12) !important;
  border-color: rgba(57,107,246,0.25) !important;
  color: #396BF6 !important;
}

/* Better weekly goal bar */
.wg-fill {
  background: linear-gradient(90deg, #396DFF, #54D0E3) !important;
}

/* Improved toast */
.toast {
  border-color: #396BF6 !important;
  color: #396BF6 !important;
  box-shadow: 0 8px 32px rgba(57,107,246,0.2) !important;
}

/* Quick nav improvements */
.quick-nav a {
  transition: all 0.25s cubic-bezier(0.25,0.46,0.45,0.94);
}
.quick-nav a:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(57,107,246,0.15);
}

/* Better focus states for accessibility */
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 2px solid #54D0E3;
  outline-offset: 2px;
}

/* Smooth page scroll */
html { scroll-behavior: smooth; }

/* Loading skeleton for async content */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, rgba(57,107,246,0.05) 25%, rgba(57,107,246,0.1) 50%, rgba(57,107,246,0.05) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

/* === PET ANIMATIONS === */
.pet-stage {
  position: relative;
  width: 100%;
  height: 140px;
  background: linear-gradient(180deg, rgba(135,206,250,0.15) 0%, rgba(144,238,144,0.2) 100%);
  border-radius: 16px;
  overflow: hidden;
  margin: 8px 0;
}
.pet-stage .ground {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px;
  background: linear-gradient(180deg, #8BC34A, #689F38);
  border-radius: 0 0 16px 16px;
}
.pet-stage .ground::before {
  content: '🌱  🌿  🌸  🌼  🌱';
  position: absolute;
  top: -12px;
  left: 10%;
  font-size: 0.65rem;
  letter-spacing: 8px;
}
.pet-stage .cloud {
  position: absolute;
  font-size: 0.9rem;
  opacity: 0.5;
  animation: petCloudDrift 20s linear infinite;
}
.pet-stage .cloud:nth-child(2) { top: 8px; animation-delay: -7s; font-size: 0.7rem; }
.pet-stage .cloud:nth-child(3) { top: 20px; animation-delay: -14s; font-size: 0.6rem; opacity: 0.3; }
@keyframes petCloudDrift {
  0% { transform: translateX(-40px); }
  100% { transform: translateX(320px); }
}
.pet-actor {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s ease;
  z-index: 2;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.13));
  width: 90px;
  height: 90px;
}
.pet-actor svg { width:100%; height:100%; overflow:visible; }
/* Body part animations */
.pet-tail { transform-origin: 85% 60%; animation: petTailWag 1s ease-in-out infinite; }
@keyframes petTailWag {
  0%,100% { transform: rotate(-10deg); }
  50% { transform: rotate(15deg); }
}
.pet-ear-l { transform-origin: 35% 15%; animation: petEarTwitchL 4s ease-in-out infinite; }
.pet-ear-r { transform-origin: 65% 15%; animation: petEarTwitchR 4s ease-in-out infinite 0.2s; }
@keyframes petEarTwitchL {
  0%,90%,100% { transform: rotate(0deg); }
  93% { transform: rotate(-12deg); }
  96% { transform: rotate(3deg); }
}
@keyframes petEarTwitchR {
  0%,88%,100% { transform: rotate(0deg); }
  91% { transform: rotate(12deg); }
  94% { transform: rotate(-3deg); }
}
.pet-eyes { animation: petBlink 4s ease-in-out infinite; }
@keyframes petBlink {
  0%,42%,46%,100% { transform: scaleY(1); }
  44% { transform: scaleY(0.1); }
}
.pet-body-group { transform-origin: 50% 80%; }
/* Idle breathing */
.pet-idle {
  animation: petBreathe 2.5s ease-in-out infinite;
}
@keyframes petBreathe {
  0%, 100% { transform: translateX(-50%) scaleY(1) scaleX(1); }
  50% { transform: translateX(-50%) scaleY(1.04) scaleX(0.98); }
}
/* Sad idle */
.pet-sad {
  animation: petSad 3s ease-in-out infinite;
}
@keyframes petSad {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
  30% { transform: translateX(-50%) translateY(2px) rotate(-2deg); }
  60% { transform: translateX(-50%) translateY(2px) rotate(2deg); }
}
.pet-sad .pet-tail { animation: petTailSad 3s ease-in-out infinite; }
@keyframes petTailSad { 0%,100%{transform:rotate(-15deg)}50%{transform:rotate(-10deg)} }
.pet-sad .pet-eyes { animation: none; }
/* Happy idle */
.pet-happy {
  animation: petHappyBounce 1s ease-in-out infinite;
}
@keyframes petHappyBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-6px); }
}
.pet-happy .pet-tail { animation: petTailHappy 0.5s ease-in-out infinite; }
@keyframes petTailHappy { 0%,100%{transform:rotate(-15deg)}50%{transform:rotate(25deg)} }
/* Sit animation */
.pet-anim-sit {
  animation: petSit 0.6s ease forwards;
}
@keyframes petSit {
  0% { transform: translateX(-50%) scaleY(1); }
  40% { transform: translateX(-50%) scaleY(0.7) scaleX(1.15) translateY(8px); }
  100% { transform: translateX(-50%) scaleY(0.75) scaleX(1.1) translateY(6px); }
}
/* Roll animation */
.pet-anim-roll {
  animation: petRoll 1s ease-in-out forwards;
}
@keyframes petRoll {
  0% { transform: translateX(-50%) rotate(0deg); }
  25% { transform: translateX(-50%) rotate(90deg) translateY(-5px); }
  50% { transform: translateX(-50%) rotate(180deg) translateY(0); }
  75% { transform: translateX(-50%) rotate(270deg) translateY(-5px); }
  100% { transform: translateX(-50%) rotate(360deg); }
}
/* Dance animation */
.pet-anim-dance {
  animation: petDance 1.2s ease-in-out forwards;
}
@keyframes petDance {
  0% { transform: translateX(-50%) rotate(0deg) translateY(0); }
  10% { transform: translateX(-60%) rotate(-15deg) translateY(-10px); }
  20% { transform: translateX(-40%) rotate(15deg) translateY(0); }
  30% { transform: translateX(-60%) rotate(-15deg) translateY(-12px); }
  40% { transform: translateX(-40%) rotate(15deg) translateY(0); }
  50% { transform: translateX(-55%) rotate(-10deg) translateY(-8px) scaleX(-1); }
  60% { transform: translateX(-45%) rotate(10deg) translateY(0) scaleX(-1); }
  70% { transform: translateX(-55%) rotate(-10deg) translateY(-10px); }
  80% { transform: translateX(-45%) rotate(10deg) translateY(0); }
  90% { transform: translateX(-50%) rotate(0deg) translateY(-15px); }
  100% { transform: translateX(-50%) rotate(0deg) translateY(0); }
}
/* Fetch animation */
.pet-anim-fetch {
  animation: petFetch 1.5s ease-in-out forwards;
}
@keyframes petFetch {
  0% { transform: translateX(-50%) scaleX(1); }
  15% { transform: translateX(-50%) scaleY(0.8) scaleX(1.1) translateY(4px); }
  30% { transform: translateX(80%) scaleX(-1) translateY(-15px); }
  50% { transform: translateX(100%) scaleX(-1) translateY(0); }
  70% { transform: translateX(20%) scaleX(1) translateY(-10px); }
  85% { transform: translateX(-50%) scaleX(1) translateY(-5px); }
  100% { transform: translateX(-50%) scaleX(1) translateY(0); }
}
/* Shake (paw) animation */
.pet-anim-shake {
  animation: petShake 0.8s ease-in-out forwards;
}
@keyframes petShake {
  0% { transform: translateX(-50%) rotate(0deg); }
  20% { transform: translateX(-50%) rotate(-10deg); }
  40% { transform: translateX(-45%) rotate(5deg) translateY(-3px); }
  60% { transform: translateX(-55%) rotate(-5deg) translateY(-3px); }
  80% { transform: translateX(-45%) rotate(5deg); }
  100% { transform: translateX(-50%) rotate(0deg); }
}
/* Spin animation */
.pet-anim-spin {
  animation: petSpin 0.8s ease-in-out forwards;
}
@keyframes petSpin {
  0% { transform: translateX(-50%) rotate(0deg) scale(1); }
  50% { transform: translateX(-50%) rotate(540deg) scale(1.2); }
  100% { transform: translateX(-50%) rotate(720deg) scale(1); }
}
/* Jump animation */
.pet-anim-jump {
  animation: petJump 0.8s ease-in-out forwards;
}
@keyframes petJump {
  0% { transform: translateX(-50%) translateY(0) scaleY(1); }
  15% { transform: translateX(-50%) translateY(4px) scaleY(0.8) scaleX(1.15); }
  40% { transform: translateX(-50%) translateY(-50px) scaleY(1.1) scaleX(0.9); }
  60% { transform: translateX(-50%) translateY(-50px) scaleY(1) scaleX(1); }
  80% { transform: translateX(-50%) translateY(4px) scaleY(0.85) scaleX(1.1); }
  100% { transform: translateX(-50%) translateY(0) scaleY(1); }
}
/* Sleep animation */
.pet-anim-sleep {
  animation: petSleep 2s ease-in-out forwards;
}
@keyframes petSleep {
  0% { transform: translateX(-50%) scaleY(1) rotate(0deg); }
  30% { transform: translateX(-50%) scaleY(0.7) scaleX(1.15) translateY(8px) rotate(-5deg); }
  100% { transform: translateX(-50%) scaleY(0.7) scaleX(1.15) translateY(8px) rotate(-5deg); }
}
/* Sing animation */
.pet-anim-sing {
  animation: petSing 1.2s ease-in-out forwards;
}
@keyframes petSing {
  0%, 100% { transform: translateX(-50%) scaleY(1); }
  10% { transform: translateX(-50%) scaleY(1.12) translateY(-3px); }
  20% { transform: translateX(-50%) scaleY(0.95); }
  30% { transform: translateX(-50%) scaleY(1.1) translateY(-5px); }
  40% { transform: translateX(-50%) scaleY(0.95); }
  50% { transform: translateX(-50%) scaleY(1.15) translateY(-7px); }
  60% { transform: translateX(-50%) scaleY(0.93); }
  70% { transform: translateX(-50%) scaleY(1.1) translateY(-4px); }
  80% { transform: translateX(-50%) scaleY(0.97); }
}
/* Play animation */
.pet-anim-play {
  animation: petPlay 1.4s ease-in-out forwards;
}
@keyframes petPlay {
  0% { transform: translateX(-50%) translateY(0); }
  15% { transform: translateX(-80%) translateY(-8px) rotate(-10deg); }
  30% { transform: translateX(-20%) translateY(0) rotate(10deg); }
  45% { transform: translateX(-70%) translateY(-12px) scaleX(-1); }
  60% { transform: translateX(-30%) translateY(0) scaleX(-1); }
  75% { transform: translateX(-60%) translateY(-6px); }
  90% { transform: translateX(-40%) translateY(-10px); }
  100% { transform: translateX(-50%) translateY(0); }
}
/* Eating animation */
.pet-anim-eat {
  animation: petEat 1s ease-in-out forwards;
}
@keyframes petEat {
  0% { transform: translateX(-50%) scaleY(1); }
  15% { transform: translateX(-50%) scaleY(0.9) translateY(3px); }
  25% { transform: translateX(-50%) scaleY(1.05); }
  35% { transform: translateX(-50%) scaleY(0.9) translateY(3px); }
  45% { transform: translateX(-50%) scaleY(1.05); }
  55% { transform: translateX(-50%) scaleY(0.9) translateY(3px); }
  70% { transform: translateX(-50%) scaleY(1.1) translateY(-5px); }
  100% { transform: translateX(-50%) scaleY(1); }
}
/* Floating emojis for effects */
.pet-particle {
  position: absolute;
  z-index: 5;
  font-size: 1rem;
  pointer-events: none;
  animation: petParticleFloat 1.2s ease-out forwards;
}
@keyframes petParticleFloat {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-50px) scale(1.4); }
}
/* Zzz for sleep */
.pet-zzz {
  position: absolute;
  z-index: 5;
  font-size: 0.9rem;
  pointer-events: none;
  animation: petZzz 2s ease-out forwards;
}
@keyframes petZzz {
  0% { opacity: 0; transform: translateY(0) translateX(0) scale(0.5); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-45px) translateX(20px) scale(1.3) rotate(15deg); }
}
/* Music notes for sing */
.pet-note {
  position: absolute;
  z-index: 5;
  font-size: 0.85rem;
  pointer-events: none;
  animation: petNote 1.5s ease-out forwards;
}
@keyframes petNote {
  0% { opacity: 0; transform: translateY(0) rotate(0deg); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-40px) translateX(var(--nx,15px)) rotate(var(--nr,20deg)); }
}
/* Ball for fetch */
.pet-ball {
  position: absolute;
  z-index: 3;
  font-size: 1.1rem;
  pointer-events: none;
  animation: petBallArc 1.5s ease-in-out forwards;
}
@keyframes petBallArc {
  0% { opacity: 1; transform: translate(0,0); }
  30% { transform: translate(100px, -60px); }
  50% { transform: translate(130px, 0px); opacity: 1; }
  70% { transform: translate(80px, -20px); }
  100% { opacity: 0; transform: translate(0, 0); }
}
/* Hearts for happiness */
.pet-heart {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  animation: petHeartFloat 1.5s ease-out forwards;
}
@keyframes petHeartFloat {
  0% { opacity: 1; transform: translateY(0) scale(0.5); }
  50% { opacity: 1; transform: translateY(-25px) scale(1.2); }
  100% { opacity: 0; transform: translateY(-50px) scale(0.8); }
}
/* Pet button shows actual pet */
#petBtn .pet-btn-sprite {
  animation: petBtnBob 2s ease-in-out infinite;
  font-size: 1.6rem;
  line-height: 1;
}
@keyframes petBtnBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-3px) rotate(-5deg); }
  75% { transform: translateY(-3px) rotate(5deg); }
}

/* Pet skin overlays */
@keyframes petSkinFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-3px); }
}
@keyframes petWingFlap {
  0%, 100% { transform: translateX(-50%) scaleY(1); }
  50% { transform: translateX(-50%) scaleY(0.85); }
}
@keyframes petAuraPulse {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.08); opacity: 0.5; }
}
@keyframes petFlameFlicker {
  0% { transform: translateY(0) scale(1); opacity: 0.9; }
  100% { transform: translateY(-3px) scale(1.15); opacity: 0.6; }
}
@keyframes petRainbowRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}