/* ══ RESET & BASE ══ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --coral:   #FF6B6B;
  --orange:  #FF9F43;
  --yellow:  #FECA57;
  --lime:    #48DBFB;
  --teal:    #00D2D3;
  --blue:    #54A0FF;
  --purple:  #A29BFE;
  --pink:    #FD79A8;
  --green:   #55EFC4;

  --bg-dark:  #0F0A2E;
  --bg-mid:   #1A1045;
  --bg-card:  rgba(255,255,255,0.06);
  --glass:    rgba(255,255,255,0.07);
  --border:   rgba(255,255,255,0.12);

  --ff-head: 'Fredoka', cursive;
  --ff-body: 'Nunito', sans-serif;
  --ff-mono: 'Space Mono', monospace;

  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 12px;
  --nav-height: 72px;
  --section-gutter: clamp(12px, 2vw, 24px);
  --surface-strong: rgba(9, 7, 24, 0.96);
  --surface-mid: rgba(14, 10, 34, 0.88);
  --surface-soft: rgba(12, 9, 29, 0.82);

  --shadow-card: 0 8px 32px rgba(0,0,0,0.3);

  /* Workspace Layout Variables */
  --game-main-width: 1fr;
  --game-sidebar-width: 280px;
  --game-gap: 16px;
  --game-radius: 28px;
}

html,body{
  width:100%;height:100%;
  overflow:hidden;
  background:var(--bg-dark);
  font-family:var(--ff-body);
  color:#fff;
}
canvas{display:block}

/* ══ LOADER ══ */
#loader{
  position:fixed;inset:0;z-index:9999;
  background:var(--bg-dark);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
  transition:opacity .6s ease, visibility .6s;
}
#loader.hidden{opacity:0;visibility:hidden;pointer-events:none}
.loader-proton{
  width:90px;height:90px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #FF9F43, #FF6B6B, #C0392B);
  box-shadow:0 0 60px rgba(255,107,107,0.8), 0 0 120px rgba(255,107,107,0.3);
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;font-family:var(--ff-head);font-weight:700;color:#fff;
  animation:loaderPulse 1.2s ease-in-out infinite;
  overflow:hidden;
}
.loader-orbit{
  position:absolute;width:130px;height:130px;border-radius:50%;
  border:2px dashed rgba(255,159,67,0.4);
  animation:loaderOrbit 2s linear infinite;
}
.loader-orbit::before{
  content:'⚡';position:absolute;top:-10px;left:50%;transform:translateX(-50%);font-size:16px;
}
.loader-wrap{position:relative;width:130px;height:130px;display:flex;align-items:center;justify-content:center}
.loader-bar-track{width:240px;height:8px;background:rgba(255,255,255,0.1);border-radius:99px;overflow:hidden}
.loader-bar-fill{
  height:100%;
  background:linear-gradient(90deg,var(--coral),var(--orange),var(--yellow));
  border-radius:99px;
  animation:loaderBar 2s ease-in-out forwards;
}
.loader-text{
  font-family:var(--ff-head);font-size:1.6rem;font-weight:600;
  background:linear-gradient(135deg,var(--coral),var(--yellow));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:textPulse 1.5s ease-in-out infinite;
}
.loader-sub{font-size:.85rem;color:rgba(255,255,255,0.5);font-weight:600}

@keyframes loaderPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes loaderOrbit{to{transform:rotate(360deg)}}
@keyframes loaderBar{0%{width:0}100%{width:100%}}
@keyframes textPulse{0%,100%{opacity:1}50%{opacity:.6}}

/* ══ NAV ══ */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:400;
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;
  min-height:var(--nav-height);
  padding:14px var(--section-gutter);
  background:transparent;
  border-bottom:1px solid rgba(255,255,255,0.08);
  box-shadow:0 14px 40px rgba(0,0,0,0.42);
  isolation:isolate;
  overflow:hidden;
}
#nav::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, #07040f 0%, #11092d 48%, #080511 100%);
  z-index:-2;
}
#nav::after{
  content:'';
  position:absolute;
  inset:auto 0 0 0;
  height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(72,219,251,.28), rgba(255,255,255,0));
  z-index:-1;
}
.nav-logo{
  font-family:var(--ff-head);font-size:1.4rem;font-weight:700;
  cursor:pointer;display:flex;align-items:center;gap:10px;
  text-decoration:none;
  min-width:0;
}
.nav-logo-icon{
  width:38px;height:38px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #FF9F43, #FF6B6B);
  box-shadow:0 0 20px rgba(255,107,107,0.6);
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;animation:logoPulse 3s ease-in-out infinite;
  flex-shrink:0;
}
.nav-logo-text{
  background:linear-gradient(135deg,var(--coral),var(--yellow));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@keyframes logoPulse{0%,100%{box-shadow:0 0 20px rgba(255,107,107,0.6)}50%{box-shadow:0 0 40px rgba(255,107,107,0.9)}}

#nav > *{position:relative;z-index:1}
#nav-links{display:flex;gap:8px;align-items:center}
#nav-links button{
  background:transparent;border:1.5px solid rgba(255,255,255,0.12);
  color:rgba(255,255,255,0.65);font-family:var(--ff-body);font-size:.85rem;font-weight:800;
  min-height:40px;
  padding:8px 16px;border-radius:99px;cursor:pointer;
  transition:all .25s cubic-bezier(.34,1.56,.64,1);
  display:flex;align-items:center;gap:6px;
}
#nav-links button:hover{
  background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.3);
  color:#fff;transform:translateY(-1px);
}
#nav-links button.active{
  background:linear-gradient(135deg,rgba(72,219,251,0.2),rgba(84,160,255,0.12));
  border-color:var(--blue);color:var(--blue);
  box-shadow:0 0 16px rgba(72,219,251,0.2);
}
.nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;background:none;border:none}
.nav-hamburger span{width:22px;height:2px;background:rgba(255,255,255,0.7);border-radius:2px;transition:all .3s}

/* ══ SECTIONS ══ */
.section{
  position:fixed;
  inset:0;
  display:none;
  overflow:hidden;
  z-index:1;
}
.section.active{display:block}

/* ══ FLOATING PARTICLES BG ══ */
#global-particles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.g-particle{
  position:absolute;border-radius:50%;pointer-events:none;
  animation:gFloat linear infinite;
}
@keyframes gFloat{
  0%{transform:translateY(110vh) rotate(0deg);opacity:0}
  10%{opacity:1}
  90%{opacity:.5}
  100%{transform:translateY(-20vh) rotate(720deg);opacity:0}
}

/* ════════════════════════════════
   LANDING
════════════════════════════════ */
#landing{background:var(--bg-dark)}
#bg-canvas{position:absolute;inset:0;width:100%;height:100%}
#landing-content{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:calc(var(--nav-height) + 36px) 20px 28px;
  overflow-y:auto;
}
.landing-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,159,67,.08);border:1px solid rgba(255,159,67,.25);
  border-radius:99px;padding:6px 18px;font-size:.8rem;font-weight:800;
  color:var(--orange);margin-bottom:20px;animation:fadeSlideIn .6s ease;
}
#landing-content h1{
  font-family:var(--ff-head);font-size:clamp(2.8rem,7vw,5.5rem);
  font-weight:700;line-height:1.1;margin-bottom:16px;
  background:linear-gradient(135deg,#FF9A3C 0%,#FFD700 35%,#FFEDB0 70%,#FFF8E7 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 10px rgba(254,185,60,.2)) drop-shadow(0 0 40px rgba(84,160,255,.06));
  animation:titleGlow 3s ease-in-out infinite, fadeSlideIn .8s ease;
}
.tagline{
  font-size:clamp(1rem,2.2vw,1.3rem);color:rgba(255,255,255,.72);
  margin:0 0 36px;max-width:540px;line-height:1.7;font-weight:600;
  animation:fadeSlideIn 1s ease;
}
#start-btn{
  font-family:var(--ff-head);font-size:1.35rem;font-weight:600;
  padding:18px 54px;border:none;border-radius:99px;
  background:linear-gradient(135deg,#48DBFB,#7C6FF7);
  color:#fff;cursor:pointer;position:relative;overflow:hidden;
  box-shadow:0 0 20px rgba(72,219,251,.22),0 8px 32px rgba(0,0,0,.4);
  animation:pulseCTA 2.5s ease-in-out infinite, fadeSlideIn 1.2s ease;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1);
}
#start-btn::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,transparent 0%,rgba(255,255,255,.15) 50%,transparent 100%);
  transform:translateX(-100%);transition:transform .5s;
}
#start-btn:hover{transform:scale(1.06) translateY(-2px)}
#start-btn:hover::before{transform:translateX(100%)}

.feature-cards{display:flex;gap:16px;margin-top:44px;flex-wrap:wrap;justify-content:center;animation:fadeSlideIn 1.4s ease}
.feat-card{
  background:linear-gradient(160deg,rgba(255,255,255,0.09) 0%,rgba(255,255,255,0.03) 100%);
  border:1px solid rgba(255,255,255,0.06);
  border-top:1px solid rgba(255,255,255,0.15);
  border-radius:var(--radius-xl);padding:24px 28px;width:160px;text-align:center;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.1), 0 8px 32px rgba(0,0,0,0.25);
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
  animation:floatAnim 4s ease-in-out infinite;cursor:pointer;
}
.feat-card:nth-child(2){animation-delay:.6s}
.feat-card:nth-child(3){animation-delay:1.2s}
.feat-card:hover{
  border-color:rgba(72,219,251,.35);
  background:rgba(72,219,251,.07);
  transform:translateY(-8px) scale(1.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12), 0 12px 40px rgba(72,219,251,.12), 0 8px 32px rgba(0,0,0,0.25);
}
.feat-card .icon{font-size:2.4rem;margin-bottom:10px;display:block}
.feat-card p{font-size:.85rem;color:rgba(255,255,255,.7);font-weight:800}

/* Stars bg on landing */
.stars-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.star{position:absolute;border-radius:50%;background:#fff;animation:twinkle ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}

/* ════════════════════════════════
   GAME SECTION
════════════════════════════════ */
#game{
  background:var(--bg-dark);
  padding-top:calc(var(--nav-height) + 12px);
  display:none;
  flex-direction:column;
  height:100dvh;
  overflow:hidden;
}
#game.active{display:flex}

/* Game header */
#game-header{
  display:flex;align-items:center;gap:12px;
  padding:10px 20px;margin:0 var(--section-gutter);
  background:var(--surface-mid);
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  flex-shrink:0;
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}
.level-badge{
  font-family:var(--ff-head);font-size:.85rem;font-weight:600;
  padding:4px 12px;border-radius:99px;
  background:rgba(255,107,107,.15);border:1px solid rgba(255,107,107,.3);
  color:var(--coral);white-space:nowrap;
  transition:all .5s;
  overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
#ph-display{font-family:var(--ff-mono);font-size:1.5rem;font-weight:700;transition:color .5s,text-shadow .5s;line-height:1;margin-left:auto}
#vol-top{
  font-family:var(--ff-mono);
  font-size:.85rem;
  color:var(--lime);
  line-height:1.2;flex-shrink:0;
}



/* View tabs (Workspace Mode Switchers) */
#view-tabs{
  display:flex;
  gap:4px;
  background:rgba(255,255,255,0.04);
  padding:4px;
  border-radius:12px;
  margin:0 auto 12px;
  width:fit-content;
  border:1px solid rgba(255,255,255,0.06);
  backdrop-filter:blur(10px);
}

/* Game body - Workspace Layout */
#game-body{
  display:grid;
  grid-template-columns:var(--game-main-width) var(--game-sidebar-width);
  gap:var(--game-gap);
  flex:1;
  overflow:hidden;
  min-height:0;
  margin:0 var(--section-gutter) 16px;
  border-radius:var(--game-radius);
}

/* Mode area container (houses Lab and Graph) */
#mode-area{
  position:relative;
  grid-column:1;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:1fr;
  border:1px solid rgba(255,255,255,0.06);
  background:rgba(4,3,11,0.28);
  border-radius:var(--game-radius);
  overflow:hidden;
}

/* Strict View Isolation */
.view-pane{
  grid-row:1;
  grid-column:1;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s;
  contain:layout paint;
  background:var(--bg-dark); /* Ensure opaque background */
  width:100%;
  height:100%;
}
.view-pane.active{
  opacity:1;
  visibility:visible;
  pointer-events:all;
}

/* Lab view (Immersive) */
#solution-wrap{
  position:relative;
  overflow:hidden;
  background:radial-gradient(circle at 50% 50%, #1A1045, #0F0A2E);
}
#solution-canvas{width:100%;height:100%}

/* Graph view (Analytical Calm) */
#graph-panel{
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:16px;
  background:#090718; /* Darker, cleaner for Graph Mode */
}
#graph-panel .panel-title{
  color:var(--blue);
  letter-spacing:0.05em;
  font-size:0.9rem;
  text-transform:uppercase;
  opacity:0.8;
}
#ph-chart-wrap{flex:1;position:relative;min-height:0}
#ph-chart-wrap canvas{width:100%!important;height:100%!important}

/* Titration panel (Sidebar) */
#titration-panel{
  grid-column:2;
  padding:20px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  background:var(--surface-mid);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:var(--game-radius);
  overflow-y:auto;
  scrollbar-width:none;
}
#titration-panel::-webkit-scrollbar{display:none}
.panel-title{
  font-family:var(--ff-head);font-size:1rem;font-weight:600;
  color:rgba(255,255,255,.6);text-align:center;
}
#burette-wrap{position:relative;width:44px;height:150px;margin:0 auto}
#burette{
  width:44px;height:150px;
  border:2px solid rgba(255,255,255,.2);border-radius:4px 4px 18px 18px;
  overflow:hidden;background:rgba(255,255,255,.03);position:relative;
}
#burette-liquid{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(180deg,rgba(84,160,255,.6),rgba(0,210,211,.8));
  transition:height .4s ease;height:100%;
}
#burette-tip{width:4px;height:18px;background:rgba(255,255,255,.25);margin:0 auto;border-radius:0 0 4px 4px}
#drip{width:8px;height:12px;background:#54A0FF;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;margin:0 auto;opacity:0}
#drip.dripping{animation:drip .6s ease-in infinite}
#beaker-wrap{width:100%;position:relative}
#beaker{
  width:100%;height:100px;
  border:2px solid rgba(255,255,255,.18);border-top:none;
  border-radius:0 0 14px 14px;overflow:hidden;position:relative;
  background:rgba(255,255,255,.02);
}
#beaker-liquid{position:absolute;bottom:0;left:0;right:0;height:75%;transition:background .8s}
.bubble{position:absolute;bottom:0;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.3);animation:bubbleRise 2s ease-in infinite}
#beaker-label,#burette-label{text-align:center;font-family:var(--ff-mono);font-size:.6rem;color:rgba(255,255,255,.35);margin:2px 0}
#vol-display{font-family:var(--ff-mono);font-size:.8rem;color:var(--lime);text-align:center}
#tit-slider{
  width:100%;cursor:pointer;accent-color:var(--lime);
  height:4px;border-radius:99px;
}
#auto-btn{
  font-family:var(--ff-head);font-size:.85rem;font-weight:600;
  padding:8px 20px;border:1.5px solid var(--lime);
  border-radius:99px;background:transparent;color:var(--lime);
  cursor:pointer;transition:all .25s;width:100%;
}
#auto-btn:hover{background:rgba(72,219,251,.12);box-shadow:0 0 16px rgba(72,219,251,.2)}
#auto-btn.running{background:rgba(72,219,251,.15);animation:pulseCTA 1s infinite}

/* Segmented Control Tabs */
.view-tab{
  padding:6px 20px;
  border:none;
  border-radius:8px;
  font-family:var(--ff-head);
  font-size:0.85rem;
  font-weight:600;
  cursor:pointer;
  transition:all 0.2s;
  background:transparent;
  color:rgba(255,255,255,0.4);
}
.view-tab.active{
  background:rgba(255,255,255,0.08);
  color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,0.2);
}
.view-tab:hover:not(.active){
  color:rgba(255,255,255,0.8);
  background:rgba(255,255,255,0.03);
}

/* Mini-game launcher: Integrated Action Dock */
#mg-bar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 24px;
  margin:0 auto 20px;
  width:fit-content;
  height:64px;
  background:rgba(255, 255, 255, 0.03);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255, 255, 255, 0.08);
  border-radius:18px;
  flex-shrink:0;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 40px rgba(0,0,0,0.4);
  position:relative;
  z-index:10;
}

.mg-bar-btn{
  font-family:var(--ff-head);
  font-size:0.88rem;
  font-weight:600;
  height:40px;
  padding:0 18px;
  border-radius:10px;
  border:1px solid rgba(255, 255, 255, 0.1);
  background:rgba(255, 255, 255, 0.04);
  color:rgba(255, 255, 255, 0.7);
  cursor:pointer;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:10px;
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mg-icon{
  font-size:1.1rem;
  filter:drop-shadow(0 0 8px rgba(255,255,255,0.2));
  transition:transform 0.3s;
}

.mg-bar-btn:hover{
  background:rgba(255, 255, 255, 0.08);
  color:#fff;
  transform:translateY(-2px) scale(1.02);
  border-color:rgba(255, 255, 255, 0.2);
}

.mg-bar-btn:hover .mg-icon{
  transform:scale(1.2) rotate(5deg);
}

/* Dynamic Glow Identities */
.btn-catch:hover{
  box-shadow:0 0 20px rgba(72,219,251,0.25);
  color:var(--lime);
  border-color:var(--lime);
}
.btn-save:hover{
  box-shadow:0 0 20px rgba(255,107,107,0.25);
  color:var(--coral);
  border-color:var(--coral);
}
.btn-match:hover{
  box-shadow:0 0 20px rgba(254,202,87,0.25);
  color:var(--yellow);
  border-color:var(--yellow);
}

/* ════════════════════════════════
   MINI-GAME MODAL
════════════════════════════════ */
#minigame-overlay{
  position:fixed;inset:0;z-index:500;display:none;
  align-items:center;justify-content:center;
  background:rgba(0,0,0,.82);backdrop-filter:blur(10px);
}
#minigame-overlay.active{display:flex;animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
#minigame-box{
  background:linear-gradient(135deg,#110830,#1A1045);
  border:1px solid rgba(255,255,255,.12);
  border-radius:28px;padding:28px 32px;
  max-width:680px;width:95%;max-height:90vh;overflow-y:auto;
  position:relative;
  box-shadow:0 24px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);
  animation:modalSlideUp .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modalSlideUp{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
#minigame-close{
  position:absolute;top:16px;right:18px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.6);
  font-size:1.1rem;cursor:pointer;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:all .2s;
}
#minigame-close:hover{background:rgba(255,107,107,.2);color:#fff;border-color:var(--coral)}
#mg-title{font-family:var(--ff-head);font-size:1.7rem;font-weight:700;margin-bottom:6px;color:var(--yellow)}
#mg-desc{color:rgba(255,255,255,.6);font-size:.88rem;margin-bottom:20px;line-height:1.6;font-weight:600}
#mg-area{min-height:260px}
#mg-result{margin-top:16px;text-align:center;font-family:var(--ff-head);font-size:1.15rem;min-height:36px;line-height:1.5}
#mg-btns{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.mg-btn{
  font-family:var(--ff-head);font-size:.95rem;font-weight:600;
  padding:10px 28px;border:none;border-radius:99px;cursor:pointer;
  transition:all .25s cubic-bezier(.34,1.56,.64,1);
}
.mg-btn.primary{
  background:linear-gradient(135deg,var(--coral),var(--orange));color:#fff;
  box-shadow:0 0 24px rgba(255,107,107,.4);
}
.mg-btn.secondary{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.15)}
.mg-btn:hover{transform:scale(1.05) translateY(-2px)}
.mg-btn:disabled{opacity:.35;pointer-events:none}

/* ── Game arenas ── */
#indicator-game,#save-game{
  position:relative;width:100%;height:240px;
  background:rgba(255,255,255,.02);
  border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
}
.falling-item{
  position:absolute;top:-44px;width:60px;height:60px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(.38rem,1.5vw,.55rem);font-weight:800;cursor:pointer;
  transition:transform .1s;user-select:none;
  border:2px solid rgba(255,255,255,.25);
  text-align:center;padding:6px;line-height:1.1;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
  overflow:hidden;word-break:break-word;overflow-wrap:break-word;hyphens:auto;
}
.falling-item:hover{transform:scale(1.2)!important}

.save-proton{
  position:absolute;width:42px;height:42px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FF9F43,#C0392B);
  box-shadow:0 0 16px rgba(255,107,107,.7);
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;color:#fff;font-weight:800;cursor:pointer;user-select:none;
  transition:all .15s cubic-bezier(.34,1.56,.64,1);font-family:var(--ff-head);
  overflow:hidden;
}
.save-proton:hover{transform:scale(1.3)!important;box-shadow:0 0 28px rgba(255,107,107,1)!important}

.save-hydroxide{
  position:absolute;width:38px;height:38px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--lime),#0074D9);
  box-shadow:0 0 12px rgba(72,219,251,.6);pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  font-size:.6rem;color:#fff;font-weight:800;
  overflow:hidden;
}

/* Match game */
#match-game{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.match-col{display:flex;flex-direction:column;gap:8px}
.match-col h3{
  font-family:var(--ff-head);font-size:.95rem;text-align:center;
  color:rgba(255,255,255,.55);margin-bottom:6px;
  background:rgba(255,255,255,.04);
  border-radius:var(--radius-md);
  padding:8px;
  border:1px solid rgba(255,255,255,.08);
}
.match-card{
  padding:12px 14px;border-radius:var(--radius-md);border:2px solid transparent;
  cursor:pointer;font-size:.84rem;font-weight:800;
  transition:all .2s cubic-bezier(.34,1.56,.64,1);text-align:center;
  font-family:var(--ff-body);user-select:none;
}
.match-card.acid{
  background:rgba(255,107,107,.15);
  border-color:rgba(255,107,107,.35);
  color:var(--coral);
}
.match-card.base{
  background:rgba(84,160,255,.15);
  border-color:rgba(84,160,255,.35);
  color:var(--blue);
}
.match-card:not(.correct):not(.wrong):hover{
  transform:scale(1.04) translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,.3);
}
.match-card.selected{
  border-color:var(--yellow) !important;
  box-shadow:0 0 20px rgba(254,202,87,.5) !important;
  transform:scale(1.05);
  background:rgba(254,202,87,.12) !important;
  color:var(--yellow) !important;
}
.match-card.correct{
  border-color:var(--green) !important;
  background:rgba(85,239,196,.2) !important;
  color:var(--green) !important;
  cursor:default;
  animation:bounceIn .4s;
  pointer-events:none;
}
.match-card.wrong{
  border-color:var(--coral) !important;
  background:rgba(255,107,107,.25) !important;
  animation:shake .3s;
}
#match-score{
  font-family:var(--ff-head);font-size:1rem;color:var(--yellow);
  text-align:center;margin-bottom:14px;
  background:rgba(254,202,87,.08);
  border-radius:var(--radius-md);
  padding:8px 16px;
  border:1px solid rgba(254,202,87,.2);
}

/* ════════════════════════════════
   LEARN SECTION
════════════════════════════════ */
#learn{
  overflow-y:auto;
  padding:calc(var(--nav-height) + 24px) 24px 40px;
  background:radial-gradient(ellipse at 15% 15%,rgba(84,160,255,.08) 0%,var(--bg-dark) 60%);
}
.page-header{text-align:center;margin-bottom:36px}
.page-header h2{
  font-family:var(--ff-head);font-size:2.4rem;font-weight:700;margin-bottom:8px;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.page-header .subtitle{color:rgba(255,255,255,.5);font-size:.95rem;font-weight:700}

.learn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;max-width:1000px;margin:0 auto}
.learn-card{
  background:var(--glass);border:1px solid var(--border);
  border-radius:var(--radius-xl);padding:26px;
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
  backdrop-filter:blur(8px);
}
.learn-card:hover{
  border-color:rgba(84,160,255,.35);
  background:rgba(84,160,255,.07);
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(84,160,255,.15);
}
.learn-card h3{font-family:var(--ff-head);font-size:1.2rem;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:8px}

/* pH scale */
#ph-scale-bar{
  height:24px;border-radius:12px;
  background:linear-gradient(to right,#d50000,#ff6d00,#ffd600,#55EFC4,#54A0FF,#1565c0,#6c3483);
  margin-bottom:10px;position:relative;cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
}
#ph-scale-thumb{
  position:absolute;top:-6px;width:36px;height:36px;border-radius:50%;
  background:#fff;border:3px solid #0F0A2E;
  transform:translateX(-50%);transition:left .2s;cursor:grab;
  box-shadow:0 4px 16px rgba(0,0,0,.5);
}
#ph-scale-labels{display:flex;justify-content:space-between;font-family:var(--ff-mono);font-size:.6rem;color:rgba(255,255,255,.35);margin-bottom:12px}
#ph-info{background:rgba(255,255,255,.04);border-radius:var(--radius-md);padding:14px;font-size:.82rem;line-height:1.6;border:1px solid rgba(255,255,255,.07)}
#ph-info .ph-val{font-family:var(--ff-mono);font-size:1.6rem;font-weight:700;margin-bottom:4px}

/* Acids vs Bases */
.avb-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.avb-col{border-radius:var(--radius-md);padding:14px;cursor:pointer;transition:all .3s;border:1.5px solid transparent}
.avb-col.acid{background:rgba(255,107,107,.08);border-color:rgba(255,107,107,.2)}
.avb-col.base{background:rgba(84,160,255,.08);border-color:rgba(84,160,255,.2)}
.avb-col:hover{transform:scale(1.03)}
.avb-col h4{font-family:var(--ff-head);font-size:1rem;font-weight:600;margin-bottom:8px}
.avb-col.acid h4{color:var(--coral)}.avb-col.base h4{color:var(--blue)}
.avb-col ul{list-style:none;font-size:.76rem;color:rgba(255,255,255,.65);line-height:2;font-weight:700}
.avb-col ul li::before{content:'▸ ';opacity:.6}

/* Neutralization */
#neutralize-stage{
  height:96px;position:relative;
  display:flex;align-items:center;justify-content:center;
  gap:12px;overflow:hidden;
}
#neu-h{
  width:38px;height:38px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FF9F43,#C0392B);
  box-shadow:0 0 16px rgba(255,107,107,.7);
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;font-family:var(--ff-head);color:#fff;font-weight:700;transition:all .6s;
  overflow:hidden;
}
#neu-oh{
  width:38px;height:38px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--lime),#0074D9);
  box-shadow:0 0 16px rgba(72,219,251,.6);
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-family:var(--ff-head);color:#fff;font-weight:700;transition:all .6s;
  overflow:hidden;
}
#neu-plus{font-size:1.4rem;color:rgba(255,255,255,.35);transition:opacity .3s}
#neu-arrow{font-size:1.4rem;color:rgba(255,255,255,.25);opacity:0;transition:opacity .3s}
#neu-water{opacity:0;transition:all .6s;display:flex;align-items:center;justify-content:center;gap:3px}
#neu-water .wd{width:14px;height:14px;border-radius:50%;background:var(--lime)}
#neu-water .wo{width:12px;height:12px;border-radius:50%;background:var(--coral)}
#neu-play{
  font-family:var(--ff-head);font-size:.85rem;font-weight:600;
  padding:8px 20px;border:1.5px solid rgba(255,255,255,.2);
  border-radius:99px;background:transparent;color:rgba(255,255,255,.6);
  cursor:pointer;margin-top:10px;transition:all .2s;
}
#neu-play:hover{border-color:var(--green);color:var(--green);background:rgba(85,239,196,.08)}

/* Indicators */
.indicator-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.ind-name{font-size:.8rem;font-weight:800;min-width:110px;color:rgba(255,255,255,.7)}
.ind-swatch{
  width:38px;height:38px;border-radius:50%;
  border:2px solid rgba(255,255,255,.18);
  transition:background .5s,box-shadow .5s;
}
.ind-btns{display:flex;gap:6px}
.ind-btn{
  font-size:.7rem;padding:5px 12px;border-radius:99px;border:1.5px solid;
  cursor:pointer;font-weight:800;transition:all .2s;font-family:var(--ff-body);
}
.ind-btn.acid{border-color:var(--coral);color:var(--coral);background:transparent}
.ind-btn.acid:hover{background:rgba(255,107,107,.12)}
.ind-btn.base{border-color:var(--blue);color:var(--blue);background:transparent}
.ind-btn.base:hover{background:rgba(84,160,255,.12)}

/* ════════════════════════════════
   BADGES
════════════════════════════════ */
#badges{
  overflow-y:auto;padding:calc(var(--nav-height) + 24px) 24px 40px;
  background:radial-gradient(ellipse at 80% 10%,rgba(85,239,196,.07) 0%,var(--bg-dark) 60%);
}
.badge-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:18px;
  max-width:900px;
  margin:0 auto;
}
.badge-card{
  background:var(--glass);border:1px solid var(--border);
  border-radius:var(--radius-xl);padding:26px 18px;
  text-align:center;transition:all .4s cubic-bezier(.34,1.56,.64,1);
  position:relative;overflow:hidden;backdrop-filter:blur(8px);
}
.badge-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.05),transparent 60%);
  pointer-events:none;
}
.badge-card.unlocked{
  border-color:rgba(254,202,87,.4);
  background:rgba(254,202,87,.06);
  box-shadow:0 0 30px rgba(254,202,87,.18);
}
.badge-card.locked{filter:grayscale(.75);opacity:.5}
.badge-card.unlocked .badge-icon{animation:floatAnim 3s ease-in-out infinite}
.badge-icon{font-size:3rem;margin-bottom:12px;display:block}
.badge-name{font-family:var(--ff-head);font-size:1rem;font-weight:600;margin-bottom:6px}
.badge-how{font-size:.73rem;color:rgba(255,255,255,.4);line-height:1.5;font-weight:700}
.badge-card.unlocked .badge-how{color:rgba(254,202,87,.75)}
.lock-overlay{position:absolute;top:12px;right:12px;font-size:1rem;opacity:.5}
#badge-progress{
  text-align:center;font-family:var(--ff-mono);font-size:.88rem;color:var(--yellow);
  margin-bottom:12px;
}
.badge-progress-track{max-width:300px;margin:0 auto 28px;height:8px;background:rgba(255,255,255,.07);border-radius:99px;overflow:hidden}
.badge-progress-fill{height:100%;background:linear-gradient(90deg,var(--yellow),var(--green));border-radius:99px;transition:width .8s ease}

/* ════════════════════════════════
   TOAST NOTIFICATIONS
════════════════════════════════ */
#toast-container{
  position:fixed;top:70px;right:20px;z-index:500;
  display:flex;flex-direction:column;gap:10px;pointer-events:none;
}
.toast{
  background:linear-gradient(135deg,rgba(254,202,87,.15),rgba(85,239,196,.1));
  border:1px solid rgba(254,202,87,.3);
  border-radius:var(--radius-lg);padding:12px 20px;
  font-family:var(--ff-head);font-size:1rem;font-weight:600;color:#fff;
  backdrop-filter:blur(12px);
  box-shadow:0 8px 32px rgba(0,0,0,.3);
  animation:toastIn .4s cubic-bezier(.34,1.56,.64,1), toastOut .4s ease 2.6s forwards;
  display:flex;align-items:center;gap:10px;min-width:220px;
}
@keyframes toastIn{from{opacity:0;transform:translateX(60px) scale(.9)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes toastOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(60px)}}

/* ══ GLOBAL KEYFRAMES ══ */
@keyframes floatAnim{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes titleGlow{0%,100%{filter:drop-shadow(0 0 12px rgba(254,185,60,.35)) drop-shadow(0 0 40px rgba(84,160,255,.06))}50%{filter:drop-shadow(0 0 28px rgba(254,185,60,.6)) drop-shadow(0 0 60px rgba(84,160,255,0.1))}}
@keyframes pulseCTA{0%,100%{box-shadow:0 0 15px rgba(72,219,251,.18),0 8px 32px rgba(0,0,0,.4)}50%{box-shadow:0 0 30px rgba(72,219,251,.3),0 8px 40px rgba(0,0,0,.4)}}
@keyframes drip{0%{transform:translateY(0) scaleY(1);opacity:1}80%{transform:translateY(28px) scaleY(1.3);opacity:1}100%{transform:translateY(36px) scaleY(0);opacity:0}}
@keyframes bubbleRise{0%{bottom:0;opacity:.6}100%{bottom:100%;opacity:0}}
@keyframes bounceIn{0%{transform:scale(.8)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes sparkleOut{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(2.5)}}
@keyframes fadeSlideIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes unlockPop{0%{transform:scale(0) rotate(-10deg)}70%{transform:scale(1.2) rotate(3deg)}100%{transform:scale(1) rotate(0)}}

/* Scrollbar */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:rgba(255,255,255,.02)}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:4px}

/* ══ RESPONSIVE ══ */
@media(max-width:1024px){
  :root{--nav-height:68px}
  #nav-links{
    display:none;
    position:fixed;inset:var(--nav-height) 0 0 0;
    background:rgba(8,6,20,.98);
    backdrop-filter:blur(18px);
    flex-direction:column;align-items:stretch;
    padding:20px;gap:10px;z-index:399;
    border-top:1px solid rgba(255,255,255,.08);
  }
  #nav-links.open{display:flex}
  #nav-links button{width:100%;justify-content:center;border-radius:var(--radius-lg);padding:14px;font-size:1rem}
  .nav-hamburger{display:flex}
}
@media(max-width:860px){
  :root{
    --game-sidebar-width: 100%;
    --game-gap: 8px;
  }
  #game-body{
    grid-template-columns:1fr;
    grid-template-rows:1fr auto;
    margin:0 12px 8px;
  }
  #mode-area{
    grid-row:1;
    grid-column:1;
    border-radius:20px;
  }
  #titration-panel{
    grid-row:2;
    grid-column:1;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    padding:12px;
    border-radius:20px;
  }
  #view-tabs{
    margin-bottom:8px;
  }
  #burette-wrap{width:30px;height:90px}
  #burette{width:30px;height:90px}
  #burette-tip{height:12px;width:3px}
  #drip{width:6px;height:8px}
  #beaker{height:70px}
  .bubble{display:none}
  #tit-slider{max-width:180px}
  #auto-btn{width:auto;padding:6px 14px;font-size:.78rem}
  #vol-display{font-size:.7rem;order:-1;width:100%;text-align:center}
  #burette-label,#beaker-label{font-size:.5rem;margin:0}
  #beaker-wrap{width:80px;flex-shrink:0}
  #beaker-liquid{height:60%}

  /* Mini-game launcher — compact pill on mobile */
  #mg-bar{
    width:fit-content;
    max-width:100%;
    margin:0 auto 14px;
    padding:0 12px;
    height:44px;
    
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    
    left:50%;
    transform:translateX(-50%);
    position:relative;
    border-radius:99px;
  }
  .mg-bar-btn{
    padding:0 14px;
    height:38px;
    min-width:auto;
    justify-content:center;
    font-size:0.85rem;
    gap:6px;
    border-radius:99px;
  }
  .mg-icon{font-size:0.9rem}
}
@media(max-width:680px){
  #game-header,
  #view-tabs,
  #game-body,
  #game-body > *,
  #mg-bar{margin-inline:auto}
  #game-body{border-radius:0;border-left:none;border-right:none;margin-bottom:0}
  #game-header{border-radius:16px;padding:8px 14px;margin-inline:var(--section-gutter)}
  #view-tabs{padding:0 12px}
  #mg-bar{margin-inline:var(--section-gutter)}
  .level-badge{font-size:.78rem;padding:3px 10px}
  #ph-display{font-size:1.2rem}
  #vol-top{font-size:.75rem}
}
@media(max-width:480px){
  #mg-bar{
    padding:0 10px;
    gap:8px;
    border-radius:16px;
  }
  .mg-bar-btn{
    padding:0 12px;
    font-size:0.82rem;
    gap:6px;
  }
  .mg-icon{
    font-size:1rem;
  }
  #landing-content{padding:calc(var(--nav-height) + 22px) 16px 16px}
  #nav{gap:12px;padding:12px 16px}
  .nav-logo-text{font-size:1.1rem}
  #game{padding-top:calc(var(--nav-height) + 4px)}

  #game-header{gap:8px;padding:6px 10px}
  .level-badge{font-size:.7rem;padding:2px 8px}
  #ph-display{font-size:1.1rem}
  #vol-top{font-size:.7rem}

  #titration-panel{gap:6px;padding:8px 10px}
  #burette-wrap{width:26px;height:70px}
  #burette{width:26px;height:70px}
  #beaker{height:56px}
  #beaker-wrap{width:64px}
  #tit-slider{max-width:140px;height:6px}
  #auto-btn{font-size:.72rem;padding:5px 10px}
  #vol-display{font-size:.65rem}
  #burette-label,#beaker-label{font-size:.45rem}

  #graph-panel{padding:8px}
  .panel-title{font-size:.78rem}
  .view-tab{font-size:.76rem;padding:6px 10px}

  #mg-bar{padding:3px 10px;margin-bottom:6px;gap:3px}
  .mg-bar-btn{font-size:.6rem;padding:2px 6px}

  #learn,
  #badges{padding-inline:16px}
  .feat-card{width:140px;padding:18px 20px}
  #minigame-box{padding:20px 16px}
  #match-game{gap:8px}
  .match-card{padding:8px 10px;font-size:.76rem}
}

@media(max-height:600px){
  #landing-content{padding-top:calc(var(--nav-height) + 16px);gap:4px}
  #landing-content h1{font-size:clamp(1.8rem,5vw,3rem)}
  .tagline{margin-bottom:16px;font-size:clamp(.8rem,1.8vw,1rem)}
  #start-btn{padding:12px 36px;font-size:1.05rem}
  .feature-cards{margin-top:16px}
  .feat-card{padding:14px 18px;width:130px}
  .feat-card .icon{font-size:1.6rem}

  /* Compact game on short screens */
  #game-header{padding:6px 14px}
  #ph-display{font-size:1.1rem}
  #vol-top{font-size:.7rem}
  .level-badge{font-size:.72rem;padding:2px 8px}
  #titration-panel{padding:6px 10px;gap:4px}
  #burette-wrap{width:22px;height:54px}
  #burette{width:22px;height:54px}
  #beaker{height:44px}
  #beaker-wrap{width:50px}
  #view-tabs{margin:4px auto}
  #tit-slider{max-width:100px}
}
@media(max-height:480px){
  #landing-content{padding-top:calc(var(--nav-height) + 8px);gap:2px}
  .landing-badge{margin-bottom:8px;font-size:.7rem;padding:4px 12px}
  #landing-content h1{font-size:clamp(1.4rem,4vw,2rem);margin-bottom:6px}
  .tagline{display:none}
  #start-btn{padding:8px 24px;font-size:.9rem}
  .feature-cards{display:none}
}

@media(max-width:360px){
  .learn-grid{grid-template-columns:1fr}
  .learn-card{padding:18px}
  .page-header h2{font-size:1.6rem}
  .feat-card{width:120px;padding:12px 14px}
  .feat-card .icon{font-size:1.3rem}
  .loader-bar-track{width:180px}
  .loader-text{font-size:1.2rem}
  #minigame-box{padding:16px 12px}
} 

/* ════════════════════════════════
   MODE ATMOSPHERE (Lab vs Graph)
   ════════════════════════════════ */

/* Global Atmosphere Shift */
#game-body[data-mode="graph"] #global-particles {
  opacity: 0.15;
  filter: blur(4px);
  transition: opacity 1s, filter 1s;
}

#game-body[data-mode="graph"] .level-badge {
  filter: saturate(0.2);
  opacity: 0.6;
}

#game-body[data-mode="graph"] #game-header {
  background: rgba(9, 7, 24, 0.4);
  border-color: rgba(255,255,255,0.03);
  transition: all 0.5s;
}

/* Immersive Lab Atmosphere */
#game-body[data-mode="lab"] #global-particles {
  opacity: 1;
  filter: blur(0);
  transition: opacity 1s, filter 1s;
}

#game-body[data-mode="lab"] #game-header {
  background: var(--surface-mid);
  border-color: rgba(255,255,255,0.08);
  transition: all 0.5s;
}

/* Ensure controls are visually anchored in both modes */
#titration-panel {
  transition: background 0.5s, border-color 0.5s;
}

#game-body[data-mode="graph"] #titration-panel {
  background: #0d0b1f;
  border-color: rgba(255,255,255,0.04);
}