/* ══════════════════════════════════════════
   VISUAL UPGRADE — DESIGN TOKENS
══════════════════════════════════════════ */
:root {
  --ink:          #08081a;
  --bg:           #05050f;
  --card:         rgba(255,255,255,0.045);
  --card-border:  rgba(255,255,255,0.09);
  --glow-cyan:    #00e8ff;
  --glow-pink:    #ff2070;
  --glow-yellow:  #ffdf00;
  --glow-green:   #00f07a;
  --glow-purple:  #b040ff;
  --glow-orange:  #ff7020;
  --text:         #eef2ff;
  --muted:        rgba(220,228,255,0.50);
  --radius:       20px;
  --font-display: 'Baloo 2', 'Trebuchet MS', 'Arial Rounded MT Bold', Arial, sans-serif;
  --font-body:    'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* Per-topic accent (overridden per card via JS) */
  --topic-accent: #00e8ff;
}

/* ── RESET ── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overscroll-behavior:none;}

/* ── BODY + GRAIN OVERLAY ── */
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  font-style:normal;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
/* Used by auth.js to lock scroll while fullscreen overlays are shown.
   A CSS class avoids inline-style interference with overflow-x:hidden. */
body.scroll-lock{overflow:hidden;}
body::after{
  content:'';pointer-events:none;
  position:fixed;inset:0;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity:.022;
}

/* ── STARFIELD ── */
#starfield{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.star{
  position:absolute;border-radius:50%;background:#fff;
  animation:twinkle var(--dur,3s) ease-in-out infinite var(--delay,0s);
}
@keyframes twinkle{
  0%,100%{opacity:.10;transform:scale(1)}
  50%    {opacity:.85;transform:scale(1.5)}
}

/* ── NEBULA BG ── */
#nebula{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 70% 50% at 15% 25%, rgba(0,232,255,.055) 0%, transparent 65%),
    radial-gradient(ellipse 55% 65% at 85% 75%, rgba(176,64,255,.065) 0%, transparent 65%),
    radial-gradient(ellipse 45% 55% at 50% 50%, rgba(255,32,112,.035) 0%, transparent 65%),
    radial-gradient(ellipse 30% 40% at 70% 10%, rgba(0,240,122,.03)  0%, transparent 60%);
}

/* ══ HEADER ══════════════════════════════ */
header{
  position:sticky;top:0;z-index:200;
  background:rgba(5,5,15,.82);
  backdrop-filter:blur(28px) saturate(1.4);
  -webkit-backdrop-filter:blur(28px) saturate(1.4);
  border-bottom:1px solid rgba(0,232,255,.13);
  padding:10px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  box-shadow:0 1px 0 rgba(0,232,255,.06), 0 8px 32px rgba(0,0,0,.35);
}
.logo-wrap{display:flex;align-items:center;gap:12px;}
.pip-logo-wrap{position:relative;}

.pip-avatar{
  width:44px;height:44px;border-radius:50%;
  background:conic-gradient(from 180deg, #00e8ff, #b040ff, #ff2070, #00e8ff);
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;
  box-shadow:0 0 0 2px rgba(0,232,255,.25), 0 0 24px rgba(0,232,255,.4);
  animation:pipPulse 2.5s ease-in-out infinite;
  cursor:pointer;flex-shrink:0;
  transition:transform .2s;
}
.pip-avatar:hover{transform:scale(1.1) rotate(5deg);}
@keyframes pipPulse{
  0%,100%{box-shadow:0 0 0 2px rgba(0,232,255,.2), 0 0 20px rgba(0,232,255,.3)}
  50%    {box-shadow:0 0 0 3px rgba(0,232,255,.4), 0 0 40px rgba(0,232,255,.6), 0 0 60px rgba(176,64,255,.2)}
}

.logo-text{
  font-family:var(--font-display);font-size:1.35rem;font-weight:800;
  background:linear-gradient(90deg,#00e8ff 0%,#b040ff 50%,#ff2070 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-size:200% auto;
  animation:shimmer 5s linear infinite;
  white-space:nowrap;
  font-style:normal;
}
@keyframes shimmer{0%{background-position:0%}100%{background-position:200%}}
.logo-sub{font-size:.66rem;color:var(--muted);font-weight:600;letter-spacing:2.5px;text-transform:uppercase;margin-top:1px;}

.header-stats{display:flex;gap:7px;flex-wrap:wrap;}
.stat-pill{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.10);
  border-radius:50px;padding:5px 13px;font-size:.80rem;font-weight:700;
  display:flex;align-items:center;gap:5px;white-space:nowrap;
  backdrop-filter:blur(8px);
  transition:all .2s;
}
.stat-pill:hover{background:rgba(255,255,255,.09);}
.stat-pill.glow-cyan  {border-color:rgba(0,232,255,.40);color:var(--glow-cyan); }
.stat-pill.glow-pink  {border-color:rgba(255,32,112,.40);color:var(--glow-pink); }
.stat-pill.glow-yellow{border-color:rgba(255,223,0,.40); color:var(--glow-yellow);}

.header-actions{display:flex;gap:7px;}
.icon-btn{
  width:37px;height:37px;border-radius:11px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.055);
  color:var(--text);font-size:1.05rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .18s;backdrop-filter:blur(6px);
}
.icon-btn:hover{
  background:rgba(0,232,255,.14);
  border-color:rgba(0,232,255,.4);
  transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(0,232,255,.2);
}

/* ══ MODALS ══════════════════════════════ */
.modal-overlay{
  position:fixed;inset:0;z-index:500;
  background:rgba(0,0,0,.72);backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal-box{
  background:linear-gradient(160deg, rgba(14,14,36,.98) 0%, rgba(8,8,24,.98) 100%);
  border:1px solid rgba(255,255,255,.11);
  border-radius:26px;padding:30px;
  max-width:600px;width:calc(100% - 32px);
  max-height:85vh;overflow-y:auto;
  transform:scale(.92) translateY(20px);transition:transform .3s cubic-bezier(.34,1.56,.64,1);
  box-shadow:
    0 32px 80px rgba(0,0,0,.65),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 60px rgba(0,232,255,.06);
}
.modal-overlay.open .modal-box{transform:scale(1) translateY(0);}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.modal-title{font-family:var(--font-display);font-size:1.45rem;font-weight:800;}
.modal-close{
  width:33px;height:33px;border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.06);color:var(--text);font-size:1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.modal-close:hover{background:rgba(255,32,112,.15);border-color:rgba(255,32,112,.4);}

/* ══ PIP CHAT ════════════════════════════ */
#pip-modal .modal-box{max-width:480px;}
.pip-chat-window{
  background:rgba(0,0,0,.35);border-radius:16px;padding:16px;
  min-height:200px;max-height:320px;overflow-y:auto;margin-bottom:14px;
  display:flex;flex-direction:column;gap:10px;
  border:1px solid rgba(0,232,255,.12);
  box-shadow:inset 0 2px 12px rgba(0,0,0,.3);
  scrollbar-width:thin;scrollbar-color:rgba(0,232,255,.3) transparent;
}
.pip-chat-window::-webkit-scrollbar{width:4px;}
.pip-chat-window::-webkit-scrollbar-thumb{background:rgba(0,232,255,.3);border-radius:4px;}
.pip-msg,.user-msg{
  display:flex;gap:10px;align-items:flex-start;
  animation:msgSlide .22s ease;
}
@keyframes msgSlide{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}
.pip-msg{flex-direction:row;}
.user-msg{flex-direction:row-reverse;}
.pip-bubble{
  background:linear-gradient(135deg,rgba(0,232,255,.12),rgba(176,64,255,.08));
  border:1px solid rgba(0,232,255,.22);
  border-radius:4px 14px 14px 14px;
  padding:10px 14px;max-width:82%;
  font-size:.87rem;line-height:1.55;font-weight:500;color:var(--text);
  box-shadow:0 2px 12px rgba(0,232,255,.08);
}
.user-bubble{
  background:linear-gradient(135deg,rgba(176,64,255,.16),rgba(255,32,112,.10));
  border:1px solid rgba(176,64,255,.28);
  border-radius:14px 4px 14px 14px;
  padding:10px 14px;max-width:82%;
  font-size:.87rem;line-height:1.55;font-weight:500;color:var(--text);
}
.pip-avatar-sm{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  background:conic-gradient(from 180deg,#00e8ff,#b040ff,#ff2070,#00e8ff);
  display:flex;align-items:center;justify-content:center;font-size:.9rem;
  box-shadow:0 0 10px rgba(0,232,255,.35);
}
.pip-chat-input{display:flex;gap:8px;}
.pip-input{
  flex:1;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;padding:11px 16px;
  color:var(--text);font-family:var(--font-body);font-size:.9rem;outline:none;
  transition:border-color .2s, box-shadow .2s;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.25);
}
.pip-input:focus{
  border-color:rgba(0,232,255,.55);
  box-shadow:0 0 0 3px rgba(0,232,255,.09), inset 0 1px 4px rgba(0,0,0,.2);
}
.pip-input::placeholder{color:rgba(220,228,255,.3);}
.pip-send{
  background:linear-gradient(135deg,#00e8ff,#b040ff);
  border:none;border-radius:14px;width:44px;height:44px;
  cursor:pointer;font-size:1.1rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,232,255,.35);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s;
  flex-shrink:0;
}
.pip-send:hover{transform:scale(1.1) rotate(8deg);box-shadow:0 6px 22px rgba(0,232,255,.5);}
.pip-typing{display:flex;gap:4px;align-items:center;padding:2px 0;}
.pip-typing span{
  width:7px;height:7px;border-radius:50%;
  background:var(--glow-cyan);
  animation:typingDot 1.2s ease-in-out infinite;
  box-shadow:0 0 6px rgba(0,232,255,.5);
}
.pip-typing span:nth-child(2){animation-delay:.2s;}
.pip-typing span:nth-child(3){animation-delay:.4s;}
@keyframes typingDot{0%,80%,100%{transform:scale(0.55);opacity:.4}40%{transform:scale(1);opacity:1}}

/* ══ LEVEL BAR ═══════════════════════════ */
.level-bar-wrap{max-width:1100px;margin:0 auto 18px;padding:0 24px;}
.level-bar-inner{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;padding:12px 20px;
  display:flex;align-items:center;gap:14px;
  backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.level-badge{
  font-family:var(--font-display);font-size:.95rem;font-weight:800;
  background:linear-gradient(135deg,var(--glow-yellow),var(--glow-pink));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  white-space:nowrap;
}
.xp-bar{
  flex:1;background:rgba(255,255,255,.07);
  border-radius:50px;height:9px;overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.4);
}
.xp-fill{
  height:100%;
  background:linear-gradient(90deg,var(--glow-yellow),var(--glow-pink));
  border-radius:50px;transition:width .6s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 0 10px rgba(255,223,0,.4);
}
.xp-text{font-size:.78rem;font-weight:700;color:var(--muted);white-space:nowrap;}

/* ══ HERO ════════════════════════════════ */
.hero{text-align:center;padding:48px 24px 28px;position:relative;}
.hero-badge{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(0,232,255,.08);
  border:1px solid rgba(0,232,255,.25);
  border-radius:50px;padding:5px 18px;
  font-size:.75rem;font-weight:700;color:var(--glow-cyan);
  letter-spacing:1.5px;text-transform:uppercase;
  margin-bottom:18px;
  animation:heroBadge 3s ease-in-out infinite;
  box-shadow:0 0 20px rgba(0,232,255,.1);
}
@keyframes heroBadge{
  0%,100%{box-shadow:0 0 14px rgba(0,232,255,.15)}
  50%    {box-shadow:0 0 28px rgba(0,232,255,.4), 0 0 50px rgba(0,232,255,.1)}
}
.hero h1{
  font-family:var(--font-display);
  font-size:clamp(2rem,5vw,3.2rem);font-weight:800;
  line-height:1.1;margin-bottom:12px;
}
.hero h1 .line1{display:block;color:var(--text);}
.hero h1 .line2{
  display:block;
  background:linear-gradient(90deg,#00e8ff 0%,#ff2070 45%,#ffdf00 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-size:200% auto;animation:shimmer 4s linear infinite;
}
.hero-sub{color:var(--muted);font-size:1.08rem;font-weight:500;max-width:500px;margin:0 auto 28px;}

/* ── PLAYER SETUP ── */
#player-setup{
  max-width:460px;margin:0 auto 28px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  border-radius:20px;padding:18px 22px;
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center;
  backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.setup-label{font-size:.75rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px;white-space:nowrap;}
.setup-input{
  flex:1;min-width:140px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);
  border-radius:12px;padding:9px 14px;color:var(--text);
  font-family:var(--font-body);font-size:.9rem;outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.setup-input:focus{
  border-color:rgba(0,232,255,.55);
  box-shadow:0 0 0 3px rgba(0,232,255,.08);
}
.avatar-pick{display:flex;gap:5px;}
.av-opt{
  width:34px;height:34px;border-radius:50%;font-size:1.15rem;
  border:2px solid transparent;
  background:rgba(255,255,255,.07);cursor:pointer;
  transition:all .16s;display:flex;align-items:center;justify-content:center;
}
.av-opt:hover{background:rgba(255,255,255,.12);transform:scale(1.1);}
.av-opt.selected{
  border-color:var(--glow-cyan);
  background:rgba(0,232,255,.14);
  box-shadow:0 0 10px rgba(0,232,255,.3);
}

/* ══ TOPICS GRID ═════════════════════════ */
.section-label{
  text-align:center;font-size:.7rem;font-weight:700;color:var(--muted);
  letter-spacing:3px;text-transform:uppercase;margin-bottom:14px;
}
.topics-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:14px;padding:0 24px 8px;
  max-width:1100px;margin:0 auto;
}
.topic-card{
  position:relative;overflow:hidden;border-radius:22px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.035);
  padding:22px 12px 17px;text-align:center;
  cursor:pointer;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s, border-color .2s;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 4px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
}
/* Shimmer sweep on hover */
.topic-card::after{
  content:'';position:absolute;inset:0;border-radius:22px;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.06) 50%,transparent 60%);
  transform:translateX(-100%);transition:transform .55s;
}
.topic-card:hover::after{transform:translateX(100%);}
/* Glow radial */
.topic-card::before{
  content:'';position:absolute;inset:0;border-radius:22px;
  background:radial-gradient(circle at 50% 0%,var(--topic-glow,rgba(0,232,255,.18)),transparent 68%);
  opacity:0;transition:opacity .28s;
}
.topic-card:hover{
  transform:translateY(-9px) scale(1.045);
  border-color:rgba(255,255,255,.17);
  box-shadow:0 16px 48px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.1);
}
.topic-card:hover::before{opacity:1;}
.topic-card.active{
  border-color:var(--glow-cyan);
  box-shadow:0 0 0 1px rgba(0,232,255,.35), 0 0 40px rgba(0,232,255,.18), inset 0 0 24px rgba(0,232,255,.06);
}
.topic-icon{
  font-size:2.8rem;margin-bottom:7px;display:block;
  transition:transform .32s cubic-bezier(.34,1.56,.64,1);
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.4));
}
.topic-card:hover .topic-icon{transform:scale(1.18) rotate(-6deg) translateY(-4px);}
.topic-name{font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--text);line-height:1.2;}
.topic-grade{font-size:.66rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:2px;}
.topic-progress{
  width:100%;height:3px;
  background:rgba(255,255,255,.07);
  border-radius:3px;margin-top:10px;overflow:hidden;
}
.topic-progress-fill{
  height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--glow-cyan),var(--glow-purple));
  width:0%;transition:width .7s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 0 6px rgba(0,232,255,.5);
}
.topic-badge{
  position:absolute;top:9px;right:9px;font-size:.67rem;
  background:rgba(0,232,255,.12);
  border:1px solid rgba(0,232,255,.28);
  border-radius:50px;padding:2px 8px;
  color:var(--glow-cyan);font-weight:700;
}

/* ══ LAB AREA ════════════════════════════ */
#lab-area{max-width:1100px;margin:24px auto 80px;padding:0 24px;}

.lab-panel{display:none;animation:panelIn .42s cubic-bezier(.34,1.56,.64,1);}
.lab-panel.active{display:block;}
@keyframes panelIn{
  from{transform:scale(.93) translateY(18px);opacity:0}
  to  {transform:scale(1)   translateY(0);   opacity:1}
}

.panel-shell{
  background:linear-gradient(160deg, rgba(13,13,32,.9) 0%, rgba(7,7,20,.92) 100%);
  border:1px solid rgba(255,255,255,.09);
  border-radius:28px;overflow:hidden;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:
    0 24px 70px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 1px 0 rgba(255,255,255,.08) inset;
}

.panel-header{
  padding:20px 26px 16px;
  background:linear-gradient(135deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.018) 100%);
  border-bottom:1px solid rgba(255,255,255,.07);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  position:relative;overflow:hidden;
}
/* Subtle diagonal highlight */
.panel-header::before{
  content:'';position:absolute;top:-40px;left:-40px;
  width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle, rgba(0,232,255,.06), transparent 70%);
  pointer-events:none;
}
.panel-title-area{display:flex;align-items:center;gap:13px;}
.panel-icon{
  font-size:2.3rem;
  filter:drop-shadow(0 4px 12px rgba(0,232,255,.3));
}
.panel-title{
  font-family:var(--font-display);font-size:1.55rem;font-weight:800;
  background:linear-gradient(135deg,#eef2ff,#c0d0ff);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.panel-desc{font-size:.92rem;color:var(--muted);font-weight:500;margin-top:2px;}
.panel-actions{display:flex;gap:8px;flex-shrink:0;}

.ask-pip-btn{
  background:linear-gradient(135deg,rgba(0,232,255,.15),rgba(176,64,255,.15));
  border:1px solid rgba(0,232,255,.38);color:var(--glow-cyan);
  border-radius:50px;padding:8px 18px;cursor:pointer;font-family:var(--font-body);
  font-size:.88rem;font-weight:700;letter-spacing:.5px;transition:all .22s;
  display:flex;align-items:center;gap:6px;backdrop-filter:blur(4px);
}
.ask-pip-btn:hover{
  background:linear-gradient(135deg,rgba(0,232,255,.26),rgba(176,64,255,.26));
  box-shadow:0 0 24px rgba(0,232,255,.28);
  transform:translateY(-1px);
}

/* ══ TABS ════════════════════════════════ */
.tab-bar{
  display:flex;gap:3px;padding:12px 22px 0;
  background:rgba(255,255,255,.018);
  border-bottom:1px solid rgba(255,255,255,.055);
  overflow-x:auto;
}
.tab-bar::-webkit-scrollbar{height:0;}
.tab-btn{
  font-family:var(--font-body);font-weight:700;font-size:.9rem;
  background:none;border:none;cursor:pointer;padding:9px 17px;
  border-radius:11px 11px 0 0;color:var(--muted);
  transition:all .16s;white-space:nowrap;letter-spacing:.3px;
  position:relative;
}
.tab-btn::after{
  content:'';position:absolute;bottom:0;left:15%;right:15%;
  height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--glow-cyan),var(--glow-purple));
  transform:scaleX(0);transition:transform .2s;
}
.tab-btn.active{
  background:linear-gradient(180deg,rgba(0,232,255,.10),rgba(176,64,255,.08));
  color:var(--text);border:1px solid rgba(0,232,255,.20);border-bottom:1px solid transparent;
}
.tab-btn.active::after{transform:scaleX(1);}
.tab-btn:hover:not(.active){background:rgba(255,255,255,.045);color:var(--text);}
.tab-content{display:none;padding:24px;}
.tab-content.active{display:block;animation:fadeIn .22s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}

/* ══ EXPERIMENT LAYOUT ═══════════════════ */
.exp-wrap{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;}
@media(max-width:640px){.exp-wrap{grid-template-columns:1fr;}}

/* ── PLANT FACTORS INTRO ── */
.pf-intro{
  margin-bottom:20px;padding:18px 16px 14px;
  background:rgba(0,255,100,.04);
  border:1px solid rgba(0,255,100,.12);
  border-radius:18px;
}
.pf-intro-title{
  font-family:var(--font-display);font-size:1.3rem;font-weight:800;
  color:var(--glow-green);text-align:center;margin-bottom:14px;
}
.pf-intro--disc .pf-intro-title{font-size:1.05rem;color:var(--text);margin-bottom:4px;}
.pf-intro-subtitle{
  font-size:.82rem;color:var(--muted);text-align:center;margin-bottom:14px;line-height:1.5;
}
.pf-factor-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.pf-factor-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:16px 10px 14px;border-radius:14px;
  background:rgba(255,255,255,.04);
  border:2px solid rgba(255,255,255,.08);
  border-top:3px solid var(--pf-c);
  transition:transform .2s,box-shadow .2s;
}
.pf-factor-card{cursor:pointer;}
.pf-factor-card:hover{transform:translateY(-4px);box-shadow:0 8px 28px rgba(0,0,0,.35),0 0 16px color-mix(in srgb,var(--pf-c) 30%,transparent);}
.pf-factor-card:active{transform:translateY(-1px);}
.pf-factor-card .pf-factor-tap-hint{font-size:.68rem;color:var(--pf-c);opacity:.7;margin-top:8px;font-weight:700;letter-spacing:.4px;}
/* Factor detail modal body */
.pf-detail-section{margin-bottom:18px;}
.pf-detail-label{font-family:var(--font-display);font-size:.78rem;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.pf-detail-examples{display:flex;flex-direction:column;gap:8px;}
.pf-detail-example{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.04);border-left:3px solid var(--pf-ex-c,#fff);}
.pf-detail-example-icon{font-size:1.4rem;flex-shrink:0;line-height:1.2;}
.pf-detail-example-text{font-size:.82rem;color:var(--text);line-height:1.5;}
.pf-detail-example-text strong{font-weight:700;}
.pf-factor-icon{font-size:2.8rem;line-height:1;margin-bottom:8px;}
.pf-factor-name{
  font-family:var(--font-display);font-size:1rem;font-weight:800;
  color:var(--pf-c);margin-bottom:6px;
}
.pf-factor-desc{font-size:.82rem;color:var(--muted);line-height:1.5;}
.pf-intro-cta{
  text-align:center;margin-top:14px;font-size:.88rem;
  font-weight:700;color:var(--glow-green);opacity:.8;
}
/* Discoverer: horizontal card layout */
.pf-intro--disc .pf-factor-card{
  flex-direction:row;align-items:flex-start;text-align:left;gap:10px;padding:12px 14px;
}
.pf-intro--disc .pf-factor-icon{font-size:1.9rem;margin-bottom:0;flex-shrink:0;}
.pf-intro--disc .pf-factor-name{font-size:.88rem;margin-bottom:3px;}
.pf-intro--disc .pf-factor-desc{font-size:.78rem;}
@media(max-width:500px){
  .pf-factor-grid{grid-template-columns:1fr;}
  .pf-intro--disc .pf-factor-card{flex-direction:column;align-items:center;text-align:center;}
}

.stage{
  border-radius:20px;
  min-height:300px;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,rgba(0,0,0,.55),rgba(4,4,18,.7));
  border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 8px 32px rgba(0,0,0,.35);
  touch-action:manipulation;
}
/* Inner vignette */
.stage::after{
  content:'';position:absolute;inset:0;border-radius:20px;pointer-events:none;
  box-shadow:inset 0 0 40px rgba(0,0,0,.3);
}
.stage canvas{border-radius:16px;display:block;max-width:100%;}

/* ══ CONTROLS ════════════════════════════ */
.ctrl-panel{display:flex;flex-direction:column;gap:15px;}
.ctrl-group{display:flex;flex-direction:column;gap:5px;}
.ctrl-label{
  font-size:.8rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:1.8px;
}
.ctrl-row{display:flex;align-items:center;gap:10px;}
.ctrl-val{
  font-family:var(--font-display);font-size:1rem;font-weight:700;
  min-width:52px;text-align:right;color:var(--glow-cyan);
  text-shadow:0 0 12px rgba(0,232,255,.4);
}

/* Neon range slider */
input[type=range].neon-range{
  -webkit-appearance:none;width:100%;height:5px;
  border-radius:5px;outline:none;cursor:pointer;
  background:linear-gradient(90deg,rgba(0,232,255,.5),rgba(176,64,255,.4));
  box-shadow:0 0 8px rgba(0,232,255,.15);
}
input[type=range].neon-range::-webkit-slider-thumb{
  -webkit-appearance:none;width:19px;height:19px;border-radius:50%;
  background:linear-gradient(135deg,#fff,#c8eeff);
  border:2.5px solid var(--glow-cyan);cursor:pointer;
  box-shadow:0 0 14px rgba(0,232,255,.7), 0 2px 6px rgba(0,0,0,.4);
  transition:transform .15s;
}
input[type=range].neon-range::-webkit-slider-thumb:hover{transform:scale(1.15);}
input[type=range].neon-range::-moz-range-thumb{
  width:19px;height:19px;border-radius:50%;
  background:linear-gradient(135deg,#fff,#c8eeff);
  border:2.5px solid var(--glow-cyan);cursor:pointer;
  box-shadow:0 0 14px rgba(0,232,255,.7);
}

/* ══ BUTTONS ═════════════════════════════ */
.btn{
  font-family:var(--font-body);font-weight:700;font-size:.86rem;
  border:none;border-radius:50px;cursor:pointer;padding:10px 22px;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s;
  letter-spacing:.3px;display:inline-flex;align-items:center;gap:6px;
  position:relative;overflow:hidden;
}
/* Shimmer sweep */
.btn::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.18) 50%,transparent 65%);
  transform:translateX(-100%);transition:transform .4s;
}
.btn:hover::after{transform:translateX(100%);}
.btn:hover{transform:translateY(-3px);}
.btn:active{transform:scale(.96);}

.btn-cyan{
  background:linear-gradient(135deg,#00e8ff,#0099bb);color:#000;
  box-shadow:0 4px 20px rgba(0,232,255,.35), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-cyan:hover{box-shadow:0 8px 28px rgba(0,232,255,.5);}
.btn-pink{
  background:linear-gradient(135deg,#ff2070,#bb0044);color:#fff;
  box-shadow:0 4px 20px rgba(255,32,112,.35), inset 0 1px 0 rgba(255,255,255,.15);
}
.btn-pink:hover{box-shadow:0 8px 28px rgba(255,32,112,.5);}
.btn-green{
  background:linear-gradient(135deg,#00f07a,#009944);color:#000;
  box-shadow:0 4px 20px rgba(0,240,122,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-green:hover{box-shadow:0 8px 28px rgba(0,240,122,.5);}
.btn-purple{
  background:linear-gradient(135deg,#b040ff,#7700cc);color:#fff;
  box-shadow:0 4px 20px rgba(176,64,255,.35), inset 0 1px 0 rgba(255,255,255,.15);
}
.btn-purple:hover{box-shadow:0 8px 28px rgba(176,64,255,.5);}
.btn-yellow{
  background:linear-gradient(135deg,#ffdf00,#cc9900);color:#000;
  box-shadow:0 4px 20px rgba(255,223,0,.35), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-yellow:hover{box-shadow:0 8px 28px rgba(255,223,0,.5);}
.btn-ghost{
  background:rgba(255,255,255,.065);
  border:1px solid rgba(255,255,255,.14);
  color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.btn-ghost:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22);}
.btn-row{display:flex;flex-wrap:wrap;gap:8px;}

/* ══ RESULT BOX ══════════════════════════ */
.result-box{
  background:linear-gradient(135deg,rgba(0,232,255,.04),rgba(176,64,255,.03));
  border:1px solid rgba(0,232,255,.14);
  border-radius:14px;padding:13px 15px;
  font-size:1.02rem;font-weight:600;color:var(--text);line-height:1.6;
  min-height:52px;
  box-shadow:inset 0 1px 0 rgba(0,232,255,.05);
  transition:border-color .3s, background .3s;
}

.fact-strip{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px;}
.fact-chip{
  display:inline-block;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.09);
  border-radius:50px;padding:4px 12px;
  font-size:.84rem;font-weight:600;color:var(--muted);
  transition:all .16s;
}
.fact-chip:hover{background:rgba(255,255,255,.09);color:var(--text);}

/* ══ K-2 STORYBOOK STYLES ══════════════════════ */
.lc-story-line{
  display:flex;align-items:flex-start;gap:10px;
  font-size:1.15rem;font-weight:700;color:var(--text);
  line-height:1.45;padding:6px 0;font-style:normal;
}
.lc-story-dot{font-size:1.05rem;flex-shrink:0;margin-top:3px;}
.k2-ans-btn{
  min-height:56px !important;font-size:1.05rem !important;
  padding:11px 16px !important;border-radius:14px !important;
  font-style:normal !important;width:100%;
  text-align:left;margin-bottom:6px;
}

/* ══ QUIZ ════════════════════════════════ */
.quiz-wrap{max-width:560px;margin:0 auto;}
.quiz-prog{background:rgba(255,255,255,.08);border-radius:50px;height:8px;margin-bottom:8px;overflow:hidden;}
.quiz-prog-fill{height:100%;border-radius:50px;background:linear-gradient(90deg,var(--glow-cyan),var(--glow-purple));transition:width .4s;}
.quiz-meta{font-size:.86rem;font-weight:700;color:var(--muted);margin-bottom:16px;}
.quiz-q{font-family:var(--font-display);font-size:1.4rem;font-weight:700;margin-bottom:16px;line-height:1.35;}
.quiz-opts{display:flex;flex-direction:column;gap:8px;}
.quiz-opt{
  background:rgba(255,255,255,.048);
  border:1px solid rgba(255,255,255,.09);
  border-radius:13px;padding:12px 17px;cursor:pointer;
  font-family:var(--font-body);font-weight:600;font-size:1rem;color:var(--text);
  text-align:left;transition:all .18s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  position:relative;overflow:hidden;
}
.quiz-opt::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--glow-cyan),var(--glow-purple));
  transform:scaleY(0);transition:transform .2s;border-radius:2px;
}
.quiz-opt:hover{
  background:rgba(0,232,255,.08);
  border-color:rgba(0,232,255,.28);
  transform:translateX(3px);
}
.quiz-opt:hover::before{transform:scaleY(1);}
.quiz-opt.correct{
  background:rgba(0,240,122,.1);border-color:rgba(0,240,122,.45);color:var(--glow-green);
  box-shadow:0 0 16px rgba(0,240,122,.12);
}
.quiz-opt.wrong{
  background:rgba(255,32,112,.08);border-color:rgba(255,32,112,.38);color:var(--glow-pink);
}
.quiz-fb{min-height:30px;margin:12px 0;font-weight:600;font-size:1rem;line-height:1.55;}
.quiz-end{text-align:center;padding:20px 0;}
.quiz-score-big{font-family:var(--font-display);font-size:3rem;font-weight:800;margin-bottom:8px;}
.quiz-score-msg{font-size:1.05rem;color:var(--muted);margin-bottom:20px;}

/* ── HYPOTHESIS BOX ── */

/* ── SCIENTIFIC METHOD FLOW ── */
.sci-method-wrap{display:flex;flex-direction:column;gap:0;margin-bottom:18px;}

/* Plant parts quiz option buttons */
.ppart-quiz-opt{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;padding:12px 8px;border-radius:14px;
  border:2px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  cursor:pointer;transition:background .18s, border-color .18s, box-shadow .18s, transform .18s;
  min-height:70px;font-family:var(--font-body);
}
.ppart-quiz-opt:hover{
  background:rgba(0,232,255,.08);
  border-color:rgba(0,232,255,.35);
  box-shadow:0 4px 16px rgba(0,232,255,.15);
  transform:translateY(-2px);
}

/* Step tracker */
.sci-steps{display:flex;align-items:center;gap:0;margin-bottom:18px;}
.sci-step{
  display:flex;align-items:center;gap:6px;
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;
  color:var(--muted);transition:color .3s;flex:1;
}
.sci-step.active{color:var(--glow-cyan);}
.sci-step.done{color:var(--glow-green);}
.sci-step-num{
  width:22px;height:22px;border-radius:50%;border:2px solid currentColor;
  display:flex;align-items:center;justify-content:center;font-size:.65rem;
  flex-shrink:0;transition:background .3s;
}
.sci-step.done .sci-step-num{background:var(--glow-green);color:#000;border-color:var(--glow-green);}
.sci-step.active .sci-step-num{background:rgba(0,245,255,.15);}
.sci-step-line{flex:1;height:2px;background:rgba(255,255,255,.08);margin:0 4px;max-width:28px;}
.sci-step.done + .sci-step-line,.sci-step.done ~ .sci-step-line{background:var(--glow-green);}

/* Act cards */
.sci-act{
  border-radius:18px;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  transition:all .3s;
}
.sci-act-header{
  display:flex;align-items:center;gap:10px;padding:12px 16px;
  background:rgba(255,255,255,.04);cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.sci-act-num{
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.78rem;font-weight:800;flex-shrink:0;
  background:rgba(255,255,255,.08);color:var(--muted);
  transition:all .3s;
}
.sci-act.act-done .sci-act-num{background:var(--glow-green);color:#000;}
.sci-act.act-active .sci-act-num{background:linear-gradient(135deg,#00f5ff,#b44fff);color:#fff;}
.sci-act-title{font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--muted);transition:color .3s;flex:1;}
.sci-act.act-active .sci-act-title{color:var(--text);}
.sci-act.act-done .sci-act-title{color:var(--glow-green);}
.sci-act-status{font-size:.82rem;color:var(--muted);}
.sci-act.act-done .sci-act-status{color:var(--glow-green);}
.sci-act-body{display:none;padding:16px;}
.sci-act.act-open .sci-act-body{display:block;animation:fadeIn .2s ease;}

/* Act 1 — Intro */
.exp-intro-card{
  background:rgba(0,245,255,.04);border:1px solid rgba(0,245,255,.12);
  border-radius:14px;padding:16px;margin-bottom:12px;
}
.exp-intro-title{
  font-family:var(--font-display);font-size:1.1rem;font-weight:800;
  margin-bottom:8px;display:flex;align-items:center;gap:8px;
}
.exp-intro-text{font-size:.98rem;color:var(--muted);line-height:1.7;margin-bottom:12px;}
.pip-teaser-card{
  display:flex;gap:10px;align-items:flex-start;
  background:rgba(180,79,255,.08);border:1px solid rgba(180,79,255,.2);
  border-radius:12px;padding:12px 14px;
}
.pip-teaser-avatar{font-size:1.4rem;flex-shrink:0;}
.pip-teaser-text{font-size:.96rem;font-weight:600;color:var(--muted);line-height:1.55;font-style:italic;}

/* Act 2 — Hypothesis */
.hypo-builder{display:flex;flex-direction:column;gap:12px;}
.hypo-starter-row{display:flex;gap:6px;flex-wrap:wrap;}
.hypo-starter-btn{
  background:rgba(255,230,0,.08);border:1px solid rgba(255,230,0,.2);
  border-radius:50px;padding:5px 14px;font-size:.78rem;font-weight:700;
  color:var(--muted);cursor:pointer;transition:all .15s;
  font-family:var(--font-body);
}
.hypo-starter-btn.selected,.hypo-starter-btn:hover{
  background:rgba(255,230,0,.18);border-color:rgba(255,230,0,.5);color:var(--glow-yellow);
}
.hypo-fillins{display:flex;flex-direction:column;gap:8px;}
.hypo-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.hypo-connector{
  font-size:.78rem;font-weight:700;color:var(--muted);
  white-space:nowrap;flex-shrink:0;min-width:54px;
}
.hypo-field{
  flex:1;min-width:100px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);border-radius:10px;
  padding:8px 12px;color:var(--text);font-family:var(--font-body);
  font-size:.83rem;outline:none;transition:border-color .2s;
}
.hypo-field:focus{border-color:rgba(255,230,0,.5);}
.hypo-field::placeholder{color:rgba(255,255,255,.25);font-style:italic;}

.confidence-row{display:flex;flex-direction:column;gap:6px;}
.confidence-label{font-size:.8rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px;}
.confidence-track{display:flex;gap:6px;align-items:center;}
.confidence-opt{
  flex:1;padding:7px 4px;border-radius:10px;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);cursor:pointer;text-align:center;
  font-size:.72rem;font-weight:700;color:var(--muted);transition:all .15s;
  font-family:var(--font-body);
}
.confidence-opt.selected{border-color:var(--glow-cyan);background:rgba(0,245,255,.12);color:var(--glow-cyan);}
.hypo-preview{
  background:rgba(255,230,0,.06);border:1px solid rgba(255,230,0,.2);
  border-radius:12px;padding:12px 14px;
  font-size:.85rem;font-weight:600;line-height:1.5;
  min-height:42px;color:var(--text);
  display:none;
}
.hypo-preview.visible{display:block;}
.pip-reaction{
  display:flex;gap:10px;align-items:flex-start;
  background:rgba(0,245,255,.06);border:1px solid rgba(0,245,255,.18);
  border-radius:12px;padding:11px 14px;margin-top:10px;
  display:none;
  font-size:.94rem;font-weight:500;color:var(--muted);line-height:1.55;
}
.pip-reaction.visible{display:flex;animation:fadeIn .3s ease;}
.pip-reaction-avatar{font-size:1.2rem;flex-shrink:0;}

/* Act 3 — Reflect */
.reflect-wrap{display:flex;flex-direction:column;gap:12px;}
/* ══ EXPLORER HYPOTHESIS UI ══════════════════════════ */
.expl-hypo-wrap{display:flex;flex-direction:column;gap:14px;}
.expl-hypo-question{font-family:var(--font-display);font-size:1.15rem;font-weight:800;color:var(--text);line-height:1.4;text-align:center;background:rgba(0,232,255,.06);border:1px solid rgba(0,232,255,.18);border-radius:16px;padding:14px 16px;}
.expl-hypo-section-label{font-size:.72rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:2px;text-align:center;margin-bottom:6px;}
.expl-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.expl-choice-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:14px 8px;background:rgba(255,255,255,.05);border:2px solid rgba(255,255,255,.12);border-radius:18px;cursor:pointer;transition:all .2s;font-family:var(--font-body);}
.expl-choice-btn:hover{border-color:rgba(0,232,255,.45);background:rgba(0,232,255,.09);box-shadow:0 4px 16px rgba(0,232,255,.15);transform:translateY(-2px);}
.expl-choice-btn.selected{border-color:var(--glow-cyan);background:rgba(0,232,255,.14);box-shadow:0 0 18px rgba(0,232,255,.25);}
.expl-choice-emoji{font-size:2.4rem;line-height:1;}
.expl-choice-label{font-size:.82rem;font-weight:700;color:var(--text);text-align:center;line-height:1.3;}
.expl-because-grid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.expl-because-btn{display:flex;align-items:center;gap:6px;padding:9px 14px;border-radius:50px;cursor:pointer;background:rgba(255,255,255,.05);border:2px solid rgba(255,255,255,.12);font-family:var(--font-body);font-size:.84rem;font-weight:700;color:var(--muted);transition:all .18s;}
.expl-because-btn:hover{border-color:rgba(176,64,255,.5);background:rgba(176,64,255,.1);color:var(--text);}
.expl-because-btn.selected{border-color:var(--glow-purple);background:rgba(176,64,255,.18);color:var(--text);box-shadow:0 0 12px rgba(176,64,255,.2);}
.expl-because-btn .eb-emoji{font-size:1.2rem;}
.expl-hypo-bubble{display:none;background:linear-gradient(135deg,rgba(0,232,255,.1),rgba(176,64,255,.08));border:2px solid rgba(0,232,255,.3);border-radius:18px;padding:16px;font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--text);line-height:1.5;text-align:center;box-shadow:0 0 24px rgba(0,232,255,.1);}
.expl-hypo-bubble.visible{display:block;animation:fadeIn .3s ease;}
.expl-conf-row{display:flex;gap:8px;justify-content:center;}
.expl-conf-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 12px;border-radius:14px;cursor:pointer;flex:1;background:rgba(255,255,255,.05);border:2px solid rgba(255,255,255,.12);transition:all .18s;font-family:var(--font-body);}
.expl-conf-btn:hover{border-color:rgba(0,232,255,.4);background:rgba(0,232,255,.08);box-shadow:0 4px 14px rgba(0,232,255,.15);transform:translateY(-2px);}
.expl-conf-btn.selected{border-color:var(--glow-yellow);background:rgba(255,223,0,.12);box-shadow:0 0 14px rgba(255,223,0,.2);}
.expl-conf-btn .ec-face{font-size:1.8rem;line-height:1;}
.expl-conf-btn .ec-label{font-size:.68rem;font-weight:700;color:var(--muted);text-align:center;line-height:1.2;}
.expl-verdict-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.expl-verdict-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:14px 6px;border-radius:16px;cursor:pointer;background:rgba(255,255,255,.05);border:2px solid rgba(255,255,255,.12);transition:all .2s;font-family:var(--font-body);}
.expl-verdict-btn:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.09);box-shadow:0 4px 16px rgba(255,255,255,.08);transform:translateY(-2px);}
.expl-verdict-btn.v-yes.selected{border-color:var(--glow-green);background:rgba(0,240,122,.14);box-shadow:0 0 16px rgba(0,240,122,.2);}
.expl-verdict-btn.v-no.selected{border-color:var(--glow-pink);background:rgba(255,32,112,.12);box-shadow:0 0 16px rgba(255,32,112,.15);}
.expl-verdict-btn.v-sort.selected{border-color:var(--glow-yellow);background:rgba(255,223,0,.10);box-shadow:0 0 16px rgba(255,223,0,.15);}
.expl-verdict-btn .ev-face{font-size:2.2rem;line-height:1;}
.expl-verdict-btn .ev-label{font-size:.78rem;font-weight:800;color:var(--text);text-align:center;}

.hypo-recall{
  background:rgba(255,230,0,.06);border:1px solid rgba(255,230,0,.2);
  border-radius:12px;padding:12px 14px;
  font-size:.96rem;font-weight:600;line-height:1.55;color:var(--muted);
}
.hypo-recall-label{font-size:.76rem;font-weight:700;color:var(--glow-yellow);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:4px;}
.verdict-row{display:flex;gap:8px;flex-wrap:wrap;}
.verdict-btn{
  flex:1;min-width:80px;padding:10px 8px;border-radius:12px;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);
  cursor:pointer;text-align:center;font-family:var(--font-body);
  font-size:.8rem;font-weight:700;color:var(--muted);transition:all .18s;
}
.verdict-btn:hover{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.09);box-shadow:0 4px 14px rgba(255,255,255,.07);transform:translateY(-2px);}
.verdict-btn.v-yes{border-color:rgba(0,255,136,.4);background:rgba(0,255,136,.08);color:var(--glow-green);}
.verdict-btn.v-no{border-color:rgba(255,45,120,.4);background:rgba(255,45,120,.08);color:var(--glow-pink);}
.verdict-btn.v-sort{border-color:rgba(255,230,0,.4);background:rgba(255,230,0,.08);color:var(--glow-yellow);}
.verdict-btn.v-yes:hover{border-color:rgba(0,255,136,.6);box-shadow:0 4px 14px rgba(0,255,136,.2);}
.verdict-btn.v-no:hover{border-color:rgba(255,45,120,.6);box-shadow:0 4px 14px rgba(255,45,120,.2);}
.verdict-btn.v-sort:hover{border-color:rgba(255,230,0,.6);box-shadow:0 4px 14px rgba(255,230,0,.2);}
.verdict-btn.v-yes.selected{border-color:var(--glow-green);background:rgba(0,255,136,.18);box-shadow:0 0 16px rgba(0,255,136,.3);}
.verdict-btn.v-no.selected{border-color:var(--glow-pink);background:rgba(255,45,120,.18);box-shadow:0 0 16px rgba(255,45,120,.25);}
.verdict-btn.v-sort.selected{border-color:var(--glow-yellow);background:rgba(255,230,0,.16);box-shadow:0 0 16px rgba(255,230,0,.25);}
.reflect-textarea{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:12px;padding:11px 14px;color:var(--text);font-family:var(--font-body);
  font-size:.96rem;min-height:72px;resize:vertical;outline:none;width:100%;line-height:1.55;
}
.reflect-textarea:focus{border-color:rgba(0,245,255,.4);}
.reflect-textarea::placeholder{color:rgba(255,255,255,.22);font-style:italic;}
.reflect-saved{
  background:rgba(0,255,136,.07);border:1px solid rgba(0,255,136,.25);
  border-radius:12px;padding:11px 14px;font-size:.95rem;font-weight:600;
  color:var(--glow-green);display:none;
}
.reflect-saved.visible{display:block;animation:fadeIn .3s ease;}


/* ── DATA CHART ── */
.data-chart{background:rgba(0,0,0,.4);border-radius:16px;padding:16px;margin-top:12px;border:1px solid rgba(255,255,255,.07);}
.chart-title{font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:10px;}
.chart-bars{display:flex;align-items:flex-end;gap:8px;height:80px;}
.chart-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;}
.chart-bar{width:100%;border-radius:6px 6px 0 0;background:linear-gradient(0deg,var(--glow-cyan),var(--glow-purple));min-height:2px;transition:height .5s;}
.chart-bar-lbl{font-size:.72rem;font-weight:700;color:var(--muted);text-align:center;}

/* ── CONFETTI ── */
.conf{position:fixed;top:-10px;pointer-events:none;z-index:9999;border-radius:3px;animation:confDrop linear forwards;}
@keyframes confDrop{0%{opacity:1;top:-10px;transform:rotateZ(0)}100%{opacity:0;top:110vh;transform:rotateZ(var(--r,360deg)) translateX(var(--dx,0px))}}

/* ── NOTIFICATION ── */
.notif{
  position:fixed;bottom:24px;right:24px;z-index:600;
  background:linear-gradient(160deg,rgba(14,14,36,.97),rgba(8,8,24,.97));
  border:1px solid rgba(0,232,255,.35);
  border-radius:18px;padding:14px 20px;max-width:300px;
  font-weight:600;font-size:1rem;
  transform:translateY(90px) scale(.94);opacity:0;
  transition:all .35s cubic-bezier(.34,1.56,.64,1);
  box-shadow:
    0 12px 40px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 30px rgba(0,232,255,.08);
  backdrop-filter:blur(12px);
}
.notif.show{transform:translateY(0) scale(1);opacity:1;}
.notif-icon{font-size:1.35rem;display:block;margin-bottom:3px;}

/* ── LEVEL BAR ── */
.level-bar-wrap{
  max-width:1100px;margin:0 auto 20px;padding:0 24px;
}
.level-bar-inner{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  border-radius:16px;padding:14px 20px;
  display:flex;align-items:center;gap:16px;
}
.level-badge{
  font-family:var(--font-display);font-size:1.1rem;font-weight:800;
  background:linear-gradient(135deg,var(--glow-yellow),var(--glow-pink));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  white-space:nowrap;
}
.xp-bar{flex:1;background:rgba(255,255,255,.08);border-radius:50px;height:10px;overflow:hidden;}
.xp-fill{height:100%;background:linear-gradient(90deg,var(--glow-yellow),var(--glow-pink));border-radius:50px;transition:width .5s;}
.xp-text{font-size:.75rem;font-weight:700;color:var(--muted);white-space:nowrap;}

/* ── PIP GREETING BUBBLE ── */
.pip-logo-wrap{position:relative;}
#pip-greet-bubble{
  position:absolute;top:58px;left:0;width:270px;
  background:rgba(8,8,28,.97);border:1px solid rgba(0,245,255,.45);
  border-radius:18px;padding:14px 16px;z-index:300;
  box-shadow:0 8px 40px rgba(0,245,255,.18),0 20px 50px rgba(0,0,0,.55);
  opacity:0;pointer-events:none;
  transform:translateY(-8px) scale(.94);
  transition:opacity .28s,transform .28s;
}
#pip-greet-bubble.visible{opacity:1;pointer-events:all;transform:translateY(0) scale(1);}
#pip-greet-bubble::before{
  content:'';position:absolute;top:-8px;left:16px;
  border-left:7px solid transparent;border-right:7px solid transparent;
  border-bottom:8px solid rgba(0,245,255,.45);
}
.pgb-header{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.pgb-avatar{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#00f5ff,#b44fff);
  display:flex;align-items:center;justify-content:center;font-size:1rem;
}
.pgb-name{
  font-family:var(--font-display);font-size:1.1rem;font-weight:800;
  background:linear-gradient(90deg,#00f5ff,#b44fff);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  flex:1;
}
.pgb-close{
  background:none;border:none;color:var(--muted);font-size:.85rem;
  cursor:pointer;line-height:1;padding:2px;
}
.pgb-msg{font-size:.8rem;font-weight:500;color:var(--muted);line-height:1.5;margin-bottom:10px;}
.pgb-cta{
  background:linear-gradient(135deg,rgba(0,245,255,.15),rgba(180,79,255,.15));
  border:1px solid rgba(0,245,255,.3);border-radius:10px;
  padding:7px 12px;font-size:.75rem;font-weight:700;color:var(--glow-cyan);
  cursor:pointer;width:100%;text-align:center;transition:all .15s;
  font-family:var(--font-body);
}
.pgb-cta:hover{background:linear-gradient(135deg,rgba(0,245,255,.28),rgba(180,79,255,.28));}

/* ── WELCOME SPLASH ── */
#welcome-splash{
  position:fixed;inset:0;z-index:900;
  background:rgba(4,4,16,.97);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
#welcome-splash.show{opacity:1;pointer-events:all;}
.splash-card{
  background:linear-gradient(160deg,rgba(14,14,36,.98),rgba(8,8,24,.98));
  border:1px solid rgba(0,232,255,.22);
  border-radius:32px;padding:40px 44px;text-align:center;
  max-width:460px;width:calc(100% - 32px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 80px rgba(0,232,255,.12),
    0 40px 100px rgba(0,0,0,.7);
  animation:splashCard .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes splashCard{from{transform:scale(.85) translateY(30px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.splash-avatar{font-size:4rem;margin-bottom:6px;display:block;animation:splashBounce .6s cubic-bezier(.34,1.56,.64,1) .1s both;}
@keyframes splashBounce{from{transform:scale(0) rotate(-20deg)}to{transform:scale(1) rotate(0)}}
.splash-welcome{font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:3px;margin-bottom:4px;}
.splash-name{
  font-family:var(--font-display);font-size:2.6rem;font-weight:800;line-height:1.1;
  background:linear-gradient(90deg,#00f5ff,#b44fff,#ff2d78);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-size:200% auto;animation:shimmer 3s linear infinite;margin-bottom:18px;
  font-style:normal;
}
.splash-pip-bubble{
  background:rgba(0,245,255,.08);border:1px solid rgba(0,245,255,.2);
  border-radius:14px;padding:12px 16px;margin-bottom:20px;
  font-size:.85rem;font-weight:500;line-height:1.5;color:var(--muted);
  display:flex;gap:10px;align-items:flex-start;text-align:left;
}
.splash-pip-icon{font-size:1.3rem;flex-shrink:0;}
.splash-stats{display:flex;gap:10px;justify-content:center;margin-bottom:22px;flex-wrap:wrap;}
.splash-stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:10px 14px;text-align:center;min-width:82px;}
.splash-stat-val{font-family:var(--font-display);font-size:1.4rem;font-weight:800;}
.splash-stat-lbl{font-size:.65rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:1px;}
.splash-btn{
  background:linear-gradient(135deg,#00f5ff,#b44fff);border:none;border-radius:50px;
  padding:13px 36px;font-family:var(--font-display);font-size:1.05rem;font-weight:800;
  color:#fff;cursor:pointer;letter-spacing:.5px;
  box-shadow:0 8px 30px rgba(0,245,255,.3);transition:transform .2s,box-shadow .2s;
  animation:splashCard .4s cubic-bezier(.34,1.56,.64,1) .25s both;
}
.splash-btn:hover{transform:scale(1.06);box-shadow:0 12px 40px rgba(0,245,255,.45);}
.splash-tagline{font-size:.86rem;color:var(--muted);margin-top:12px;font-weight:500;}

/* ══ LIFE CYCLE REVAMP ══ */
.lc-wrap{display:flex;flex-direction:column;gap:0;}

/* Mode toggle */
.lc-mode-bar{
  display:flex;gap:6px;margin-bottom:18px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:5px;
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.lc-mode-bar::-webkit-scrollbar{display:none;}
.lc-mode-btn{
  flex:1;min-width:max-content;padding:9px 10px;border-radius:10px;border:none;
  font-family:var(--font-body);font-size:.8rem;font-weight:700;
  cursor:pointer;color:var(--muted);background:none;transition:all .2s;
  white-space:nowrap;
}
.lc-mode-btn.active{
  background:linear-gradient(135deg,rgba(0,255,136,.2),rgba(0,245,255,.2));
  color:var(--text);border:1px solid rgba(0,255,136,.35);
}

/* ── Storybook ── */
.lc-storybook{display:flex;flex-direction:column;gap:14px;}
.lc-sb-stage{
  display:flex;align-items:center;gap:6px;
  margin-bottom:12px;flex-wrap:wrap;
}
.lc-sb-dot{
  width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:800;color:var(--muted);cursor:pointer;
  transition:all .2s;flex-shrink:0;
}
.lc-sb-dot.reached{border-color:var(--glow-green);color:var(--glow-green);background:rgba(0,255,136,.1);}
.lc-sb-dot.active{
  background:linear-gradient(135deg,#00ff88,#00f5ff);
  color:#000;border-color:transparent;
  box-shadow:0 0 12px rgba(0,255,136,.5);
}
.lc-sb-line{flex:1;height:2px;background:rgba(255,255,255,.07);min-width:8px;max-width:30px;transition:background .4s;}
.lc-sb-line.reached{background:var(--glow-green);}

.lc-canvas-wrap{
  position:relative;border-radius:20px;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);background:#050510;
}
.lc-canvas-wrap canvas{display:block;width:100%;}

.lc-nav{display:flex;align-items:center;gap:10px;margin-top:10px;}
.lc-nav-btn{
  width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.06);color:var(--text);font-size:1.1rem;
  cursor:pointer;transition:all .18s;display:flex;align-items:center;justify-content:center;
}
.lc-nav-btn:hover{background:rgba(0,255,136,.15);border-color:rgba(0,255,136,.4);}
.lc-nav-btn:disabled{opacity:.25;cursor:not-allowed;}
.lc-nav-info{flex:1;text-align:center;}
.lc-nav-title{
  font-family:var(--font-display);font-size:1.1rem;font-weight:800;
}
.lc-nav-sub{font-size:.72rem;color:var(--muted);font-weight:600;}

.lc-story-card{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:16px;padding:16px 18px;
}
.lc-story-pov{
  font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:2px;
  margin-bottom:8px;
}
.lc-story-text{
  font-size:.9rem;line-height:1.7;color:var(--muted);font-style:italic;
  margin-bottom:12px;
}
.lc-pip-q{
  display:flex;gap:8px;align-items:flex-start;
  background:rgba(180,79,255,.08);border:1px solid rgba(180,79,255,.2);
  border-radius:12px;padding:10px 13px;
}
.lc-pip-q-avatar{font-size:1.1rem;flex-shrink:0;}
.lc-pip-q-text{font-size:.82rem;font-weight:600;color:var(--muted);line-height:1.5;}
.lc-pip-answer{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;
}
.lc-ans-btn{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:50px;padding:5px 14px;font-size:.78rem;font-weight:700;
  color:var(--muted);cursor:pointer;font-family:var(--font-body);transition:all .15s;
}
.lc-ans-btn:hover{background:rgba(180,79,255,.15);border-color:rgba(180,79,255,.4);color:var(--text);}
.lc-ans-btn.correct{background:rgba(0,255,136,.15);border-color:var(--glow-green);color:var(--glow-green);}
.lc-ans-btn.wrong{background:rgba(255,45,120,.1);border-color:var(--glow-pink);color:var(--glow-pink);}
.lc-ans-feedback{
  font-size:.78rem;font-weight:700;margin-top:6px;min-height:20px;width:100%;
}
.lc-unlock-hint{
  font-size:.86rem;color:var(--muted);text-align:center;
  margin-top:6px;font-style:italic;
}

/* ── Drag & Drop ── */
.lc-drag-wrap{display:flex;flex-direction:column;gap:14px;}
.lc-drag-header{
  text-align:center;
  font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--muted);
}
.lc-drag-bank{
  display:flex;flex-wrap:wrap;gap:10px;
  min-height:80px;padding:14px;
  background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.12);
  border-radius:14px;justify-content:center;
  touch-action:none;
}
.lc-drag-slots{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  touch-action:none;
}
.lc-slot{
  width:100px;height:96px;border-radius:14px;
  border:2px dashed rgba(255,255,255,.15);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;transition:all .2s;position:relative;
  background:rgba(255,255,255,.03);
}
.lc-slot.drag-over{border-color:var(--glow-cyan);background:rgba(0,245,255,.08);}
.lc-slot.correct{border-color:var(--glow-green);background:rgba(0,255,136,.08);}
.lc-slot.wrong{border-color:var(--glow-pink);background:rgba(255,45,120,.08);animation:shake .3s;}
.lc-slot-num{
  font-size:.6rem;font-weight:800;color:rgba(255,255,255,.2);
  text-transform:uppercase;letter-spacing:1px;
}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

.lc-card{
  width:100px;height:96px;border-radius:12px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.07);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;cursor:grab;transition:all .18s;
  user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:none;
}
.lc-card:hover{transform:scale(1.06);border-color:rgba(255,255,255,.3);}
.lc-card.selected{border-color:var(--glow-cyan);background:rgba(0,232,255,.15);box-shadow:0 0 16px rgba(0,232,255,.3);}
.lc-card.dragging{opacity:.45;transform:scale(.95);}
.lc-card-icon{font-size:2rem;}
.lc-card-name{font-size:.68rem;font-weight:800;color:var(--text);text-align:center;line-height:1.2;}

.lc-card.in-slot{
  width:100%;margin:0;padding:6px 4px;
  box-shadow:none;border-color:rgba(255,255,255,.15);
  cursor:grab;
}
.lc-card.in-slot:active{ cursor:grabbing; }
.lc-slot{ position:relative; }
.lc-drag-result{
  text-align:center;padding:12px;border-radius:14px;
  font-family:var(--font-display);font-size:1rem;font-weight:700;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  min-height:50px;display:flex;align-items:center;justify-content:center;
}
.lc-drag-actions{display:flex;gap:8px;justify-content:center;}


/* ══ WATER CYCLE REVAMP ══ */
.wc-wrap{display:flex;flex-direction:column;gap:0;}
.wc-mode-bar{
  display:flex;gap:6px;margin-bottom:16px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:5px;
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.wc-mode-bar::-webkit-scrollbar{display:none;}
.wc-mode-btn{
  flex:1;min-width:max-content;padding:8px 6px;border-radius:10px;border:none;
  font-family:var(--font-body);font-size:.78rem;font-weight:700;
  cursor:pointer;color:var(--muted);background:none;transition:all .2s;
  white-space:nowrap;
}
.wc-mode-btn.active{
  background:linear-gradient(135deg,rgba(0,245,255,.2),rgba(68,136,255,.2));
  color:var(--text);border:1px solid rgba(0,245,255,.35);
}

/* ── Animated diagram ── */
.wc-diagram-wrap{
  position:relative;border-radius:20px;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:#020d1a;margin-bottom:12px;
}
.wc-diagram-wrap canvas{display:block;width:100%;cursor:pointer;}
.wc-stage-pills{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:10px;
}
.wc-pill{
  padding:5px 14px;border-radius:50px;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);font-size:.75rem;font-weight:700;
  color:var(--muted);cursor:pointer;font-family:var(--font-body);transition:all .18s;
}
.wc-pill.active{color:#000;box-shadow:0 0 14px rgba(0,245,255,.4);}
.wc-info-panel{
  border-radius:16px;padding:0;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
.wc-info-header{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px 10px;
}
.wc-info-icon{font-size:2rem;}
.wc-info-title{font-family:var(--font-display);font-size:1.1rem;font-weight:800;}
.wc-info-subtitle{font-size:.72rem;font-weight:700;color:var(--muted);margin-top:1px;text-transform:uppercase;letter-spacing:1px;}
.wc-info-body{
  display:grid;grid-template-columns:1fr;gap:0;
}
@media(max-width:640px){.wc-info-body{grid-template-columns:1fr;}.agc-header{grid-template-columns:1fr 28px 1fr;gap:6px;}}
.wc-info-story{
  padding:12px 24px 14px;
  font-size:.83rem;line-height:1.65;color:var(--muted);
  text-align:center;
}
.wc-info-story .lc-story-line{justify-content:center;}
.wc-info-facts{
  padding:12px 16px 14px;
  display:flex;flex-direction:column;gap:8px;
}
.wc-fact-item{
  display:flex;gap:8px;align-items:flex-start;
  font-size:.78rem;line-height:1.4;color:var(--muted);
}
.wc-fact-icon{font-size:1rem;flex-shrink:0;margin-top:1px;}
.wc-pip-q-strip{
  padding:11px 16px;
  background:rgba(180,79,255,.07);border-top:1px solid rgba(180,79,255,.15);
  display:flex;gap:8px;align-items:flex-start;
}
.wc-pip-strip-avatar{font-size:1rem;flex-shrink:0;margin-top:2px;}
.wc-pip-strip-inner{flex:1;}
.wc-pip-strip-q{font-size:.8rem;font-weight:600;color:var(--muted);margin-bottom:6px;line-height:1.4;}
.wc-ans-row{display:flex;flex-wrap:wrap;gap:5px;}
.wc-ans-btn{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:50px;padding:4px 12px;font-size:.73rem;font-weight:700;
  color:var(--muted);cursor:pointer;font-family:var(--font-body);transition:all .14s;
}
.wc-ans-btn:hover{background:rgba(0,245,255,.1);border-color:rgba(0,245,255,.3);}
.wc-ans-btn.wc-correct{background:rgba(0,255,136,.12);border-color:var(--glow-green);color:var(--glow-green);}
.wc-ans-btn.wc-wrong{background:rgba(255,45,120,.1);border-color:var(--glow-pink);color:var(--glow-pink);}
.wc-ans-fb{font-size:.74rem;font-weight:700;margin-top:5px;min-height:16px;}
.wc-nav-row{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}
.wc-nav-btn{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:50px;padding:7px 18px;font-size:.78rem;font-weight:700;
  color:var(--text);cursor:pointer;font-family:var(--font-body);transition:all .18s;
}
.wc-nav-btn:hover{background:rgba(0,245,255,.1);border-color:rgba(0,245,255,.3);}
.wc-nav-btn:disabled{opacity:.25;cursor:not-allowed;}
.wc-stage-counter{font-size:.72rem;font-weight:700;color:var(--muted);}

/* ── Fill-the-Cycle drag game ── */
.wc-fill-wrap{display:flex;flex-direction:column;gap:14px;}
.wc-fill-intro{font-size:.85rem;color:var(--muted);text-align:center;line-height:1.5;}
.wc-fill-canvas-wrap{
  position:relative;border-radius:18px;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);background:#020d1a;
}
.wc-fill-canvas-wrap canvas{display:block;width:100%;cursor:pointer;}
.wc-fill-bank{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:12px;min-height:56px;
  background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.12);
  border-radius:14px;
}
.wc-fill-card{
  display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:10px;padding:7px 12px;cursor:pointer;
  font-size:.78rem;font-weight:700;color:var(--text);
  font-family:var(--font-body);transition:all .18s;user-select:none;
}
.wc-fill-card:hover{transform:scale(1.05);}
.wc-fill-card.selected{border-color:var(--glow-cyan);background:rgba(0,245,255,.12);color:var(--glow-cyan);}
.wc-fill-card.used{opacity:.3;pointer-events:none;}
/* ── wc-fill drag slots (mirrors lc-drag) ── */
.wc-fill-slots{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  touch-action:none;
}
.wc-fill-slot{
  width:108px;height:72px;border-radius:14px;
  border:2px dashed rgba(0,245,255,.25);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;transition:all .2s;position:relative;
  background:rgba(0,245,255,.03);
}
.wc-fill-slot.drag-over{border-color:var(--glow-cyan);background:rgba(0,245,255,.10);}
.wc-fill-slot.correct{border-color:var(--glow-green);background:rgba(0,255,136,.08);}
.wc-fill-slot.wrong{border-color:var(--glow-pink);background:rgba(255,45,120,.08);animation:shake .3s;}
.wc-fill-slot-label{
  font-size:.58rem;font-weight:800;color:rgba(0,245,255,.35);
  text-transform:uppercase;letter-spacing:1px;text-align:center;padding:0 4px;
  line-height:1.3;
}
.wc-fill-drag-card{
  width:108px;height:64px;border-radius:11px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.07);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;cursor:grab;transition:all .18s;
  user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:none;font-family:var(--font-body);
}
.wc-fill-drag-card:hover{transform:scale(1.06);border-color:rgba(255,255,255,.3);}
.wc-fill-drag-card.dragging{opacity:.45;transform:scale(.95);}
.wc-fill-drag-card-icon{font-size:1.5rem;}
.wc-fill-drag-card-name{font-size:.65rem;font-weight:800;color:var(--text);text-align:center;line-height:1.2;padding:0 4px;}
.wc-fill-drag-card.in-slot{
  width:100%;height:100%;margin:0;padding:4px;
  box-shadow:none;border-color:rgba(255,255,255,.15);cursor:grab;
}
.wc-fill-drag-card.in-slot:active{cursor:grabbing;}

/* ── wc-fill canvas overlay slots ── */
.wc-fill-overlay-slot{
  position:absolute;
  width:112px;
  transform:translate(-50%,-50%);
  border-radius:8px;
  border:2px dashed rgba(255,255,255,.28);
  background:rgba(5,10,25,.72);
  display:flex;align-items:center;justify-content:center;
  padding:5px 4px;
  transition:border-color .2s, background .2s;
  pointer-events:all;
  overflow:visible;
}
.wc-fill-overlay-slot.drag-over{
  border-color:var(--glow-cyan);
  background:rgba(0,20,40,.85);
  box-shadow:0 0 14px rgba(0,232,255,.4);
}
.wc-fill-overlay-slot.correct{
  border-color:var(--glow-green) !important;
  background:rgba(0,30,20,.85) !important;
  border-style:solid;
}
.wc-fill-overlay-slot.wrong{
  border-color:var(--glow-pink) !important;
  background:rgba(40,5,15,.85) !important;
  border-style:solid;
  animation:shake .3s;
}
.wc-fill-slot-empty-label{
  font-size:.65rem;font-weight:800;
  color:rgba(255,255,255,.35);
  pointer-events:none;
  white-space:nowrap;
  padding:2px 0;
}
/* card inside overlay slot */
.wc-fill-drag-card.wc-in-slot{
  width:100%;
  height:auto;
  min-height:0;
  border-radius:6px;
  padding:3px 4px;
  gap:2px;
  box-shadow:none;
  border-color:transparent;
  background:transparent;
  cursor:grab;
}
.wc-fill-drag-card.wc-in-slot .wc-fill-drag-card-icon{font-size:1rem;line-height:1;}
.wc-fill-drag-card.wc-in-slot .wc-fill-drag-card-name{
  font-size:.62rem;
  white-space:normal;
  word-break:break-word;
  text-align:center;
  line-height:1.25;
}
.wc-fill-drag-card.wc-in-slot:active{cursor:grabbing;}
.wc-fill-result{
  text-align:center;padding:12px;border-radius:14px;min-height:46px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
  font-weight:700;font-size:.88rem;display:flex;align-items:center;justify-content:center;
}
.wc-fill-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}

/* ── Fun Facts mode ── */
.wc-facts-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;
}
.wc-fact-card{
  --fc-color: #00e8ff;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;padding:20px 18px;cursor:pointer;transition:all .22s;
  position:relative;overflow:visible;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.wc-fact-card::before{
  content:'';position:absolute;inset:0;border-radius:20px;
  background:radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--fc-color) 18%, transparent) 0%, transparent 70%);
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.wc-fact-card:hover{
  transform:translateY(-6px) scale(1.03);
  border-color:color-mix(in srgb, var(--fc-color) 55%, transparent);
  box-shadow:0 12px 36px rgba(0,0,0,.35), 0 0 0 1px color-mix(in srgb, var(--fc-color) 25%, transparent);
}
.wc-fact-card:hover::before{opacity:1;}
.wc-fact-card-icon{
  font-size:2.6rem;margin-bottom:10px;display:block;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.4));
  transition:transform .22s cubic-bezier(.34,1.56,.64,1);
  line-height:1;
}
.wc-fact-card:hover .wc-fact-card-icon{transform:scale(1.2) rotate(-6deg);}
.wc-fact-card-q{
  font-family:var(--font-display);font-size:1.05rem;font-weight:800;
  margin-bottom:10px;line-height:1.3;color:var(--text);
}
.wc-fact-card-hint{
  font-size:.75rem;color:var(--muted);font-weight:700;
  margin-top:6px;opacity:.7;transition:opacity .2s;
}
.wc-fact-card:hover .wc-fact-card-hint{opacity:1;color:var(--fc-color);}

/* ── Water cycle fact pop-out modal ── */
.wc-fact-modal-box{
  max-width:440px;text-align:center;position:relative;overflow-x:hidden;overflow-y:auto;
  padding:36px 30px 30px;
}
.wc-fact-modal-accent{
  position:absolute;inset:0;pointer-events:none;border-radius:26px;
  transition:background .3s;
}
.wc-fact-modal-box .modal-close{
  position:absolute;top:14px;right:14px;z-index:2;
}
.wc-fact-modal-icon{
  font-size:3.8rem;line-height:1;margin-bottom:12px;
  display:block;position:relative;z-index:1;
  animation:wcModalIconIn .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes wcModalIconIn{from{transform:scale(.5) rotate(-15deg);opacity:0}to{transform:scale(1) rotate(0deg);opacity:1}}
.wc-fact-modal-stat{
  font-family:var(--font-display);font-size:2.4rem;font-weight:800;
  line-height:1.1;margin-bottom:10px;position:relative;z-index:1;
  animation:wcModalStatIn .35s .08s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes wcModalStatIn{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
.wc-fact-modal-q{
  font-family:var(--font-display);font-size:1.1rem;font-weight:800;
  color:var(--text);margin-bottom:14px;line-height:1.35;
  position:relative;z-index:1;
  animation:wcModalStatIn .35s .14s cubic-bezier(.34,1.56,.64,1) both;
}
.wc-fact-modal-a{
  font-size:.95rem;color:var(--muted);line-height:1.7;font-weight:500;
  position:relative;z-index:1;
  animation:wcModalStatIn .35s .2s cubic-bezier(.34,1.56,.64,1) both;
}

/* ── Explorer visual modal ── */
.wcm-exp-scene{
  width:100%;border-radius:16px;overflow:hidden;margin-bottom:16px;
  position:relative;z-index:1;
  animation:wcModalIconIn .4s cubic-bezier(.34,1.56,.64,1);
}
.wcm-exp-scene svg{display:block;width:100%;height:auto;}
.wcm-exp-stat{
  font-family:var(--font-display);font-size:3rem;font-weight:800;
  line-height:1;margin-bottom:8px;position:relative;z-index:1;
  animation:wcModalStatIn .35s .1s cubic-bezier(.34,1.56,.64,1) both;
}
.wcm-exp-label{
  font-family:var(--font-display);font-size:1.25rem;font-weight:800;
  color:var(--text);margin-bottom:12px;line-height:1.3;
  position:relative;z-index:1;
  animation:wcModalStatIn .35s .18s cubic-bezier(.34,1.56,.64,1) both;
}
.wcm-exp-body{
  font-size:1rem;font-weight:600;line-height:1.65;color:var(--text);
  position:relative;z-index:1;
  animation:wcModalStatIn .35s .25s cubic-bezier(.34,1.56,.64,1) both;
  background:rgba(255,255,255,.05);border-radius:14px;padding:12px 16px;
}


@keyframes ripple{
  to{transform:scale(1.5);opacity:0;}
}

/* ── Fact-card follow-up question ── */
.wc-followup{
  margin-top:18px;border-top:1px solid rgba(255,255,255,.1);
  padding-top:14px;text-align:left;position:relative;z-index:1;
  animation:wcModalStatIn .35s .32s cubic-bezier(.34,1.56,.64,1) both;
}
.wc-followup-q{
  font-family:var(--font-display);font-size:.97rem;font-weight:700;
  color:var(--text);margin-bottom:10px;line-height:1.4;
}
.wc-followup-opts{
  display:flex;flex-direction:column;gap:7px;
}
.wc-followup-btn{
  background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.15);
  color:var(--text);font-family:var(--font-body);font-size:.88rem;font-weight:600;
  border-radius:10px;padding:8px 14px;text-align:left;cursor:pointer;
  transition:background .15s,border-color .15s,transform .1s;
  line-height:1.35;
}
.wc-followup-btn:hover:not(:disabled){
  background:rgba(255,255,255,.13);transform:translateX(3px);
}
.wc-followup-btn.wc-followup-correct{
  background:rgba(0,240,122,.15);border-color:var(--glow-green);color:var(--glow-green);
}
.wc-followup-btn.wc-followup-wrong{
  background:rgba(255,32,112,.13);border-color:var(--glow-pink);color:var(--glow-pink);
}
.wc-followup-fb{
  margin-top:10px;font-family:var(--font-display);font-size:.93rem;
  font-weight:700;min-height:1.4em;
}
body[data-tier="explorer"] .wc-followup-q{font-size:1.05rem;}
body[data-tier="explorer"] .wc-followup-btn{font-size:.95rem;padding:10px 14px;}
body[data-tier="explorer"] .wc-followup-fb{font-size:.97rem;}

/* ══ ANIMAL GROUPS REVAMP ══ */
.ag-wrap{display:flex;flex-direction:column;gap:14px;}

/* Group selector strip */
.ag-group-strip{
  display:flex;flex-wrap:wrap;gap:8px;
}
.ag-group-btn{
  display:flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:50px;cursor:pointer;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  font-family:var(--font-body);font-size:.82rem;font-weight:700;
  color:var(--muted);transition:all .22s cubic-bezier(.34,1.56,.64,1);
}
.ag-group-btn:hover{transform:translateY(-2px);}
.ag-group-btn.active{
  color:#000;
  box-shadow:0 4px 20px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.15) inset;
  transform:translateY(-2px);
}
.ag-group-icon{font-size:1.1rem;}

/* Main panel */
.ag-panel{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

/* Panel header */
.ag-header{
  padding:18px 20px 14px;
  display:flex;align-items:center;gap:14px;
  border-bottom:1px solid rgba(255,255,255,.06);
  position:relative;overflow:hidden;
}
.ag-header::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 0% 50%, var(--ag-color,rgba(0,232,255,.12)), transparent 60%);
  pointer-events:none;
}
.ag-header-icon{font-size:2.8rem;filter:drop-shadow(0 4px 12px var(--ag-shadow,rgba(0,232,255,.4)));}
.ag-header-text{flex:1;}
.ag-header-name{font-family:var(--font-display);font-size:1.4rem;font-weight:800;}
.ag-header-tagline{font-size:.78rem;color:var(--muted);font-weight:600;margin-top:2px;line-height:1.5;}
.ag-header-badge{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  border-radius:50px;padding:5px 14px;font-size:.75rem;font-weight:700;color:var(--muted);
  white-space:nowrap;
}

/* Mode tabs inside panel */
.ag-mode-bar{
  display:flex;gap:0;padding:0 20px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.15);
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.ag-mode-bar::-webkit-scrollbar{display:none;}
.ag-mode-btn{
  padding:10px 16px;font-family:var(--font-body);font-size:.78rem;font-weight:700;
  color:var(--muted);background:none;border:none;cursor:pointer;
  border-bottom:2px solid transparent;transition:all .18s;white-space:nowrap;
}
.ag-mode-btn.active{color:var(--text);border-bottom-color:var(--ag-accent,#00e8ff);}
.ag-mode-btn:hover:not(.active){color:var(--text);}

.ag-content{padding:20px;}

/* ── Gallery mode ── */
.ag-gallery{display:flex;flex-direction:column;gap:16px;}
.ag-gallery-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;
}
.ag-specimen{
  border-radius:16px;padding:4px;cursor:pointer;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
  transition:all .22s cubic-bezier(.34,1.56,.64,1);
  overflow:hidden;
}
.ag-specimen:hover{transform:translateY(-4px) scale(1.03);}
.ag-specimen.active{box-shadow:0 0 0 2px var(--ag-accent,#00e8ff), 0 8px 24px rgba(0,0,0,.35);}
.ag-spec-canvas{display:block;width:100%;border-radius:12px;}
.ag-spec-name{font-family:var(--font-display);font-size:.82rem;font-weight:800;
  text-align:center;padding:7px 6px 8px;color:var(--text);}
.ag-spec-info{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  border-radius:14px;padding:14px 16px;
  font-size:.84rem;line-height:1.6;color:var(--muted);
  min-height:60px;transition:all .2s;
}
.ag-spec-info strong{color:var(--text);}

/* Defining features */
.ag-features{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;
}
.ag-feature-card{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:14px 12px;text-align:center;
  transition:all .2s;cursor:pointer;
}
.ag-feature-card:hover{background:rgba(255,255,255,.07);transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,.3);}
.ag-feature-card:active{transform:translateY(-1px);}
.ag-feat-tap-hint{font-size:.66rem;opacity:.65;margin-top:7px;font-weight:700;letter-spacing:.4px;}
.ag-feat-icon{font-size:1.8rem;margin-bottom:6px;}
.ag-feat-title{font-family:var(--font-display);font-size:.85rem;font-weight:800;margin-bottom:4px;}
.ag-feat-desc{font-size:.86rem;color:var(--muted);line-height:1.45;}

/* ── EXPLORER guided feature stepper ── */
.agf-exp-shell{display:flex;flex-direction:column;align-items:center;gap:16px;padding:6px 0 4px;}
.agf-dots{display:flex;gap:8px;align-items:center;margin-bottom:2px;}
.agf-dot{
  width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,.12);
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
}
.agf-dot.active{width:28px;border-radius:6px;}
.agf-exp-card{
  width:100%;max-width:400px;
  border-radius:22px;border:1px solid;
  padding:28px 24px 24px;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
@keyframes agfCardIn{
  from{opacity:0;transform:scale(.92) translateY(14px)}
  to  {opacity:1;transform:scale(1)   translateY(0)}
}
.agf-exp-icon{font-size:4rem;line-height:1;animation:agfIconBounce 2s ease-in-out infinite;}
@keyframes agfIconBounce{
  0%,100%{transform:translateY(0) scale(1)}
  50%    {transform:translateY(-7px) scale(1.08)}
}
.agf-exp-num{font-size:.72rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;opacity:.8;}
.agf-exp-title{font-family:var(--font-display);font-size:1.6rem;font-weight:800;line-height:1.1;}
.agf-exp-desc{font-size:1.05rem;font-weight:600;color:var(--text);line-height:1.6;max-width:340px;}
.agf-exp-actions{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:400px;gap:10px;}
.agf-next-btn{flex:1;justify-content:center;font-size:.95rem!important;padding:12px 22px!important;border-radius:14px!important;}
.agf-back-btn{border-radius:14px!important;padding:12px 16px!important;}

/* ── Classifier game ── */
.ag-game{display:flex;flex-direction:column;gap:14px;}
.ag-game-q{
  font-family:var(--font-display);font-size:1.05rem;font-weight:700;
  line-height:1.35;
}
.ag-game-animals{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
}
.ag-game-card{
  width:100px;padding:12px 8px;border-radius:14px;cursor:pointer;text-align:center;
  border:2px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05);
  transition:all .22s cubic-bezier(.34,1.56,.64,1);
}
.ag-game-card:hover{transform:scale(1.08);}
.ag-game-card.picked-right{
  border-color:var(--glow-green);background:rgba(0,240,122,.1);
  animation:correctPop .4s cubic-bezier(.34,1.56,.64,1);
}
.ag-game-card.picked-wrong{
  border-color:var(--glow-pink);background:rgba(255,32,112,.08);
  animation:shake .3s;
}
@keyframes correctPop{0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1)}}
.ag-game-animal-icon{font-size:2.2rem;margin-bottom:5px;}
.ag-game-animal-name{font-size:.72rem;font-weight:700;color:var(--muted);}
.ag-game-fb{
  border-radius:14px;padding:12px 16px;font-size:.86rem;font-weight:700;
  min-height:46px;display:flex;align-items:center;gap:8px;
}
.ag-game-fb.right{background:rgba(0,240,122,.1);border:1px solid rgba(0,240,122,.3);color:var(--glow-green);}
.ag-game-fb.wrong{background:rgba(255,32,112,.08);border:1px solid rgba(255,32,112,.25);color:var(--glow-pink);}
.ag-game-fb.neutral{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:var(--muted);}
.ag-game-score{
  display:flex;align-items:center;gap:10px;
  font-size:.8rem;font-weight:700;color:var(--muted);
}
.ag-game-score-bar{
  flex:1;height:6px;background:rgba(255,255,255,.08);border-radius:6px;overflow:hidden;
}
.ag-game-score-fill{
  height:100%;border-radius:6px;
  background:linear-gradient(90deg,var(--glow-cyan),var(--glow-green));
  transition:width .4s;
}

/* ── Comparison mode ── */
/* ── Compare: Guess Before You See ── */
.agc-wrap{display:flex;flex-direction:column;gap:14px;}

/* Animals header */
.agc-header{
  display:grid;grid-template-columns:1fr 48px 1fr;gap:10px;align-items:stretch;
}
.agc-animal{
  border-radius:16px;padding:14px 12px;text-align:center;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
}
.agc-animal-icon{font-size:2.6rem;}
.agc-animal-name{font-family:var(--font-display);font-size:.88rem;font-weight:800;}
.agc-animal-group{font-size:.68rem;color:var(--muted);font-weight:600;}
.agc-vs{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:1.1rem;font-weight:800;color:var(--muted);
}

/* Score bar */
.agc-score-row{
  display:flex;align-items:center;gap:10px;
  font-size:.78rem;font-weight:700;color:var(--muted);
}
.agc-score-bar{flex:1;height:7px;background:rgba(255,255,255,.07);border-radius:50px;overflow:hidden;}
.agc-score-fill{height:100%;border-radius:50px;transition:width .4s cubic-bezier(.34,1.56,.64,1);
  background:linear-gradient(90deg,var(--glow-cyan),var(--glow-green));}
.agc-score-label{white-space:nowrap;min-width:52px;text-align:right;}

/* Trait rows */
.agc-rows{display:flex;flex-direction:column;gap:8px;}

.agc-row{
  border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  transition:border-color .25s;
}
.agc-row.revealed-same{border-color:rgba(0,240,122,.35);}
.agc-row.revealed-diff{border-color:rgba(255,32,112,.28);}

/* Question face (before guess) */
.agc-row-q{
  display:grid;grid-template-columns:1fr 80px 1fr;gap:0;
  align-items:center;cursor:pointer;
}
.agc-row-q-animal{
  padding:10px 12px;font-size:.78rem;font-weight:700;color:rgba(255,255,255,.25);
  text-align:center;font-style:italic;
  border-right:1px solid rgba(255,255,255,.06);
}
.agc-row-q-animal:last-child{border-right:none;border-left:1px solid rgba(255,255,255,.06);}
.agc-row-trait-center{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:10px 6px;gap:6px;
}
.agc-trait-label{
  font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;
  color:rgba(255,255,255,.4);text-align:center;line-height:1.2;
}
.agc-guess-btns{display:flex;gap:4px;}
.agc-guess-btn{
  font-size:.68rem;font-weight:800;padding:4px 8px;border-radius:6px;border:none;
  cursor:pointer;font-family:var(--font-body);transition:all .15s;
  white-space:nowrap;
}
.agc-guess-btn.same{
  background:rgba(0,240,122,.12);border:1px solid rgba(0,240,122,.3);
  color:var(--glow-green);
}
.agc-guess-btn.same:hover{background:rgba(0,240,122,.22);}
.agc-guess-btn.diff{
  background:rgba(255,32,112,.1);border:1px solid rgba(255,32,112,.25);
  color:var(--glow-pink);
}
.agc-guess-btn.diff:hover{background:rgba(255,32,112,.2);}

/* Answer face (after guess) */
.agc-row-answer{display:none;}
.agc-row.revealed .agc-row-q{display:none;}
.agc-row.revealed .agc-row-answer{
  display:grid;grid-template-columns:1fr 56px 1fr;gap:0;align-items:stretch;
  animation:agcFlip .3s ease;
}
@keyframes agcFlip{from{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scaleY(1)}}
.agc-answer-cell{
  padding:10px 12px;font-size:.78rem;font-weight:700;text-align:center;line-height:1.4;
}
.agc-answer-cell.match{
  background:rgba(0,240,122,.08);color:var(--glow-green);
}
.agc-answer-cell.diff{
  background:rgba(255,32,112,.07);color:var(--glow-pink);
}
.agc-answer-middle{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:6px 4px;gap:3px;border-left:1px solid rgba(255,255,255,.06);border-right:1px solid rgba(255,255,255,.06);
}
.agc-answer-trait{font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,.35);}
.agc-answer-verdict{font-size:.9rem;}
.agc-answer-verdict.correct{color:var(--glow-green);}
.agc-answer-verdict.wrong{color:var(--glow-pink);}

/* Explain strip */
.agc-explain{
  padding:8px 14px;font-size:.75rem;line-height:1.5;color:var(--muted);font-weight:500;
  border-top:1px solid rgba(255,255,255,.06);
  display:none;
}
.agc-row.revealed .agc-explain{display:block;animation:fadeIn .3s ease;}

/* Pair navigator */
.agc-nav{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;
}
.agc-pair-dots{display:flex;gap:6px;align-items:center;}
.agc-dot{
  width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.15);
  cursor:pointer;transition:all .2s;
}
.agc-dot.active{background:var(--ag-accent,#00e8ff);box-shadow:0 0 8px var(--ag-accent,#00e8ff);}
.agc-dot.done{background:var(--glow-green);}

/* Summary card */
.agc-summary{
  border-radius:16px;padding:20px;text-align:center;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
}
.agc-summary-score{font-family:var(--font-display);font-size:2.4rem;font-weight:800;margin-bottom:4px;}
.agc-summary-msg{font-size:.85rem;color:var(--muted);margin-bottom:14px;}


/* ══ ONBOARDING GATE ══════════════════════════════ */
#onboarding-gate{
  position:fixed;inset:0;z-index:800;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--bg);
  transition:opacity .5s ease, transform .5s ease;
  display:none;
  /* Centre the card horizontally, allow vertical scroll */
  padding:32px 16px 100px;
  box-sizing:border-box;
}
#onboarding-gate.closing{
  opacity:0;
  transform:scale(1.04);
  pointer-events:none;
}

.ob-card{
  background:#0d0d22;
  border:1px solid rgba(255,255,255,.12);
  border-radius:28px;
  padding:36px 28px 52px;
  max-width:520px;
  width:100%;
  margin:0 auto;
  text-align:center;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 60px rgba(0,232,255,.08),
    0 24px 80px rgba(0,0,0,.6);
  box-sizing:border-box;
  font-style:normal;
}
/* ob-card::before pseudo removed — was causing stacking context issues */

/* Pip intro */
.ob-pip{
  width:72px;height:72px;border-radius:50%;margin:0 auto 18px;
  background:conic-gradient(from 180deg,#00e8ff,#b040ff,#ff2070,#00e8ff);
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;
  box-shadow:0 0 0 3px rgba(0,232,255,.2), 0 0 40px rgba(0,232,255,.35);
  animation:pipPulse 2.5s ease-in-out infinite;
}
.ob-greeting{
  font-size:.72rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:2px;margin-bottom:10px;
}
.ob-title{
  font-family:var(--font-display);font-size:1.95rem;font-weight:800;
  line-height:1.1;margin-bottom:8px;
  background:linear-gradient(90deg,#00e8ff,#b040ff,#ff2070);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-size:200% auto;animation:shimmer 4s linear infinite;
  font-style:normal;
}
.ob-subtitle{
  font-size:.88rem;color:var(--muted);font-weight:500;
  line-height:1.6;margin-bottom:28px;
  max-width:360px;margin-left:auto;margin-right:auto;
}

/* Pip speech bubble */
.ob-bubble{
  background:linear-gradient(135deg,rgba(0,232,255,.10),rgba(176,64,255,.07));
  border:1px solid rgba(0,232,255,.22);
  border-radius:16px;padding:14px 18px;
  margin-bottom:28px;
  display:flex;gap:10px;align-items:flex-start;text-align:left;
  box-shadow:inset 0 1px 0 rgba(0,232,255,.08);
}
.ob-bubble-avatar{font-size:1.3rem;flex-shrink:0;margin-top:1px;}
.ob-bubble-text{font-size:.85rem;font-weight:600;color:var(--text);line-height:1.6;font-style:normal;}
.ob-bubble-name{
  font-family:var(--font-display);font-size:.95rem;font-weight:800;
  background:linear-gradient(90deg,#00e8ff,#b040ff);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  margin-bottom:2px;
  font-style:normal;
  display:block;
}

/* Divider */
.ob-divider{
  display:flex;align-items:center;gap:12px;
  margin-bottom:24px;
}
.ob-divider-line{flex:1;height:1px;background:rgba(255,255,255,.07);}
.ob-divider-label{font-size:.7rem;font-weight:700;color:var(--muted);letter-spacing:2px;text-transform:uppercase;white-space:nowrap;}

/* Name field */
.ob-name-wrap{
  position:relative;margin-bottom:22px;
}
.ob-name-label{
  font-size:.7rem;font-weight:800;color:var(--muted);
  text-transform:uppercase;letter-spacing:2px;
  text-align:left;display:block;margin-bottom:8px;
}
.ob-name-input{
  width:100%;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;padding:14px 20px;
  color:var(--text);font-family:var(--font-display);
  font-size:1.1rem;font-weight:700;outline:none;
  text-align:center;
  transition:border-color .2s, box-shadow .2s;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.25);
}
.ob-name-input:focus{
  border-color:rgba(0,232,255,.6);
  box-shadow:0 0 0 4px rgba(0,232,255,.09), inset 0 2px 8px rgba(0,0,0,.2);
}
.ob-name-input::placeholder{color:rgba(220,228,255,.22);font-weight:500;font-size:.95rem;}
/* Live character echo */
.ob-name-echo{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  font-size:.72rem;font-weight:700;color:var(--glow-cyan);
  opacity:0;transition:opacity .2s;pointer-events:none;
}
.ob-name-echo.visible{opacity:1;}

/* Avatar picker */
.ob-avatar-label{
  font-size:.7rem;font-weight:800;color:var(--muted);
  text-transform:uppercase;letter-spacing:2px;
  text-align:left;display:block;margin-bottom:10px;
}
.ob-avatar-grid{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  margin:0 0 28px 0;
  position:relative;z-index:1;
}
.ob-av{
  width:52px;height:52px;border-radius:16px;
  background:rgba(255,255,255,.06);
  border:2px solid rgba(255,255,255,.10);
  font-size:1.6rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .22s cubic-bezier(.34,1.56,.64,1);
  position:relative;
  /* iOS button reset */
  -webkit-appearance:none;
  appearance:none;
  line-height:1;
}
.ob-av:hover{transform:scale(1.15) translateY(-3px);background:rgba(255,255,255,.12);}
.ob-av.selected{
  border-color:var(--glow-cyan);
  background:rgba(0,232,255,.15);
  box-shadow:0 0 18px rgba(0,232,255,.4), 0 0 0 3px rgba(0,232,255,.12);
  transform:scale(1.12) translateY(-3px);
}
/* Checkmark on selected */
.ob-av.selected::after{
  content:'✓';
  position:absolute;top:-5px;right:-5px;
  width:16px;height:16px;border-radius:50%;
  background:var(--glow-cyan);color:#000;
  font-size:.6rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 6px rgba(0,232,255,.5);
}

/* CTA button */
.ob-cta{
  width:100%;padding:15px 20px;border:none;border-radius:16px;
  font-family:var(--font-display);font-size:1.1rem;font-weight:800;
  cursor:pointer;letter-spacing:.5px;
  background:linear-gradient(135deg,#00e8ff,#b040ff);color:#fff;
  box-shadow:0 8px 30px rgba(0,232,255,.3), inset 0 1px 0 rgba(255,255,255,.2);
  transition:all .22s cubic-bezier(.34,1.56,.64,1);
  position:relative;overflow:hidden;
  opacity:.4;pointer-events:none;
  /* iOS button reset */
  -webkit-appearance:none;
  appearance:none;
  display:block;
}
.ob-cta.ready{opacity:1;pointer-events:all;}
.ob-cta.ready:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 14px 40px rgba(0,232,255,.45);}
.ob-cta.ready:active{transform:scale(.97);}
/* Shimmer */
.ob-cta::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);
  transform:translateX(-100%);transition:transform .5s;
}
.ob-cta.ready:hover::after{transform:translateX(100%);}

/* Nudge when CTA locked */
.ob-cta-hint{
  font-size:.72rem;color:var(--muted);margin-top:8px;
  min-height:18px;transition:color .2s;
}
.ob-cta-hint.nudge{color:var(--glow-yellow);}

/* Hide main until onboarding done */
main{opacity:0;pointer-events:none;transition:opacity .5s ease .1s;}
main.revealed{opacity:1;pointer-events:all;}


/* ══════════════════════════════════════════════
   MODAL COMPONENT STYLES
══════════════════════════════════════════════ */

/* ── Shared modal inner chrome ── */
.modal-section{
  margin-bottom:18px;
}
.modal-section-label{
  font-size:.68rem;font-weight:800;color:var(--muted);
  text-transform:uppercase;letter-spacing:2px;margin-bottom:10px;
  display:flex;align-items:center;gap:8px;
}
.modal-section-label::after{
  content:'';flex:1;height:1px;background:rgba(255,255,255,.07);
}

/* ══ BADGES ══ */
.badges-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:10px;
}
.badge-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;padding:16px 10px 12px;
  text-align:center;
  transition:all .22s cubic-bezier(.34,1.56,.64,1);
  position:relative;overflow:hidden;cursor:default;
}
.badge-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.14);}
.badge-card.earned{
  border-color:rgba(255,223,0,.4);
  background:linear-gradient(160deg,rgba(255,223,0,.08),rgba(255,112,32,.04));
  box-shadow:0 0 20px rgba(255,223,0,.08);
}
.badge-card.earned::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(255,223,0,.16),transparent 65%);
  pointer-events:none;
}
.badge-icon{
  font-size:2.2rem;margin-bottom:7px;display:block;
  filter:grayscale(1) opacity(.35);transition:filter .3s;
}
.badge-card.earned .badge-icon{
  filter:none;
  animation:badgeBounce .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes badgeBounce{0%{transform:scale(0)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
.badge-name{
  font-size:.74rem;font-weight:700;color:var(--muted);
  line-height:1.3;transition:color .2s;
}
.badge-card.earned .badge-name{color:var(--glow-yellow);}
.badge-lock{
  font-size:.64rem;color:rgba(255,255,255,.2);
  margin-top:3px;line-height:1.4;
}

/* ══ NOTEBOOK ══ */
.notebook-entries{
  display:flex;flex-direction:column;gap:8px;
  margin-bottom:16px;max-height:280px;overflow-y:auto;
  padding-right:4px;
  scrollbar-width:thin;scrollbar-color:rgba(0,240,122,.3) transparent;
}
.notebook-entries::-webkit-scrollbar{width:4px;}
.notebook-entries::-webkit-scrollbar-thumb{background:rgba(0,240,122,.3);border-radius:4px;}
.notebook-entry{
  background:linear-gradient(135deg,rgba(0,240,122,.05),rgba(0,232,255,.03));
  border:1px solid rgba(0,240,122,.16);
  border-radius:12px;padding:12px 14px;
  box-shadow:inset 0 1px 0 rgba(0,240,122,.07);
  transition:border-color .2s;
}
.notebook-entry:hover{border-color:rgba(0,240,122,.28);}
.nb-meta{
  font-size:.68rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:1px;margin-bottom:5px;
}
.nb-text{font-size:.85rem;line-height:1.6;color:var(--text);}

.nb-add{display:flex;flex-direction:column;gap:8px;}
.nb-textarea{
  width:100%;min-height:80px;resize:vertical;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;padding:12px 14px;
  color:var(--text);font-family:var(--font-body);font-size:.88rem;
  outline:none;line-height:1.55;
  transition:border-color .2s, box-shadow .2s;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.2);
}
.nb-textarea:focus{
  border-color:rgba(0,240,122,.45);
  box-shadow:0 0 0 3px rgba(0,240,122,.08), inset 0 2px 8px rgba(0,0,0,.15);
}
.nb-textarea::placeholder{color:rgba(220,228,255,.22);}
.nb-row{
  display:flex;gap:8px;align-items:center;
}
.nb-row select{
  flex:1;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);
  border-radius:12px;padding:10px 14px;
  color:var(--text);font-family:var(--font-body);font-size:.85rem;
  outline:none;cursor:pointer;
  transition:border-color .2s;
  /* Fix default arrow on dark bg */
  -webkit-appearance:none;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(220,228,255,.4)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:32px;
}
.nb-row select:focus{border-color:rgba(0,240,122,.45);}
.nb-row select option{background:#0e0e24;color:var(--text);}

/* ══ LEADERBOARD ══ */
.lb-join{
  display:flex;flex-direction:column;gap:10px;
  margin-bottom:16px;
  padding:14px 16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
}
.lb-join-desc{font-size:.82rem;color:var(--muted);font-weight:600;line-height:1.5;}
.lb-join-row{display:flex;gap:8px;}
.lb-join-input{
  flex:1;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);
  border-radius:12px;padding:10px 14px;
  color:var(--text);font-family:var(--font-body);font-size:.88rem;
  outline:none;
  transition:border-color .2s, box-shadow .2s;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.2);
}
.lb-join-input:focus{
  border-color:rgba(0,232,255,.5);
  box-shadow:0 0 0 3px rgba(0,232,255,.08), inset 0 1px 4px rgba(0,0,0,.15);
}
.lb-join-input::placeholder{color:rgba(220,228,255,.25);}

.leaderboard-list{display:flex;flex-direction:column;gap:7px;}
.lb-entry{
  display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  border-radius:13px;padding:11px 15px;
  transition:all .18s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.lb-entry:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);}
.lb-entry.you{
  background:linear-gradient(135deg,rgba(0,232,255,.08),rgba(176,64,255,.05));
  border-color:rgba(0,232,255,.28);
  box-shadow:0 0 20px rgba(0,232,255,.08), inset 0 1px 0 rgba(0,232,255,.07);
}
.lb-rank{
  font-family:var(--font-display);font-size:1.15rem;font-weight:800;
  min-width:30px;text-align:center;
}
.lb-rank.gold{color:#ffd700;}
.lb-rank.silver{color:#c0c0c0;}
.lb-rank.bronze{color:#cd7f32;}
.lb-avatar{
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;font-size:1.15rem;
}
.lb-name{flex:1;font-weight:700;font-size:.9rem;}
.lb-score{font-weight:800;color:var(--glow-yellow);font-size:.9rem;}

/* ══ PRINT REPORT ══ */
.print-preview{
  background:#fff;color:#111;
  border-radius:14px;padding:24px;
  margin-bottom:14px;
  font-family:'Space Grotesk',sans-serif;
  border:1px solid rgba(255,255,255,.1);
  max-height:500px;overflow-y:auto;
  scrollbar-width:thin;
}
.print-header{
  display:flex;justify-content:space-between;
  align-items:flex-start;margin-bottom:18px;
  border-bottom:3px solid #111;padding-bottom:12px;
  flex-wrap:wrap;gap:8px;
}
.print-logo{font-size:1.2rem;font-weight:800;}
.print-meta{font-size:.75rem;color:#555;text-align:right;}
.print-section{margin-bottom:16px;}
.print-section h3{
  font-size:.9rem;font-weight:800;color:#111;
  border-bottom:2px solid #eee;padding-bottom:4px;margin-bottom:8px;
}
.print-stat-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px;}
.print-stat{
  background:#f5f5f5;border-radius:8px;padding:8px 12px;
  text-align:center;min-width:72px;
}
.print-stat-val{font-size:1.4rem;font-weight:800;color:#111;}
.print-stat-lbl{font-size:.62rem;color:#666;text-transform:uppercase;letter-spacing:1px;}
.print-table{width:100%;border-collapse:collapse;font-size:.78rem;}
.print-table th,.print-table td{padding:6px 8px;border:1px solid #ddd;text-align:left;}
.print-table th{background:#f0f0f0;font-weight:800;}
.print-blank-lines{margin-top:6px;}
.print-blank-line{border-bottom:1px solid #ddd;height:26px;margin-bottom:3px;}

@media print{
  body>*:not(#print-modal){display:none!important;}
  #print-modal{display:block!important;position:static!important;}
  .modal-overlay{
    position:static!important;background:none!important;
    opacity:1!important;pointer-events:all!important;
  }
  .modal-box{
    box-shadow:none!important;border:none!important;
    max-height:none!important;overflow:visible!important;
  }
  .no-print{display:none!important;}
}


/* ══ SAVE / RESTORE MODAL ══ */
.save-modal-tabs{
  display:flex;gap:4px;margin-bottom:20px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:4px;
}
.save-tab-btn{
  flex:1;padding:9px;border-radius:9px;border:none;
  font-family:var(--font-body);font-size:.82rem;font-weight:700;
  cursor:pointer;color:var(--muted);background:none;transition:all .18s;
}
.save-tab-btn.active{
  background:linear-gradient(135deg,rgba(0,232,255,.18),rgba(176,64,255,.14));
  color:var(--text);border:1px solid rgba(0,232,255,.28);
}
.save-pane{display:none;}
.save-pane.active{display:flex;flex-direction:column;gap:14px;animation:fadeIn .2s ease;}

/* Save pane */
.save-code-display{
  background:rgba(0,0,0,.35);
  border:1px solid rgba(0,232,255,.3);
  border-radius:16px;padding:20px;text-align:center;
  box-shadow:0 0 30px rgba(0,232,255,.07);
}
.save-code-label{
  font-size:.68rem;font-weight:800;color:var(--muted);
  text-transform:uppercase;letter-spacing:2px;margin-bottom:10px;
}
.save-code-value{
  font-family:var(--font-display);font-size:2rem;font-weight:800;
  letter-spacing:6px;color:var(--glow-cyan);
  text-shadow:0 0 20px rgba(0,232,255,.5);
  margin-bottom:10px;cursor:pointer;
  transition:transform .15s;
  display:block;
}
.save-code-value:hover{transform:scale(1.04);}
.save-code-hint{font-size:.86rem;color:var(--muted);font-weight:600;line-height:1.5;}
.save-code-copied{
  font-size:.75rem;color:var(--glow-green);font-weight:700;
  min-height:18px;margin-top:4px;transition:opacity .3s;
}

.save-snapshot{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:14px 16px;
}
.save-snapshot-title{
  font-size:.72rem;font-weight:800;color:var(--muted);
  text-transform:uppercase;letter-spacing:1.5px;margin-bottom:10px;
}
.save-snapshot-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px;
}
.save-snap-item{
  background:rgba(255,255,255,.05);border-radius:10px;
  padding:8px 10px;text-align:center;
}
.save-snap-val{font-family:var(--font-display);font-size:1.2rem;font-weight:800;color:var(--glow-cyan);}
.save-snap-lbl{font-size:.62rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:1px;}

/* Restore pane */
.restore-input-wrap{display:flex;flex-direction:column;gap:8px;}
.restore-input{
  width:100%;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
  border-radius:14px;padding:14px 18px;
  color:var(--text);font-family:var(--font-display);
  font-size:1.3rem;font-weight:800;letter-spacing:4px;
  text-align:center;text-transform:uppercase;outline:none;
  transition:border-color .2s, box-shadow .2s;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.25);
}
.restore-input:focus{
  border-color:rgba(0,232,255,.55);
  box-shadow:0 0 0 3px rgba(0,232,255,.09), inset 0 2px 8px rgba(0,0,0,.18);
}
.restore-input::placeholder{
  color:rgba(220,228,255,.18);font-size:.95rem;letter-spacing:2px;font-weight:500;
}
.restore-result{
  border-radius:12px;padding:12px 14px;font-size:.85rem;font-weight:600;
  min-height:44px;display:flex;align-items:center;gap:8px;
}
.restore-result.success{
  background:rgba(0,240,122,.1);border:1px solid rgba(0,240,122,.28);color:var(--glow-green);
}
.restore-result.error{
  background:rgba(255,32,112,.08);border:1px solid rgba(255,32,112,.22);color:var(--glow-pink);
}
.restore-result.idle{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);color:var(--muted);
}


/* ── Onboarding two-path toggle ── */
.ob-path-toggle{
  display:flex;gap:6px;margin-bottom:24px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:5px;
}
.ob-path-btn{
  flex:1;padding:10px 8px;border-radius:10px;border:none;
  font-family:var(--font-body);font-size:.82rem;font-weight:700;
  cursor:pointer;color:var(--muted);background:none;
  transition:all .2s;display:flex;align-items:center;justify-content:center;gap:6px;
  -webkit-appearance:none;appearance:none;
  font-style:normal;
}
.ob-path-btn.active{
  background:linear-gradient(135deg,rgba(0,232,255,.18),rgba(176,64,255,.14));
  color:var(--text);border:1px solid rgba(0,232,255,.28);
  box-shadow:0 2px 12px rgba(0,232,255,.12);
}
.ob-path-pane{display:none;}
.ob-path-pane.active{display:block;animation:fadeIn .22s ease;}

/* Restore path */
.ob-restore-input{
  width:100%;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);
  border-radius:14px;padding:14px 18px;
  color:var(--text);font-family:var(--font-display);
  font-size:1.3rem;font-weight:800;letter-spacing:5px;
  text-align:center;text-transform:uppercase;outline:none;
  transition:border-color .2s,box-shadow .2s;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.25);
}
.ob-restore-input:focus{
  border-color:rgba(0,232,255,.55);
  box-shadow:0 0 0 3px rgba(0,232,255,.09),inset 0 2px 8px rgba(0,0,0,.18);
}
.ob-restore-input::placeholder{
  color:rgba(220,228,255,.18);font-size:.9rem;letter-spacing:2px;font-weight:500;
}
.ob-restore-status{
  border-radius:12px;padding:11px 14px;
  font-size:.84rem;font-weight:600;min-height:44px;
  display:flex;align-items:center;gap:8px;line-height:1.45;
}
.ob-restore-status.idle{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);color:var(--muted);}
.ob-restore-status.ok  {background:rgba(0,240,122,.10);border:1px solid rgba(0,240,122,.28);color:var(--glow-green);}
.ob-restore-status.err {background:rgba(255,32,112,.08);border:1px solid rgba(255,32,112,.22);color:var(--glow-pink);}

/* Divider "or" style */
.ob-or{
  display:flex;align-items:center;gap:10px;
  font-size:.68rem;font-weight:700;color:var(--muted);
  letter-spacing:2px;text-transform:uppercase;
}
.ob-or::before,.ob-or::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.07);}


/* ══ ADAPTATIONS REVAMP ══ */
.ada-wrap{display:flex;flex-direction:column;gap:14px;}

/* selector strip */
.ada-strip{display:flex;flex-wrap:wrap;gap:8px;}
.ada-btn{
  display:flex;align-items:center;gap:7px;padding:9px 16px;
  border-radius:50px;cursor:pointer;border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);font-family:var(--font-body);
  font-size:.82rem;font-weight:700;color:var(--muted);
  transition:all .22s cubic-bezier(.34,1.56,.64,1);
}
.ada-btn:hover{transform:translateY(-2px);}
.ada-btn.active{color:#000;box-shadow:0 4px 20px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.15) inset;transform:translateY(-2px);}

/* panel */
.ada-panel{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
  border-radius:20px;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.ada-header{
  padding:18px 20px 14px;display:flex;align-items:center;gap:14px;
  border-bottom:1px solid rgba(255,255,255,.06);position:relative;overflow:hidden;
}
.ada-header::before{content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 0% 50%,var(--ada-color,rgba(0,232,255,.12)),transparent 60%);
  pointer-events:none;}
.ada-header-icon{font-size:2.8rem;filter:drop-shadow(0 4px 12px var(--ada-shadow,rgba(0,232,255,.4)));}
.ada-header-name{font-family:var(--font-display);font-size:1.4rem;font-weight:800;}
.ada-header-tagline{font-size:.78rem;color:var(--muted);font-weight:600;margin-top:2px;line-height:1.5;}
.ada-header-badge{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:50px;padding:5px 14px;font-size:.75rem;font-weight:700;color:var(--muted);white-space:nowrap;}

/* mode bar */
.ada-mode-bar{display:flex;gap:0;padding:0 20px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.15);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.ada-mode-bar::-webkit-scrollbar{display:none;}
.ada-mode-btn{padding:10px 16px;font-family:var(--font-body);font-size:.78rem;font-weight:700;color:var(--muted);background:none;border:none;cursor:pointer;border-bottom:2px solid transparent;transition:all .18s;white-space:nowrap;}
.ada-mode-btn.active{color:var(--text);border-bottom-color:var(--ada-accent,#00e8ff);}
.ada-mode-btn:hover:not(.active){color:var(--text);}
.ada-content{padding:20px;}

/* ── Showcase ── */
.ada-showcase{display:flex;flex-direction:column;gap:14px;}
.ada-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;}
.ada-specimen{
  border-radius:14px;padding:4px;cursor:pointer;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);
  transition:all .22s cubic-bezier(.34,1.56,.64,1);overflow:hidden;
}
.ada-specimen:hover{transform:translateY(-4px) scale(1.03);}
.ada-specimen.active{box-shadow:0 0 0 2px var(--ada-accent,#00e8ff),0 8px 24px rgba(0,0,0,.35);}
.ada-spec-canvas{display:block;width:100%;border-radius:10px;}
.ada-spec-name{font-family:var(--font-display);font-size:.78rem;font-weight:800;text-align:center;padding:6px 4px 7px;color:var(--text);}
.ada-spec-info{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  border-radius:14px;padding:14px 16px;font-size:.84rem;line-height:1.65;
  color:var(--muted);min-height:60px;transition:all .2s;
}

/* ── EXPLORER Showcase story-card stepper ── */
.adas-shell{display:flex;flex-direction:column;align-items:center;gap:16px;padding:4px 0;}
.adas-dots{display:flex;gap:8px;align-items:center;}
.adas-dot{
  width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,.12);
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
}
.adas-dot.active{width:28px;border-radius:6px;}
.adas-card{
  width:100%;max-width:400px;
  border-radius:24px;border:1px solid;
  padding:26px 22px 22px;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  text-align:center;
}
@keyframes adasCardIn{
  from{opacity:0;transform:scale(.92) translateY(16px)}
  to  {opacity:1;transform:scale(1)   translateY(0)}
}
.adas-emoji{font-size:4.5rem;line-height:1;animation:adasFloat 2.2s ease-in-out infinite;}
@keyframes adasFloat{
  0%,100%{transform:translateY(0) scale(1)}
  50%    {transform:translateY(-8px) scale(1.07)}
}
.adas-label{font-size:.7rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;opacity:.75;}
.adas-name{font-family:var(--font-display);font-size:1.7rem;font-weight:800;line-height:1.1;}
.adas-wow{
  display:flex;align-items:flex-start;gap:10px;
  border:1px solid;border-radius:16px;padding:14px 16px;
  width:100%;text-align:left;
}
.adas-wow-star{font-size:1.5rem;flex-shrink:0;animation:adasPulse 1.8s ease-in-out infinite;}
@keyframes adasPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
.adas-wow-text{font-family:var(--font-display);font-size:1.05rem;font-weight:700;line-height:1.45;color:var(--text);}
.adas-bubbles{display:flex;flex-direction:column;gap:8px;width:100%;}
.adas-bubble{
  display:flex;align-items:flex-start;gap:10px;
  border:1px solid;border-radius:12px;padding:10px 13px;
  text-align:left;transition:transform .15s;
}
.adas-bubble:hover{transform:translateX(4px);}
.adas-bubble-icon{font-size:1.1rem;flex-shrink:0;line-height:1.3;}
.adas-bubble-text{font-size:.92rem;font-weight:600;line-height:1.45;color:var(--text);}
.adas-nav{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:400px;gap:10px;}
.adas-next{flex:1;justify-content:center;font-size:.95rem!important;padding:12px 22px!important;border-radius:14px!important;}
.adas-back{border-radius:14px!important;padding:12px 16px!important;}

/* ── How it works ── */
.ada-how-wrap{display:flex;flex-direction:column;gap:14px;}
.ada-how-canvas-wrap{border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#050510;}
.ada-how-canvas-wrap canvas{display:block;width:100%;}
.ada-how-steps{display:flex;flex-direction:column;gap:8px;}
.ada-step{
  display:flex;gap:10px;align-items:flex-start;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  border-radius:12px;padding:11px 14px;cursor:pointer;transition:all .2s;
}
.ada-step:hover{background:rgba(255,255,255,.07);}
.ada-step.active{border-color:var(--ada-accent,#00e8ff);background:rgba(0,232,255,.06);}
.ada-step-num{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:800;background:rgba(255,255,255,.1);color:var(--muted);
  transition:all .2s;
}
.ada-step.active .ada-step-num{background:var(--ada-accent,#00e8ff);color:#000;}
.ada-step-text{font-size:.82rem;line-height:1.5;font-weight:600;color:var(--muted);}
.ada-step.active .ada-step-text{color:var(--text);}

/* ── Match game ── */
.ada-match-wrap{display:flex;flex-direction:column;gap:14px;}
.ada-match-q{font-family:var(--font-display);font-size:1.05rem;font-weight:700;line-height:1.35;}
.ada-match-challenge{
  background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:16px 18px;
  display:flex;align-items:center;gap:12px;
}
.ada-match-challenge-icon{font-size:2.4rem;}
.ada-match-challenge-text{font-size:.88rem;font-weight:600;line-height:1.5;color:var(--muted);}
.ada-match-options{display:flex;flex-wrap:wrap;gap:8px;}
.ada-match-opt{
  padding:10px 16px;border-radius:12px;cursor:pointer;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);
  font-family:var(--font-body);font-size:.84rem;font-weight:700;color:var(--text);
  transition:all .18s;display:flex;align-items:center;gap:7px;
}
.ada-match-opt:hover{background:rgba(255,255,255,.1);transform:translateY(-2px);}
.ada-match-opt.correct{background:rgba(0,240,122,.12);border-color:rgba(0,240,122,.45);color:var(--glow-green);}
.ada-match-opt.wrong{background:rgba(255,32,112,.08);border-color:rgba(255,32,112,.3);color:var(--glow-pink);animation:shake .3s;}
.ada-match-fb{border-radius:12px;padding:12px 14px;font-size:.85rem;font-weight:700;min-height:44px;display:flex;align-items:center;gap:8px;}
.ada-match-fb.right{background:rgba(0,240,122,.1);border:1px solid rgba(0,240,122,.28);color:var(--glow-green);}
.ada-match-fb.wrong{background:rgba(255,32,112,.08);border:1px solid rgba(255,32,112,.22);color:var(--glow-pink);}
.ada-match-fb.idle{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);color:var(--muted);}
.ada-match-score{display:flex;align-items:center;gap:10px;font-size:.78rem;font-weight:700;color:var(--muted);}
.ada-match-score-bar{flex:1;height:6px;background:rgba(255,255,255,.08);border-radius:6px;overflow:hidden;}
.ada-match-score-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--glow-cyan),var(--glow-green));transition:width .4s;}


/* ══════════════════════════════════════════════
   MISSION CONTROL — TWO-SCREEN ARCHITECTURE
══════════════════════════════════════════════ */

/* Screen containers */
#screen-mission-control{display:block;}
#screen-lab{display:none;}

/* Mission Control hero */
.mc-hero{
  text-align:center;
  padding:40px 24px 32px;
  position:relative;
}
.mc-badge{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(0,232,255,.08);border:1px solid rgba(0,232,255,.22);
  border-radius:50px;padding:5px 18px;
  font-size:.72rem;font-weight:700;color:var(--glow-cyan);
  letter-spacing:1.5px;text-transform:uppercase;
  margin-bottom:16px;
  box-shadow:0 0 18px rgba(0,232,255,.08);
}
.mc-greeting{
  font-family:var(--font-display);font-size:clamp(1.6rem,4vw,2.6rem);
  font-weight:800;line-height:1.1;margin-bottom:8px;
}
.mc-greeting .line1{display:block;color:var(--text);}
.mc-greeting .line2{
  display:block;
  background:linear-gradient(90deg,#00e8ff,#b040ff,#ff2070);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-size:200% auto;animation:shimmer 4s linear infinite;
  font-style:normal;
}
.mc-sub{
  font-size:.92rem;color:var(--muted);font-weight:500;
  max-width:440px;margin:0 auto 10px;line-height:1.6;
}
.mc-pip-nudge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(176,64,255,.08);border:1px solid rgba(176,64,255,.2);
  border-radius:50px;padding:6px 16px;
  font-size:.78rem;font-weight:600;color:var(--muted);
  margin-bottom:32px;cursor:pointer;transition:all .18s;
}
.mc-pip-nudge:hover{background:rgba(176,64,255,.15);color:var(--text);}

/* Mission grid */
.mc-grid-label{
  text-align:center;font-size:.68rem;font-weight:800;
  color:var(--muted);letter-spacing:3px;text-transform:uppercase;
  margin-bottom:16px;position:relative;z-index:1;
}
.mc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(155px,1fr));
  gap:16px;
  padding:0 24px 60px;
  max-width:1100px;margin:0 auto;
  position:relative;z-index:1;
}

/* Mission card — bigger, more playful than topic-card */
.mc-card{
  position:relative;overflow:hidden;border-radius:24px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.038);
  padding:26px 14px 20px;text-align:center;
  cursor:pointer;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1),
             box-shadow .28s, border-color .2s;
  backdrop-filter:blur(8px);
  box-shadow:0 4px 24px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06);
}
.mc-card::before{
  content:'';position:absolute;inset:0;border-radius:24px;
  background:radial-gradient(circle at 50% 0%,var(--topic-glow,rgba(0,232,255,.18)),transparent 68%);
  opacity:0;transition:opacity .28s;
}
.mc-card::after{
  content:'';position:absolute;inset:0;border-radius:24px;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.07) 50%,transparent 62%);
  transform:translateX(-100%);transition:transform .55s;
}
.mc-card:hover{
  transform:translateY(-10px) scale(1.05);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 20px 50px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.1);
}
.mc-card:hover::before{opacity:1;}
.mc-card:hover::after{transform:translateX(100%);}

.mc-card-icon{
  font-size:3.2rem;margin-bottom:10px;display:block;
  transition:transform .32s cubic-bezier(.34,1.56,.64,1);
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.4));
}
.mc-card:hover .mc-card-icon{transform:scale(1.2) translateY(-5px) rotate(-5deg);}

.mc-card-name{
  font-family:var(--font-display);font-size:1.1rem;font-weight:800;
  color:var(--text);line-height:1.2;margin-bottom:4px;
}
.mc-card-grade{
  font-size:.65rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;
}
.mc-card-progress{
  width:100%;height:4px;background:rgba(255,255,255,.08);
  border-radius:4px;overflow:hidden;margin-bottom:10px;
}
.mc-card-progress-fill{
  height:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--glow-cyan),var(--glow-purple));
  width:0%;transition:width .7s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 0 6px rgba(0,232,255,.5);
}
.mc-card-launch{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.72rem;font-weight:800;
  color:var(--muted);text-transform:uppercase;letter-spacing:1px;
  opacity:0;transform:translateY(4px);
  transition:all .2s;
}
.mc-card:hover .mc-card-launch{opacity:1;transform:translateY(0);}

/* ── LAB SCREEN ── */
#screen-lab{
  min-height:100vh;
  animation:screenIn .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes screenIn{
  from{opacity:0;transform:scale(.97) translateY(12px)}
  to  {opacity:1;transform:scale(1)   translateY(0)}
}

/* Back button */
.back-to-mc{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:50px;padding:9px 20px;
  font-family:var(--font-body);font-size:.84rem;font-weight:700;
  color:var(--text);cursor:pointer;
  transition:all .22s cubic-bezier(.34,1.56,.64,1);
  margin:18px 24px 0;
}
.back-to-mc:hover{
  background:rgba(0,232,255,.1);
  border-color:rgba(0,232,255,.35);
  transform:translateX(-3px);
  box-shadow:0 4px 16px rgba(0,232,255,.15);
}
.back-to-mc-icon{font-size:1rem;transition:transform .18s;}
.back-to-mc:hover .back-to-mc-icon{transform:translateX(-3px);}

/* Lab screen inner */
.lab-screen-inner{
  max-width:1100px;margin:16px auto 80px;padding:0 24px;
}

/* Active header pill showing current mission */
.mc-active-pill{
  display:none;
  align-items:center;gap:8px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:50px;padding:5px 14px 5px 8px;
  font-size:.8rem;font-weight:700;color:var(--text);
  backdrop-filter:blur(6px);
}
.mc-active-pill.visible{display:inline-flex;}
.mc-active-pill-icon{font-size:1.2rem;}


/* ══ CHEMISTRY LAB ══════════════════════════════════════════ */

/* Bench */
.chem-lab-wrap{display:flex;flex-direction:column;gap:0;}

/* Mode bar (reuse ada style) */
.chem-mode-bar{display:flex;gap:0;padding:0 20px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.15);}
.chem-mode-btn{padding:10px 16px;font-family:var(--font-body);font-size:.78rem;font-weight:700;color:var(--muted);background:none;border:none;cursor:pointer;border-bottom:2px solid transparent;transition:all .18s;white-space:nowrap;}
.chem-mode-btn.active{color:var(--text);border-bottom-color:#ffa000;}
.chem-mode-btn:hover:not(.active){color:var(--text);}
.chem-content{padding:20px;}

/* ── MIXING STATION ── */
.chem-bench{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:20px;
  align-items:start;
}
@media(max-width:600px){.chem-bench{grid-template-columns:1fr;}}

/* Reagent shelf */
.chem-shelf{
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);
  border-radius:16px;padding:14px;
  display:flex;flex-direction:column;gap:8px;
}
.chem-shelf-label{font-size:.68rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:2px;margin-bottom:4px;}
.chem-bottle{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:12px;padding:8px 12px;cursor:grab;
  transition:all .18s;user-select:none;
}
.chem-bottle:hover{background:rgba(255,255,255,.1);transform:translateX(3px);}
.chem-bottle.dragging{opacity:.5;cursor:grabbing;}
.chem-bottle.selected{border-color:#ffa000;background:rgba(255,160,0,.15);box-shadow:0 0 12px rgba(255,160,0,.3);}
.chem-bottle-color{width:22px;height:28px;border-radius:5px;flex-shrink:0;border:1px solid rgba(255,255,255,.15);}
.chem-bottle-name{font-size:.78rem;font-weight:700;color:var(--text);line-height:1.2;}
.chem-bottle-type{font-size:.62rem;color:var(--muted);font-weight:600;}

/* Workbench */
.chem-workbench{
  display:flex;flex-direction:column;gap:14px;
}

/* Beaker area */
.chem-beaker-row{
  display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;
}
.chem-beaker-slot{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  cursor:pointer;
}
.chem-beaker-canvas{display:block;border-radius:8px;}
.chem-beaker-label{font-size:.72rem;font-weight:700;color:var(--muted);text-align:center;}
.chem-beaker-slot.drop-target canvas{filter:brightness(1.3);}

/* Controls row */
.chem-controls{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
}

/* Observation panel */
.chem-observation{
  background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:14px 16px;
  font-size:.85rem;line-height:1.65;color:var(--muted);
  min-height:60px;transition:all .3s;
}
.chem-observation.reacting{
  border-color:rgba(255,160,0,.4);
  background:rgba(255,160,0,.06);
  color:var(--text);
}
.chem-observation.danger{
  border-color:rgba(255,32,112,.4);
  background:rgba(255,32,112,.06);
  color:var(--glow-pink);
  animation:dangerPulse .5s ease-in-out 3;
}
@keyframes dangerPulse{0%,100%{box-shadow:0 0 0 rgba(255,32,112,0)}50%{box-shadow:0 0 20px rgba(255,32,112,.4)}}
.chem-observation.success{
  border-color:rgba(0,240,122,.4);
  background:rgba(0,240,122,.06);
  color:var(--glow-green);
}

/* Safety badge */
.chem-safety{
  display:flex;align-items:center;gap:6px;
  background:rgba(255,160,0,.08);border:1px solid rgba(255,160,0,.2);
  border-radius:10px;padding:6px 12px;
  font-size:.75rem;font-weight:700;color:rgba(255,160,0,.8);
}

/* ── DATA TABLE ── */
.chem-data-table{
  width:100%;border-collapse:collapse;font-size:.82rem;margin-top:4px;
}
.chem-data-table th{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  padding:8px 12px;text-align:left;font-weight:800;
  font-size:.72rem;text-transform:uppercase;letter-spacing:1px;color:var(--muted);
}
.chem-data-table td{
  border:1px solid rgba(255,255,255,.07);padding:8px 12px;
  color:var(--text);font-weight:500;vertical-align:top;
}
.chem-data-table tr:hover td{background:rgba(255,255,255,.03);}
.chem-data-table .result-cell{font-weight:700;}
.chem-data-table .result-cell.acid{color:#ff6644;}
.chem-data-table .result-cell.base{color:#44aaff;}
.chem-data-table .result-cell.neutral{color:#aaffaa;}
.chem-data-table .result-cell.reaction{color:#ffaa00;}
.chem-data-table .result-cell.danger{color:var(--glow-pink);}
.chem-trial-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  background:rgba(255,160,0,.2);color:#ffa000;
  font-size:.7rem;font-weight:800;flex-shrink:0;
}

/* ── AUTO GRAPH ── */
.chem-graph-wrap{
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:16px;margin-top:4px;
}
.chem-graph-title{font-size:.72rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:12px;}
.chem-graph-canvas{display:block;width:100%;border-radius:8px;}

/* ── REACTION EXPLORER ── */
.chem-rx-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;
}
.chem-rx-card{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:14px;cursor:pointer;transition:all .2s;
}
.chem-rx-card:hover{background:rgba(255,255,255,.07);transform:translateY(-2px);}
.chem-rx-card.unlocked{border-color:rgba(255,160,0,.3);background:rgba(255,160,0,.05);}
.chem-rx-icon{font-size:1.8rem;margin-bottom:6px;}
.chem-rx-name{font-family:var(--font-display);font-size:.9rem;font-weight:800;margin-bottom:4px;color:#ffa000;}
.chem-rx-eq{font-family:monospace;font-size:.72rem;color:var(--muted);margin-bottom:6px;line-height:1.5;}
.chem-rx-desc{font-size:.86rem;color:var(--muted);line-height:1.45;}
.chem-rx-lock{font-size:.7rem;color:rgba(255,255,255,.2);margin-top:6px;font-style:italic;}


/* ── Mission Control level badges ── */
.mc-level-badge{
  display:inline-block;
  font-size:.63rem;font-weight:800;
  border-radius:50px;border:1px solid;
  padding:3px 10px;margin-bottom:8px;
  letter-spacing:.5px;
  text-transform:uppercase;
}
.mc-card-blurb{
  font-size:.86rem;color:var(--muted);font-weight:500;
  line-height:1.4;margin-bottom:6px;
}

/* Filter strip buttons */
.mc-filter-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:50px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  font-family:var(--font-body);font-size:.78rem;font-weight:700;
  color:var(--muted);cursor:pointer;
  transition:all .2s cubic-bezier(.34,1.56,.64,1);
}
.mc-filter-btn:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.22);
  color:var(--text);
  transform:translateY(-2px);
}
.mc-filter-btn.active{
  background:linear-gradient(135deg,rgba(0,232,255,.18),rgba(176,64,255,.14));
  border-color:rgba(0,232,255,.35);
  color:var(--text);
  box-shadow:0 4px 16px rgba(0,232,255,.15);
  transform:translateY(-2px);
}


/* ══════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS — Full Pass
   Breakpoints: 480px (phone), 640px (large phone/small tablet),
                768px (tablet portrait), 1024px (tablet landscape)
══════════════════════════════════════════════════════════ */

/* ── BASE: make all canvas elements scale down ── */
canvas { max-width: 100%; height: auto; }

/* ── HEADER ── */
@media (max-width: 640px) {
  header {
    padding: 10px 14px;
    gap: 10px;
    flex-wrap: nowrap;
  }
  .logo-sub { display: none; }
  .logo-text { font-size: 1.1rem; }
  .pip-avatar { width: 38px; height: 38px; font-size: 1.2rem; }
  .header-stats { gap: 5px; }
  .stat-pill { padding: 4px 9px; font-size: .72rem; }
  /* Hide XP pill on very small screens, keep stars + exp */
  .stat-pill.glow-yellow { display: none; }
  .header-actions { gap: 5px; }
  .icon-btn { width: 34px; height: 34px; font-size: .95rem; }
  .mc-active-pill { display: none !important; }
}

@media (max-width: 400px) {
  .stat-pill.glow-pink { display: none; }
  .header-stats .stat-pill:not(.glow-cyan) { display: none; }
}

/* ── LEVEL BAR ── */
@media (max-width: 640px) {
  .level-bar-wrap { padding: 0 12px; margin-bottom: 12px; }
  .level-bar-inner { padding: 10px 14px; gap: 10px; }
  .level-badge { font-size: .8rem; }
  .xp-text { font-size: .68rem; }
}

/* ── ONBOARDING GATE ── */
@media (max-width: 640px) {
  .ob-card {
    padding: 28px 20px 36px;
    border-radius: 28px;
  }
  .ob-pip { width: 58px; height: 58px; font-size: 1.6rem; margin-bottom: 12px; }
  .ob-title { font-size: 1.6rem; }
  .ob-subtitle { font-size: .8rem; margin-bottom: 18px; }
  .ob-bubble { padding: 10px 13px; margin-bottom: 18px; }
  .ob-bubble-text { font-size: .8rem; }
  .ob-avatar-grid { gap: 6px; margin-bottom: 20px; }
  .ob-av { width: 44px; height: 44px; border-radius: 12px; font-size: 1.4rem; }
  .ob-name-input { font-size: 1rem; padding: 12px 14px; }
  .ob-cta { padding: 13px 18px; font-size: 1rem; }
  .ob-divider { margin-bottom: 14px; }
  .ob-restore-input { font-size: 1.1rem; letter-spacing: 3px; }
  .ob-path-btn { font-size: .76rem; padding: 9px 6px; }
}

/* ── MISSION CONTROL ── */
@media (max-width: 768px) {
  .mc-hero { padding: 28px 16px 20px; }
  .mc-greeting { font-size: clamp(1.4rem, 6vw, 2rem); }
  .mc-sub { font-size: .84rem; }
  .mc-pip-nudge { font-size: .74rem; margin-bottom: 22px; }
  .mc-grid-label { font-size: .64rem; }
  .mc-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    padding: 0 14px 40px;
  }
  .mc-card { padding: 18px 10px 14px; border-radius: 20px; }
  .mc-card-icon { font-size: 2.4rem; margin-bottom: 6px; }
  .mc-card-name { font-size: .88rem; }
  .mc-card-blurb { font-size: .7rem; }
  .mc-card-grade { font-size: .62rem; }
}

@media (max-width: 480px) {
  .mc-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0 12px 32px;
  }
  .mc-card { padding: 16px 8px 12px; }
  .mc-card-icon { font-size: 2.2rem; }
  .mc-card-name { font-size: .84rem; }
  .mc-card-blurb { display: none; }
}

/* ── BACK TO MISSION CONTROL ── */
@media (max-width: 640px) {
  .back-to-mc { margin: 12px 14px 0; padding: 8px 16px; font-size: .78rem; }
  .lab-screen-inner { padding: 0 12px; margin: 12px auto 60px; }
}

/* ── PANEL SHELL ── */
@media (max-width: 640px) {
  .panel-shell { border-radius: 20px; }
  .panel-header { padding: 16px 16px 12px; gap: 10px; flex-wrap: wrap; }
  .panel-icon { font-size: 1.8rem; }
  .panel-title { font-size: 1.2rem; }
  .panel-desc { font-size: .72rem; }
  .ask-pip-btn { padding: 7px 13px; font-size: .74rem; }
  .tab-bar { padding: 10px 14px 0; gap: 2px; }
  .tab-btn { padding: 8px 12px; font-size: .74rem; }
  .tab-content { padding: 16px 14px; }
}

/* ── EXPERIMENT WRAP — always single col on mobile ── */
@media (max-width: 768px) {
  .exp-wrap {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  /* On tablet portrait, stage goes first, controls below */
  .stage { min-height: 220px; }
  .ctrl-panel { gap: 12px; }
}

/* ── STAGE CANVAS ── */
@media (max-width: 640px) {
  .stage { min-height: 180px; border-radius: 14px; }
  .stage canvas { border-radius: 10px; }
}

/* ── CONTROLS ── */
@media (max-width: 640px) {
  .ctrl-label { font-size: .66rem; letter-spacing: 1.2px; }
  .ctrl-val { font-size: .84rem; min-width: 44px; }
  .btn { padding: 9px 16px; font-size: .82rem; }
  .btn-row { gap: 6px; }
  .result-box { font-size: .82rem; padding: 11px 13px; }
  .fact-chip { font-size: .7rem; padding: 3px 10px; }
}

/* ── QUIZ ── */
@media (max-width: 640px) {
  .quiz-wrap { max-width: 100%; }
  .quiz-q { font-size: 1.05rem; }
  .quiz-opt { padding: 11px 14px; font-size: .84rem; }
  .quiz-score-big { font-size: 2.4rem; }
}

/* ── SCIENTIFIC METHOD FLOW ── */
@media (max-width: 640px) {
  .sci-act-header { padding: 10px 12px; gap: 8px; }
  .sci-act-title { font-size: .88rem; }
  .sci-act-body { padding: 12px; }
  .hypo-row { flex-wrap: wrap; gap: 6px; }
  .hypo-connector { min-width: 40px; font-size: .72rem; }
  .hypo-field { min-width: 80px; font-size: .8rem; padding: 7px 10px; }
  .confidence-opt { padding: 6px 4px; font-size: .68rem; }
  .hypo-starter-btn { font-size: .74rem; padding: 4px 11px; }
}

/* ── MODALS ── */
@media (max-width: 640px) {
  .modal-box {
    padding: 22px 18px;
    border-radius: 20px;
    max-height: 88vh;
  }
  .modal-title { font-size: 1.2rem; }
  .badges-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
  .badge-card { padding: 14px 8px 10px; border-radius: 14px; }
  .badge-icon { font-size: 1.9rem; }
  .badge-name { font-size: .7rem; }
  .nb-row { flex-wrap: wrap; }
  .lb-entry { padding: 10px 12px; gap: 9px; }
  .lb-name { font-size: .84rem; }
  .print-stat-row { gap: 8px; }
  .print-stat { min-width: 60px; padding: 7px 10px; }
  .print-stat-val { font-size: 1.2rem; }
}

/* ── PIP CHAT ── */
@media (max-width: 640px) {
  #pip-modal .modal-box { padding: 18px 16px; }
  .pip-chat-window { max-height: 240px; min-height: 160px; }
  .pip-bubble, .user-bubble { font-size: .82rem; padding: 9px 12px; }
  .pip-input { font-size: .85rem; padding: 10px 13px; }
}

/* ── PIP GREETING BUBBLE ── */
@media (max-width: 640px) {
  #pip-greet-bubble { width: 230px; }
}

/* ── LIFE CYCLE ── */
@media (max-width: 640px) {
  .lc-nav-title { font-size: .95rem; }
  .lc-story-text { font-size: .82rem; line-height: 1.6; }
  .lc-pip-q-text { font-size: .78rem; }
  .lc-ans-btn { font-size: .72rem; padding: 4px 10px; }
  .lc-card { width: 82px; height: 80px; }
  .lc-card-icon { font-size: 1.7rem; }
  .lc-card-name { font-size: .6rem; }
  .lc-slot { width: 82px; height: 80px; }
  .lc-drag-bank { gap: 8px; padding: 12px; }
  .lc-drag-slots { gap: 8px; }
  .lc-mode-btn { font-size: .74rem; padding: 8px 8px; }
}

/* ── WATER CYCLE ── */
@media (max-width: 640px) {
  .wc-mode-btn { font-size: .72rem; padding: 7px 6px; }
  .wci-story { font-size: .8rem; }
  .wc-fact-card-q { font-size: .95rem; }
  .wc-pill { font-size: .7rem; padding: 4px 11px; }
  .wc-fill-card { font-size: .72rem; padding: 6px 10px; }
  .wc-fill-slot { width:90px; height:68px; }
  .wc-fill-drag-card { width:90px; height:60px; }
  .wc-fill-drag-card-icon { font-size:1.2rem; }
  .wc-fill-drag-card-name { font-size:.60rem; }
}

/* ── ANIMAL GROUPS ── */
@media (max-width: 640px) {
  .ag-group-strip { gap: 6px; }
  .ag-group-btn { padding: 7px 11px; font-size: .76rem; }
  .ag-header { padding: 14px 14px 10px; }
  .ag-header-name { font-size: 1.15rem; }
  .ag-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
  .ag-features { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ag-feature-card { padding: 12px 10px; }
  .ag-feat-desc { font-size: .7rem; }
  .ag-game-card { width: 82px; padding: 10px 6px; }
  .ag-game-animal-icon { font-size: 1.8rem; }
  .ag-compare-pair { grid-template-columns: 1fr 32px 1fr; gap: 6px; }
  .agc-animal { padding: 10px 8px; }
  .agc-animal-icon { font-size: 1.8rem; }
  .agc-answer-cell { font-size: .7rem; padding: 8px 8px; }
  .ag-mode-btn { padding: 9px 10px; font-size: .72rem; }
}

/* ── ADAPTATIONS ── */
@media (max-width: 640px) {
  .ada-strip { gap: 6px; }
  .ada-btn { padding: 7px 11px; font-size: .76rem; }
  .ada-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
  .ada-features { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ada-match-challenge { padding: 12px 13px; gap: 10px; }
  .ada-match-challenge-icon { font-size: 1.8rem; }
  .ada-match-opt { padding: 9px 12px; font-size: .9rem; }
  .ada-how-steps { gap: 6px; }
  .ada-step { padding: 9px 11px; }
  .ada-step-text { font-size: .9rem; }
  .ada-mode-btn { padding: 9px 10px; font-size: .72rem; }
}

/* ── FORCES / MAGNET PLAYGROUND ── */
.mag-playground-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mag-instructions {
  font-size: .9rem;
  color: var(--muted);
  text-align: center;
  padding: 6px 10px;
  background: rgba(255,255,255,.04);
  border-radius: 10px;
}
.mag-stage-container {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 0 32px rgba(0,232,255,.12), 0 0 0 1.5px rgba(0,232,255,.15);
}
.mag-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (max-width: 640px) {
  #mag-items, #cond-items { gap: 6px; }
}

/* ── ECOSYSTEM ── */
@media (max-width: 640px) {
  .wc-facts-grid { grid-template-columns: 1fr; }
  .ag-compare-rows { gap: 5px; }
}

/* ── SAVE MODAL ── */
@media (max-width: 640px) {
  .save-code-value { font-size: 1.6rem; letter-spacing: 4px; }
  .save-snapshot-grid { grid-template-columns: repeat(3, 1fr); }
  .restore-input { font-size: 1.1rem; letter-spacing: 3px; }
}

/* ── SPLASH SCREEN ── */
@media (max-width: 640px) {
  .splash-card { padding: 28px 22px 24px; border-radius: 22px; }
  .splash-name { font-size: 2rem; }
  .splash-stats { gap: 8px; }
  .splash-stat { min-width: 68px; padding: 8px 10px; }
  .splash-stat-val { font-size: 1.2rem; }
  .splash-btn { padding: 12px 28px; font-size: .95rem; }
}

/* ── FIX TOUCH SCROLLING ── */
.pip-chat-window,
.notebook-entries,
.modal-box,
.ob-card {
  -webkit-overflow-scrolling: touch;
}

/* ── TAP HIGHLIGHT REMOVAL ── */
button, .mc-card, .topic-card, .quiz-opt, .ag-group-btn,
.ada-btn, .wc-pill, .lc-card, .ag-specimen, .ada-specimen {
  -webkit-tap-highlight-color: transparent;
}

/* ── TOUCH ACTION — prevent scroll-block on interactive game cards ── */
.ag-game-card, .ada-match-opt, .ag-specimen, .ada-specimen,
.agc-guess-btn, .ag-mode-btn, .ada-mode-btn, .anim-el,
.lc-mode-btn, .wc-mode-btn,
.pf-factor-card, .rock-el, .fc-item {
  touch-action: manipulation;
}

/* ── ENSURE MIN TAP TARGET 44px ── */
.btn, .tab-btn, .icon-btn, .quiz-opt, .lc-ans-btn,
.ag-group-btn, .ada-btn, .wc-mode-btn, .lc-mode-btn,
.wc-fill-card, .agc-guess-btn {
  min-height: 44px;
}
.icon-btn { min-width: 44px; }

/* ── PREVENT TEXT OVERFLOW ── */
.mc-card-name, .panel-title, .quiz-q, .ada-header-name, .ag-header-name {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ── LANDSCAPE PHONE FIXES ── */
@media (max-width: 896px) and (max-height: 430px) and (orientation: landscape) {
  .ob-card { padding: 16px 22px; }
  .ob-pip { width: 44px; height: 44px; font-size: 1.2rem; margin-bottom: 8px; }
  .ob-title { font-size: 1.3rem; }
  .ob-bubble { margin-bottom: 12px; }
  .mc-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .stage { min-height: 160px; }
}


/* ── iOS FONT FIX ── */
/* Prevent Safari gradient text from causing italic bleed */
.ob-title, .logo-text, .hero h1 .line2, .mc-greeting .line2,
.splash-name, .level-badge, .panel-title,
.ada-header-name, .ag-header-name {
  font-style: normal !important;
  -webkit-font-smoothing: antialiased;
}
/* Fix: iOS sometimes renders font-style:italic on elements near
   -webkit-text-fill-color:transparent — reset globally */
body * {
  font-style: normal;
}
em, i, .italic {
  font-style: italic;
}
.ob-bubble-text, .pip-teaser-text, .hypo-preview,
.lc-story-text, .ada-spec-info, .wc-info-story {
  font-style: italic;
}
/* iOS input zoom fix — prevent auto-zoom on focus */
input[type="text"],
input[type="password"],
input[type="email"],
input.ob-name-input,
input.ob-restore-input,
input.pip-input,
input.setup-input,
input.lb-join-input,
input.restore-input,
textarea {
  font-size: 16px !important; /* 16px prevents iOS auto-zoom */
}
/* But keep display sizes reasonable */
.ob-name-input { font-size: 16px !important; }
.pip-input { font-size: 16px !important; }


/* ══ HEADER MOBILE FIX ══ */
@media (max-width: 768px) {
  header {
    padding: 8px 12px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto;
    gap: 0;
    align-items: center;
  }
  .logo-wrap {
    grid-column: 1;
    min-width: 0; /* allow shrink */
  }
  .logo-text { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .logo-sub { display: none; }
  .pip-avatar { width: 34px; height: 34px; font-size: 1.1rem; flex-shrink: 0; }

  /* Hide stats pills completely on mobile — XP shown in level bar below */
  .header-stats { display: none; }
  .mc-active-pill { display: none !important; }

  /* Actions — show only badges + notebook on mobile, hide print + save */
  .header-actions {
    grid-column: 2;
    display: flex;
    gap: 6px;
    flex-shrink: 0;
  }
  .icon-btn { width: 38px; height: 38px; font-size: 1rem; border-radius: 10px; }

  /* Desktop-only buttons handled by .hdr-desktop-only class */
}

@media (max-width: 480px) {
  header { padding: 7px 10px; }
  .pip-avatar { width: 30px; height: 30px; font-size: 1rem; }
  .logo-text { font-size: .9rem; }
  .icon-btn { width: 34px; height: 34px; font-size: .9rem; }
  /* Leaderboard handled by more menu on mobile */
}

/* ══ LEVEL BAR MOBILE FIX ══ */
@media (max-width: 768px) {
  .level-bar-wrap { padding: 0 10px; margin-bottom: 10px; }
  .level-bar-inner { padding: 8px 12px; gap: 8px; }
  .level-badge { font-size: .75rem; white-space: nowrap; }
  .xp-text { font-size: .66rem; white-space: nowrap; }
}

/* ══ PANEL / LAB SCREEN FULL WIDTH FIX ══ */
@media (max-width: 768px) {
  .lab-screen-inner {
    padding: 0 8px;
    margin: 10px auto 60px;
  }
  .panel-shell {
    border-radius: 16px;
    width: 100%;
  }
  .panel-header {
    padding: 12px 14px 10px;
    gap: 8px;
  }
  .panel-title-area { gap: 10px; min-width: 0; }
  .panel-icon { font-size: 1.6rem; flex-shrink: 0; }
  .panel-title { font-size: 1.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .panel-desc { font-size: .82rem; }
  .ask-pip-btn { padding: 6px 10px; font-size: .72rem; white-space: nowrap; }

  .tab-bar { padding: 8px 10px 0; gap: 2px; overflow-x: auto; }
  .tab-btn { padding: 7px 10px; font-size: .8rem; white-space: nowrap; flex-shrink: 0; }
  .tab-content { padding: 14px 12px; }

  /* Back button */
  .back-to-mc { margin: 10px 10px 0; padding: 8px 14px; font-size: .86rem; }
}

/* ══ FIX CONTENT WIDTH — prevent 40% width issue ══ */
/* Force full-width rendering — the issue is likely a table or grid
   with fixed widths not filling the container */
@media (max-width: 768px) {
  #lab-area, .lab-screen-inner { width: 100%; box-sizing: border-box; }
  .panel-shell { width: 100%; box-sizing: border-box; }
  .tab-content { width: 100%; box-sizing: border-box; }
  .exp-wrap { width: 100%; box-sizing: border-box; }
  .ctrl-panel { width: 100%; box-sizing: border-box; }
  .stage { width: 100%; box-sizing: border-box; }

  /* Fix any floated or inline-block elements */
  .chem-bench { grid-template-columns: 1fr; }
  .chem-beaker-row { justify-content: space-around; }
  .chem-beaker-canvas { width: 90px !important; }

  /* Animal/adaptation strips — wrap on mobile */
  .ag-group-strip, .ada-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .ag-group-btn, .ada-btn {
    justify-content: center;
    text-align: center;
    padding: 8px 6px;
    font-size: .72rem;
  }

  /* Life cycle mode bar */
  .lc-mode-bar { padding: 4px; }
  .lc-mode-btn { padding: 8px 6px; font-size: .82rem; }
}

/* ══ PREVENT HORIZONTAL SCROLL ══
   overflow-x:hidden must only be on body, NOT html. Setting it on html
   disables body→viewport scroll propagation (CSS spec §overflow-propagation),
   which makes body.scroll-lock permanently break vertical scroll. */
html { max-width: 100vw; }
body { overflow-x: hidden; max-width: 100vw; }
main {
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
}
#screen-mission-control, #screen-lab {
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}


/* ── HEADER MORE MENU ── */
.hdr-desktop-only { display: flex; }
.hdr-mobile-only  { display: none; }

@media (max-width: 768px) {
  .hdr-desktop-only { display: none !important; }
  .hdr-mobile-only  { display: block; }
}

.hdr-more-wrap {
  position: relative;
}
.hdr-more-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: rgba(14,14,36,.97);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 8px;
  z-index: 400;
  min-width: 190px;
  box-shadow: 0 12px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) inset;
  backdrop-filter: blur(16px);
  animation: fadeIn .18s ease;
}
.hdr-more-menu.open { display: flex; flex-direction: column; gap: 4px; }
.hdr-more-menu button {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px;
  padding: 12px 16px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  transition: all .15s;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  -webkit-appearance: none;
  font-style: normal;
}
.hdr-more-menu button:hover {
  background: rgba(0,232,255,.1);
  border-color: rgba(0,232,255,.3);
}
/* Dropdown arrow indicator on more button */
#hdr-more-btn { font-size: 1.3rem; font-weight: 800; letter-spacing: -1px; }


/* ── LC DRAG GHOST ── */
.lc-ghost{
  background:rgba(0,232,255,.2) !important;
  border:2px solid var(--glow-cyan) !important;
}
.lc-card.dragging{opacity:.3 !important;}


/* ── TIER THEMING (Explorer 5-7 vs Discoverer 8-11) ── */
body[data-tier="explorer"]{
  --tier-accent: #00f07a;
  --tier-accent-soft: rgba(0,240,122,.18);
  --tier-accent-rgb: 0,240,122;
  --tier-name: 'Explorer';
}
body[data-tier="discoverer"]{
  --tier-accent: #00e8ff;
  --tier-accent-soft: rgba(0,232,255,.18);
  --tier-accent-rgb: 0,232,255;
  --tier-name: 'Discoverer';
}
/* Explorer = bigger, friendlier */
body[data-tier="explorer"] .mc-card-name{font-size:1.15rem;}
body[data-tier="explorer"] .mc-card-blurb{font-size:.9rem;}
body[data-tier="explorer"] .mc-card-icon{font-size:2.6rem;}
body[data-tier="explorer"] .btn{font-size:1.05rem;}
body[data-tier="explorer"] .qq{font-size:1.2rem;line-height:1.5;}
/* Explorer: extra-large content text for ages 5-7 */
body[data-tier="explorer"] .result-box{font-size:1.02rem;line-height:1.6;}
body[data-tier="explorer"] .exp-intro-text{font-size:1.04rem;}
body[data-tier="explorer"] .quiz-q{font-size:1.5rem;}
body[data-tier="explorer"] .quiz-opt{font-size:1.05rem;min-height:54px;}
body[data-tier="explorer"] .lc-story-line{font-size:1.06rem;line-height:1.65;}
body[data-tier="explorer"] .pip-teaser-text{font-size:1rem;}
body[data-tier="explorer"] .panel-desc{font-size:.96rem;}
body[data-tier="explorer"] .sci-act-title{font-size:1.1rem;}
body[data-tier="explorer"] .wc-fact-card-q{font-size:1.15rem;}
body[data-tier="explorer"] .wc-fact-card-icon{font-size:3rem;}
body[data-tier="explorer"] .wc-fact-card-hint{font-size:.82rem;}
body[data-tier="explorer"] .wc-fact-modal-stat{font-size:2.8rem;}
body[data-tier="explorer"] .wc-fact-modal-q{font-size:1.2rem;}
body[data-tier="explorer"] .wc-fact-modal-a{font-size:1.05rem;line-height:1.75;}
/* ── Visual Explorer card layout — force single column, no overflow ── */
#body-sys, #plant-parts-root {
  display:block !important;
  width:100% !important;
  box-sizing:border-box !important;
  overflow-x:hidden !important;
}
#bsys-card-area, #pparts-card-area {
  width:100%;
  box-sizing:border-box;
  overflow-x:hidden;
  min-width:0;
}
#bsys-dot-row, #pparts-prog-wrap {
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center;
  gap:8px;
}
#body-sys .quiz-opt, #plant-parts-root .quiz-opt {font-size:1rem;min-height:60px;}
body[data-tier="explorer"] #bsys-dot-row > button,
body[data-tier="explorer"] #pparts-prog-wrap > div {width:42px;height:42px;font-size:1.25rem;}
/* Discoverer = denser, more academic */
body[data-tier="discoverer"] .mc-card-icon{font-size:2.1rem;}
body[data-tier="discoverer"] .mc-greeting{letter-spacing:-.5px;}
/* Tier sash — always visible in header on desktop */
.tier-sash{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:50px;
  font-size:.72rem;font-weight:800;letter-spacing:.5px;
  background:var(--tier-accent-soft);
  border:1px solid var(--tier-accent);
  color:var(--tier-accent);
  white-space:nowrap;text-transform:uppercase;
  box-shadow:0 0 18px rgba(var(--tier-accent-rgb),.25);
}
@media(max-width:768px){
  .tier-sash{font-size:.62rem;padding:3px 8px;gap:3px;}
}
@media(max-width:480px){
  .tier-sash .tier-sash-age{display:none;}
}
/* Pip avatar gets tier-tinted ring */
body[data-tier="explorer"] .pip-avatar{
  background:conic-gradient(from 180deg, #00f07a, #ffdf00, #ff7020, #00f07a);
  box-shadow:0 0 0 2px rgba(0,240,122,.3), 0 0 24px rgba(0,240,122,.45);
}
.mc-tier-pill{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(0,232,255,.08);
  border:1px solid rgba(0,232,255,.25);
  border-radius:50px;padding:5px 14px;
  font-size:.78rem;font-weight:800;color:var(--glow-cyan);
  letter-spacing:.5px;
}
.hdr-switch-btn{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);
  border-radius:50px;padding:5px 13px;
  font-family:var(--font-body);font-size:.75rem;font-weight:700;
  color:rgba(220,228,255,.85);cursor:pointer;white-space:nowrap;
  transition:all .18s;-webkit-appearance:none;
}
.hdr-switch-btn:hover{
  background:rgba(0,232,255,.12);
  border-color:rgba(0,232,255,.4);
  color:var(--glow-cyan);
  transform:translateY(-1px);
}
.mc-signout-wrap{
  text-align:center;
  margin-top:32px;
  padding-bottom:16px;
}
.mc-signout-btn{
  background:transparent;border:none;
  color:rgba(220,228,255,.18);
  font-family:var(--font-body);font-size:.68rem;font-weight:500;
  cursor:pointer;letter-spacing:.4px;
  padding:4px 8px;
  transition:color .2s;
  -webkit-appearance:none;
}
.mc-signout-btn:hover{color:rgba(220,228,255,.45);}

.mc-start-over-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  border-radius:50px;padding:5px 14px;
  font-family:var(--font-body);font-size:.76rem;font-weight:700;
  color:var(--muted);cursor:pointer;
  transition:all .18s;-webkit-appearance:none;
}
.mc-start-over-btn:hover{
  background:rgba(255,32,112,.1);
  border-color:rgba(255,32,112,.35);
  color:var(--glow-pink);
  transform:translateY(-1px);
}

.ob-age-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  margin:16px 0 20px 0;
  width:100%;
}
.ob-age-btn{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:16px 12px;border-radius:18px;cursor:pointer;
  border:2px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  transition:all .22s cubic-bezier(.34,1.56,.64,1);
  -webkit-appearance:none;font-style:normal;
}
.ob-age-btn:hover{background:rgba(255,255,255,.1);transform:translateY(-2px);}
.ob-age-btn.selected{
  border-color:var(--glow-cyan);
  background:rgba(0,232,255,.14);
  box-shadow:0 0 20px rgba(0,232,255,.3);
  transform:scale(1.04) translateY(-2px);
}
.ob-age-icon{font-size:2rem;}
.ob-age-label{font-family:var(--font-display);font-size:1.1rem;font-weight:800;color:var(--text);font-style:normal;}
.ob-age-sub{font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px;font-style:normal;}

/* Tier badge shown on mission control cards */
.mc-tier-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:.65rem;font-weight:800;
  border-radius:50px;padding:3px 10px;margin-bottom:6px;
  letter-spacing:.5px;text-transform:uppercase;
  background:rgba(0,232,255,.1);
  border:1px solid rgba(0,232,255,.25);
  color:var(--glow-cyan);
}




/* ══════════════════════════════════════════
   CORRECT ANSWER BANNER — Plants & Life Cycles
══════════════════════════════════════════ */
#pip-correct-banner {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.78);
  z-index: 9000;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
  width: min(88vw, 460px);
}
#pip-correct-banner.pcb-show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.pcb-box {
  background: linear-gradient(145deg,
    rgba(0,232,255,.13) 0%,
    rgba(0,240,122,.11) 55%,
    rgba(176,64,255,.10) 100%);
  border: 2px solid rgba(0,240,122,.5);
  border-radius: 22px;
  padding: 20px 26px 18px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,240,122,.18),
              0 0 36px rgba(0,240,122,.22),
              0 18px 50px rgba(0,0,0,.5);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.pcb-box::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 0%,
    rgba(0,240,122,.10) 0%, transparent 70%);
  pointer-events: none;
}
.pcb-emoji {
  font-size: 2.4rem;
  display: block;
  line-height: 1;
  margin-bottom: 7px;
  animation: pcbPop .38s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes pcbPop {
  0%   { transform: scale(0) rotate(-12deg); }
  65%  { transform: scale(1.22) rotate(4deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.pcb-headline {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  color: #00f07a;
  text-shadow: 0 0 18px rgba(0,240,122,.55);
  line-height: 1.1;
  margin-bottom: 5px;
}
.pcb-explain {
  font-size: .80rem;
  color: rgba(210,235,255,.82);
  line-height: 1.55;
  font-weight: 500;
  max-width: 340px;
  margin: 0 auto;
}
.pcb-xp {
  display: inline-block;
  margin-top: 11px;
  background: rgba(0,232,255,.14);
  border: 1px solid rgba(0,232,255,.32);
  border-radius: 50px;
  padding: 3px 13px;
  font-size: .73rem;
  font-weight: 700;
  color: var(--glow-cyan);
  letter-spacing: .04em;
}
.pcb-spark {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  pointer-events: none;
  animation: pcbSpark .55s ease forwards;
  opacity: 0;
}
@keyframes pcbSpark {
  0%   { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(0); }
}

/* ══ EXPLORER SPECIMEN CARD ══════════════════════════ */
.ag-exp-card{display:flex;flex-direction:column;gap:12px;padding:4px 0;}
.ag-exp-hero{display:flex;align-items:center;gap:14px;padding-bottom:4px;}
.ag-exp-hero-emoji{font-size:3.2rem;line-height:1;flex-shrink:0;animation:agEmojiFloat 2.2s ease-in-out infinite;}
@keyframes agEmojiFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.ag-exp-hero-name{font-family:var(--font-display);font-size:1.5rem;font-weight:800;line-height:1.1;}
.ag-exp-wow{
  border:1.5px solid;border-radius:14px;padding:12px 14px;
  display:flex;align-items:flex-start;gap:10px;
}
.ag-exp-wow-star{font-size:1.5rem;flex-shrink:0;animation:agWowPulse 1.6s ease-in-out infinite;}
@keyframes agWowPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.ag-exp-wow-text{font-family:var(--font-display);font-size:1.05rem;font-weight:700;line-height:1.4;color:var(--text);}
.ag-exp-bubbles{display:flex;flex-direction:column;gap:8px;}
.ag-exp-bubble{
  border:1px solid;border-radius:12px;padding:10px 12px;
  display:flex;align-items:flex-start;gap:10px;
  transition:transform .15s;cursor:default;
}
.ag-exp-bubble:hover{transform:translateX(4px);}
.ag-exp-bubble-icon{font-size:1.15rem;flex-shrink:0;line-height:1.3;}
.ag-exp-bubble-text{font-size:.92rem;font-weight:600;line-height:1.45;color:var(--text);}
@keyframes agExpCardIn{from{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* ══════════════════════════════════════════
   MONTHLY MISSION SYSTEM
══════════════════════════════════════════ */

/* ── Banner on Mission Control ── */
.mm-banner{
  position:relative;overflow:hidden;border-radius:24px;
  margin:0 24px 28px;cursor:pointer;
  background:#07040f;
  border:1px solid rgba(255,210,60,.45);
  box-shadow:0 0 0 1px rgba(255,210,60,.1),0 0 40px rgba(255,170,0,.2),0 10px 50px rgba(0,0,0,.5),inset 0 0 80px rgba(255,150,0,.04);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;
  max-width:1052px;margin-left:auto;margin-right:auto;
  display:block;
}
@media(max-width:768px){.mm-banner{margin:0 10px 20px;border-radius:20px;}}
.mm-banner:hover{
  transform:translateY(-6px) scale(1.008);
  box-shadow:0 0 0 1px rgba(255,210,60,.2),0 0 60px rgba(255,170,0,.32),0 22px 70px rgba(0,0,0,.55),inset 0 0 80px rgba(255,150,0,.07);
}
.mm-banner-aura{
  position:absolute;inset:0;pointer-events:none;
  animation:mmAura 4s ease-in-out infinite;
}
@keyframes mmAura{0%,100%{opacity:.8}50%{opacity:1}}
.mm-banner-canvas{position:absolute;inset:0;pointer-events:none;}
.mm-banner::after{
  content:'';position:absolute;top:0;left:-120%;width:55%;height:100%;
  background:linear-gradient(105deg,transparent 25%,rgba(255,235,120,.09) 50%,transparent 75%);
  animation:mmSweep 3.4s ease-in-out infinite;pointer-events:none;
}
@keyframes mmSweep{0%{left:-120%}100%{left:160%}}
.mm-banner-inner{position:relative;z-index:2;padding:22px 24px 20px;}
@media(max-width:640px){.mm-banner-inner{padding:16px 16px 15px;}}

.mm-newrow{display:flex;align-items:center;gap:9px;margin-bottom:13px;flex-wrap:wrap;}
.mm-newdot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
  background:var(--mm-accent,#ffd700);
  box-shadow:0 0 8px var(--mm-accent,#ffd700),0 0 18px rgba(255,200,40,.35);
  animation:mmDot 1.5s ease-in-out infinite;
}
@keyframes mmDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.2;transform:scale(.65)}}
.mm-newtext{
  font-family:var(--font-display);font-size:1rem;font-weight:800;
  color:var(--mm-accent,#ffd700);
}
.mm-monthtag{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);
  border-radius:50px;padding:3px 12px;
  font-size:.67rem;font-weight:700;color:rgba(220,228,255,.5);
}

.mm-hero{display:flex;align-items:flex-start;gap:16px;margin-bottom:13px;}
.mm-iconframe{
  width:70px;height:70px;border-radius:20px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:2.7rem;
  border:1px solid var(--mm-border,rgba(255,200,40,.4));
  background:var(--mm-icon-bg,linear-gradient(145deg,rgba(255,200,40,.18),rgba(255,100,0,.1)));
  box-shadow:0 0 0 6px var(--mm-ring,rgba(255,180,0,.07)),0 0 28px var(--mm-glow,rgba(255,170,0,.22));
  animation:mmIconPulse 2.8s ease-in-out infinite;
}
@keyframes mmIconPulse{
  0%,100%{box-shadow:0 0 0 5px var(--mm-ring,rgba(255,180,0,.07)),0 0 22px var(--mm-glow,rgba(255,170,0,.18))}
  50%{box-shadow:0 0 0 10px var(--mm-ring,rgba(255,180,0,.12)),0 0 42px var(--mm-glow,rgba(255,170,0,.38))}
}
@media(max-width:640px){.mm-iconframe{width:56px;height:56px;font-size:2.1rem;border-radius:16px;}}
.mm-eyebrow{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:5px;color:var(--mm-accent-soft,rgba(255,200,80,.6));}
.mm-title{
  font-family:var(--font-display);font-size:1.6rem;font-weight:800;line-height:1.05;margin-bottom:5px;
  background:var(--mm-title-grad,linear-gradient(90deg,#ffe566,#ffb020,#ff8c00));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-size:200% auto;animation:mmTitleFlow 4s linear infinite;
}
@keyframes mmTitleFlow{0%{background-position:0%}100%{background-position:200%}}
@media(max-width:640px){.mm-title{font-size:1.25rem;}}
.mm-subtitle{font-size:.88rem;color:rgba(220,228,255,.65);font-weight:600;}
.mm-desc{font-size:.84rem;color:rgba(220,228,255,.54);line-height:1.6;margin-bottom:16px;max-width:82%;}
@media(max-width:640px){.mm-desc{max-width:100%;font-size:.8rem;}}

.mm-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.mm-pill{
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);
  border-radius:50px;padding:4px 12px;font-size:.72rem;font-weight:700;
  color:rgba(220,228,255,.58);display:flex;align-items:center;gap:5px;
}
.mm-pill.mm-xp-pill{
  color:var(--mm-accent,#ffd700);
  border-color:var(--mm-pill-border,rgba(255,200,40,.3));
  background:var(--mm-pill-bg,rgba(255,200,40,.08));
}
.mm-cta-btn{
  margin-left:auto;
  background:var(--mm-cta-grad,linear-gradient(135deg,#ffe566,#ffaa00));
  border:none;border-radius:50px;padding:10px 24px;
  font-family:var(--font-body);font-weight:800;font-size:.84rem;
  color:var(--mm-cta-text,#1a0e00);cursor:pointer;white-space:nowrap;
  box-shadow:0 4px 20px var(--mm-cta-shadow,rgba(255,180,0,.4));
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;
}
.mm-cta-btn:hover{transform:scale(1.08);box-shadow:0 6px 28px var(--mm-cta-shadow,rgba(255,180,0,.6));}
@media(max-width:480px){.mm-cta-btn{width:100%;justify-content:center;margin-left:0;margin-top:8px;}}

/* ── Mission Screen (lab panel style) ── */
#screen-mission{display:none;animation:panelIn .42s cubic-bezier(.34,1.56,.64,1);}
#screen-mission.active{display:block;}

.mm-screen-inner{max-width:700px;margin:16px auto 80px;padding:0 24px;}
@media(max-width:640px){.mm-screen-inner{padding:0 12px;}}

.mm-month-tag{
  display:inline-flex;align-items:center;gap:7px;
  border-radius:50px;padding:4px 14px;margin-bottom:14px;
  font-size:.68rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--mm-accent,#ffd700);
  background:var(--mm-pill-bg,rgba(255,200,40,.09));
  border:1px solid var(--mm-pill-border,rgba(255,200,40,.28));
}
.mm-screen-header{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.mm-screen-icon{
  width:64px;height:64px;border-radius:20px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:2.5rem;
  border:1px solid var(--mm-border,rgba(255,200,40,.35));
  background:var(--mm-icon-bg,linear-gradient(135deg,rgba(255,200,40,.15),rgba(255,120,0,.1)));
  box-shadow:0 0 26px var(--mm-glow,rgba(255,180,0,.18));
  animation:mmIconPulse 2.8s ease-in-out infinite;
}
.mm-screen-title{font-family:var(--font-display);font-size:1.45rem;font-weight:800;line-height:1.1;margin-bottom:6px;}
.mm-screen-meta{font-size:.78rem;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}

.mm-pip-intro{
  background:linear-gradient(135deg,rgba(0,232,255,.06),rgba(176,64,255,.04));
  border:1px solid rgba(0,232,255,.18);border-radius:16px;
  padding:15px 16px;margin-bottom:18px;
  display:flex;gap:11px;align-items:flex-start;
}
.mm-pip-av{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:conic-gradient(from 180deg,#00e8ff,#b040ff,#ff2070,#00e8ff);
  display:flex;align-items:center;justify-content:center;font-size:.95rem;
  box-shadow:0 0 10px rgba(0,232,255,.35);
}
.mm-pip-name{font-size:.67rem;font-weight:700;color:#00e8ff;letter-spacing:1px;text-transform:uppercase;margin-bottom:3px;}
.mm-pip-text{font-size:.86rem;color:rgba(220,228,255,.72);line-height:1.6;font-style:italic;font-weight:500;}

/* progress bar */
.mm-prog-label{font-size:.67rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
.mm-prog-bar{background:rgba(255,255,255,.07);border-radius:50px;height:7px;margin-bottom:6px;overflow:hidden;}
.mm-prog-fill{height:100%;border-radius:50px;background:var(--mm-cta-grad,linear-gradient(90deg,#ffd700,#ff8c00));transition:width .6s cubic-bezier(.34,1.56,.64,1);box-shadow:0 0 8px var(--mm-glow,rgba(255,180,0,.35));}
.mm-prog-text{font-size:.72rem;color:var(--muted);font-weight:600;text-align:right;margin-bottom:14px;}

/* step cards */
.mm-step{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:16px;padding:13px 15px;margin-bottom:9px;
  display:flex;align-items:center;gap:13px;cursor:pointer;transition:all .2s;
}
.mm-step:hover:not(.mm-step-locked){background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15);}
.mm-step-locked{opacity:.42;cursor:not-allowed;}
.mm-step-done{border-color:rgba(0,240,122,.32)!important;background:rgba(0,240,122,.04)!important;}
.mm-step-active{
  border-color:var(--mm-border,rgba(255,200,40,.42))!important;
  background:var(--mm-pill-bg,rgba(255,200,40,.06))!important;
  box-shadow:0 0 18px var(--mm-glow,rgba(255,180,0,.08));
}
.mm-step-num{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:.88rem;color:var(--muted);
}
.mm-step-done .mm-step-num{background:rgba(0,240,122,.14);border-color:rgba(0,240,122,.48);color:#00f07a;}
.mm-step-active .mm-step-num{background:var(--mm-pill-bg,rgba(255,200,40,.18));border-color:var(--mm-accent,#ffc828);color:var(--mm-accent,#ffc828);}
.mm-step-info{flex:1;}
.mm-step-title{font-weight:700;font-size:.9rem;margin-bottom:2px;color:var(--text);}
.mm-step-desc{font-size:.74rem;color:var(--muted);}
.mm-step-xp{
  font-size:.7rem;font-weight:700;
  color:var(--mm-accent,#ffc828);
  background:var(--mm-pill-bg,rgba(255,200,40,.09));
  border:1px solid var(--mm-pill-border,rgba(255,200,40,.22));
  border-radius:50px;padding:3px 10px;white-space:nowrap;
}
.mm-step-done .mm-step-xp{color:#00f07a;background:rgba(0,240,122,.09);border-color:rgba(0,240,122,.28);}

/* activity shell */
.mm-act-shell{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);border-radius:20px;overflow:hidden;margin-bottom:16px;}
.mm-act-header{
  padding:15px 19px;display:flex;align-items:center;gap:11px;
  border-bottom:1px solid var(--mm-pill-border,rgba(255,200,40,.18));
  background:var(--mm-act-header-bg,linear-gradient(135deg,rgba(255,200,40,.09),rgba(255,120,0,.05)));
}
.mm-act-header-icon{font-size:1.5rem;}
.mm-act-title{font-family:var(--font-display);font-weight:800;font-size:1.05rem;}
.mm-act-sub{font-size:.72rem;color:var(--muted);}
.mm-act-body{padding:17px 19px;}

/* quiz inside mission */
.mm-quiz-q{font-family:var(--font-display);font-size:1.18rem;font-weight:700;line-height:1.35;margin-bottom:15px;}
.mm-quiz-opt{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  border-radius:12px;padding:11px 15px;margin-bottom:8px;cursor:pointer;
  font-size:.9rem;font-weight:600;color:var(--text);transition:all .17s;
  display:flex;align-items:center;gap:10px;
}
.mm-quiz-opt:hover{background:var(--mm-pill-bg,rgba(255,200,40,.08));border-color:var(--mm-border,rgba(255,200,40,.28));transform:translateX(3px);}
.mm-quiz-opt.mm-correct{background:rgba(0,240,122,.09);border-color:rgba(0,240,122,.42);color:#00f07a;}
.mm-quiz-opt.mm-wrong{background:rgba(255,32,112,.07);border-color:rgba(255,32,112,.32);color:#ff6080;}
.mm-quiz-letter{width:25px;height:25px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;flex-shrink:0;}

/* Follow-up bonus question buttons */
.mm-bonus-opt{
  width:100%;display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:12px;padding:13px 16px;margin-bottom:8px;cursor:pointer;
  font-family:var(--font-body);font-size:.95rem;font-weight:600;
  color:var(--text);text-align:left;line-height:1.35;
  transition:background .17s, border-color .17s, box-shadow .17s, transform .17s;
}
.mm-bonus-opt:hover{
  background:rgba(0,232,255,.08);
  border-color:rgba(0,232,255,.35);
  box-shadow:0 4px 14px rgba(0,232,255,.13);
  transform:translateX(3px);
}
body[data-tier="explorer"] .mm-bonus-opt{
  font-size:1.05rem;padding:15px 16px;border-radius:14px;font-weight:700;
}
.mm-quiz-fb{border-radius:12px;padding:11px 15px;margin-top:11px;font-size:.86rem;font-weight:600;line-height:1.55;display:none;}
.mm-quiz-fb.mm-fb-ok{display:block;background:rgba(0,240,122,.07);border:1px solid rgba(0,240,122,.28);color:#00f07a;}
.mm-quiz-fb.mm-fb-no{display:block;background:rgba(255,32,112,.06);border:1px solid rgba(255,32,112,.22);color:#ff8090;}

/* facts activity */
.mm-fact-card{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:14px 16px;margin-bottom:10px;
  display:flex;gap:12px;align-items:flex-start;
  animation:fadeIn .3s ease;
}
.mm-fact-emoji{font-size:1.8rem;flex-shrink:0;line-height:1;}
.mm-fact-text{font-size:.9rem;font-weight:600;color:var(--text);line-height:1.6;}

/* Explorer tier: bigger, bolder, more visual fact cards */
.mm-fact-card-explorer{
  padding:16px 18px;border-radius:18px;gap:14px;
  background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.12);
}
.mm-fact-card-explorer .mm-fact-emoji{font-size:2.6rem;}
.mm-fact-card-explorer .mm-fact-text{font-size:1.02rem;line-height:1.65;font-weight:700;}

/* primary + ghost buttons */
.mm-primary-btn{
  background:var(--mm-cta-grad,linear-gradient(135deg,#ffe566,#ffaa00));
  border:none;border-radius:13px;padding:12px 26px;
  font-family:var(--font-body);font-weight:800;font-size:.92rem;
  color:var(--mm-cta-text,#1a0e00);cursor:pointer;width:100%;
  box-shadow:0 5px 20px var(--mm-cta-shadow,rgba(255,180,0,.35));
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;margin-top:13px;
}
.mm-primary-btn:hover{transform:translateY(-2px) scale(1.01);box-shadow:0 8px 28px var(--mm-cta-shadow,rgba(255,180,0,.5));}
.mm-ghost-btn{
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11);
  border-radius:13px;padding:11px 26px;
  font-family:var(--font-body);font-weight:700;font-size:.86rem;
  color:var(--muted);cursor:pointer;width:100%;transition:all .15s;margin-top:8px;
}
.mm-ghost-btn:hover{background:rgba(255,255,255,.09);color:var(--text);}

/* completion */
.mm-complete{text-align:center;padding:10px 0;}
.mm-complete-medal{font-size:4.2rem;display:block;margin-bottom:13px;animation:medpopMM .7s cubic-bezier(.34,1.56,.64,1);}
@keyframes medpopMM{from{transform:scale(0) rotate(-15deg);opacity:0}to{transform:scale(1);opacity:1}}
.mm-complete-title{font-family:var(--font-display);font-size:1.75rem;font-weight:800;background:var(--mm-title-grad,linear-gradient(90deg,#ffd700,#ffaa00,#ff8c00));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:7px;}
.mm-complete-sub{font-size:.92rem;color:var(--muted);margin-bottom:20px;line-height:1.55;}
.mm-complete-xp{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--mm-pill-bg,rgba(255,210,0,.1));
  border:1px solid var(--mm-pill-border,rgba(255,210,0,.3));
  border-radius:50px;padding:8px 24px;
  font-family:var(--font-display);font-size:1.25rem;font-weight:800;
  color:var(--mm-accent,#ffd700);margin-bottom:20px;
  box-shadow:0 0 22px var(--mm-glow,rgba(255,210,0,.12));
  animation:xpInMM .5s .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes xpInMM{from{transform:scale(0)}to{transform:scale(1)}}
.mm-badge-nudge{
  background:rgba(176,64,255,.07);border:1px solid rgba(176,64,255,.22);
  border-radius:14px;padding:12px 15px;margin-bottom:16px;
  font-size:.82rem;color:rgba(220,228,255,.68);line-height:1.55;
  display:flex;align-items:center;gap:10px;text-align:left;
}
.mm-mystery-box{
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.09);
  border-radius:16px;padding:15px 17px;margin-bottom:18px;
  position:relative;overflow:hidden;
}
.mm-mystery-box::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 90% 50%,rgba(176,64,255,.1),transparent);pointer-events:none;}
.mm-mystery-eyebrow{font-size:.67rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:rgba(220,228,255,.35);margin-bottom:8px;}
.mm-mystery-row{display:flex;align-items:center;gap:12px;}
.mm-mystery-icon{
  width:50px;height:50px;border-radius:14px;flex-shrink:0;
  background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;font-size:1.9rem;
  animation:mystpulseMM 2.5s ease-in-out infinite;filter:blur(2px);
}
@keyframes mystpulseMM{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:.85;transform:scale(1.07)}}
.mm-mystery-title{font-weight:700;font-size:.9rem;color:rgba(220,228,255,.75);margin-bottom:3px;}
.mm-mystery-hint{font-size:.78rem;color:var(--muted);line-height:1.4;}

/* ══════════════════════════════════════════
   INTERACTIVE CIRCUIT BUILDER
══════════════════════════════════════════ */
.circuit-lab-wrap{padding:2px 0 6px;}

/* Pip tip banner */
.circ-pip-tip{
  display:flex;align-items:flex-start;gap:10px;
  background:rgba(255,210,0,.07);border:1px solid rgba(255,210,0,.2);
  border-radius:14px;padding:11px 14px;margin-bottom:14px;
  font-size:.87rem;line-height:1.5;color:rgba(255,255,255,.85);
}
.circ-pip-av{font-size:1.4rem;flex-shrink:0;line-height:1;}

/* Main two-column row: board | info */
.circ-main-row{
  display:grid;grid-template-columns:1fr 214px;gap:14px;
  align-items:start;margin-bottom:14px;
}
@media(max-width:640px){.circ-main-row{grid-template-columns:1fr;}}

/* Circuit board SVG container */
.circ-board-col{}
.circ-board-wrap{
  background:rgba(4,4,18,.85);
  border:1px solid rgba(255,210,0,.14);
  border-radius:16px;overflow:hidden;
}

/* SVG elements */
.circ-wire{
  stroke:#252545;stroke-width:2.5;stroke-linecap:round;
  transition:stroke .35s,stroke-width .25s,filter .35s;
}
.circ-junc{r:4.5;fill:#1e1e40;transition:fill .35s;}

/* Component slots */
.circ-slot{cursor:pointer;}
.circ-slot:hover .circ-slot-bg{opacity:.82;}
.circ-slot-bg{
  fill:rgba(8,8,28,.85);stroke:#2e2e52;stroke-width:1.8;
  stroke-dasharray:5 3;transition:all .3s;
}
.circ-slot-tap{
  font-family:'Space Grotesk',sans-serif;font-size:8px;
  fill:#38385a;
}
.circ-slot-lbl{
  font-family:'Space Grotesk',sans-serif;font-size:9px;
  fill:#505075;
}
.circ-slot-placed-lbl{
  font-family:'Space Grotesk',sans-serif;font-size:9px;
  fill:#9090b8;
}

/* Slot pop animation */
@keyframes circ-slot-pop{
  0%  {transform:scale(1);}
  45% {transform:scale(1.07);}
  100%{transform:scale(1);}
}
.circ-slot-pop{
  animation:circ-slot-pop .42s cubic-bezier(.34,1.56,.64,1);
  transform-origin:center;
  transform-box:fill-box;
}

/* Electron flow animation */
@keyframes circ-electron{
  from{stroke-dashoffset:0;}
  to  {stroke-dashoffset:-28;}
}
/* Bulb glow animations */
@keyframes circ-aura-pulse{
  0%,100%{opacity:.22;} 50%{opacity:.42;}
}
@keyframes circ-ray-pulse{
  0%,100%{opacity:1;} 50%{opacity:.45;}
}

/* ── Info panel (right column) ─────────────────────── */
.circ-info-col{min-height:230px;}

.circ-info-empty{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;
  padding:28px 16px;
  background:rgba(255,255,255,.03);
  border:1.5px dashed rgba(255,255,255,.1);
  border-radius:14px;min-height:220px;
}
.cie-icon{font-size:2rem;margin-bottom:8px;}
.cie-title{
  font-family:var(--font-display);font-weight:700;
  font-size:1.05rem;margin-bottom:6px;
}
.cie-sub{font-size:.8rem;opacity:.55;line-height:1.55;}

.circ-info-card{
  display:flex;flex-direction:column;gap:9px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;padding:14px;min-height:220px;
}
.cic-emoji{font-size:2.4rem;text-align:center;line-height:1.1;}
.cic-role-badge{
  font-size:.68rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.07em;padding:3px 10px;border-radius:20px;
  border:1px solid;text-align:center;width:fit-content;
  margin:0 auto;
}
.cic-name{
  font-family:var(--font-display);font-weight:700;
  font-size:1rem;text-align:center;
}
.cic-desc{
  font-size:.82rem;line-height:1.55;
  color:rgba(255,255,255,.85);
}
.cic-analogy{
  font-size:.79rem;line-height:1.5;
  background:rgba(255,255,255,.05);
  border-radius:8px;padding:8px 10px;
  border-left:3px solid rgba(255,255,255,.18);
}
.cic-fact{
  font-size:.79rem;line-height:1.5;
  background:rgba(255,210,0,.07);
  border-radius:8px;padding:8px 10px;
  border-left:3px solid rgba(255,210,0,.32);
  color:rgba(255,255,255,.85);
}
.cic-add-btn{
  width:100%;margin-top:auto;font-weight:700;
  font-size:.9rem;padding:10px;
}

/* ── Component palette ─────────────────────────────── */
.circ-palette-label{
  font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;opacity:.5;margin-bottom:8px;
}
.circ-palette{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  margin-bottom:12px;
}
@media(max-width:440px){.circ-palette{grid-template-columns:repeat(2,1fr);}}

.circ-pal-card{
  position:relative;cursor:pointer;text-align:center;
  background:rgba(255,255,255,.04);
  border:2px solid rgba(255,255,255,.1);
  border-radius:14px;padding:12px 6px 10px;
  transition:all .18s;user-select:none;
}
.circ-pal-card:hover{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.28);
  transform:translateY(-1px);
}
.circ-pal-card.selected{
  border-color:var(--glow-yellow);
  background:rgba(255,210,0,.1);
  box-shadow:0 0 16px rgba(255,210,0,.22);
}
.circ-pal-card.placed{
  border-color:var(--glow-green);
  background:rgba(0,240,122,.07);
}
.circ-pal-card.placed .cpc-sub{color:var(--glow-green);}
.cpc-check{
  display:none;position:absolute;top:5px;right:6px;
  background:var(--glow-green);color:#030e09;
  font-size:.6rem;font-weight:900;border-radius:50%;
  width:16px;height:16px;
  align-items:center;justify-content:center;
}
.cpc-emoji{font-size:1.8rem;margin-bottom:4px;line-height:1.15;}
.cpc-name{
  font-family:var(--font-display);font-weight:700;
  font-size:.78rem;line-height:1.2;
}
.cpc-sub{font-size:.66rem;opacity:.55;margin-top:2px;}

/* ── Status bar ────────────────────────────────────── */
.circ-status-bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:9px 14px;
}
.csb-label{font-size:.83rem;flex:1;transition:color .3s;}
.csb-dots{display:flex;gap:7px;flex-shrink:0;}
.csb-dot{
  width:11px;height:11px;border-radius:50%;
  background:#252545;border:2px solid #353565;
  transition:all .4s;
}
.csb-dot.lit{
  background:var(--glow-yellow);border-color:var(--glow-yellow);
  box-shadow:0 0 8px var(--glow-yellow);
}
.circ-reset-btn{margin-top:10px;}

/* Explorer tier tweaks */
body[data-tier="explorer"] .cic-desc,
body[data-tier="explorer"] .cic-analogy,
body[data-tier="explorer"] .cic-fact{font-size:.89rem;line-height:1.6;}
body[data-tier="explorer"] .circ-pal-card{padding:14px 6px 12px;}
body[data-tier="explorer"] .cpc-emoji{font-size:2.1rem;}
body[data-tier="explorer"] .cpc-name{font-size:.86rem;}
body[data-tier="explorer"] .circ-pip-tip{font-size:.95rem;}

/* ══════════════════════════════════════════
   CONDUCTOR LAB — drag/click to test
══════════════════════════════════════════ */
.cond-lab-wrap{padding:2px 0 6px;}

.cond-pip-tip{
  display:flex;align-items:flex-start;gap:10px;
  background:rgba(0,232,255,.06);border:1px solid rgba(0,232,255,.2);
  border-radius:14px;padding:11px 14px;margin-bottom:12px;
  font-size:.87rem;line-height:1.5;color:rgba(255,255,255,.85);
}
.cond-pip-av{font-size:1.4rem;flex-shrink:0;line-height:1;}

/* Circuit SVG container */
.cond-circuit-wrap{
  background:rgba(4,4,18,.85);
  border:1px solid rgba(0,232,255,.12);
  border-radius:16px;overflow:hidden;
  margin-bottom:10px;position:relative;
}

/* SVG wire & junction defaults */
.cond-wire{stroke:#2a2a50;stroke-width:3;stroke-linecap:round;transition:stroke .35s,stroke-width .25s,filter .35s;}
.cond-junc{r:4.5;fill:#1e1e40;transition:fill .35s;}
.cond-comp-bg{stroke-width:2;transition:all .3s;}
.cond-comp-lbl{font-family:'Space Grotesk',sans-serif;font-size:9px;fill:#9090b8;}

/* Gap zone hover */
#cond-gap-zone:hover #cond-gap-rect{fill:rgba(0,232,255,.12);filter:drop-shadow(0 0 6px rgba(0,232,255,.5));}

/* Gap animations */
@keyframes cond-gap-pulse{
  0%,100%{filter:drop-shadow(0 0 4px rgba(255,223,0,.5));}
  50%    {filter:drop-shadow(0 0 12px rgba(255,223,0,.95));}
}
@keyframes cond-spark-flash{
  0%,100%{opacity:0;} 30%,70%{opacity:1;} 50%{opacity:.5;}
}
@keyframes cond-gap-shake{
  0%,100%{transform:translateX(0);}
  25%    {transform:translateX(-5px);}
  75%    {transform:translateX(5px);}
}

/* Score row */
.cond-score-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.csr-badge{font-size:.76rem;font-weight:600;padding:4px 10px;border-radius:20px;}
.csr-cond{background:rgba(0,240,122,.14);color:var(--glow-green);border:1px solid rgba(0,240,122,.3);}
.csr-ins {background:rgba(255,32,112,.10);color:var(--glow-pink); border:1px solid rgba(255,32,112,.25);}
.csr-rem {background:rgba(0,232,255,.10); color:var(--glow-cyan); border:1px solid rgba(0,232,255,.25);}
.csr-done{background:rgba(255,223,0,.12); color:var(--glow-yellow);border:1px solid rgba(255,223,0,.3);}

/* Tray label */
.cond-tray-label{
  font-family:var(--font-display);font-weight:700;
  font-size:.9rem;margin-bottom:8px;color:rgba(255,255,255,.8);
}

/* Item cards tray */
.cond-tray{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}

.cond-item-card{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:10px 10px 8px;
  background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.1);
  border-radius:12px;cursor:pointer;
  transition:all .2s;min-width:74px;
  position:relative;user-select:none;
}
.cond-item-card:hover:not(.tested):not(.in-test){
  background:rgba(0,232,255,.1);border-color:rgba(0,232,255,.4);
  transform:translateY(-2px);
}
.cond-item-card.selected{
  border-color:#ffdf00;background:rgba(255,223,0,.12);
  box-shadow:0 0 0 2px rgba(255,223,0,.35);
  transform:translateY(-3px);
}
.cond-item-card.in-test{opacity:.55;cursor:default;transform:none;}
.cond-item-card.tested{cursor:default;opacity:.72;}
.cond-item-card.conductor{border-color:rgba(0,240,122,.5);background:rgba(0,240,122,.08);}
.cond-item-card.insulator{border-color:rgba(255,32,112,.4);background:rgba(255,32,112,.06);}

.cic-icon{font-size:1.7rem;line-height:1;}
.cic-name{font-size:.72rem;font-weight:600;text-align:center;color:rgba(255,255,255,.8);}
.cic-badge{
  position:absolute;top:-7px;right:-7px;
  font-size:.78rem;width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);opacity:0;transition:opacity .3s;
}
.cic-badge:not(:empty){opacity:1;}
.cic-badge-cond{background:rgba(0,240,122,.3);}
.cic-badge-ins {background:rgba(255,32,112,.3);}

/* Result panel */
.cond-result-panel{
  border-radius:14px;padding:14px 16px;margin-bottom:10px;
  animation:condResultIn .3s ease-out;
}
@keyframes condResultIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.cond-result-yes{background:rgba(0,240,122,.10);border:1px solid rgba(0,240,122,.35);}
.cond-result-no {background:rgba(255,32,112,.08);border:1px solid rgba(255,32,112,.30);}
.cond-result-final{background:rgba(255,223,0,.10);border:1px solid rgba(255,223,0,.35);}

.crp-header{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.crp-verdict{font-family:var(--font-display);font-weight:800;font-size:1.1rem;}
.cond-result-yes .crp-verdict{color:var(--glow-green);}
.cond-result-no  .crp-verdict{color:var(--glow-pink);}
.crp-icon{font-size:1rem;color:rgba(255,255,255,.75);}
.crp-why{font-size:.88rem;line-height:1.55;color:rgba(255,255,255,.9);margin-bottom:7px;}
.crp-fact{font-size:.8rem;color:rgba(220,228,255,.65);margin-bottom:10px;line-height:1.5;}
.crp-next-btn{margin-top:2px;}

.crp-final-title{font-family:var(--font-display);font-size:1.3rem;font-weight:800;margin-bottom:8px;color:var(--glow-yellow);}
.crp-final-summary{font-size:.88rem;line-height:1.7;color:rgba(255,255,255,.85);margin-bottom:14px;}

/* Explorer tier tweaks */
body[data-tier="explorer"] .cond-pip-tip{font-size:.95rem;}
body[data-tier="explorer"] .cond-item-card{min-width:82px;padding:12px 10px 10px;}
body[data-tier="explorer"] .cic-icon{font-size:2rem;}
body[data-tier="explorer"] .cic-name{font-size:.78rem;}
body[data-tier="explorer"] .crp-why{font-size:.92rem;}
body[data-tier="explorer"] .crp-verdict{font-size:1.15rem;}

/* Mobile */
@media(max-width:440px){
  .cond-tray{justify-content:center;}
  .cond-item-card{min-width:66px;padding:8px 8px 6px;}
  .cic-icon{font-size:1.5rem;}
  .cic-name{font-size:.67rem;}
}

/* ══════════════════════════════════════════
   FLOATING PIP CHARACTER
══════════════════════════════════════════ */
#pip-float{
  position:fixed;bottom:28px;right:28px;z-index:490;
  display:none; /* shown via JS after onboarding */
  flex-direction:column;align-items:flex-end;gap:10px;
  pointer-events:none;
}
#pip-float.pip-float-active{display:flex;}

/* Character button */
.pip-fc{
  position:relative;display:flex;flex-direction:column;align-items:center;
  background:none;border:none;cursor:pointer;pointer-events:all;padding:0;
  animation:pipFloatBob 2.8s ease-in-out infinite;
  transition:filter .2s;
}
.pip-fc:hover{filter:brightness(1.15);animation-play-state:paused;}
@keyframes pipFloatBob{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}

/* Sparkle top-right */
.pip-fc-sparkle{
  font-size:.9rem;position:absolute;top:-2px;right:-6px;
  animation:pfcSparkle 2.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes pfcSparkle{
  0%,40%,100%{opacity:0;transform:translate(0,0) scale(.5);}
  70%{opacity:1;transform:translate(5px,-6px) scale(1.1);}
}

/* Head */
.pip-fc-head{
  width:68px;height:68px;border-radius:50%;
  background:conic-gradient(from 180deg,#00e8ff,#b040ff,#ff2070,#00e8ff);
  display:flex;align-items:center;justify-content:center;
  font-size:2.1rem;position:relative;z-index:1;
  animation:pfcHeadGlow 3s ease-in-out infinite;
}
@keyframes pfcHeadGlow{
  0%,100%{box-shadow:0 0 0 3px rgba(0,232,255,.2),0 0 22px rgba(0,232,255,.4);}
  50%{box-shadow:0 0 0 4px rgba(0,232,255,.4),0 0 40px rgba(0,232,255,.65),0 0 70px rgba(176,64,255,.3);}
}

/* Body / lab coat */
.pip-fc-body{
  width:48px;height:28px;margin:-4px auto 0;
  background:linear-gradient(180deg,rgba(220,228,255,.17) 0%,rgba(220,228,255,.05) 100%);
  border:1.5px solid rgba(220,228,255,.18);border-top:none;
  border-radius:0 0 24px 24px;position:relative;
}
.pip-fc-body::after{
  content:'';position:absolute;top:5px;left:50%;transform:translateX(-50%);
  width:1.5px;height:15px;
  background:linear-gradient(180deg,rgba(0,232,255,.55) 0%,transparent 100%);
  border-radius:1px;
}

/* Ground glow shadow */
.pip-fc-shadow{
  width:42px;height:8px;margin:2px auto 0;
  background:radial-gradient(ellipse 100% 100% at 50% 50%,rgba(0,232,255,.28) 0%,transparent 100%);
  border-radius:50%;
  animation:pfcShadowPulse 2.8s ease-in-out infinite;
}
@keyframes pfcShadowPulse{
  0%,100%{opacity:.5;transform:scaleX(1);}
  50%{opacity:1;transform:scaleX(.7);}
}

.pip-fc-label{
  font-family:var(--font-display);font-size:.68rem;font-weight:800;
  color:var(--glow-cyan);letter-spacing:.5px;
  text-shadow:0 0 12px rgba(0,232,255,.6);margin-top:4px;
}

/* Explorer tier tinting */
body[data-tier="explorer"] .pip-fc-head{
  background:conic-gradient(from 180deg,#00f07a,#ffdf00,#ff7020,#00f07a);
  animation:pfcHeadGlowGreen 3s ease-in-out infinite;
}
@keyframes pfcHeadGlowGreen{
  0%,100%{box-shadow:0 0 0 3px rgba(0,240,122,.2),0 0 22px rgba(0,240,122,.4);}
  50%{box-shadow:0 0 0 4px rgba(0,240,122,.4),0 0 40px rgba(0,240,122,.65),0 0 70px rgba(255,223,0,.2);}
}
body[data-tier="explorer"] .pip-fc-label{
  color:var(--glow-green);text-shadow:0 0 12px rgba(0,240,122,.6);
}
/* Mobile */
@media(max-width:480px){
  #pip-float{bottom:14px;right:14px;}
  .pip-fc-head{width:54px;height:54px;font-size:1.7rem;}
  .pip-fc-body{width:38px;height:22px;}
  .pip-fc-shadow{width:32px;}
  #pip-float-bubble{width:198px;}
  #pip-float-msg{font-size:.78rem;}
}

/* ═══════════════════════════════════════════════════════════════
   Prof. Pip's Welcome Tour — drop-in styles
   Append to the bottom of science-ui.css
   (Uses --glow-cyan, --glow-yellow, --glow-pink, --glow-green,
    --glow-purple, --text, --muted, --ink, --font-display,
    --font-body, --card-stroke — all already defined in :root.)
═══════════════════════════════════════════════════════════════ */

#tour-root{position:fixed;inset:0;z-index:1000;pointer-events:none}
#tour-root.active{pointer-events:auto}

#tour-veil{display:none}

#tour-spotlight{
  position:fixed;border-radius:14px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(3,3,12,.85), 0 0 0 3px var(--glow-cyan), 0 0 40px var(--glow-cyan);
  background:rgba(255,255,255,.04);
  transition:all .55s cubic-bezier(.22,1,.36,1);
  opacity:0;
}
#tour-root.active #tour-spotlight{opacity:1}
#tour-spotlight.no-target{
  width:0;height:0;top:50%;left:50%;
  box-shadow:0 0 0 9999px rgba(3,3,12,.85);
  background:none;
  border:none;
}

#tour-pip-wrap{
  position:fixed;z-index:1001;
  transition:opacity .35s ease, left .55s cubic-bezier(.22,1,.36,1), top .55s cubic-bezier(.22,1,.36,1);
  display:flex;align-items:flex-start;gap:14px;
  max-width:420px;
  pointer-events:none;
  opacity:0;
}
#tour-root.active #tour-pip-wrap{
  pointer-events:auto;
  opacity:1;
}
#tour-pip-character{
  width:80px;height:80px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--glow-cyan),var(--glow-purple));
  box-shadow:0 0 30px rgba(0,232,255,.6),0 0 0 3px rgba(255,255,255,.15) inset;
  display:flex;align-items:center;justify-content:center;font-size:2.6rem;
  animation:tour-pip-bounce 1.8s ease-in-out infinite;
  position:relative;
}
@keyframes tour-pip-bounce{
  0%,100%{transform:translateY(0) rotate(-3deg)}
  50%{transform:translateY(-8px) rotate(3deg)}
}
#tour-pip-character::after{
  content:"✨";position:absolute;top:-6px;right:-6px;font-size:1.1rem;
  animation:tour-sparkle 1.5s ease-in-out infinite;
}
@keyframes tour-sparkle{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.6}}

#tour-bubble{
  flex:1;background:linear-gradient(180deg,#0f1030,#0a0a20);
  border:2px solid var(--glow-cyan);border-radius:22px;
  padding:18px 20px 14px;
  box-shadow:0 0 30px rgba(0,232,255,.35),0 12px 40px rgba(0,0,0,.5);
  position:relative;
  font-family:var(--font-body);
}
#tour-bubble::before{
  content:"";position:absolute;left:-10px;top:30px;
  width:18px;height:18px;background:#0f1030;
  border-left:2px solid var(--glow-cyan);border-bottom:2px solid var(--glow-cyan);
  transform:rotate(45deg);
}
.tb-stepnum{
  font-family:var(--font-display);font-weight:700;font-size:.7rem;
  color:var(--glow-yellow);letter-spacing:1px;text-transform:uppercase;
  margin-bottom:4px;
}
.tb-title{
  font-family:var(--font-display);font-weight:800;font-size:1.25rem;
  color:var(--text);line-height:1.15;margin-bottom:8px;
  text-wrap:pretty;
}
.tb-body{
  font-size:.92rem;line-height:1.5;color:#c8d0ff;font-weight:500;
  text-wrap:pretty;
}
.tb-body strong{color:var(--glow-yellow);font-weight:700}
.tb-body em{color:var(--glow-pink);font-style:normal;font-weight:600}

.tb-controls{
  display:flex;align-items:center;gap:8px;
  margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);
}
.tb-dots{display:flex;gap:5px;flex:1;flex-wrap:wrap}
.tb-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.15);transition:all .3s}
.tb-dot.done{background:var(--glow-green)}
.tb-dot.active{background:var(--glow-cyan);box-shadow:0 0 8px var(--glow-cyan);transform:scale(1.4)}
.tb-btn{
  font-family:var(--font-display);font-weight:700;font-size:.82rem;
  padding:8px 14px;border-radius:99px;border:none;cursor:pointer;
  transition:all .2s;letter-spacing:.3px;
}
.tb-btn.skip{background:transparent;color:var(--muted);padding:8px 6px}
.tb-btn.skip:hover{color:var(--text)}
.tb-btn.back{background:rgba(255,255,255,.06);color:var(--text);border:1px solid var(--card-stroke)}
.tb-btn.back:hover{background:rgba(255,255,255,.1)}
.tb-btn.next{
  background:linear-gradient(135deg,var(--glow-cyan),var(--glow-pink));
  color:#08081a;box-shadow:0 4px 14px rgba(0,232,255,.4);
}
.tb-btn.next:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,232,255,.55)}
.tb-btn.next.finish{background:linear-gradient(135deg,var(--glow-yellow),var(--glow-pink))}

.tour-arrow{
  position:fixed;z-index:1002;font-size:2.2rem;pointer-events:none;
  filter:drop-shadow(0 0 8px var(--glow-yellow));
  animation:tour-arrow-pulse 1s ease-in-out infinite;
  transition:all .55s cubic-bezier(.22,1,.36,1);
  opacity:0;
}
@keyframes tour-arrow-pulse{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-6px)}}
#tour-root.active .tour-arrow.show{opacity:1}

.confetti{position:fixed;width:10px;height:10px;top:-20px;z-index:1003;pointer-events:none;animation:tour-confetti-fall linear forwards}
@keyframes tour-confetti-fall{
  to{transform:translateY(110vh) rotate(720deg);opacity:0}
}

#replay-btn{
  position:fixed;left:24px;bottom:24px;z-index:40;
  font-family:var(--font-display);font-weight:700;font-size:.78rem;
  padding:10px 14px;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.04);color:var(--glow-cyan);
  border:1px solid rgba(0,232,255,.35);
  backdrop-filter:blur(8px);
  transition:all .2s;
}
#replay-btn:hover{background:rgba(0,232,255,.1);transform:translateY(-2px)}

@media (max-width:720px){
  #tour-pip-wrap{max-width:calc(100vw - 32px)}
  #tour-pip-character{width:60px;height:60px;font-size:2rem}
}
@media (max-width:640px){
  #tour-pip-character{width:52px;height:52px;font-size:1.7rem}
  #tour-bubble{padding:12px 14px 10px}
  .tb-title{font-size:1rem}
  .tb-body{font-size:.82rem;line-height:1.4}
  .tb-controls{margin-top:8px;padding-top:8px;gap:6px}
  .tb-btn{font-size:.78rem;padding:7px 11px}
  .tb-btn.skip{padding:7px 4px}
}

/* ═══════════════════════════════════════════════════════════════
   AUTH SCREEN — parent sign up / sign in
═══════════════════════════════════════════════════════════════ */
#auth-screen{
  position:fixed;inset:0;z-index:810;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--bg);
  padding:32px 16px 100px;
  box-sizing:border-box;
}
.auth-card{
  background:#0d0d22;
  border:1px solid rgba(255,255,255,.12);
  border-radius:28px;
  padding:36px 28px 48px;
  max-width:460px;
  width:100%;
  margin:0 auto;
  text-align:center;
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,
             0 0 60px rgba(0,232,255,.08),
             0 24px 80px rgba(0,0,0,.6);
  box-sizing:border-box;
}
.auth-pip{
  width:72px;height:72px;border-radius:50%;margin:0 auto 18px;
  background:conic-gradient(from 180deg,#00e8ff,#b040ff,#ff2070,#00e8ff);
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;
  box-shadow:0 0 0 3px rgba(0,232,255,.2),0 0 40px rgba(0,232,255,.35);
  animation:pipPulse 2.5s ease-in-out infinite;
}
.auth-logo{
  font-family:var(--font-display);font-size:1.7rem;font-weight:800;
  line-height:1.1;margin-bottom:8px;
  background:linear-gradient(90deg,#00e8ff,#b040ff,#ff2070);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-size:200% auto;animation:shimmer 4s linear infinite;
}
.auth-ai-sub{
  font-family:var(--font-body);font-size:.8rem;font-weight:600;
  color:rgba(220,228,255,.5);letter-spacing:.04em;margin-bottom:10px;
}
.auth-parent-badge{
  display:inline-block;margin:0 auto 14px;
  padding:3px 14px;border-radius:999px;
  background:rgba(0,232,255,.12);border:1px solid rgba(0,232,255,.35);
  font-family:var(--font-body);font-size:.72rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--glow-cyan);
}
.auth-tagline{
  font-size:.85rem;color:var(--muted);font-weight:500;
  line-height:1.6;margin-bottom:24px;
}
.auth-tab-row{
  display:flex;gap:6px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:4px;
  margin-bottom:22px;
}
.auth-tab{
  flex:1;padding:10px 8px;border:none;border-radius:10px;
  background:transparent;color:var(--muted);
  font-family:var(--font-body);font-size:.85rem;font-weight:700;
  cursor:pointer;transition:all .2s;
}
.auth-tab.active{
  background:rgba(0,232,255,.15);color:var(--glow-cyan);
  box-shadow:0 0 0 1px rgba(0,232,255,.25);
}
.auth-input{
  display:block;width:100%;box-sizing:border-box;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:13px 16px;
  color:var(--text);font-family:var(--font-body);font-size:.95rem;
  margin-bottom:10px;
  transition:border-color .2s,box-shadow .2s;
}
.auth-input:focus{
  outline:none;
  border-color:rgba(0,232,255,.45);
  box-shadow:0 0 0 3px rgba(0,232,255,.1);
}
.auth-input::placeholder{color:rgba(220,228,255,.3);}
#auth-confirm-wrap{display:block;}
.auth-error{
  min-height:1.4em;
  font-size:.82rem;font-weight:600;
  color:var(--glow-pink);
  margin-bottom:10px;
  line-height:1.4;
}
.auth-btn{
  display:block;width:100%;
  background:linear-gradient(135deg,#00e8ff,#b040ff);
  border:none;border-radius:14px;
  padding:15px 24px;
  color:#fff;font-family:var(--font-display);font-size:1.05rem;font-weight:700;
  cursor:pointer;
  box-shadow:0 8px 28px rgba(0,232,255,.3);
  transition:transform .15s,box-shadow .15s,opacity .15s;
  margin-bottom:18px;
}
.auth-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 36px rgba(0,232,255,.4);}
.auth-btn:active:not(:disabled){transform:scale(.97);}
.auth-btn:disabled{opacity:.55;cursor:not-allowed;}
.auth-forgot{text-align:center;margin-top:10px;}
.auth-reset-link{
  font-size:.8rem;color:var(--glow-cyan);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.auth-reset-link:hover{opacity:.75;}
.auth-footer{
  font-size:.72rem;color:rgba(220,228,255,.3);
  line-height:1.6;
}

/* ═══════════════════════════════════════════════════════════════
   CHILD PICKER
═══════════════════════════════════════════════════════════════ */
#child-picker{
  position:fixed;inset:0;z-index:810;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--bg);
  padding:32px 16px 100px;
  box-sizing:border-box;
}
.cp-shell{
  background:#0d0d22;
  border:1px solid rgba(255,255,255,.12);
  border-radius:28px;
  padding:36px 28px 48px;
  max-width:520px;
  width:100%;
  margin:0 auto;
  text-align:center;
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,
             0 0 60px rgba(176,64,255,.08),
             0 24px 80px rgba(0,0,0,.6);
  box-sizing:border-box;
}
.cp-pip{
  width:72px;height:72px;border-radius:50%;margin:0 auto 18px;
  background:conic-gradient(from 180deg,#b040ff,#ff2070,#00e8ff,#b040ff);
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;
  box-shadow:0 0 0 3px rgba(176,64,255,.2),0 0 40px rgba(176,64,255,.35);
  animation:pipPulse 2.5s ease-in-out infinite;
}
.cp-title{
  font-family:var(--font-display);font-size:1.7rem;font-weight:800;
  background:linear-gradient(90deg,#b040ff,#00e8ff);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  margin-bottom:6px;
}
.cp-sub{font-size:.85rem;color:var(--muted);font-weight:500;margin-bottom:28px;}
.cp-profiles{
  display:flex;flex-wrap:wrap;gap:14px;
  justify-content:center;
  margin-bottom:20px;
}
.cp-card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  width:140px;
  transition:border-color .15s,box-shadow .15s;
  text-align:center;
  color:var(--text);font-family:var(--font-body);
  display:flex;flex-direction:column;
  overflow:hidden;
}
.cp-card:hover{
  border-color:rgba(176,64,255,.5);
  box-shadow:0 8px 28px rgba(176,64,255,.18);
}
.cp-card-main{
  padding:18px 16px 12px;
  cursor:pointer;
  transition:background .15s;
  flex:1;
}
.cp-card-main:hover{background:rgba(255,255,255,.04);}
.cp-avatar-wrap{position:relative;display:inline-block;margin-bottom:8px;}
.cp-avatar{font-size:2.2rem;}
.cp-pin-badge{position:absolute;top:-4px;right:-6px;font-size:.65rem;line-height:1;}
.cp-name{font-family:var(--font-display);font-size:.95rem;font-weight:800;margin-bottom:4px;}
.cp-tier{font-size:.72rem;color:var(--muted);font-weight:600;margin-bottom:4px;}
.cp-xp{font-size:.8rem;font-weight:700;color:var(--glow-yellow);}
.cp-card-actions{
  display:flex;border-top:1px solid rgba(255,255,255,.07);
}
.cp-edit-btn,.cp-del-btn{
  flex:1;padding:8px 4px;
  background:transparent;border:none;
  font-size:.75rem;font-weight:700;font-family:var(--font-body);
  cursor:pointer;
  transition:background .15s,color .15s;
  color:var(--muted);
}
.cp-edit-btn:hover{background:rgba(0,232,255,.1);color:var(--glow-cyan);}
.cp-pin-btn{
  flex:0 0 36px;padding:8px 4px;
  background:transparent;border:none;border-left:1px solid rgba(255,255,255,.07);
  font-size:.85rem;color:var(--muted);cursor:pointer;
  transition:background .15s,color .15s;
}
.cp-pin-btn:hover{background:rgba(176,64,255,.12);color:var(--glow-purple);}
.cp-del-btn{border-left:1px solid rgba(255,255,255,.07);flex:0 0 36px;font-size:.85rem;}
.cp-del-btn:hover{background:rgba(255,32,112,.12);color:var(--glow-pink);}
.cp-pin-overlay{
  padding:16px 14px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  min-height:160px;justify-content:center;
}
.cp-pin-title{
  font-family:var(--font-display);font-size:.88rem;font-weight:800;
  color:var(--text);text-align:center;line-height:1.4;
}
.cp-pin-input{
  width:100%;box-sizing:border-box;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.2);
  border-radius:10px;padding:8px 12px;
  font-family:var(--font-body);font-size:1.2rem;font-weight:700;
  color:var(--text);text-align:center;letter-spacing:6px;
  outline:none;transition:border-color .15s;-webkit-appearance:none;
}
.cp-pin-input:focus{border-color:var(--glow-purple);}
.cp-pin-input::placeholder{letter-spacing:normal;font-size:.82rem;}
.cp-pin-error{font-size:.7rem;color:var(--glow-pink);font-weight:600;min-height:14px;text-align:center;}
.cp-pin-actions{display:flex;flex-direction:column;gap:6px;width:100%;}
.cp-pin-submit{
  background:var(--glow-purple);border:none;border-radius:10px;
  padding:7px 12px;font-family:var(--font-body);font-size:.78rem;font-weight:700;
  color:#fff;cursor:pointer;width:100%;transition:opacity .15s;
}
.cp-pin-submit:hover{opacity:.85;}
.cp-pin-remove{
  background:rgba(255,32,112,.12);border:1px solid rgba(255,32,112,.3);
  border-radius:10px;padding:6px 12px;font-family:var(--font-body);
  font-size:.72rem;font-weight:700;color:var(--glow-pink);
  cursor:pointer;width:100%;transition:background .15s;
}
.cp-pin-remove:hover{background:rgba(255,32,112,.25);}
.cp-pin-cancel{
  background:transparent;border:1px solid rgba(255,255,255,.12);
  border-radius:10px;padding:6px 12px;font-family:var(--font-body);
  font-size:.72rem;font-weight:600;color:var(--muted);
  cursor:pointer;width:100%;transition:background .15s;
}
.cp-pin-cancel:hover{background:rgba(255,255,255,.06);}
@keyframes pin-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.shake{animation:pin-shake .4s ease;}
.cp-del-confirm{
  display:none;
  align-items:center;justify-content:space-between;
  gap:6px;padding:8px 10px;
  border-top:1px solid rgba(255,32,112,.2);
  background:rgba(255,32,112,.06);
  font-size:.72rem;font-weight:700;color:var(--text);
  flex-wrap:wrap;
}
.cp-del-yes{
  background:var(--glow-pink);border:none;border-radius:8px;
  padding:5px 10px;font-size:.72rem;font-weight:800;
  color:#fff;cursor:pointer;
  transition:opacity .15s;
}
.cp-del-yes:hover{opacity:.85;}
.cp-del-no{
  background:rgba(255,255,255,.08);border:none;border-radius:8px;
  padding:5px 10px;font-size:.72rem;font-weight:700;
  color:var(--muted);cursor:pointer;
  transition:background .15s;
}
.cp-del-no:hover{background:rgba(255,255,255,.14);}
.cp-loading{
  color:var(--muted);font-size:.85rem;font-weight:600;
  padding:20px 0;
  width:100%;
}
.cp-empty{
  color:var(--muted);font-size:.88rem;font-weight:600;
  padding:16px 0 8px;
  line-height:1.6;
}
.cp-add-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(0,232,255,.1);
  border:1px solid rgba(0,232,255,.25);
  border-radius:14px;padding:13px 28px;
  color:var(--glow-cyan);font-family:var(--font-display);font-size:1rem;font-weight:700;
  cursor:pointer;
  transition:transform .15s,background .15s,box-shadow .15s;
  margin-bottom:16px;
}
.cp-add-btn:hover{
  background:rgba(0,232,255,.17);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,232,255,.15);
}
.cp-signout{
  display:block;
  background:transparent;border:none;
  color:rgba(220,228,255,.35);
  font-family:var(--font-body);font-size:.78rem;font-weight:600;
  cursor:pointer;
  transition:color .15s;
  margin:0 auto;
  padding:4px 8px;
}
.cp-signout:hover{color:rgba(220,228,255,.6);}

/* Email verification banner inside child picker */
.cp-verify-banner{
  text-align:center;padding:36px 28px 28px;
  border:1.5px solid rgba(0,232,255,.28);border-radius:24px;
  background:linear-gradient(160deg,rgba(0,232,255,.07) 0%,rgba(176,64,255,.05) 100%);
  box-shadow:0 0 40px rgba(0,232,255,.08),inset 0 1px 0 rgba(255,255,255,.06);
  max-width:400px;margin:0 auto;
}
.cp-verify-pip{
  font-size:2.6rem;line-height:1;margin-bottom:4px;
  filter:drop-shadow(0 0 12px rgba(0,232,255,.5));
}
.cp-verify-icon{font-size:2.4rem;margin-bottom:14px;line-height:1;}
.cp-verify-title{
  font-family:var(--font-display);font-weight:800;font-size:1.35rem;
  color:var(--glow-cyan);margin-bottom:14px;
  text-shadow:0 0 18px rgba(0,232,255,.45);
}
.cp-verify-body{
  font-family:var(--font-body);font-size:.88rem;line-height:1.65;
  color:rgba(220,228,255,.82);margin-bottom:22px;
}
.cp-verify-body strong{
  color:#fff;font-weight:700;
  text-shadow:0 0 8px rgba(0,232,255,.35);
}
.cp-verify-spam{
  display:block;margin-top:10px;
  color:rgba(220,228,255,.45);font-size:.78rem;
}
.cp-verify-btn{
  display:block;width:100%;
  font-family:var(--font-display);font-weight:700;font-size:.9rem;
  padding:12px 20px;border-radius:99px;
  border:1.5px solid rgba(0,232,255,.45);
  background:linear-gradient(135deg,rgba(0,232,255,.15),rgba(0,232,255,.06));
  color:var(--glow-cyan);cursor:pointer;
  box-shadow:0 0 16px rgba(0,232,255,.12);
  transition:all .2s;margin-bottom:10px;
}
.cp-verify-btn:hover{background:rgba(0,232,255,.25);box-shadow:0 0 24px rgba(0,232,255,.22);}
.cp-verify-back{
  display:block;width:100%;
  font-family:var(--font-body);font-weight:600;font-size:.82rem;
  padding:10px 20px;border-radius:99px;
  border:1px solid rgba(220,228,255,.12);
  background:rgba(220,228,255,.05);
  color:rgba(220,228,255,.55);cursor:pointer;
  transition:all .2s;
}
.cp-verify-back:hover{color:rgba(220,228,255,.85);background:rgba(220,228,255,.1);}

/* Back button injected into onboarding gate during edit mode */
.ob-edit-back-btn{
  display:block;
  background:transparent;border:none;
  color:var(--muted);
  font-family:var(--font-body);font-size:.8rem;font-weight:700;
  cursor:pointer;
  padding:0 0 18px;
  text-align:left;
  width:100%;
  transition:color .15s;
}
.ob-edit-back-btn:hover{color:var(--glow-cyan);}

@media(max-width:480px){
  .auth-card,.cp-shell{padding:28px 18px 40px;border-radius:20px;}
  .auth-logo,.cp-title{font-size:1.45rem;}
  .cp-card{width:calc(50% - 7px);}
  .cp-del-confirm{font-size:.68rem;}
}
}