/* Moleculox v8.7.20 · R77 FINAL — cross-platform native styles */

:root{
  --ink:#0e0c26;
  --card:rgba(22,19,56,.78);
  --card2:rgba(30,26,74,.85);
  --line:rgba(155,132,255,.38);
  --neon:#9d7bff;
  --cyan:#4fd8ff;
  --green:#4ade80;
  --amber:#ffc94d;
  --red:#ff5c69;
  --txt:#eef0ff;
  --dim:#a3a8d4;
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --sar:env(safe-area-inset-right,0px);
  --sal:env(safe-area-inset-left,0px);
  --app-h:100dvh;
  --app-w:100vw;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{width:100%;height:var(--app-h);overflow:hidden;overscroll-behavior:none}
body{
  background:var(--ink);
  color:var(--txt);
  font-family:-apple-system,'SF Pro Rounded','SF Pro Display',system-ui,'Segoe UI',Roboto,sans-serif;
  touch-action:none;
  position:fixed;top:0;left:0;right:0;bottom:auto;width:var(--app-w);height:var(--app-h);
}
#bgA,#bgB{position:fixed;inset:0;z-index:0;background-size:cover;background-position:center top;transition:opacity 1.6s ease}
#bgA{background-image:url(../assets/images/bg-default.webp);opacity:1}
#bgB{opacity:0}
#bgVignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(10,8,30,.25) 0%,rgba(10,8,30,.05) 30%,rgba(10,8,30,.45) 100%)}
#bgParticles{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
#bgParticles span{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(200,190,255,.9),rgba(200,190,255,0) 70%);width:5px;height:5px;opacity:0;will-change:transform,opacity;animation:driftUp linear infinite}
#bgParticles span:nth-child(1){left:6%;width:4px;height:4px;animation-duration:24s;animation-delay:-2s}
#bgParticles span:nth-child(2){left:11%;width:5px;height:5px;animation-duration:31s;animation-delay:-11s}
#bgParticles span:nth-child(3){left:8%;width:3px;height:3px;animation-duration:19s;animation-delay:-6s}
#bgParticles span:nth-child(4){left:90%;width:5px;height:5px;animation-duration:27s;animation-delay:-16s}
#bgParticles span:nth-child(5){left:95%;width:4px;height:4px;animation-duration:22s;animation-delay:-9s}
#bgParticles span:nth-child(6){left:87%;width:3px;height:3px;animation-duration:34s;animation-delay:-20s}
@keyframes driftUp{
  0%{transform:translate(0,79vh) scale(.7);opacity:0}
  8%{opacity:.35}
  50%{transform:translate(2vw,-45vh) scale(1)}
  92%{opacity:.3}
  100%{transform:translate(-1vw,-100vh) scale(.6);opacity:0}
}
#fx{position:fixed;inset:0;z-index:40;pointer-events:none}

/* ---------- screens ---------- */
.screen{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;opacity:0;pointer-events:none;transform:scale(1.02);transition:opacity .25s ease,transform .25s ease}
.screen.on{opacity:1;pointer-events:auto;transform:scale(1)}
.screen.on{display:flex}

/* ---------- generic UI ---------- */
.btn{
  border:none;outline:none;cursor:pointer;color:var(--txt);
  font-family:inherit;font-weight:800;letter-spacing:.3px;
  border-radius:18px;position:relative;
  background:linear-gradient(180deg,#6d54e8,#5233c9);
  box-shadow:0 5px 0 #3a20a0,0 10px 24px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .13s cubic-bezier(.34,1.3,.64,1),box-shadow .13s ease,filter .15s ease;
  touch-action:manipulation;
}
.btn:active{transform:translateY(3px) scale(.95);box-shadow:0 1px 0 #3a20a0,0 4px 10px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.3),0 0 16px rgba(157,123,255,.4)}
.btn.green{background:linear-gradient(180deg,#43d97c,#1fa855);box-shadow:0 5px 0 #147a3c,0 10px 24px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.4)}
.btn.green:active{transform:translateY(3px) scale(.95);box-shadow:0 1px 0 #147a3c,0 4px 10px rgba(0,0,0,.4),0 0 16px rgba(67,217,124,.45)}
.btn.blue{background:linear-gradient(180deg,#3db6f2,#1e7fd6);box-shadow:0 5px 0 #145a9e,0 10px 24px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.4)}
.btn.amber{background:linear-gradient(180deg,#ffc94d,#e6952c);box-shadow:0 5px 0 #9c5f0f,0 10px 24px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.45);color:#3a2200;position:relative}
#dailyDot{position:absolute;top:-7px;right:-7px;width:16px;height:16px;border-radius:50%;background:#ff4f62;box-shadow:0 0 0 3px #171429,0 0 10px rgba(255,79,98,.9);display:none;z-index:12;pointer-events:none}
#dailyDot.on{display:block}
.btn.blue:active{transform:translateY(3px) scale(.95);box-shadow:0 1px 0 #145a9e,0 4px 10px rgba(0,0,0,.4),0 0 16px rgba(61,182,242,.45)}
.btn.ghost{background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1.5px var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn.ghost:active{transform:scale(.95);box-shadow:inset 0 0 0 1.5px var(--line),0 0 14px rgba(255,255,255,.25)}
/* icon badge style - hint/restart/undo/home, matching Han's reference image */
.btn.iconBadge{
  background:#11101d;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.1);
  border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:9px 4px 7px;transition:transform .13s cubic-bezier(.34,1.3,.64,1),box-shadow .15s ease;
}
.btn.iconBadge .badgeIcon{width:28px;height:28px;display:block;pointer-events:none}
.btn.iconBadge .badgeIcon svg{width:100%;height:100%;display:block;filter:drop-shadow(0 0 3px currentColor)}
.btn.iconBadge small{font-size:9px;font-weight:800;letter-spacing:.3px;color:rgba(255,255,255,.82)}
.btn.iconBadge:active{transform:scale(.93)}
#btnHint.iconBadge{box-shadow:inset 0 0 0 1.5px rgba(79,216,255,.5),0 0 18px rgba(79,216,255,.5)}
#btnHint .badgeIcon{color:#8fe0ff}
#btnHint.iconBadge:active{box-shadow:inset 0 0 0 1.5px rgba(79,216,255,.8),0 0 28px rgba(79,216,255,.85)}
#btnRestart.iconBadge{box-shadow:inset 0 0 0 1.5px rgba(67,217,124,.5),0 0 18px rgba(67,217,124,.5)}
#btnRestart .badgeIcon{color:#a4f0bf}
#btnRestart.iconBadge:active{box-shadow:inset 0 0 0 1.5px rgba(67,217,124,.8),0 0 28px rgba(67,217,124,.85)}
#btnUndo.iconBadge{box-shadow:inset 0 0 0 1.5px rgba(157,123,255,.5),0 0 18px rgba(157,123,255,.5)}
#btnUndo .badgeIcon{color:#c9b8ff}
#btnUndo.iconBadge:active{box-shadow:inset 0 0 0 1.5px rgba(157,123,255,.8),0 0 28px rgba(157,123,255,.85)}
#btnHome.iconBadge{box-shadow:inset 0 0 0 1.5px rgba(255,201,77,.5),0 0 18px rgba(255,201,77,.5)}
.btn.iconBadge.tint-silver{box-shadow:inset 0 0 0 1.5px rgba(210,220,235,.4),0 0 16px rgba(200,215,235,.4)}
.syncDot{position:absolute;top:5px;right:5px;width:8px;height:8px;border-radius:50%;background:transparent;transition:background .3s ease;pointer-events:none}
.syncDot.sync-syncing{background:#ffd876;animation:syncPulse 1s ease-in-out infinite}
.syncDot.sync-saved{background:#4fd88c}
.syncDot.sync-offline{background:#8a8a9a}
.syncDot.sync-error{background:#ff5c69}
@keyframes syncPulse{0%,100%{opacity:.5}50%{opacity:1}}
.btn.iconBadge.tint-silver:active{box-shadow:inset 0 0 0 1.5px rgba(210,220,235,.75),0 0 24px rgba(200,215,235,.75)}
.btn.iconBadge.tint-silver .badgeIcon{color:#d7e0ec}
.btn.iconBadge.tint-amber{box-shadow:inset 0 0 0 1.5px rgba(255,201,77,.5),0 0 16px rgba(255,201,77,.5)}
.btn.iconBadge.tint-amber:active{box-shadow:inset 0 0 0 1.5px rgba(255,201,77,.8),0 0 26px rgba(255,201,77,.85)}
.btn.iconBadge.tint-amber .badgeIcon{color:#ffd98a}
.btn.iconBadge.tint-purple{box-shadow:inset 0 0 0 1.5px rgba(157,123,255,.5),0 0 16px rgba(157,123,255,.5)}
.btn.iconBadge.tint-purple:active{box-shadow:inset 0 0 0 1.5px rgba(157,123,255,.8),0 0 26px rgba(157,123,255,.85)}
.btn.iconBadge.tint-purple .badgeIcon{color:#c9b8ff}
#btnHome .badgeIcon{color:#ffd98a}
#btnHome.iconBadge:active{box-shadow:inset 0 0 0 1.5px rgba(255,201,77,.8),0 0 28px rgba(255,201,77,.85)}
@media (hover:hover){.btn.iconBadge:hover{filter:brightness(1.15)}}

.btn:disabled{filter:grayscale(.8) brightness(.6);pointer-events:none}
@keyframes btnBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.breathe{animation:btnBreathe 2.8s ease-in-out infinite}
.breathe:active,.breathe:disabled{animation:none}
@media (hover:hover){
  .btn:hover{filter:brightness(1.1) drop-shadow(0 0 12px rgba(157,123,255,.55));transform:translateY(-1px)}
  .btn.green:hover{filter:brightness(1.1) drop-shadow(0 0 12px rgba(67,217,124,.55));transform:translateY(-1px)}
  .btn.blue:hover{filter:brightness(1.1) drop-shadow(0 0 12px rgba(61,182,242,.55));transform:translateY(-1px)}
  .btn.amber:hover{filter:brightness(1.1) drop-shadow(0 0 12px rgba(255,201,77,.55));transform:translateY(-1px)}
  .btn.ghost:hover{background:rgba(255,255,255,.14);filter:brightness(1.15) drop-shadow(0 0 10px rgba(255,255,255,.3));transform:translateY(-1px)}
}


.card{
  background:var(--card);
  border:1.5px solid var(--line);
  border-radius:20px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 12px 32px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);
}
.chip{
  display:flex;align-items:center;gap:6px;
  background:rgba(10,8,30,.72);border:1.5px solid var(--line);
  border-radius:999px;padding:6px 12px;font-weight:800;font-size:14px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.coinIcon{
  position:relative;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;flex:none;
  color:#6b3d00;font-size:9px;font-weight:1000;line-height:1;font-family:system-ui,-apple-system,sans-serif;
  background:
    radial-gradient(circle at 31% 24%,rgba(255,255,255,.98) 0 7%,transparent 8%),
    radial-gradient(circle at 35% 30%,#fff8c9 0 12%,#ffe36b 30%,#f6b72d 62%,#b96a08 100%);
  border:1px solid rgba(255,238,164,.98);
  box-shadow:0 0 0 1px rgba(111,55,0,.7),inset 0 -2px 3px rgba(91,42,0,.62),inset 0 1px 2px rgba(255,255,255,.78),0 1px 4px rgba(0,0,0,.48),0 0 8px rgba(255,202,55,.22);
  overflow:hidden;isolation:isolate;
}
.coinIcon::before{content:'M';position:relative;z-index:2;transform:scaleX(.88);text-shadow:0 1px 0 rgba(255,244,170,.7)}
.coinIcon::after{content:'';position:absolute;z-index:1;width:13px;height:6px;border:1px solid rgba(76,222,255,.95);border-radius:50%;transform:rotate(-24deg);box-shadow:0 0 4px rgba(79,216,255,.85)}
.iconbtn{
  width:44px;height:44px;border-radius:14px;font-size:20px;
  display:flex;align-items:center;justify-content:center;
}
.svgicon{width:1em;height:1em;display:block;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- splash ---------- */
#splash{align-items:center;justify-content:flex-start;padding-top:calc(var(--sat) + 8vh);z-index:12}
#splashGear{position:absolute;top:calc(var(--sat) + 12px);right:14px}
#splashCoinChip{position:absolute;top:calc(var(--sat) + 16px);right:72px;z-index:2;min-width:58px;justify-content:center;padding:6px 10px;font-size:13px;box-shadow:0 8px 20px rgba(0,0,0,.24)}
#btnSwitchProfile{position:absolute;top:calc(var(--sat) + 12px);left:14px;z-index:2}
#profileWrap{width:min(86vw,340px);margin:auto;text-align:center;display:flex;flex-direction:column;gap:14px;max-height:80vh;padding-top:calc(var(--sat) + 6vh)}
#profileTop{font-size:14px;font-weight:800;letter-spacing:4px;color:var(--cyan);text-shadow:0 0 14px rgba(79,216,255,.7)}
#profileTitle{font-size:26px;font-weight:900;color:var(--txt);margin-bottom:4px}
#profileListWrap{max-height:40vh;overflow-y:auto}
#profileList{display:flex;flex-direction:column;gap:10px}
.profileBtn{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;font-size:16px;width:100%}
.profileBtn small{opacity:.75;font-weight:700;font-size:13px}
.profileRow{display:flex;align-items:stretch;gap:8px}
.profileRow .profileBtn{flex:1}
.profileDel{flex:0 0 auto;width:52px;border:none;border-radius:14px;background:linear-gradient(180deg,rgba(255,108,120,.34),rgba(151,33,48,.30));box-shadow:0 10px 20px rgba(120,16,29,.24), inset 0 0 0 1.8px rgba(255,140,150,.72), inset 0 1px 0 rgba(255,255,255,.22);color:#ffe9ed;font-size:20px;font-weight:900;text-shadow:0 0 10px rgba(255,80,108,.55);transition:transform .13s ease,background .15s ease,box-shadow .15s ease}
.profileDel:active{transform:scale(.92);background:linear-gradient(180deg,rgba(255,120,132,.42),rgba(169,42,58,.40));box-shadow:0 6px 14px rgba(120,16,29,.24), inset 0 0 0 1.8px rgba(255,160,168,.82)}
.profileEmpty{padding:18px 14px;border-radius:16px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1.5px var(--line);color:var(--dim);font-size:13px;font-weight:750;line-height:1.45}
#profileBack{margin-top:2px;padding:13px;font-size:14px}
#profileScr{align-items:center;justify-content:flex-start;padding-top:0;z-index:12}

/* ---------- wHiTeWaY studio intro ---------- */
#studioScr{z-index:30;background:#fff;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;transition:opacity .6s ease,transform .6s ease}
#studioScr.fadeOut{opacity:0;transform:scale(1.015);pointer-events:none}
#studioLogo{width:100%;height:100%;object-fit:contain;object-position:center;display:block;background:#fff;animation:studioLogoIn 1s ease-out both}
@keyframes studioLogoIn{from{opacity:0;transform:scale(1.025)}to{opacity:1;transform:scale(1)}}
#studioTap{position:absolute;left:50%;bottom:calc(var(--sab) + 30px);transform:translateX(-50%);z-index:3;display:flex;align-items:center;justify-content:center;gap:7px;min-width:162px;padding:9px 14px 8px;border-radius:999px;background:rgba(255,255,255,.97);color:#45406b;font-size:12px;font-weight:900;letter-spacing:.55px;border:1.5px solid rgba(129,123,191,.28);box-shadow:0 8px 22px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.92);opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease;animation:studioTapPulse 1.8s ease-in-out infinite}
#studioTap span{font-size:15px;filter:drop-shadow(0 1px 0 rgba(255,255,255,.55))}
#studioTap small{position:absolute;top:100%;left:0;right:0;margin-top:6px;color:#4c4670;font-size:9px;letter-spacing:.35px;text-align:center;text-shadow:0 1px 0 rgba(255,255,255,.92)}
#studioScr.ready #studioTap{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
#studioScr.started #studioTap,#studioScr.fadeOut #studioTap{opacity:0;pointer-events:none;animation:none}
@keyframes studioTapPulse{0%,100%{box-shadow:0 8px 22px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(126,122,193,.12)}50%{box-shadow:0 8px 22px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.98),0 0 0 1.5px rgba(126,122,193,.28),0 0 14px rgba(173,167,255,.24)}}

#bootScr{padding:0;overflow:hidden;background:transparent}
#bootStage{
  position:absolute;inset:0;width:100%;height:100%;margin:0;line-height:0;overflow:hidden;
  --boot-src-w:852;
  --boot-src-h:1536;
  --boot-ratio:calc(var(--boot-src-w) / var(--boot-src-h));
  --boot-w:max(100vw, calc(100vh * var(--boot-ratio)));
  --boot-h:max(100vh, calc(100vw / var(--boot-ratio)));
  --boot-x:calc((100vw - var(--boot-w)) / 2);
  --boot-y:calc((100vh - var(--boot-h)) / 2);
}
#bootBg{
  position:absolute;left:var(--boot-x);top:var(--boot-y);width:var(--boot-w);height:var(--boot-h);
  object-fit:fill;display:block;background:#020103
}
#bootDarkScrim{position:absolute;inset:0;background:#020103;opacity:1;transition:opacity 1.6s ease;pointer-events:none;z-index:2}
#bootDarkScrim.reveal{opacity:0}
#bootBulbGlow{position:absolute;left:calc(var(--boot-x) + 0.275 * var(--boot-w));top:calc(var(--boot-y) + 0.29 * var(--boot-h));width:calc(0.15 * var(--boot-w));aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;opacity:0;z-index:4;
  background:radial-gradient(circle,rgba(255,226,140,.95) 0%,rgba(255,200,60,.55) 35%,rgba(255,180,40,0) 72%);
  mix-blend-mode:screen}
#bootBulbGlow.on{animation:bulbFlicker 1.3s ease-out forwards,bulbPulse 3.2s ease-in-out 1.3s infinite}
@keyframes bulbFlicker{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
  18%{opacity:.85;transform:translate(-50%,-50%) scale(1.3)}
  30%{opacity:.15;transform:translate(-50%,-50%) scale(.7)}
  45%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}
  100%{opacity:.9;transform:translate(-50%,-50%) scale(1)}
}
@keyframes bulbPulse{0%,100%{opacity:.85;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.07)}}
@media (prefers-reduced-motion: reduce){
  #bootDarkScrim{transition:none;opacity:0}
  #bootBulbGlow.on{animation:none;opacity:.9}
}
#bootLogoHalo{position:absolute;left:calc(var(--boot-x) + 0.505 * var(--boot-w));top:calc(var(--boot-y) + 0.573 * var(--boot-h));width:calc(0.72 * var(--boot-w));height:calc(0.31 * var(--boot-w));transform:translate(-50%,-50%);pointer-events:none;z-index:3;
  background:radial-gradient(ellipse at center,rgba(141,92,255,.25) 0%,rgba(56,25,150,.18) 36%,rgba(25,10,70,0) 72%);
  filter:blur(6px);mix-blend-mode:screen;animation:logoHaloPulse 3.8s ease-in-out infinite}
@keyframes logoHaloPulse{0%,100%{opacity:.38;transform:translate(-50%,-50%) scale(.97)}50%{opacity:.72;transform:translate(-50%,-50%) scale(1.03)}}
#bootShine{position:absolute;left:calc(var(--boot-x) + 0.017 * var(--boot-w));top:calc(var(--boot-y) + 0.435 * var(--boot-h));width:calc(0.966 * var(--boot-w));height:calc(0.095 * var(--boot-h));overflow:hidden;pointer-events:none;mix-blend-mode:overlay;z-index:5}
#bootShine::after{content:'';position:absolute;top:-50%;left:-60%;width:34%;height:200%;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.9) 48%,rgba(255,255,255,.9) 52%,transparent 70%);
  transform:skewX(-18deg);opacity:0;animation:titleShine 1.7s ease-in-out 3.7s 2}
@keyframes titleShine{0%{left:-60%;opacity:0}8%{opacity:1}55%{opacity:1}70%{left:130%;opacity:0}100%{left:130%;opacity:0}}
.bootAtomGlow{position:absolute;width:calc(0.085 * var(--boot-w));aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;mix-blend-mode:screen;animation:atomGlowPulse 2.6s ease-in-out infinite;z-index:5}
#bootGlowH{left:calc(var(--boot-x) + 0.347 * var(--boot-w));top:calc(var(--boot-y) + 0.602 * var(--boot-h));background:radial-gradient(circle,rgba(79,182,255,.85) 0%,rgba(79,182,255,0) 70%);animation-delay:0s}
#bootGlowO{left:calc(var(--boot-x) + 0.498 * var(--boot-w));top:calc(var(--boot-y) + 0.63 * var(--boot-h));background:radial-gradient(circle,rgba(255,90,90,.85) 0%,rgba(255,90,90,0) 70%);animation-delay:.5s}
#bootGlowC{left:calc(var(--boot-x) + 0.70 * var(--boot-w));top:calc(var(--boot-y) + 0.616 * var(--boot-h));background:radial-gradient(circle,rgba(120,220,90,.85) 0%,rgba(120,220,90,0) 70%);animation-delay:1s}
@keyframes atomGlowPulse{0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(.85)}50%{opacity:.9;transform:translate(-50%,-50%) scale(1.15)}}
.bootBondSpark{position:absolute;height:calc(0.0082 * var(--boot-h));border-radius:999px;overflow:hidden;pointer-events:none;opacity:.86;z-index:6;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.08) 30%,rgba(255,255,255,.24) 50%,rgba(255,255,255,.08) 70%,rgba(255,255,255,0) 100%);
  box-shadow:0 0 8px rgba(255,255,255,.24)}
.bootBondSpark::after{content:'';position:absolute;inset:-70% -22%;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,.94) 50%,rgba(255,255,255,0) 68%,transparent 100%);
  transform:translateX(-120%);animation:bondFlow 2.7s ease-in-out infinite}
#bootBondHO{left:calc(var(--boot-x) + 0.354 * var(--boot-w));top:calc(var(--boot-y) + 0.6425 * var(--boot-h));width:calc(0.144 * var(--boot-w));transform:rotate(31deg);transform-origin:left center}
#bootBondHO::after{animation-delay:.12s}
#bootBondOC{left:calc(var(--boot-x) + 0.512 * var(--boot-w));top:calc(var(--boot-y) + 0.668 * var(--boot-h));width:calc(0.158 * var(--boot-w));transform:rotate(-17deg);transform-origin:left center}
#bootBondOC::after{animation-delay:1.24s}
@keyframes bondFlow{0%,12%{transform:translateX(-120%);opacity:0}18%{opacity:1}58%{opacity:1}72%,100%{transform:translateX(120%);opacity:0}}
.bootBub{position:absolute;width:1px;height:1px;pointer-events:none;z-index:7}
.bootBub span{position:absolute;bottom:0;border-radius:50%;opacity:0;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.95),rgba(200,230,255,.3) 60%,transparent 76%);
  animation:bubRise 3.2s ease-in infinite}
.bootBub span:nth-child(1){left:-8px;width:6px;height:6px;animation-delay:.1s}
.bootBub span:nth-child(2){left:2px;width:4px;height:4px;animation-delay:1.2s}
.bootBub span:nth-child(3){left:8px;width:5px;height:5px;animation-delay:2.1s}
.bootBub span:nth-child(4){left:-3px;width:3px;height:3px;animation-delay:2.8s}
.bootBubTall span{animation-name:bubRiseTall}
.bootBubMedium span{animation-name:bubRiseMedium}
.bootBubShort span{animation-name:bubRiseShort}
.bootBubTall span:nth-child(1){width:7px;height:7px}
.bootBubTall span:nth-child(2){width:5px;height:5px}
.bootBubTall span:nth-child(3){width:6px;height:6px}
.bootBubTube span:nth-child(1){width:5px;height:5px}
.bootBubTube span:nth-child(2){width:4px;height:4px}
.bootBubTube span:nth-child(3){width:4px;height:4px}
.bootBubGreen span{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.98),rgba(114,255,128,.44) 56%,transparent 76%)}
.bootBubPurple span{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.96),rgba(224,164,255,.42) 58%,transparent 76%)}
.bootBubCyan span{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.96),rgba(120,248,255,.4) 56%,transparent 76%)}
@keyframes bubRise{0%{transform:translateY(0) translateX(0);opacity:0}8%{opacity:.85}88%{opacity:.4}100%{transform:translateY(-64px) translateX(5px);opacity:0}}
@keyframes bubRiseMedium{0%{transform:translateY(0) translateX(0);opacity:0}8%{opacity:.82}88%{opacity:.42}100%{transform:translateY(-98px) translateX(4px);opacity:0}}
@keyframes bubRiseTall{0%{transform:translateY(0) translateX(0);opacity:0}8%{opacity:.82}88%{opacity:.38}100%{transform:translateY(-132px) translateX(4px);opacity:0}}
@keyframes bubRiseShort{0%{transform:translateY(0) translateX(0);opacity:0}8%{opacity:.8}88%{opacity:.34}100%{transform:translateY(-46px) translateX(3px);opacity:0}}
#bootBubFlask{left:calc(var(--boot-x) + 0.087 * var(--boot-w));top:calc(var(--boot-y) + 0.734 * var(--boot-h))}
#bootBubTopLeft{left:calc(var(--boot-x) + 0.11 * var(--boot-w));top:calc(var(--boot-y) + 0.185 * var(--boot-h))}
#bootBubRightTube{left:calc(var(--boot-x) + 0.898 * var(--boot-w));top:calc(var(--boot-y) + 0.318 * var(--boot-h))}
#bootBubTube1{left:calc(var(--boot-x) + 0.853 * var(--boot-w));top:calc(var(--boot-y) + 0.735 * var(--boot-h))}
#bootBubTube2{left:calc(var(--boot-x) + 0.882 * var(--boot-w));top:calc(var(--boot-y) + 0.732 * var(--boot-h))}
#bootBubTube3{left:calc(var(--boot-x) + 0.91 * var(--boot-w));top:calc(var(--boot-y) + 0.73 * var(--boot-h))}
#bootBubTube4{left:calc(var(--boot-x) + 0.938 * var(--boot-w));top:calc(var(--boot-y) + 0.728 * var(--boot-h))}
#bootPlayWrap{position:absolute;left:50%;bottom:calc(var(--sab) + 78px);transform:translateX(-50%)}
#bootCopy{position:absolute;left:0;right:0;bottom:calc(var(--sab) + 14px);z-index:5;margin:0;font-size:10px;font-weight:700;letter-spacing:.2px;color:rgba(255,255,255,.75);text-shadow:0 1px 4px rgba(0,0,0,.8);opacity:.9;text-align:center;padding:0 24px}

#logoWrap{text-align:center;animation:floatY 4s ease-in-out infinite}

/* ===== Animated main-menu intro (plays once per session) ===== */
#splashIntro{position:absolute;inset:0;z-index:50;background:#020103;opacity:0;pointer-events:none;display:none}
#splashIntroBulb{
  position:absolute;left:58%;top:36%;width:16%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(255,226,140,.95) 0%,rgba(255,200,60,.55) 35%,rgba(255,180,40,0) 72%);
  mix-blend-mode:screen;
}
#btnPlayIntroWrap{display:block;width:100%}
#btnPlayIntroWrap #btnPlay{width:100%}
#splash.introPlay #splashIntro{display:block;opacity:1;pointer-events:auto;animation:introOverlayFade .75s ease 1.2s forwards}
#splash.introPlay #splashIntroBulb{animation:introBulbFlicker .7s ease-out .5s forwards}
#splash.introPlay #logoWrap{animation:floatY 4s ease-in-out infinite,introLogoPop .6s ease 1.8s both}
#splash.introPlay #btnPlayIntroWrap{opacity:0;transform:translateY(16px) scale(.92);animation:introBtnPop .5s cubic-bezier(.2,1.4,.4,1) 2.3s forwards}
@keyframes introOverlayFade{from{opacity:1}to{opacity:0}}
@keyframes introBulbFlicker{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
  30%{opacity:.85;transform:translate(-50%,-50%) scale(1.25)}
  50%{opacity:.2;transform:translate(-50%,-50%) scale(.8)}
  70%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes introLogoPop{0%{filter:brightness(1) drop-shadow(0 0 0 rgba(157,123,255,0))}45%{filter:brightness(1.4) drop-shadow(0 0 24px rgba(157,123,255,.8))}100%{filter:brightness(1) drop-shadow(0 0 0 rgba(157,123,255,0))}}
@keyframes introBtnPop{to{opacity:1;transform:translateY(0) scale(1)}}
@media (prefers-reduced-motion: reduce){
  #splash.introPlay #splashIntro,#splash.introPlay #splashIntroBulb{display:none!important;animation:none!important}
  #splash.introPlay #logoWrap{animation:floatY 4s ease-in-out infinite!important}
  #splash.introPlay #btnPlayIntroWrap{opacity:1!important;transform:none!important;animation:none!important}
}
#logoTop{font-size:15px;font-weight:800;letter-spacing:5px;color:var(--cyan);text-shadow:0 0 14px rgba(79,216,255,.8)}
#logoTitle{
  font-size:clamp(44px,13vw,62px);font-weight:900;letter-spacing:1px;line-height:1.02;
  background:linear-gradient(180deg,#ffffff 10%,#b9a6ff 55%,#7c5cff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 0 rgba(40,20,120,.9)) drop-shadow(0 0 26px rgba(157,123,255,.65));
}
#logoSub{margin-top:6px;font-size:14px;font-weight:700;color:var(--dim)}
#splashBtns{display:flex;flex-direction:column;gap:8px;margin-top:3.35vh;width:min(72vw,286px);position:relative;z-index:6}
#splashBtns .btn{padding:10px 10px;font-size:16px;overflow:hidden;background-repeat:no-repeat,no-repeat,no-repeat;background-position:left 8px center,right 8px center,center;background-size:58px auto,58px auto,100% 100%}
#splashBtns #btnPlay{background-image:url("../assets/images/button-doodle-left.svg"),url("../assets/images/button-doodle-right.svg"),linear-gradient(180deg,#43d97c,#1fa855);background-blend-mode:soft-light,soft-light,normal}
#splashBtns #btnNew,#splashBtns #btnLevels{background-image:url("../assets/images/button-doodle-left.svg"),url("../assets/images/button-doodle-right.svg"),linear-gradient(180deg,#6d54e8,#5233c9);background-blend-mode:soft-light,soft-light,normal}
#splashBtns #btnDaily{background-image:url("../assets/images/button-doodle-left.svg"),url("../assets/images/button-doodle-right.svg"),linear-gradient(180deg,#ffc94d,#e6952c);background-blend-mode:soft-light,soft-light,normal;overflow:visible}
#splashBtns #btnCollect{background-image:url("../assets/images/button-doodle-left.svg"),url("../assets/images/button-doodle-right.svg"),linear-gradient(180deg,rgba(126,161,197,.62),rgba(87,119,157,.58));background-blend-mode:soft-light,soft-light,normal}
#einBoxS{
  position:absolute;bottom:calc(var(--sab) - 16px);right:calc(var(--sar) - 18px);
  height:min(51vh,455px);aspect-ratio:468/520;pointer-events:none;
  animation:einIdle 3.6s ease-in-out infinite;z-index:8;
}
#einBoxS .prop{font-size:44px}
#splashBubble{
  position:absolute;left:calc(var(--sal) + 84px);bottom:calc(var(--sab) + 68px);
  width:min(48vw,205px);min-height:52px;box-sizing:border-box;z-index:6;
  display:flex;flex-direction:column;justify-content:center;gap:3px;
  padding:9px 12px 10px;border-radius:16px 16px 5px 16px;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(232,242,255,.97));
  color:#241a4a;border:1px solid rgba(116,99,191,.34);
  box-shadow:0 9px 24px rgba(0,0,0,.42),0 0 18px rgba(79,216,255,.16);
  font-size:11.5px;font-weight:800;line-height:1.32;text-align:left;
  opacity:0;transform:translateY(8px) scale(.94);transform-origin:100% 100%;
  transition:opacity .22s ease,transform .25s cubic-bezier(.34,1.42,.64,1);
  pointer-events:none;
}
#splashBubble.on{opacity:1;transform:translateY(0) scale(1)}
#splashBubble::after{
  content:'';position:absolute;right:-11px;bottom:13px;width:0;height:0;
  border:11px solid transparent;border-left-color:rgba(239,246,255,.98);border-right:0;
}
.splashBubbleWho{font-size:9px;font-weight:1000;letter-spacing:1.3px;color:#735ce8}
#splashBubbleText{display:block}
@media(max-height:700px){
  #splashBubble{left:calc(var(--sal) + 74px);bottom:calc(var(--sab) + 57px);width:min(45vw,170px);min-height:46px;padding:7px 9px 8px;font-size:10.5px}
}
@media(max-width:350px){
  #splashBubble{left:calc(var(--sal) + 68px);width:min(46vw,156px);font-size:10px}
}
#copyLine{position:absolute;bottom:calc(var(--sab) + 6px);left:0;right:0;text-align:center;font-size:10px;letter-spacing:.3px;color:rgba(196,200,232,.8);z-index:1}
#btnAbout{
  position:absolute;left:14px;bottom:calc(var(--sab) + 4px);z-index:2;
  width:32px;height:32px;border-radius:50%;border:1.5px solid rgba(157,123,255,.75);
  background:rgba(124,92,255,.22);color:#e4dcff;box-shadow:0 0 10px rgba(124,92,255,.4);
  font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;
  padding:0;
}
#btnAbout:active{background:rgba(255,255,255,.16);transform:scale(.92)}

/* ---------- list screens (levels / collection) ---------- */
.listHead{
  display:flex;align-items:center;gap:12px;
  padding:calc(var(--sat) + 10px) 14px 10px;
}
.listHead h2{flex:1;text-align:center;font-size:20px;font-weight:900;letter-spacing:1px;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.scrollArea{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 14px calc(var(--sab) + 24px);-webkit-overflow-scrolling:touch;touch-action:pan-y}
#lvScrollTrack{
  position:absolute;right:4px;top:78px;bottom:calc(var(--sab) + 10px);width:4px;
  background:rgba(255,255,255,.08);border-radius:4px;z-index:3;pointer-events:none;
}
#lvScrollThumb{
  position:absolute;left:0;right:0;top:0;border-radius:4px;
  background:linear-gradient(180deg,#9d7bff,#4fd8ff);
  box-shadow:0 0 8px rgba(157,123,255,.7);
  transition:opacity .3s ease;height:20%;
}
#lvGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.lvBtn .speedTag{position:absolute;top:-6px;right:-6px;background:#f0bb42;border-radius:50%;width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;font-size:12px;box-shadow:0 0 8px rgba(240,187,66,.7);border:1.5px solid rgba(0,0,0,.3)}
.lvBtn{
  aspect-ratio:1;border-radius:16px;border:1.5px solid var(--line);
  background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-weight:900;font-size:18px;color:var(--txt);position:relative;
  box-shadow:0 4px 12px rgba(0,0,0,.35);
  transition:transform .08s;
}
.lvBtn:active{transform:scale(.92)}
.lvBtn .lvNum{font-size:18px;line-height:1;font-weight:1000;color:var(--txt);text-shadow:0 1px 4px rgba(0,0,0,.6)}
.lvBtn .lvNum.lockedNum{position:absolute;top:5px;left:0;right:0;font-size:12px;color:rgba(221,216,245,.8);text-shadow:0 1px 3px rgba(0,0,0,.75)}
.lvBtn.lock .lockIcon{margin-top:9px}
.lvBtn .st{font-size:10px;letter-spacing:1px;color:var(--amber);text-shadow:0 0 6px rgba(255,201,77,.7)}
.lvBtn .st .off{color:rgba(255,255,255,.18);text-shadow:none}
.lvBtn.lock{color:var(--dim);background:rgba(12,10,32,.6);box-shadow:none;border-color:rgba(155,132,255,.15)}
.lockIcon{position:relative;width:24px;height:24px;margin:0 auto 2px}
.lockIcon::before{
  content:'';position:absolute;left:50%;top:0;width:13px;height:12px;
  border:3px solid rgba(190,178,230,.65);border-bottom:none;border-radius:9px 9px 0 0;
  transform:translateX(-50%);
}
.lockIcon::after{
  content:'';position:absolute;left:50%;bottom:0;width:22px;height:15px;
  background:linear-gradient(180deg,#a389ff,#6a4fd6);border-radius:5px;
  transform:translateX(-50%);
  box-shadow:0 2px 8px rgba(124,92,255,.55),inset 0 1px 1px rgba(255,255,255,.35);
}
.lockIcon i{position:absolute;left:50%;bottom:4px;width:3px;height:6px;background:rgba(30,15,60,.55);border-radius:2px;transform:translateX(-50%)}
.lvBtn.cur{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(79,216,255,.35),0 0 18px rgba(79,216,255,.5)}
#molGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.molCard{padding:12px 12px 14px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.molCard canvas{width:84px;height:64px}
.molCard .mn{font-weight:900;font-size:14px}
.molCard .mf{font-weight:800;font-size:13px;color:var(--cyan)}
.molCard .mfact{font-size:11.5px;color:var(--dim);line-height:1.45;min-height:3.2em}
.molCard.un{filter:grayscale(1) brightness(.65)}
.molCard.un .mfact{color:transparent;text-shadow:0 0 7px rgba(163,168,212,.9)}
.molCard.mxCompletionFocus{animation:mxCompletionCardFocus 1.25s cubic-bezier(.2,.85,.25,1) 2;outline:2px solid rgba(126,231,255,.8);outline-offset:3px}
@keyframes mxCompletionCardFocus{0%,100%{transform:scale(1);box-shadow:0 8px 24px rgba(0,0,0,.28)}50%{transform:scale(1.035);box-shadow:0 0 0 6px rgba(126,231,255,.13),0 0 28px rgba(126,231,255,.48)}}
.sectionHead{margin:22px 2px 12px;font-size:13px;font-weight:900;letter-spacing:2px;color:var(--cyan);text-shadow:0 0 10px rgba(79,216,255,.5)}
.btn.hof{background:linear-gradient(180deg,#f0bb42,#c98f1a);box-shadow:0 4px 0 #8a5c16,0 0 22px rgba(240,187,66,.4);color:#3a2400}
#btnDuel.duelBtn{
  position:absolute;left:18px;bottom:calc(var(--sab) + 130px);width:58px;height:58px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;border:none;z-index:4;
  color:#fff;background:linear-gradient(90deg,#d93b45 0 49.5%,#2374dc 50.5% 100%);
  box-shadow:0 5px 0 #101932,0 10px 20px rgba(0,0,0,.4),-6px 0 18px rgba(255,70,80,.22),6px 0 18px rgba(45,135,255,.25),inset 0 2px 3px rgba(255,255,255,.45);
  transition:transform .13s cubic-bezier(.34,1.3,.64,1);overflow:hidden;
  animation:trophyFloat 3.4s ease-in-out infinite;
}
#btnDuel.duelBtn::after{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.28),transparent 42%,rgba(0,0,0,.16));pointer-events:none}
#btnDuel.duelBtn:active{transform:scale(.88)}
.duelVs{position:relative;z-index:1;font-size:21px;line-height:1;font-weight:1000;letter-spacing:-1px;text-shadow:0 2px 3px rgba(0,0,0,.65),0 0 9px #fff}
.duelMini{position:relative;z-index:1;margin-top:3px;font-size:9px;font-weight:1000;letter-spacing:1.1px;text-shadow:0 1px 2px rgba(0,0,0,.8)}
@media (max-height:700px){#btnDuel.duelBtn{bottom:calc(var(--sab) + 114px);width:52px;height:52px}.duelVs{font-size:19px}.duelMini{font-size:8px}}

#btnHof.trophyBtn{
  /* Keep the Hall of Fame control below the main menu stack so it never
     covers MY MOLECULES on short iPhone/Android screens. */
  position:absolute;left:18px;bottom:calc(var(--sab) + 54px);width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;border:none;z-index:4;
  background:radial-gradient(circle at 35% 30%,#ffe27a,#f0bb42 55%,#c98f1a 100%);
  box-shadow:0 5px 0 #8a5c16,0 10px 20px rgba(0,0,0,.4),0 0 26px rgba(240,187,66,.55),inset 0 2px 3px rgba(255,255,255,.5);
  transition:transform .13s cubic-bezier(.34,1.3,.64,1);
  animation:trophyFloat 3.4s ease-in-out infinite;
}
#btnHof.trophyBtn:active{transform:scale(.88)}
@media (max-height:700px){#btnHof.trophyBtn{bottom:calc(var(--sab) + 46px);width:52px;height:52px}.trophyIcon{font-size:24px}}
.trophyIcon{font-size:28px;line-height:1;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
@keyframes trophyFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.btn.hof:active{transform:scale(.96) translateY(2px);box-shadow:0 2px 0 #8a5c16}
#hofCert{
  margin-top:10px;padding:26px 20px 22px;border-radius:18px;text-align:center;position:relative;
  background:linear-gradient(160deg,rgba(50,38,10,.88),rgba(15,12,8,.92));
  border:1.5px solid rgba(240,187,66,.55);box-shadow:0 0 30px rgba(240,187,66,.18),inset 0 0 40px rgba(240,187,66,.06);
}
#hofSeal{font-size:44px;filter:drop-shadow(0 0 14px rgba(240,187,66,.7))}
#hofCertTitle{font-size:12px;letter-spacing:3px;color:#f0bb42;font-weight:900;margin-top:6px}
#hofNameRow{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px}
#hofNameInput{
  background:transparent;border:none;border-bottom:2px solid rgba(240,187,66,.5);color:#fff;
  font-size:24px;font-weight:800;text-align:center;font-family:inherit;width:auto;max-width:220px;padding:2px 4px;
}
#hofNameInput:focus{outline:none;border-bottom-color:#f0bb42}
#hofNameEdit{background:none;border:none;font-size:18px;opacity:.75;padding:4px}
#hofRankLine{margin-top:8px;font-size:14px;color:rgba(255,255,255,.75);font-weight:700;letter-spacing:.5px}
#hofChampGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.hofChamp{background:linear-gradient(160deg,rgba(40,30,10,.82),rgba(12,10,8,.88));border-radius:14px;padding:14px 6px;text-align:center;box-shadow:inset 0 0 0 1.5px rgba(240,187,66,.45);transition:transform .15s ease}
.hofChamp .ic{font-size:22px}
.hofChamp .v{font-size:19px;font-weight:900;color:#f0bb42;margin-top:2px}
.hofChamp .l{font-size:9px;letter-spacing:.5px;color:rgba(255,255,255,.6);margin-top:3px;font-weight:700}
#hofStatsGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.hofStat{background:rgba(10,10,16,.75);border-radius:14px;padding:14px 10px;text-align:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);transition:transform .15s ease}
@media (hover:hover){.hofChamp:hover,.hofStat:hover{transform:translateY(-3px)}}
.hofStat .v{font-size:24px;font-weight:900;color:#fff}
.hofStat .l{font-size:10.5px;letter-spacing:1px;color:rgba(255,255,255,.6);margin-top:3px;font-weight:700}
#hofSpeedGrid{display:flex;flex-direction:column;gap:8px}
#hofWorldGrid{display:flex;flex-direction:column;gap:8px}
#hofTopTabs{display:flex;gap:8px;padding:4px 14px 10px}
.hofTopTab{flex:1;padding:11px 8px;border:none;border-radius:14px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.6);font-weight:900;font-size:12.5px;letter-spacing:.3px;box-shadow:inset 0 0 0 1.5px var(--line);transition:transform .13s ease,background .15s ease,color .15s ease}
.hofTopTab.on{background:linear-gradient(180deg,#6d54e8,#5233c9);color:#fff;box-shadow:0 4px 0 #3a20a0,0 6px 14px rgba(0,0,0,.4)}
.hofTopTab:active{transform:scale(.96)}
#hofSubTabs{display:flex;gap:6px;margin-bottom:10px}
.hofSubTab{flex:1;padding:9px 4px;border:none;border-radius:11px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.55);font-weight:800;font-size:10.5px;letter-spacing:.2px;box-shadow:inset 0 0 0 1.5px var(--line);transition:transform .13s ease,background .15s ease,color .15s ease}
.hofSubTab.on{background:rgba(79,216,255,.18);color:#8fe0ff;box-shadow:inset 0 0 0 1.5px rgba(79,216,255,.55)}
.hofSubTab:active{transform:scale(.94)}
#hofPeriodLabel{text-align:center;font-size:11px;font-weight:700;color:var(--dim);margin-bottom:10px}
.hofChampRow{background:linear-gradient(135deg,rgba(255,201,77,.14),rgba(157,123,255,.06));border-radius:12px;padding:10px 14px;margin-bottom:10px;box-shadow:inset 0 0 0 1.5px rgba(255,201,77,.35);opacity:0;transform:translateY(10px);animation:hofRowIn .45s ease forwards}
.hofChampRow .champTitle{font-size:10.5px;font-weight:900;color:#ffd876;margin-bottom:4px;letter-spacing:.2px}
.hofChampRow .champBody{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13.5px;font-weight:800}
.hofChampRow .champBody .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hofChampRow .champBody .sc{color:#4fd8ff;flex:0 0 auto}
#hofSpotlights{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.hofSpotlight{background:linear-gradient(135deg,rgba(255,201,77,.16),rgba(157,123,255,.08));border-radius:14px;padding:12px 14px;box-shadow:inset 0 0 0 1.5px rgba(255,201,77,.4);opacity:0;transform:translateY(8px);animation:hofRowIn .5s ease forwards}
#hofSpotMonth{animation-delay:.08s}
.hofSpotlight .spTitle{font-size:10.5px;font-weight:900;letter-spacing:1px;color:#ffd876;margin-bottom:4px}
.hofSpotlight .spBody{font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:space-between;gap:8px}
.hofSpotlight .spBody.spLoading,.hofSpotlight .spBody.spNone{font-size:12px;font-weight:700;color:var(--dim);justify-content:flex-start}
.hofSpotlight .spName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hofSpotlight .spScore{color:#4fd8ff;flex:0 0 auto}
.hofWorldRow{display:flex;align-items:center;gap:10px;background:rgba(10,10,16,.75);border-radius:12px;padding:11px 14px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);opacity:0;transform:translateY(10px);animation:hofRowIn .45s ease forwards}
.hofWorldRow .rk{width:26px;font-weight:900;color:rgba(255,255,255,.55);font-size:13px;text-align:center}
.hofWorldRow .nm{flex:1;font-weight:800;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hofWorldRow .sc{font-weight:900;color:#4fd8ff;font-size:14px}
.hofWorldRow.me{background:linear-gradient(120deg,rgba(157,123,255,.22),rgba(157,123,255,.06));box-shadow:inset 0 0 0 1.5px rgba(157,123,255,.6)}
.hofWorldRow.top1 .rk{color:#ffd876}
.hofWorldRow.top2 .rk{color:#d9dee8}
.hofWorldRow.top3 .rk{color:#e3a06a}
#hofWorldMsg{text-align:center;font-size:12.5px;font-weight:700;color:var(--dim);padding:16px 10px}
.hofSpeedRow{display:flex;align-items:center;gap:10px;background:rgba(10,10,16,.75);border-radius:12px;padding:12px 16px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);transition:transform .15s ease,background .15s ease;opacity:0;transform:translateY(10px);animation:hofRowIn .45s ease forwards}
.hofSpeedRow .mol{flex:1;font-weight:800;font-size:13px;letter-spacing:.2px}
.hofSpeedRow .time{font-weight:900;color:#4fd8ff;font-size:14px}
.hofSpeedRow.locked{opacity:.4!important;animation:none}
.hofSpeedRow.best{background:linear-gradient(120deg,rgba(255,201,77,.18),rgba(255,201,77,.05));box-shadow:inset 0 0 0 1.5px rgba(255,201,77,.55)}
.hofSpeedRow.best .time{color:#ffc94d}
@keyframes hofRowIn{to{opacity:1;transform:translateY(0)}}
@media (hover:hover){.hofSpeedRow:not(.locked):hover{transform:translateX(4px);background:rgba(24,22,40,.9)}}
#elGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding-bottom:10px}
.elCard{padding:10px 4px 9px;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.elCard .ez{font-size:9px;font-weight:800;color:var(--dim);align-self:flex-start;margin-left:6px}
.elCard .esym{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:16px;margin:1px 0 3px}
.elCard .en{font-size:10px;font-weight:800;line-height:1.2}
.elCard.un{filter:grayscale(1) brightness(.6)}
.elCard.un .en{color:transparent;text-shadow:0 0 6px rgba(163,168,212,.85)}
#achvGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-bottom:24px}
#diplomaGrid{display:flex;flex-direction:column;gap:16px;padding-bottom:24px}
.diplomaCert{
  --dc1:#9aa5b1;--dc2:#5c6570;
  position:relative;padding:22px 18px 20px;border-radius:16px;text-align:center;
  background:linear-gradient(160deg,rgba(20,16,10,.92),rgba(10,8,14,.95));
  border:2px solid var(--dc1);box-shadow:0 0 24px color-mix(in srgb,var(--dc1) 35%,transparent),inset 0 0 0 4px rgba(0,0,0,.35),inset 0 0 0 5px color-mix(in srgb,var(--dc1) 50%,transparent);
}
.diplomaCert::before,.diplomaCert::after{content:'';position:absolute;width:14px;height:14px;border:2px solid var(--dc1);opacity:.8}
.diplomaCert::before{top:8px;left:8px;border-right:none;border-bottom:none}
.diplomaCert::after{bottom:8px;right:8px;border-left:none;border-top:none}
.dcSeal{font-size:38px;filter:drop-shadow(0 0 12px color-mix(in srgb,var(--dc1) 70%,transparent))}
.dcHead{font-size:10px;letter-spacing:2.5px;color:var(--dc1);font-weight:900;margin-top:8px;text-transform:uppercase}
.dcName{font-size:20px;font-weight:900;color:#fff;margin-top:10px;font-style:italic}
.dcSub{font-size:10.5px;color:rgba(255,255,255,.55);margin-top:6px;line-height:1.5}
.dcRank{font-size:17px;font-weight:900;margin-top:8px;color:var(--dc1);text-shadow:0 0 14px color-mix(in srgb,var(--dc1) 60%,transparent)}
.dcRibbon{display:inline-block;margin-top:12px;padding:5px 16px;border-radius:20px;font-size:10.5px;font-weight:800;
  background:color-mix(in srgb,var(--dc1) 25%,transparent);color:var(--dc1);box-shadow:inset 0 0 0 1px var(--dc1)}
.diplomaCert.un{opacity:.55}
.diplomaCert.un .dcSeal{filter:grayscale(1)}
.achvCard{padding:16px 12px 16px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.achvCard .aic{font-size:36px;line-height:1;filter:drop-shadow(0 0 10px rgba(255,201,77,.55))}
.achvCard .an{font-weight:900;font-size:13px}
.achvCard .adesc{font-size:11px;color:var(--dim);line-height:1.4;min-height:2.8em}
.achvCard.un{filter:grayscale(1) brightness(.6)}
.achvCard.un .adesc{color:transparent;text-shadow:0 0 6px rgba(163,168,212,.85)}

/* ---------- game screen ---------- */
#gameScr{z-index:10}
#hud{
  display:flex;align-items:stretch;gap:8px;
  padding:calc(var(--sat) + 8px) 10px 4px;
}
#goalCard{width:122px;min-width:122px;padding:8px 7px 9px;display:flex;flex-direction:column;align-items:center;gap:2px;position:relative;box-shadow:0 12px 32px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1.5px rgba(79,216,255,.4),0 0 18px rgba(79,216,255,.22)}
#goalCard .gt{font-size:10.5px;font-weight:900;letter-spacing:2.5px;color:var(--cyan);text-shadow:0 0 8px rgba(79,216,255,.6)}
#goalCv{width:100px;height:76px}
#goalName{font-size:12.5px;font-weight:900;line-height:1.1;text-align:center}
#goalFor{font-size:13px;font-weight:800;color:var(--amber)}
#goalCard.goalPop{animation:goalPop .85s cubic-bezier(.25,1.4,.4,1)}
@keyframes goalPop{0%{transform:scale(1)}30%{transform:scale(1.12);box-shadow:0 12px 32px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08),0 0 0 2px rgba(79,216,255,.9),0 0 34px rgba(79,216,255,.65)}100%{transform:scale(1)}}
#hudMid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0}
#lvPill{font-size:17px;font-weight:900;letter-spacing:1.5px;text-shadow:0 2px 10px rgba(0,0,0,.7),0 0 14px rgba(255,201,77,.4)}
#starRow{font-size:22px;letter-spacing:5px;line-height:1;color:#ffd876;filter:drop-shadow(0 0 4px rgba(255,201,77,.9)) drop-shadow(0 0 13px rgba(255,180,60,.7))}
#starRow .off{opacity:.18;filter:grayscale(1)}
#movePill{font-size:12.5px;font-weight:800;padding:4px 12px;text-shadow:0 0 10px rgba(255,201,77,.45)}
#duelTimer{display:none;font-size:12px;font-weight:1000;padding:4px 12px;letter-spacing:1px;background:linear-gradient(90deg,rgba(217,59,69,.72),rgba(35,116,220,.72));border-color:rgba(255,255,255,.34);text-shadow:0 1px 4px rgba(0,0,0,.8)}
#duelTimer.on{display:block}
#gameScr.duelP1 #boardFrame{outline:2px solid rgba(255,82,92,.72);outline-offset:3px}
#gameScr.duelP2 #boardFrame{outline:2px solid rgba(67,143,255,.78);outline-offset:3px}
.duelSetupGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.duelSetupGrid label,.duelLevelLabel{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:900;letter-spacing:.6px;color:var(--dim);text-align:left}
.duelSetupGrid input,.duelLevelLabel select{width:100%;box-sizing:border-box;padding:11px 10px;border-radius:12px;border:1.5px solid var(--line);background:rgba(0,0,0,.32);color:#fff;font:800 14px inherit;outline:none}
.duelSetupGrid input:focus,.duelLevelLabel select:focus{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(79,216,255,.16)}
.duelRules{margin:12px 0;padding:11px 12px;border-radius:13px;background:linear-gradient(90deg,rgba(217,59,69,.14),rgba(35,116,220,.14));border:1px solid rgba(255,255,255,.12);font-size:12px;line-height:1.5;color:var(--dim)}
.duelTurnBadge{display:inline-flex;align-items:center;justify-content:center;margin:4px auto 12px;padding:7px 14px;border-radius:999px;font-size:12px;font-weight:1000;letter-spacing:.7px;color:#fff;background:linear-gradient(90deg,#d93b45,#2374dc);box-shadow:0 0 18px rgba(84,138,255,.28)}
.duelStats{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:13px 0}
.duelStat{padding:12px 8px;border-radius:13px;background:rgba(0,0,0,.25);border:1px solid var(--line);text-align:center}
.duelStat.red{border-color:rgba(255,89,99,.55);box-shadow:inset 0 0 18px rgba(217,59,69,.10)}
.duelStat.blue{border-color:rgba(77,148,255,.58);box-shadow:inset 0 0 18px rgba(35,116,220,.11)}
.duelStat b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.duelStat span{display:block;margin-top:6px;font-size:12px;color:var(--dim);line-height:1.45}
.duelWinner{margin:10px 0 2px;font-size:20px;font-weight:1000;color:#ffd876;text-shadow:0 0 14px rgba(255,216,118,.48)}
@media(max-width:390px){.duelSetupGrid{grid-template-columns:1fr}.duelStats{gap:6px}.duelStat{padding:10px 5px}}
#hudRight{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
#coinChip{font-size:13px}
#coinChip.bump{animation:pulse .5s}
#btnGear{font-size:19px}

#boardWrap{flex:1;position:relative;display:flex;align-items:center;justify-content:center;min-height:0;padding:6px 8px;transition:padding .25s ease}
body.nodpad #boardWrap{padding:6px 2px}
:root{
  --board-bg1:rgba(60,40,140,.55);--board-bg2:rgba(20,14,60,.75);
  --board-border:rgba(163,130,255,.55);--board-glow:rgba(124,92,255,.35);
}
body.tier1{--board-bg1:rgba(32,55,140,.55);--board-bg2:rgba(10,18,58,.75);--board-border:rgba(118,165,255,.55);--board-glow:rgba(88,145,255,.35);}
body.tier2{--board-bg1:rgba(88,25,140,.55);--board-bg2:rgba(30,8,58,.75);--board-border:rgba(198,105,255,.55);--board-glow:rgba(168,72,255,.4);}
body.tier3{--board-bg1:rgba(10,78,91,.58);--board-bg2:rgba(3,31,39,.78);--board-border:rgba(86,220,222,.58);--board-glow:rgba(66,210,214,.38);}
body.tier4{--board-bg1:rgba(14,96,66,.58);--board-bg2:rgba(3,39,29,.78);--board-border:rgba(83,226,159,.60);--board-glow:rgba(63,214,145,.40);}
body.tier5{--board-bg1:rgba(19,70,130,.60);--board-bg2:rgba(4,28,69,.80);--board-border:rgba(92,205,244,.62);--board-glow:rgba(70,190,244,.42);}
body.tier6{--board-bg1:rgba(106,30,105,.60);--board-bg2:rgba(43,7,57,.80);--board-border:rgba(244,126,224,.64);--board-glow:rgba(232,96,207,.44);}
body.tier7{--board-bg1:rgba(122,76,14,.60);--board-bg2:rgba(51,29,4,.80);--board-border:rgba(255,202,90,.66);--board-glow:rgba(255,179,61,.46);}
body.tier8{--board-bg1:rgba(137,92,13,.62);--board-bg2:rgba(55,31,3,.82);--board-border:rgba(255,225,112,.72);--board-glow:rgba(255,202,72,.55);}
#boardFrame{
  position:relative;border-radius:22px;padding:7px;
  background:linear-gradient(160deg,var(--board-bg1),var(--board-bg2));
  border:2px solid var(--board-border);
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 18px 40px rgba(0,0,0,.55),0 0 34px var(--board-glow),inset 0 0 22px rgba(0,0,0,.55);
}
@keyframes boardWinZoom{0%{transform:scale(1)}32%{transform:scale(1.035)}58%{transform:scale(1.035)}100%{transform:scale(1)}}
#boardFrame.winzoom{animation:boardWinZoom .7s ease}
#board{display:block;border-radius:15px;touch-action:none}
#actionCol{
  position:absolute;right:4px;top:0;
  display:flex;flex-direction:column;gap:10px;z-index:5;
}
#actionCol .act{
  width:56px;height:56px;border-radius:17px;font-size:23px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
}
#actionCol .act small{font-size:8.5px;font-weight:900;letter-spacing:.5px;opacity:.9}
#btnHint.glow{animation:hintGlow 1.2s ease-in-out infinite}

#bottomBar{
  position:relative;height:186px;flex:none;
  padding:0 8px calc(var(--sab) + 6px);
  transition:height .25s ease;
}
body.nodpad #bottomBar{height:104px}
body.nodpad #dpad{display:none}
body.nodpad #navBtns{left:10px}
#dpad{
  position:absolute;left:10px;bottom:calc(var(--sab) + 12px);
  width:150px;height:150px;border-radius:30px;
  padding:3px;display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,48px);gap:0;
  align-content:center;justify-content:center;
  background:linear-gradient(145deg,rgba(20,18,55,.82),rgba(10,15,42,.78));
  border:1.5px solid rgba(155,132,255,.44);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 10px 26px rgba(0,0,0,.45),inset 0 0 24px rgba(0,0,0,.52),0 0 18px rgba(86,95,255,.12);
  overflow:visible;
}
#dpad.pulse{animation:hintGlow 1.2s ease-in-out infinite}
.dbtn{
  position:relative!important;inset:auto!important;width:44px;height:44px;margin:2px;border:none;border-radius:13px;
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(89,93,185,.16));color:#effcff;font-weight:1000;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 3px 8px rgba(0,0,0,.42),0 0 0 1px rgba(120,226,255,.10);
  transition:transform .06s,background .06s,box-shadow .06s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.mxDpadGlyph{display:block;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI Symbol","Arial Unicode MS",sans-serif;font-size:31px;line-height:1;font-weight:900;color:#eaffff;text-shadow:0 0 7px rgba(89,224,255,.95),0 2px 3px rgba(0,0,0,.6);transform:translateY(-1px)}
.dbtn:active{transform:scale(.86);background:rgba(89,205,255,.42);box-shadow:inset 0 1px 8px rgba(0,0,0,.28),0 0 16px rgba(89,224,255,.58)}
#dU{grid-column:2;grid-row:1}#dL{grid-column:1;grid-row:2}#dR{grid-column:3;grid-row:2}#dD{grid-column:2;grid-row:3}
#dC{position:relative!important;left:auto!important;top:auto!important;grid-column:2;grid-row:2;align-self:center;justify-self:center;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#b9f8ff 0 10%,#7d6cff 38%,#4027a8 76%);box-shadow:0 0 12px rgba(121,112,255,.95),inset 0 0 6px rgba(255,255,255,.32)}

#navBtns{
  z-index:7;
  position:absolute;left:166px;bottom:calc(var(--sab) + 14px);
  display:flex;gap:7px;
  transition:left .25s ease;
}
.navB{
  width:52px;height:64px;border-radius:15px;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:21px;
}
.navB small{font-size:7.3px;font-weight:900;letter-spacing:.2px}
#molBadge,#achvBadge{
  position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;
  background:linear-gradient(180deg,#ff7b86,#e6394b);border-radius:999px;
  font-size:11px;font-weight:900;display:none;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.5);
}

#einWrap{position:absolute;right:calc(var(--sar) - 2px);bottom:calc(var(--sab) - 12px);width:180px;pointer-events:none;z-index:7}
#einBoxG{position:relative;width:150px;margin-left:auto;transform-origin:70% 95%}
.einBox{will-change:transform}
.einBox.einAuraBlue .einImg{animation:einBreathe 3.6s ease-in-out infinite,einAuraBluePulse 1.1s ease-in-out}
@keyframes einAuraBluePulse{
  0%{filter:drop-shadow(0 10px 16px rgba(0,0,0,.55)) drop-shadow(0 0 0 rgba(120,200,255,0))}
  40%{filter:drop-shadow(0 10px 16px rgba(0,0,0,.55)) drop-shadow(0 0 20px rgba(120,200,255,.75))}
  100%{filter:drop-shadow(0 10px 16px rgba(0,0,0,.55)) drop-shadow(0 0 0 rgba(120,200,255,0))}
}
@media (prefers-reduced-motion:reduce){.einBox.einAuraBlue .einImg{animation:none!important}}
.einImg{display:block;width:100%;height:100%;filter:drop-shadow(0 10px 16px rgba(0,0,0,.55));pointer-events:none;transform-origin:center bottom}
@keyframes einBreathe{0%,100%{scale:1}50%{scale:1.018 1.032}}
@media (prefers-reduced-motion:reduce){.einImg{animation:none!important}}

.lid.half{transform:scaleY(.5);opacity:1}
/* The original round blink is restored at 92% size, with its centre preserved. */
.eyeW.eye2{left:61.34%;top:24.02%;width:7.82%;height:7.27%}

/* --- Dr. E: classic round blink, one step smaller --- */
.einFx{position:absolute;inset:0;pointer-events:none;z-index:20;overflow:visible}
.eyeW{position:absolute;left:49.67%;top:23.33%;width:8.46%;height:7.54%;overflow:visible;border-radius:50%}
.lid{position:absolute;left:-14%;top:-16%;width:128%;height:124%;background:linear-gradient(180deg,#ffbf86,#e9a76e);border-bottom:2px solid #a8662d;border-radius:46% 46% 50% 50%;transform:scaleY(0);transform-origin:50% 6%;transition:transform .07s ease-in;opacity:0}
.lid.on{transform:scaleY(1);opacity:1}
.tongue{z-index:30;position:absolute;left:56.9%;top:42.7%;width:8.4%;height:0;opacity:0;background:linear-gradient(180deg,#ff8da0,#d94b63);border:1.5px solid #9f2d43;border-top:none;border-radius:0 0 48% 48%/0 0 100% 100%;transform:translate(-50%,-1px);transform-origin:top center;transition:height .18s ease-out,opacity .08s linear;box-shadow:inset 0 -2px 3px rgba(0,0,0,.20),0 1px 2px rgba(0,0,0,.24);pointer-events:none}
.tongue::after{content:'';position:absolute;left:44%;top:8%;width:12%;height:70%;background:rgba(150,30,50,.55);border-radius:99px}
.tongue.out{opacity:1;height:9.2%;animation:none}
.prop{position:absolute;left:50%;top:-5%;font-size:26px;opacity:0;transform:translateY(10px);transition:opacity .25s,transform .25s;filter:drop-shadow(0 3px 5px rgba(0,0,0,.5))}
.prop.on{opacity:1;transform:translateY(0);animation:floatY 1.5s ease-in-out infinite}
#bubble.shk{animation:bubShake .5s ease-in-out 2}
#bubble.glow{box-shadow:0 8px 22px rgba(0,0,0,.5),0 0 26px rgba(255,210,63,.95)}
#glow{position:fixed;inset:0;z-index:55;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 42%,rgba(255,216,120,.55),rgba(255,216,120,0) 62%)}
#levelTransition{position:fixed;inset:0;z-index:78;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 44%,#241a4a,#0a0818 78%);transition:opacity .17s ease}
#levelTransition.on{opacity:1}
#glow.on{animation:glowFlash 1.25s ease-out}
.vrow{display:flex;align-items:center;gap:10px;padding:9px 2px;font-weight:800;font-size:14px}
.vrow.audioRow{display:grid;grid-template-columns:78px minmax(0,1fr) 44px;align-items:center;column-gap:8px;padding:8px 2px}
.vrow.audioRow .vl{width:auto;text-align:left;white-space:nowrap}
.vrow.audioRow input[type=range]{width:100%;min-width:0;accent-color:var(--neon);height:34px;touch-action:pan-x;-webkit-user-select:auto;user-select:auto;cursor:pointer}
.mtSpacer{display:block;width:44px;height:44px}
.vrow .mt{width:44px;height:44px;border-radius:13px;font-size:18px;line-height:1;padding:0;border:1.5px solid rgba(157,123,255,.52);background:rgba(80,65,143,.32);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 4px 10px rgba(0,0,0,.22)}
.vrow .mt:active{transform:translateY(1px) scale(.94);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 2px 6px rgba(0,0,0,.2)}
.vrow .mt.off{background:rgba(104,62,82,.28);border-color:rgba(255,92,105,.56);box-shadow:inset 0 0 0 1px rgba(255,92,105,.08),0 4px 10px rgba(0,0,0,.2);filter:none;opacity:1}
#modalBox.musicModal{max-height:min(92vh,760px);display:flex;flex-direction:column;overflow:hidden;padding:20px 15px 15px}
#modalBox.musicModal h3{margin-bottom:2px}
.mtlist{height:min(61vh,555px);min-height:210px;overflow-y:scroll;overflow-x:hidden;display:flex;flex-direction:column;gap:9px;margin:10px 0 13px;padding:3px 8px 8px 2px;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#9d7bff rgba(255,255,255,.10)}
.mtlist::-webkit-scrollbar{width:9px}
.mtlist::-webkit-scrollbar-track{background:rgba(255,255,255,.08);border-radius:999px}
.mtlist::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#c0a9ff,#6d54e8);border-radius:999px;border:2px solid rgba(20,16,52,.65)}
.mtlist::-webkit-scrollbar-thumb:active{background:linear-gradient(180deg,#d8ccff,#9078f2)}
.mtrow{display:flex;align-items:center;gap:11px;min-height:54px;padding:7px 9px;border-radius:16px;background:linear-gradient(135deg,rgba(157,123,255,.12),rgba(79,216,255,.06));box-shadow:inset 0 0 0 1.25px rgba(157,123,255,.24),0 5px 14px rgba(0,0,0,.18);transition:transform .14s ease,box-shadow .18s ease,background .18s ease}
.mtrow.playing{background:linear-gradient(135deg,rgba(61,182,242,.23),rgba(157,123,255,.16));box-shadow:inset 0 0 0 1.5px rgba(79,216,255,.62),0 0 18px rgba(79,216,255,.18)}
.mtplay{width:41px;height:41px;min-height:41px;flex:0 0 41px;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#735ce8,#4f35bb);color:#fff;box-shadow:0 4px 0 #38248f,0 7px 14px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.35);font:900 13px/1 inherit;touch-action:manipulation;transition:transform .12s ease,box-shadow .15s ease}
.mtplay:active{transform:translateY(2px) scale(.94);box-shadow:0 1px 0 #38248f,0 3px 8px rgba(0,0,0,.28)}
.mtplay.playing{background:linear-gradient(180deg,#4fd8ff,#238ed3);box-shadow:0 4px 0 #176599,0 0 18px rgba(79,216,255,.42),inset 0 1px 0 rgba(255,255,255,.45)}
.mticon{display:block;transform:translateX(1px);white-space:nowrap}
.mtplay.playing .mticon{transform:none;font-size:11px;letter-spacing:-1px}
.mtname{flex:1;min-width:0;font-weight:850;font-size:14.5px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f4f2ff}
.mtno{flex:none;min-width:31px;padding:5px 7px;border-radius:9px;background:rgba(255,255,255,.08);color:#aeb5df;font-size:10.5px;font-weight:900;letter-spacing:.7px;text-align:center}
.mtrow.playing .mtname{color:#aeeeff;text-shadow:0 0 10px rgba(79,216,255,.28)}
.mtrow.playing .mtno{color:#fff;background:rgba(79,216,255,.16)}
.mtclose{width:100%}
.mt.off{filter:grayscale(1) brightness(.6)}

#bubble{
  position:absolute;right:58px;bottom:56px;width:168px;z-index:20;
  background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(244,248,255,.98));color:#241a4a;
  border:1px solid rgba(126,180,255,.42);border-radius:16px;padding:10px 12px 13px;
  font-size:clamp(12.5px,3.25vw,14px);font-weight:760;line-height:1.38;text-align:left;
  box-shadow:0 9px 25px rgba(0,0,0,.52),0 0 0 1px rgba(255,255,255,.7) inset;
  opacity:0;transform:scale(.72) translateY(12px);transform-origin:80% 100%;
  transition:opacity .22s,transform .22s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;cursor:pointer;touch-action:manipulation;overflow:hidden;
}
#bubble.on{opacity:1;transform:scale(1) translateY(0);pointer-events:auto}
#bubble.long{width:min(56vw,245px);max-height:min(31vh,220px);overflow:auto;padding-bottom:15px}
#bubbleText{display:block;overflow-wrap:anywhere}
#bubbleTimer{position:absolute;left:0;bottom:0;height:3px;width:100%;transform-origin:left center;background:linear-gradient(90deg,#4fd8ff,#9d7bff,#ffd76a);opacity:.82}
#bubble.on #bubbleTimer{animation:bubbleReadTime var(--bubble-duration,4s) linear forwards}
#bubble:active{transform:scale(.97) translateY(1px)}
@keyframes bubbleReadTime{from{transform:scaleX(1)}to{transform:scaleX(0)}}
#bubble::after{
  content:'';position:absolute;right:-9px;bottom:16px;
  border:9px solid transparent;border-left-color:rgba(255,255,255,.96);
  border-right:0;
}

/* ---------- banner ---------- */
#lightRays{
  position:fixed;left:50%;top:48%;width:130vmax;height:130vmax;
  transform:translate(-50%,-50%) rotate(0deg) scale(.3);
  background:conic-gradient(from 0deg,transparent 0deg,rgba(255,255,255,.22) 4deg,transparent 10deg,transparent 42deg,rgba(255,255,255,.16) 46deg,transparent 52deg,transparent 92deg,rgba(255,255,255,.2) 96deg,transparent 102deg,transparent 132deg,rgba(255,255,255,.14) 136deg,transparent 142deg,transparent 182deg,rgba(255,255,255,.22) 186deg,transparent 192deg,transparent 222deg,rgba(255,255,255,.16) 226deg,transparent 232deg,transparent 272deg,rgba(255,255,255,.2) 276deg,transparent 282deg,transparent 312deg,rgba(255,255,255,.14) 316deg,transparent 322deg,transparent 360deg);
  opacity:0;pointer-events:none;z-index:45;mix-blend-mode:screen;
  transition:opacity .5s ease,transform 1.5s cubic-bezier(.2,.8,.3,1);
}
#lightRays.on{opacity:1;transform:translate(-50%,-50%) rotate(30deg) scale(1);}
#bannerWrap{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;flex-direction:column;pointer-events:none}
#bannerWrap.on{display:flex}
#bannerWrap.leaving{animation:mxBannerWrapOut .34s cubic-bezier(.4,0,.6,1) both}
#bannerDiscover{margin-top:11px;padding:8px 13px;border-radius:999px;border:1px solid rgba(126,231,255,.52);background:rgba(10,18,39,.68);color:#c9f7ff;font:900 clamp(10px,2.8vw,12px)/1.1 system-ui,-apple-system,sans-serif;letter-spacing:.42px;box-shadow:0 8px 24px rgba(0,0,0,.28),0 0 18px rgba(79,216,255,.2);text-shadow:0 1px 7px rgba(0,0,0,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:auto;cursor:pointer;animation:fadeUp .5s .58s both}
#bannerDiscover:active{transform:scale(.96);filter:brightness(1.16)}
#bannerDiscover[hidden]{display:none!important}
@keyframes mxBannerWrapOut{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-13px) scale(.97)}}
#banner.newDiscovery{animation:discoveryPop 1s cubic-bezier(.2,1.4,.4,1)}
@keyframes discoveryPop{
  0%{transform:scale(.6) rotate(-10deg);filter:brightness(1.7) saturate(1.5)}
  55%{transform:scale(1.12) rotate(5deg)}
  100%{transform:scale(1) rotate(0);filter:brightness(1) saturate(1)}
}
#banner{
  max-width:min(94vw,760px);font-size:clamp(30px,9.4vw,62px);line-height:.98;
  font-weight:1000;letter-spacing:1.2px;
  background:linear-gradient(180deg,#fff,#ffd76a 60%,#ff9d3c);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 5px 0 rgba(90,40,0,.8)) drop-shadow(0 0 30px rgba(255,200,80,.9));
  animation:bannerPop .7s cubic-bezier(.2,1.6,.4,1);
  text-align:center;padding:0 12px;text-wrap:balance;
}
#bannerWrap.longName #banner{font-size:clamp(25px,7.4vw,48px);line-height:1.02}
#bannerSub{
  margin-top:10px;font-size:clamp(25px,8vw,42px);font-weight:1000;letter-spacing:3px;color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.82),0 0 18px rgba(157,123,255,.9);
  animation:fadeUp .58s .18s both;
}
#bannerFact{
  margin-top:10px;max-width:min(86vw,600px);padding:8px 13px;border-radius:14px;
  font-size:clamp(12px,3.6vw,16px);line-height:1.25;font-weight:800;letter-spacing:.2px;color:#f7fbff;
  text-align:center;text-wrap:balance;background:rgba(8,10,26,.48);
  border:1px solid rgba(255,255,255,.24);box-shadow:0 8px 26px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.12);
  text-shadow:0 2px 9px rgba(0,0,0,.9);backdrop-filter:blur(5px);
  animation:fadeUp .58s .34s both;
}

/* V8.5.38 — molecule-specific reaction identity. The existing banner copy is kept,
   but its light signature now matches the molecule's real effect family. */
#bannerWrap[data-fx="splash"] #banner{background:linear-gradient(180deg,#ffffff,#7ee8ff 54%,#2498ff);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 5px 0 rgba(0,48,112,.75)) drop-shadow(0 0 30px rgba(64,199,255,.95))}
#bannerWrap[data-fx="smoke"] #banner{background:linear-gradient(180deg,#ffffff,#d9e2ea 54%,#8796a6);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 5px 0 rgba(35,43,55,.8)) drop-shadow(0 0 28px rgba(214,226,238,.82))}
#bannerWrap[data-fx="flame"] #banner{background:linear-gradient(180deg,#fff7b2,#ffbd45 48%,#ff552f);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 5px 0 rgba(100,25,0,.82)) drop-shadow(0 0 32px rgba(255,104,41,.95))}
#bannerWrap[data-fx="crys"] #banner{background:linear-gradient(180deg,#ffffff,#bff5ff 48%,#87a8ff);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 5px 0 rgba(37,50,112,.76)) drop-shadow(0 0 32px rgba(157,225,255,.92))}
#bannerWrap[data-fx="spark"] #banner{background:linear-gradient(180deg,#ffffff,#e8ff72 48%,#70e64a);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 5px 0 rgba(38,85,18,.82)) drop-shadow(0 0 32px rgba(188,255,83,.95))}
#bannerWrap[data-fx="bub"] #banner,#bannerWrap[data-fx="drip"] #banner{background:linear-gradient(180deg,#ffffff,#9defff 50%,#5c84ff);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 5px 0 rgba(26,54,117,.8)) drop-shadow(0 0 30px rgba(103,212,255,.92))}
#bannerWrap[data-fx="glit"] #banner{background:linear-gradient(180deg,#ffffff,#ffe98d 48%,#bd86ff);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 5px 0 rgba(72,38,111,.8)) drop-shadow(0 0 31px rgba(216,164,255,.92))}
#bannerWrap[data-fx="pop"] #banner,#bannerWrap[data-fx="squig"] #banner{background:linear-gradient(180deg,#ffffff,#ffca78 48%,#ff699e);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 5px 0 rgba(104,37,63,.8)) drop-shadow(0 0 30px rgba(255,129,177,.9))}
#bannerWrap[data-fx] #bannerSub{max-width:min(88vw,620px);text-align:center}
#bannerWrap[data-fx="splash"] #bannerFact,#bannerWrap[data-fx="bub"] #bannerFact,#bannerWrap[data-fx="drip"] #bannerFact{border-color:rgba(105,222,255,.56)}
#bannerWrap[data-fx="smoke"] #bannerFact{border-color:rgba(217,226,234,.48)}
#bannerWrap[data-fx="flame"] #bannerFact{border-color:rgba(255,160,65,.58)}
#bannerWrap[data-fx="crys"] #bannerFact{border-color:rgba(183,236,255,.62)}
#bannerWrap[data-fx="spark"] #bannerFact{border-color:rgba(206,255,104,.58)}
#bannerWrap[data-fx="glit"] #bannerFact{border-color:rgba(224,183,255,.56)}

/* ---------- nobel finale ---------- */
#nobelWrap{
  position:fixed;inset:0;z-index:75;display:none;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 42%,rgba(70,40,0,.55),rgba(6,4,22,.92) 68%);
  text-align:center;padding:0 24px;
}
#nobelWrap.on{display:flex}
#nobelGlow{
  position:absolute;width:70vw;height:70vw;max-width:520px;max-height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,210,100,.55),rgba(255,210,100,0) 70%);
  animation:nobelPulse 1.8s ease-in-out infinite;
}
@keyframes nobelPulse{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.18);opacity:1}}
#nobelTrophy{
  font-size:clamp(80px,26vw,150px);line-height:1;position:relative;
  filter:drop-shadow(0 0 30px rgba(255,201,77,.95)) drop-shadow(0 10px 20px rgba(0,0,0,.6));
  animation:nobelTrophyPop 1s cubic-bezier(.2,1.6,.4,1) both, nobelBob 2.2s ease-in-out .9s infinite;
}
@keyframes nobelTrophyPop{0%{transform:scale(0) rotate(-25deg);opacity:0}65%{transform:scale(1.2) rotate(8deg);opacity:1}100%{transform:scale(1) rotate(0)}}
@keyframes nobelBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(2deg)}}
#rankUpWrap{
  position:fixed;inset:0;z-index:75;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 42%,rgba(40,20,70,.55),rgba(6,4,22,.92) 68%);
  text-align:center;padding:0 24px;
  opacity:0;pointer-events:none;transition:opacity 1s ease;
}
#rankUpWrap.on{opacity:1;pointer-events:auto}
#rankUpGlow{
  position:absolute;width:65vw;height:65vw;max-width:480px;max-height:480px;border-radius:50%;
  background:radial-gradient(circle,rgba(157,123,255,.5),rgba(157,123,255,0) 70%);
  animation:nobelPulse 1.8s ease-in-out infinite;
}
#rankUpIcon{
  width:clamp(90px,26vw,150px);height:clamp(90px,26vw,150px);position:relative;
  animation:nobelTrophyPop .9s cubic-bezier(.2,1.6,.4,1) both, nobelBob 2.2s ease-in-out .9s infinite;
}
.rbRing{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from -40deg,var(--rb-c1),var(--rb-c2) 20%,var(--rb-c3) 45%,var(--rb-c2) 70%,var(--rb-c1) 90%,var(--rb-c2));
  box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 40px var(--rb-glow);
}
.rbFace{
  position:absolute;inset:9%;border-radius:50%;
  background:radial-gradient(circle at 35% 28%,var(--rb-face1),var(--rb-face2) 45%,var(--rb-face3) 90%);
  box-shadow:inset 0 3px 6px rgba(255,255,255,.6),inset 0 -6px 10px rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;
}
.rbGlyph{width:42%;height:42%;background:var(--rb-glyph);clip-path:var(--rb-shape);filter:drop-shadow(0 1px 1px rgba(255,255,255,.25))}
.rbRibbon{
  position:absolute;top:-11%;left:50%;transform:translateX(-50%);
  width:26%;height:20%;background:linear-gradient(180deg,#a389ff,#6a4fd6);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);box-shadow:0 2px 6px rgba(0,0,0,.4);
}
#rankUpIcon.rb0{--rb-c1:#e2e6ec;--rb-c2:#a8b2bd;--rb-c3:#7e8894;--rb-glow:rgba(163,178,196,.4);--rb-face1:#f3f5f8;--rb-face2:#c3cbd4;--rb-face3:#8a94a0;--rb-glyph:#4a5563;--rb-shape:polygon(35% 0,65% 0,65% 55%,90% 100%,10% 100%,35% 55%)}
#rankUpIcon.rb1{--rb-c1:#cfe4ff;--rb-c2:#5ba3ec;--rb-c3:#3d76c0;--rb-glow:rgba(91,163,236,.5);--rb-face1:#eaf5ff;--rb-face2:#7fc0f5;--rb-face3:#2f6bb8;--rb-glyph:#0e3a63;--rb-shape:circle(50% at 50% 50%)}
#rankUpIcon.rb2{--rb-c1:#ecd6ff;--rb-c2:#bd68ec;--rb-c3:#8f42c0;--rb-glow:rgba(189,104,236,.5);--rb-face1:#f6e9ff;--rb-face2:#d191f5;--rb-face3:#7c35a8;--rb-glyph:#3a1052;--rb-shape:polygon(50% 0%,100% 50%,50% 100%,0% 50%)}
#rankUpIcon.rb3{--rb-c1:#c6f2f7;--rb-c2:#3ecbdc;--rb-c3:#27a0ae;--rb-glow:rgba(62,203,220,.5);--rb-face1:#e3fbfd;--rb-face2:#7fe0ea;--rb-face3:#1c8290;--rb-glyph:#063a40;--rb-shape:polygon(50% 0,90% 20%,90% 80%,50% 100%,10% 80%,10% 20%)}
#rankUpIcon.rb4{--rb-c1:#d6ffec;--rb-c2:#4ade9a;--rb-c3:#188c5d;--rb-glow:rgba(74,222,154,.55);--rb-face1:#edfff6;--rb-face2:#79e9b3;--rb-face3:#16784f;--rb-glyph:#063d29;--rb-shape:polygon(50% 0,65% 30%,100% 35%,75% 60%,82% 100%,50% 80%,18% 100%,25% 60%,0 35%,35% 30%)}
#rankUpIcon.rb5{--rb-c1:#d7f5ff;--rb-c2:#56c8f2;--rb-c3:#277da3;--rb-glow:rgba(86,200,242,.58);--rb-face1:#effbff;--rb-face2:#85d9f5;--rb-face3:#226c8d;--rb-glyph:#08394e;--rb-shape:polygon(10% 15%,90% 15%,90% 85%,10% 85%,10% 65%,35% 50%,10% 35%)}
#rankUpIcon.rb6{--rb-c1:#ffe0fa;--rb-c2:#ef79dc;--rb-c3:#a13d91;--rb-glow:rgba(239,121,220,.60);--rb-face1:#fff1fc;--rb-face2:#f29be4;--rb-face3:#8c357f;--rb-glyph:#4f1747;--rb-shape:polygon(50% 0,62% 35%,100% 50%,62% 65%,50% 100%,38% 65%,0 50%,38% 35%)}
#rankUpIcon.rb7{--rb-c1:#fff0bd;--rb-c2:#ffc85a;--rb-c3:#b47718;--rb-glow:rgba(255,200,90,.62);--rb-face1:#fff8df;--rb-face2:#ffd77c;--rb-face3:#a46a14;--rb-glyph:#5a3500;--rb-shape:polygon(50% 0,62% 31%,96% 35%,70% 57%,78% 92%,50% 72%,22% 92%,30% 57%,4% 35%,38% 31%)}
#rankUpIcon.rb8{--rb-c1:#fffbe0;--rb-c2:#ffdf72;--rb-c3:#c98a12;--rb-glow:rgba(255,218,92,.72);--rb-face1:#fffdf0;--rb-face2:#ffe684;--rb-face3:#c9860f;--rb-glyph:#4a2c00;--rb-shape:polygon(20% 15%,80% 15%,72% 58%,60% 72%,68% 100%,32% 100%,40% 72%,28% 58%)}
#rankUpTitle2{
  position:relative;margin-top:14px;font-size:clamp(24px,7vw,38px);font-weight:900;letter-spacing:1px;
  background:linear-gradient(180deg,#e4d6ff,#9d7bff);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 4px 24px rgba(157,123,255,.5);
}
#rankUpName{
  position:relative;margin-top:6px;font-size:clamp(18px,5vw,24px);font-weight:800;color:#fff;
}
#rankUpQuote{
  position:relative;margin-top:14px;max-width:320px;font-size:14px;color:#c8c3e8;font-style:italic;
}
#nobelTitle{
  position:relative;margin-top:18px;font-size:clamp(24px,7.5vw,38px);font-weight:900;letter-spacing:1.5px;
  background:linear-gradient(180deg,#fff,#ffd876 55%,#ff9d3c);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 0 rgba(90,40,0,.8)) drop-shadow(0 0 26px rgba(255,201,77,.8));
  animation:fadeUp .5s .5s both;
}
#nobelSub{
  position:relative;margin-top:10px;font-size:14px;font-weight:700;color:#e7e2ff;max-width:320px;
  text-shadow:0 2px 8px rgba(0,0,0,.7);animation:fadeUp .5s .7s both;
}

/* ---------- modal ---------- */
#modal{position:absolute;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;background:rgba(6,4,22,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .2s ease}
#modal.on{opacity:1;pointer-events:auto}
#modal #modalBox{transform:scale(.9);transition:transform .28s cubic-bezier(.2,1.4,.4,1)}
#modal.on #modalBox{transform:scale(1)}
#modal.on{display:flex}
#modalBox{width:min(86vw,340px);padding:22px 18px 18px;text-align:center;animation:modalIn .38s cubic-bezier(.2,1.5,.5,1)}
#modalBox h3{font-size:22px;font-weight:900;letter-spacing:1px;margin-bottom:4px}
#modalBox .msub{color:var(--dim);font-weight:700;font-size:13.5px;margin-bottom:10px}
#modalBox .mstars{font-size:44px;letter-spacing:8px;margin:8px 0 4px;min-height:52px}
#modalBox .mstars span{display:inline-block;opacity:0;transform:scale(0)}
#modalBox .mstars span.pop{animation:starPop .45s cubic-bezier(.2,1.8,.5,1) both}
#modalBox .mstars span.pop:nth-child(1){animation-delay:.1s}
#modalBox .mstars span.pop:nth-child(2){animation-delay:.43s}
#modalBox .mstars span.pop:nth-child(3){animation-delay:.76s}
#modalBox .mstars span.off{opacity:.16;transform:scale(1);filter:grayscale(1)}
#modalBox .mcoins{font-size:17px;font-weight:900;color:#fff;margin-bottom:10px;text-shadow:0 0 10px rgba(255,201,77,.8);display:flex;align-items:center;justify-content:center;gap:6px}
#modalBox .mrow{display:flex;flex-direction:column;gap:10px;margin-top:8px}
#modalBox .btn{padding:14px 10px;font-size:16px}
@media (max-height:650px){#modalBox.musicModal{max-height:96vh;padding-top:14px;padding-bottom:11px}.mtlist{height:57vh;min-height:160px;margin:6px 0 9px}.mtrow{gap:8px;min-height:48px;padding:5px 8px}.mtplay{width:37px;height:37px;min-height:37px;flex-basis:37px}.mtname{font-size:13.5px}}
.togRow{display:flex;align-items:center;justify-content:space-between;padding:12px 6px;font-weight:800;font-size:15px}
.tog{width:56px;height:32px;border-radius:999px;border:none;background:#3a3564;position:relative;transition:background .2s}
.tog::after{content:'';position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.tog.on{background:var(--green)}
.tog.on::after{left:27px}

/* ---------- rotate overlay ---------- */
#rotate{position:fixed;inset:0;z-index:99;background:var(--ink);display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px;font-weight:900;font-size:18px;text-align:center;padding:20px}
#rotate span{font-size:56px;animation:rot 2s ease-in-out infinite}
@media (orientation:landscape) and (hover:none){#rotate{display:flex}}

/* ---------- keyframes ---------- */
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes einIdle{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-1.2deg)}}
@keyframes einTalk{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(2deg) translateY(-3px)}}
@keyframes einHappy{0%,100%{transform:translateY(0) rotate(-2deg) scale(1)}50%{transform:translateY(-16px) rotate(3deg) scale(1.05)}}
@keyframes einSad{0%,100%{transform:rotate(0) translateY(0)}50%{transform:rotate(-4deg) translateY(4px)}}
@keyframes bannerPop{0%{transform:scale(.2) rotate(-8deg);opacity:0}60%{transform:scale(1.15) rotate(2deg)}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes modalIn{from{opacity:0;transform:scale(.7) translateY(30px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes starPop{0%{opacity:0;transform:scale(0) rotate(-40deg);filter:drop-shadow(0 0 0 rgba(255,214,110,0))}55%{filter:drop-shadow(0 0 14px rgba(255,214,110,.95))}70%{opacity:1;transform:scale(1.4) rotate(8deg)}100%{opacity:1;transform:scale(1) rotate(0);filter:drop-shadow(0 0 4px rgba(255,214,110,.5))}}
@keyframes pulse{0%,100%{transform:scale(1)}40%{transform:scale(1.25)}}
@keyframes hintGlow{0%,100%{box-shadow:0 5px 0 #145a9e,0 0 8px rgba(79,216,255,.4)}50%{box-shadow:0 5px 0 #145a9e,0 0 26px rgba(79,216,255,1)}}
@keyframes rot{0%,100%{transform:rotate(0)}50%{transform:rotate(90deg)}}
@keyframes einShake{0%,100%{transform:rotate(0)}20%{transform:rotate(-6deg)}40%{transform:rotate(5deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(3deg)}}
@keyframes einJump{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-26px) scale(1.06) rotate(2deg)}60%{transform:translateY(-19px) scale(1.05) rotate(-2deg)}}
@keyframes einDance{0%,100%{transform:rotate(-6deg) translateY(0) scale(1.02)}50%{transform:rotate(6deg) translateY(-13px) scale(1.02)}}
@keyframes einTiltL{0%,100%{transform:rotate(0)}40%{transform:rotate(-5deg)}}
@keyframes einTiltR{0%,100%{transform:rotate(0)}40%{transform:rotate(5deg)}}
@keyframes tongueWig{0%,100%{transform:rotate(0)}50%{transform:rotate(9deg)}}
@keyframes bubShake{0%,100%{transform:scale(1) rotate(0)}25%{transform:scale(1.02) rotate(-2deg)}75%{transform:scale(1.02) rotate(2deg)}}
@keyframes glowFlash{0%{opacity:0}22%{opacity:1}100%{opacity:0}}
@keyframes einNod{0%,100%{transform:rotate(0) translateY(0)}30%{transform:rotate(4deg) translateY(4px)}60%{transform:rotate(-1deg)}80%{transform:rotate(3deg) translateY(3px)}}
@keyframes einHop{0%,100%{transform:translateY(0)}40%{transform:translateY(-11px) rotate(-2deg)}}
@keyframes einSpin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(200deg) scale(.92)}100%{transform:rotate(360deg) scale(1)}}
@keyframes einEnter{from{transform:translateX(130%) rotate(8deg)}to{transform:translateX(0) rotate(0)}}
@keyframes einLaugh{0%,100%{transform:translateY(0) rotate(0) scale(1)}15%{transform:translateY(-5px) rotate(-2deg) scale(1.03)}30%{transform:translateY(0) rotate(2deg)}45%{transform:translateY(-5px) rotate(-2deg) scale(1.03)}60%{transform:translateY(0) rotate(2deg)}80%{transform:translateY(-3px) rotate(-1deg)}}
@keyframes einWag{0%,100%{transform:rotate(0) translateX(0)}20%{transform:rotate(-4deg) translateX(-2px)}40%{transform:rotate(4deg) translateX(2px)}60%{transform:rotate(-4deg) translateX(-2px)}80%{transform:rotate(3deg) translateX(1px)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001s !important;transition-duration:.001s !important}}

/* ---------- first-time tutorial overlay ---------- */
#tutorialDialogue{position:absolute;left:14px;right:14px;bottom:calc(var(--sab) + 14px);z-index:64;
  display:flex;align-items:flex-end;gap:10px;pointer-events:none}
#tutorialEinFace{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 15%;
  box-shadow:0 0 0 3px rgba(157,123,255,.55),0 6px 16px rgba(0,0,0,.5);flex:0 0 auto;background:#1a1533}
#tutorialBubble{flex:1;background:rgba(255,255,255,.98);color:#241a4a;border-radius:16px 16px 16px 4px;
  padding:12px 14px;font-size:14px;font-weight:800;line-height:1.35;box-shadow:0 8px 22px rgba(0,0,0,.5);
  opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease;min-height:20px}
#tutorialBubble.on{opacity:1;transform:translateY(0)}
#tutorialOverlay{position:fixed;inset:0;z-index:60;pointer-events:none;display:none}
#tutorialOverlay.on{display:block}
#tutorialSpot{position:absolute;border-radius:16px;box-shadow:0 0 0 9999px rgba(4,3,12,.62),0 0 0 3px rgba(133,234,255,.22),0 0 24px rgba(103,210,255,.28);transition:left .45s cubic-bezier(.4,0,.2,1),top .45s cubic-bezier(.4,0,.2,1),width .45s cubic-bezier(.4,0,.2,1),height .45s cubic-bezier(.4,0,.2,1),opacity .3s ease;pointer-events:none;opacity:0}
#tutorialSpot.on{opacity:1}
#tutorialArrowHint{position:absolute;width:46px;height:46px;pointer-events:none;opacity:0;transition:opacity .3s ease,left .45s cubic-bezier(.4,0,.2,1),top .45s cubic-bezier(.4,0,.2,1);z-index:62;font-size:34px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))}
#tutorialArrowHint.on{opacity:1;animation:tutArrowPulse 1s ease-in-out infinite}
@keyframes tutArrowPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
#tutorialSkip{position:absolute;top:calc(var(--sat) + 10px);right:14px;z-index:63;pointer-events:auto;
  background:rgba(10,8,26,.72);color:rgba(255,255,255,.8);border:none;border-radius:999px;
  padding:8px 16px;font-size:11px;font-weight:900;letter-spacing:.4px;box-shadow:inset 0 0 0 1.5px var(--line)}
#tutorialSkip:active{transform:scale(.94)}
@media (prefers-reduced-motion: reduce){
  #tutorialSpot{transition:none}
  #tutorialArrowHint{animation:none;transition:none}
}
body.tutorialMode #einBoxG{position:relative;z-index:65}
body.tutorialMode #bubble{z-index:65}
#tutOverlay{
  position:fixed;inset:0;z-index:80;display:none;
  background:rgba(6,4,22,.38);
}
#tutOverlay.on{display:block;animation:fadeUp .3s both}
.tutGoal{
  position:absolute;top:calc(var(--sat) + 96px);left:16px;
  display:flex;align-items:flex-start;gap:6px;max-width:56vw;
}
.tutArrow{font-size:30px;line-height:1;color:#ffd876;text-shadow:0 0 12px rgba(255,201,77,.85);animation:floatY 1.4s ease-in-out infinite}
.tutBubble{
  background:rgba(255,255,255,.96);color:#241a4a;font-weight:800;font-size:13.5px;line-height:1.35;
  padding:9px 13px;border-radius:14px;box-shadow:0 8px 20px rgba(0,0,0,.45);
}
.tutHand{
  position:absolute;top:0;left:0;font-size:38px;filter:drop-shadow(0 5px 10px rgba(0,0,0,.6));
  opacity:0;z-index:4;transition:left .55s cubic-bezier(.4,0,.2,1),top .55s cubic-bezier(.4,0,.2,1),opacity .3s;
}
.tutText{color:#fff;font-weight:900;font-size:17px;text-shadow:0 2px 10px rgba(0,0,0,.65)}
.tutSub{color:#cfd4ff;font-weight:700;font-size:12.5px;margin-top:4px}
.tutEinWrap{position:absolute;right:calc(var(--sar) + 2px);bottom:calc(var(--sab) + 2px);height:min(37vh,334px);aspect-ratio:468/520;display:flex;flex-direction:column;align-items:flex-end;z-index:2;pointer-events:none}
.tutEinWrap #tutEinBox{width:100%;height:100%;animation:einIdle 3.6s ease-in-out infinite}
.tutEinWrap .einImg{width:100%;height:100%;display:block;filter:drop-shadow(0 10px 18px rgba(0,0,0,.5))}
.tutEinBubble{
  position:absolute;right:190px;top:56%;
  width:165px;background:rgba(255,255,255,.96);color:#241a4a;
  font-weight:800;font-size:12.5px;line-height:1.4;padding:9px 12px;border-radius:15px 15px 4px 15px;
  box-shadow:0 8px 20px rgba(0,0,0,.45);z-index:3;animation:fadeUp .4s .3s both;
}
#tutGo{
  position:absolute;left:16px;bottom:calc(var(--sab) + 40px);
  padding:15px 26px;font-size:16px;white-space:nowrap;
  animation:tutGoPulse 1.4s ease-in-out infinite;
}
@keyframes tutGoPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.055)}}
.tutGoal{animation:fadeUp .4s .05s both}
.tutEinWrap{animation:fadeUp .4s .3s both}
.tutSwipe{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);width:150px;height:64px;pointer-events:none;animation:fadeUp .4s .18s both}
.tutSwipeHand{
  position:absolute;left:0;top:0;font-size:42px;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.6));
  animation:tutSwipeGo 1.7s ease-in-out infinite;
}
@keyframes tutSwipeGo{
  0%{transform:translateX(-55px) scale(1);opacity:0}
  14%{opacity:1}
  55%{transform:translateX(55px) scale(1.06);opacity:1}
  75%{opacity:0}
  100%{transform:translateX(-55px) scale(1);opacity:0}
}

/* Legal links inside Settings: readable on the dark modal and touch-friendly. */
.legalLinks{width:100%;padding:4px 8px 2px;text-align:center;color:rgba(255,255,255,.5);font-size:12px;line-height:1.55}
.legalLinks a{color:#72d7ff;text-decoration:none;font-weight:750;border-bottom:1px solid rgba(114,215,255,.35)}
.legalLinks a:active{opacity:.72}

/* ---------- account & Firebase Auth ---------- */
#btnSwitchProfile{width:52px;height:52px;padding:9px 4px 7px}
.accountDot{position:absolute;right:3px;bottom:3px;width:12px;height:12px;border-radius:50%;border:2px solid #11101d;box-shadow:0 0 9px currentColor;pointer-events:none}
.accountDot.guest{background:#ffc94d;color:#ffc94d}
.accountDot.member{background:#4ade80;color:#4ade80}
.accountDot.offline{background:#8a8a9a;color:#8a8a9a}
#modalBox.accountModal{width:min(91vw,390px);max-height:88vh;overflow-y:auto;padding:20px 17px 17px;text-align:left}
#modalBox.accountModal h3{text-align:center;margin-bottom:10px}
.accountHero{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:linear-gradient(135deg,rgba(157,123,255,.19),rgba(79,216,255,.10));border:1px solid rgba(157,123,255,.35);margin-bottom:11px}
.accountAvatar{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;font-size:23px;background:#11101d;border:1.5px solid rgba(157,123,255,.65);box-shadow:0 0 18px rgba(157,123,255,.28);overflow:hidden}
.accountAvatar img{width:100%;height:100%;object-fit:cover}
.accountHero strong{display:block;font-size:15.5px;margin-bottom:3px;overflow-wrap:anywhere}
.accountHero small{display:block;color:var(--dim);font-weight:700;font-size:11.5px;line-height:1.35}
.accountNotice{padding:10px 11px;border-radius:13px;margin:8px 0 11px;background:rgba(255,201,77,.10);border:1px solid rgba(255,201,77,.33);color:#ffe6a0;font-size:12px;font-weight:700;line-height:1.4}
.accountNotice.good{background:rgba(74,222,128,.10);border-color:rgba(74,222,128,.35);color:#baf5cf}
.accountActions{display:flex;flex-direction:column;gap:9px}
.accountActions .btn{width:100%;min-height:47px;padding:12px 10px;font-size:14px}
.accountActions .btn.google{background:#fff;color:#292929;box-shadow:0 5px 0 #c9c9c9,0 9px 22px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;gap:9px}
.accountActions .btn.google::before{content:'G';width:23px;height:23px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:16px;font-weight:900;color:#4285f4;background:#fff;border:1px solid #dadce0}
.accountActions .btn.danger{color:#ff9aa3;background:rgba(255,92,105,.12);box-shadow:inset 0 0 0 1.5px rgba(255,92,105,.42)}
#modalBox .btn.danger{color:#ff9aa3;background:rgba(255,92,105,.12);box-shadow:inset 0 0 0 1.5px rgba(255,92,105,.42)}
.accountDivider{display:flex;align-items:center;gap:9px;margin:12px 0;color:var(--dim);font-size:10px;font-weight:850;letter-spacing:.8px}
.accountDivider::before,.accountDivider::after{content:'';height:1px;flex:1;background:rgba(163,168,212,.25)}
.authField{display:block;margin:9px 0;text-align:left}
.authField span{display:block;font-size:11px;font-weight:850;color:#c9c4eb;margin:0 0 5px 3px}
.authInput{width:100%;height:47px;border:1.5px solid rgba(157,123,255,.42);border-radius:13px;outline:none;background:rgba(9,8,28,.76);color:#fff;padding:0 13px;font:700 16px/1.2 inherit;user-select:text;-webkit-user-select:text;touch-action:manipulation}
.authInput:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(79,216,255,.12),0 0 14px rgba(79,216,255,.18)}
.authInput::placeholder{color:#777caa}
.authMessage{min-height:18px;margin:7px 2px 2px;color:#ff9aa3;font-size:11.5px;font-weight:750;line-height:1.35;text-align:center}
.authMessage.ok{color:#8ef0b2}
.authTiny{text-align:center;color:var(--dim);font-size:11px;line-height:1.4;margin-top:8px}
.authLink{border:0;background:none;color:#91dcff;font:800 12px/1.2 inherit;padding:6px;touch-action:manipulation}
.authBusy{position:relative;pointer-events:none;filter:saturate(.65)}
.authBusy::after{content:'';position:absolute;right:12px;top:50%;width:15px;height:15px;margin-top:-8px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:authSpin .75s linear infinite}
@keyframes authSpin{to{transform:rotate(360deg)}}
@media (max-height:650px){#modalBox.accountModal{max-height:94vh}.accountHero{padding:9px}.accountActions .btn{min-height:42px;padding:10px}.authInput{height:43px}}

/* V3.3.1 — Spark-plan world ranking + iOS audio/layout fix */
#hofSpotlights{display:none!important}
#hofPeriodLabel{font-size:13px;font-weight:900;letter-spacing:.7px;color:#d8ccff;text-align:center;margin:2px 0 12px}
.hofWorldNotice{font-size:11.5px;line-height:1.45;font-weight:750;text-align:center;border-radius:12px;padding:10px 12px;margin-bottom:2px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.hofWorldNotice.guest{background:rgba(255,184,77,.1);color:#ffe0a6}
.hofWorldNotice.member{background:rgba(69,213,148,.1);color:#bff6dc}


/* V3.5.9 — side-only button doodles, foreground Dr. E, refined daily notification dot */
#hofComingSoon{min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:9px;padding:24px 18px;border-radius:16px;background:rgba(10,10,20,.56);box-shadow:inset 0 0 0 1px rgba(255,255,255,.13)}
#hofComingSoon .hofSoonIcon{font-size:38px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}
#hofSoonTitle{font-size:17px;font-weight:950;letter-spacing:.7px;color:#d8ccff}
#hofSoonText{max-width:310px;font-size:12px;font-weight:700;line-height:1.5;color:var(--dim)}
.hofSubTab.soon:not(.on){opacity:.8}
@media (max-width:380px){.hofSubTab{font-size:9.4px;padding:9px 2px}}

/* V3.3.7 — stable mobile viewport and short-phone fit */
input,textarea,select{font-size:16px!important}
body.keyboardOpen{overscroll-behavior:none}
@media (max-height:760px){
  #splash{padding-top:calc(var(--sat) + 4vh)}
  #logoTop{font-size:13px;letter-spacing:4px}
  #logoTitle{font-size:clamp(38px,11.5vw,52px)}
  #logoSub{font-size:12px}
  #splashBtns{margin-top:2vh;gap:6px;width:min(70vw,270px)}
  #splashBtns .btn{padding:8.8px 9px;font-size:15px;background-size:54px auto,54px auto,100% 100%;background-position:left 7px center,right 7px center,center}
  #einBoxS{height:min(44vh,360px);right:calc(var(--sar) - 15px);bottom:calc(var(--sab) - 13px);z-index:8}
  #bottomBar{height:150px}
  #dpad{transform:scale(.84);transform-origin:left bottom}
  #navBtns{left:142px;bottom:calc(var(--sab) + 10px)}
  #einWrap{transform:scale(.84);transform-origin:right bottom;right:calc(var(--sar) - 2px);bottom:calc(var(--sab) - 14px)}
  #hud{padding-top:calc(var(--sat) + 5px)}
  #goalCard{width:108px;min-width:108px;padding:6px}
  #goalCv{width:88px;height:65px}
  #starRow{font-size:19px}
  #lvPill{font-size:15px}
}
@media (max-height:620px){
  #splash{padding-top:calc(var(--sat) + 2.5vh)}
  #splashBtns{gap:4px;margin-top:1.2vh;width:71vw}
  #splashBtns .btn{padding:7.2px 8px;font-size:13.5px;background-size:48px auto,48px auto,100% 100%;background-position:left 6px center,right 6px center,center}
  #einBoxS{height:min(38vh,285px);opacity:.98;right:calc(var(--sar) - 12px);bottom:calc(var(--sab) - 11px);z-index:8}
  #btnHof.trophyBtn{width:46px;height:46px;bottom:calc(var(--sab) + 40px)}
  #bottomBar{height:126px}
  #dpad{transform:scale(.70);left:5px;bottom:calc(var(--sab) + 5px)}
  #navBtns{left:116px;gap:5px;bottom:calc(var(--sab) + 7px)}
  .navB{width:46px;height:57px}
  #einWrap{transform:scale(.68);right:calc(var(--sar) - 4px);bottom:calc(var(--sab) - 12px)}
  #hud{gap:5px;padding-left:6px;padding-right:6px}
  #goalCard{width:94px;min-width:94px}
  #goalCv{width:76px;height:56px}
  #goalName{font-size:10.5px}#goalFor{font-size:11px}
  #movePill{font-size:10.5px;padding:3px 7px}
  #actionCol{transform:scale(.86);transform-origin:right top}
}
@media (max-width:360px){
  #splashBtns{width:72vw}
  #einBoxS{right:calc(var(--sar) - 12px)}
  #hud{gap:4px}
  #goalCard{width:96px;min-width:96px}
  #coinChip{font-size:11px}
  #navBtns{gap:4px}
}

/* V3.5.9 — external music safe mode */
.externalMusicRow>span{display:flex;flex-direction:column;gap:3px;min-width:0}
.externalMusicRow small{display:block;max-width:235px;color:var(--dim);font-size:10.5px;font-weight:650;line-height:1.3}

/* V3.6.8 — iPhone Add to Home Screen / standalone Dr. E sizing */
body.iosStandalone #einBoxS{
  height:min(35dvh,310px);
  max-height:35dvh;
  right:calc(var(--sar) - 8px);
  bottom:calc(var(--sab) + 2px);
  transform-origin:right bottom;
  z-index:8;
}
body.iosStandalone #einWrap{
  transform:scale(.82);
  transform-origin:right bottom;
  right:calc(var(--sar) - 2px);
  bottom:calc(var(--sab) - 10px)
}
body.iosStandalone #einBoxG{animation:einIdle 3.6s ease-in-out infinite}
@supports (-webkit-touch-callout:none){
  @media (display-mode:standalone){
    #einBoxS{
      height:min(35dvh,310px);
      max-height:35dvh;
      right:calc(var(--sar) - 8px);
      bottom:calc(var(--sab) + 2px);
      transform-origin:right bottom;
    }
  }
}
@media (max-height:700px){
  body.iosStandalone #einBoxS{height:min(32dvh,235px);max-height:32dvh}
}

/* V3.5.9 — Master speaker toggle */
.vrow .mt.extDisabled,.vrow .mt:disabled{opacity:.46;cursor:not-allowed;filter:grayscale(.45);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 2px 6px rgba(0,0,0,.16)}
.vrow .mt.extDisabled:active,.vrow .mt:disabled:active{transform:none}



/* V3.6.2 — responsive settings modal for all phone sizes */
#modal{padding:max(8px,var(--sat)) 8px max(8px,var(--sab))}
#modalBox.settingsModal{
  width:min(92vw,390px);
  max-height:calc(100vh - max(18px,var(--sat)) - max(18px,var(--sab)));
  max-height:calc(100dvh - max(18px,var(--sat)) - max(18px,var(--sab)));
  padding:clamp(12px,2.1vh,18px) clamp(12px,3.5vw,18px) clamp(11px,1.8vh,16px);
  display:flex;flex-direction:column;overflow:hidden;text-align:center
}
#modalBox.settingsModal h3{flex:0 0 auto;font-size:clamp(18px,5.4vw,22px);margin:0 0 4px}
#modalBox.settingsModal .settingsScroll{
  flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:0 3px 4px 1px;scrollbar-width:thin;scrollbar-color:#9d7bff rgba(255,255,255,.08)
}
#modalBox.settingsModal .settingsScroll::-webkit-scrollbar{width:6px}
#modalBox.settingsModal .settingsScroll::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:999px}
#modalBox.settingsModal .settingsScroll::-webkit-scrollbar-thumb{background:rgba(157,123,255,.75);border-radius:999px}
#modalBox.settingsModal .vrow{padding:clamp(4px,.8vh,7px) 2px;font-size:clamp(12.5px,3.7vw,14px)}
#modalBox.settingsModal .vrow.audioRow{grid-template-columns:clamp(66px,20vw,82px) minmax(0,1fr) clamp(38px,11vw,44px);column-gap:clamp(5px,1.8vw,9px);padding:clamp(4px,.8vh,7px) 1px}
#modalBox.settingsModal .vrow.audioRow input[type=range]{height:clamp(26px,4.5vh,34px)}
#modalBox.settingsModal .vrow .mt{width:clamp(38px,11vw,44px);height:clamp(38px,11vw,44px);border-radius:12px;font-size:clamp(16px,4.8vw,18px)}
#modalBox.settingsModal .togRow{padding:clamp(7px,1.2vh,11px) 4px;font-size:clamp(12.5px,3.8vw,15px);gap:8px}
#modalBox.settingsModal .tog{width:clamp(52px,14vw,56px);height:clamp(30px,8vw,32px);flex:0 0 auto}
#modalBox.settingsModal .tog::after{top:3px;left:3px;width:clamp(24px,6.7vw,26px);height:clamp(24px,6.7vw,26px)}
#modalBox.settingsModal .tog.on::after{left:calc(100% - clamp(24px,6.7vw,26px) - 3px)}
#modalBox.settingsModal .externalMusicRow>span{min-width:0}
#modalBox.settingsModal .externalMusicRow small{max-width:min(56vw,220px);font-size:clamp(9.5px,2.8vw,10.8px);line-height:1.25}
#modalBox.settingsModal .langGroup{display:flex;gap:6px;flex-wrap:nowrap}
#modalBox.settingsModal .langBtn{padding:clamp(7px,1.2vh,9px) clamp(10px,3.2vw,14px)!important;font-size:clamp(12px,3.3vw,13px)!important;white-space:nowrap}
#modalBox.settingsModal .settingsActions{gap:clamp(6px,1vh,9px);margin-top:5px;overflow:visible;padding:0}
#modalBox.settingsModal .settingsActions .btn{padding:clamp(10px,1.7vh,13px) 10px;font-size:clamp(13.5px,4vw,15.5px)}
#modalBox.settingsModal .legalLinks{font-size:clamp(10.5px,3.1vw,12.5px);line-height:1.35;margin:2px 0}
#modalBox.settingsModal .settingsClose{flex:0 0 auto;width:100%;margin-top:7px;padding:clamp(11px,1.8vh,14px) 10px;font-size:clamp(14px,4.2vw,16px)}

@media (max-width:350px){
  #modalBox.settingsModal{width:94vw;padding-left:10px;padding-right:10px}
  #modalBox.settingsModal .vrow.audioRow{grid-template-columns:62px minmax(0,1fr) 38px;column-gap:5px}
  #modalBox.settingsModal .togRow{padding-left:1px;padding-right:1px}
  #modalBox.settingsModal .externalMusicRow small{max-width:52vw}
  #modalBox.settingsModal .langBtn{padding-left:8px!important;padding-right:8px!important}
}
@media (max-height:700px){
  #modalBox.settingsModal{max-height:calc(100dvh - max(12px,var(--sat)) - max(12px,var(--sab)));padding-top:10px;padding-bottom:9px}
  #modalBox.settingsModal h3{margin-bottom:1px}
  #modalBox.settingsModal .vrow,#modalBox.settingsModal .vrow.audioRow{padding-top:3px;padding-bottom:3px}
  #modalBox.settingsModal .togRow{padding-top:6px;padding-bottom:6px}
  #modalBox.settingsModal .settingsActions{gap:6px}
  #modalBox.settingsModal .settingsActions .btn{padding-top:9px;padding-bottom:9px}
  #modalBox.settingsModal .settingsClose{margin-top:5px;padding-top:10px;padding-bottom:10px}
}
@media (min-width:430px) and (min-height:820px){
  #modalBox.settingsModal{width:min(90vw,410px);max-height:min(90dvh,820px)}
  #modalBox.settingsModal .externalMusicRow small{max-width:240px}
}




/* V3.7.0 — Dr. E menu fit + boot animation alignment
   - Dr. E is slightly smaller, anchored to the bottom edge and placed behind the menu buttons.
   - The boot artwork uses its real 864×1821 source ratio.
   - White bond streak overlays are removed.
   - Bubbles are clipped inside the actual glass vessels and appear only when the lab is revealed. */
#bootStage{
  --boot-src-w:864;
  --boot-src-h:1821;
}

/* Keep the lamp as the only visible effect in the dark phase. */
#bootLogoHalo,#bootShine,.bootAtomGlow,.bootBub{visibility:hidden}
#bootDarkScrim.reveal ~ #bootLogoHalo,
#bootDarkScrim.reveal ~ #bootShine,
#bootDarkScrim.reveal ~ .bootAtomGlow,
#bootDarkScrim.reveal ~ .bootBub{visibility:visible}

/* The source artwork already contains metallic bonds; the added white streaks looked detached. */
.bootBondSpark{display:none!important}

/* Correct the bulb and atom glow anchors for the real source artwork. */
#bootBulbGlow{left:calc(var(--boot-x) + 0.302 * var(--boot-w));top:calc(var(--boot-y) + 0.286 * var(--boot-h));width:calc(0.145 * var(--boot-w))}
#bootGlowH{left:calc(var(--boot-x) + 0.343 * var(--boot-w));top:calc(var(--boot-y) + 0.588 * var(--boot-h))}
#bootGlowO{left:calc(var(--boot-x) + 0.490 * var(--boot-w));top:calc(var(--boot-y) + 0.617 * var(--boot-h))}
#bootGlowC{left:calc(var(--boot-x) + 0.690 * var(--boot-w));top:calc(var(--boot-y) + 0.596 * var(--boot-h))}

/* Vessel-clipped laboratory bubbles. */
.bootBub{
  width:auto;height:auto;overflow:hidden;line-height:0;
  filter:drop-shadow(0 0 5px rgba(130,230,255,.32));
}
.bootBub span{
  bottom:-12%;opacity:0;
  width:clamp(3px,calc(0.008 * var(--boot-w)),7px);
  height:clamp(3px,calc(0.008 * var(--boot-w)),7px);
  animation-name:bootBubbleInside;
  animation-duration:3.55s;
  animation-timing-function:ease-in;
  animation-iteration-count:infinite;
}
.bootBub span:nth-child(1){left:18%;animation-delay:.10s}
.bootBub span:nth-child(2){left:43%;width:clamp(2px,calc(0.006 * var(--boot-w)),5px);height:clamp(2px,calc(0.006 * var(--boot-w)),5px);animation-delay:1.05s}
.bootBub span:nth-child(3){left:68%;width:clamp(3px,calc(0.007 * var(--boot-w)),6px);height:clamp(3px,calc(0.007 * var(--boot-w)),6px);animation-delay:1.92s}
.bootBub span:nth-child(4){left:34%;width:clamp(2px,calc(0.005 * var(--boot-w)),4px);height:clamp(2px,calc(0.005 * var(--boot-w)),4px);animation-delay:2.72s}
@keyframes bootBubbleInside{
  0%{bottom:-12%;transform:translateX(0) scale(.72);opacity:0}
  10%{opacity:.82}
  56%{transform:translateX(4px) scale(.92);opacity:.68}
  88%{opacity:.34}
  100%{bottom:108%;transform:translateX(-2px) scale(1.08);opacity:0}
}

/* Purple upper-left chamber. */
#bootBubTopLeft{
  left:calc(var(--boot-x) + 0.052 * var(--boot-w));
  top:calc(var(--boot-y) + 0.042 * var(--boot-h));
  width:calc(0.150 * var(--boot-w));
  height:calc(0.116 * var(--boot-h));
  border-radius:34% 34% 24% 24%;
}
/* Cyan upper-right chamber. */
#bootBubRightTube{
  left:calc(var(--boot-x) + 0.835 * var(--boot-w));
  top:calc(var(--boot-y) + 0.186 * var(--boot-h));
  width:calc(0.125 * var(--boot-w));
  height:calc(0.132 * var(--boot-h));
  border-radius:28% 28% 24% 24%;
}
/* Green lower-left flask liquid. */
#bootBubFlask{
  left:calc(var(--boot-x) + 0.012 * var(--boot-w));
  top:calc(var(--boot-y) + 0.681 * var(--boot-h));
  width:calc(0.142 * var(--boot-w));
  height:calc(0.088 * var(--boot-h));
  border-radius:48% 48% 42% 42%;
}
/* Four lower-right test tubes. */
#bootBubTube1,#bootBubTube2,#bootBubTube3,#bootBubTube4{
  top:calc(var(--boot-y) + 0.650 * var(--boot-h));
  width:calc(0.024 * var(--boot-w));
  height:calc(0.066 * var(--boot-h));
  border-radius:45% 45% 42% 42%;
}
#bootBubTube1{left:calc(var(--boot-x) + 0.824 * var(--boot-w))}
#bootBubTube2{left:calc(var(--boot-x) + 0.862 * var(--boot-w))}
#bootBubTube3{left:calc(var(--boot-x) + 0.900 * var(--boot-w))}
#bootBubTube4{left:calc(var(--boot-x) + 0.938 * var(--boot-w))}
.bootBubTube span:nth-child(1){left:20%}
.bootBubTube span:nth-child(2){left:48%}
.bootBubTube span:nth-child(3){left:66%}

/* Main menu Dr. E: about 10% smaller, flush with the lower edge, never over the menu text. */
#einBoxS{
  height:min(46vh,410px);
  right:calc(var(--sar) - 23px);
  bottom:calc(var(--sab) - 20px);
  z-index:5;
}
#splashBtns{z-index:7}

@media (max-height:760px){
  #einBoxS{height:min(40vh,330px);right:calc(var(--sar) - 20px);bottom:calc(var(--sab) - 18px);z-index:5}
}
@media (max-height:620px){
  #einBoxS{height:min(35vh,260px);right:calc(var(--sar) - 17px);bottom:calc(var(--sab) - 15px);z-index:5}
}
body.iosStandalone #einBoxS{
  height:min(33dvh,285px);
  max-height:33dvh;
  right:calc(var(--sar) - 17px);
  bottom:0;
  z-index:5;
}
@supports (-webkit-touch-callout:none){
  @media (display-mode:standalone){
    #einBoxS{
      height:min(33dvh,285px);
      max-height:33dvh;
      right:calc(var(--sar) - 17px);
      bottom:0;
      z-index:5;
    }
  }
}
@media (max-height:700px){
  body.iosStandalone #einBoxS{height:min(30dvh,225px);max-height:30dvh;bottom:0}
}


/* ================= V3.8.1 — ABOUT + CAREER PROGRESSION RELEASE NOTES ================= */
#performanceWrap{
  position:fixed;inset:0;z-index:64;display:flex;align-items:center;justify-content:center;
  flex-direction:column;pointer-events:none;opacity:0;visibility:hidden;text-align:center;padding:24px;
}
#performanceWrap.on{visibility:visible;animation:performanceLayer 1.32s ease both}
#performanceGrade{
  font-size:clamp(48px,15vw,82px);font-weight:950;letter-spacing:2px;line-height:1;
  color:#fff;filter:drop-shadow(0 5px 0 rgba(20,10,50,.75)) drop-shadow(0 0 28px currentColor);
  animation:performancePop .72s cubic-bezier(.18,1.65,.35,1) both;
}
#performanceMeta{margin-top:12px;padding:7px 13px;border-radius:999px;background:rgba(8,5,28,.76);border:1px solid rgba(255,255,255,.28);font-size:15px;font-weight:900;letter-spacing:1.5px;color:#fff;animation:fadeUp .45s .2s both}
#performanceBest{min-height:22px;margin-top:8px;font-size:14px;font-weight:950;letter-spacing:1.5px;color:#ffd76a;text-shadow:0 0 16px rgba(255,201,77,.9);animation:fadeUp .45s .35s both}
#performanceWrap.grade-complete #performanceGrade{color:#d9d6ef}
#performanceWrap.grade-nice #performanceGrade{color:#78e7ff}
#performanceWrap.grade-perfect #performanceGrade{color:#ffd76a}
#performanceWrap.grade-insane #performanceGrade{color:#ff82cf}
#performanceWrap.grade-genius #performanceGrade{color:#bda5ff}
@keyframes performanceLayer{0%{opacity:0}12%,72%{opacity:1}100%{opacity:0}}
@keyframes performancePop{0%{opacity:0;transform:scale(.35) rotate(-7deg)}58%{opacity:1;transform:scale(1.12) rotate(2deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.performanceResult{margin:7px auto 9px;padding:9px 12px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap}
.performanceResult b{font-size:17px;letter-spacing:.8px}.performanceResult span{font-size:12px;font-weight:850;color:#fff}.performanceResult em{font-size:10px;font-style:normal;font-weight:950;letter-spacing:.8px;color:#ffd76a}
.performanceResult.grade-complete b{color:#d9d6ef}.performanceResult.grade-nice b{color:#78e7ff}.performanceResult.grade-perfect b{color:#ffd76a}.performanceResult.grade-insane b{color:#ff82cf}.performanceResult.grade-genius b{color:#bda5ff}
#modalBox.aboutModal,#modalBox.whatsNewModal{width:min(91vw,390px);max-height:min(90dvh,760px)}
.aboutVersion{display:inline-flex;align-items:center;gap:5px;margin:5px auto 10px;padding:6px 11px;border-radius:999px;background:rgba(157,123,255,.15);border:1px solid rgba(157,123,255,.4);font-size:13px;color:#dcd4ff}
.aboutVersion b{color:#fff;letter-spacing:.5px}.aboutBody{line-height:1.75!important}.aboutWhatsNew{font-size:14px!important;padding:12px 10px!important}
.releaseScroll{max-height:min(57dvh,470px);overflow-y:auto;text-align:left;padding:3px 4px 4px;margin:8px 0 5px;-webkit-overflow-scrolling:touch}
.release{margin:0 0 10px;padding:11px 12px;border-radius:14px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);color:#e8e4ff}
.release.latest{background:rgba(157,123,255,.12);border-color:rgba(157,123,255,.42)}
.release h4{font-size:16px;margin-bottom:6px;color:#fff}.release summary{cursor:pointer;font-weight:900;color:#fff;line-height:1.35}.release ul{margin:7px 0 0 18px;padding:0}.release li{margin:5px 0;font-size:12.5px;line-height:1.42;color:#d3cfea}
@media (max-height:650px){#modalBox.aboutModal,#modalBox.whatsNewModal{max-height:95dvh;padding-top:13px;padding-bottom:11px}.releaseScroll{max-height:52dvh}.release{padding:9px 10px}.release li{font-size:12px;margin:3px 0}}


/* V3.8.1 — official web link and account/ranking guidance in About. */
.aboutRankNote{display:flex;gap:9px;align-items:flex-start;margin:4px 0 11px;padding:10px 11px;border-radius:14px;background:rgba(255,210,63,.1);border:1px solid rgba(255,210,63,.35);font-size:12.5px;line-height:1.42;color:#fff4bf;text-align:left}
.aboutRankNote>span{font-size:19px;line-height:1.1;flex:0 0 auto}
.aboutActions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 9px}
.aboutActions .btn{min-width:0;margin:0!important;padding:11px 7px!important;font-size:12px!important;line-height:1.15;text-align:center;text-decoration:none;display:flex;align-items:center;justify-content:center}
.aboutWebLink{background:linear-gradient(180deg,#ff5a9d,#c82f76)!important;border-color:rgba(255,174,211,.65)!important;color:#fff!important}
.aboutAccount{background:rgba(157,123,255,.16)!important;border-color:rgba(157,123,255,.5)!important}
@media (max-width:360px){.aboutActions{grid-template-columns:1fr}.aboutRankNote{font-size:12px}}

/* ================= V3.8.2 — CERTIFIED DAILY EXPERIMENT GENERATOR ================= */
#duelTimer.urgent{background:linear-gradient(180deg,#ff5968,#a70f24);border-color:#ffd5da;animation:duelUrgentPulse .55s ease-in-out infinite alternate;box-shadow:0 0 18px rgba(255,62,82,.62)}
@keyframes duelUrgentPulse{from{transform:scale(1)}to{transform:scale(1.07)}}
.duelRoundLabel{margin:0 auto 7px;color:var(--cyan);font-size:11px;font-weight:1000;letter-spacing:1px}
.duelMatchScore{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;margin:11px 0;padding:10px;border-radius:14px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.14)}
.duelMatchScore span{font-size:11px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.duelMatchScore .red{text-align:left;color:#ff9da5}.duelMatchScore .blue{text-align:right;color:#9fc8ff}
.duelMatchScore b{font-size:22px;color:#fff;letter-spacing:2px}
.duelRoundHistory{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:10px 0 14px}
.duelRoundHistory span{padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--line);font-size:10px;font-weight:900;color:var(--dim)}


/* V3.13.2 — Catalyst Hunt laboratory components */
.crystalLabBtn{
  min-width:64px;padding:9px 8px;border-radius:14px;font-size:10px;font-weight:1000;line-height:1.05;
  color:#fff;background:linear-gradient(135deg,#ef8a3b 0 32%,#2589d8 34% 66%,#31a873 68% 100%);border:1px solid rgba(255,255,255,.28);
  box-shadow:0 4px 0 #18466a,0 8px 18px rgba(24,88,116,.34),inset 0 1px 2px rgba(255,255,255,.36);
}
.crystalLabBtn span{display:block;margin-top:2px;font-size:8px;letter-spacing:.8px}
.crystalLabBtn:active{transform:translateY(2px);box-shadow:0 2px 0 #18466a}
#crystalCounter{display:none;font-size:11px;font-weight:1000;padding:4px 9px;letter-spacing:.25px;background:linear-gradient(90deg,rgba(220,109,42,.88),rgba(30,117,183,.88),rgba(35,143,93,.88));border-color:rgba(207,242,255,.58);box-shadow:0 0 16px rgba(67,190,195,.34);white-space:nowrap}
#crystalCounter.on{display:block}
#gameScr.crystalMode #boardFrame{outline:2px solid rgba(79,216,255,.76);outline-offset:3px}
.crystalModeTag{display:inline-flex;align-items:center;justify-content:center;margin:5px auto 10px;padding:6px 12px;border-radius:999px;background:linear-gradient(90deg,rgba(225,121,52,.22),rgba(36,131,202,.20),rgba(43,162,108,.19));border:1px solid rgba(164,235,230,.42);font-size:11px;font-weight:1000;color:#e9fbff;letter-spacing:.7px}
.crystalResult{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:13px 0}
.crystalResult div{padding:11px 5px;border-radius:13px;background:rgba(0,0,0,.27);border:1px solid rgba(135,224,218,.30);text-align:center}
.crystalResult b{display:block;font-size:16px;color:#fff}.crystalResult span{display:block;margin-top:5px;font-size:10px;color:var(--dim);font-weight:900}
@media(max-width:380px){#levelsScr .listHead{gap:6px;padding-left:8px;padding-right:8px}#levelsScr .listHead h2{font-size:15px}.crystalLabBtn{min-width:54px;padding:8px 5px;font-size:9px}#lvCoins{display:none}}

/* V3.11.0 — Chain Reaction bonus mode */
#chainCounter{display:none;font-size:12px;font-weight:1000;padding:4px 10px;letter-spacing:.45px;background:linear-gradient(180deg,rgba(255,177,55,.9),rgba(184,77,18,.88));border-color:rgba(255,226,153,.7);box-shadow:0 0 16px rgba(255,150,35,.36);color:#fff7d2;text-shadow:0 1px 4px rgba(0,0,0,.75)}
#chainCounter.on{display:block}
#chainCounter.hot{animation:chainCounterPulse .42s ease-in-out infinite alternate;background:linear-gradient(180deg,#ffd85d,#e05b16);box-shadow:0 0 24px rgba(255,164,42,.75)}
@keyframes chainCounterPulse{from{transform:scale(1)}to{transform:scale(1.08)}}
#gameScr.chainMode #boardFrame{outline:2px solid rgba(255,176,55,.8);outline-offset:3px}
.chainModeTag{display:inline-flex;align-items:center;justify-content:center;margin:5px auto 10px;padding:6px 12px;border-radius:999px;background:linear-gradient(90deg,rgba(255,170,45,.28),rgba(255,77,38,.15));border:1px solid rgba(255,207,126,.42);font-size:11px;font-weight:1000;color:#fff2c7;letter-spacing:.7px}
.chainResult{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:13px 0}
.chainResult div{padding:10px 4px;border-radius:13px;background:rgba(0,0,0,.27);border:1px solid rgba(255,194,103,.3);text-align:center}
.chainResult b{display:block;font-size:15px;color:#fff}.chainResult span{display:block;margin-top:5px;font-size:9px;color:var(--dim);font-weight:900}
.bonusModeGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.bonusModeCard{padding:15px 10px;border-radius:15px;border:1px solid var(--line);background:rgba(0,0,0,.27);text-align:center;font-weight:1000;color:#fff}
.bonusModeCard small{display:block;margin-top:6px;color:var(--dim);font-size:10px;line-height:1.35;font-weight:800}
.bonusModeCard.crystal{border-color:rgba(95,211,196,.58);box-shadow:inset 0 0 20px rgba(47,153,135,.11)}
.bonusModeCard.chain{border-color:rgba(255,181,75,.58);box-shadow:inset 0 0 20px rgba(255,125,35,.1)}
@media(max-width:390px){.chainResult{grid-template-columns:1fr 1fr}.bonusModeGrid{grid-template-columns:1fr}.crystalLabBtn span{font-size:7px}}


/* V3.12.0 — Reactor Escape bonus mode */
#reactorCounter{display:none;font-size:11px;font-weight:1000;padding:4px 9px;letter-spacing:.35px;background:linear-gradient(180deg,rgba(255,70,82,.88),rgba(128,14,28,.9));border-color:rgba(255,183,190,.72);box-shadow:0 0 16px rgba(255,55,75,.38);color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.78)}
#reactorCounter.on{display:block}
#reactorCounter.hit{animation:reactorHitPulse .32s ease-in-out 2 alternate}
@keyframes reactorHitPulse{from{transform:scale(1)}to{transform:scale(1.1)}}
#gameScr.reactorMode #boardFrame{outline:2px solid rgba(255,72,89,.84);outline-offset:3px}
.reactorModeTag{display:inline-flex;align-items:center;justify-content:center;margin:5px auto 10px;padding:6px 12px;border-radius:999px;background:linear-gradient(90deg,rgba(255,55,70,.27),rgba(255,174,45,.14));border:1px solid rgba(255,165,172,.43);font-size:11px;font-weight:1000;color:#ffe8eb;letter-spacing:.7px}
.reactorResult{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:13px 0}
.reactorResult div{padding:10px 4px;border-radius:13px;background:rgba(0,0,0,.27);border:1px solid rgba(255,111,124,.31);text-align:center}
.reactorResult b{display:block;font-size:15px;color:#fff}.reactorResult span{display:block;margin-top:5px;font-size:9px;color:var(--dim);font-weight:900}
.bonusModeCard.reactor{border-color:rgba(255,91,106,.6);box-shadow:inset 0 0 20px rgba(255,48,70,.11)}
@media(max-width:390px){.reactorResult{grid-template-columns:1fr 1fr}}

/* V3.13.0 — milestone Bonus Chapters, medals and permanent visual rewards */
.crystalLabBtn.hasPending{animation:bonusReadyPulse 1.25s ease-in-out infinite alternate}
@keyframes bonusReadyPulse{from{filter:brightness(1);transform:translateY(0)}to{filter:brightness(1.22);transform:translateY(-2px)}}
.bonusProgress{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.bonusProgress>div{padding:10px 8px;border-radius:13px;background:rgba(0,0,0,.25);border:1px solid var(--line);text-align:center}
.bonusProgress b{display:block;font-size:17px;color:#ffd876}
.bonusProgress span{display:block;margin-top:4px;font-size:10px;line-height:1.25;color:var(--dim);font-weight:850}
.bonusMissionCard{display:flex;width:100%;flex-direction:column;align-items:center;gap:5px;padding:14px 10px;margin:8px 0 13px;border-radius:15px;border:1.5px solid rgba(255,216,118,.72);background:linear-gradient(135deg,rgba(119,73,190,.36),rgba(32,129,172,.30));color:#fff;box-shadow:inset 0 0 22px rgba(255,216,118,.08),0 0 18px rgba(157,123,255,.18)}
.bonusMissionCard b{font-size:13px;color:#ffe49a;letter-spacing:.7px}.bonusMissionCard span{font-size:12px;font-weight:900}.bonusMissionCard em{font-style:normal;font-size:10px;color:#9df3ff;font-weight:900}
.bonusMissionCard:active{transform:scale(.97)}
.bonusFreeTitle{margin:12px 0 7px;font-size:9px;font-weight:1000;letter-spacing:1.2px;color:var(--dim)}
.bonusAllDone{margin:9px 0 12px;padding:10px;border-radius:12px;border:1px solid rgba(91,221,153,.35);background:rgba(46,160,109,.11);color:#aef1cf;font-size:11px;line-height:1.4;font-weight:800}
.bonusUnlockNotice{margin:10px 0;padding:11px;border-radius:13px;background:linear-gradient(110deg,rgba(131,72,209,.25),rgba(28,151,182,.20));border:1px solid rgba(255,216,118,.55);text-align:center}
.bonusUnlockNotice b{display:block;color:#ffe18b;font-size:13px}.bonusUnlockNotice span{display:block;margin-top:5px;color:#d9f8ff;font-size:10px;line-height:1.35;font-weight:800}
.bonusAward{margin:12px 0;padding:12px;border-radius:14px;background:linear-gradient(130deg,rgba(255,191,56,.18),rgba(105,72,199,.25));border:1px solid rgba(255,219,119,.65);text-align:center}
.bonusAward>b{display:block;color:#ffe28d;font-size:13px}.bonusAward>div{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:8px}.bonusAward span{font-size:11px;font-weight:1000;color:#fff}.bonusAward em{display:block;margin-top:8px;color:#9ff3d0;font-size:11px;font-style:normal;font-weight:1000}
.bonusAward .coinIcon{display:inline-block;vertical-align:-2px}
body.bonusTier1 .profileBtn{box-shadow:inset 0 0 0 1.5px rgba(205,135,73,.72),0 0 12px rgba(205,135,73,.16)}
body.bonusTier2 #boardFrame{box-shadow:0 0 0 1px rgba(210,232,255,.26),0 0 24px rgba(170,215,255,.24)}
body.bonusTier3 #boardFrame{box-shadow:0 0 0 1px rgba(79,216,255,.34),0 0 30px rgba(79,216,255,.30)}
body.bonusTier4 .crystalLabBtn,body.bonusTier5 .crystalLabBtn{background:linear-gradient(180deg,#ffe587,#d89928);box-shadow:0 4px 0 #8e5b18,0 0 20px rgba(255,208,80,.48);color:#402700}
body.bonusTier5 #logoSub{color:#ffe18a;text-shadow:0 0 14px rgba(255,208,80,.55)}
@media(max-width:390px){.bonusProgress{grid-template-columns:1fr}.bonusMissionCard{padding:12px 8px}}

/* V3.13.10 — focused lab object visual system */
.bonusModeCard b{display:block;margin-top:4px}
.bonusModeVisual,.bonusMissionVisual,.bonusUnlockHero,.bonusAwardHero{display:flex;justify-content:center;align-items:center;min-height:64px;margin-bottom:8px}
.labVisual{position:relative;display:inline-block;width:64px;height:46px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.28))}
.labVisual .tube{position:absolute;left:9px;top:3px;width:18px;height:38px;border-radius:10px 10px 9px 9px;border:2px solid rgba(207,247,255,.95);background:linear-gradient(180deg,rgba(130,240,255,.18),rgba(32,95,140,.3));box-shadow:inset 0 -12px 0 rgba(86,223,255,.22)}
.labVisual .tube::after{content:'';position:absolute;left:2px;right:2px;bottom:3px;height:15px;border-radius:7px;background:linear-gradient(180deg,#7dffd6,#32d09d)}
.labVisual .spark.energy{position:absolute;left:26px;top:6px;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff8db 0 22%,#ffd954 23%,#ff9b38 58%,rgba(255,122,20,.08) 74%);box-shadow:0 0 15px rgba(255,193,84,.72)}
.labVisual .spark.energy::before,.labVisual .spark.energy::after{content:'';position:absolute;background:linear-gradient(180deg,#fffadf,#ffc443);left:50%;top:50%;transform:translate(-50%,-50%) rotate(45deg);border-radius:3px}
.labVisual .spark.energy::before{width:4px;height:20px}.labVisual .spark.energy::after{width:20px;height:4px}
.labVisual .core.stabilizer{position:absolute;right:7px;bottom:8px;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#efffff 0 24%,#9ff8ff 25%,#4fd8ff 55%,#2058d3 86%);box-shadow:0 0 14px rgba(79,216,255,.66)}
.labVisual.chain .orb{position:absolute;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff9eb 0 22%,#ffd478 24%,#ff9d36 58%,#d05900 86%);box-shadow:0 0 12px rgba(255,180,64,.65)}
.labVisual.chain .o1{left:4px;top:14px}.labVisual.chain .o2{left:25px;top:4px}.labVisual.chain .o3{right:6px;top:18px}
.labVisual.chain .beam{position:absolute;height:3px;border-radius:3px;background:linear-gradient(90deg,rgba(255,208,109,.18),#ffd464,rgba(255,208,109,.18));box-shadow:0 0 8px rgba(255,208,109,.48)}
.labVisual.chain .b1{left:15px;top:18px;width:18px;transform:rotate(-27deg)}.labVisual.chain .b2{left:34px;top:16px;width:18px;transform:rotate(29deg)}
.labVisual.reactor .gate{position:absolute;width:9px;height:34px;border-radius:6px;background:linear-gradient(180deg,#8d97bd,#596286);top:6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.labVisual.reactor .g1{left:8px}.labVisual.reactor .g2{right:8px}
.labVisual.reactor .beam{position:absolute;left:17px;right:17px;height:5px;border-radius:10px;background:linear-gradient(90deg,rgba(255,64,96,.08),#ff516f 18%,#ffd0d8 50%,#ff516f 82%,rgba(255,64,96,.08));box-shadow:0 0 12px rgba(255,80,118,.58)}
.labVisual.reactor .r1{top:14px}.labVisual.reactor .r2{top:26px}
.labVisual.reactor .warn{position:absolute;left:50%;bottom:3px;transform:translateX(-50%);width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff8db 0 20%,#ff9e50 24%,#ff5565 60%,#8d1120 88%);box-shadow:0 0 12px rgba(255,91,106,.66)}
.bonusModeBadge{display:inline-flex;align-items:center;gap:7px;padding:6px 8px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font-size:10px;font-weight:900;letter-spacing:.45px;color:#fff;white-space:nowrap}
.bonusModeBadge em{font-style:normal;color:var(--dim)}
.duelTypePreview{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:12px 0 14px}
.profileIdentity{display:flex;align-items:center;gap:10px;min-width:0}
.profileAvatar{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.profileTexts{display:flex;flex-direction:column;min-width:0;align-items:flex-start}
.profileTexts strong{font-size:14px;line-height:1.1;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profileTexts small{margin-top:2px}
.profileBtn{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;overflow:hidden}
.profileFrameDecor{position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.profileRow.tier1 .profileBtn{border-color:rgba(224,166,96,.55);box-shadow:0 0 0 1px rgba(224,166,96,.16), inset 0 0 20px rgba(224,166,96,.08)}
.profileRow.tier2 .profileBtn{border-color:rgba(205,221,255,.55);box-shadow:0 0 0 1px rgba(205,221,255,.16), inset 0 0 20px rgba(205,221,255,.08)}
.profileRow.tier3 .profileBtn{border-color:rgba(95,216,255,.55);box-shadow:0 0 0 1px rgba(95,216,255,.16), inset 0 0 20px rgba(95,216,255,.09)}
.profileRow.tier4 .profileBtn{border-color:rgba(255,202,92,.58);box-shadow:0 0 0 1px rgba(255,202,92,.18), inset 0 0 24px rgba(255,202,92,.12)}
.profileRow.tier5 .profileBtn{border-color:rgba(255,105,198,.62);box-shadow:0 0 0 1px rgba(255,105,198,.18), inset 0 0 28px rgba(255,105,198,.12)}
.achvCard .aic{margin-top:-2px}
.bonusUnlockNotice,.bonusAward,.bonusMissionCard{position:relative;overflow:hidden}
@media(max-width:430px){.bonusModeBadge em{display:none}.profileTexts strong{max-width:120px}.duelTypePreview{gap:6px}.bonusModeBadge{padding:6px}}


/* Final interface cleanup */
.profileBtn{justify-content:flex-start}
.duelTypePreview{min-height:42px}

.bonusModeBadge.duelSelected{padding:8px 12px;min-width:150px;justify-content:center}
.duelPreviewIcon{display:inline-flex;width:28px;height:28px;border-radius:50%;align-items:center;justify-content:center;background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font-size:17px}
@media(max-width:430px){.bonusModeBadge.duelSelected em{display:inline}.bonusModeBadge.duelSelected{min-width:0}}


/* V3.14.0 — evolving Classic campaign */
.campaignFeatureTag{position:absolute;right:3px;bottom:3px;width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:1000;border:1px solid rgba(255,255,255,.42);box-shadow:0 2px 7px rgba(0,0,0,.45);z-index:2}
.campaignFeatureTag.crystal{background:rgba(36,145,105,.92)}
.campaignFeatureTag.chain{background:rgba(212,112,22,.94)}
.campaignFeatureTag.reactor{background:rgba(172,28,52,.94)}

/* ================= V4.0.0 — Player Laboratory, Shop and Nobel Race ================= */
#splashBtns #btnLabMenu{background-image:url("../assets/images/button-doodle-left.svg"),url("../assets/images/button-doodle-right.svg"),linear-gradient(180deg,#2eb8c2,#18748f);background-blend-mode:soft-light,soft-light,normal;box-shadow:0 5px 0 #0f5067,0 10px 24px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.38)}
#labScr{z-index:11}
.labHead{padding-bottom:7px}
.labHead h2{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.labCoinBtn{border:0;color:#fff;cursor:pointer;min-width:76px;justify-content:center}
@media(max-width:350px){
  .labHead{gap:5px;padding-left:7px;padding-right:7px}
  .labHead h2{font-size:14px;letter-spacing:.25px}
  .labHead .btn.iconBadge{width:38px;height:38px;min-width:38px;padding:6px 3px}
  .labHead .btn.iconBadge .badgeIcon{width:23px;height:23px}
  .labCoinBtn{min-width:58px;padding:6px 6px;font-size:11px;gap:4px}
  .labCoinBtn .coinIcon{width:16px;height:16px}
}
#labTabs{display:flex;gap:7px;padding:0 14px 10px}
.labTab{flex:1;border:0;border-radius:14px;padding:10px 6px;background:rgba(255,255,255,.065);color:var(--dim);font:inherit;font-size:11px;font-weight:950;letter-spacing:.3px;box-shadow:inset 0 0 0 1.5px var(--line);transition:transform .13s ease,background .18s ease,color .18s ease,box-shadow .18s ease}
.labTab.on{color:#fff;background:linear-gradient(180deg,#6d54e8,#5233c9);box-shadow:0 4px 0 #3a20a0,0 7px 18px rgba(0,0,0,.34),0 0 16px rgba(157,123,255,.26)}
.labTab:active{transform:scale(.96)}
.labPane{display:none}.labPane.on{display:block;animation:labPaneIn .28s ease both}
@keyframes labPaneIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.labRoom{height:240px;border-radius:23px;position:relative;overflow:hidden;border:1.5px solid rgba(132,151,255,.36);background:linear-gradient(180deg,rgba(24,25,67,.94),rgba(12,15,43,.98));box-shadow:0 16px 34px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.08);margin-bottom:12px}
.labRoom::before{content:'';position:absolute;left:0;right:0;bottom:0;height:62px;background:linear-gradient(180deg,#23234b,#151633);box-shadow:inset 0 12px 24px rgba(0,0,0,.3)}
.labRoom::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 25%,rgba(96,135,255,.16),transparent 48%)}
.labRoomGlow{position:absolute;left:50%;top:15px;width:150px;height:80px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(94,215,255,.2),transparent 68%);filter:blur(8px)}
.labWindow{position:absolute;right:17px;top:22px;width:88px;height:72px;border:5px solid #3c416e;border-radius:16px;background:linear-gradient(180deg,#112a54,#255b76);box-shadow:inset 0 0 24px rgba(63,220,255,.22),0 0 16px rgba(68,176,255,.12);overflow:hidden}
.labWindow::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 72% 28%,#fff 0 2px,transparent 3px),radial-gradient(circle at 32% 63%,#9ee9ff 0 1px,transparent 2px),linear-gradient(145deg,transparent 50%,rgba(255,255,255,.08) 51% 55%,transparent 56%)}
.labWindow span{position:absolute;left:0;right:0;bottom:0;height:20px;background:linear-gradient(150deg,transparent 20%,rgba(88,192,210,.36) 21% 45%,transparent 46%),linear-gradient(25deg,rgba(51,118,144,.7),rgba(19,63,89,.8))}
.labShelf{position:absolute;left:18px;top:24px;width:118px;height:62px;border-bottom:7px solid #4b4775}
.labShelf i{position:absolute;bottom:7px;width:18px;border-radius:7px 7px 4px 4px;border:2px solid rgba(214,239,255,.65);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(73,174,217,.18));box-shadow:inset 0 -15px 0 rgba(82,228,188,.24)}
.labShelf i:nth-child(1){left:8px;height:34px}.labShelf i:nth-child(2){left:37px;height:42px;box-shadow:inset 0 -20px 0 rgba(202,105,255,.22)}.labShelf i:nth-child(3){left:68px;height:30px;box-shadow:inset 0 -12px 0 rgba(255,202,77,.28)}.labShelf i:nth-child(4){left:94px;height:38px;box-shadow:inset 0 -17px 0 rgba(79,216,255,.25)}
.labBench{position:absolute;left:17px;right:17px;bottom:44px;height:16px;border-radius:7px;background:linear-gradient(180deg,#77749a,#3d3d67);box-shadow:0 8px 0 #29294b,0 13px 18px rgba(0,0,0,.32)}
.labScientistBadge{position:absolute;left:14px;bottom:11px;z-index:5;display:grid;grid-template-columns:34px auto;grid-template-rows:18px 15px;column-gap:8px;align-items:center;padding:6px 12px 6px 8px;border-radius:14px;background:rgba(8,9,30,.82);border:1px solid rgba(157,123,255,.4);backdrop-filter:blur(8px)}
#labScientistIcon{grid-row:1/3;font-size:27px;filter:drop-shadow(0 0 8px rgba(255,211,92,.4))}.labScientistBadge b{font-size:10px;letter-spacing:.5px}.labScientistBadge small{font-size:10px;color:var(--dim);font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:165px}
#labPlacedItems{position:absolute;inset:0;z-index:4}.labPlaced{position:absolute}.labPlaced.slot0{left:30px;bottom:60px}.labPlaced.slot1{left:88px;bottom:58px}.labPlaced.slot2{left:150px;bottom:61px}.labPlaced.slot3{right:92px;bottom:60px}.labPlaced.slot4{right:28px;bottom:61px}.labPlaced.slot5{left:44%;top:25px}.labPlaced.slot6{right:19px;top:103px}.labPlaced.nobelCase{right:14px;bottom:14px}
.labRoom.theme-collider{background:linear-gradient(180deg,rgba(25,20,65,.96),rgba(10,14,40,.98))}.labRoom.theme-collider .labRoomGlow{background:radial-gradient(ellipse,rgba(201,89,255,.28),transparent 68%)}
.labRoom.theme-arctic{background:linear-gradient(180deg,rgba(25,62,88,.96),rgba(11,30,51,.98))}.labRoom.theme-arctic .labWindow{background:linear-gradient(180deg,#82d8ef,#d8fbff)}.labRoom.theme-arctic::after{background:radial-gradient(circle at 50% 22%,rgba(186,244,255,.28),transparent 48%)}
.labRoom.theme-mars{background:linear-gradient(180deg,rgba(79,36,37,.96),rgba(34,18,31,.98))}.labRoom.theme-mars .labWindow{background:radial-gradient(circle at 68% 32%,#f6aa75 0 12px,transparent 13px),linear-gradient(180deg,#5e2940,#c65f44)}.labRoom.theme-mars::after{background:radial-gradient(circle at 50% 22%,rgba(255,125,76,.22),transparent 50%)}
#labCareerStrip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}.labMetric{padding:10px 4px;border-radius:14px;text-align:center;background:rgba(11,12,37,.76);border:1px solid rgba(255,255,255,.1)}.labMetric>span{display:block;font-size:17px}.labMetric b{display:block;margin-top:2px;font-size:14px;color:#fff}.labMetric small{display:block;margin-top:2px;font-size:7.8px;color:var(--dim);font-weight:900;letter-spacing:.3px}
#labPurposeGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:18px}.labPurpose{display:flex;gap:10px;align-items:flex-start;padding:11px;border-radius:15px;background:rgba(14,14,45,.75);border:1px solid rgba(255,255,255,.09)}.labPurpose>span{font-size:22px}.labPurpose b{display:block;font-size:11.5px}.labPurpose small{display:block;margin-top:3px;font-size:9.5px;line-height:1.35;color:var(--dim);font-weight:700}
#labMissionGrid{display:flex;flex-direction:column;gap:10px;padding-bottom:8px}.labMission{padding:13px;border-radius:17px;background:linear-gradient(135deg,rgba(40,32,88,.84),rgba(15,24,54,.9));border:1px solid rgba(115,153,255,.28)}.labMission.locked{filter:grayscale(.75);opacity:.65}.labMission.claimed{border-color:rgba(74,222,154,.42);background:linear-gradient(135deg,rgba(36,104,79,.3),rgba(17,40,46,.8))}.labMissionTop{display:flex;gap:11px;align-items:center}.labMissionTop b{display:block;font-size:12px}.labMissionTop small{display:block;font-size:9.5px;color:var(--dim);line-height:1.35;margin-top:3px}.labProgress{height:8px;border-radius:99px;background:rgba(0,0,0,.36);overflow:hidden;margin:11px 0 7px}.labProgress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#4fd8ff,#9d7bff);box-shadow:0 0 10px rgba(79,216,255,.45)}.labMissionFoot{display:flex;justify-content:space-between;gap:8px;font-size:8.5px;font-weight:900;color:var(--dim)}.missionClaim{width:100%;padding:9px;margin-top:10px;font-size:11px}
.labShopHero{display:flex;align-items:center;gap:12px;padding:13px;margin-bottom:12px;border-radius:18px;background:linear-gradient(135deg,rgba(45,153,164,.22),rgba(93,66,173,.18));border:1px solid rgba(92,225,232,.28)}.shopBot{font-size:38px;filter:drop-shadow(0 0 12px rgba(79,216,255,.35))}.labShopHero b{display:block;font-size:12px}.labShopHero small{display:block;color:var(--dim);font-size:9.5px;line-height:1.4;margin-top:3px}
#labShopGrid{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding-bottom:18px}.labShopCard{display:flex;flex-direction:column;min-height:240px;padding:13px;border-radius:18px;background:linear-gradient(155deg,rgba(30,28,78,.9),rgba(13,17,48,.94));border:1px solid rgba(132,128,255,.26);box-shadow:0 11px 24px rgba(0,0,0,.25)}.labShopCard.owned{border-color:rgba(74,222,154,.42);box-shadow:inset 0 0 20px rgba(74,222,154,.05)}.labShopCard.locked{filter:grayscale(.8);opacity:.58}.labShopVisual{height:82px;display:flex;align-items:center;justify-content:center}.labShopText{flex:1}.labShopText b{display:block;font-size:11.5px;line-height:1.25}.labShopText small{display:block;margin-top:6px;color:var(--dim);font-size:9.2px;line-height:1.42}.labBuy,.labEquip{width:100%;padding:9px 5px;margin-top:11px;font-size:9.5px;border-radius:13px}.labModalAsset{display:flex;align-items:center;justify-content:center;height:96px}
.labAsset{position:relative;display:inline-block;width:68px;height:62px;filter:drop-shadow(0 7px 10px rgba(0,0,0,.32))}.labAsset.small{width:45px;height:40px;transform:scale(.78);transform-origin:center}.labAsset i,.labAsset b,.labAsset em{position:absolute;display:block;font-style:normal}
.labAsset.gold_scope i{left:28px;top:8px;width:11px;height:42px;border-radius:6px;background:linear-gradient(90deg,#a96e14,#ffe48a,#b77916);transform:rotate(30deg);box-shadow:0 0 12px rgba(255,202,77,.35)}.labAsset.gold_scope b{left:18px;top:5px;width:25px;height:16px;border:5px solid #e4b442;border-left-width:7px;border-radius:15px 15px 8px 8px;transform:rotate(20deg)}.labAsset.gold_scope em{left:11px;bottom:7px;width:48px;height:9px;border-radius:50%;background:linear-gradient(180deg,#ffd978,#9a6117);box-shadow:0 4px 0 #5d3c13}
.labAsset.holo_table i{inset:8px;border-radius:8px;background:linear-gradient(135deg,rgba(79,216,255,.22),rgba(157,123,255,.2));border:1px solid rgba(115,232,255,.72);box-shadow:0 0 18px rgba(79,216,255,.38),inset 0 0 15px rgba(157,123,255,.22)}.labAsset.holo_table i::after{content:'H  C  N\A O  P  S';white-space:pre;position:absolute;inset:9px;color:#bff6ff;font-size:8px;line-height:17px;font-weight:900;text-align:center;text-shadow:0 0 7px #4fd8ff}.labAsset.holo_table em{left:19px;right:19px;bottom:2px;height:7px;border-radius:50%;background:#4fd8ff;filter:blur(4px)}
.labAsset.quantum_desk i{left:8px;right:8px;bottom:7px;height:14px;border-radius:7px;background:linear-gradient(180deg,#6c70a1,#33375f);box-shadow:0 5px 0 #20233e}.labAsset.quantum_desk b{left:17px;top:8px;width:38px;height:30px;border-radius:6px;background:radial-gradient(circle at 50% 55%,#91f6ff 0 4px,transparent 5px),linear-gradient(145deg,#243270,#7145a1);border:2px solid #96a6df;box-shadow:0 0 14px rgba(116,193,255,.35)}.labAsset.quantum_desk em{left:31px;top:14px;width:10px;height:17px;border:1px solid rgba(255,255,255,.7);border-radius:50%;transform:rotate(65deg);box-shadow:0 0 8px #4fd8ff}
.labAsset.robot i{left:15px;top:13px;width:39px;height:34px;border-radius:12px;background:linear-gradient(180deg,#d7e8f5,#839bb2);border:2px solid #eaf8ff}.labAsset.robot i::before{content:'';position:absolute;left:7px;right:7px;top:9px;height:12px;border-radius:7px;background:#182345;box-shadow:inset 0 0 8px rgba(79,216,255,.4)}.labAsset.robot i::after{content:'•  •';position:absolute;left:9px;top:4px;color:#66eaff;font-size:18px;letter-spacing:5px;text-shadow:0 0 8px #4fd8ff}.labAsset.robot b{left:32px;top:3px;width:4px;height:12px;background:#98acc0}.labAsset.robot b::after{content:'';position:absolute;left:-3px;top:-5px;width:10px;height:10px;border-radius:50%;background:#ffc94d;box-shadow:0 0 9px #ffc94d}.labAsset.robot em{left:22px;bottom:5px;width:28px;height:8px;border-radius:6px;background:#596d82}
.labAsset.collider i{left:6px;right:6px;top:13px;height:34px;border:5px solid #756dd3;border-radius:50%;box-shadow:0 0 16px rgba(157,123,255,.5),inset 0 0 14px rgba(79,216,255,.34)}.labAsset.collider b{left:28px;top:22px;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle,#fff,#4fd8ff 45%,#9d7bff 75%);box-shadow:0 0 18px #4fd8ff}.labAsset.collider em{left:2px;right:2px;bottom:4px;height:9px;border-radius:50%;background:linear-gradient(180deg,#777da8,#31365c)}
.labAsset.arctic i{left:8px;right:8px;bottom:7px;height:32px;border-radius:26px 26px 8px 8px;background:linear-gradient(180deg,#e9fbff,#70cbe7);border:2px solid #bff6ff;box-shadow:0 0 16px rgba(123,231,255,.38)}.labAsset.arctic i::after{content:'❄';position:absolute;left:17px;top:5px;color:#fff;font-size:20px;text-shadow:0 0 8px #4fd8ff}.labAsset.arctic b{left:15px;right:15px;bottom:2px;height:10px;border-radius:7px;background:#3b6382}.labAsset.arctic em{left:24px;top:4px;width:20px;height:18px;border-radius:50%;background:rgba(202,249,255,.35)}
.labAsset.mars i{left:22px;top:5px;width:27px;height:45px;border-radius:15px 15px 9px 9px;background:linear-gradient(90deg,#a6abb8,#f1f3f6,#8a8f9c);border:2px solid #d9dce4}.labAsset.mars i::after{content:'';position:absolute;left:5px;right:5px;top:10px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffc199,#b84d37 70%);box-shadow:0 0 9px rgba(255,116,74,.45)}.labAsset.mars b{left:12px;bottom:6px;border-left:13px solid transparent;border-right:13px solid transparent;border-top:24px solid #d45244}.labAsset.mars em{right:7px;bottom:5px;width:16px;height:23px;border-radius:50%;background:radial-gradient(ellipse at 50% 10%,#fff4c8,#ff983d 42%,#e13929 74%,transparent 76%);filter:drop-shadow(0 0 7px #ff633c)}
.labAsset.nobel_case i{left:13px;right:13px;top:3px;bottom:5px;border:2px solid rgba(255,226,130,.72);border-radius:9px;background:linear-gradient(180deg,rgba(255,243,196,.14),rgba(89,58,19,.25));box-shadow:0 0 18px rgba(255,201,77,.4),inset 0 0 15px rgba(255,201,77,.12)}.labAsset.nobel_case i::after{content:'🏆';position:absolute;left:8px;top:7px;font-size:28px;filter:drop-shadow(0 0 8px #ffc94d)}.labAsset.nobel_case b{left:11px;right:11px;bottom:0;height:8px;border-radius:5px;background:#8d5f19}
#nobelRaceHero{display:flex;gap:14px;align-items:center;padding:17px;border-radius:20px;background:linear-gradient(135deg,rgba(255,201,77,.18),rgba(85,58,167,.22));border:1px solid rgba(255,216,118,.42);margin-bottom:14px}.nobelCup{width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:18px;background:rgba(255,201,77,.12);font-size:34px;filter:drop-shadow(0 0 10px rgba(255,201,77,.5))}.nobelCup.won{animation:nobelCupShine 2.4s ease-in-out infinite}@keyframes nobelCupShine{0%,100%{transform:scale(1);filter:drop-shadow(0 0 8px rgba(255,201,77,.45))}50%{transform:scale(1.05);filter:drop-shadow(0 0 18px rgba(255,227,130,.85))}}#nobelRaceHero b{display:block;font-size:14px;color:#ffe59a}#nobelRaceHero small{display:block;margin-top:5px;font-size:10px;line-height:1.45;color:#d5d8f3}
#nobelLeaderGrid{display:grid;grid-template-columns:1fr;gap:9px;margin-bottom:15px}.nobelLeader{display:grid;grid-template-columns:38px 1fr auto;grid-template-rows:auto auto;gap:2px 9px;align-items:center;padding:12px;border-radius:15px;background:rgba(13,14,43,.78);border:1px solid rgba(255,255,255,.1)}.nobelLeader>span{grid-row:1/3;font-size:25px}.nobelLeader b{font-size:9px;color:var(--dim);letter-spacing:.5px}.nobelLeader strong{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nobelLeader small{grid-column:3;grid-row:1/3;color:#4fd8ff;font-size:9px;font-weight:900}.nobelLeader.me{border-color:rgba(255,201,77,.52);box-shadow:inset 0 0 18px rgba(255,201,77,.07)}.nobelLeader.empty{opacity:.65}
#nobelPlayerCard{padding:14px;border-radius:17px;background:linear-gradient(135deg,rgba(65,47,142,.24),rgba(18,28,63,.75));border:1px solid rgba(157,123,255,.35);margin-bottom:15px}.nobelPlayerTop{display:flex;gap:11px;align-items:center}.nobelPlayerTop>span{font-size:29px}.nobelPlayerTop b{display:block}.nobelPlayerTop small{display:block;margin-top:3px;font-size:9.5px;color:var(--dim)}.nobelPlayerStats{display:flex;justify-content:space-between;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.09);font-size:10px;font-weight:900;color:#8fe9ff}
#nobelArchiveGrid,#hofChampionsGrid{display:flex;flex-direction:column;gap:8px;padding-bottom:16px}.nobelArchiveRow{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:14px;background:rgba(12,13,39,.76);border:1px solid rgba(255,201,77,.2)}.nobelArchiveRow>span{font-size:23px}.nobelArchiveRow b{display:block;font-size:11.5px}.nobelArchiveRow small{display:block;margin-top:2px;font-size:9px;color:var(--dim)}.nobelArchiveRow.live{border-color:rgba(79,216,255,.26)}.nobelArchiveEmpty{padding:15px;text-align:center;font-size:10px;line-height:1.5;color:var(--dim);border:1px dashed rgba(255,255,255,.15);border-radius:14px}
#hofSpotlights{display:flex!important}
#hofComingSoon{min-height:0!important;padding:12px 0!important;display:none;flex-direction:column!important;align-items:stretch!important;text-align:left!important}.hofSoonIcon{align-self:center}.hofSoonIcon,#hofSoonTitle,#hofSoonText{text-align:center}
@media(max-width:390px){#labCareerStrip{grid-template-columns:1fr 1fr}#labPurposeGrid,#labShopGrid{grid-template-columns:1fr}.labShopCard{min-height:205px}.labRoom{height:225px}.labWindow{width:75px}.labScientistBadge small{max-width:125px}.nobelLeader{grid-template-columns:34px 1fr}.nobelLeader small{grid-column:2;grid-row:auto}}


/* V4.0.0 — clearer campaign cards */
.lvBtn{position:relative;overflow:hidden}
.lvFormula{position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);max-width:78%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:900;letter-spacing:.2px;color:rgba(235,244,255,.88);text-shadow:0 1px 5px rgba(0,0,0,.75);pointer-events:none}
.lvBtn.feature-crystal{box-shadow:inset 0 0 18px rgba(76,235,211,.07)}
.lvBtn.feature-chain{box-shadow:inset 0 0 18px rgba(255,193,72,.08)}
.lvBtn.feature-reactor{box-shadow:inset 0 0 18px rgba(255,80,112,.08)}
.lvBtn.cur .lvFormula{color:#fff}
.lvBtn.lock .lvFormula{display:none}

/* V4.0.1 — premium shop visuals */
#labShopGrid{gap:13px}
.labShopCard{position:relative;overflow:hidden;min-height:252px;padding:14px;border-color:rgba(154,162,255,.28);box-shadow:0 12px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04)}
.labShopCard::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 18% 18%,rgba(255,255,255,.09),transparent 28%),linear-gradient(180deg,rgba(255,255,255,.03),transparent 32%)}
.labShopCard::after{content:'';position:absolute;right:-28px;top:-28px;width:96px;height:96px;border-radius:50%;filter:blur(14px);opacity:.72;pointer-events:none}
.labShopCard.item-gold_scope::after{background:radial-gradient(circle,#ffd86a,rgba(255,216,106,.02) 70%)}
.labShopCard.item-holo_table::after{background:radial-gradient(circle,#6ff3ff,rgba(111,243,255,.02) 70%)}
.labShopCard.item-quantum_desk::after{background:radial-gradient(circle,#86c0ff,rgba(134,192,255,.02) 70%)}
.labShopCard.item-robot::after{background:radial-gradient(circle,#9ff7ff,rgba(159,247,255,.02) 70%)}
.labShopCard.item-collider::after{background:radial-gradient(circle,#b98cff,rgba(185,140,255,.02) 70%)}
.labShopCard.item-arctic::after{background:radial-gradient(circle,#bffbff,rgba(191,251,255,.02) 70%)}
.labShopCard.item-mars::after{background:radial-gradient(circle,#ff8f68,rgba(255,143,104,.02) 70%)}
.labShopCard.owned{box-shadow:0 14px 32px rgba(0,0,0,.28), inset 0 0 26px rgba(74,222,154,.05), inset 0 1px 0 rgba(255,255,255,.05)}
.labShopVisual{height:98px;display:flex;align-items:center;justify-content:center;border-radius:18px;position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 18px rgba(0,0,0,.2);margin-bottom:10px}
.labShopVisual::before{content:'';position:absolute;inset:10px;border-radius:14px;pointer-events:none;background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.12),transparent 55%)}
.item-gold_scope .labShopVisual{background:linear-gradient(180deg,rgba(117,88,27,.36),rgba(37,29,22,.22));border-color:rgba(255,218,119,.24)}
.item-holo_table .labShopVisual{background:linear-gradient(180deg,rgba(38,85,121,.34),rgba(27,26,53,.24));border-color:rgba(112,244,255,.24)}
.item-quantum_desk .labShopVisual{background:linear-gradient(180deg,rgba(40,62,126,.36),rgba(27,28,53,.24));border-color:rgba(142,188,255,.22)}
.item-robot .labShopVisual{background:linear-gradient(180deg,rgba(42,82,104,.34),rgba(27,31,48,.24));border-color:rgba(155,245,255,.22)}
.item-collider .labShopVisual{background:linear-gradient(180deg,rgba(83,41,129,.36),rgba(29,26,53,.24));border-color:rgba(194,151,255,.22)}
.item-arctic .labShopVisual{background:linear-gradient(180deg,rgba(67,124,143,.34),rgba(27,31,48,.24));border-color:rgba(191,251,255,.24)}
.item-mars .labShopVisual{background:linear-gradient(180deg,rgba(124,64,54,.36),rgba(36,26,31,.24));border-color:rgba(255,160,118,.24)}
.labShopText b{font-size:12px;line-height:1.28;padding-right:4px}
.labShopText small{font-size:9.4px;line-height:1.45}
.labBuy,.labEquip{font-size:10px;font-weight:900;letter-spacing:.2px}
.moleCoinBuyBtn{display:inline-flex!important;align-items:center;justify-content:center;gap:6px}.moleCoinBuyBtn .coinIcon{width:17px;height:17px;flex:0 0 17px}.moleCoinBuyBtn .coinIcon::after{width:12px;height:5px}
.labModalAsset{position:relative;border-radius:18px;margin:8px 0 6px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.labModalAsset::after{content:'';position:absolute;width:110px;height:110px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;filter:blur(20px);pointer-events:none;opacity:.6}
.labModalAsset.item-gold_scope::after{background:radial-gradient(circle,#ffd86a,transparent 70%)}
.labModalAsset.item-holo_table::after{background:radial-gradient(circle,#6ff3ff,transparent 70%)}
.labModalAsset.item-quantum_desk::after{background:radial-gradient(circle,#86c0ff,transparent 70%)}
.labModalAsset.item-robot::after{background:radial-gradient(circle,#9ff7ff,transparent 70%)}
.labModalAsset.item-collider::after{background:radial-gradient(circle,#b98cff,transparent 70%)}
.labModalAsset.item-arctic::after{background:radial-gradient(circle,#bffbff,transparent 70%)}
.labModalAsset.item-mars::after{background:radial-gradient(circle,#ff8f68,transparent 70%)}

.labAsset{width:76px;height:70px;filter:drop-shadow(0 10px 12px rgba(0,0,0,.28))}
.labAsset.small{width:52px;height:48px;transform:scale(.82);transform-origin:center}
.labShopVisual .labAsset{transform:translateY(2px)}
.labShopVisual .labAsset.small{transform:none}
.labAsset.gold_scope i{left:31px;top:10px;width:10px;height:39px;border-radius:10px;background:linear-gradient(180deg,#ffe58d,#c48819 62%,#7f5510 100%);transform:rotate(29deg);box-shadow:0 0 14px rgba(255,202,77,.42)}
.labAsset.gold_scope i::before{content:'';position:absolute;left:-4px;top:16px;width:24px;height:8px;border-radius:10px;background:linear-gradient(90deg,#9b6815,#ffd978,#986211);transform:rotate(-58deg)}
.labAsset.gold_scope b{left:16px;top:7px;width:30px;height:18px;border:5px solid #f1c24a;border-left-width:8px;border-radius:18px 18px 10px 10px;transform:rotate(18deg);box-shadow:inset 0 0 0 1px rgba(255,245,204,.24)}
.labAsset.gold_scope b::before{content:'';position:absolute;left:4px;top:3px;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle,#fff8da,#ffe17d 55%,#cd8b18 100%)}
.labAsset.gold_scope em{left:8px;bottom:5px;width:56px;height:12px;border-radius:50%;background:linear-gradient(180deg,#ffd978,#8e5e14);box-shadow:0 5px 0 #5d3c13,0 0 14px rgba(255,201,77,.24)}

.labAsset.holo_table i{left:9px;right:9px;top:12px;bottom:12px;border-radius:10px;background:linear-gradient(180deg,rgba(122,251,255,.12),rgba(157,123,255,.1));border:1.5px solid rgba(135,247,255,.78);box-shadow:0 0 20px rgba(79,216,255,.34),inset 0 0 18px rgba(157,123,255,.18)}
.labAsset.holo_table i::before{content:'';position:absolute;left:12px;right:12px;bottom:-8px;height:10px;border-radius:50%;background:radial-gradient(ellipse,rgba(79,216,255,.85),rgba(79,216,255,.18) 55%,transparent 70%);filter:blur(2px)}
.labAsset.holo_table i::after{content:'H  C  N\A O  P  S';white-space:pre;position:absolute;inset:8px;color:#d8fbff;font-size:8.4px;line-height:16px;font-weight:900;text-align:center;text-shadow:0 0 8px #4fd8ff,0 0 14px rgba(79,216,255,.45)}
.labAsset.holo_table b{left:18px;right:18px;bottom:7px;height:5px;border-radius:4px;background:linear-gradient(90deg,#6b78b8,#4fd8ff,#7a6dff)}
.labAsset.holo_table em{left:21px;right:21px;bottom:1px;height:8px;border-radius:50%;background:#58ddff;filter:blur(5px)}

.labAsset.quantum_desk i{left:9px;right:9px;bottom:8px;height:16px;border-radius:8px;background:linear-gradient(180deg,#6974aa,#353a68);box-shadow:0 5px 0 #1d2240,0 0 14px rgba(138,192,255,.16)}
.labAsset.quantum_desk i::before{content:'';position:absolute;left:10px;right:10px;top:-5px;height:5px;border-radius:4px;background:linear-gradient(90deg,#7783d0,#a9b5ff,#7783d0)}
.labAsset.quantum_desk b{left:16px;top:8px;width:44px;height:32px;border-radius:8px;background:radial-gradient(circle at 50% 55%,#aef6ff 0 4px,transparent 5px),linear-gradient(145deg,#20306f,#7249a8);border:2px solid #9bb4ef;box-shadow:0 0 16px rgba(116,193,255,.38), inset 0 0 0 1px rgba(255,255,255,.06)}
.labAsset.quantum_desk b::before,.labAsset.quantum_desk b::after{content:'';position:absolute;left:50%;top:50%;width:16px;height:10px;border:1px solid rgba(205,245,255,.85);border-radius:50%;transform:translate(-50%,-50%) rotate(26deg);box-shadow:0 0 8px rgba(79,216,255,.38)}
.labAsset.quantum_desk b::after{transform:translate(-50%,-50%) rotate(-26deg)}
.labAsset.quantum_desk em{left:26px;top:16px;width:24px;height:16px;border-radius:50%;border:1px solid rgba(255,255,255,.34);filter:drop-shadow(0 0 6px rgba(79,216,255,.3))}

.labAsset.robot i{left:17px;top:14px;width:42px;height:36px;border-radius:13px;background:linear-gradient(180deg,#dcecf7,#899fb5);border:2px solid #edf7ff;box-shadow:0 0 16px rgba(166,249,255,.2)}
.labAsset.robot i::before{content:'';position:absolute;left:6px;right:6px;top:9px;height:13px;border-radius:8px;background:#192648;box-shadow:inset 0 0 10px rgba(79,216,255,.45)}
.labAsset.robot i::after{content:'';position:absolute;left:12px;top:12px;width:7px;height:7px;border-radius:50%;background:#66ecff;box-shadow:14px 0 0 #66ecff,0 0 10px #66ecff,14px 0 10px #66ecff}
.labAsset.robot b{left:35px;top:5px;width:5px;height:12px;background:#9cb3c7;border-radius:4px}
.labAsset.robot b::after{content:'';position:absolute;left:-4px;top:-6px;width:13px;height:13px;border-radius:50%;background:radial-gradient(circle,#fff0a8,#ffc94d 58%,#d88220 100%);box-shadow:0 0 12px #ffc94d}
.labAsset.robot em{left:22px;bottom:6px;width:31px;height:9px;border-radius:6px;background:#5c7188;box-shadow:0 3px 0 #405160}

.labAsset.collider i{left:10px;right:10px;top:14px;height:34px;border:5px solid #7c6fe6;border-radius:50%;box-shadow:0 0 18px rgba(157,123,255,.54),inset 0 0 16px rgba(79,216,255,.36)}
.labAsset.collider i::before{content:'';position:absolute;left:50%;top:50%;width:44px;height:14px;border:2px solid rgba(95,238,255,.75);border-radius:50%;transform:translate(-50%,-50%) rotate(-18deg);box-shadow:0 0 10px rgba(79,216,255,.28)}
.labAsset.collider b{left:31px;top:23px;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle,#fff,#4fd8ff 45%,#9d7bff 78%);box-shadow:0 0 20px #4fd8ff}
.labAsset.collider em{left:4px;right:4px;bottom:4px;height:10px;border-radius:50%;background:linear-gradient(180deg,#7d83b1,#30365e)}

.labAsset.arctic i{left:10px;right:10px;bottom:9px;height:34px;border-radius:28px 28px 10px 10px;background:linear-gradient(180deg,#edfaff,#74d0ea);border:2px solid #c7f8ff;box-shadow:0 0 18px rgba(123,231,255,.36)}
.labAsset.arctic i::before{content:'❄';position:absolute;left:19px;top:5px;color:#fff;font-size:22px;text-shadow:0 0 8px #4fd8ff}
.labAsset.arctic i::after{content:'';position:absolute;left:6px;right:6px;bottom:7px;height:8px;border-radius:6px;background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.08))}
.labAsset.arctic b{left:14px;right:14px;bottom:2px;height:11px;border-radius:7px;background:#40698a;box-shadow:0 4px 0 #25445f}
.labAsset.arctic em{left:26px;top:5px;width:20px;height:18px;border-radius:50%;background:rgba(214,253,255,.5);filter:blur(.3px)}

.labAsset.mars i{left:25px;top:6px;width:26px;height:46px;border-radius:16px 16px 10px 10px;background:linear-gradient(90deg,#a7adba,#f2f4f7,#8b90a0);border:2px solid #d9dce4;box-shadow:0 0 16px rgba(255,154,106,.14)}
.labAsset.mars i::after{content:'';position:absolute;left:5px;right:5px;top:10px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffc7a5,#b84d37 70%);box-shadow:0 0 10px rgba(255,116,74,.48)}
.labAsset.mars b{left:13px;bottom:7px;border-left:14px solid transparent;border-right:14px solid transparent;border-top:25px solid #d65345;filter:drop-shadow(0 2px 0 rgba(103,32,24,.55))}
.labAsset.mars b::before{content:'';position:absolute;left:-7px;top:-8px;width:14px;height:8px;border-radius:0 0 6px 6px;background:#f6b17d}
.labAsset.mars em{right:4px;bottom:6px;width:18px;height:24px;border-radius:50%;background:radial-gradient(ellipse at 50% 10%,#fff4c8,#ff983d 42%,#e13929 74%,transparent 76%);filter:drop-shadow(0 0 8px #ff633c)}

@media(max-width:390px){
  .labShopCard{min-height:220px}
  .labShopVisual{height:90px}
  .labAsset{transform:scale(.92)}
}

/* V4.0.2 — floating LAB button + premium placed lab items */
#splashBtns #btnLabMenu{
  position:absolute;left:18px;bottom:calc(var(--sab) + 206px);z-index:4;
  width:58px;height:58px;padding:0;border-radius:18px;border:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  background:linear-gradient(180deg,#2eb8c2,#18748f);
  box-shadow:0 5px 0 #0f5067,0 10px 24px rgba(0,0,0,.45),0 0 20px rgba(79,216,255,.28),inset 0 1px 0 rgba(255,255,255,.38);
  animation:labMainFloat 3.4s ease-in-out infinite,labMainPulse 2.6s ease-in-out infinite;
  overflow:hidden;
}
#splashBtns #btnLabMenu::before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.28),transparent 42%,rgba(0,0,0,.12));pointer-events:none}
#splashBtns #btnLabMenu::after{content:"";position:absolute;inset:-14px;border-radius:24px;background:radial-gradient(circle at 50% 35%,rgba(130,245,255,.24),transparent 58%);pointer-events:none;animation:labSweep 3.8s ease-in-out infinite}
#splashBtns #btnLabMenu:active{transform:scale(.88)}
#splashBtns #btnLabMenu .labMainIcon{position:relative;z-index:1;font-size:21px;line-height:1;filter:drop-shadow(0 0 8px rgba(255,255,255,.42))}
#splashBtns #btnLabMenu .labMainText{position:relative;z-index:1;font-size:10px;line-height:1;font-weight:1000;letter-spacing:1px;text-shadow:0 1px 2px rgba(0,0,0,.68)}
#splashBtns #btnLabMenu .labMainMini{position:relative;z-index:1;font-size:7px;line-height:1;font-weight:1000;letter-spacing:.95px;color:#d8fbff;text-shadow:0 1px 2px rgba(0,0,0,.68)}
@keyframes labMainFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes labMainPulse{0%,100%{box-shadow:0 5px 0 #0f5067,0 10px 24px rgba(0,0,0,.45),0 0 16px rgba(79,216,255,.22),inset 0 1px 0 rgba(255,255,255,.38)}50%{box-shadow:0 5px 0 #0f5067,0 10px 24px rgba(0,0,0,.45),0 0 24px rgba(112,244,255,.44),inset 0 1px 0 rgba(255,255,255,.4)}}
@keyframes labSweep{0%,100%{transform:translateX(-10px);opacity:.55}50%{transform:translateX(10px);opacity:.85}}
@media (max-height:700px){#splashBtns #btnLabMenu{bottom:calc(var(--sab) + 178px);width:52px;height:52px;border-radius:16px}#splashBtns #btnLabMenu .labMainIcon{font-size:19px}#splashBtns #btnLabMenu .labMainText{font-size:9px}#splashBtns #btnLabMenu .labMainMini{font-size:6.6px}}

#labPlacedItems{overflow:visible}
.labPlaced{display:flex;align-items:flex-end;justify-content:center;min-width:74px;min-height:74px;animation:labPlacedFloat 5.6s ease-in-out infinite}
.labPlaced::before{content:'';position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);width:66px;height:16px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.38),rgba(0,0,0,.05) 58%,transparent 72%);filter:blur(2px);pointer-events:none}
.labPlaced::after{content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:64px;height:12px;border-radius:10px;background:linear-gradient(180deg,rgba(125,136,189,.82),rgba(56,62,102,.9));box-shadow:0 3px 0 rgba(20,22,46,.68),inset 0 1px 0 rgba(255,255,255,.2);pointer-events:none}
.labPlaced .labAsset{position:relative;z-index:1;transform-origin:center bottom;filter:drop-shadow(0 9px 12px rgba(0,0,0,.3))}
.labPlaced.item-gold_scope::after{background:linear-gradient(180deg,#f2cb63,#7d5314)}
.labPlaced.item-holo_table::after{background:linear-gradient(180deg,#6ff3ff,#2669a2)}
.labPlaced.item-quantum_desk::after{background:linear-gradient(180deg,#9fbfff,#424e93)}
.labPlaced.item-robot::after{background:linear-gradient(180deg,#9ff7ff,#3d6c83)}
.labPlaced.item-collider::after{background:linear-gradient(180deg,#c39cff,#5d36ad)}
.labPlaced.item-arctic::after{background:linear-gradient(180deg,#d4fbff,#4a89a2)}
.labPlaced.item-mars::after{background:linear-gradient(180deg,#ffb38d,#8b4034)}
.labPlaced.item-nobel_case::after{background:linear-gradient(180deg,#ffe895,#987021)}
.labPlaced.item-gold_scope .labAsset,.labPlaced.item-holo_table .labAsset,.labPlaced.item-quantum_desk .labAsset,.labPlaced.item-robot .labAsset,.labPlaced.item-collider .labAsset,.labPlaced.item-arctic .labAsset,.labPlaced.item-mars .labAsset,.labPlaced.item-nobel_case .labAsset{transform:scale(1.05)}
.labPlaced.item-gold_scope::before{background:radial-gradient(ellipse,rgba(255,215,98,.42),rgba(255,215,98,.08) 55%,transparent 74%)}
.labPlaced.item-holo_table::before{background:radial-gradient(ellipse,rgba(111,243,255,.42),rgba(111,243,255,.08) 55%,transparent 74%)}
.labPlaced.item-quantum_desk::before{background:radial-gradient(ellipse,rgba(134,192,255,.42),rgba(134,192,255,.08) 55%,transparent 74%)}
.labPlaced.item-robot::before{background:radial-gradient(ellipse,rgba(159,247,255,.42),rgba(159,247,255,.08) 55%,transparent 74%)}
.labPlaced.item-collider::before{background:radial-gradient(ellipse,rgba(185,140,255,.42),rgba(185,140,255,.08) 55%,transparent 74%)}
.labPlaced.item-arctic::before{background:radial-gradient(ellipse,rgba(191,251,255,.44),rgba(191,251,255,.08) 55%,transparent 74%)}
.labPlaced.item-mars::before{background:radial-gradient(ellipse,rgba(255,143,104,.42),rgba(255,143,104,.08) 55%,transparent 74%)}
.labPlaced.item-nobel_case::before{background:radial-gradient(ellipse,rgba(255,221,118,.44),rgba(255,221,118,.08) 55%,transparent 74%)}
.labPlaced.item-holo_table .labAsset,.labPlaced.item-collider .labAsset{animation:labPlacedPulse 2.8s ease-in-out infinite}
.labPlaced.item-robot .labAsset{animation:labPlacedBob 3.2s ease-in-out infinite}
.labPlaced.item-mars .labAsset em,.labPlaced.item-gold_scope .labAsset b,.labPlaced.item-holo_table .labAsset em,.labPlaced.item-collider .labAsset b,.labPlaced.item-nobel_case .labAsset i::after{filter:drop-shadow(0 0 8px rgba(255,255,255,.12))}
.labPlaced.slot5::after{width:54px;height:10px}
.labPlaced.slot6::after{width:54px;height:10px}
.labPlaced.nobelCase{min-width:86px}
.labPlaced.nobelCase::after{width:72px;height:13px}
@keyframes labPlacedFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes labPlacedPulse{0%,100%{filter:drop-shadow(0 9px 12px rgba(0,0,0,.3)) brightness(1)}50%{filter:drop-shadow(0 9px 16px rgba(0,0,0,.32)) brightness(1.08)}}
@keyframes labPlacedBob{0%,100%{transform:scale(1.05) rotate(0deg)}50%{transform:scale(1.08) rotate(1.5deg)}}

/* synchronize premium stage look in the lab room */
.labRoom .labAsset.gold_scope i{box-shadow:0 0 14px rgba(255,202,77,.42)}
.labRoom .labAsset.holo_table i{box-shadow:0 0 20px rgba(79,216,255,.34),inset 0 0 18px rgba(157,123,255,.18)}
.labRoom .labAsset.quantum_desk b{box-shadow:0 0 16px rgba(116,193,255,.38), inset 0 0 0 1px rgba(255,255,255,.06)}
.labRoom .labAsset.robot i{box-shadow:0 0 16px rgba(166,249,255,.2)}
.labRoom .labAsset.collider i{box-shadow:0 0 18px rgba(157,123,255,.54),inset 0 0 16px rgba(79,216,255,.36)}
.labRoom .labAsset.arctic i{box-shadow:0 0 18px rgba(123,231,255,.36)}
.labRoom .labAsset.mars i{box-shadow:0 0 16px rgba(255,154,106,.14)}

/* V4.0.3 — correctly docked LAB button and clear ranking rows */
#btnLabMenu.labDockBtn{
  position:absolute;left:18px;bottom:calc(var(--sab) + 206px);width:58px;height:58px;border-radius:18px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:none;z-index:4;
  color:#fff;background:linear-gradient(180deg,#2eb8c2,#18748f);
  box-shadow:0 5px 0 #0f5067,0 10px 20px rgba(0,0,0,.4),0 0 22px rgba(79,216,255,.34),inset 0 2px 3px rgba(255,255,255,.42);
  transition:transform .13s cubic-bezier(.34,1.3,.64,1);overflow:hidden;
  animation:labDockFloat 3.4s ease-in-out infinite,labDockGlow 2.7s ease-in-out infinite;
}
#btnLabMenu.labDockBtn::before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.3),transparent 42%,rgba(0,0,0,.16));pointer-events:none}
#btnLabMenu.labDockBtn::after{content:"";position:absolute;left:-70%;top:-25%;width:52%;height:150%;transform:rotate(20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);animation:labDockSweep 3.8s ease-in-out infinite;pointer-events:none}
#btnLabMenu.labDockBtn:active{transform:scale(.88)}
.labDockIcon,.labDockMain,.labDockMini{position:relative;z-index:1}
.labDockIcon{font-size:20px;line-height:1;filter:drop-shadow(0 0 8px rgba(255,255,255,.45))}
.labDockMain{font-size:10px;line-height:1;font-weight:1000;letter-spacing:1px;text-shadow:0 1px 2px rgba(0,0,0,.68)}
.labDockMini{font-size:7px;line-height:1;font-weight:1000;letter-spacing:.9px;color:#d8fbff;text-shadow:0 1px 2px rgba(0,0,0,.68)}
@keyframes labDockFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes labDockGlow{0%,100%{box-shadow:0 5px 0 #0f5067,0 10px 20px rgba(0,0,0,.4),0 0 16px rgba(79,216,255,.24),inset 0 2px 3px rgba(255,255,255,.42)}50%{box-shadow:0 5px 0 #0f5067,0 10px 20px rgba(0,0,0,.4),0 0 27px rgba(112,244,255,.52),inset 0 2px 3px rgba(255,255,255,.46)}}
@keyframes labDockSweep{0%,55%{left:-70%;opacity:0}70%{opacity:1}100%{left:125%;opacity:0}}
@media (max-height:700px){#btnLabMenu.labDockBtn{bottom:calc(var(--sab) + 178px);width:52px;height:52px;border-radius:16px}.labDockIcon{font-size:18px}.labDockMain{font-size:9px}.labDockMini{font-size:6.3px}}

.hofWorldRow{display:grid;grid-template-columns:28px minmax(0,1fr) auto;grid-template-rows:auto;align-items:center;gap:10px;padding:11px 12px}
.hofWorldRow .rk{width:28px}
.hofRankIdentity{min-width:0;display:flex;flex-direction:column;gap:4px}
.hofRankIdentity .nm{display:block;min-width:0;font-weight:900;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hofRankIdentity small{display:block;color:rgba(220,226,255,.65);font-size:8.2px;font-weight:800;line-height:1.28;white-space:normal}
.hofWorldRow .sc{align-self:center;text-align:right;font-size:13px;white-space:nowrap}
.hofWorldRow.me .hofRankIdentity small{color:#c9bcff}
.hofWorldNotice{display:flex;flex-direction:column;gap:8px}
.hofLocalSummary{padding-top:7px;border-top:1px solid rgba(255,255,255,.09);font-size:9.5px;color:#d8dcf7;line-height:1.45}
.hofLocalSummary b{color:#72e7ff}
.hofRefreshBtn{align-self:stretch;border:1px solid rgba(79,216,255,.42);border-radius:11px;padding:9px 10px;background:linear-gradient(180deg,rgba(46,184,194,.28),rgba(24,116,143,.24));color:#dffcff;font:900 9.5px inherit;letter-spacing:.45px;box-shadow:0 0 14px rgba(79,216,255,.1),inset 0 1px 0 rgba(255,255,255,.08)}
.hofRefreshBtn:disabled{opacity:.62}
@media(max-width:390px){.hofWorldRow{grid-template-columns:25px minmax(0,1fr);gap:8px}.hofWorldRow .sc{grid-column:2;text-align:left;font-size:12px}.hofRankIdentity small{font-size:7.8px}}

/* ================= V4.3.0 LIVE ONLINE DUEL ================= */

#modalBox.onlineDuelModal{width:min(91vw,390px);max-height:calc(100dvh - max(18px,var(--sat)) - max(18px,var(--sab)));overflow-y:auto;text-align:left}
#modalBox.onlineDuelModal h3,#modalBox.onlineDuelModal>.msub{text-align:center}
.duelModeChoice{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:16px 0 12px}
.duelChoice{appearance:none;border:1px solid rgba(255,255,255,.18);border-radius:17px;padding:15px 11px;min-height:132px;background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.035));color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 26px rgba(0,0,0,.22);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.duelChoice:active{transform:scale(.96)}
.duelChoice.local{border-color:rgba(255,92,103,.42)}
.duelChoice.online{border-color:rgba(79,216,255,.52);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 24px rgba(79,216,255,.10),0 10px 26px rgba(0,0,0,.22)}
.duelChoice.quick{grid-column:1/-1;min-height:104px;border-color:rgba(132,255,167,.55);background:linear-gradient(160deg,rgba(64,208,122,.16),rgba(35,116,220,.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 24px rgba(70,225,136,.10),0 10px 26px rgba(0,0,0,.22)}
.duelChoice>span{font-size:25px;line-height:1.1}.duelChoice>b{font-size:13px;letter-spacing:.55px}.duelChoice>small{font-size:10px;line-height:1.35;color:var(--dim);font-weight:700}
.onlineDuelSection{margin:12px 0;padding:12px;border-radius:15px;background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:10px}
.onlineDuelSection>b{font-size:12px;color:var(--cyan);letter-spacing:.7px;text-align:left}
.duelLevelLabel .onlineDuelInput{width:100%;box-sizing:border-box;padding:11px 10px;border-radius:12px;border:1.5px solid var(--line);background:rgba(0,0,0,.32);color:#fff;font:800 14px inherit;outline:none}
.duelLevelLabel .onlineDuelInput:focus{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(79,216,255,.16)}
.duelLevelLabel .onlineDuelInput.code{text-align:center;font-size:24px;letter-spacing:8px;font-weight:1000;font-variant-numeric:tabular-nums}
.onlineDuelOr{display:flex;align-items:center;gap:8px;margin:6px 0;color:var(--dim);font-size:10px;font-weight:1000;letter-spacing:1px}.onlineDuelOr:before,.onlineDuelOr:after{content:"";height:1px;flex:1;background:rgba(255,255,255,.12)}
.onlineDuelNotice{min-height:18px;margin:8px 0;font-size:11px;line-height:1.45;color:var(--dim)}.onlineDuelNotice.error{padding:9px 10px;border-radius:11px;background:rgba(217,59,69,.14);border:1px solid rgba(255,89,99,.38);color:#ffc4c9}
.onlineRoomCode{display:flex;justify-content:center;gap:6px;margin:18px auto 15px}.onlineRoomCode span{display:flex;align-items:center;justify-content:center;width:35px;height:46px;border-radius:10px;background:linear-gradient(180deg,rgba(79,216,255,.20),rgba(35,116,220,.16));border:1px solid rgba(124,226,255,.52);font-size:25px;font-weight:1000;font-variant-numeric:tabular-nums;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 15px rgba(79,216,255,.10)}
.onlineStatusPulse{display:flex;align-items:center;justify-content:center;gap:10px;margin:13px 0;padding:11px;border-radius:13px;background:rgba(0,0,0,.22);color:var(--dim);font-size:11px;line-height:1.4}.onlineStatusPulse i{width:10px;height:10px;border-radius:50%;background:#4fd8ff;box-shadow:0 0 0 0 rgba(79,216,255,.55);animation:onlinePulse 1.4s infinite}
@keyframes onlinePulse{0%{box-shadow:0 0 0 0 rgba(79,216,255,.55)}70%{box-shadow:0 0 0 10px rgba(79,216,255,0)}100%{box-shadow:0 0 0 0 rgba(79,216,255,0)}}
.onlineOpponentBadge{display:inline-flex;align-items:center;justify-content:center;margin:7px auto 10px;padding:9px 15px;border-radius:999px;background:linear-gradient(90deg,rgba(217,59,69,.26),rgba(35,116,220,.28));border:1px solid rgba(255,255,255,.18);font-size:13px;font-weight:1000}
.onlineSyncSpinner{width:38px;height:38px;margin:15px auto;border-radius:50%;border:4px solid rgba(255,255,255,.14);border-top-color:var(--cyan);animation:onlineSpin .8s linear infinite}@keyframes onlineSpin{to{transform:rotate(360deg)}}
.quickMatchRules{margin:13px 0;padding:11px 12px;border-radius:13px;border:1px solid rgba(132,255,167,.28);background:rgba(38,151,92,.10);color:#dfffea;font-size:11px;font-weight:850;line-height:1.5;text-align:center}
.btn.working{opacity:.72}
@media(max-width:390px){.duelModeChoice{grid-template-columns:1fr}.duelChoice{min-height:102px}.duelChoice.quick{grid-column:auto}.onlineRoomCode{gap:4px}.onlineRoomCode span{width:31px;height:42px;font-size:22px}}


/* V4.4.0 — full-screen animated spectator mode, Einstein facts and preset messages */
#modalBox.onlineSpectatorModal{width:min(100vw,560px);height:calc(100dvh - max(8px,var(--sat)) - max(8px,var(--sab)));max-height:none;padding:10px 12px 12px;overflow-y:auto;border-radius:20px;display:flex;flex-direction:column;text-align:left}
.onlineSpectatorTop{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 2px 5px}.onlineSpectatorTop>div:first-child{display:flex;flex-direction:column;gap:3px}.onlineSpectatorTop b{font-size:13px;color:#fff}.onlineSpectatorTop span{font-size:8.5px;color:var(--dim);font-weight:850}.onlineSpectatorTop .onlineOpponentBadge{margin:0;padding:7px 10px;font-size:10px;white-space:nowrap}
#modalBox.onlineSpectatorModal .duelScore{margin:3px 0 6px}
.onlineSpectatorStage{margin:0 auto;padding:8px;width:100%;box-sizing:border-box;border-radius:16px;background:rgba(5,10,26,.88);border:1px solid rgba(79,216,255,.34);box-shadow:inset 0 0 25px rgba(79,216,255,.06);flex:0 0 auto}
.onlineLiveHead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px;font-size:9.5px;color:#dffbff;letter-spacing:.35px}.onlineLiveHead span{color:var(--dim);font-size:9px;font-weight:850;text-align:right}
.onlineSpectatorCanvasWrap{position:relative;width:min(100%,360px);margin:0 auto}
#onlineLiveBoard{display:block;width:100%;height:auto;aspect-ratio:4/5;border-radius:12px;border:1px solid rgba(255,255,255,.17);background:#07101f;image-rendering:auto;box-shadow:0 8px 25px rgba(0,0,0,.34)}
.onlineMoveDirection{position:absolute;left:50%;top:10px;transform:translate(-50%,-8px);padding:7px 11px;border-radius:999px;background:rgba(8,19,42,.94);border:1px solid rgba(255,210,63,.65);color:#fff4a4;font-size:10px;font-weight:1000;letter-spacing:.65px;opacity:0;transition:.16s ease;pointer-events:none;white-space:nowrap}.onlineMoveDirection.on{opacity:1;transform:translate(-50%,0)}
.onlineStatusPulse.compact{margin:7px 0;padding:7px 9px;font-size:9px}
.onlineSpectatorBottom{display:flex;flex-direction:column;gap:7px}
.onlineFactCard{display:grid;grid-template-columns:54px 1fr;align-items:center;gap:9px;margin:0;padding:8px;border-radius:13px;background:linear-gradient(135deg,rgba(157,123,255,.14),rgba(79,216,255,.08));border:1px solid rgba(178,160,255,.28);text-align:left}.onlineFactCard img{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 5px 8px rgba(0,0,0,.3))}.onlineFactCard b{display:block;font-size:8.5px;letter-spacing:.5px;color:#dcd5ff}.onlineFactCard b span{color:#78e8ff}.onlineFactCard p{margin:4px 0 0;font-size:9.6px;line-height:1.35;color:#f1f4ff;font-weight:750}
.onlineQuickMessages{margin:0;padding:8px;border-radius:12px;background:rgba(0,0,0,.20);border:1px solid rgba(255,255,255,.11);text-align:left}.onlineQuickMessages>b{display:block;margin-bottom:6px;font-size:8.5px;letter-spacing:.5px;color:#cfefff}.onlineQuickMessages>div{display:flex;flex-wrap:wrap;gap:5px}.onlineQuickMsgBtn{appearance:none;border:1px solid rgba(79,216,255,.28);border-radius:999px;padding:6px 8px;background:rgba(35,116,220,.16);color:#eefaff;font:850 9px inherit}.onlineQuickMsgBtn:active{transform:scale(.94)}
.onlineSpectatorLeave{width:100%;padding:8px!important;font-size:9px!important}
#modalBox.onlineHiddenWaitModal{width:min(92vw,430px);text-align:center}.onlineHiddenWait{display:flex;flex-direction:column;gap:10px}.onlineHiddenWait h3{margin:0}.onlineHiddenLock{width:62px;height:62px;margin:2px auto 0;display:grid;place-items:center;border-radius:20px;background:linear-gradient(145deg,rgba(79,216,255,.18),rgba(157,123,255,.2));border:1px solid rgba(117,230,255,.36);font-size:29px;box-shadow:0 10px 28px rgba(0,0,0,.3),inset 0 0 18px rgba(79,216,255,.08)}
#modalBox.onlineCountdownModal{width:min(88vw,360px);overflow:hidden}.onlineCountdownCard{display:flex;min-height:270px;flex-direction:column;align-items:center;justify-content:center;gap:13px;text-align:center}.onlineCountdownCard small{font-size:11px;font-weight:1000;letter-spacing:1.6px;color:#90eaff}.onlineCountdownCard b{font-size:92px;line-height:.9;font-weight:1000;color:#fff;text-shadow:0 0 18px rgba(79,216,255,.85),0 0 42px rgba(157,123,255,.6)}.onlineCountdownCard b.pop{animation:onlineCountdownPop .48s ease both}.onlineCountdownCard span{max-width:280px;color:var(--dim);font-size:11px;line-height:1.45;font-weight:800}@keyframes onlineCountdownPop{0%{transform:scale(.7);opacity:.2}35%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:1}}
#onlineMessageToast.error{border-color:rgba(255,110,125,.62)!important;background:rgba(80,16,29,.96)!important;color:#fff0f2!important}

#onlineMessageToast{position:fixed;left:50%;top:calc(max(12px,var(--sat)) + 58px);z-index:99999;max-width:min(86vw,360px);transform:translate(-50%,-18px);padding:10px 14px;border-radius:999px;background:rgba(10,20,42,.96);border:1px solid rgba(79,216,255,.55);box-shadow:0 10px 28px rgba(0,0,0,.42),0 0 18px rgba(79,216,255,.16);color:#fff;font-size:12px;font-weight:900;opacity:0;pointer-events:none;transition:.2s ease}#onlineMessageToast.on{opacity:1;transform:translate(-50%,0)}
#onlineQuickChatBtn{display:none;position:absolute;right:14px;bottom:calc(var(--sab) + 112px);z-index:90;width:45px;height:45px;border:none;border-radius:50%;background:linear-gradient(180deg,#4fd8ff,#2374dc);color:#fff;font-size:20px;box-shadow:0 5px 0 #174f9a,0 8px 20px rgba(0,0,0,.34)}#onlineQuickChatBtn.on{display:block}#onlineQuickChatBtn:active{transform:scale(.9)}
#onlineQuickTray{position:absolute;right:10px;bottom:calc(var(--sab) + 164px);z-index:91;width:min(82vw,300px);padding:11px;border-radius:16px;background:rgba(9,16,35,.97);border:1px solid rgba(79,216,255,.38);box-shadow:0 14px 34px rgba(0,0,0,.52)}#onlineQuickTray .onlineQuickMessages{margin:0;padding:0;border:0;background:transparent}#onlineQuickTray .onlineQuickTrayClose{position:absolute;right:7px;top:5px;width:27px;height:27px;border:none;border-radius:50%;background:rgba(255,255,255,.11);color:#fff;font-size:18px}#onlineQuickTray .onlineQuickMessages>b{padding-right:30px}
@media(max-height:780px){#modalBox.onlineSpectatorModal{padding-top:7px}.onlineSpectatorCanvasWrap{width:min(100%,300px)}.onlineFactCard{grid-template-columns:43px 1fr;padding:6px}.onlineFactCard img{width:41px;height:41px}.onlineFactCard p{font-size:8.8px}.onlineQuickMsgBtn{padding:5px 7px;font-size:8.5px}.onlineStatusPulse.compact{display:none}}
@media(max-height:650px){.onlineSpectatorCanvasWrap{width:min(100%,250px)}.onlineFactCard{display:none}.onlineSpectatorTop b{font-size:11px}.onlineLiveHead{margin-bottom:4px}}
@media(max-width:380px){#modalBox.onlineSpectatorModal{width:100vw;border-radius:16px;padding-left:9px;padding-right:9px}.onlineSpectatorCanvasWrap{width:min(100%,320px)}.onlineSpectatorTop{align-items:flex-start}.onlineSpectatorTop .onlineOpponentBadge{font-size:9px}}


/* V4.5.0 — reconnect grace period and disconnect forfeit protection */
#onlineDisconnectOverlay{position:fixed;inset:0;z-index:100500;display:none;align-items:center;justify-content:center;padding:22px;background:rgba(2,7,18,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#onlineDisconnectOverlay.on{display:flex}
.onlineDisconnectCard{width:min(88vw,350px);padding:24px 20px 21px;border-radius:22px;background:linear-gradient(165deg,rgba(16,31,62,.98),rgba(6,13,31,.98));border:1px solid rgba(108,211,255,.45);box-shadow:0 22px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.12);text-align:center;color:#fff}
.onlineDisconnectIcon{font-size:38px;line-height:1;margin-bottom:10px;animation:onlineDisconnectPulse 1.3s ease-in-out infinite}
.onlineDisconnectCard h3{margin:0 0 8px;font-size:18px;letter-spacing:.2px}
.onlineDisconnectCard p{margin:0;color:#cbd7ef;font-size:12px;font-weight:750;line-height:1.45}
.onlineDisconnectCard small{display:block;margin-top:14px;color:rgba(221,231,255,.62);font-size:9px;line-height:1.4}
.onlineDisconnectClock{display:flex;align-items:baseline;justify-content:center;gap:7px;margin:18px auto 4px;color:#fff3a4}
.onlineDisconnectClock b{font-size:50px;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 0 22px rgba(255,210,63,.35)}
.onlineDisconnectClock span{font-size:11px;font-weight:900;letter-spacing:.4px}
.onlineReconnectDots{display:flex;justify-content:center;gap:8px;margin-top:20px}
.onlineReconnectDots i{width:10px;height:10px;border-radius:50%;background:#59ddff;animation:onlineReconnectDot 1.05s infinite ease-in-out}
.onlineReconnectDots i:nth-child(2){animation-delay:.16s}.onlineReconnectDots i:nth-child(3){animation-delay:.32s}
@keyframes onlineReconnectDot{0%,70%,100%{transform:translateY(0);opacity:.35}35%{transform:translateY(-7px);opacity:1}}
@keyframes onlineDisconnectPulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(79,216,255,0))}50%{transform:scale(1.08);filter:drop-shadow(0 0 12px rgba(79,216,255,.55))}}

/* ================= V4.6.1 — ANIMATED DUEL FINAL SCREENS ================= */
#modalBox.duelFinalModal{
  position:relative;width:min(94vw,430px);max-height:calc(100dvh - max(12px,var(--sat)) - max(12px,var(--sab)));
  overflow-y:auto;padding:10px 11px 12px;border-radius:24px;text-align:center;
  background:linear-gradient(165deg,rgba(10,22,62,.97),rgba(7,8,31,.98));
  border:1.5px solid rgba(94,207,255,.48);box-shadow:0 20px 60px rgba(0,0,0,.65),0 0 38px rgba(64,159,255,.22),inset 0 1px 0 rgba(255,255,255,.12);
  overscroll-behavior:contain;
}
#modalBox.duelFinalModal.duelFinal-loss{border-color:rgba(183,119,255,.52);box-shadow:0 20px 60px rgba(0,0,0,.68),0 0 38px rgba(135,67,220,.22),inset 0 1px 0 rgba(255,255,255,.1)}
#modalBox.duelFinalModal.duelFinal-draw{border-color:rgba(88,218,222,.54)}
.duelFinalScene{
  --result-accent:#ffd54f;position:relative;isolation:isolate;overflow:hidden;border-radius:19px;padding:10px 10px 8px;
  background:
    radial-gradient(circle at 50% 25%,rgba(255,205,74,.24),transparent 31%),
    radial-gradient(circle at 20% 76%,rgba(52,155,255,.22),transparent 32%),
    linear-gradient(180deg,rgba(11,39,91,.95),rgba(8,16,52,.96));
  border:1px solid rgba(118,211,255,.35);box-shadow:inset 0 0 34px rgba(0,0,0,.45);
}
.duelFinalScene.loss{--result-accent:#b88aff;background:radial-gradient(circle at 50% 30%,rgba(154,93,235,.22),transparent 33%),radial-gradient(circle at 20% 78%,rgba(55,141,229,.16),transparent 32%),linear-gradient(180deg,rgba(25,24,72,.97),rgba(9,12,44,.98));border-color:rgba(188,139,255,.36)}
.duelFinalScene.draw{--result-accent:#64e6e3;background:radial-gradient(circle at 50% 28%,rgba(88,224,220,.2),transparent 34%),linear-gradient(180deg,rgba(13,51,78,.96),rgba(8,18,48,.98))}
.duelFinalScene::after{content:'';position:absolute;inset:0;z-index:-1;opacity:.24;background-image:radial-gradient(circle at 20% 20%,rgba(255,255,255,.55) 0 1px,transparent 1.6px),radial-gradient(circle at 78% 42%,rgba(126,211,255,.7) 0 1px,transparent 1.7px);background-size:37px 37px,51px 51px;animation:duelResultStars 8s linear infinite}
.duelFinalBrand{position:relative;z-index:2;font-size:clamp(17px,5.1vw,24px);font-weight:1000;letter-spacing:1.4px;color:#eaf7ff;text-shadow:0 2px 0 #174581,0 0 18px rgba(84,192,255,.75)}
.duelFinalBrand span{display:inline-block;color:#59dfff;animation:duelAtomSpin 5s linear infinite}
.duelForfeitBadge{display:inline-flex;margin:5px auto 0;padding:4px 9px;border-radius:999px;background:rgba(255,126,80,.18);border:1px solid rgba(255,176,118,.55);color:#ffd2af;font-size:9px;font-weight:1000;letter-spacing:.8px}
.duelFinalHeadline{position:relative;z-index:2;margin:5px 0 0;font-size:clamp(31px,10.5vw,48px);line-height:.98;font-weight:1000;letter-spacing:-1px;color:#ffd94f;-webkit-text-stroke:1px rgba(118,58,0,.75);text-shadow:0 4px 0 #8c4800,0 8px 18px rgba(0,0,0,.48),0 0 22px rgba(255,207,58,.7);transform:scale(.72);opacity:0}
.duelFinal-loss .duelFinalHeadline{color:#e2d9f4;-webkit-text-stroke:1px rgba(51,30,93,.8);text-shadow:0 4px 0 #583c84,0 8px 18px rgba(0,0,0,.52),0 0 18px rgba(170,107,255,.55)}
.duelFinal-draw .duelFinalHeadline{color:#bafdf7;-webkit-text-stroke:1px rgba(11,81,88,.8);text-shadow:0 4px 0 #166e77,0 8px 18px rgba(0,0,0,.5),0 0 18px rgba(91,229,224,.58)}
.duelFinalReady .duelFinalHeadline{animation:duelHeadlinePop .75s cubic-bezier(.15,1.55,.36,1) forwards}
.duelVictoryCup{position:relative;z-index:2;width:132px;height:112px;margin:-2px auto 0;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 12px 16px rgba(0,0,0,.42)) drop-shadow(0 0 24px rgba(255,196,43,.75));transform:translateY(18px) scale(.72);opacity:0}
.duelVictoryCup>span{font-size:96px;line-height:1;transform-origin:50% 85%}
.duelVictoryCup>b{position:absolute;top:44px;left:50%;transform:translateX(-50%);font-size:29px;color:#fff4a7;text-shadow:0 0 8px #fff,0 0 16px #ffb300}
.duelFinalReady .duelVictoryCup{animation:duelTrophyLand .9s .16s cubic-bezier(.16,1.35,.3,1) forwards}
.duelFinalReady .duelVictoryCup>span{animation:duelTrophyFloat 2s 1.05s ease-in-out infinite}
.duelDefeatCoin{position:relative;z-index:2;width:112px;height:112px;margin:7px auto 5px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 34% 27%,#e9e8f2,#9c98ae 52%,#545268 82%);border:6px solid #b9b5ca;box-shadow:inset 0 0 0 3px #656276,0 12px 20px rgba(0,0,0,.42),0 0 24px rgba(166,105,255,.48);transform:translateY(-12px) rotate(-8deg);opacity:0}
.duelDefeatCoin span{font-size:58px;color:#5a5670;text-shadow:0 2px 1px rgba(255,255,255,.42)}
.duelDefeatCoin i,.duelDefeatCoin i::after{position:absolute;content:'';width:5px;height:98px;background:linear-gradient(180deg,transparent,#423d57 12%,#2d293f 55%,transparent);transform:rotate(22deg);border-radius:99px}
.duelDefeatCoin i::after{height:48px;left:13px;top:42px;transform:rotate(33deg)}
.duelFinalReady .duelDefeatCoin{animation:duelDefeatDrop .72s .12s cubic-bezier(.25,1.25,.35,1) forwards}
.duelDrawEmblem{position:relative;z-index:2;width:116px;height:102px;margin:4px auto;display:flex;align-items:center;justify-content:center;gap:3px;color:#bdfcf7;filter:drop-shadow(0 0 18px rgba(88,226,221,.65));opacity:0;transform:scale(.65)}
.duelDrawEmblem span{font-size:67px}.duelDrawEmblem b{font-size:30px}
.duelFinalReady .duelDrawEmblem{animation:duelHeadlinePop .72s .12s cubic-bezier(.15,1.5,.35,1) forwards}
.duelFinalScoreCard{position:relative;z-index:3;margin:0 2px;padding:7px 8px 4px;border-radius:16px;background:linear-gradient(180deg,rgba(13,63,126,.87),rgba(8,27,75,.92));border:1.5px solid rgba(96,214,255,.65);box-shadow:0 0 20px rgba(58,177,255,.25),inset 0 0 18px rgba(15,95,172,.22);opacity:0;transform:translateY(12px)}
.duelFinal-loss .duelFinalScoreCard{border-color:rgba(180,121,255,.62);box-shadow:0 0 20px rgba(142,81,232,.22),inset 0 0 18px rgba(93,55,158,.18)}
.duelFinalReady .duelFinalScoreCard{animation:duelResultRise .55s .38s ease forwards}
.duelFinalScoreLabel{font-size:10px;font-weight:1000;letter-spacing:1px;color:#8cecff}
.duelFinalScoreCard .duelMatchScore{margin:5px 0 4px;padding:7px 8px;background:rgba(0,0,0,.2);border-color:rgba(255,255,255,.11)}
.duelFinalScoreCard .duelMatchScore b{font-size:26px;text-shadow:0 0 12px rgba(255,255,255,.35)}
.duelFinalScoreCard .duelRoundHistory{margin:5px 0 3px;gap:4px}
.duelFinalScoreCard .duelRoundHistory span{padding:4px 7px;font-size:8.5px;background:rgba(255,255,255,.07)}
.duelFinalScientist{position:relative;z-index:3;display:grid;grid-template-columns:86px minmax(0,1fr);align-items:end;gap:6px;margin:6px 0 0;opacity:0;transform:translateY(14px)}
.duelFinalReady .duelFinalScientist{animation:duelResultRise .55s .55s ease forwards}
.duelFinalScientist img{width:91px;height:101px;object-fit:cover;object-position:50% 18%;align-self:end;filter:drop-shadow(0 7px 7px rgba(0,0,0,.5));transform-origin:50% 90%}
.duelFinalScientist.cheer img{animation:duelEinsteinCheer 1.2s .9s ease-in-out infinite}
.duelFinalScientist.support img{filter:saturate(.82) brightness(.9) drop-shadow(0 7px 7px rgba(0,0,0,.55));animation:duelEinsteinSupport 2.5s .8s ease-in-out infinite}
.duelFinalScientist.draw img{animation:duelEinsteinSupport 2.2s .8s ease-in-out infinite}
.duelFinalBubble{position:relative;margin-bottom:6px;padding:10px 10px 9px;border-radius:17px 17px 17px 5px;background:#f8fbff;color:#15346e;border:2px solid rgba(105,205,255,.85);box-shadow:0 7px 16px rgba(0,0,0,.36);text-align:left}
.duelFinalBubble::before{content:'';position:absolute;left:-10px;bottom:3px;border-width:8px 11px 3px 0;border-style:solid;border-color:transparent #f8fbff transparent transparent}
.duelFinalBubble b{display:block;font-size:12.5px;line-height:1.25}.duelFinalBubble span{display:inline-flex;margin-top:5px;padding:3px 7px;border-radius:999px;background:rgba(45,131,236,.13);color:#216bc2;font-size:8px;font-weight:1000;letter-spacing:.7px}
.duelFinal-loss .duelFinalBubble{border-color:rgba(191,144,255,.82);color:#35245f}.duelFinal-loss .duelFinalBubble span{background:rgba(142,84,219,.14);color:#7944bc}
.duelFinalSubtext{position:relative;z-index:3;margin:0 6px 3px;color:#b9c8e8;font-size:9.5px;font-weight:750;line-height:1.3}
.duelFinalConfetti{position:absolute;inset:-10px 0 0;z-index:6;pointer-events:none;overflow:hidden}
.duelFinalConfetti i{position:absolute;top:-14px;left:var(--cf-x);width:var(--cf-size);height:calc(var(--cf-size) * 1.7);border-radius:2px;background:var(--cf-color);opacity:0;transform:rotate(var(--cf-rot));box-shadow:0 0 5px var(--cf-color);animation:duelConfettiFall var(--cf-dur) var(--cf-delay) linear 2}
.duelFinalActions{position:relative;z-index:7;display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important;margin:9px 2px 0!important}
.duelFinalActions.three{grid-template-columns:1fr 1fr}.duelFinalActions.three #mDuelMenu{grid-column:1/-1}
#modalBox.duelFinalModal .duelFinalActions .btn{min-height:47px;padding:10px 7px;font-size:13px}
#modalBox.duelFinalModal>.onlineQuickMessages{margin:7px 1px 0;padding:7px}
#modalBox.duelFinalModal .onlineQuickMsgBtn{padding:6px 8px;font-size:9px}
@keyframes duelHeadlinePop{0%{opacity:0;transform:scale(.72) translateY(-8px)}65%{opacity:1;transform:scale(1.08) translateY(0)}100%{opacity:1;transform:scale(1)}}
@keyframes duelTrophyLand{0%{opacity:0;transform:translateY(-28px) scale(.55) rotate(-8deg)}68%{opacity:1;transform:translateY(3px) scale(1.08) rotate(3deg)}100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@keyframes duelTrophyFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}
@keyframes duelDefeatDrop{0%{opacity:0;transform:translateY(-28px) rotate(-18deg) scale(.7)}70%{opacity:1;transform:translateY(4px) rotate(-5deg) scale(1.04)}100%{opacity:1;transform:translateY(0) rotate(-8deg) scale(1)}}
@keyframes duelResultRise{to{opacity:1;transform:translateY(0)}}
@keyframes duelEinsteinCheer{0%,100%{transform:translateY(0) rotate(-1deg)}35%{transform:translateY(-6px) rotate(2deg)}65%{transform:translateY(0) rotate(-2deg)}}
@keyframes duelEinsteinSupport{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg) translateY(-2px)}}
@keyframes duelConfettiFall{0%{opacity:0;transform:translate3d(0,-5px,0) rotate(var(--cf-rot))}8%{opacity:1}100%{opacity:.95;transform:translate3d(var(--cf-drift),440px,0) rotate(calc(var(--cf-rot) + 720deg))}}
@keyframes duelResultStars{to{background-position:37px 74px,-51px 102px}}
@keyframes duelAtomSpin{to{transform:rotate(360deg)}}
@media(max-height:760px){
  #modalBox.duelFinalModal{padding-top:7px;padding-bottom:8px}.duelFinalScene{padding-top:7px}.duelFinalHeadline{font-size:clamp(28px,8.8vw,40px)}
  .duelVictoryCup{width:104px;height:85px}.duelVictoryCup>span{font-size:75px}.duelVictoryCup>b{top:33px;font-size:23px}
  .duelDefeatCoin{width:87px;height:87px;border-width:5px}.duelDefeatCoin span{font-size:44px}.duelDefeatCoin i{height:76px}
  .duelFinalScientist{grid-template-columns:70px minmax(0,1fr);margin-top:3px}.duelFinalScientist img{width:74px;height:80px}.duelFinalBubble{padding:8px}.duelFinalBubble b{font-size:11px}
  .duelFinalScoreCard .duelRoundHistory{display:none}.duelFinalSubtext{font-size:8.5px}.duelFinalActions{margin-top:6px!important}
}
@media(max-width:360px){
  #modalBox.duelFinalModal{width:96vw;padding-left:7px;padding-right:7px}.duelFinalScene{padding-left:7px;padding-right:7px}
  .duelFinalScoreCard .duelMatchScore span{font-size:9px}.duelFinalScoreCard .duelMatchScore b{font-size:22px}.duelFinalActions{gap:6px!important}
}
@media(prefers-reduced-motion:reduce){
  .duelFinalHeadline,.duelVictoryCup,.duelDefeatCoin,.duelDrawEmblem,.duelFinalScoreCard,.duelFinalScientist{opacity:1!important;transform:none!important;animation:none!important}
  .duelFinalConfetti{display:none}.duelFinalScientist img,.duelFinalBrand span,.duelFinalScene::after{animation:none!important}
}


/* ================= V4.8.0 DUEL RANK + TROPHY CABINET ================= */
#labTabs{grid-template-columns:repeat(4,minmax(0,1fr));}
#labTabs .labTab{min-width:0;padding-left:5px;padding-right:5px;font-size:clamp(9px,2.5vw,12px)}
#duelRewardHero{margin:10px 0 16px;padding:16px;border:1px solid rgba(147,120,255,.42);border-radius:20px;background:linear-gradient(145deg,rgba(31,25,75,.96),rgba(11,18,50,.96));box-shadow:inset 0 0 32px rgba(95,77,220,.18)}
.duelRewardProfile{display:grid;grid-template-columns:76px 1fr;gap:14px;align-items:center}
.duelRewardAvatar{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font-size:34px;background:#171a3f;border:4px solid #8c7cff;box-shadow:0 0 24px rgba(140,124,255,.55)}
.duelRewardAvatar.frame-bronze{border-color:#b36b3c}.duelRewardAvatar.frame-gold{border-color:#ffd052;box-shadow:0 0 25px rgba(255,208,82,.65)}.duelRewardAvatar.frame-diamond{border-color:#76eaff;box-shadow:0 0 27px rgba(118,234,255,.7)}.duelRewardAvatar.frame-nobel{border-color:#fff2a6;box-shadow:0 0 8px #fff,0 0 30px #f9c84c}.duelRewardAvatar.frame-week{border-color:#7de2ff;box-shadow:0 0 30px #3d8cff}.duelRewardAvatar.frame-month{border-color:#ff78e7;box-shadow:0 0 32px #a759ff}
.duelRewardProfile b{display:block;font-size:18px}.duelRewardProfile small{display:block;color:#b9b6d8;margin-top:4px}.duelRewardRating{margin-top:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.duelRewardRating strong{font-size:22px;color:#fff}.duelLeaguePill{padding:5px 9px;border-radius:999px;background:rgba(129,103,255,.18);border:1px solid rgba(150,130,255,.4);font-size:11px;font-weight:800}
.duelRewardGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px}.duelRewardCard{border:1px solid rgba(255,255,255,.13);border-radius:15px;padding:11px;background:rgba(13,16,46,.78);min-height:118px;display:flex;flex-direction:column;gap:5px}.duelRewardCard.locked{filter:grayscale(.9);opacity:.5}.duelRewardCard.active{border-color:#7de6ff;box-shadow:0 0 18px rgba(67,199,255,.25)}.duelRewardCard .rewardIcon{font-size:30px}.duelRewardCard b{font-size:12px}.duelRewardCard small{font-size:10px;color:#b9b6d8;flex:1}.duelRewardCard button{font-size:10px;padding:7px 5px;margin-top:4px}
.duelBadgeShelf,.duelCupShelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:16px}.duelBadge,.duelCup{min-height:92px;border-radius:15px;border:1px solid rgba(255,255,255,.12);background:rgba(14,17,48,.82);padding:9px;text-align:center;display:grid;place-items:center;align-content:center;gap:4px}.duelBadge.locked,.duelCup.locked{filter:grayscale(1);opacity:.35}.duelBadge span,.duelCup span{font-size:30px}.duelBadge b,.duelCup b{font-size:9px}.duelCup small{font-size:8px;color:#b9b6d8}
#duelRewardStatus{font-size:11px;color:#aaa8ce;text-align:center;padding:4px 8px 18px}
#hofTopTabs{grid-template-columns:repeat(3,minmax(0,1fr))}.hofTopTab{min-width:0;font-size:clamp(9px,2.7vw,12px)}
#duelRankSummary{margin:10px 0 12px}.duelRankHero{padding:14px;border-radius:17px;background:linear-gradient(135deg,rgba(83,55,180,.35),rgba(18,32,74,.92));border:1px solid rgba(142,126,255,.35)}.duelRankHeroTop{display:flex;justify-content:space-between;align-items:center;gap:10px}.duelRankHeroTop b{font-size:17px}.duelRankHeroTop span{font-size:13px;font-weight:900;color:#d8d1ff}.duelRankStats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:11px}.duelRankStats div{background:rgba(5,8,30,.45);border-radius:10px;padding:7px 3px;text-align:center}.duelRankStats strong{display:block;font-size:15px}.duelRankStats small{font-size:8px;color:#aaa8ce}
#duelRankTabs{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:10px 0}.duelRankTab{border:1px solid rgba(255,255,255,.14);background:#171943;color:#bdb8df;border-radius:12px;padding:9px 3px;font-size:10px;font-weight:900}.duelRankTab.on{background:linear-gradient(135deg,#5a4fd1,#278fd6);color:white;border-color:#8fdfff}
#duelRankPeriodLabel{text-align:center;color:#aaa8ce;font-size:11px;margin:7px 0}.duelRankRow{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:8px;align-items:center;padding:10px;margin:7px 0;border-radius:14px;background:rgba(18,21,58,.86);border:1px solid rgba(255,255,255,.1)}.duelRankRow.me{border-color:#70dcff;background:rgba(35,72,116,.45)}.duelRankRow.top1{box-shadow:inset 0 0 0 1px #f7d65b}.duelRankRow .rk{text-align:center;font-weight:900}.duelRankIdentity b{display:block;font-size:12px}.duelRankIdentity small{display:block;color:#aaa8ce;font-size:9px;margin-top:2px}.duelRankScore{text-align:right}.duelRankScore b{display:block;font-size:13px}.duelRankScore small{display:block;font-size:8px;color:#aaa8ce}.duelRankNotice{padding:15px;text-align:center;color:#aaa8ce;font-size:11px}
.duelRatedResult{margin:10px 0;padding:10px 12px;border-radius:14px;background:rgba(74,55,150,.2);border:1px solid rgba(134,112,255,.35);display:flex;justify-content:space-between;align-items:center;gap:10px}.duelRatedResult strong{font-size:18px}.duelRatedResult .gain{color:#70f1a2}.duelRatedResult .loss{color:#ff8fa1}
@media(max-width:350px){.duelRewardGrid{grid-template-columns:1fr}.duelBadgeShelf,.duelCupShelf{grid-template-columns:repeat(2,minmax(0,1fr))}.duelRankStats{grid-template-columns:repeat(2,1fr)}}

/* V4.8.0 — equipped Duel frames are visible beside player names online. */
.duelMatchScore .duelPlayerStyle{padding:5px 7px;border:1px solid transparent;border-radius:10px;background:rgba(255,255,255,.035)}
.duelMatchScore .duelPlayerStyle.frame-bronze{border-color:rgba(179,107,60,.75)}
.duelMatchScore .duelPlayerStyle.frame-gold{border-color:#ffd052;box-shadow:0 0 11px rgba(255,208,82,.42)}
.duelMatchScore .duelPlayerStyle.frame-diamond{border-color:#76eaff;box-shadow:0 0 12px rgba(118,234,255,.46)}
.duelMatchScore .duelPlayerStyle.frame-nobel{border-color:#fff2a6;box-shadow:0 0 5px #fff,0 0 14px rgba(249,200,76,.65)}
.duelMatchScore .duelPlayerStyle.frame-week{border-color:#7de2ff;box-shadow:0 0 13px rgba(61,140,255,.62)}
.duelMatchScore .duelPlayerStyle.frame-month{border-color:#ff78e7;box-shadow:0 0 14px rgba(167,89,255,.7)}


/* V4.8.1 Premium Duel Rewards Screen */
#labRewardsPane{padding-bottom:18px}
#duelRewardHero{margin:10px 0 16px}
.duelRewardHeroCard{display:grid;grid-template-columns:92px 1fr;gap:14px;align-items:center;padding:16px;border-radius:24px;border:1px solid rgba(81,199,255,.35);background:radial-gradient(circle at top left,rgba(27,74,170,.5),rgba(8,18,54,.96) 45%),linear-gradient(135deg,rgba(10,13,36,.98),rgba(14,21,61,.96));box-shadow:0 16px 34px rgba(0,0,0,.35),inset 0 0 30px rgba(68,158,255,.12)}
.duelHeroAvatarWrap{display:grid;place-items:center}
.duelRewardAvatar{position:relative;width:82px;height:82px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 30%,#1a3e92,#08122f);border:4px solid #8c7cff;box-shadow:0 0 24px rgba(140,124,255,.55)}
.duelRewardAvatar span{font-weight:900;font-size:28px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.45)}
.rewardFramePreview{width:58px;height:58px;border-radius:16px;border:4px solid rgba(255,255,255,.18);display:block;margin:4px auto 2px;background:rgba(7,15,48,.75);box-shadow:inset 0 0 0 2px rgba(255,255,255,.04)}
.rewardFramePreview.frame-bronze,.duelRewardAvatar.frame-bronze{border-color:#b87943;box-shadow:0 0 18px rgba(184,121,67,.55)}
.rewardFramePreview.frame-gold,.duelRewardAvatar.frame-gold{border-color:#ffd45f;box-shadow:0 0 25px rgba(255,212,95,.6)}
.rewardFramePreview.frame-diamond,.duelRewardAvatar.frame-diamond{border-color:#7decff;box-shadow:0 0 25px rgba(125,236,255,.7)}
.rewardFramePreview.frame-nobel,.duelRewardAvatar.frame-nobel{border-color:#fff0a0;box-shadow:0 0 8px #fff,0 0 28px rgba(249,200,76,.7)}
.rewardFramePreview.frame-week,.duelRewardAvatar.frame-week{border-color:#78dfff;box-shadow:0 0 24px rgba(61,140,255,.6)}
.rewardFramePreview.frame-month,.duelRewardAvatar.frame-month{border-color:#ff7ce8;box-shadow:0 0 28px rgba(167,89,255,.65)}
.duelHeroMain{display:grid;grid-template-columns:minmax(0,1fr) minmax(170px,220px);gap:14px;align-items:center}
.duelHeroName b{display:block;font-size:clamp(22px,5vw,34px);line-height:1.05}
.duelHeroName small{display:block;color:#bfe1ff;font-size:clamp(13px,3vw,18px);margin-top:4px}
.duelHeroActive{display:inline-flex;margin-top:10px;padding:7px 12px;border-radius:999px;background:rgba(37,225,180,.16);color:#6bffd9;border:1px solid rgba(81,255,208,.35);font-weight:800;font-size:12px;letter-spacing:.4px}
.duelHeroLeague{display:grid;grid-template-columns:82px 1fr;gap:12px;align-items:center}
.duelLeagueMedal{width:82px;height:82px;border-radius:24px;display:grid;place-items:center;font-size:38px;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.15),rgba(255,255,255,.03)),linear-gradient(145deg,#2a224d,#0f1230);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 0 20px rgba(255,255,255,.06),0 10px 22px rgba(0,0,0,.26)}
.duelLeagueMedal.duel-gold{background:radial-gradient(circle at 30% 30%,#fff2aa,#b27800 72%)}
.duelLeagueMedal.duel-bronze{background:radial-gradient(circle at 30% 30%,#ffd3b1,#7d4725 72%)}
.duelLeagueMedal.duel-silver{background:radial-gradient(circle at 30% 30%,#ffffff,#6d748a 72%)}
.duelLeagueMedal.duel-platinum{background:radial-gradient(circle at 30% 30%,#d6cfff,#5f55b2 72%)}
.duelLeagueMedal.duel-diamond{background:radial-gradient(circle at 30% 30%,#dcffff,#2495ce 72%)}
.duelLeagueMedal.duel-professor{background:radial-gradient(circle at 30% 30%,#f0d8ff,#6f31b5 72%)}
.duelLeagueMedal.duel-nobel{background:radial-gradient(circle at 30% 30%,#fffce0,#c7921d 72%)}
.duelHeroLeague strong{display:block;font-size:clamp(18px,4vw,30px);color:#ffd45f;line-height:1.05}
.duelHeroLeague small{display:block;color:#e6f3ff;font-size:14px;margin:4px 0 8px}
.duelProgress{height:12px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 8px rgba(0,0,0,.35)}
.duelProgress i{display:block;height:100%;background:linear-gradient(90deg,#f6c23d,#ffde75 38%,#7c54ff);box-shadow:0 0 16px rgba(246,194,61,.55)}
.duelHeroLeague em{display:block;margin-top:7px;font-style:normal;color:#c8d7ff;font-size:12px}
.duelRewardGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
.duelRewardCard{position:relative;border-radius:18px;padding:12px;background:linear-gradient(180deg,rgba(16,25,70,.98),rgba(8,15,47,.96));border:1px solid rgba(110,154,255,.18);box-shadow:0 10px 18px rgba(0,0,0,.2);min-height:168px;display:flex;flex-direction:column;gap:7px;overflow:hidden}
.duelRewardCard:before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 28%);opacity:.8}
.duelRewardCard.active{border-color:#75e9ff;box-shadow:0 0 0 1px rgba(117,233,255,.45),0 0 20px rgba(55,191,255,.18)}
.duelRewardCard.locked{filter:saturate(.45) brightness(.76)}
.duelRewardCard .rewardIcon{font-size:28px}
.duelRewardCard b{font-size:14px;line-height:1.2}
.duelRewardCard small{font-size:11px;color:#c0c9ea;flex:1;line-height:1.35}
.duelRewardCard .rewardMeta{font-size:10px;letter-spacing:.3px;font-weight:800;color:#7ef7cb}
.duelRewardCard.rarity-legendary{border-color:rgba(255,210,94,.32)}
.duelRewardCard.rarity-epic{border-color:rgba(184,117,255,.28)}
.duelRewardCard.rarity-rare{border-color:rgba(67,203,255,.24)}
.duelRewardCard button{margin-top:4px}
#duelRewardCabinet{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);gap:14px;margin-bottom:14px}
.duelCupShelf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px;border-radius:20px;background:linear-gradient(180deg,rgba(12,20,59,.96),rgba(9,14,39,.96));border:1px solid rgba(109,145,255,.16)}
.duelCup{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;min-height:120px;padding:12px;border-radius:18px;background:linear-gradient(180deg,rgba(88,59,9,.28),rgba(30,18,7,.35));border:1px solid rgba(255,198,83,.22);text-align:center;box-shadow:inset 0 0 18px rgba(255,196,86,.06)}
.duelCup span{font-size:34px;filter:drop-shadow(0 3px 8px rgba(255,207,84,.35))}
.duelCup b{font-size:14px;line-height:1.2}
.duelCup small{font-size:11px;color:#d4d7e9;line-height:1.3}
.duelCup.locked{background:linear-gradient(180deg,rgba(27,29,51,.82),rgba(13,16,33,.82));border-color:rgba(255,255,255,.08)}
.rewardSpotlightCard{height:100%;display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:22px;background:radial-gradient(circle at top center,rgba(255,198,74,.12),transparent 35%),linear-gradient(180deg,rgba(14,26,68,.98),rgba(9,15,43,.98));border:1px solid rgba(255,210,94,.24);box-shadow:0 14px 24px rgba(0,0,0,.22)}
.rewardSpotDr{align-self:flex-end;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:30px;background:linear-gradient(145deg,#31439f,#0f1d52);box-shadow:0 8px 18px rgba(0,0,0,.24)}
.rewardSpotSpeech{padding:10px 12px;border-radius:16px;background:rgba(23,39,91,.74);color:#dce9ff;font-size:12px;line-height:1.4;border:1px solid rgba(113,164,255,.16)}
.rewardSpotBody{display:flex;flex-direction:column;gap:10px;flex:1}
.rewardSpotTop{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center}
.rewardSpotIcon{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;font-size:28px;background:radial-gradient(circle at 30% 30%,#ffe694,#8d6400 72%);box-shadow:0 0 18px rgba(255,210,94,.38)}
.rewardSpotTop b{display:block;font-size:20px;line-height:1.1;color:#ffd85a}
.rewardSpotTop small{display:block;color:#b5c7f8;font-size:11px;letter-spacing:.4px;font-weight:800}
.rewardSpotBody p{margin:0;color:#d4dcfa;font-size:13px;line-height:1.45;flex:1}
.rewardSpotBtn.btn.gold{background:linear-gradient(180deg,#ffde73,#ffc72d);color:#261a00;box-shadow:0 10px 18px rgba(255,199,45,.28)}
.duelBadgeShelf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.duelBadge{min-height:112px;border-radius:18px;padding:12px;text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(17,24,62,.95),rgba(7,13,36,.95));border:1px solid rgba(110,149,255,.18)}
.duelBadge span{font-size:32px}
.duelBadge b{font-size:14px}
.duelBadge small{font-size:11px;color:#c9d1ee}
.duelBadge.locked{filter:grayscale(.9);opacity:.55}
.duelBadge.duel-gold{box-shadow:inset 0 0 18px rgba(255,210,94,.06)}
#duelRewardStatus{font-size:11px;color:#aeb8e4;text-align:center;padding:10px 8px 6px}
@media(max-width:860px){#duelRewardCabinet{grid-template-columns:1fr}.duelHeroMain{grid-template-columns:1fr}.duelBadgeShelf{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.duelRewardGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.duelHeroLeague{grid-template-columns:72px 1fr}.duelLeagueMedal{width:72px;height:72px;font-size:32px}.duelBadgeShelf{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.duelRewardHeroCard{grid-template-columns:1fr;justify-items:center;text-align:center}.duelHeroMain{grid-template-columns:1fr}.duelHeroLeague{grid-template-columns:1fr;justify-items:center}.duelRewardGrid{grid-template-columns:1fr}.duelCupShelf{grid-template-columns:1fr 1fr}.duelBadgeShelf{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* V4.8.2 Animations and glow for rewards screen */
@keyframes rewardFloat {0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes rewardPulse {0%,100%{box-shadow:0 0 0 rgba(255,212,95,.0),0 0 22px rgba(68,158,255,.12)}50%{box-shadow:0 0 20px rgba(255,212,95,.22),0 0 36px rgba(68,158,255,.18)}}
@keyframes rewardShimmer {0%{transform:translateX(-120%) skewX(-18deg);opacity:0}15%{opacity:.65}50%{opacity:.35}100%{transform:translateX(220%) skewX(-18deg);opacity:0}}
@keyframes rewardGlowText {0%,100%{text-shadow:0 0 8px rgba(255,214,96,.18)}50%{text-shadow:0 0 20px rgba(255,214,96,.45),0 0 36px rgba(90,173,255,.18)}}
@keyframes rewardOrbit {0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes rewardSparkle {0%,100%{opacity:.25;transform:scale(.92)}50%{opacity:.95;transform:scale(1.08)}}
@keyframes progressSweep {0%{transform:translateX(-140%)}100%{transform:translateX(220%)}}
#duelRewardHero{position:relative}
.duelRewardHeroCard{position:relative;overflow:hidden;animation:rewardPulse 4.8s ease-in-out infinite}
.duelRewardHeroCard:after{content:'';position:absolute;inset:-10% auto auto -20%;width:45%;height:140%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);filter:blur(2px);transform:translateX(-120%) skewX(-18deg);animation:rewardShimmer 5.8s linear infinite;pointer-events:none}
.duelHeroAvatarWrap,.rewardSpotDr{animation:rewardFloat 3.8s ease-in-out infinite}
.duelRewardAvatar:before{content:'';position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(127,225,255,.18);box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 0 20px rgba(103,159,255,.16);animation:rewardSparkle 2.6s ease-in-out infinite}
.duelHeroName b,.duelHeroLeague strong,.rewardSpotTop b{animation:rewardGlowText 3.6s ease-in-out infinite}
.duelLeagueMedal{position:relative;overflow:hidden;animation:rewardFloat 4.2s ease-in-out infinite}
.duelLeagueMedal:after{content:'';position:absolute;inset:0;background:conic-gradient(from 0deg,transparent 0 65%,rgba(255,255,255,.26) 75%,transparent 84%);mix-blend-mode:screen;opacity:.35;animation:rewardOrbit 6s linear infinite}
.duelProgress{position:relative}
.duelProgress:after{content:'';position:absolute;top:0;bottom:0;width:38%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);transform:translateX(-140%);animation:progressSweep 2.8s linear infinite}
.duelRewardCard,.duelCup,.duelBadge,.rewardSpotlightCard{position:relative;overflow:hidden;transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease}
.duelRewardCard.active,.duelCup:not(.locked),.duelBadge:not(.locked),.rewardSpotlightCard{box-shadow:0 10px 24px rgba(0,0,0,.22),0 0 24px rgba(77,150,255,.08)}
.duelRewardCard.active:after,.duelCup:not(.locked):after,.duelBadge:not(.locked):after,.rewardSpotlightCard:after{content:'';position:absolute;top:-25%;left:-30%;width:45%;height:150%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transform:translateX(-140%) skewX(-20deg);animation:rewardShimmer 7s linear infinite;pointer-events:none}
.duelRewardCard.active:hover,.duelCup:not(.locked):hover,.duelBadge:not(.locked):hover,.rewardSpotlightCard:hover{transform:translateY(-2px);border-color:rgba(123,231,255,.42)}
.duelRewardCard .rewardMeta{display:inline-flex;align-items:center;gap:5px;background:rgba(20,42,88,.56);padding:4px 8px;border-radius:999px;width:max-content}
.rewardFramePreview{position:relative}
.rewardFramePreview:after{content:'';position:absolute;inset:-6px;border-radius:18px;border:1px solid rgba(255,255,255,.06);opacity:.8}
.duelCup.hero{grid-column:1/-1}
.duelCup.champion{animation:rewardPulse 4.6s ease-in-out infinite}
.rewardSpotIcon{position:relative;overflow:hidden;animation:rewardFloat 3s ease-in-out infinite}
.rewardSpotIcon:after{content:'✦';position:absolute;right:5px;top:4px;font-size:12px;color:#fff6bf;animation:rewardSparkle 1.8s ease-in-out infinite}
.rewardSpotBtn.btn.gold{position:relative;overflow:hidden}
.rewardSpotBtn.btn.gold:after{content:'';position:absolute;top:0;bottom:0;width:35%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);transform:translateX(-120%);animation:progressSweep 2.4s linear infinite}
#duelBadgesGrid .duelBadge span{filter:drop-shadow(0 0 10px rgba(255,215,96,.18))}
#duelRewardStatus{letter-spacing:.2px}
@media (prefers-reduced-motion: reduce){
  .duelRewardHeroCard,.duelHeroAvatarWrap,.rewardSpotDr,.duelLeagueMedal,.duelCup.champion,.duelHeroName b,.duelHeroLeague strong,.rewardSpotTop b{animation:none!important}
  .duelRewardHeroCard:after,.duelLeagueMedal:after,.duelProgress:after,.duelRewardCard.active:after,.duelCup:not(.locked):after,.duelBadge:not(.locked):after,.rewardSpotlightCard:after,.rewardSpotBtn.btn.gold:after{animation:none!important}
}


/* V4.8.5 expanded rewards dashboard */
.duelRankStats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:0 0 16px}
.duelStatCard{padding:12px 10px;border-radius:18px;background:linear-gradient(180deg,rgba(17,24,62,.95),rgba(8,15,40,.95));border:1px solid rgba(108,147,255,.15);text-align:center;box-shadow:0 8px 16px rgba(0,0,0,.15);position:relative;overflow:hidden}
.duelStatCard:after{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent)}
.duelStatCard span{display:block;font-size:22px;margin-bottom:4px}
.duelStatCard b{display:block;font-size:20px;color:#fff}
.duelStatCard small{display:block;font-size:11px;color:#c4d1f3;margin-top:3px;line-height:1.2}
#duelRewardRoadmap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 16px}
.duelRoadCard,.duelRoadTip{position:relative;padding:14px;border-radius:18px;background:linear-gradient(180deg,rgba(12,21,55,.95),rgba(9,15,40,.96));border:1px solid rgba(110,153,255,.16);overflow:hidden}
.duelRoadCard{display:grid;grid-template-columns:42px 1fr;gap:10px;align-items:center}
.duelRoadCard span{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-size:24px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 12px rgba(255,255,255,.04)}
.duelRoadCard b{display:block;font-size:13px;line-height:1.25}
.duelRoadCard small{display:block;color:#c0cbea;font-size:11px;margin-top:4px}
.duelRoadCard i{grid-column:1/-1;height:10px;border-radius:999px;background:linear-gradient(90deg,#ffd55d,#7f56ff);display:block;box-shadow:0 0 12px rgba(255,213,93,.22)}
.duelRoadTip b{display:block;font-size:13px;color:#ffe08a;margin-bottom:6px}
.duelRoadTip small{display:block;font-size:11px;color:#d7e0ff;line-height:1.45}
.rewardCardTop{display:flex;justify-content:space-between;align-items:center;gap:8px}
.rewardRarity,.rewardState{font-size:9px;font-weight:900;letter-spacing:.45px;padding:4px 8px;border-radius:999px}
.rewardRarity{background:rgba(19,43,88,.72);border:1px solid rgba(255,255,255,.08);color:#d2dcff}
.reward-legendary{background:rgba(255,210,94,.16);color:#ffe08a;border-color:rgba(255,210,94,.22)}
.reward-epic{background:rgba(191,122,255,.16);color:#f0caff;border-color:rgba(191,122,255,.2)}
.reward-rare{background:rgba(95,227,255,.14);color:#bbf4ff;border-color:rgba(95,227,255,.2)}
.reward-common{background:rgba(255,255,255,.08);color:#d7ddf4;border-color:rgba(255,255,255,.1)}
.rewardState{background:rgba(28,48,84,.72);color:#8ff1cb;border:1px solid rgba(143,241,203,.15)}
.rewardReq{font-size:10px;color:#aebde8;line-height:1.35;min-height:28px}
.duelRewardCard .rewardIcon{font-size:30px;margin-top:4px}
#duelRewardCabinet{grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr)}
.duelCupShelf{grid-template-columns:repeat(3,minmax(0,1fr))}
.duelCup.podium{background:linear-gradient(180deg,rgba(105,110,120,.2),rgba(20,18,14,.38));border-color:rgba(220,222,230,.16)}
.duelCup.top10{background:linear-gradient(180deg,rgba(65,86,120,.18),rgba(14,20,38,.36));border-color:rgba(105,154,255,.18)}
@media(max-width:920px){.duelRankStats{grid-template-columns:repeat(3,minmax(0,1fr))}#duelRewardRoadmap{grid-template-columns:1fr}.duelCupShelf{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.duelRankStats{grid-template-columns:repeat(2,minmax(0,1fr))}.duelCupShelf{grid-template-columns:1fr 1fr}.rewardCardTop{flex-direction:column;align-items:flex-start}.rewardState{align-self:flex-start}}


/* V4.8.7 Sign in with Apple */
.accountActions .btn.apple{background:#050505;color:#fff;border:1px solid rgba(255,255,255,.82);box-shadow:0 5px 0 #252525,0 9px 22px rgba(0,0,0,.42);display:flex;align-items:center;justify-content:center;gap:9px;font-weight:800}
.accountActions .btn.apple:active,.mrow .btn.apple:active{transform:translateY(3px);box-shadow:0 2px 0 #252525,0 5px 12px rgba(0,0,0,.35)}
.mrow .btn.apple{background:#050505;color:#fff;border:1px solid rgba(255,255,255,.82);box-shadow:0 5px 0 #252525,0 9px 22px rgba(0,0,0,.38)}
.appleConsentText{line-height:1.55;text-align:left;margin:12px 0 16px;padding:12px;border-radius:14px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09)}


/* V4.8.8 — compact account screen for short iPhones */
#modalBox.accountModal{position:relative}
.accountCloseX{position:absolute;top:8px;right:9px;z-index:5;width:34px;height:34px;border:0;border-radius:12px;background:rgba(255,255,255,.08);color:#dfe8ff;font:900 24px/1 system-ui;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);cursor:pointer}
.accountCloseX:active{transform:scale(.94);background:rgba(255,255,255,.14)}
@media (max-height:720px){
  #modalBox.accountModal{width:min(94vw,390px);max-height:calc(100dvh - 14px);padding:12px 12px 9px}
  #modalBox.accountModal h3{font-size:18px;letter-spacing:.5px;margin:0 30px 6px}
  .accountCloseX{top:7px;right:7px;width:31px;height:31px;font-size:21px}
  .accountHero{gap:9px;padding:7px 8px;margin-bottom:6px;border-radius:13px}
  .accountAvatar{width:40px;height:40px;font-size:20px}
  .accountHero strong{font-size:14px;margin-bottom:1px}
  .accountHero small{font-size:10.2px;line-height:1.25}
  .accountNotice{padding:7px 8px;border-radius:11px;margin:5px 0 7px;font-size:10.4px;line-height:1.3}
  .accountActions{gap:6px}
  .accountActions .btn{min-height:40px;padding:8px 8px;font-size:13px}
  .accountActions .btn.google::before{width:20px;height:20px;font-size:13px}
  .accountDivider{gap:7px;margin:5px 0;font-size:9px}
  .authTiny{font-size:9.5px;line-height:1.25;margin-top:4px}
}
@media (max-height:600px){
  #modalBox.accountModal{max-height:calc(100dvh - 8px);padding:9px 9px 7px}
  #modalBox.accountModal h3{font-size:16px;margin-bottom:4px}
  .accountCloseX{top:5px;right:5px;width:29px;height:29px;font-size:20px}
  .accountHero{padding:5px 7px;margin-bottom:4px}
  .accountAvatar{width:34px;height:34px;font-size:17px}
  .accountHero strong{font-size:12.5px}
  .accountHero small{display:none}
  .accountNotice{padding:5px 7px;margin:4px 0 5px;font-size:9.3px}
  .accountActions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5px}
  .accountActions .btn{min-height:37px;padding:6px 5px;font-size:11.4px;line-height:1.12}
  #accApple,#accGoogle,.accountDivider,#accEmailLogin,#accClose,#accReset,#accLogout,#accDeleteAccount{grid-column:1/-1}
  .accountDivider{margin:2px 0}
  .authTiny{display:none}
}
@media (max-width:340px){
  #modalBox.accountModal{width:95vw;padding-left:8px;padding-right:8px}
  #modalBox.accountModal h3{font-size:15px}
  .accountActions .btn{font-size:10.8px}
}

/* V5.0 FINAL: active account, rewards and cross-platform layout bundle. */


/* V5.0 Final — Cloud & Account Status */
.accountCloudBtn{border-color:rgba(105,206,255,.42)!important;background:linear-gradient(180deg,rgba(36,146,213,.92),rgba(37,86,179,.94))!important}
.cloudStatusModal{width:min(92vw,430px)!important}
.cloudState{display:grid;grid-template-columns:46px 1fr;gap:11px;align-items:center;padding:12px;border-radius:17px;margin:8px 0 11px;border:1px solid rgba(255,255,255,.12);background:rgba(13,21,58,.78)}
.cloudState>span{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;font-size:23px;background:rgba(255,255,255,.08)}
.cloudState b{display:block;font-size:15px}.cloudState small{display:block;color:#c3cdeb;font-size:11px;line-height:1.35;margin-top:3px}
.cloudState.cloud-saved{border-color:rgba(70,225,151,.32);box-shadow:inset 0 0 20px rgba(70,225,151,.06)}
.cloudState.cloud-syncing{border-color:rgba(255,215,100,.32)}.cloudState.cloud-syncing>span{animation:syncPulse 1s ease-in-out infinite}
.cloudState.cloud-error{border-color:rgba(255,90,108,.35)}.cloudState.cloud-offline,.cloudState.cloud-guest{border-color:rgba(160,167,196,.22)}
.cloudInfoGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 10px}
.cloudInfoGrid>div{padding:10px;border-radius:14px;background:rgba(10,17,48,.7);border:1px solid rgba(118,151,255,.12);min-width:0}
.cloudInfoGrid .cloudWide{grid-column:1/-1}
.cloudInfoGrid span,.cloudRankCard>span{display:block;color:#9eaed8;font-size:10px;font-weight:800;letter-spacing:.25px;margin-bottom:4px}
.cloudInfoGrid b{display:block;font-size:12px;line-height:1.35;overflow-wrap:anywhere}
.cloudRankGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:11px}
.cloudRankCard{padding:11px;border-radius:16px;background:linear-gradient(180deg,rgba(18,31,78,.9),rgba(9,15,43,.92));border:1px solid rgba(99,156,255,.18);min-height:90px}
.cloudRankCard div{display:flex;flex-direction:column;justify-content:center;min-height:55px}.cloudRankCard b{font-size:25px;color:#fff}.cloudRankCard small{font-size:10px;color:#c5d0ef;line-height:1.35;margin-top:3px}
@media(max-height:650px){.cloudState{padding:9px;margin:5px 0 7px}.cloudState>span{width:40px;height:40px}.cloudInfoGrid>div,.cloudRankCard{padding:8px}.cloudRankCard{min-height:76px}.cloudRankCard div{min-height:44px}.cloudRankCard b{font-size:21px}}
@media(max-width:350px){.cloudStatusModal{width:95vw!important}.cloudInfoGrid,.cloudRankGrid{gap:6px}.cloudInfoGrid>div,.cloudRankCard{padding:7px}.cloudInfoGrid b{font-size:11px}.cloudRankCard>span{font-size:9px}.cloudRankCard b{font-size:20px}}

.accountUtilityRow{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.accountUtilityRow .btn{height:100%}
.cloudStatusModal .accountActions #cloudClose{width:100%}
@media(max-height:600px){.accountUtilityRow{grid-column:1/-1}.cloudStatusModal .accountActions #cloudClose{grid-column:1/-1}}

.appleLogoSvg{width:18px;height:22px;display:inline-block;flex:none;vertical-align:-4px;color:currentColor}
.appleConsentTitle .appleLogoSvg{width:16px;height:19px;vertical-align:-3px}

/* V5.0 Final R2: keep decorative menu art inside the physical viewport. */
#splash{overflow:hidden}


/* V5.1 — focused polish, accessibility, responsive and performance layer */
.effectLevelRow select{min-width:118px;border:1px solid rgba(130,210,255,.32);background:rgba(8,17,42,.82);color:#fff;border-radius:12px;padding:9px 30px 9px 11px;font-weight:850}
.togRow span small{display:block;margin-top:3px;max-width:210px;font-size:9px;line-height:1.3;color:var(--dim)}
.mxReduceMotion *,body.mxLowEffects *{scroll-behavior:auto!important}
body.mxReduceMotion .winzoom,body.mxReduceMotion #lightRays,body.mxReduceMotion .breathe,body.mxReduceMotion .pulse,body.mxDuelEffectsOff #onlineMessageToast{animation:none!important;transform:none!important}
body.mxLowEffects .ambientParticle,body.mxLowEffects .labSteam,body.mxLowEffects .screenFx{display:none!important}
body.mxAppPaused *{animation-play-state:paused!important}
.onlineQuickMessages>div{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px!important}
.onlineQuickMsgBtn{min-height:40px;white-space:normal;line-height:1.15}
#onlineMessageToast{max-width:min(82vw,340px);pointer-events:none}
.mxDuelEffectsOff #onlineMessageToast{display:none!important}
.einBox,.onlineFactCard img,.duelFinalScientist img{object-fit:contain;max-width:100%;height:auto}
@media(max-width:390px), (max-height:720px){
  :root{--safe-bottom:max(8px,env(safe-area-inset-bottom));--safe-top:max(6px,env(safe-area-inset-top))}
  .einBox{transform-origin:bottom center;max-height:clamp(112px,22vh,165px)}
  .einImg{max-height:clamp(102px,20vh,154px)!important;width:auto!important}
  .speech,.einSpeech{max-width:min(72vw,265px)!important;font-size:clamp(10px,2.7vw,13px)!important}
  #dpad{transform:scale(.88);transform-origin:bottom left}
  #goalCard,#goalBox{max-width:42vw}
  #modalBox{max-height:calc(var(--app-h,100vh) - var(--safe-top) - var(--safe-bottom) - 18px)!important;overflow:auto}
  .settingsScroll{padding-bottom:calc(10px + var(--safe-bottom))}
}
@media(max-width:340px){
  #dpad{transform:scale(.78)}
  .onlineQuickMessages>div{grid-template-columns:1fr}
  .togRow{font-size:13px;padding:9px 3px}
  .togRow span small{font-size:8px;max-width:175px}
}
@media(prefers-reduced-motion:reduce){
  #lightRays,.ambientParticle,.labSteam{display:none!important}
}


/* V5.2 — accessibility and readability pass */
body.mxLargeText{font-size:112%}
body.mxLargeText .btn,body.mxLargeText .togRow,body.mxLargeText .msub,body.mxLargeText .speech,body.mxLargeText .einSpeech{letter-spacing:.01em}
body.mxLargeText .togRow span small{font-size:10px;line-height:1.38}
body.mxLargeText .levelCard small,body.mxLargeText .molCard small,body.mxLargeText .hofRow small{font-size:11px}
body.mxHighContrast{--dim:#d8e2ff;--muted:#c8d4f5}
body.mxHighContrast .btn,body.mxHighContrast .togRow,body.mxHighContrast #modalBox,body.mxHighContrast .levelCard,body.mxHighContrast .molCard{border-color:rgba(255,255,255,.38)!important;box-shadow:0 0 0 1px rgba(0,0,0,.78),0 7px 18px rgba(0,0,0,.48)}
body.mxHighContrast small,body.mxHighContrast .msub{color:#eef3ff!important}
body.mxColorBlind .btn,body.mxColorBlind .iconBadge,body.mxColorBlind .levelCard{outline:1px solid rgba(255,255,255,.24);outline-offset:-2px}
body.mxColorBlind #starRow span.off{filter:grayscale(1);opacity:.28}
body.mxColorBlind .duelP1 #boardFrame{border-style:solid!important}
body.mxColorBlind .duelP2 #boardFrame{border-style:dashed!important}
body.mxColorBlind #onlineMessageToast::before{content:'◆ ';font-weight:900}
@media(max-width:390px){body.mxLargeText{font-size:106%}body.mxLargeText .speech,body.mxLargeText .einSpeech{font-size:clamp(11px,3vw,14px)!important}}


/* V5.3 — collection intelligence and focused completion polish */
.collectionTools{display:flex;gap:7px;overflow-x:auto;padding:2px 1px 10px;scrollbar-width:none}.collectionTools::-webkit-scrollbar{display:none}
.collectionFilter{flex:0 0 auto;border:1px solid rgba(255,255,255,.16);background:rgba(12,16,42,.72);color:var(--dim);font-weight:900;font-size:11px;letter-spacing:.5px;border-radius:999px;padding:8px 12px;min-height:34px}.collectionFilter.on{color:#fff;border-color:rgba(79,216,255,.72);box-shadow:0 0 0 1px rgba(79,216,255,.15),0 0 16px rgba(79,216,255,.18)}
.molCard{position:relative}.molFav{position:absolute;right:8px;top:8px;z-index:2;width:34px;height:34px;border:0;border-radius:50%;background:rgba(7,10,30,.72);color:#ffd45f;font-size:21px;font-weight:900;display:grid;place-items:center;box-shadow:0 3px 12px rgba(0,0,0,.25)}.molCard.favorite{box-shadow:0 0 0 1.5px rgba(255,212,95,.55),0 12px 26px rgba(0,0,0,.25)}
.molMeta{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;margin:7px 0 4px}.molMeta span,.lockedMeta{font-size:10px;font-weight:850;color:#dce8ff;background:rgba(255,255,255,.07);border-radius:999px;padding:4px 7px}.lockedMeta{display:inline-flex;color:#949bb8}
#boardFrame.moleculeComplete::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at 50% 48%,rgba(255,255,255,.24),rgba(79,216,255,.12) 28%,transparent 62%);animation:mxMoleculeComplete 1.4s ease-out both;mix-blend-mode:screen}
@keyframes mxMoleculeComplete{0%{opacity:0;transform:scale(.88)}22%{opacity:1}100%{opacity:0;transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){#boardFrame.moleculeComplete::after{animation:none;opacity:.18}.molCard,.collectionFilter{transition:none!important}}


/* V5.4 — consistent menu transitions, touch feedback and sound-safe UI polish */
body.mxUiTransitioning{pointer-events:none}
.screen.mxEntering.on{animation:mxScreenEnter .28s cubic-bezier(.2,.85,.3,1) both}
.screen.mxLeaving{animation:mxScreenLeave .22s ease both}
@keyframes mxScreenEnter{from{opacity:0;transform:translateY(10px) scale(.992)}to{opacity:1;transform:none}}
@keyframes mxScreenLeave{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-5px) scale(.997)}}
button.mxPressed,.btn.mxPressed,[role="button"].mxPressed,.levelCard.mxPressed,.molCard.mxPressed{transform:scale(.965)!important;filter:brightness(1.08);transition-duration:.07s!important}
button:disabled.mxPressed,.btn:disabled.mxPressed{transform:none!important;filter:none!important}
body.mxReduceMotion .screen.mxEntering.on,body.mxReduceMotion .screen.mxLeaving{animation:none!important}
@media(prefers-reduced-motion:reduce){.screen.mxEntering.on,.screen.mxLeaving{animation:none!important}button.mxPressed,.btn.mxPressed,[role="button"].mxPressed,.levelCard.mxPressed,.molCard.mxPressed{transform:none!important}}

/* V5.5 — stronger touch response and larger invisible hit areas */
html,body,#app,.screen{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button,.btn,[role="button"],.levelCard,.molCard,.collectionFilter,.duelChoice,.labTab{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button,.btn,[role="button"]{min-width:44px;min-height:44px}
#board{touch-action:none;cursor:pointer}
#dpad button,#dU,#dR,#dD,#dL{position:relative;min-width:54px;min-height:54px;touch-action:none}
#dpad button::after,#dU::after,#dR::after,#dD::after,#dL::after{content:"";position:absolute;inset:-7px;border-radius:inherit}
@media(max-width:390px),(max-height:700px){
  #dpad button,#dU,#dR,#dD,#dL{min-width:50px;min-height:50px}
  button,.btn,[role="button"]{min-height:42px}
}

/* V5.6 interactive tutorial and mechanic guide */
.mechanicGuideList{display:flex;flex-direction:column;gap:10px;max-height:min(54vh,520px);padding:4px 2px 10px}
.mechanicGuideRow{display:grid;grid-template-columns:48px 1fr;gap:11px;align-items:center;padding:11px 12px;border:1px solid rgba(255,255,255,.13);border-radius:14px;background:rgba(255,255,255,.055)}
.mechanicGuideIcon{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;font-size:25px;background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.mechanicGuideRow b{display:block;font-size:14px;margin-bottom:3px}
.mechanicGuideRow small{display:block;line-height:1.35;opacity:.8}
.mxLargeText .mechanicGuideRow b{font-size:16px}.mxLargeText .mechanicGuideRow small{font-size:13px}
.mxHighContrast .mechanicGuideRow{border-width:2px;background:rgba(0,0,0,.48)}
@media(max-height:700px){.mechanicGuideList{max-height:45vh}.mechanicGuideRow{padding:8px 10px}.mechanicGuideIcon{width:38px;height:38px;font-size:22px}}

/* V5.9 consumable booster foundation */
.boosterShop{grid-column:1/-1;border:1px solid rgba(124,231,255,.28);background:rgba(10,28,45,.72);border-radius:18px;padding:14px;margin-bottom:8px}.boosterHead{display:flex;flex-direction:column;gap:3px;margin-bottom:10px}.boosterHead b{font-size:14px}.boosterHead small{opacity:.78;font-size:11px;line-height:1.35}.boosterGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.boosterCard{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:11px;border-radius:14px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12)}.boosterIcon{font-size:28px}.boosterCard div{display:flex;flex-direction:column;gap:2px;min-width:0}.boosterCard small{font-size:10px;line-height:1.3;opacity:.8}.boosterCard em{font-style:normal;font-size:10px;color:#ffd76a;font-weight:800}.boosterCard .btn{min-width:72px;padding:9px 8px}@media(max-width:520px){.boosterGrid{grid-template-columns:1fr}.boosterCard{grid-template-columns:auto 1fr auto}}

/* V5.9 breakable wall + hammer */
#btnHammer{position:relative;overflow:visible}#btnHammer[hidden]{display:none!important}#btnHammer .badgeIcon{font-size:25px;line-height:1}#btnHammer .hammerCount{position:absolute;right:-5px;top:-6px;min-width:22px;height:22px;padding:0 5px;border-radius:999px;background:#ffcc48;color:#241400;border:2px solid rgba(255,255,255,.9);font:900 12px/18px system-ui;text-align:center;box-shadow:0 3px 9px rgba(0,0,0,.35)}#btnHammer.on{transform:translateY(-2px) scale(1.04);box-shadow:0 0 0 3px rgba(255,191,71,.42),0 0 24px rgba(255,166,51,.55)}#btnHammer.on .badgeIcon{animation:hammerReady .6s ease-in-out infinite alternate}#btnHammer.empty{opacity:.66}@keyframes hammerReady{from{transform:rotate(-12deg) scale(1)}to{transform:rotate(10deg) scale(1.12)}}body.mxReduceMotion #btnHammer.on .badgeIcon{animation:none}


/* V5.9 tactical hammer choice + one-square move */
#btnPrecision{position:relative;overflow:visible}#btnPrecision[hidden]{display:none!important}#btnPrecision .badgeIcon{font-size:24px;line-height:1}#btnPrecision .precisionCount{position:absolute;right:-5px;top:-6px;min-width:22px;height:22px;padding:0 5px;border-radius:999px;background:#78e6ff;color:#06222a;border:2px solid rgba(255,255,255,.9);font:900 12px/18px system-ui;text-align:center;box-shadow:0 3px 9px rgba(0,0,0,.35)}#btnPrecision.on{transform:translateY(-2px) scale(1.04);box-shadow:0 0 0 3px rgba(92,224,255,.38),0 0 24px rgba(73,201,255,.5)}#btnPrecision.on .badgeIcon{animation:precisionReady .58s ease-in-out infinite alternate}#btnPrecision.empty{opacity:.66}@keyframes precisionReady{from{transform:translateX(-3px) scale(.98)}to{transform:translateX(3px) scale(1.1)}}body.mxReduceMotion #btnPrecision.on .badgeIcon{animation:none}


/* V5.25 — final visual/audio polish and endgame identity */
#boardFrame{isolation:isolate;transition:box-shadow .3s ease,border-color .3s ease,filter .3s ease}
#boardFrame::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;background:linear-gradient(125deg,rgba(255,255,255,.055),transparent 24%,transparent 72%,rgba(79,216,255,.045));mix-blend-mode:screen}
body.mxAdvancedLab #boardFrame{border-color:rgba(126,231,255,.34);box-shadow:0 14px 42px rgba(0,0,0,.34),0 0 0 1px rgba(95,218,255,.12),inset 0 0 28px rgba(52,166,255,.055)}
body.mxMasterLab #boardFrame{border-color:rgba(255,210,82,.58);box-shadow:0 16px 48px rgba(0,0,0,.4),0 0 0 2px rgba(255,210,82,.16),0 0 30px rgba(255,169,56,.14),inset 0 0 34px rgba(255,208,86,.07)}
body.mxMasterLab #lvPill::before{content:"🏆 ";}
body.mxMasterLab #lvPill{border-color:rgba(255,218,102,.55);color:#fff4bd;background:rgba(82,45,8,.72)}
body.mxMasterLab #goalCard,body.mxMasterLab #goalBox{box-shadow:0 0 0 1px rgba(255,213,94,.2),0 8px 24px rgba(0,0,0,.28)}
#boardFrame.winzoom{animation:mxFinalWinZoom .72s cubic-bezier(.18,.88,.24,1) both}
@keyframes mxFinalWinZoom{0%{transform:scale(1)}38%{transform:scale(1.018);filter:brightness(1.14) saturate(1.08)}100%{transform:scale(1);filter:none}}
#bannerWrap.on #banner{animation:mxBannerPop .65s cubic-bezier(.16,.9,.24,1) both}
@keyframes mxBannerPop{0%{opacity:0;transform:translateY(12px) scale(.82);letter-spacing:.12em}52%{opacity:1;transform:translateY(-2px) scale(1.05)}100%{transform:none}}
body.mxMasterLab #bannerWrap.on #banner{text-shadow:0 0 12px rgba(255,221,106,.8),0 2px 0 rgba(0,0,0,.35)}
body.mxReduceMotion #boardFrame.winzoom,body.mxReduceMotion #bannerWrap.on #banner{animation:none!important}
@media(prefers-reduced-motion:reduce){#boardFrame.winzoom,#bannerWrap.on #banner{animation:none!important}}


/* V5.25 — adaptive performance and low-power rendering */
body.mxPerfLow .ambientGlow,
body.mxPerfLow .labBubble,
body.mxPerfLow .decorParticle{animation:none!important;opacity:.35!important}
body.mxPerfLow .specialAtomFx,
body.mxPerfLow .portalGlow{filter:none!important;box-shadow:none!important}
body.mxAppPaused *{animation-play-state:paused!important}

/* V6.1 — Dr. E comic story strip */
#levelStoryPanel{position:fixed;z-index:10060;left:50%;top:max(10px,env(safe-area-inset-top));width:min(94vw,720px);min-height:118px;transform:translate(-50%,-130%);opacity:0;pointer-events:none;display:grid;grid-template-columns:108px 1fr;gap:12px;align-items:center;padding:12px 42px 12px 12px;border:4px solid #17243a;border-radius:18px;background:linear-gradient(135deg,#fff7c8,#fff 54%,#dff7ff);box-shadow:0 9px 0 #17243a,0 18px 36px #0008;transition:transform .28s cubic-bezier(.2,.9,.25,1.2),opacity .2s ease;font-family:inherit}
#levelStoryPanel.on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
#levelStoryPanel:before{content:"";position:absolute;inset:5px;border:2px dashed #ff8a00;border-radius:11px;pointer-events:none}
#levelStoryPanel img{position:relative;width:104px;height:104px;object-fit:contain;filter:drop-shadow(3px 5px 0 #17243a55)}
#levelStoryPanel .storyCopy{position:relative;text-align:left;color:#15223a;line-height:1.22}
#storyChapter{font-weight:1000;font-size:clamp(14px,2.5vw,20px);color:#d94a00;text-transform:uppercase;letter-spacing:.03em;margin-bottom:5px}
#storyText{font-weight:900;font-size:clamp(15px,3vw,22px)}
#storyHint{display:block;margin-top:7px;font-weight:800;opacity:.58}
#storySkip{position:absolute;z-index:2;right:9px;top:7px;width:32px;height:32px;border:3px solid #17243a;border-radius:50%;background:#ffec42;color:#17243a;font-size:22px;font-weight:1000;line-height:24px;box-shadow:2px 3px 0 #17243a;cursor:pointer}
body.mxReduceMotion #levelStoryPanel{transition:none}
@media(max-width:520px){#levelStoryPanel{grid-template-columns:78px 1fr;min-height:96px;padding:9px 36px 9px 8px;border-width:3px;box-shadow:0 6px 0 #17243a,0 13px 25px #0008}#levelStoryPanel img{width:76px;height:76px}#storyText{font-size:14px}#storyChapter{font-size:12px}#storyHint{font-size:10px;margin-top:4px}}


/* V6.1 — Story interludes between levels */
#levelStoryPanel{top:50%;width:min(96vw,780px);min-height:0;transform:translate(-50%,-56%) scale(.92);display:block;padding:16px 48px 16px 16px;border:5px solid #17243a;border-radius:20px;background:#f5d64b;box-shadow:0 10px 0 #17243a,0 24px 48px #0009;opacity:0}
#levelStoryPanel.on{transform:translate(-50%,-50%) scale(1);opacity:1}
#levelStoryPanel:before{inset:7px;border:2px dashed #17243a;border-radius:10px}
#levelStoryPanel .comicStrip{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
#levelStoryPanel .comicPanel{position:relative;min-height:218px;overflow:hidden;border:4px solid #17243a;background:#fff;box-shadow:4px 4px 0 #17243a}
#levelStoryPanel .comicHero{display:grid;grid-template-columns:42% 58%;align-items:end;background:radial-gradient(circle at 24% 25%,#dff7ff,#76c9ff 65%,#328bd0)}
#levelStoryPanel .comicHero img{width:100%;height:205px;align-self:end;object-fit:contain;filter:drop-shadow(4px 5px 0 #17243a66)}
#levelStoryPanel .comicNumber{position:absolute;z-index:3;left:7px;top:7px;padding:4px 8px;border:2px solid #17243a;background:#fff176;font-weight:1000;font-size:11px;transform:rotate(-2deg)}
#levelStoryPanel .speechBubble{position:relative;align-self:center;margin:28px 9px 12px 0;padding:13px 12px;border:3px solid #17243a;border-radius:48% 52% 45% 55%;background:#fff;color:#17243a;font-size:14px;font-weight:900;line-height:1.22;transform:rotate(1deg)}
#levelStoryPanel .speechBubble:after{content:"";position:absolute;left:-19px;bottom:25px;width:25px;height:18px;background:#fff;border-left:3px solid #17243a;border-bottom:3px solid #17243a;transform:skew(-34deg) rotate(16deg)}
#levelStoryPanel .comicReaction{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 14px 12px;background:repeating-radial-gradient(circle at center,#fff 0 10px,#ffeaa0 11px 22px)}
#levelStoryPanel .comicBang{position:absolute;right:5px;top:4px;padding:5px 8px;border:3px solid #17243a;background:#ff5c69;color:#fff;font-weight:1000;font-size:17px;transform:rotate(6deg)}
#levelStoryPanel .reactionMolecule{font-size:38px;font-weight:1000;padding:9px 14px;border:4px solid #17243a;border-radius:50%;background:#fff;box-shadow:4px 5px 0 #17243a;max-width:90%;overflow:hidden;text-overflow:ellipsis}
#levelStoryPanel .reactionText{margin-top:14px;padding:9px 10px;border:3px solid #17243a;background:#fff;color:#17243a;font-weight:900;font-size:13px;line-height:1.2;text-align:center;transform:rotate(-1deg)}
#levelStoryPanel #storyContinue{position:relative;z-index:2;width:100%;min-height:48px;font-size:14px}
#levelStoryPanel #storySkip{z-index:8}
@media(max-width:620px){#levelStoryPanel{width:96vw;padding:12px 38px 12px 10px;border-width:4px}#levelStoryPanel .comicStrip{grid-template-columns:1fr;gap:7px}#levelStoryPanel .comicPanel{min-height:150px}#levelStoryPanel .comicHero{grid-template-columns:36% 64%}#levelStoryPanel .comicHero img{height:145px}#levelStoryPanel .speechBubble{font-size:12px;margin-top:25px;padding:10px 9px}#levelStoryPanel .comicReaction{min-height:118px;padding:10px}#levelStoryPanel .reactionMolecule{font-size:26px;padding:5px 10px}#levelStoryPanel .reactionText{font-size:11px;margin-top:8px;padding:6px}#levelStoryPanel .comicBang{font-size:13px}}


/* V6.7 — minimalist settings actions and refined menu Dr. E */
#modalBox.settingsModal .settingsActions{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:2px 0}
#modalBox.settingsModal .settingsActions>.btn{min-height:42px;padding:8px 9px;border-radius:12px;font-size:12.5px;line-height:1.15;box-shadow:none;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);text-align:left}
#modalBox.settingsModal .settingsActions>.btn:active{transform:scale(.98);background:rgba(255,255,255,.1)}
#modalBox.settingsModal .settingsActions #mReset,#modalBox.settingsModal .settingsActions #mDeleteCloud{background:rgba(255,78,92,.055);border-color:rgba(255,78,92,.28)}
#modalBox.settingsModal .settingsActions .legalLinks{grid-column:1/-1;margin:3px 0 0;padding:7px 4px 2px;text-align:center;opacity:.72}
#modalBox.settingsModal .settingsClose{min-height:44px;border-radius:13px;box-shadow:none}
#einBoxS{cursor:pointer;touch-action:manipulation}
#einBoxS:active{filter:brightness(1.06)}
body.mxReduceMotion #einBoxS{animation:none!important}
@media(max-width:390px){#modalBox.settingsModal .settingsActions{grid-template-columns:1fr}#modalBox.settingsModal .settingsActions .legalLinks{grid-column:1}}

/* V6.8 — Professor Null comic integration and warm Nobel ending */
#levelStoryPanel .nullStoryArt{display:none;position:absolute;left:0;bottom:0;width:52%;height:100%;object-fit:cover;object-position:42% center;filter:saturate(1.05) contrast(1.03)}
#levelStoryPanel.nullAppears .comicReaction{align-items:flex-end;background:linear-gradient(135deg,#2c1740,#563075 58%,#1f132c)}
#levelStoryPanel.nullAppears .nullStoryArt{display:block}
#levelStoryPanel.nullAppears .reactionMolecule{position:relative;z-index:2;margin-right:5%;font-size:29px}
#levelStoryPanel.nullAppears .reactionText{position:relative;z-index:2;width:58%;margin-left:auto;margin-right:0;background:#fffdf1}
#levelStoryPanel.nobelFinalStory{background:#f7d84d}
#levelStoryPanel.nobelFinalStory .comicReaction{background:repeating-radial-gradient(circle at center,#fff7b0 0 11px,#f1bd33 12px 23px)}
#levelStoryPanel.nobelFinalStory .comicBang{background:#7d3bb6}
#levelStoryPanel.nobelFinalStory .reactionText{border-color:#6b3d16}
@media(max-width:620px){#levelStoryPanel .nullStoryArt{width:42%;object-position:44% center}#levelStoryPanel.nullAppears .reactionMolecule{font-size:23px;margin-right:2%}#levelStoryPanel.nullAppears .reactionText{width:62%;font-size:10.5px}}

/* V6.9 — character voice controls use the existing compact audio-row layout. */


/* V6.13 contextual account milestone + Nobel certificate */
.accountMilestoneInvite{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin:14px 0;padding:13px;border:1px solid rgba(93,214,255,.38);border-radius:16px;background:linear-gradient(135deg,rgba(35,144,206,.14),rgba(111,74,190,.14));text-align:left}
.accountMilestoneIcon{font-size:28px}.accountMilestoneInvite b{display:block;color:#dff7ff;font-size:13px;letter-spacing:.04em}.accountMilestoneInvite span{display:block;margin-top:3px;color:rgba(232,244,255,.78);font-size:12px;line-height:1.35}.accountMilestoneInvite .btn{white-space:nowrap;padding:10px 12px;font-size:12px}
.nobelCertificatePreview{position:relative;margin:14px auto 10px;padding:20px 18px;border:2px solid rgba(246,207,104,.8);border-radius:20px;background:linear-gradient(145deg,rgba(4,21,43,.96),rgba(34,19,61,.96));box-shadow:inset 0 0 0 1px rgba(122,231,255,.34);overflow:hidden;text-align:center}.nobelCertificatePreview:before{content:'⚛';position:absolute;right:-8px;bottom:-30px;font-size:116px;opacity:.06}.nobelCertSeal{font-size:42px}.nobelCertificatePreview small{display:block;color:#8fe8ff;letter-spacing:.12em;font-size:9px}.nobelCertificatePreview h4{margin:7px 0;color:#f6d573;font-size:17px}.nobelCertificatePreview strong{display:block;color:#fff;font-size:21px}.nobelCertificatePreview p{max-width:420px;margin:8px auto;color:rgba(235,244,255,.82);font-size:12px;line-height:1.45}.nobelCertFormula{display:inline-block;padding:7px 12px;border:1px solid rgba(106,230,255,.36);border-radius:999px;color:#baf5ff;font-weight:700;font-size:12px}.nobelShareActions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:8px 0 2px}
@media(max-width:520px){.accountMilestoneInvite{grid-template-columns:auto 1fr}.accountMilestoneInvite .btn{grid-column:1/-1;width:100%}.nobelShareActions .btn{width:100%}}

/* ===== V6.15 professional laboratory startup sequence ===== */
#bootScr{background:#02030b;overflow:hidden}
#bootStage::after{
  content:"";position:absolute;inset:0;z-index:12;pointer-events:none;opacity:.32;
  background:repeating-linear-gradient(180deg,transparent 0 3px,rgba(80,210,255,.035) 4px 5px);
  mix-blend-mode:screen;animation:bootScan 4.6s linear infinite;
}
@keyframes bootScan{from{transform:translateY(-12px)}to{transform:translateY(12px)}}
#bootPowerRail{position:absolute;left:8%;right:8%;top:10%;height:3px;z-index:14;opacity:0;overflow:hidden;border-radius:99px;background:rgba(92,230,255,.12);box-shadow:0 0 12px rgba(84,222,255,.24)}
#bootPowerRail i{position:absolute;top:0;width:18%;height:100%;left:-22%;background:linear-gradient(90deg,transparent,#dfffff,transparent);filter:drop-shadow(0 0 8px #62eaff)}
#bootPowerRail i:nth-child(2){animation-delay:.32s}#bootPowerRail i:nth-child(3){animation-delay:.64s}#bootPowerRail i:nth-child(4){animation-delay:.96s}
#bootLogoReveal{position:absolute;left:50%;top:51%;z-index:16;width:min(86vw,440px);transform:translate(-50%,-50%) scale(.84);text-align:center;opacity:0;pointer-events:none;filter:blur(8px)}
#bootLogoReveal small{display:block;font-size:clamp(12px,3.3vw,17px);font-weight:900;letter-spacing:.48em;color:#72eaff;text-shadow:0 0 14px rgba(80,228,255,.85);margin-left:.48em}
#bootLogoReveal strong{display:block;font-size:clamp(43px,13.2vw,72px);line-height:1;font-weight:1000;letter-spacing:.02em;background:linear-gradient(180deg,#fff 5%,#ccbeff 50%,#7d5cff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 5px 0 rgba(31,16,94,.9)) drop-shadow(0 0 24px rgba(154,116,255,.8))}
#bootLogoReveal em{display:inline-flex;margin-top:12px;padding:5px 12px;border:1px solid rgba(101,238,255,.44);border-radius:999px;background:rgba(2,22,42,.62);font-style:normal;font-size:10px;font-weight:900;letter-spacing:.22em;color:#c5fbff;box-shadow:0 0 18px rgba(67,223,255,.18)}
#bootDrEPeek{position:absolute;right:-14%;bottom:-5%;z-index:15;width:min(39vw,190px);aspect-ratio:468/520;opacity:0;transform:translateX(36px) rotate(5deg);pointer-events:none;filter:drop-shadow(0 10px 24px rgba(0,0,0,.65))}
#bootDrEPeek img{width:100%;height:100%;object-fit:contain}
#bootDrEPeek span{position:absolute;right:9%;top:14%;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#38d978;color:#fff;font-size:20px;font-weight:1000;box-shadow:0 0 0 4px rgba(56,217,120,.18),0 0 20px rgba(56,217,120,.8);opacity:0;transform:scale(.35)}

#bootScr.bootSequence #bootPowerRail{animation:bootRailOn .25s ease .42s forwards}
#bootScr.bootSequence #bootPowerRail i{animation:bootPowerPulse 1.25s ease-out .48s forwards}
#bootScr.bootSequence #bootLogoReveal{animation:bootLogoMaterialize .72s cubic-bezier(.18,.86,.22,1) 1.48s forwards,bootLogoBreath 3s ease-in-out 2.3s infinite}
#bootScr.bootSequence #bootDrEPeek{animation:bootEinPeek .62s cubic-bezier(.18,1.2,.32,1) 2.32s forwards}
#bootScr.bootSequence #bootDrEPeek span{animation:bootCheckPop .38s cubic-bezier(.2,1.5,.4,1) 2.76s forwards}
#bootScr.bootSequence #bootDarkScrim{transition:opacity 1.15s ease}
@keyframes bootRailOn{to{opacity:1}}
@keyframes bootPowerPulse{0%{left:-22%;opacity:0}15%{opacity:1}100%{left:108%;opacity:0}}
@keyframes bootLogoMaterialize{0%{opacity:0;transform:translate(-50%,-50%) scale(.84);filter:blur(9px) brightness(1.8)}60%{opacity:1;filter:blur(0) brightness(1.35)}100%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0) brightness(1)}}
@keyframes bootLogoBreath{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12)}}
@keyframes bootEinPeek{to{right:-2%;opacity:1;transform:translateX(0) rotate(0)}}
@keyframes bootCheckPop{to{opacity:1;transform:scale(1)}}
#bootScr.bootFinished #bootLogoReveal{opacity:1;filter:none;transform:translate(-50%,-50%) scale(1)}
#bootScr.bootFinished #bootDrEPeek{right:-2%;opacity:1;transform:none}
#bootScr.bootFinished #bootDrEPeek span{opacity:1;transform:scale(1)}
#bootScr.bootFinished #bootPowerRail{opacity:.7}
@media (max-height:700px){#bootLogoReveal{top:47%}#bootDrEPeek{width:min(32vw,150px)}#bootPlayWrap{bottom:calc(var(--sab) + 62px)}}
@media (prefers-reduced-motion:reduce){#bootStage::after{animation:none}#bootScr.bootSequence #bootPowerRail,#bootScr.bootSequence #bootLogoReveal,#bootScr.bootSequence #bootDrEPeek,#bootScr.bootSequence #bootDrEPeek span{animation:none;opacity:1;filter:none;transform:none}#bootScr.bootSequence #bootLogoReveal{transform:translate(-50%,-50%)}}


/* V6.16 FINAL STARTUP FIX */
#bootLogoReveal{display:none!important}
#bootStage{z-index:4}


/* V6.18 — clean, consistent mobile settings layout */
#modalBox.settingsModal .vrow.audioRow{
  grid-template-columns:96px minmax(0,1fr) 44px;
  column-gap:10px;
}
#modalBox.settingsModal .vrow.audioRow .vl{
  text-align:left;
  font-size:14px;
  line-height:1.15;
}
#modalBox.settingsModal .togRow{
  text-align:left;
  align-items:center;
  gap:14px;
  min-height:62px;
}
#modalBox.settingsModal .togRow>span{
  flex:1 1 auto;
  min-width:0;
  text-align:left;
}
#modalBox.settingsModal .togRow>span>b{
  display:block;
  font-size:15px;
  line-height:1.18;
}
#modalBox.settingsModal .togRow>span>small{
  max-width:none;
  font-size:10px;
  line-height:1.3;
}
#modalBox.settingsModal .togRow>.tog,
#modalBox.settingsModal .togRow>.langGroup,
#modalBox.settingsModal .togRow>select{
  flex:0 0 auto;
}
@media(max-width:390px){
  #modalBox.settingsModal .vrow.audioRow{grid-template-columns:82px minmax(0,1fr) 40px;column-gap:7px}
  #modalBox.settingsModal .vrow.audioRow .vl{font-size:13px}
  #modalBox.settingsModal .togRow{padding-left:4px;padding-right:4px;gap:10px}
  #modalBox.settingsModal .togRow>span>b{font-size:14px}
}

/* V6.20 clean opening: removed top power rail and corner Dr. E peek. */
#bootPowerRail,#bootDrEPeek{display:none!important}

/* V6.23 — locked bonus progression, cleaner tutorial guidance */
#einBoxG .prop{display:block!important;left:48%;top:-10%;font-size:29px;max-width:58px;white-space:nowrap;text-align:center}
#tutorialArrowHint{width:50px;height:50px;font-size:0;filter:none}
#tutorialArrowHint .tutGameArrow{display:flex;width:46px;height:46px;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(180deg,#fff7bd,#ffbf35);border:3px solid #33220a;color:#3b2708;font-size:31px;font-weight:900;transform:rotate(var(--tut-rot,0deg));box-shadow:0 4px 0 #8f5e12,0 7px 14px rgba(0,0,0,.45);text-shadow:none}
#tutorialArrowHint.on .tutGameArrow{animation:tutGameArrowPulse .82s ease-in-out infinite}
@keyframes tutGameArrowPulse{0%,100%{scale:1;translate:0 0}50%{scale:1.1;translate:5px 0}}
.bonusMissionGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;max-height:48vh;overflow-y:auto;padding:3px;margin:10px 0}
.bonusMissionCard.bonusSlot{min-height:132px;padding:9px 7px;opacity:1}
.bonusMissionCard.bonusSlot .bonusMissionVisual{transform:scale(.74);margin:-10px auto -9px}
.bonusMissionCard.bonusSlot b{font-size:12px;line-height:1.15}.bonusMissionCard.bonusSlot span,.bonusMissionCard.bonusSlot em,.bonusMissionCard.bonusSlot small{font-size:10px;line-height:1.2}
.bonusMissionCard.bonusSlot.locked{filter:grayscale(1);opacity:.42;cursor:not-allowed;box-shadow:none}
.bonusMissionCard.bonusSlot.locked .bonusMissionVisual{opacity:.55}
.bonusMissionCard.bonusSlot.ready{outline:2px solid #ffd75e;box-shadow:0 0 18px rgba(255,210,60,.35)}
.bonusMissionCard.bonusSlot.claimed{opacity:.78}
.bonusNextHint{padding:8px 10px;border-radius:10px;background:rgba(255,204,72,.13);border:1px solid rgba(255,214,94,.45);font-size:12px;font-weight:800;text-align:center}
@media(max-width:430px){.bonusMissionGrid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:46vh}.bonusMissionCard.bonusSlot{min-height:124px}}

/* V6.23 — story-specific art and clean Dr. E thought icons */
#levelStoryPanel .comicHero img#storyHeroArt{width:46%;height:100%;max-height:260px;object-fit:cover;object-position:center;border-right:4px solid #17243a;filter:saturate(1.05) contrast(1.03)}
@media(max-width:620px){#levelStoryPanel .comicHero img#storyHeroArt{width:100%;height:145px;max-height:145px;border-right:0;border-bottom:3px solid #17243a}}
/* V6.23 final story art: original characters, varied chapter compositions */
#levelStoryPanel .comicHero{display:block;background:#0c2340}
#levelStoryPanel .comicHero img#storyHeroArt{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;border:0;filter:saturate(1.04) contrast(1.04)}
#levelStoryPanel .comicHero .speechBubble{position:absolute;z-index:4;right:10px;bottom:12px;width:min(58%,330px);margin:0;background:rgba(255,255,255,.96)}
#levelStoryPanel .comicNumber{z-index:5}
#levelStoryPanel .storyPose1{object-position:50% 50%}
#levelStoryPanel .storyPose2{object-position:42% 50%;transform:scale(1.04)}
#levelStoryPanel .storyPose3{object-position:58% 44%;transform:scale(1.07)}
#levelStoryPanel .storyPose4{object-position:35% 55%;transform:scale(1.08)}
#levelStoryPanel .storyPose5{object-position:65% 48%;transform:scale(1.05)}
#levelStoryPanel .storyPose6{object-position:50% 35%;transform:scale(1.1)}
#levelStoryPanel .storyPose7{object-position:48% 62%;transform:scale(1.06)}
#levelStoryPanel.nullAppears .comicReaction{background:linear-gradient(135deg,#4a1e69,#7842a0 58%,#281238)}
#levelStoryPanel.nullAppears .nullStoryArt{object-fit:cover;object-position:50% 28%;filter:saturate(1.08) contrast(1.02)}
@media(max-width:620px){
  #levelStoryPanel .comicHero{min-height:180px}
  #levelStoryPanel .comicHero img#storyHeroArt{height:100%;max-height:none;border:0}
  #levelStoryPanel .comicHero .speechBubble{right:6px;bottom:6px;width:64%;font-size:11px}
}

/* V6.23 — readable multi-page comic story */
#levelStoryPanel{max-height:min(92vh,760px);overflow:auto;background:#f6d84d;padding:14px 14px 12px!important}
#levelStoryPanel .storyPageHead{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 38px 9px 0;color:#17243a;font-weight:1000}
#levelStoryPanel #storyChapter{font-size:15px;letter-spacing:.4px;text-align:left}
#levelStoryPanel #storyPageCounter{flex:0 0 auto;padding:3px 8px;border:2px solid #17243a;border-radius:999px;background:#fff;font-size:12px}
#levelStoryPanel .comicStrip{grid-template-columns:minmax(0,1.45fr) minmax(150px,.55fr);align-items:stretch}
#levelStoryPanel .comicPanel{min-height:250px}
#levelStoryPanel .comicHero{display:block;background:radial-gradient(circle at 30% 28%,#426ea2,#102943 65%,#071627)}
#levelStoryPanel .storyScene{position:absolute;inset:0;overflow:hidden}
#levelStoryPanel .storyScene img{position:absolute!important;bottom:-5%;height:92%!important;width:auto!important;max-width:72%;object-fit:contain!important;filter:drop-shadow(4px 6px 0 #17243a66)!important}
#levelStoryPanel #storyHeroArt{left:2%;display:none}
#levelStoryPanel #nullStoryArt{right:1%;left:auto;display:none}
#levelStoryPanel.showEinstein #storyHeroArt{display:block}
#levelStoryPanel.showNull #nullStoryArt{display:block}
#levelStoryPanel.bothCharacters #storyHeroArt{height:78%!important;left:-1%}
#levelStoryPanel.bothCharacters #nullStoryArt{height:76%!important;right:-2%}
#levelStoryPanel.storyAltPose #storyHeroArt{transform:scaleX(-1) rotate(-2deg)}
#levelStoryPanel.storyAltPose #nullStoryArt{transform:scaleX(-1) rotate(2deg)}
#levelStoryPanel .comicBang{z-index:7;right:8px;top:7px}
#levelStoryPanel .comicHero .speechBubble{position:absolute;z-index:8;right:12px;bottom:12px;width:min(54%,330px);max-height:48%;overflow:auto;margin:0;padding:12px 13px;border-radius:22px;font-size:13px;line-height:1.28;overflow-wrap:anywhere;word-break:normal;hyphens:auto}
#levelStoryPanel.showNull:not(.bothCharacters) .comicHero .speechBubble{right:auto;left:12px}
/* BUILD V6.23.1-STORY: percentage max-height above doesn't reliably resolve
   against .comicHero (no definite height), so on longer pages the bubble grew
   past the panel and got clipped by .comicPanel's overflow:hidden instead of
   scrolling. This override (later in the cascade, so it wins) uses viewport
   units instead, which don't depend on ancestor height, plus a bit of extra
   room on .comicPanel so the bubble never has to fight the clip boundary. */
#levelStoryPanel .comicPanel{min-height:278px}
#levelStoryPanel .comicHero .speechBubble{max-height:min(34vh,190px);overflow-y:auto}
/* BUILD V6.23.3: when a page supplies a custom generated scene image
   (panel.hasSceneArt, set in renderStoryPage), hide the separate character
   cutouts so the illustration reads cleanly on its own. */
#levelStoryPanel.hasSceneArt .storyScene{display:none}
@media(max-width:620px){
  #levelStoryPanel .comicPanel{min-height:225px}
  #levelStoryPanel .comicHero .speechBubble{max-height:min(26vh,140px);overflow-y:auto}
}
#levelStoryPanel .comicReaction{min-width:0;padding:18px 12px;background:repeating-radial-gradient(circle at center,#fff 0 10px,#ffeaa0 11px 22px)}
#levelStoryPanel .reactionMolecule{font-size:28px;max-width:92%;overflow-wrap:anywhere}
#levelStoryPanel .reactionText{width:100%;max-height:150px;overflow:auto;font-size:12px;line-height:1.3;overflow-wrap:anywhere}
#levelStoryPanel .storyNav{display:grid;grid-template-columns:56px 1fr;gap:8px;position:relative;z-index:3}
#levelStoryPanel .storyNav .btn{min-height:48px}
#levelStoryPanel .storySkipText{display:block;margin:8px auto 0;border:0;background:transparent;color:#17243a;text-decoration:underline;font:900 11px/1 inherit;cursor:pointer}
@media(max-width:620px){
 #levelStoryPanel{width:96vw;max-height:90vh;padding:10px!important}
 #levelStoryPanel .storyPageHead{margin-right:34px}
 #levelStoryPanel #storyChapter{font-size:12px}
 #levelStoryPanel .comicStrip{grid-template-columns:1fr}
 #levelStoryPanel .comicPanel{min-height:205px}
 #levelStoryPanel .comicReaction{min-height:92px;padding:9px}
 #levelStoryPanel .storyScene img{height:82%!important;max-width:68%}
 #levelStoryPanel .comicHero .speechBubble{right:7px;bottom:7px;width:58%;max-height:min(26vh,140px);overflow-y:auto;padding:9px 10px;font-size:11px;line-height:1.24}
 #levelStoryPanel.showNull:not(.bothCharacters) .comicHero .speechBubble{left:7px}
 #levelStoryPanel .reactionText{font-size:10.5px;max-height:76px;margin-top:6px}
 #levelStoryPanel .reactionMolecule{font-size:21px;padding:4px 9px}
}

/* V6.9.3 — live online player counter */
.onlinePlayerCount{position:absolute;left:50%;bottom:calc(var(--sab) + 22px);transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:7px;min-width:116px;padding:5px 10px;border:1px solid rgba(121,238,181,.28);border-radius:999px;background:rgba(9,13,30,.62);box-shadow:0 5px 18px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:10px;font-weight:900;letter-spacing:.65px;color:#dfffee;z-index:5;pointer-events:none}
.onlinePulse{width:7px;height:7px;border-radius:50%;background:#43e48c;box-shadow:0 0 0 0 rgba(67,228,140,.55);animation:mxOnlinePulse 1.8s ease-out infinite}
.onlinePlayerCount.offline{color:#aeb4c9;border-color:rgba(174,180,201,.2)}
.onlinePlayerCount.offline .onlinePulse{background:#778097;box-shadow:none;animation:none}
@keyframes mxOnlinePulse{0%{box-shadow:0 0 0 0 rgba(67,228,140,.52)}70%{box-shadow:0 0 0 7px rgba(67,228,140,0)}100%{box-shadow:0 0 0 0 rgba(67,228,140,0)}}
@media(max-height:700px){.onlinePlayerCount{bottom:calc(var(--sab) + 19px);padding:4px 9px;font-size:9px}.onlinePulse{width:6px;height:6px}}


/* V6.9.3 — compact luminous tutorial guidance */
#tutorialArrowHint{width:38px!important;height:38px!important;filter:drop-shadow(0 0 7px rgba(143,92,255,.95)) drop-shadow(0 0 14px rgba(65,211,255,.62))!important}
#tutorialArrowHint .tutGameArrow{width:34px!important;height:34px!important;border-radius:50%!important;background:radial-gradient(circle at 35% 28%,#fff 0 12%,#d7c7ff 25%,#7d4dff 62%,#35107c 100%)!important;border:1.5px solid rgba(255,255,255,.92)!important;color:#fff!important;font-size:22px!important;box-shadow:0 0 0 2px rgba(120,74,255,.28),0 0 11px rgba(128,80,255,.95),0 0 22px rgba(65,211,255,.42)!important;text-shadow:0 1px 2px rgba(0,0,0,.55)!important}
#tutorialArrowHint.on .tutGameArrow{animation:tutGlowPulse .9s ease-in-out infinite!important}
@keyframes tutGlowPulse{0%,100%{transform:rotate(var(--tut-rot,0deg)) scale(.92);filter:brightness(.96)}50%{transform:rotate(var(--tut-rot,0deg)) scale(1.08);filter:brightness(1.22)}}
.hofResetCountdown{margin:9px 0 3px;padding:8px 10px;border:1px solid rgba(155,115,255,.58);border-radius:12px;background:rgba(31,16,72,.72);box-shadow:inset 0 0 12px rgba(107,67,255,.18),0 0 12px rgba(98,63,255,.18);font-size:12px;line-height:1.35;color:#f0eaff}
.hofResetCountdown small{opacity:.68}

/* V6.9.3 STORY COMPLETE — final overflow guard */
#levelStoryPanel{max-height:min(94dvh,760px);overflow:hidden}
#levelStoryPanel .comicStrip{min-height:0}
#levelStoryPanel .comicPanel{min-width:0;min-height:0;overflow:hidden}
#levelStoryPanel .comicHero .speechBubble{
  box-sizing:border-box;
  max-width:calc(100% - 24px);
  max-height:min(32dvh,180px);
  overflow-x:hidden;
  overflow-y:auto;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:normal;
  -webkit-overflow-scrolling:touch;
}
#levelStoryPanel #storyText,#levelStoryPanel #storyReaction{overflow-wrap:anywhere;word-break:normal}
@media(max-width:620px){
  #levelStoryPanel{max-height:94dvh;overflow-y:auto;overscroll-behavior:contain}
  #levelStoryPanel .comicHero .speechBubble{
    left:auto;right:6px;bottom:6px;width:min(68%,330px);
    max-width:calc(100% - 12px);max-height:min(25dvh,138px);
    padding:9px 10px;font-size:clamp(10px,3vw,12px);line-height:1.25
  }
  #levelStoryPanel.showNull:not(.bothCharacters) .comicHero .speechBubble{left:6px;right:auto}
  #levelStoryPanel .storyNav{position:sticky;bottom:0;background:#fff8;padding-top:4px;backdrop-filter:blur(4px)}
}
@media(max-width:390px), (max-height:700px){
  #levelStoryPanel .comicHero .speechBubble{max-height:112px;font-size:10.5px}
  #levelStoryPanel .comicReaction{min-height:92px!important}
  #levelStoryPanel .reactionText{max-height:58px;overflow-y:auto}
}

/* V6.24.3 — professional story readability and small-screen safety */
#levelStoryPanel{max-height:min(94dvh,820px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#levelStoryPanel .comicStrip{min-height:0}
#levelStoryPanel .comicPanel{min-width:0;overflow:hidden}
#levelStoryPanel .speechBubble,#levelStoryPanel .reactionText{box-sizing:border-box;max-width:100%;white-space:normal;overflow-wrap:anywhere;hyphens:auto}

/* Added 2026-07-26, rewritten same day: first attempt used min-height on a
   flex box with a CSS background-image, which has NO intrinsic size, so the
   box height was still a guess and the art still clipped. This version uses
   a real <img> (sceneArtImg, inserted in game.js) in normal flow instead —
   width:100% + height:auto means the browser sizes .comicHero to the image
   itself, so cropping is no longer possible regardless of screen size. The
   caption bubble flows right after it, never on top of the art. */
#levelStoryPanel.hasSceneArt .comicPanel.comicHero{
  display:block;
  min-height:0;
  overflow:visible;
  background-image:none!important;
}
#levelStoryPanel.hasSceneArt .comicHero .sceneArtImg{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  object-fit:unset!important;
  border:0!important;
}
#levelStoryPanel.hasSceneArt .comicHero .speechBubble{
  position:static!important;
  top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;
  width:100%!important;
  max-width:none!important;
  margin:8px 0 0!important;
}
#levelStoryPanel.hasSceneArt .comicHero .speechBubble:after{display:none}
#levelStoryPanel #storyText{font-size:clamp(13px,2.7vw,19px);line-height:1.28}
#levelStoryPanel #storyReaction{font-size:clamp(11px,2.25vw,15px);line-height:1.3}
#levelStoryPanel #storyChapter{max-width:calc(100% - 58px);overflow-wrap:anywhere;line-height:1.15}
#levelStoryPanel .storyNav{padding-bottom:max(2px,env(safe-area-inset-bottom))}
@media(max-width:620px){
  #levelStoryPanel{width:min(96vw,520px);max-height:92dvh;padding:10px 10px max(10px,env(safe-area-inset-bottom))}
  #levelStoryPanel .comicHero{min-height:230px}
  #levelStoryPanel .comicReaction{min-height:82px}
  #levelStoryPanel .speechBubble{left:8px;right:8px;bottom:8px;padding:9px 11px}
  #levelStoryPanel .storyPageHead{align-items:flex-start;margin-bottom:7px}
  #levelStoryPanel #storyChapter{font-size:11.5px}
  #levelStoryPanel #storyPageCounter{font-size:10px;padding:2px 6px}
  #levelStoryPanel .storyNav .btn{min-height:44px;font-size:12px}
}
@media(max-width:380px), (max-height:690px){
  #levelStoryPanel{max-height:96dvh}
  #levelStoryPanel .comicHero{min-height:195px}
  #levelStoryPanel #storyText{font-size:12.5px;line-height:1.22}
  #levelStoryPanel #storyReaction{font-size:10.5px;line-height:1.22}
  #levelStoryPanel .storySkipText{margin-top:5px}
}

/* V7 mechanic onboarding */
#btnPrecision.mxTutorialPulse{animation:mxTutorialPulse 1s ease-in-out infinite;z-index:30}
@keyframes mxTutorialPulse{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.1);filter:brightness(1.65)}}
#boardFrame.mxTutorialBoardPulse{animation:mxTutorialBoardPulse 1.05s ease-in-out 6;position:relative;z-index:20}
@keyframes mxTutorialBoardPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.38)}}
#btnHammer.mxTutorialPulse{animation:mxTutorialPulse 1s ease-in-out infinite;z-index:30}

/* Step 15 — How to Play and assisted-run fairness */
#btnGuide{position:absolute;left:52px;bottom:12px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(7,20,38,.82);color:#bff7ff;font:900 20px/1 inherit;z-index:24;box-shadow:0 0 14px rgba(74,220,255,.25)}
#btnGuide:active{transform:scale(.94)}
.guideModal{width:min(92vw,620px);max-height:88vh;display:flex;flex-direction:column}
.guideScroll{overflow:auto;padding:2px 4px 8px;text-align:left}
.guideIntro{display:flex;flex-direction:column;gap:5px;padding:13px;border-radius:14px;background:rgba(47,211,255,.11);border:1px solid rgba(89,224,255,.25);margin-bottom:10px}
.guideIntro b{color:#d8fbff}.guideIntro span{font-size:13px;line-height:1.45;color:#dce9f2}
.guideSection{padding:10px 11px;margin:8px 0;border-radius:13px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09)}
.guideSection h4{margin:0 0 7px;font-size:13px;color:#ffe89a}.guideSection ul{margin:0;padding-left:19px}.guideSection li,.guideSection p{font-size:12.5px;line-height:1.48;color:#e9f2f7;margin:4px 0}
.guideGrid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.guideGrid article{display:flex;flex-direction:column;gap:3px;padding:8px;border-radius:10px;background:rgba(0,0,0,.2)}.guideGrid b{font-size:12px;color:#fff}.guideGrid span{font-size:11px;line-height:1.35;color:#cbdbe4}
.guideSection.fairPlay{border-color:rgba(255,198,67,.35);background:rgba(255,182,42,.08)}
.performanceResult .assistedRun{display:block;margin-top:5px;color:#ffd778;font-size:10px;letter-spacing:.04em}
@media(max-width:420px){.guideGrid{grid-template-columns:1fr}.guideModal{max-height:91vh}.guideSection{padding:9px}.guideSection li,.guideSection p{font-size:12px}}
.currentLevelMechanics{border-color:rgba(120,231,255,.38);background:linear-gradient(145deg,rgba(31,93,125,.16),rgba(65,35,105,.13))}
.currentMechanicGrid{display:grid;grid-template-columns:1fr;gap:8px;margin-top:9px}
.currentMechanicCard{display:flex;flex-direction:column;gap:4px;padding:10px 11px;border-radius:12px;background:rgba(4,16,29,.52);border:1px solid rgba(120,231,255,.18)}
.currentMechanicCard b{color:#fff;font-size:12.5px}.currentMechanicCard span{color:#d6e4ed;font-size:11.5px;line-height:1.4}.currentMechanicCard em{font-style:normal;color:#ffd978;font-size:11px;line-height:1.35}
@media(min-width:560px){.currentMechanicGrid{grid-template-columns:1fr 1fr}}


/* Step 18 — reactive laboratory spectacle */
#mxReactionCallout,#mxFinalWow{position:fixed;left:50%;z-index:120;pointer-events:none;opacity:0;text-align:center;transform:translate(-50%,-14px) scale(.72);filter:blur(5px);will-change:transform,opacity,filter}
#mxReactionCallout{top:21%;min-width:210px;padding:8px 18px;border-radius:999px;border:1px solid rgba(143,233,255,.65);background:linear-gradient(90deg,rgba(4,19,37,.08),rgba(5,31,52,.92),rgba(4,19,37,.08));box-shadow:0 0 26px rgba(62,218,255,.38),inset 0 0 18px rgba(255,255,255,.08)}
#mxReactionCallout b{display:block;font:900 clamp(17px,4vw,27px)/1 system-ui;letter-spacing:.08em;color:#eaffff;text-shadow:0 0 8px #65e7ff,0 0 20px rgba(65,216,255,.8)}
#mxReactionCallout span{display:block;margin-top:4px;color:#a9f3ff;font-size:13px;letter-spacing:.35em}
#mxReactionCallout.chain{border-color:rgba(255,218,83,.8);box-shadow:0 0 32px rgba(255,178,36,.52),inset 0 0 20px rgba(255,240,145,.12)}
#mxReactionCallout.chain b{color:#fff4a8;text-shadow:0 0 8px #ffce45,0 0 23px #ff8a1f}
#mxReactionCallout.perfect{border-color:rgba(209,140,255,.8);box-shadow:0 0 36px rgba(177,84,255,.55),inset 0 0 22px rgba(255,255,255,.15)}
#mxReactionCallout.perfect b{color:#fff;text-shadow:0 0 8px #fff,0 0 18px #cf7cff,0 0 34px #46dfff}
#mxReactionCallout.on{animation:mxReactionPop .92s cubic-bezier(.18,.9,.2,1) both}
@keyframes mxReactionPop{0%{opacity:0;transform:translate(-50%,18px) scale(.55);filter:blur(8px)}18%{opacity:1;transform:translate(-50%,0) scale(1.12);filter:blur(0)}68%{opacity:1;transform:translate(-50%,0) scale(1);filter:blur(0)}100%{opacity:0;transform:translate(-50%,-18px) scale(.94);filter:blur(2px)}}
#mxFinalWow{top:38%;width:min(92vw,660px);font:1000 clamp(25px,7vw,54px)/1 system-ui;letter-spacing:.06em;color:#fff;text-shadow:0 0 8px #fff,0 0 22px #78eaff,0 0 44px #b75cff}
#mxFinalWow.nobel{color:#fff4a3;text-shadow:0 0 8px #fff,0 0 20px #ffd52e,0 0 46px #ff7a00}
#mxFinalWow.on{animation:mxFinalWow 1.5s cubic-bezier(.12,.85,.18,1) both}
@keyframes mxFinalWow{0%{opacity:0;transform:translate(-50%,25px) scale(.45);filter:blur(12px)}18%{opacity:1;transform:translate(-50%,0) scale(1.18);filter:blur(0)}55%{opacity:1;transform:translate(-50%,0) scale(1);filter:blur(0)}100%{opacity:0;transform:translate(-50%,-26px) scale(1.05);filter:blur(3px)}}
@media(prefers-reduced-motion:reduce){#mxReactionCallout,#mxFinalWow{display:none!important}}

/* ================= STEP 19 — premium impact, result molecule and clean main menu ================= */
.mxBarrierCrack{position:fixed;z-index:100020;width:58px;height:58px;transform:translate(-50%,-50%) scale(.72);border-radius:12px;border:2px solid rgba(155,245,255,.9);background:linear-gradient(145deg,rgba(151,244,255,.38),rgba(35,130,206,.48));box-shadow:0 0 22px rgba(79,216,255,.75),inset 0 0 18px rgba(255,255,255,.32);opacity:0;pointer-events:none;transition:.14s ease}
.mxBarrierCrack.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.mxBarrierCrack i{position:absolute;left:50%;top:50%;width:2px;height:29px;transform-origin:50% 0;background:linear-gradient(#fff,rgba(117,232,255,.18));box-shadow:0 0 5px #fff}
.mxBarrierCrack i:nth-child(1){transform:rotate(18deg)}.mxBarrierCrack i:nth-child(2){transform:rotate(86deg)}.mxBarrierCrack i:nth-child(3){transform:rotate(151deg)}.mxBarrierCrack i:nth-child(4){transform:rotate(222deg)}.mxBarrierCrack i:nth-child(5){transform:rotate(294deg)}
.mxBarrierCrack.break{opacity:0;transform:translate(-50%,-50%) scale(1.45) rotate(8deg);filter:blur(1px)}
.mxResultMolecule{position:relative;width:118px;height:118px;margin:8px auto 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;background:radial-gradient(circle,rgba(90,225,255,.16),rgba(84,65,192,.08) 55%,transparent 72%);animation:mxResultMoleculeRise .9s cubic-bezier(.18,1.35,.35,1) both,mxResultMoleculeFloat 2.7s .9s ease-in-out infinite;filter:drop-shadow(0 10px 15px rgba(0,0,0,.35))}
.mxResultMolecule::before,.mxResultMolecule::after{content:"";position:absolute;inset:18px;border:1.5px solid rgba(118,230,255,.52);border-radius:50%;transform:rotate(55deg);animation:mxResultOrbitSpin 4.2s linear infinite}.mxResultMolecule::after{transform:rotate(-55deg);animation-direction:reverse;animation-duration:5.2s}
.mxResultOrbit{font-size:48px;line-height:1;color:#bff8ff;text-shadow:0 0 10px #4fd8ff,0 0 24px rgba(157,123,255,.8);animation:mxResultCoreSpin 6s linear infinite}
.mxResultMolecule>b{margin-top:2px;color:#fff;font-size:16px;letter-spacing:.5px;text-shadow:0 0 9px rgba(79,216,255,.7)}.mxResultMolecule>small{max-width:104px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#cfdcff;font-size:8px;font-weight:850}
@keyframes mxResultMoleculeRise{from{opacity:0;transform:translateY(34px) scale(.55) rotate(-22deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@keyframes mxResultMoleculeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}@keyframes mxResultCoreSpin{to{transform:rotate(360deg)}}@keyframes mxResultOrbitSpin{to{transform:rotate(415deg)}}
.guideSection.guideFx{border-color:rgba(79,216,255,.38);background:linear-gradient(145deg,rgba(26,82,126,.22),rgba(91,56,154,.2))}
/* Keep the main action stack calm and aligned. Foreground online controls stay above Dr. E. */
#splashBtns{width:min(70vw,278px);gap:7px;z-index:12}
#splashBtns .btn{min-height:43px;padding:9px 10px;font-size:15px}
#btnLabMenu.labDockBtn,#btnDuel.duelBtn,#btnHof.trophyBtn{left:14px;z-index:16}
#btnLabMenu.labDockBtn{bottom:calc(var(--sab) + 190px)}#btnDuel.duelBtn{bottom:calc(var(--sab) + 120px)}#btnHof.trophyBtn{bottom:calc(var(--sab) + 50px)}
.onlinePlayerCount{left:auto;right:14px;bottom:calc(var(--sab) + 17px);transform:none;z-index:18;min-width:110px;background:rgba(6,18,37,.88);border-color:rgba(121,238,181,.45);box-shadow:0 7px 22px rgba(0,0,0,.48),0 0 15px rgba(72,224,169,.12)}
#einBoxS{z-index:6}#splashBubble{z-index:17}#btnAbout,#btnGuide{z-index:20}
@media(max-height:700px){#splashBtns{gap:4px}#splashBtns .btn{min-height:37px;padding:7px 8px;font-size:13px}#btnLabMenu.labDockBtn{bottom:calc(var(--sab) + 164px)}#btnDuel.duelBtn{bottom:calc(var(--sab) + 104px)}#btnHof.trophyBtn{bottom:calc(var(--sab) + 44px)}.onlinePlayerCount{right:9px;bottom:calc(var(--sab) + 10px)}}
@media(max-width:360px){#splashBtns{width:68vw}.onlinePlayerCount{min-width:98px;padding:4px 7px;font-size:8.5px}}
@media(prefers-reduced-motion:reduce){.mxResultMolecule,.mxResultMolecule::before,.mxResultMolecule::after,.mxResultOrbit{animation:none!important}.mxBarrierCrack{transition:none}}


/* ================= V8.0.4 — responsive main-menu dock correction =================
   Restore Dr. E to the original background layer, keep online presence visible at
   bottom-center on every phone, and promote How to Play above the LAB SHOP dock. */
#einBoxS{
  z-index:5;
}

.onlinePlayerCount{
  left:50%;
  right:auto;
  bottom:calc(var(--sab) + 30px);
  transform:translateX(-50%);
  z-index:24;
  min-width:116px;
  max-width:48vw;
  box-sizing:border-box;
  white-space:nowrap;
  background:rgba(6,18,37,.9);
  border-color:rgba(121,238,181,.48);
  box-shadow:0 7px 22px rgba(0,0,0,.5),0 0 15px rgba(72,224,169,.13);
}

#btnGuide.guideDockBtn{
  position:absolute;
  left:14px;
  bottom:calc(var(--sab) + 260px);
  width:58px;
  height:58px;
  padding:0;
  border:0;
  border-radius:18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  overflow:hidden;
  z-index:16;
  color:#fff;
  background:linear-gradient(180deg,#7759ed,#4f32bd);
  box-shadow:0 5px 0 #342184,0 10px 20px rgba(0,0,0,.42),0 0 22px rgba(157,123,255,.38),inset 0 2px 3px rgba(255,255,255,.42);
  animation:guideDockFloat 3.6s ease-in-out infinite,guideDockGlow 2.9s ease-in-out infinite;
  transition:transform .13s cubic-bezier(.34,1.3,.64,1);
}
#btnGuide.guideDockBtn::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(145deg,rgba(255,255,255,.3),transparent 42%,rgba(0,0,0,.16));
  pointer-events:none;
}
#btnGuide.guideDockBtn::after{
  content:"";
  position:absolute;
  left:-70%;
  top:-25%;
  width:52%;
  height:150%;
  transform:rotate(20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
  animation:guideDockSweep 4.1s ease-in-out infinite;
  pointer-events:none;
}
#btnGuide.guideDockBtn:active{transform:scale(.88)}
.guideDockIcon,.guideDockMain,.guideDockMini{position:relative;z-index:1}
.guideDockIcon{
  width:23px;
  height:23px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid rgba(255,255,255,.9);
  border-radius:50%;
  font:1000 16px/1 system-ui;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.48));
}
.guideDockMain{font-size:8px;line-height:1;font-weight:1000;letter-spacing:.7px;text-shadow:0 1px 2px rgba(0,0,0,.68)}
.guideDockMini{font-size:6.5px;line-height:1;font-weight:1000;letter-spacing:.85px;color:#e9e2ff;text-shadow:0 1px 2px rgba(0,0,0,.68)}
@keyframes guideDockFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes guideDockGlow{0%,100%{box-shadow:0 5px 0 #342184,0 10px 20px rgba(0,0,0,.42),0 0 16px rgba(157,123,255,.25),inset 0 2px 3px rgba(255,255,255,.42)}50%{box-shadow:0 5px 0 #342184,0 10px 20px rgba(0,0,0,.42),0 0 27px rgba(181,159,255,.55),inset 0 2px 3px rgba(255,255,255,.46)}}
@keyframes guideDockSweep{0%,58%{left:-70%;opacity:0}72%{opacity:1}100%{left:125%;opacity:0}}

@media(max-height:700px){
  #btnGuide.guideDockBtn{left:14px;bottom:calc(var(--sab) + 224px);width:52px;height:52px;border-radius:16px}
  .guideDockIcon{width:20px;height:20px;font-size:14px}
  .guideDockMain{font-size:7.3px}.guideDockMini{font-size:6px}
  .onlinePlayerCount{left:50%;right:auto;bottom:calc(var(--sab) + 27px);transform:translateX(-50%);padding:4px 9px;font-size:9px}
}
@media(max-height:610px){
  #btnGuide.guideDockBtn{bottom:calc(var(--sab) + 198px);width:48px;height:48px;border-radius:15px}
  #btnLabMenu.labDockBtn{bottom:calc(var(--sab) + 142px);width:48px;height:48px}
  #btnDuel.duelBtn{bottom:calc(var(--sab) + 86px);width:48px;height:48px}
  #btnHof.trophyBtn{bottom:calc(var(--sab) + 30px);width:48px;height:48px}
  .onlinePlayerCount{bottom:calc(var(--sab) + 24px);max-width:46vw;min-width:102px;font-size:8.5px}
}
@media(max-width:360px){
  #btnGuide.guideDockBtn,#btnLabMenu.labDockBtn,#btnDuel.duelBtn,#btnHof.trophyBtn{left:9px}
  .onlinePlayerCount{left:50%;right:auto;transform:translateX(-50%);min-width:100px;max-width:45vw;padding:4px 7px;font-size:8.4px}
}
@media(prefers-reduced-motion:reduce){#btnGuide.guideDockBtn{animation:none!important}}

/* ================= V8.0.6 — final lower-menu alignment =================
   Preserve dock button sizes; lift the stack slightly, align About with it,
   seat Dr. E flush in the lower-right corner, and shift online presence left. */
#btnGuide.guideDockBtn{bottom:calc(var(--sab) + 272px)}
#btnLabMenu.labDockBtn{bottom:calc(var(--sab) + 202px)}
#btnDuel.duelBtn{bottom:calc(var(--sab) + 132px)}
#btnHof.trophyBtn{bottom:calc(var(--sab) + 62px)}
#btnAbout{
  left:27px;
  bottom:calc(var(--sab) + 8px);
  z-index:20;
}
#einBoxS{
  right:calc(var(--sar) - 30px);
  bottom:calc(var(--sab) - 34px);
  z-index:5;
}
.onlinePlayerCount{
  left:34%;
  right:auto;
  bottom:calc(var(--sab) + 30px);
  transform:translateX(-50%);
}
@media(max-height:700px){
  #btnGuide.guideDockBtn{bottom:calc(var(--sab) + 236px)}
  #btnLabMenu.labDockBtn{bottom:calc(var(--sab) + 176px)}
  #btnDuel.duelBtn{bottom:calc(var(--sab) + 116px)}
  #btnHof.trophyBtn{bottom:calc(var(--sab) + 56px)}
  #btnAbout{left:24px;bottom:calc(var(--sab) + 7px)}
  #einBoxS{right:calc(var(--sar) - 27px);bottom:calc(var(--sab) - 31px)}
  .onlinePlayerCount{left:34%;bottom:calc(var(--sab) + 27px)}
}
@media(max-height:610px){
  #btnGuide.guideDockBtn{bottom:calc(var(--sab) + 210px)}
  #btnLabMenu.labDockBtn{bottom:calc(var(--sab) + 154px)}
  #btnDuel.duelBtn{bottom:calc(var(--sab) + 98px)}
  #btnHof.trophyBtn{bottom:calc(var(--sab) + 42px)}
  #btnAbout{left:22px;bottom:calc(var(--sab) + 5px)}
  #einBoxS{right:calc(var(--sar) - 24px);bottom:calc(var(--sab) - 27px)}
  .onlinePlayerCount{left:35%;bottom:calc(var(--sab) + 23px)}
}
@media(max-width:360px){
  #btnAbout{left:19px}
  .onlinePlayerCount{left:36%}
}

/* ================= V8.0.6 — Dr. E true bottom-right anchor =================
   Override the generic small-screen Einstein cap only on the main menu.
   The character's right edge and feet stay flush with the visible game frame. */
#splash #einBoxS{
  right:0!important;
  bottom:-2px!important;
  height:min(46vh,410px)!important;
  max-height:none!important;
  width:auto!important;
  aspect-ratio:468/520;
  transform:none!important;
  transform-origin:right bottom!important;
  z-index:5;
}
#splash #einBoxS .einImg{
  display:block;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain;
  object-position:right bottom;
}
@media(max-height:760px){
  #splash #einBoxS{height:min(42vh,350px)!important;right:0!important;bottom:-2px!important}
}
@media(max-height:620px){
  #splash #einBoxS{height:min(38vh,285px)!important;right:0!important;bottom:-2px!important}
}
body.iosStandalone #splash #einBoxS{
  right:0!important;
  bottom:0!important;
  height:min(42dvh,350px)!important;
  max-height:none!important;
}


/* V8.0.7: language always visible and Dr. E seated in the actual lower-right crop. */
#modalBox.settingsModal .settingsScroll > .togRow:first-child{position:sticky;top:0;z-index:4;margin-bottom:4px;padding:8px 5px;background:rgba(23,18,62,.98);border-bottom:1px solid rgba(157,123,255,.24)}
#splash #einBoxS{right:-7.5vw!important;bottom:-8.5vh!important;height:min(58vh,510px)!important;max-height:none!important;overflow:visible!important}
@media(max-height:760px){#splash #einBoxS{right:-8vw!important;bottom:-9vh!important;height:min(55vh,455px)!important}}
@media(max-height:620px){#splash #einBoxS{right:-8.5vw!important;bottom:-10vh!important;height:min(52vh,390px)!important}}
body.iosStandalone #splash #einBoxS{right:-7.5vw!important;bottom:-8vh!important;height:min(56dvh,470px)!important}


/* ================= V8.0.8 — bilingual UI preserved; Dr. E old scale =================
   Language content remains conditional: Turkish for LANG=tr, English for LANG=en.
   Do not enlarge the character; only anchor the original proportion at lower-right. */
#splash #einBoxS{
  right:0!important;
  bottom:-2px!important;
  height:min(46vh,410px)!important;
  max-height:none!important;
  width:auto!important;
  aspect-ratio:468/520!important;
  transform:none!important;
  transform-origin:right bottom!important;
  overflow:visible!important;
}
#splash #einBoxS .einImg{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:right bottom!important;
}
@media(max-height:760px){
  #splash #einBoxS{right:0!important;bottom:-2px!important;height:min(42vh,350px)!important}
}
@media(max-height:620px){
  #splash #einBoxS{right:0!important;bottom:-2px!important;height:min(38vh,285px)!important}
}
body.iosStandalone #splash #einBoxS{
  right:0!important;
  bottom:0!important;
  height:min(42dvh,350px)!important;
}

/* ================= V8.1.0 RC — final menu, guide and dialogue safety ================= */
/* Preserve the approved dock/online/about layout. Seat Dr. E at the lower-right at the old scale. */
#splash #einBoxS{
  right:-2px!important;
  bottom:-18px!important;
  height:min(46vh,410px)!important;
  max-height:none!important;
  width:auto!important;
  aspect-ratio:468/520!important;
  transform:none!important;
  overflow:visible!important;
}
@media(max-height:760px){#splash #einBoxS{right:-2px!important;bottom:-16px!important;height:min(42vh,350px)!important}}
@media(max-height:620px){#splash #einBoxS{right:-2px!important;bottom:-14px!important;height:min(38vh,285px)!important}}
/* Keep both Dr. E and his text visible during levels. */
#gameScr .einSpeech,#gameScr .speech,#playScr .einSpeech,#playScr .speech{
  right:auto!important;
  left:clamp(92px,14vw,132px)!important;
  max-width:min(58vw,245px)!important;
  transform:none!important;
}
/* The guide must scroll on short phones and expose a visible scrollbar. */
#modalBox.guideModal{max-height:min(86dvh,760px)!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}
#modalBox.guideModal .guideScroll{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding-right:14px!important;
  scrollbar-gutter:stable;
  scrollbar-width:auto;
  scrollbar-color:#9b7cff rgba(255,255,255,.10);
}
#modalBox.guideModal .guideScroll::-webkit-scrollbar{width:9px}
#modalBox.guideModal .guideScroll::-webkit-scrollbar-track{background:rgba(255,255,255,.08);border-radius:99px}
#modalBox.guideModal .guideScroll::-webkit-scrollbar-thumb{background:linear-gradient(#b69cff,#6b45e8);border-radius:99px;border:2px solid rgba(20,15,55,.75)}
#modalBox.guideModal .mrow{flex:0 0 auto;margin-top:10px}


/* ================= V8.1.2 — universal mobile modal scrolling and fixed Dr. E layout ================= */
#modalBox{position:relative;max-height:calc(100dvh - max(20px,var(--sat)) - max(20px,var(--sab)))!important;overscroll-behavior:contain}
#modalBox.card:not(.settingsModal):not(.guideModal):not(.musicModal){overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#9d7bff rgba(255,255,255,.08)}
#modalBox::-webkit-scrollbar,#modalBox .settingsScroll::-webkit-scrollbar,#modalBox .guideScroll::-webkit-scrollbar{width:7px}
#modalBox::-webkit-scrollbar-track,#modalBox .settingsScroll::-webkit-scrollbar-track,#modalBox .guideScroll::-webkit-scrollbar-track{background:rgba(255,255,255,.07);border-radius:999px}
#modalBox::-webkit-scrollbar-thumb,#modalBox .settingsScroll::-webkit-scrollbar-thumb,#modalBox .guideScroll::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#a98cff,#4fd8ff);border-radius:999px}
.mxModalScrollRail{position:absolute;z-index:90;right:5px;top:62px;bottom:62px;width:5px;border-radius:999px;background:rgba(255,255,255,.09);opacity:0;pointer-events:none;transition:opacity .2s}
.mxModalScrollRail.on{opacity:1}.mxModalScrollRail span{display:block;width:100%;min-height:28px;border-radius:999px;background:linear-gradient(180deg,#b59cff,#4fd8ff);box-shadow:0 0 8px rgba(104,213,255,.55);will-change:transform}
#modalBox.settingsModal .mxModalScrollRail,#modalBox.guideModal .mxModalScrollRail{top:58px;bottom:70px}
#modalBox.guideModal .guideScroll{padding-right:12px!important;padding-bottom:24px!important}
#splash{overflow:hidden!important}
#splash #einBoxS{position:absolute!important;left:auto!important;top:auto!important;right:max(-2px,calc(var(--sar) - 2px))!important;bottom:max(-3px,calc(var(--sab) - 3px))!important;height:clamp(250px,43vh,410px)!important;width:auto!important;max-height:none!important;aspect-ratio:468/520!important;transform:none!important;transform-origin:right bottom!important;overflow:visible!important;z-index:5!important}
#splash #einBoxS .einImg{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:right bottom!important;transform:none!important}
@media(max-height:760px){#splash #einBoxS{height:clamp(235px,40vh,350px)!important}}@media(max-height:620px){#splash #einBoxS{height:clamp(210px,37vh,285px)!important}}@supports(height:100svh){#splash #einBoxS{height:clamp(250px,43svh,410px)!important}}
#gameScr #bubble,#playScr #bubble,#gameScr .einSpeech,#playScr .einSpeech,#gameScr .speech,#playScr .speech{left:auto!important;right:clamp(132px,31vw,220px)!important;bottom:clamp(44px,7vh,72px)!important;width:min(54vw,230px)!important;max-width:min(54vw,230px)!important;transform-origin:100% 100%!important}
#gameScr #bubble::after,#playScr #bubble::after{right:-9px!important;left:auto!important}@media(max-width:360px){#gameScr #bubble,#playScr #bubble,#gameScr .einSpeech,#playScr .einSpeech,#gameScr .speech,#playScr .speech{right:118px!important;width:min(55vw,198px)!important}}
.accountActions .btn.googleLinked{opacity:1!important;color:#217a42!important;background:#effff3!important;box-shadow:0 5px 0 #a9d9b6,0 9px 22px rgba(0,0,0,.28)!important;cursor:default}

/* V8.1.2 — reliable mobile modal scrolling */
#modalBox{overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:rgba(157,123,255,.82) rgba(255,255,255,.07)}
#modalBox::-webkit-scrollbar,#modalBox .settingsScroll::-webkit-scrollbar,#modalBox .guideScroll::-webkit-scrollbar,#modalBox .modalScroll::-webkit-scrollbar,#modalBox .scrollArea::-webkit-scrollbar{width:7px}
#modalBox::-webkit-scrollbar-track,#modalBox .settingsScroll::-webkit-scrollbar-track,#modalBox .guideScroll::-webkit-scrollbar-track,#modalBox .modalScroll::-webkit-scrollbar-track,#modalBox .scrollArea::-webkit-scrollbar-track{background:rgba(255,255,255,.07);border-radius:999px}
#modalBox::-webkit-scrollbar-thumb,#modalBox .settingsScroll::-webkit-scrollbar-thumb,#modalBox .guideScroll::-webkit-scrollbar-thumb,#modalBox .modalScroll::-webkit-scrollbar-thumb,#modalBox .scrollArea::-webkit-scrollbar-thumb{background:rgba(157,123,255,.82);border-radius:999px;border:1px solid rgba(255,255,255,.18)}
#modalBox .settingsScroll,#modalBox .guideScroll,#modalBox .modalScroll,#modalBox .scrollArea{overflow-y:auto!important;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(157,123,255,.82) rgba(255,255,255,.07)}
@media(max-width:430px),(max-height:760px){#modalBox{max-height:calc(100dvh - max(14px,var(--sat)) - max(14px,var(--sab)))!important}}


/* ================= V8.1.4 — browser zoom lock ================= */
html,body{
  width:100%!important;
  max-width:100%!important;
  min-height:100%!important;
  overflow:hidden!important;
  touch-action:pan-y!important;
  -webkit-text-size-adjust:100%!important;
  text-size-adjust:100%!important;
}
.screen,#gameScr,#playScr,#splash,#studioScr,#bootScr{
  touch-action:pan-y!important;
  max-width:100vw!important;
}
button,.btn,[role="button"],canvas,.atom,.cell{touch-action:manipulation!important}
input,select,textarea{font-size:16px!important}
#modalBox,#modalBox .settingsScroll,#modalBox .guideScroll,#modalBox .modalScroll,#modalBox .scrollArea{touch-action:pan-y!important}
@supports(height:100dvh){body{height:100dvh!important}}


/* ================= V8.1.6 — verified mobile scroll/zoom fixes ================= */
#modal{overscroll-behavior:none!important}
#modalBox.mxUniversalScroll{
  display:block!important;
  width:min(92vw,620px)!important;
  max-width:92vw!important;
  max-height:calc(100dvh - max(20px,var(--sat)) - max(20px,var(--sab)))!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
  touch-action:pan-y!important;
  scrollbar-gutter:stable;
}
#modalBox.mxUniversalScroll>.settingsScroll,
#modalBox.mxUniversalScroll>.guideScroll,
#modalBox.mxUniversalScroll>.modalScroll,
#modalBox.mxUniversalScroll>.scrollArea{
  max-height:none!important;
  overflow:visible!important;
  touch-action:pan-y!important;
}
#modalBox.mxUniversalScroll input,
#modalBox.mxUniversalScroll textarea,
#modalBox.mxUniversalScroll select{font-size:16px!important;touch-action:manipulation!important}
html,body{touch-action:none!important;overscroll-behavior:none!important}
#modal,#modalBox,.scrollArea,.settingsScroll,.guideScroll,.modalScroll,.mtlist{touch-action:pan-y!important}
button,.btn,[role="button"],canvas,#board,#dpad{touch-action:manipulation!important}

/* ================= V8.1.7 — settings visible scroll and permanent navigation ================= */
#modalBox.mxUniversalScroll.settingsModal{
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  width:min(94vw,620px)!important;
  max-height:calc(100dvh - max(16px,var(--sat)) - max(16px,var(--sab)))!important;
}
#modalBox.mxUniversalScroll.settingsModal>.settingsScroll{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:scroll!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-y!important;
  padding-right:14px!important;
  padding-bottom:18px!important;
  scrollbar-gutter:stable!important;
  scrollbar-width:auto!important;
  scrollbar-color:#a98cff rgba(255,255,255,.12)!important;
}
#modalBox.mxUniversalScroll.settingsModal>.settingsScroll::-webkit-scrollbar{width:10px!important}
#modalBox.mxUniversalScroll.settingsModal>.settingsScroll::-webkit-scrollbar-track{background:rgba(255,255,255,.10)!important;border-radius:999px!important}
#modalBox.mxUniversalScroll.settingsModal>.settingsScroll::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#c2adff,#52dfff)!important;border-radius:999px!important;border:2px solid rgba(20,15,55,.78)!important}
#modalBox.settingsModal .settingsFixedNav{
  flex:0 0 auto!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:7px!important;
  padding-top:9px!important;
  margin-top:2px!important;
  border-top:1px solid rgba(255,255,255,.12)!important;
  background:rgba(14,10,42,.98)!important;
  z-index:100!important;
}
#modalBox.settingsModal .settingsFixedNav .btn{min-height:44px!important;margin:0!important;padding:9px 7px!important;font-size:clamp(11px,3.2vw,14px)!important}
#modalBox.settingsModal .settingsFixedNav .settingsClose{grid-column:1/-1!important;width:100%!important}
#modalBox.settingsModal .settingsScrollBtn:disabled{opacity:.45!important}
#modalBox.settingsModal>.mxModalScrollRail{right:7px!important;top:56px!important;bottom:116px!important;width:7px!important}
@media(max-height:650px){
  #modalBox.settingsModal .settingsFixedNav{grid-template-columns:1fr 1fr 1fr!important}
  #modalBox.settingsModal .settingsFixedNav .settingsClose{grid-column:auto!important}
  #modalBox.settingsModal .settingsFixedNav .btn{min-height:40px!important;font-size:11px!important;padding:7px 4px!important}
  #modalBox.settingsModal>.mxModalScrollRail{bottom:62px!important}
}


/* ================= V8.1.8 — universal navigation for every long modal ================= */
#modalBox.mxUniversalScroll.mxHasFixedNav{
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  width:min(94vw,620px)!important;
  max-height:calc(100dvh - max(16px,var(--sat)) - max(16px,var(--sab)))!important;
}
#modalBox.mxUniversalScroll.mxHasFixedNav>.guideScroll,
#modalBox.mxUniversalScroll.mxHasFixedNav>.settingsScroll,
#modalBox.mxUniversalScroll.mxHasFixedNav>.modalScroll,
#modalBox.mxUniversalScroll.mxHasFixedNav>.scrollArea{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:scroll!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-y!important;
  overscroll-behavior:contain!important;
  padding-right:14px!important;
  padding-bottom:18px!important;
  scrollbar-gutter:stable!important;
}
#modalBox .mxUniversalFixedNav{
  flex:0 0 auto!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:7px!important;
  padding-top:9px!important;
  margin-top:4px!important;
  border-top:1px solid rgba(255,255,255,.12)!important;
  background:rgba(14,10,42,.98)!important;
  z-index:100!important;
}
#modalBox .mxUniversalFixedNav .btn{
  min-height:44px!important;
  margin:0!important;
  padding:9px 7px!important;
  font-size:clamp(11px,3.2vw,14px)!important;
}
#modalBox .mxUniversalFixedNav .mxUniversalScrollBtn:disabled{opacity:.45!important}
#modalBox.mxHasFixedNav>.mxModalScrollRail{right:7px!important;top:56px!important;bottom:62px!important;width:7px!important}


/* ================= V8.1.9 — all modal bodies + verified fixed navigation ================= */
#modalBox.mxUniversalScroll.mxHasFixedNav>.mxUniversalBody{
  flex:1 1 auto!important;
  min-height:0!important;
  width:100%!important;
  overflow-y:scroll!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-y!important;
  overscroll-behavior:contain!important;
  padding-right:14px!important;
  padding-bottom:18px!important;
  scrollbar-gutter:stable!important;
  scrollbar-width:auto!important;
  scrollbar-color:#a98cff rgba(255,255,255,.12)!important;
}
#modalBox.mxUniversalScroll.mxHasFixedNav>.mxUniversalBody::-webkit-scrollbar{width:10px!important}
#modalBox.mxUniversalScroll.mxHasFixedNav>.mxUniversalBody::-webkit-scrollbar-track{background:rgba(255,255,255,.10)!important;border-radius:999px!important}
#modalBox.mxUniversalScroll.mxHasFixedNav>.mxUniversalBody::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#c2adff,#52dfff)!important;border-radius:999px!important;border:2px solid rgba(20,15,55,.78)!important}
#modalBox .mxUniversalFixedNav.mxNoScrollNeeded .mxUniversalScrollBtn{display:none!important}
#modalBox .mxUniversalFixedNav.mxNoScrollNeeded{grid-template-columns:1fr!important}

/* ================= V8.2.0 — native touch scrolling, original Close buttons ================= */
#modalBox.mxUniversalScroll.mxTouchScrollModal{
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  width:min(94vw,620px)!important;
  max-height:calc(100dvh - max(16px,var(--sat)) - max(16px,var(--sab)))!important;
}
#modalBox.mxUniversalScroll.mxTouchScrollModal>.guideScroll,
#modalBox.mxUniversalScroll.mxTouchScrollModal>.modalScroll,
#modalBox.mxUniversalScroll.mxTouchScrollModal>.scrollArea,
#modalBox.mxUniversalScroll.mxTouchScrollModal>.mxUniversalBody{
  flex:1 1 auto!important;
  min-height:0!important;
  width:100%!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-y!important;
  overscroll-behavior:contain!important;
  padding-right:14px!important;
  padding-bottom:18px!important;
  scrollbar-gutter:stable!important;
}
#modalBox.settingsModal .settingsFixedNav{
  grid-template-columns:1fr!important;
}
#modalBox.settingsModal .settingsFixedNav .settingsClose{
  grid-column:auto!important;
}
#modalBox.settingsModal>.mxModalScrollRail{bottom:62px!important}

/* V8.2.1 — clean settings, main-menu learning docks, collection tabs */
#modalBox.mxUniversalScroll.settingsModal>.settingsScroll::-webkit-scrollbar{width:4px!important}
#modalBox.mxUniversalScroll.settingsModal>.settingsScroll::-webkit-scrollbar-track{background:transparent!important}
#modalBox.mxUniversalScroll.settingsModal>.settingsScroll::-webkit-scrollbar-thumb{background:rgba(157,123,255,.62)!important;border:0!important;border-radius:999px!important}
#modalBox.mxUniversalScroll.settingsModal>.settingsScroll{scrollbar-width:thin!important;scrollbar-color:rgba(157,123,255,.62) transparent!important}

.learningDockBtn{
  position:absolute;left:14px;width:58px;height:58px;padding:0;border:0;border-radius:18px;z-index:16;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;overflow:hidden;
  color:#fff;font:inherit;box-shadow:0 5px 0 rgba(20,18,76,.92),0 10px 20px rgba(0,0,0,.42),inset 0 2px 3px rgba(255,255,255,.38);
  touch-action:manipulation;transition:transform .13s cubic-bezier(.34,1.3,.64,1)
}
.learningDockBtn::before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.3),transparent 42%,rgba(0,0,0,.16));pointer-events:none}
.learningDockBtn:active{transform:scale(.88)}
.trainingDockBtn{bottom:calc(var(--sab) + 412px);background:linear-gradient(180deg,#1ebc9a,#117e73)}
.moleculopediaDockBtn{bottom:calc(var(--sab) + 342px);background:linear-gradient(180deg,#477eea,#2b49a9)}
.learningDockIcon,.learningDockMain,.learningDockMini{position:relative;z-index:1}
.learningDockIcon{font-size:21px;line-height:1}
.learningDockMain{font-size:7.8px;line-height:1.05;font-weight:950;letter-spacing:.25px}
.learningDockMini{font-size:6.4px;line-height:1;font-weight:900;opacity:.88;letter-spacing:.35px}
@media(max-height:760px){
  .learningDockBtn{left:9px;width:48px;height:48px;border-radius:15px}
  .learningDockIcon{font-size:17px}.learningDockMain{font-size:6.7px}.learningDockMini{font-size:5.6px}
  .trainingDockBtn{bottom:calc(var(--sab) + 320px)}.moleculopediaDockBtn{bottom:calc(var(--sab) + 264px)}
}
@media(max-width:360px){.learningDockBtn{left:7px}}

/* Moleculopedia: native finger scrolling, slim scrollbar, fixed Close row below content. */
#modalBox .mechanicGuideList.settingsScroll{
  overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important;touch-action:pan-y!important;
  scrollbar-width:thin!important;scrollbar-color:rgba(157,123,255,.58) transparent!important
}
#modalBox .mechanicGuideList.settingsScroll::-webkit-scrollbar{width:4px!important}
#modalBox .mechanicGuideList.settingsScroll::-webkit-scrollbar-track{background:transparent!important}
#modalBox .mechanicGuideList.settingsScroll::-webkit-scrollbar-thumb{background:rgba(157,123,255,.58)!important;border-radius:999px!important}

#collectScr{display:flex;flex-direction:column}
.collectionTabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:7px 10px 8px;flex:0 0 auto;background:rgba(10,10,35,.72);border-bottom:1px solid rgba(157,123,255,.25)}
.collectionTab{min-width:0;border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:8px 4px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.72);font:inherit;font-size:10px;font-weight:900;display:flex;align-items:center;justify-content:center;gap:4px;touch-action:manipulation}
.collectionTab.on{color:#fff;background:linear-gradient(135deg,rgba(126,88,255,.75),rgba(56,196,255,.32));border-color:rgba(184,166,255,.72);box-shadow:0 0 14px rgba(126,88,255,.22)}
.collectionPanel{display:none}.collectionPanel.on{display:block}
.collectionScroll{flex:1;min-height:0}
@media(max-width:430px){.collectionTab{font-size:8.5px;padding:8px 2px;gap:2px}.collectionTab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}

/* ================= V8.2.3 — polished learning menus and native touch scroll ================= */
/* Settings uses the same quiet, slim indicator as the other menus. */
#modalBox.settingsModal>.mxModalScrollRail{
  right:5px!important;top:58px!important;bottom:62px!important;width:3px!important;
  background:rgba(255,255,255,.055)!important;box-shadow:none!important
}
#modalBox.settingsModal>.mxModalScrollRail span{
  background:rgba(175,160,224,.52)!important;box-shadow:none!important;border:0!important
}
#modalBox.mxUniversalScroll.settingsModal>.settingsScroll{
  padding-right:8px!important;scrollbar-color:rgba(175,160,224,.48) transparent!important
}
#modalBox.mxUniversalScroll.settingsModal>.settingsScroll::-webkit-scrollbar{width:3px!important}
#modalBox.mxUniversalScroll.settingsModal>.settingsScroll::-webkit-scrollbar-thumb{background:rgba(175,160,224,.48)!important;box-shadow:none!important}

/* Support and Moleculopedia keep their Close button visible below a finger-scroll area. */
#modalBox.mxTouchScrollModal>.supportTutorialScroll,
#modalBox.mxTouchScrollModal>.mechanicGuideList{
  flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;touch-action:pan-y!important;overscroll-behavior:contain!important;
  padding-right:8px!important;scrollbar-width:thin!important;scrollbar-color:rgba(175,160,224,.48) transparent!important
}
#modalBox .supportTutorialScroll::-webkit-scrollbar,
#modalBox .mechanicGuideList::-webkit-scrollbar{width:3px!important}
#modalBox .supportTutorialScroll::-webkit-scrollbar-track,
#modalBox .mechanicGuideList::-webkit-scrollbar-track{background:transparent!important}
#modalBox .supportTutorialScroll::-webkit-scrollbar-thumb,
#modalBox .mechanicGuideList::-webkit-scrollbar-thumb{background:rgba(175,160,224,.48)!important;border:0!important;border-radius:999px!important;box-shadow:none!important}
#modalBox .modalFixedClose{flex:0 0 auto!important;margin:8px 0 0!important;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}
#modalBox .modalFixedClose .btn{width:100%;margin:0}
#modalBox .moleculopediaHead{flex:0 0 auto}

/* Training Center contains training only; no duplicate Moleculopedia launcher. */
#modalBox #tcMoleculopedia{display:none!important}

/* Learning shortcuts sit directly above How To Play and match the existing dock family. */
.learningDockBtn{
  width:58px!important;height:58px!important;border-radius:18px!important;
  background:linear-gradient(180deg,#7759ed,#4f32bd)!important;
  box-shadow:0 5px 0 #342184,0 10px 20px rgba(0,0,0,.42),0 0 18px rgba(157,123,255,.28),inset 0 2px 3px rgba(255,255,255,.38)!important
}
.trainingDockBtn{bottom:calc(var(--sab) + 400px)!important}
.moleculopediaDockBtn{bottom:calc(var(--sab) + 330px)!important}
.learningDockIcon{font-size:22px!important}.learningDockMain{font-size:7.6px!important}.learningDockMini{font-size:6.2px!important}
@media(max-height:760px){
  .learningDockBtn{width:48px!important;height:48px!important;border-radius:15px!important}
  .trainingDockBtn{bottom:calc(var(--sab) + 368px)!important}.moleculopediaDockBtn{bottom:calc(var(--sab) + 312px)!important}
  .learningDockIcon{font-size:17px!important}.learningDockMain{font-size:6.5px!important}.learningDockMini{font-size:5.4px!important}
}

/* ================= V8.2.4 — dock spacing, distinct colors, shared shine ================= */
/* Match the vertical rhythm of the existing left-side dock buttons. */
.trainingDockBtn{bottom:calc(var(--sab) + 412px)!important}
.moleculopediaDockBtn{bottom:calc(var(--sab) + 342px)!important}

/* Distinct but compatible colors so the two learning shortcuts are easy to tell apart. */
.trainingDockBtn{
  background:linear-gradient(180deg,#7567f3,#4b3cad)!important;
  box-shadow:0 5px 0 #30276f,0 10px 20px rgba(0,0,0,.42),0 0 18px rgba(117,103,243,.28),inset 0 2px 3px rgba(255,255,255,.38)!important
}
.moleculopediaDockBtn{
  background:linear-gradient(180deg,#2da9b6,#247184)!important;
  box-shadow:0 5px 0 #174955,0 10px 20px rgba(0,0,0,.42),0 0 18px rgba(45,169,182,.26),inset 0 2px 3px rgba(255,255,255,.38)!important
}

/* Same moving highlight used by How To Play, Lab Shop and the other premium dock buttons. */
.learningDockBtn::after{
  content:"";
  position:absolute;
  left:-70%;
  top:-25%;
  width:52%;
  height:150%;
  transform:rotate(20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
  animation:guideDockSweep 4.1s ease-in-out infinite;
  pointer-events:none
}
.moleculopediaDockBtn::after{animation-delay:.65s}

/* Settings now uses exactly the same quiet scrollbar treatment as other touch-scroll menus. */
#modalBox.mxUniversalScroll.settingsModal>.settingsScroll{
  scrollbar-width:thin!important;
  scrollbar-color:rgba(175,160,224,.48) transparent!important
}
#modalBox.mxUniversalScroll.settingsModal>.settingsScroll::-webkit-scrollbar{width:3px!important}
#modalBox.mxUniversalScroll.settingsModal>.settingsScroll::-webkit-scrollbar-track{background:transparent!important}
#modalBox.mxUniversalScroll.settingsModal>.settingsScroll::-webkit-scrollbar-thumb{
  background:rgba(175,160,224,.48)!important;
  border:0!important;
  border-radius:999px!important;
  box-shadow:none!important
}
#modalBox.settingsModal>.mxModalScrollRail{
  width:3px!important;
  background:transparent!important;
  box-shadow:none!important
}
#modalBox.settingsModal>.mxModalScrollRail span{
  background:rgba(175,160,224,.48)!important;
  border:0!important;
  box-shadow:none!important
}

@media(max-height:760px){
  .trainingDockBtn{bottom:calc(var(--sab) + 368px)!important}
  .moleculopediaDockBtn{bottom:calc(var(--sab) + 312px)!important}
}
@media(prefers-reduced-motion:reduce){.learningDockBtn::after{animation:none!important}}

/* ================= V8.2.5 — exact guide motion + Levels scrollbar parity ================= */
/* Training Center and Moleculopedia use the same float, pulse and sweep motion as How To Play. */
.learningDockBtn{
  animation:guideDockFloat 3.6s ease-in-out infinite,learningDockGlow 2.9s ease-in-out infinite!important;
  transition:transform .13s cubic-bezier(.34,1.3,.64,1)!important;
}
.trainingDockBtn{
  background:linear-gradient(180deg,#f3a52f,#c96f15)!important;
  box-shadow:0 5px 0 #81420d,0 10px 20px rgba(0,0,0,.42),0 0 18px rgba(243,165,47,.30),inset 0 2px 3px rgba(255,255,255,.40)!important;
}
.moleculopediaDockBtn{
  background:linear-gradient(180deg,#388ee8,#2452b7)!important;
  box-shadow:0 5px 0 #173579,0 10px 20px rgba(0,0,0,.42),0 0 18px rgba(56,142,232,.30),inset 0 2px 3px rgba(255,255,255,.40)!important;
}
@keyframes learningDockGlow{
  0%,100%{filter:brightness(1);}
  50%{filter:brightness(1.12);}
}
/* Keep exactly the same vertical rhythm as the existing dock family. */
.moleculopediaDockBtn{bottom:calc(var(--sab) + 342px)!important}
.trainingDockBtn{bottom:calc(var(--sab) + 412px)!important}
@media(max-height:760px){
  .moleculopediaDockBtn{bottom:calc(var(--sab) + 312px)!important}
  .trainingDockBtn{bottom:calc(var(--sab) + 368px)!important}
}

/* How To Play and Settings now copy the Levels/music-list scrollbar exactly. */
#modalBox.guideModal .guideScroll,
#modalBox.mxUniversalScroll.settingsModal>.settingsScroll{
  scrollbar-gutter:stable!important;
  scrollbar-width:thin!important;
  scrollbar-color:#9d7bff rgba(255,255,255,.10)!important;
  padding-right:14px!important;
}
#modalBox.guideModal .guideScroll::-webkit-scrollbar,
#modalBox.mxUniversalScroll.settingsModal>.settingsScroll::-webkit-scrollbar{
  width:9px!important;
}
#modalBox.guideModal .guideScroll::-webkit-scrollbar-track,
#modalBox.mxUniversalScroll.settingsModal>.settingsScroll::-webkit-scrollbar-track{
  background:rgba(255,255,255,.08)!important;
  border-radius:999px!important;
}
#modalBox.guideModal .guideScroll::-webkit-scrollbar-thumb,
#modalBox.mxUniversalScroll.settingsModal>.settingsScroll::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#c0a9ff,#6d54e8)!important;
  border-radius:999px!important;
  border:2px solid rgba(20,16,52,.65)!important;
  box-shadow:none!important;
}
#modalBox.guideModal .guideScroll::-webkit-scrollbar-thumb:active,
#modalBox.mxUniversalScroll.settingsModal>.settingsScroll::-webkit-scrollbar-thumb:active{
  background:linear-gradient(180deg,#d8ccff,#9078f2)!important;
}
/* The visual rail used by iPhone follows the same Levels colors and proportions. */
#modalBox.guideModal>.mxModalScrollRail,
#modalBox.settingsModal>.mxModalScrollRail{
  right:5px!important;
  width:9px!important;
  background:rgba(255,255,255,.08)!important;
  border-radius:999px!important;
  box-shadow:none!important;
}
#modalBox.guideModal>.mxModalScrollRail span,
#modalBox.settingsModal>.mxModalScrollRail span{
  background:linear-gradient(180deg,#c0a9ff,#6d54e8)!important;
  border:2px solid rgba(20,16,52,.65)!important;
  border-radius:999px!important;
  box-shadow:none!important;
}
@media(prefers-reduced-motion:reduce){.learningDockBtn{animation:none!important}}


/* ================= V8.2.6 — Bonus cleanup + exact Levels scrollbar parity ================= */
#modalBox.mxUniversalScroll.settingsModal>.settingsScroll,
#modalBox.guideModal .guideScroll{
  overflow-y:scroll!important;overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;touch-action:pan-y!important;
  overscroll-behavior:contain!important;scrollbar-gutter:stable!important;
  scrollbar-width:thin!important;scrollbar-color:#9d7bff rgba(255,255,255,.10)!important;
  padding-right:14px!important;
}
#modalBox.mxUniversalScroll.settingsModal>.settingsScroll::-webkit-scrollbar,
#modalBox.guideModal .guideScroll::-webkit-scrollbar{width:9px!important}
#modalBox.mxUniversalScroll.settingsModal>.settingsScroll::-webkit-scrollbar-track,
#modalBox.guideModal .guideScroll::-webkit-scrollbar-track{background:rgba(255,255,255,.08)!important;border-radius:999px!important}
#modalBox.mxUniversalScroll.settingsModal>.settingsScroll::-webkit-scrollbar-thumb,
#modalBox.guideModal .guideScroll::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#c0a9ff,#6d54e8)!important;border-radius:999px!important;border:2px solid rgba(20,16,52,.65)!important;box-shadow:none!important}
#modalBox.mxUniversalScroll.settingsModal>.settingsScroll::-webkit-scrollbar-thumb:active,
#modalBox.guideModal .guideScroll::-webkit-scrollbar-thumb:active{background:linear-gradient(180deg,#d8ccff,#9078f2)!important}
#modalBox.settingsModal>.mxModalScrollRail,
#modalBox.guideModal>.mxModalScrollRail{right:5px!important;width:9px!important;background:rgba(255,255,255,.08)!important;border-radius:999px!important;box-shadow:none!important;overflow:hidden!important}
#modalBox.settingsModal>.mxModalScrollRail span,
#modalBox.guideModal>.mxModalScrollRail span{background:linear-gradient(180deg,#c0a9ff,#6d54e8)!important;border:2px solid rgba(20,16,52,.65)!important;border-radius:999px!important;box-shadow:none!important;transition:transform .08s linear,height .12s ease!important;will-change:transform,height!important}


/* V8.3.1 — static Einstein; aligned compact tongue and tap reaction */
.einBox{animation:none!important;transform:none!important}
.einBox .einImg{animation:none!important;transform:none!important}
.einBox .faceOverlay{display:none!important}
.einBox .einFx{z-index:40!important;overflow:visible!important}
.einBox .tongue{z-index:60!important;left:56.9%!important;top:42.7%!important;width:8.4%!important;transform:translate(-50%,-1px)!important}
.einBox .tongue.out{opacity:1!important;height:9.2%!important;display:block!important;animation:none!important}

/* Einstein tap targets: visible image only; overlays remain non-interactive. */
#einBoxS{pointer-events:auto;touch-action:manipulation;cursor:pointer}
/* V8.4.19 — A hidden main-menu Einstein must never sit above the game board.
   #einBoxS explicitly enables pointer events, so disable it whenever its screen
   is not active; otherwise atom taps can be captured by the invisible menu art. */
#splash:not(.on) #einBoxS{pointer-events:none!important;cursor:default!important}
#einBoxG{pointer-events:none}

/* V8.3.4 boot controls: keep real tap targets above every decorative layer. */


/* V8.4.4 — real green PLAY button, single consolidated rule set.
   Every earlier #btnBootPlay/#bootPlayWrap rule in this file has been removed;
   this is now the only place either is styled. The wrapper's pointer-events
   is permanently auto (no more conditional :has() trick that silently does
   nothing on browsers/engines that don't support it) — the button itself is
   the only thing that toggles none→auto, exactly once, when .on is added. */
/* V8.4.5 — no more interactive button here, period. Three fix rounds on this
   exact element (timing, cache, pointer-events) each helped something else
   but this one specific tap target never became reliable. It's now pure,
   non-interactive decoration; the whole boot screen is the only real control. */
#bootPlayWrap{
  position:absolute;
  left:50%;
  bottom:calc(var(--sab) + 42px);
  transform:translateX(-50%);
  z-index:8;
  display:block;
  pointer-events:none;
}
#btnBootPlay{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:128px;
  padding:7px 12px 6px;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:#45406b;
  font-size:10px;
  font-weight:900;
  letter-spacing:.5px;
  white-space:nowrap;
  border:1px solid rgba(129,123,191,.26);
  box-shadow:0 5px 15px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.9);
  text-shadow:0 1px 0 rgba(255,255,255,.7);
  pointer-events:none;
  opacity:0;
  transition:opacity .3s ease;
}
#btnBootPlay.on{
  opacity:1;
  animation:studioTapPulse 1.8s ease-in-out infinite;
}


/* V8.4.9 — opening prompt matches the small TAP FOR SOUND capsule.
   Decorative only: the full boot screen remains the tap target. */
#bootPlayWrap{
  bottom:calc(var(--sab) + 30px)!important;
  z-index:8!important;
  pointer-events:none!important;
}
#btnBootPlay{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  min-width:162px!important;
  padding:9px 14px 8px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.97)!important;
  color:#45406b!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.55px!important;
  border:1.5px solid rgba(129,123,191,.28)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.92)!important;
  text-shadow:none!important;
  opacity:0!important;
  transform:scale(.96)!important;
  transition:opacity .3s ease,transform .3s ease!important;
  pointer-events:none!important;
}
#btnBootPlay span{
  font-size:15px;
  line-height:1;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.55));
}
#btnBootPlay::before{
  content:'';
  position:absolute;
  inset:-5px;
  border:1.5px solid rgba(173,167,255,.52);
  border-radius:999px;
  opacity:0;
  transform:scale(.94);
  pointer-events:none;
}
#btnBootPlay.on{
  opacity:1!important;
  transform:scale(1)!important;
  animation:mxBootTapPulse 1.8s ease-in-out infinite!important;
}
#btnBootPlay.on::before{
  animation:mxBootTapRing 1.8s ease-out infinite;
}
@keyframes mxBootTapPulse{
  0%,100%{transform:scale(1);box-shadow:0 8px 22px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(126,122,193,.12)}
  50%{transform:scale(1.035);box-shadow:0 8px 22px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.98),0 0 0 1.5px rgba(126,122,193,.28),0 0 14px rgba(173,167,255,.24)}
}
@keyframes mxBootTapRing{
  0%{opacity:.56;transform:scale(.96)}
  70%,100%{opacity:0;transform:scale(1.16)}
}

/* V8.4.11 — Main-menu Dr. E tongue fitted into the mouth opening. */
#einBoxS .tongue{
  left:58.3%!important;
  top:41.8%!important;
  width:7.5%!important;
  transform:translate(calc(-50% + 3px),-3px)!important;
}
#einBoxS .tongue.out{
  height:7.6%!important;
}

/* V8.4.12 — Apply the approved mouth-fit tongue alignment to in-game Dr. E too. */
#einBoxG .tongue{
  left:58.3%!important;
  top:41.8%!important;
  width:7.5%!important;
  transform:translate(calc(-50% + 3px),-3px)!important;
}
#einBoxG .tongue.out{
  height:7.6%!important;
}




/* V8.4.30 — compact transient confirmation for profile deletion. */
#mxSmallToast{position:fixed;left:50%;bottom:max(22px,calc(env(safe-area-inset-bottom) + 14px));z-index:240;max-width:min(86vw,360px);padding:10px 14px;border-radius:14px;background:rgba(12,22,35,.94);border:1px solid rgba(110,231,183,.45);box-shadow:0 10px 30px rgba(0,0,0,.35);color:#d8ffe9;font-size:13px;font-weight:800;line-height:1.25;text-align:center;pointer-events:none;opacity:0;transform:translate(-50%,14px) scale(.96);transition:opacity .18s ease,transform .18s ease}
#mxSmallToast.on{opacity:1;transform:translate(-50%,0) scale(1)}
body.mxReduceMotion #mxSmallToast{transition:none}

/* ================= V8.5.6 — mobile modal sizing and language picker ================= */
/* Modal buttons: slightly smaller, centered, and safe inside narrow iPhone widths. */
#modalBox .btn{
  max-width:100%;
  box-sizing:border-box;
}
#modalBox .mrow{
  width:100%;
  box-sizing:border-box;
  padding-left:2px;
  padding-right:2px;
}
#modalBox .mrow>.btn{
  min-height:42px;
  padding:9px 12px;
  font-size:clamp(12px,3.35vw,15px);
}
#modalBox .btn.green,
#modalBox .mxGuidedTarget.btn{
  width:min(100%,520px);
  margin-left:auto;
  margin-right:auto;
  min-height:48px;
  padding:11px 14px;
  font-size:clamp(14px,4vw,18px);
  line-height:1.15;
  white-space:normal;
  text-align:center;
}

/* Settings now shows one language row; all six languages live in a separate picker. */
#modalBox.settingsModal .settingsScroll>.togRow:first-child{
  position:static!important;
  top:auto!important;
  z-index:auto!important;
  background:rgba(255,255,255,.035)!important;
  border:1px solid rgba(157,123,255,.18)!important;
  border-radius:14px;
  padding:10px 9px!important;
  margin:0 0 8px!important;
}
#modalBox.settingsModal .languageSettingRow{min-height:58px!important}
#modalBox.settingsModal .languageOpenBtn{
  flex:0 0 auto;
  min-height:38px!important;
  padding:8px 10px!important;
  font-size:12px!important;
  border-radius:11px!important;
  white-space:nowrap;
}
#modalBox.languagePickerModal,
#modalBox.labGuideModal,
#modalBox.moleculopediaModal{
  display:flex!important;
  flex-direction:column!important;
  max-height:min(86dvh,760px)!important;
  overflow:hidden!important;
}
#modalBox .languagePickerHead,
#modalBox .labGuideHead,
#modalBox .moleculopediaHead{
  flex:0 0 auto!important;
  position:relative!important;
  z-index:2;
  background:rgba(18,14,51,.98);
}
#modalBox .languageChoiceGrid{
  flex:1 1 auto!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  padding:6px 3px 10px!important;
  overflow-y:auto!important;
}
#modalBox .languageChoice{
  width:100%;
  min-height:54px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:8px;
  text-align:left;
  padding:10px 12px;
  border-radius:14px;
}
#modalBox .languageChoice.on{
  color:#fff;
  border-color:rgba(79,216,255,.7);
  background:linear-gradient(135deg,rgba(88,69,194,.76),rgba(39,139,178,.38));
  box-shadow:0 0 15px rgba(79,216,255,.18);
}
#modalBox .languageChoice .languageFlag{font-size:22px;line-height:1}
#modalBox .languageChoice>b{color:#70f0a8;font-size:17px}

/* Moleculopedia: header and tabs never overlap the card list. */
#modalBox.moleculopediaModal .moleculopediaHead{
  padding-bottom:8px;
  border-bottom:1px solid rgba(157,123,255,.2);
}
#modalBox.moleculopediaModal .moleculopediaHead .mrow{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:7px!important;
  margin:10px 0 0!important;
}
#modalBox.moleculopediaModal .moleculoTab{
  width:100%!important;
  min-height:45px!important;
  margin:0!important;
  padding:9px 10px!important;
  font-size:clamp(13px,3.8vw,16px)!important;
}
#modalBox.moleculopediaModal .mechanicGuideList{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  margin-top:8px!important;
  padding:3px 5px 12px 2px!important;
  overflow-y:auto!important;
}
#modalBox.moleculopediaModal .mechanicGuideRow,
#modalBox.moleculopediaModal .labGuideItem{
  position:relative;
  z-index:1;
}

/* Laboratory supports: scroll cards only; actions and Close stay visible. */
#modalBox.labGuideModal .labGuideScroll{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  padding:5px 4px 12px 2px!important;
}
#modalBox.labGuideModal .labGuideItem{
  min-height:64px!important;
  padding:9px 11px!important;
  align-items:center!important;
}
#modalBox.labGuideModal .labGuideItem span:last-child{min-width:0}
#modalBox.labGuideModal .labGuideItem b{
  display:block;
  font-size:13px;
  line-height:1.18;
  overflow-wrap:anywhere;
}
#modalBox.labGuideModal .labGuideItem small{
  font-size:10px!important;
  line-height:1.25!important;
  overflow-wrap:anywhere;
}
#modalBox.labGuideModal .labGuideActions{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:8px!important;
  background:rgba(18,14,51,.98);
}
#modalBox.labGuideModal .labGuideActions .btn{
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  white-space:normal;
}

@media(max-width:390px){
  #modalBox .languageChoiceGrid{grid-template-columns:1fr}
  #modalBox.labGuideModal .labGuideActions{grid-template-columns:1fr}
  #modalBox .btn.green,#modalBox .mxGuidedTarget.btn{width:calc(100% - 8px)}
  #modalBox.moleculopediaModal .moleculoTab{min-height:42px!important;font-size:13px!important}
}

/* ================= V8.5.8 — compact language row + native-style bottom sheet ================= */
#modalBox.settingsModal .settingsScroll>.languageSettingRow{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 8px;
  padding:9px 12px;
  border:1px solid rgba(157,123,255,.22);
  border-radius:14px;
  background:rgba(255,255,255,.04);
  color:#fff;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
#modalBox.settingsModal .languageSettingRow:active{transform:scale(.985);background:rgba(157,123,255,.12)}
#modalBox.settingsModal .languageSettingLabel{display:flex;min-width:0;flex-direction:column;gap:2px}
#modalBox.settingsModal .languageSettingLabel b{font-size:clamp(13px,3.8vw,15px);line-height:1.15}
#modalBox.settingsModal .languageSettingLabel small{color:var(--dim);font-size:clamp(9.5px,2.8vw,11px);line-height:1.2}
#modalBox.settingsModal .languageSettingValue{display:flex;align-items:center;gap:8px;flex:0 0 auto;color:#d9d2ff}
#modalBox.settingsModal .languageSettingValue strong{font-size:clamp(12.5px,3.6vw,14px);white-space:nowrap}
#modalBox.settingsModal .languageSettingValue i{font-style:normal;font-size:25px;line-height:1;color:#9d7bff;transform:translateY(-1px)}

#modal:has(#modalBox.languageBottomSheet){
  align-items:flex-end!important;
  padding:0!important;
  background:rgba(6,4,22,.58)!important;
}
#modal #modalBox.languageBottomSheet{
  width:min(100%,520px)!important;
  max-height:min(78dvh,680px)!important;
  margin:0!important;
  padding:9px max(14px,var(--sar)) max(14px,calc(var(--sab) + 10px)) max(14px,var(--sal))!important;
  border-radius:24px 24px 0 0!important;
  overflow:hidden!important;
  text-align:left!important;
  transform:translateY(110%)!important;
  animation:none!important;
  box-shadow:0 -18px 55px rgba(0,0,0,.48),0 0 0 1px rgba(157,123,255,.25) inset!important;
}
#modal.on #modalBox.languageBottomSheet{transform:translateY(0)!important;transition:transform .32s cubic-bezier(.2,.85,.25,1)!important}
#modalBox.languageBottomSheet .languageSheetHandle{
  width:42px;height:5px;border-radius:99px;background:rgba(255,255,255,.28);margin:1px auto 12px;
}
#modalBox.languageBottomSheet .languagePickerHead{background:transparent!important;padding:0 5px 8px!important;text-align:center}
#modalBox.languageBottomSheet .languagePickerHead h3{font-size:clamp(19px,5vw,23px);margin:0 0 4px}
#modalBox.languageBottomSheet .languagePickerHead .msub{margin:0;color:var(--dim);font-size:clamp(11px,3vw,13px)}
#modalBox.languageBottomSheet .languageSheetList{
  display:flex;flex-direction:column;gap:3px;max-height:min(49dvh,390px);overflow-y:auto;padding:5px 0 7px;
  -webkit-overflow-scrolling:touch;
}
#modalBox.languageBottomSheet .languageSheetChoice{
  appearance:none;-webkit-appearance:none;width:100%;min-height:49px;display:grid;grid-template-columns:30px 1fr 28px;
  align-items:center;gap:8px;padding:8px 12px;border:0;border-bottom:1px solid rgba(255,255,255,.075);
  background:transparent;color:#fff;font:inherit;text-align:left;cursor:pointer;
}
#modalBox.languageBottomSheet .languageSheetChoice:last-child{border-bottom:0}
#modalBox.languageBottomSheet .languageSheetChoice:active{background:rgba(157,123,255,.12);border-radius:12px}
#modalBox.languageBottomSheet .languageSheetChoice span:nth-child(2){font-size:clamp(15px,4.2vw,17px);font-weight:800}
#modalBox.languageBottomSheet .languageSheetGlobe{font-size:18px;opacity:.82}
#modalBox.languageBottomSheet .languageSheetChoice b{color:#70f0a8;font-size:18px;text-align:center}
#modalBox.languageBottomSheet .languageSheetChoice.on{background:rgba(100,76,220,.16);border-radius:12px;border-bottom-color:transparent}
#modalBox.languageBottomSheet .languageSheetCancel{
  appearance:none;-webkit-appearance:none;width:100%;min-height:46px;margin-top:5px;border:1px solid rgba(157,123,255,.32);
  border-radius:14px;background:rgba(105,77,218,.16);color:#fff;font:800 clamp(14px,4vw,16px)/1 inherit;cursor:pointer;
}
#modalBox.languageBottomSheet .languageSheetCancel:active{transform:scale(.985)}


/* ================= V8.5.9 — unified settings pickers, stable modal cards ================= */
#modalBox.settingsModal .settingsPickerRow{
  appearance:none;-webkit-appearance:none;width:100%;min-height:58px;display:flex;align-items:center;
  justify-content:space-between;gap:12px;margin:5px 0;padding:9px 12px;border:1px solid rgba(157,123,255,.22);
  border-radius:14px;background:rgba(255,255,255,.04);color:#fff;font:inherit;text-align:left;cursor:pointer;
}
#modalBox.settingsModal .settingsPickerRow:active{transform:scale(.985);background:rgba(157,123,255,.12)}
#modalBox.settingsModal .settingsPickerLabel{display:flex;min-width:0;flex-direction:column;gap:2px}
#modalBox.settingsModal .settingsPickerLabel b{font-size:clamp(13px,3.8vw,15px);line-height:1.15}
#modalBox.settingsModal .settingsPickerLabel small{color:var(--dim);font-size:clamp(9.5px,2.8vw,11px);line-height:1.25}
#modalBox.settingsModal .settingsPickerValue{display:flex;align-items:center;gap:8px;flex:0 0 auto;color:#d9d2ff}
#modalBox.settingsModal .settingsPickerValue strong{font-size:clamp(12px,3.5vw,14px);white-space:nowrap}
#modalBox.settingsModal .settingsPickerValue i{font-style:normal;font-size:25px;line-height:1;color:#9d7bff}

#modalBox.moleculopediaModal{display:flex!important;flex-direction:column!important;overflow:hidden!important;max-height:min(92dvh,790px)!important}
#modalBox.moleculopediaModal .moleculopediaHead{flex:0 0 auto!important;position:relative!important;z-index:3!important;background:rgba(18,14,51,.98)!important}
#modalBox.moleculopediaModal .mechanicGuideList{display:flex!important;flex-direction:column!important;gap:9px!important;flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;contain:layout paint!important}
#modalBox.moleculopediaModal .mechanicGuideRow{display:grid!important;grid-template-columns:48px minmax(0,1fr)!important;gap:11px!important;align-items:center!important;height:auto!important;min-height:86px!important;max-height:none!important;flex:0 0 auto!important;margin:0!important;padding:11px 12px!important;overflow:hidden!important;transform:none!important}
#modalBox.moleculopediaModal .mechanicGuideRow>div:last-child{min-width:0!important;position:relative!important;inset:auto!important;transform:none!important}
#modalBox.moleculopediaModal .mechanicGuideRow b,#modalBox.moleculopediaModal .mechanicGuideRow small{position:static!important;display:block!important;transform:none!important;opacity:1;overflow-wrap:anywhere}
#modalBox.moleculopediaModal .mechanicGuideRow.locked{opacity:.48!important}
#modalBox.moleculopediaModal .modalFixedClose{flex:0 0 auto!important;position:relative!important;z-index:4!important;margin-top:8px!important;padding-top:10px!important;background:rgba(18,14,51,.98)!important}

#modalBox.labGuideModal{display:flex!important;flex-direction:column!important;overflow:hidden!important}
#modalBox.labGuideModal .labGuideScroll{display:flex!important;flex-direction:column!important;gap:9px!important;contain:layout paint!important}
#modalBox.labGuideModal .labGuideItem{height:auto!important;min-height:72px!important;max-height:none!important;flex:0 0 auto!important;margin:0!important;overflow:hidden!important}

/* Re-capture the face geometry from the corrected centered eye positions. */
.eyeW{will-change:transform}
@media(max-width:430px){
  #modalBox.moleculopediaModal .mechanicGuideRow{grid-template-columns:43px minmax(0,1fr)!important;min-height:82px!important;padding:9px 10px!important}
  #modalBox.moleculopediaModal .mechanicGuideRow b{font-size:13px!important}
  #modalBox.moleculopediaModal .mechanicGuideRow small{font-size:10.5px!important;line-height:1.28!important}
}


/* V8.5.15 — Moleculox custom AAA booster icons */
#btnHammer .badgeIcon,#btnBarrier .badgeIcon{display:grid;place-items:center;width:31px;height:31px;transform-origin:50% 65%}
#btnHammer .badgeIcon svg,#btnBarrier .badgeIcon svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 2px 3px rgba(0,0,0,.42))}
#btnHammer.on .mxHammerIcon svg{filter:drop-shadow(0 0 5px rgba(255,191,71,.75)) drop-shadow(0 3px 3px rgba(0,0,0,.45))}
#btnBarrier.on .mxBarrierIcon svg{filter:drop-shadow(0 0 7px rgba(82,229,255,.85)) drop-shadow(0 3px 3px rgba(0,0,0,.42))}
#mxToolFx svg{display:block;width:86px;height:86px;overflow:visible}
#mxToolFx.hammer{width:92px;height:92px;font-size:0;filter:drop-shadow(0 8px 10px rgba(0,0,0,.5)) drop-shadow(0 0 10px rgba(255,183,65,.32))}
#mxToolFx.barrier{width:72px;height:72px;font-size:0;filter:drop-shadow(0 0 14px rgba(69,226,255,.7)) drop-shadow(0 6px 8px rgba(0,0,0,.4))}
#mxToolFx.barrier svg{width:72px;height:72px}
@media(max-width:430px){#btnHammer .badgeIcon,#btnBarrier .badgeIcon{width:28px;height:28px}#mxToolFx.hammer{width:82px;height:82px}#mxToolFx.hammer svg{width:80px;height:80px}}


/* V8.5.17 — Dr. E miniature molecule-bond signature */
#einBoxG .prop.mxBondProp{
  width:52px;height:40px;max-width:none;font-size:0;left:48%;top:-12%;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.5));
}
#einBoxG .prop.mxBondProp.on{animation:mxMiniBondFloat 1.55s cubic-bezier(.2,.8,.2,1) both}
.mxMiniBond{position:relative;display:block;width:52px;height:40px}
.mxMiniAtom,.mxMiniCore{
  position:absolute;top:16px;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.92);
  box-shadow:inset -3px -4px 6px rgba(31,24,82,.35),0 0 8px rgba(93,231,255,.8);
}
.mxMiniAtomA{left:3px;background:radial-gradient(circle at 34% 30%,#fff,#5ce5ff 38%,#5573e8 100%);animation:mxMiniAtomA .72s cubic-bezier(.2,.9,.25,1) both}
.mxMiniAtomB{right:3px;background:radial-gradient(circle at 34% 30%,#fff,#ffd968 38%,#ff7d42 100%);animation:mxMiniAtomB .72s cubic-bezier(.2,.9,.25,1) both}
.mxMiniCore{left:18px;opacity:0;background:radial-gradient(circle at 36% 30%,#fff,#b9f7ff 32%,#806dff 100%);animation:mxMiniCore .86s .48s cubic-bezier(.2,.9,.25,1) both}
.mxMiniOrbit{
  position:absolute;left:8px;top:8px;width:36px;height:22px;border:1.5px solid rgba(177,243,255,.9);
  border-radius:50%;transform:rotate(-18deg) scale(.6);opacity:0;
  box-shadow:0 0 6px rgba(98,229,255,.72);
  animation:mxMiniOrbit .94s .48s ease-out both;
}
.mxMiniOrbit b{
  position:absolute;left:-3px;top:8px;width:6px;height:6px;border-radius:50%;
  background:#fff;box-shadow:0 0 6px #74efff,0 0 10px #9a7cff;
}
@keyframes mxMiniAtomA{0%{transform:translateX(-9px) scale(.65);opacity:0}35%{opacity:1}72%,100%{transform:translateX(10px) scale(.72);opacity:.25}}
@keyframes mxMiniAtomB{0%{transform:translateX(9px) scale(.65);opacity:0}35%{opacity:1}72%,100%{transform:translateX(-10px) scale(.72);opacity:.25}}
@keyframes mxMiniCore{0%{opacity:0;transform:scale(.3)}45%{opacity:1;transform:scale(1.22)}100%{opacity:1;transform:scale(1)}}
@keyframes mxMiniOrbit{0%{opacity:0;transform:rotate(-18deg) scale(.45)}30%{opacity:1}100%{opacity:0;transform:rotate(342deg) scale(1)}}
@keyframes mxMiniBondFloat{0%{opacity:0;transform:translateY(9px) scale(.82)}18%,72%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-8px) scale(.92)}}
@media (prefers-reduced-motion:reduce){
  #einBoxG .prop.mxBondProp.on,.mxMiniAtomA,.mxMiniAtomB,.mxMiniCore,.mxMiniOrbit{animation-duration:.01ms!important;animation-iteration-count:1!important}
}


/* V8.5.18 — laboratory victory and promotion electron signature */
#victoryLabFx{position:fixed;inset:0;z-index:68;display:grid;place-items:center;opacity:0;pointer-events:none;overflow:hidden;transition:opacity .2s ease}
#victoryLabFx.on{opacity:1}
.victoryLabDim{position:absolute;inset:0;background:radial-gradient(circle at 50% 48%,rgba(28,112,169,.22),rgba(5,7,25,.42) 45%,rgba(3,4,16,.68));opacity:0;animation:vlfDim 2.25s ease both}
.victoryLabAtom{position:relative;width:clamp(126px,36vw,210px);aspect-ratio:1;filter:drop-shadow(0 0 18px rgba(79,216,255,.9));transform:scale(.25);opacity:0}
#victoryLabFx.on .victoryLabAtom{animation:vlfAtom 2.15s cubic-bezier(.18,.82,.2,1) both}
.vlaCore{position:absolute;top:50%;width:23%;aspect-ratio:1;border-radius:50%;transform:translateY(-50%);box-shadow:inset -5px -6px 12px rgba(0,0,0,.25),inset 4px 4px 9px rgba(255,255,255,.65),0 0 24px currentColor}
.vlaCoreA{left:22%;color:#4fd8ff;background:radial-gradient(circle at 35% 30%,#fff,#7ee9ff 25%,#218bd2 72%)}
.vlaCoreB{right:22%;color:#9d7bff;background:radial-gradient(circle at 35% 30%,#fff,#c6b6ff 25%,#7054d7 72%)}
.vlaBond{position:absolute;left:42%;right:42%;top:47%;height:6%;border-radius:999px;background:linear-gradient(90deg,#78e7ff,#fff,#c0a9ff);box-shadow:0 0 18px #fff;transform:scaleX(0)}
#victoryLabFx.on .vlaBond{animation:vlfBond .48s .48s ease-out forwards}
.vlaOrbit{position:absolute;inset:11%;border:2px solid rgba(164,234,255,.78);border-radius:50%;transform:rotate(24deg)}
.vlaOrbit2{inset:20% 5%;transform:rotate(-34deg);border-color:rgba(203,184,255,.74)}
.vlaOrbit i{position:absolute;left:50%;top:-5px;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 12px 4px #4fd8ff}
#victoryLabFx.on .vlaOrbit1{animation:vlfSpin 1s .42s linear 2}
#victoryLabFx.on .vlaOrbit2{animation:vlfSpinBack 1.25s .38s linear 1.7}
.vlaFlash{position:absolute;inset:33%;border-radius:50%;background:#fff;opacity:0;box-shadow:0 0 55px 28px rgba(111,224,255,.9)}
#victoryLabFx.on .vlaFlash{animation:vlfFlash .55s .72s ease-out both}
#victoryLabParticles{position:absolute;inset:0}
.vlfParticle{position:absolute;left:50%;top:48%;width:var(--w);height:var(--h);border-radius:2px;background:var(--c);opacity:0;transform:translate(-50%,-50%) rotate(var(--r));box-shadow:0 0 8px color-mix(in srgb,var(--c),transparent 35%)}
#victoryLabFx.on .vlfParticle{animation:vlfConf var(--d) var(--delay) cubic-bezier(.15,.7,.3,1) forwards}
#victoryLabFx.mini{z-index:76}
#victoryLabFx.mini .victoryLabDim{background:transparent}
#victoryLabFx.mini .victoryLabAtom{width:clamp(72px,20vw,112px);position:absolute;top:12%}
#victoryLabFx.mini .vlfParticle{top:35%}
@keyframes vlfDim{0%,100%{opacity:0}15%,75%{opacity:1}}
@keyframes vlfAtom{0%{opacity:0;transform:scale(.2) rotate(-12deg)}28%{opacity:1;transform:scale(1.08) rotate(2deg)}58%{transform:scale(.98)}82%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.28)}}
@keyframes vlfBond{to{transform:scaleX(1)}}
@keyframes vlfSpin{to{transform:rotate(744deg)}}
@keyframes vlfSpinBack{to{transform:rotate(-754deg)}}
@keyframes vlfFlash{0%{opacity:0;transform:scale(.2)}35%{opacity:1}100%{opacity:0;transform:scale(2.2)}}
@keyframes vlfConf{0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(var(--r))}12%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(calc(var(--r) + 520deg))}}
@media(max-width:360px){#bubble{font-size:12.5px;padding:9px 10px 12px}#gameScr #bubble,#playScr #bubble{width:min(57vw,205px)!important;max-width:min(57vw,205px)!important}}
@media(prefers-reduced-motion:reduce){#bubble.on #bubbleTimer{animation:none;transform:scaleX(.7)}#victoryLabFx.on .victoryLabAtom{animation:vlfReduced 1.25s ease both}.vlaOrbit{animation:none!important}.vlfParticle{display:none}@keyframes vlfReduced{0%,100%{opacity:0;transform:scale(.7)}25%,75%{opacity:1;transform:scale(1)}}}


/* ================= V8.5.24 — code-drawn icons, compact green CTAs, tutorial safety ================= */
.mxCodeIcon,.menuCodeIcon svg,.learningDockIcon svg,.labDockIcon svg,.trophyIcon svg{display:block;width:100%;height:100%;overflow:visible}
.mxLabelIcon{width:22px;height:22px;flex:0 0 22px;color:#b9a7ff;filter:drop-shadow(0 0 5px rgba(157,123,255,.48))}
#modalBox.settingsModal .vrow.audioRow .vl{display:flex;align-items:center;gap:7px;min-width:0}
#modalBox.settingsModal .vrow.audioRow .vl>span{min-width:0;white-space:nowrap}
.mxAudioSvg{width:23px;height:23px;color:#f5f2ff;filter:drop-shadow(0 0 4px rgba(157,123,255,.45))}
.vrow .mt{display:flex;align-items:center;justify-content:center}
.vrow .mt.off .mxAudioSvg{color:#ff9aad;filter:drop-shadow(0 0 4px rgba(255,92,105,.35))}
.mxRowIcon{display:inline-block;width:22px;height:22px;vertical-align:-5px;margin-right:8px;color:#d8d0ff;filter:drop-shadow(0 0 4px rgba(157,123,255,.38))}
.menuCodeIcon{display:inline-flex;width:22px;height:22px;vertical-align:-5px;margin-right:7px;color:currentColor}
.learningDockIcon,.labDockIcon,.trophyIcon{display:flex!important;align-items:center;justify-content:center}
.learningDockIcon svg{width:23px;height:23px;filter:drop-shadow(0 0 7px rgba(255,255,255,.5))}
.labDockIcon svg{width:22px;height:22px;filter:drop-shadow(0 0 7px rgba(255,255,255,.5))}
.trophyIcon svg{width:29px;height:29px;color:#ffe16d;filter:drop-shadow(0 0 8px rgba(255,204,55,.72))}
/* Green modal actions no longer fill the entire phone width. */
#modalBox .btn.green,#modalBox .mxGuidedTarget.btn{width:min(86%,430px);min-height:42px;padding:9px 13px;font-size:clamp(13px,3.55vw,16px);border-radius:16px}
#modalBox .supportTutorialScroll .btn.green{width:min(82%,390px);min-height:43px}
@media(max-width:390px){#modalBox .btn.green,#modalBox .mxGuidedTarget.btn{width:min(88%,340px);padding:9px 11px;font-size:13.5px}}


/* ================= V8.5.25 — premium MoleCoin + unified AAA icon family ================= */
.coinIcon{
  transform-style:preserve-3d;
  background:
    radial-gradient(circle at 28% 20%,rgba(255,255,255,1) 0 5%,rgba(255,255,255,.35) 6%,transparent 10%),
    linear-gradient(135deg,transparent 0 34%,rgba(255,255,255,.72) 39%,transparent 45%),
    radial-gradient(circle at 37% 31%,#fffbd9 0 10%,#ffe778 24%,#ffc52d 48%,#e18a08 76%,#8d4700 100%);
  border:1px solid #fff0a3;
  box-shadow:
    0 0 0 1px rgba(108,54,0,.9),
    inset 0 0 0 2px rgba(255,203,54,.72),
    inset 0 -3px 4px rgba(83,35,0,.72),
    inset 2px 2px 3px rgba(255,255,255,.9),
    0 2px 5px rgba(0,0,0,.55),
    0 0 12px rgba(255,192,30,.55);
  animation:mxCoinIdleSpin 9s cubic-bezier(.22,.7,.25,1) infinite;
}
.coinIcon::before{
  color:#7a3b00;
  font-weight:1000;
  text-shadow:0 1px 0 #fff3a8,0 -1px 0 rgba(90,38,0,.55),0 0 3px rgba(255,238,139,.8);
}
.coinIcon::after{
  width:14px;height:7px;
  border-color:rgba(116,234,255,.98);
  box-shadow:0 0 5px rgba(79,216,255,.95),inset 0 0 3px rgba(255,255,255,.55);
}
@keyframes mxCoinIdleSpin{
  0%,82%{transform:perspective(90px) rotateY(0deg) scale(1)}
  86%{transform:perspective(90px) rotateY(105deg) scale(1.08)}
  90%{transform:perspective(90px) rotateY(220deg) scale(1.03)}
  94%{transform:perspective(90px) rotateY(360deg) scale(1.08)}
  98%,100%{transform:perspective(90px) rotateY(360deg) scale(1)}
}
.chip:hover .coinIcon,.mcoins:hover .coinIcon{filter:brightness(1.12)}

/* One consistent premium icon language: glass-metal tile, cyan/purple rim, two-level stroke. */
.menuCodeIcon,.learningDockIcon,.labDockIcon,.trophyIcon,.mxLabelIcon,.mxRowIcon{
  position:relative;
  border-radius:9px;
  background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(104,74,205,.13) 48%,rgba(25,207,239,.12));
  border:1px solid rgba(190,177,255,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(36,16,90,.45),0 0 8px rgba(116,91,255,.2);
}
.menuCodeIcon{width:25px;height:25px;padding:3px;margin-right:8px;vertical-align:-7px}
.learningDockIcon{width:31px!important;height:31px!important;padding:5px;margin:0 auto 2px}
.labDockIcon{width:29px!important;height:29px!important;padding:5px;margin:0 auto 2px}
.trophyIcon{width:38px!important;height:38px!important;padding:5px;border-radius:12px;background:linear-gradient(145deg,rgba(255,244,172,.24),rgba(255,174,31,.11),rgba(106,60,13,.22));border-color:rgba(255,225,116,.66)}
.mxLabelIcon{width:29px;height:29px;flex-basis:29px;padding:4px;color:#e9e4ff}
.mxRowIcon{width:27px;height:27px;padding:4px;vertical-align:-8px;color:#e7e1ff}
.menuCodeIcon svg,.learningDockIcon svg,.labDockIcon svg,.trophyIcon svg,.mxLabelIcon,.mxRowIcon{
  filter:drop-shadow(0 0 4px rgba(113,226,255,.38)) drop-shadow(0 1px 0 rgba(255,255,255,.35));
}
#btnDaily .menuCodeIcon{color:#fff1a8;border-color:rgba(255,231,129,.58);background:linear-gradient(145deg,rgba(255,255,255,.2),rgba(255,184,42,.14),rgba(109,62,8,.18))}
#btnCollect .menuCodeIcon{color:#d9f7ff}
#btnTrainingDock .learningDockIcon{color:#fff1ae}
#btnMoleculopediaDock .learningDockIcon{color:#d6f5ff}
#btnLabMenu .labDockIcon{color:#ddfbff}
#modalBox.settingsModal .vrow.audioRow .vl{gap:9px}
.mxAudioSvg{width:25px;height:25px;padding:3px;border-radius:8px;background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(117,87,214,.14));border:1px solid rgba(190,177,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 0 8px rgba(116,91,255,.2)}

/* Dr. E no longer displays OS-dependent coin / silver-medal emojis. */
.einFx .prop.mxDiscoveryProp{font-size:0!important;background:transparent!important;box-shadow:none!important}
.einFx .prop.mxDiscoveryProp::before{
  content:'';display:block;width:42px;height:42px;border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,#fff 0 5%,#83edff 7% 12%,transparent 14%),
    conic-gradient(from 0deg,transparent 0 8%,#9eeeff 9% 11%,transparent 12% 23%,#c8b6ff 24% 27%,transparent 28% 40%,#ffe884 41% 44%,transparent 45% 58%,#8feaff 59% 62%,transparent 63% 76%,#d6c5ff 77% 80%,transparent 81% 100%);
  filter:drop-shadow(0 0 8px rgba(103,228,255,.95));
  animation:mxDiscoveryPulse 1.35s ease-in-out infinite;
}
.einFx .prop.mxDiscoveryProp::after{
  content:'⚛';position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:25px;text-shadow:0 0 7px #61ddff,0 0 12px #9d7bff;
}
@keyframes mxDiscoveryPulse{0%,100%{transform:scale(.9) rotate(-6deg);opacity:.8}50%{transform:scale(1.08) rotate(6deg);opacity:1}}

@media(prefers-reduced-motion:reduce){.coinIcon{animation:none!important}.einFx .prop.mxDiscoveryProp::before{animation:none!important}}

/* V8.5.26 — premium code-drawn Dr. E reaction icons */
.einFx .prop.mxPremiumProp{width:46px;height:46px;max-width:none;font-size:0!important;display:grid!important;place-items:center;color:#eafcff;filter:drop-shadow(0 5px 7px rgba(0,0,0,.46))}
.mxEinIcon{display:grid;place-items:center;width:42px;height:42px;padding:8px;border-radius:14px;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.34),transparent 26%),linear-gradient(145deg,rgba(29,225,255,.25),rgba(119,82,236,.3) 56%,rgba(18,11,54,.88));border:1px solid rgba(185,244,255,.76);box-shadow:inset 0 1px 0 rgba(255,255,255,.48),inset 0 -3px 8px rgba(21,8,70,.55),0 0 12px rgba(88,224,255,.55),0 0 20px rgba(139,93,255,.28);animation:mxEinIconFloat 1.5s ease-in-out infinite}
.mxEinIcon svg{display:block;width:100%;height:100%;overflow:visible}
.mxEinIcon-bulb,.mxEinIcon-trophy,.mxEinIcon-sparkle{color:#fff1a5;background:linear-gradient(145deg,rgba(255,215,70,.34),rgba(255,145,34,.2) 52%,rgba(74,31,4,.9));border-color:rgba(255,231,131,.86);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 14px rgba(255,196,46,.67)}
.mxEinIcon-alert,.mxEinIcon-radiation{color:#ffd6b0;background:linear-gradient(145deg,rgba(255,151,70,.34),rgba(177,35,58,.34),rgba(51,8,28,.9));border-color:rgba(255,178,109,.82)}
.mxEinIcon-coffee,.mxEinIcon-facepalm,.mxEinIcon-wave{color:#ffe0ba;background:linear-gradient(145deg,rgba(255,217,164,.28),rgba(128,80,185,.27),rgba(28,14,58,.9))}
.mxEinIcon-bolt,.mxEinIcon-rocket{color:#fff3a7;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 14px rgba(255,220,67,.58),0 0 22px rgba(86,222,255,.32)}
@keyframes mxEinIconFloat{0%,100%{transform:translateY(1px) scale(.96)}50%{transform:translateY(-3px) scale(1.04)}}
@media(prefers-reduced-motion:reduce){.mxEinIcon{animation:none!important}}


/* ================= V8.5.30 — premium 1 Square precision icon ================= */
.mxPrecisionIcon{width:40px!important;height:40px!important;padding:0!important;color:#dffbff;filter:drop-shadow(0 0 7px rgba(87,225,255,.58)) drop-shadow(0 3px 4px rgba(0,0,0,.42));}
.mxPrecisionIcon svg{display:block;width:100%;height:100%;overflow:visible;}
.precisionBtn:not(:disabled) .mxPrecisionIcon svg{animation:mxPrecisionReady 2.8s ease-in-out infinite;}
.precisionBtn:hover .mxPrecisionIcon{filter:drop-shadow(0 0 10px rgba(104,235,255,.85)) drop-shadow(0 0 15px rgba(126,93,255,.45));}
@keyframes mxPrecisionReady{0%,72%,100%{transform:translateX(0) scale(1)}82%{transform:translateX(2px) scale(1.035)}90%{transform:translateX(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.precisionBtn .mxPrecisionIcon svg{animation:none!important}}


/* V8.5.31 — AAA tutorial controls and unmistakable GOAL onboarding */
#dpad{padding:8px;border:1px solid rgba(135,232,255,.34);border-radius:22px;background:linear-gradient(145deg,rgba(11,32,60,.92),rgba(27,16,66,.92));box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -8px 18px rgba(0,0,0,.28),0 10px 24px rgba(0,0,0,.34),0 0 22px rgba(88,202,255,.12)}
.dbtn{overflow:hidden;border:1px solid rgba(218,250,255,.72)!important;border-radius:16px!important;background:radial-gradient(circle at 34% 24%,rgba(255,255,255,.22),transparent 28%),linear-gradient(145deg,rgba(33,72,116,.98),rgba(19,29,73,.98))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -5px 10px rgba(0,0,0,.3),0 4px 0 rgba(5,13,36,.72),0 7px 15px rgba(0,0,0,.3),0 0 10px rgba(80,220,255,.12)!important;color:#dffcff!important}
.dbtn:active{transform:translateY(3px) scale(.96)!important;box-shadow:inset 0 2px 8px rgba(0,0,0,.38),0 1px 0 rgba(5,13,36,.8),0 0 14px rgba(124,100,255,.42)!important}
.mxDpadArrow{width:36px;height:36px;display:block;filter:drop-shadow(0 0 5px rgba(105,225,255,.62))}
#dC{display:grid;place-items:center;border-radius:15px;background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.24),transparent 27%),linear-gradient(145deg,#172f56,#130f36);border:1px solid rgba(143,226,255,.33);box-shadow:inset 0 2px 8px rgba(0,0,0,.45),0 0 12px rgba(95,89,255,.18)}
.dpadCore{width:17px;height:17px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff 0 10%,#8ff4ff 24%,#7457f3 62%,#211055 100%);border:1px solid rgba(255,255,255,.85);box-shadow:0 0 8px rgba(91,224,255,.8),0 0 16px rgba(118,78,255,.45)}
.tutGoal{border:1px solid rgba(137,236,255,.72)!important;background:linear-gradient(145deg,rgba(10,38,70,.97),rgba(34,20,78,.97))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.17),0 0 0 3px rgba(89,208,255,.12),0 0 26px rgba(76,211,255,.45)!important;animation:tutGoalBeacon 1.35s ease-in-out infinite}
.tutGoal .tutBubble::before{content:'DR. E';display:block;font-size:.68rem;letter-spacing:.12em;color:#91efff;margin-bottom:4px;font-weight:800}
.tutArrow svg{width:42px;height:42px;overflow:visible;filter:drop-shadow(0 0 7px rgba(93,225,255,.78))}
.tutArrow svg path,.tutArrow svg circle{fill:none;stroke:#fff2a0;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
@keyframes tutGoalBeacon{50%{transform:scale(1.025);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 5px rgba(89,208,255,.08),0 0 38px rgba(115,88,255,.56)}}
body.tutorialMode #goalCard{position:relative;z-index:63}


/* V8.5.33 — premium tutorial pointer + unified action-column polish */
#tutorialArrowHint{width:60px;height:60px;font-size:0;filter:drop-shadow(0 7px 12px rgba(0,0,0,.52)) drop-shadow(0 0 15px rgba(103,225,255,.55));transform:translate(-50%,-50%)}
#tutorialArrowHint.on{animation:none}
#tutorialArrowHint .tutGameArrow{width:60px;height:60px;display:block;transform:rotate(var(--tut-rot));transform-origin:50% 50%;animation:mxTutArrowPremium 1.18s cubic-bezier(.34,1.56,.64,1) infinite}
#tutorialArrowHint .tutGameArrow svg{display:block;width:100%;height:100%}
@keyframes mxTutArrowPremium{
  0%,100%{transform:rotate(var(--tut-rot)) translateX(0) scale(.96)}
  48%{transform:rotate(var(--tut-rot)) translateX(8px) scale(1.08)}
  68%{transform:rotate(var(--tut-rot)) translateX(4px) scale(1.02)}
}

#actionCol .btn.iconBadge{
  overflow:visible;
  isolation:isolate;
  border:1px solid rgba(218,247,255,.18);
  background:linear-gradient(155deg,rgba(32,35,68,.96),rgba(11,10,29,.97));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 0 -8px 16px rgba(0,0,0,.22),0 7px 14px rgba(0,0,0,.38),0 0 16px color-mix(in srgb,currentColor 35%,transparent);
}
#actionCol .btn.iconBadge::before{
  content:"";position:absolute;inset:3px;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(circle at 34% 18%,rgba(255,255,255,.16),transparent 38%),linear-gradient(180deg,rgba(255,255,255,.045),transparent 45%);
  border:1px solid rgba(255,255,255,.055);
}
#actionCol .btn.iconBadge .badgeIcon{
  width:31px;height:31px;padding:4px;border-radius:10px;
  background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.18),rgba(79,216,255,.06) 45%,rgba(8,12,31,.3));
  box-shadow:inset 0 0 0 1px rgba(189,246,255,.22),0 0 12px currentColor;
  transform-origin:50% 72%;
  animation:mxActionIconElastic 6.8s cubic-bezier(.34,1.56,.64,1) infinite;
}
#actionCol .btn.iconBadge:nth-child(2) .badgeIcon{animation-delay:-1.05s}
#actionCol .btn.iconBadge:nth-child(3) .badgeIcon{animation-delay:-2.1s}
#actionCol .btn.iconBadge:nth-child(4) .badgeIcon{animation-delay:-3.15s}
#actionCol .btn.iconBadge:nth-child(5) .badgeIcon{animation-delay:-4.2s}
#actionCol .btn.iconBadge:nth-child(6) .badgeIcon{animation-delay:-5.25s}
#actionCol .btn.iconBadge:active .badgeIcon{animation:none;transform:scale(.82,.9) translateY(2px)}
#actionCol .btn.iconBadge small{text-shadow:0 1px 5px rgba(0,0,0,.8);letter-spacing:.8px}
@keyframes mxActionIconElastic{
  0%,78%,100%{transform:translateY(0) scale(1,1)}
  83%{transform:translateY(-2px) scale(1.08,.92)}
  87%{transform:translateY(1px) scale(.94,1.08)}
  91%{transform:translateY(-1px) scale(1.03,.98)}
  95%{transform:translateY(0) scale(1,1)}
}
@media (prefers-reduced-motion:reduce){
  #tutorialArrowHint .tutGameArrow,#actionCol .btn.iconBadge .badgeIcon{animation:none!important}
}


/* V8.5.34 — tutorial launch order + balanced spotlight shadows */
body.tutorialMode #goalCard,
body.tutorialMode #btnUndo,
body.tutorialMode #btnRestart,
body.tutorialMode #btnHint,
body.tutorialMode #coinChip{
  box-shadow:0 10px 24px rgba(0,0,0,.34),0 0 18px rgba(101,220,255,.24)!important;
}
#tutorialBubble{
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.32));
}
#tutorialSpot{border:1px solid rgba(194,248,255,.38)}

/* V8.5.35 — premium main-menu Duel + Hall of Fame motion polish */
#btnDuel.duelBtn,
#btnHof.trophyBtn{
  isolation:isolate;
  overflow:hidden;
  transform-origin:50% 72%;
  animation:mxMenuOrbElastic 7.2s cubic-bezier(.34,1.56,.64,1) infinite;
}
#btnHof.trophyBtn{animation-delay:0s}
#btnDuel.duelBtn::before,
#btnHof.trophyBtn::before{
  content:"";
  position:absolute;
  z-index:3;
  top:-28%;
  left:-72%;
  width:42%;
  height:156%;
  pointer-events:none;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16) 20%,rgba(255,255,255,.86) 50%,rgba(255,255,255,.17) 80%,transparent);
  filter:blur(.3px);
  opacity:0;
  animation:mxMenuOrbSweep 6.8s ease-in-out infinite;
}
#btnHof.trophyBtn::before{animation-delay:-3.15s}
#btnDuel.duelBtn::after{
  z-index:2;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 -10px 15px rgba(3,8,31,.22);
}
#btnHof.trophyBtn::after{
  content:"";
  position:absolute;
  inset:3px;
  z-index:1;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle at 32% 22%,rgba(255,255,255,.55),transparent 27%),linear-gradient(160deg,rgba(255,255,255,.14),transparent 46%,rgba(92,42,0,.2));
  border:1px solid rgba(255,247,188,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -8px 13px rgba(105,47,0,.2);
}
#btnDuel .duelVs,#btnDuel .duelMini,#btnHof .trophyIcon{z-index:4}
#btnHof .trophyIcon{
  position:relative;
  width:39px;
  height:39px;
  padding:4px;
  border-radius:13px;
  color:#fff5ad;
  background:radial-gradient(circle at 36% 24%,rgba(255,255,255,.42),rgba(255,215,68,.14) 42%,rgba(104,48,0,.2));
  border:1px solid rgba(255,247,174,.58);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 13px rgba(255,207,46,.72),0 3px 8px rgba(89,43,0,.35);
  filter:none;
}
#btnHof .trophyIcon svg{
  width:31px!important;
  height:31px!important;
  color:#fff070!important;
  stroke-width:2.35;
  filter:drop-shadow(0 1px 0 rgba(91,42,0,.88)) drop-shadow(0 0 5px rgba(255,235,114,.95))!important;
}
#btnHof .trophyIcon svg path{
  vector-effect:non-scaling-stroke;
}
#btnDuel:active,#btnHof:active{animation:none!important}
@keyframes mxMenuOrbSweep{
  0%,68%{left:-72%;opacity:0}
  72%{opacity:.18}
  79%{opacity:.95}
  87%{left:138%;opacity:.2}
  88%,100%{left:138%;opacity:0}
}
@keyframes mxMenuOrbElastic{
  0%,76%,100%{transform:translateY(0) scale(1)}
  81%{transform:translateY(-3px) scale(1.06,.94)}
  86%{transform:translateY(1px) scale(.95,1.07)}
  91%{transform:translateY(-1px) scale(1.025,.985)}
  95%{transform:translateY(0) scale(1)}
}
@media(max-height:700px){#btnHof .trophyIcon{width:35px;height:35px;padding:4px}#btnHof .trophyIcon svg{width:27px!important;height:27px!important}}
@media(prefers-reduced-motion:reduce){
  #btnDuel.duelBtn,#btnHof.trophyBtn,#btnDuel.duelBtn::before,#btnHof.trophyBtn::before{animation:none!important}
}

/* V8.5.37 — synchronized premium elastic motion for every left-side main-menu dock.
   The Trophy and VS buttons introduced mxMenuOrbElastic in V8.5.35. LAB,
   HOW TO PLAY, MOLECULOPEDIA and TRAINING CENTER now use that exact same
   stretch/squash keyframe at the same phase while preserving their own glow and shine colors. */
#btnLabMenu.labDockBtn,
#btnGuide.guideDockBtn,
#btnTrainingDock.learningDockBtn,
#btnMoleculopediaDock.learningDockBtn{
  isolation:isolate;
  transform-origin:50% 72%;
  will-change:transform;
}
#btnLabMenu.labDockBtn{
  animation:mxMenuOrbElastic 7.2s cubic-bezier(.34,1.56,.64,1) infinite,
            labDockGlow 2.7s ease-in-out infinite!important;
  animation-delay:0s,0s!important;
}
#btnGuide.guideDockBtn{
  animation:mxMenuOrbElastic 7.2s cubic-bezier(.34,1.56,.64,1) infinite,
            guideDockGlow 2.9s ease-in-out infinite!important;
  animation-delay:0s,0s!important;
}
#btnMoleculopediaDock.learningDockBtn{
  animation:mxMenuOrbElastic 7.2s cubic-bezier(.34,1.56,.64,1) infinite,
            learningDockGlow 2.9s ease-in-out infinite!important;
  animation-delay:0s,0s!important;
}
#btnTrainingDock.learningDockBtn{
  animation:mxMenuOrbElastic 7.2s cubic-bezier(.34,1.56,.64,1) infinite,
            learningDockGlow 2.9s ease-in-out infinite!important;
  animation-delay:0s,0s!important;
}
#btnLabMenu.labDockBtn:active,
#btnGuide.guideDockBtn:active,
#btnTrainingDock.learningDockBtn:active,
#btnMoleculopediaDock.learningDockBtn:active{
  animation:none!important;
  transform:scale(.88)!important;
}
@media(prefers-reduced-motion:reduce){
  #btnLabMenu.labDockBtn,
  #btnGuide.guideDockBtn,
  #btnTrainingDock.learningDockBtn,
  #btnMoleculopediaDock.learningDockBtn{animation:none!important}
}

/* V8.5.39 — Training Center uses the same three laboratory components as Catalyst Hunt. */
.mxTrainingToken{position:relative;display:inline-block;width:29px;height:34px;filter:drop-shadow(0 3px 7px rgba(0,0,0,.42));vertical-align:middle}
.mxTrainingToken.catalyst{border:2px solid #f3ffff;border-radius:8px 8px 9px 9px;background:linear-gradient(180deg,rgba(190,238,244,.88) 0 45%,#ff9a43 46% 88%,#db6d2b 89%);box-shadow:inset 5px 0 0 rgba(255,255,255,.24),0 0 10px rgba(255,154,67,.45)}
.mxTrainingToken.catalyst:before{content:'';position:absolute;left:7px;right:7px;top:-6px;height:7px;border-radius:3px 3px 1px 1px;background:#77828d;border:1px solid #dce8ed}
.mxTrainingToken.energy{width:28px;height:35px;border:2px solid #c7f2ff;border-radius:7px;background:linear-gradient(180deg,#174e81,#35b9ff 28%,#167bc8 92%);box-shadow:0 0 12px rgba(53,185,255,.55),inset 3px 0 0 rgba(255,255,255,.18)}
.mxTrainingToken.energy:before{content:'';position:absolute;left:8px;right:8px;top:-5px;height:5px;border-radius:2px;background:#dff8ff}
.mxTrainingToken.energy:after{content:'ϟ';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff7a5;font-size:25px;font-weight:1000;text-shadow:0 0 6px rgba(255,247,165,.9)}
.mxTrainingToken.stabilizer{width:34px;height:34px;border-radius:9px;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);background:linear-gradient(145deg,#43d18d,#167654);border:none;box-shadow:0 0 12px rgba(67,209,141,.58)}
.mxTrainingToken.stabilizer:before,.mxTrainingToken.stabilizer:after{content:'';position:absolute;left:4px;top:13px;width:26px;height:8px;border:1.5px solid #caffdf;border-radius:50%;transform:rotate(28deg)}
.mxTrainingToken.stabilizer:after{transform:rotate(-28deg)}
.mxTrainingToken.stabilizer i{position:absolute;left:14px;top:14px;width:6px;height:6px;border-radius:50%;background:#effff3;box-shadow:0 0 8px #caffdf}
.mxTrainingCell{min-width:48px!important;height:48px!important;padding:0!important}


/* V8.5.42 — 301 unique campaign completion choreographies.
   The chemistry effect family remains recognizable while the board and title
   receive a deterministic level-specific motion recipe. */
#board.mxLevelWin{transform-origin:50% 50%;will-change:transform,filter}
#board.mxLevelWin[data-win-motion="pulse"]{animation:mxLvlPulse 1.05s cubic-bezier(.2,.85,.25,1) both}
#board.mxLevelWin[data-win-motion="tilt-left"]{animation:mxLvlTiltLeft 1.05s cubic-bezier(.2,.85,.25,1) both}
#board.mxLevelWin[data-win-motion="tilt-right"]{animation:mxLvlTiltRight 1.05s cubic-bezier(.2,.85,.25,1) both}
#board.mxLevelWin[data-win-motion="breathe"]{animation:mxLvlBreathe 1.12s ease both}
#board.mxLevelWin[data-win-motion="snap"]{animation:mxLvlSnap .96s cubic-bezier(.12,.9,.22,1.18) both}
#board.mxLevelWin[data-win-motion="float"]{animation:mxLvlFloat 1.12s ease both}
#board.mxLevelWin[data-win-motion="prism"]{animation:mxLvlPrism 1.14s cubic-bezier(.18,.86,.24,1) both}
#board.mxLevelWin[data-win-motion="charge"]{animation:mxLvlCharge 1.08s cubic-bezier(.18,.86,.24,1) both}
#board.mxLevelWin[data-win-motion="wave"]{animation:mxLvlWave 1.04s ease both}
#board.mxLevelWin[data-win-motion="elastic"]{animation:mxLvlElastic 1.08s cubic-bezier(.18,1.25,.3,1) both}
#board.mxLevelWin[data-win-motion="focus"]{animation:mxLvlFocus 1.08s cubic-bezier(.18,.86,.24,1) both}
#board.mxLevelWin[data-win-motion="orbit"]{animation:mxLvlOrbit 1.08s cubic-bezier(.18,.86,.24,1) both}
@keyframes mxLvlPulse{0%{transform:scale(1)}28%{transform:scale(1.025)}52%{transform:scale(.992)}100%{transform:none}}
@keyframes mxLvlTiltLeft{0%{transform:none}32%{transform:rotate(-1.4deg) scale(1.018)}58%{transform:rotate(.5deg) scale(.996)}100%{transform:none}}
@keyframes mxLvlTiltRight{0%{transform:none}32%{transform:rotate(1.4deg) scale(1.018)}58%{transform:rotate(-.5deg) scale(.996)}100%{transform:none}}
@keyframes mxLvlBreathe{0%{transform:scale(1);filter:none}42%{transform:scale(1.018);filter:brightness(1.16) saturate(1.12)}100%{transform:none;filter:none}}
@keyframes mxLvlSnap{0%{transform:scale(1)}23%{transform:scale(.985,.965)}48%{transform:scale(1.028,1.04)}100%{transform:none}}
@keyframes mxLvlFloat{0%{transform:none}36%{transform:translateY(-5px) scale(1.012)}66%{transform:translateY(2px) scale(.998)}100%{transform:none}}
@keyframes mxLvlPrism{0%{transform:none;filter:none}35%{transform:scale(1.02) rotate(var(--mx-level-spin,1deg));filter:hue-rotate(18deg) brightness(1.14)}68%{transform:scale(.998) rotate(var(--mx-level-spin-back,-.3deg));filter:hue-rotate(-8deg)}100%{transform:none;filter:none}}
@keyframes mxLvlCharge{0%{transform:none;filter:none}18%{filter:brightness(1.32) contrast(1.12)}38%{transform:scale(1.022);filter:brightness(1.12) saturate(1.28)}65%{transform:scale(.996)}100%{transform:none;filter:none}}
@keyframes mxLvlWave{0%{transform:none}26%{transform:skewX(-.7deg) scale(1.012)}50%{transform:skewX(.7deg) scale(1.018)}76%{transform:skewX(-.25deg) scale(.998)}100%{transform:none}}
@keyframes mxLvlElastic{0%{transform:none}24%{transform:scale(1.035,.975)}48%{transform:scale(.99,1.025)}70%{transform:scale(1.012,.994)}100%{transform:none}}
@keyframes mxLvlFocus{0%{transform:scale(.992);filter:blur(.35px)}34%{transform:scale(1.026);filter:brightness(1.18)}100%{transform:none;filter:none}}
@keyframes mxLvlOrbit{0%{transform:none}30%{transform:translate(2px,-2px) rotate(.65deg) scale(1.014)}58%{transform:translate(-2px,1px) rotate(-.55deg) scale(1.008)}100%{transform:none}}

#bannerWrap.on[data-motion="rise"] #banner{animation:mxLvlBannerRise .72s cubic-bezier(.16,.9,.24,1) both}
#bannerWrap.on[data-motion="drop"] #banner{animation:mxLvlBannerDrop .72s cubic-bezier(.16,.9,.24,1) both}
#bannerWrap.on[data-motion="tilt"] #banner{animation:mxLvlBannerTilt .74s cubic-bezier(.16,.9,.24,1) both}
#bannerWrap.on[data-motion="stretch"] #banner{animation:mxLvlBannerStretch .76s cubic-bezier(.16,.9,.24,1) both}
#bannerWrap.on[data-motion="flip"] #banner{animation:mxLvlBannerFlip .76s cubic-bezier(.16,.9,.24,1) both}
#bannerWrap.on[data-motion="glow"] #banner{animation:mxLvlBannerGlow .8s ease both}
#bannerWrap.on[data-motion="wave"] #banner{animation:mxLvlBannerWave .76s cubic-bezier(.16,.9,.24,1) both}
#bannerWrap.on[data-motion="elastic"] #banner{animation:mxLvlBannerElastic .8s cubic-bezier(.16,1.15,.24,1) both}
#bannerWrap.on[data-motion="focus"] #banner{animation:mxLvlBannerFocus .78s cubic-bezier(.16,.9,.24,1) both}
#bannerWrap.on[data-motion="pop"] #banner{animation:mxBannerPop .65s cubic-bezier(.16,.9,.24,1) both}
@keyframes mxLvlBannerRise{0%{opacity:0;transform:translateY(38px) scale(.88)}58%{opacity:1;transform:translateY(-4px) scale(1.045)}100%{transform:none}}
@keyframes mxLvlBannerDrop{0%{opacity:0;transform:translateY(-34px) scale(.9)}58%{opacity:1;transform:translateY(4px) scale(1.045)}100%{transform:none}}
@keyframes mxLvlBannerTilt{0%{opacity:0;transform:rotate(-7deg) scale(.82)}55%{opacity:1;transform:rotate(2deg) scale(1.06)}100%{transform:none}}
@keyframes mxLvlBannerStretch{0%{opacity:0;transform:scaleX(.55) scaleY(1.22);letter-spacing:.22em}55%{opacity:1;transform:scaleX(1.06) scaleY(.96)}100%{transform:none}}
@keyframes mxLvlBannerFlip{0%{opacity:0;transform:perspective(500px) rotateX(72deg) scale(.86)}60%{opacity:1;transform:perspective(500px) rotateX(-7deg) scale(1.04)}100%{transform:none}}
@keyframes mxLvlBannerGlow{0%{opacity:0;transform:scale(.82);filter:brightness(2.1) blur(5px)}55%{opacity:1;transform:scale(1.07);filter:brightness(1.45) blur(0)}100%{transform:none}}
@keyframes mxLvlBannerWave{0%{opacity:0;transform:translateX(-26px) skewX(-8deg) scale(.88)}56%{opacity:1;transform:translateX(4px) skewX(2deg) scale(1.04)}100%{transform:none}}
@keyframes mxLvlBannerElastic{0%{opacity:0;transform:scale(.7,1.28)}45%{opacity:1;transform:scale(1.08,.94)}68%{transform:scale(.98,1.03)}100%{transform:none}}
@keyframes mxLvlBannerFocus{0%{opacity:0;transform:scale(1.25);filter:blur(7px)}58%{opacity:1;transform:scale(.98);filter:blur(0)}100%{transform:none}}
body.mxReduceMotion #board.mxLevelWin,body.mxReduceMotion #bannerWrap.on[data-motion] #banner{animation:none!important;transform:none!important;filter:none!important}
@media(prefers-reduced-motion:reduce){#board.mxLevelWin,#bannerWrap.on[data-motion] #banner{animation:none!important;transform:none!important;filter:none!important}}

/* ================= V8.5.46 — EVENT-DRIVEN IN-GAME DR. E =================
   Main-menu Dr. E is untouched. Game poses share the approved 468x520 canvas,
   stay at the original 150px game size and remain anchored to the safe-area
   lower-right corner. */
#gameScr #einWrap{left:auto!important;top:auto!important;right:calc(var(--sar) - 2px)!important;bottom:calc(var(--sab) - 12px)!important;pointer-events:none!important}
#einBoxG{width:150px!important;margin-left:auto!important;transform-origin:right bottom!important;pointer-events:none!important}
#einBoxG .einImg{transition:opacity .3s ease,filter .3s ease!important}
#einBoxG .einImg.mxPoseChanging{opacity:.05!important;filter:brightness(1.06)!important}
#einBoxG.mxPoseAsset .einImg{display:block!important;width:100%!important;height:auto!important;max-width:100%!important;max-height:none!important;object-fit:contain!important;object-position:right bottom!important;transform:none!important}
#einBoxG.mxPoseAsset .eyeW,#einBoxG.mxPoseAsset .tongue{display:none!important}
#einBoxG.mxPoseAsset .prop{z-index:70!important}
@media(max-height:700px){#einBoxG{width:150px!important}}
@media(prefers-reduced-motion:reduce){#einBoxG .einImg{transition:none!important}}


/* V8.5.47 — Smart first-use mechanic cards.
   Automatic help stays compact; the existing detailed lesson remains optional. */
#modal:has(.mxFirstUseHead) #modalBox{
  width:min(92vw,430px);
  max-height:min(90dvh,720px);
  overflow:hidden;
}
.mxFirstUseHead{
  display:grid;
  grid-template-columns:84px minmax(0,1fr);
  gap:12px;
  align-items:end;
  margin:-6px -4px 10px;
  padding:10px 11px;
  border:1px solid rgba(120,231,255,.30);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(120,231,255,.13),rgba(255,211,110,.09));
  text-align:left;
}
.mxFirstUseHead img{
  width:84px;
  height:94px;
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.35));
}
.mxFirstUseHead span{
  display:block;
  color:#ffd36e;
  font-size:.72rem;
  font-weight:950;
  letter-spacing:.12em;
}
.mxFirstUseHead h3{
  margin:3px 0 4px;
  font-size:clamp(17px,4.5vw,21px);
  line-height:1.12;
}
.mxFirstUseHead p{
  margin:0;
  color:var(--dim);
  font-size:clamp(10.5px,2.8vw,12px);
  line-height:1.35;
}
.mxFirstUseList{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:min(43dvh,330px);
  overflow-y:auto;
  padding:2px 2px 4px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.mxFirstUseRow{
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  gap:10px;
  align-items:center;
  padding:10px 11px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(255,255,255,.055);
  text-align:left;
}
.mxFirstUseIcon{
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(120,231,255,.28);
  border-radius:13px;
  background:rgba(6,19,39,.78);
  font-size:1.5rem;
}
.mxFirstUseRow b{
  display:block;
  color:#fff;
  font-size:clamp(12.5px,3.6vw,14.5px);
  line-height:1.2;
}
.mxFirstUseRow small{
  display:block;
  margin-top:3px;
  color:#d5def0;
  font-size:clamp(10px,2.7vw,11.5px);
  line-height:1.35;
}
@media(max-width:390px){
  #modal:has(.mxFirstUseHead) #modalBox{padding:14px 13px 13px}
  .mxFirstUseHead{grid-template-columns:70px minmax(0,1fr)}
  .mxFirstUseHead img{width:70px;height:82px}
  .mxFirstUseRow{grid-template-columns:40px minmax(0,1fr);padding:9px}
  .mxFirstUseIcon{width:40px;height:40px;font-size:1.3rem}
}
@media(max-height:650px){
  #modal:has(.mxFirstUseHead) #modalBox{max-height:96dvh;padding-top:12px;padding-bottom:11px}
  .mxFirstUseHead{margin-bottom:7px;padding-top:7px;padding-bottom:7px}
  .mxFirstUseHead img{height:72px}
  .mxFirstUseList{max-height:35dvh;gap:6px}
  .mxFirstUseRow{padding-top:7px;padding-bottom:7px}
  #modal:has(.mxFirstUseHead) #modalBox .mrow{gap:7px;margin-top:6px}
  #modal:has(.mxFirstUseHead) #modalBox .btn{padding:10px 8px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  .mxFirstUseHead img,.mxFirstUseRow{animation:none!important;transition:none!important}
}


/* ================= V8.5.54 R7 — final iOS visual alignment ================= */
/* Native WKWebView uses the full device viewport, unlike Safari's shorter visual
   viewport. These final overrides preserve the web proportions while accounting
   for that extra native height. */
body.mxNative #studioLogo{width:88%!important;height:88%!important;object-fit:contain!important;object-position:center!important}
body.mxNative #logoWrap{transform:scale(.92);transform-origin:center top}
body.mxNative #logoTitle{font-size:clamp(40px,11.7vw,56px)!important;letter-spacing:.5px!important}
body.mxNative #logoTop{font-size:14px!important;letter-spacing:4.4px!important}
body.mxNative #logoSub{font-size:13px!important;margin-top:5px!important}
body.mxNative #splashBtns{width:min(69vw,278px)!important;transform:translateX(8px)!important}
/* Keep Dr. E seated instead of visually floating above the floor. */
body.mxNative #splash #einBoxS{right:-4px!important;bottom:-20px!important;height:clamp(245px,41svh,392px)!important;animation:none!important}
body.mxNative #splash #einBoxS .einImg{object-position:right bottom!important}
/* Compact the in-level tool rail and return a little board space. */
body.mxNative #actionCol{right:2px!important;gap:8px!important;transform:scale(.91)!important;transform-origin:right top!important}
body.mxNative #actionCol .act{width:54px!important;height:54px!important;border-radius:16px!important}
/* Pose PNGs have transparent space on the left; enlarge the canvas modestly,
   anchor the visible feet below the safe area, and remove the floating motion. */
body.mxNative #gameScr #einWrap{right:-5px!important;bottom:-2px!important;width:216px!important}
body.mxNative #einBoxG{width:188px!important;animation:none!important;transform:none!important;transform-origin:right bottom!important}
body.mxNative #gameScr #bubble,body.mxNative #playScr #bubble,body.mxNative #gameScr .einSpeech,body.mxNative #playScr .einSpeech,body.mxNative #gameScr .speech,body.mxNative #playScr .speech{right:clamp(146px,34vw,232px)!important;bottom:clamp(48px,7vh,76px)!important}
/* Native menus get the same slight visual right bias as the web composition. */
body.mxNative #modalBox.accountModal .accountActions,
body.mxNative #modalBox .mrow,
body.mxNative #modalBox.settingsModal .settingsActions{margin-left:7px!important;width:calc(100% - 7px)!important}
body.mxNative #modalBox.accountModal .accountUtilityRow{width:100%!important}
@media(max-width:380px){
  body.mxNative #splashBtns{transform:translateX(6px)!important}
  body.mxNative #gameScr #einWrap{right:-6px!important;bottom:0!important;width:204px!important}
  body.mxNative #einBoxG{width:178px!important}
  body.mxNative #actionCol{transform:scale(.88)!important}
}


/* ================= V8.5.54 R8 — Dr. E final position ================= */
/* Slightly larger and a few pixels left, preserving the visible feet/pants. */
body.mxNative #gameScr #einWrap{right:4px!important;bottom:-2px!important;width:230px!important}
body.mxNative #einBoxG{width:200px!important;animation:none!important;transform:none!important;transform-origin:right bottom!important}
@media(max-width:380px){
  body.mxNative #gameScr #einWrap{right:2px!important;bottom:0!important;width:218px!important}
  body.mxNative #einBoxG{width:190px!important}
}


/* ================= V8.5.61 R16 — clean iOS player/voice test ================= */
/* Intentional iOS-only final override. Android/Web are unaffected. The pose PNGs
   contain transparent padding, so the canvas is enlarged and shifted toward the
   board while the visible feet stay anchored to the floor. */
body.mxIOSNative #gameScr #einWrap{right:-14px!important;bottom:-10px!important;width:358px!important;z-index:9!important}
body.mxIOSNative #gameScr #einBoxG{width:326px!important;margin-left:auto!important;animation:none!important;transform:none!important;transform-origin:right bottom!important}
body.mxIOSNative #gameScr #bubble,body.mxIOSNative #playScr #bubble,body.mxIOSNative #gameScr .einSpeech,body.mxIOSNative #playScr .einSpeech,body.mxIOSNative #gameScr .speech,body.mxIOSNative #playScr .speech{right:clamp(205px,48vw,326px)!important;bottom:clamp(78px,10vh,112px)!important}
@media(max-width:390px){
  body.mxIOSNative #gameScr #einWrap{right:-15px!important;bottom:-10px!important;width:338px!important}
  body.mxIOSNative #gameScr #einBoxG{width:306px!important}
}
@media(max-height:720px){
  body.mxIOSNative #gameScr #einWrap{right:-12px!important;bottom:-9px!important;width:312px!important}
  body.mxIOSNative #gameScr #einBoxG{width:282px!important}
}


/* ================= V8.5.62 R17 — all-player voice + iOS board/Dr. E ================= */
/* The injected responsive-safety rule capped #einBoxG at 108–126px on tall,
   narrow iPhones. These more specific iOS rules remove that cap. */
body.mxIOSNative #boardWrap{
  transform:translateY(-10px)!important;
  transform-origin:center top!important;
}
body.mxIOSNative #gameScr #einWrap{
  right:-18px!important;
  bottom:-12px!important;
  width:408px!important;
  max-width:none!important;
  max-height:none!important;
  z-index:9!important;
}
body.mxIOSNative #gameScr #einBoxG,
body.mxIOSNative #gameScr #einBoxG.mxEinResponsive{
  width:376px!important;
  max-width:none!important;
  max-height:none!important;
  height:auto!important;
  margin-left:auto!important;
  animation:none!important;
  transform:none!important;
  transform-origin:right bottom!important;
}
body.mxIOSNative #gameScr #bubble,
body.mxIOSNative #playScr #bubble,
body.mxIOSNative #gameScr .einSpeech,
body.mxIOSNative #playScr .einSpeech,
body.mxIOSNative #gameScr .speech,
body.mxIOSNative #playScr .speech{
  right:clamp(235px,54vw,360px)!important;
  bottom:clamp(86px,11vh,126px)!important;
}
@media(max-width:390px){
  body.mxIOSNative #boardWrap{transform:translateY(-8px)!important}
  body.mxIOSNative #gameScr #einWrap{right:-18px!important;bottom:-11px!important;width:386px!important;max-width:none!important;max-height:none!important}
  body.mxIOSNative #gameScr #einBoxG,
  body.mxIOSNative #gameScr #einBoxG.mxEinResponsive{width:354px!important;max-width:none!important;max-height:none!important}
}
@media(max-height:720px){
  body.mxIOSNative #boardWrap{transform:translateY(-6px)!important}
  body.mxIOSNative #gameScr #einWrap{right:-15px!important;bottom:-10px!important;width:354px!important;max-width:none!important;max-height:none!important}
  body.mxIOSNative #gameScr #einBoxG,
  body.mxIOSNative #gameScr #einBoxG.mxEinResponsive{width:324px!important;max-width:none!important;max-height:none!important}
}

/* ================= V8.5.63 R18 — Web-proportioned iOS Dr. E + voice sprite ================= */
/* R17 was intentionally oversized for diagnosis. Return the in-game professor
   to the approved Web-like proportion, anchor his feet to the lower-right floor,
   and move the board only a few pixels closer to the GOAL area. */
body.mxIOSNative #boardWrap{
  transform:translateY(-16px)!important;
  transform-origin:center top!important;
}
body.mxIOSNative #gameScr #einWrap{
  left:auto!important;
  top:auto!important;
  right:-4px!important;
  bottom:-14px!important;
  width:248px!important;
  max-width:248px!important;
  max-height:none!important;
  z-index:9!important;
}
body.mxIOSNative #gameScr #einBoxG,
body.mxIOSNative #gameScr #einBoxG.mxEinResponsive{
  width:218px!important;
  max-width:218px!important;
  max-height:none!important;
  height:auto!important;
  margin-left:auto!important;
  animation:none!important;
  transform:none!important;
  transform-origin:right bottom!important;
}
body.mxIOSNative #gameScr #einBoxG .einImg{
  object-position:right bottom!important;
}
body.mxIOSNative #gameScr #bubble,
body.mxIOSNative #playScr #bubble,
body.mxIOSNative #gameScr .einSpeech,
body.mxIOSNative #playScr .einSpeech,
body.mxIOSNative #gameScr .speech,
body.mxIOSNative #playScr .speech{
  right:clamp(166px,39vw,250px)!important;
  bottom:clamp(56px,8vh,88px)!important;
}
@media(max-width:390px){
  body.mxIOSNative #boardWrap{transform:translateY(-14px)!important}
  body.mxIOSNative #gameScr #einWrap{right:-5px!important;bottom:-14px!important;width:238px!important;max-width:238px!important}
  body.mxIOSNative #gameScr #einBoxG,
  body.mxIOSNative #gameScr #einBoxG.mxEinResponsive{width:208px!important;max-width:208px!important}
}
@media(max-height:720px){
  body.mxIOSNative #boardWrap{transform:translateY(-12px)!important}
  body.mxIOSNative #gameScr #einWrap{right:-4px!important;bottom:-12px!important;width:224px!important;max-width:224px!important}
  body.mxIOSNative #gameScr #einBoxG,
  body.mxIOSNative #gameScr #einBoxG.mxEinResponsive{width:196px!important;max-width:196px!important}
}

/* ================= V8.5.67 R22 — final iOS tool-rail spacing ================= */
/* Keep Gear/Home as the fixed top controls and preserve a visible gap before
   Undo on compact and full-height iPhones. There is enough vertical room below
   Restart, so compact screens no longer collapse the rail back toward Home. */
body.mxIOSNative #actionCol{top:clamp(24px,3.2svh,30px)!important}



/* R23: Daily Experiment true-center label + combined mechanic clarity. */
#btnDaily{position:relative;display:flex;align-items:center;justify-content:center;text-align:center}
#btnDaily>.menuCodeIcon{position:absolute;left:14px;top:50%;transform:translateY(-50%);margin:0;vertical-align:0}
#btnDaily>[data-i18n="todaysExpLabel"]{display:block;width:100%;padding:0 38px;text-align:center;line-height:1.12}
#btnDaily>#dailyDot{position:absolute;right:13px;top:50%;transform:translateY(-50%)}
.mxMechanicContextNote{margin:10px 0 13px;padding:12px 13px;border-radius:15px;background:linear-gradient(145deg,rgba(255,172,45,.14),rgba(120,231,255,.08));border:1px solid rgba(255,211,110,.34);box-shadow:inset 0 0 20px rgba(120,231,255,.04)}
.mxMechanicContextNote b{display:block;color:#ffd36e;font-size:.86rem;letter-spacing:.02em;margin-bottom:6px}
.mxMechanicContextNote span{display:block;color:#eaf7ff;font-size:.79rem;line-height:1.42}
.mxFirstUseCue{display:block;margin-top:5px;color:#78e7ff;font-style:normal;font-size:.7rem;line-height:1.35}
.mxMechanicVisualCue{margin:8px 0 10px;padding:8px 10px;border-radius:11px;background:rgba(120,231,255,.08);border:1px solid rgba(120,231,255,.22);color:#bfefff;font-size:.75rem;line-height:1.35}
.mxDailyPracticeNotice{color:#ffcf7a!important;font-size:.78rem!important;line-height:1.35}
@media (max-width:380px){#btnDaily>.menuCodeIcon{left:10px}#btnDaily>[data-i18n="todaysExpLabel"]{padding:0 34px;font-size:.9em}}


/* R24: fair count-up solve timer and result summary. */
#duelTimer.countup{display:block;background:linear-gradient(90deg,rgba(16,79,112,.88),rgba(45,98,150,.82));border-color:rgba(112,232,255,.58);color:#effdff;box-shadow:0 0 14px rgba(79,216,255,.22);font-variant-numeric:tabular-nums}
.mxSolveTimeResult{margin:10px auto 8px;max-width:340px;padding:10px 13px;border-radius:15px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2px 11px;text-align:left;background:linear-gradient(135deg,rgba(11,42,69,.94),rgba(22,37,72,.92));border:1px solid rgba(112,224,255,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 22px rgba(0,0,0,.2)}
.mxSolveTimeResult b{grid-row:1/3;font-size:21px;letter-spacing:.5px;color:#dffbff;font-variant-numeric:tabular-nums;text-shadow:0 0 12px rgba(79,216,255,.48)}
.mxSolveTimeResult span{font-size:10px;font-weight:900;letter-spacing:1.25px;color:#8edff4}
.mxSolveTimeResult em{font-style:normal;font-size:11px;line-height:1.25;color:#d6e8f7}
.mxSolveTimeResult.newBest{border-color:rgba(255,220,102,.66);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 21px rgba(255,195,62,.2)}
.mxSolveTimeResult.newBest b{color:#fff1a4;text-shadow:0 0 12px rgba(255,207,77,.55)}
.mxSolveTimeResult.assisted{border-color:rgba(181,163,218,.34);opacity:.92}
@media(max-height:700px){#duelTimer.countup{font-size:10.5px;padding:3px 8px}.mxSolveTimeResult{padding:8px 10px;margin:7px auto}.mxSolveTimeResult b{font-size:18px}}


/* ================= V8.5.70 R25 — original SVG metric icons ================= */
/* The count-up timer uses a monochrome laboratory clock SVG mask, so it stays
   identical across iOS font/emoji versions and scales without blur. */
#duelTimer.countup{display:flex;align-items:center;justify-content:center;gap:5px}
#duelTimer.countup::before{content:"";display:block;flex:0 0 12px;width:12px;height:12px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12.5' r='8.1'/%3E%3Cpath d='M12 8.1v4.8l3.15 1.85M9.35 2.9h5.3M17.9 5.25l1.45-1.45'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12.5' r='8.1'/%3E%3Cpath d='M12 8.1v4.8l3.15 1.85M9.35 2.9h5.3M17.9 5.25l1.45-1.45'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.94}
.mxUiIcon{display:inline-block;width:1em;height:1em;flex:0 0 auto;overflow:visible;vertical-align:-.12em}
.mxSolveTimeResult b{display:flex;align-items:center;gap:7px}
.mxSolveTimeResult b .mxClockIcon{width:22px;height:22px;color:#78e7ff;filter:drop-shadow(0 0 5px rgba(79,216,255,.38))}
.mxSolveTimeResult.newBest b .mxClockIcon{color:#ffe47a;filter:drop-shadow(0 0 5px rgba(255,207,77,.42))}
.mxSolveTimeResult .mxSolveTimeValue{font:inherit;letter-spacing:inherit;color:inherit}
.mxSolveTimeResult .mxSolveMeta{display:flex;align-items:center;gap:5px}
.mxSolveTimeResult .mxSolveMeta .mxHintIcon{width:13px;height:13px;color:#ffd978}
.mxSolveTimeResult .mxSolveMeta strong{font:inherit;color:#dffbff}
.mxMetricDot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.72;margin:0 1px}
@media(max-height:700px){.mxSolveTimeResult b .mxClockIcon{width:19px;height:19px}.mxSolveTimeResult .mxSolveMeta .mxHintIcon{width:12px;height:12px}}

/* R38 STORY TEST 1 — canonical story cast/world art only. Strictly scoped to #levelStoryPanel. */
#levelStoryPanel #storyCatArt,#levelStoryPanel #storyMoxyArt{display:none}
#levelStoryPanel.showCat #storyCatArt,#levelStoryPanel.showMoxy #storyMoxyArt{display:block}
#levelStoryPanel #storyCatArt{left:34%;bottom:-3%;height:52%!important;max-width:44%;z-index:3;object-position:center bottom}
#levelStoryPanel #storyMoxyArt{left:42%;bottom:28%;height:44%!important;max-width:40%;z-index:4;object-position:center;filter:drop-shadow(0 8px 10px #0007)!important}
#levelStoryPanel.storyCast3 #storyHeroArt,#levelStoryPanel.storyCast4 #storyHeroArt{height:70%!important;left:-3%}
#levelStoryPanel.storyCast3 #nullStoryArt,#levelStoryPanel.storyCast4 #nullStoryArt{height:68%!important;right:-4%}
#levelStoryPanel.storyCast3 #storyCatArt,#levelStoryPanel.storyCast4 #storyCatArt{height:39%!important;left:31%}
#levelStoryPanel.storyCast3 #storyMoxyArt,#levelStoryPanel.storyCast4 #storyMoxyArt{height:36%!important;left:45%;bottom:30%}
#levelStoryPanel.speakerNull:not(.hasSceneArt) .comicHero .speechBubble{left:10px;right:auto}
#levelStoryPanel.speakerCat:not(.hasSceneArt) .comicHero .speechBubble{left:10px;right:auto}
#levelStoryPanel.speakerMoxy:not(.hasSceneArt) .comicHero .speechBubble{right:10px;left:auto}
#levelStoryPanel:not(.hasSceneArt) .comicHero{background-repeat:no-repeat;background-color:#0a1830}
#levelStoryPanel.hasSceneArt .comicHero .sceneArtImg{border-radius:0}
@media(max-width:620px){
  #levelStoryPanel #storyCatArt{height:45%!important;left:29%}
  #levelStoryPanel #storyMoxyArt{height:38%!important;left:43%;bottom:29%}
  #levelStoryPanel.storyCast3 #storyHeroArt,#levelStoryPanel.storyCast4 #storyHeroArt{height:62%!important}
  #levelStoryPanel.storyCast3 #nullStoryArt,#levelStoryPanel.storyCast4 #nullStoryArt{height:60%!important}
  #levelStoryPanel.storyCast3 #storyCatArt,#levelStoryPanel.storyCast4 #storyCatArt{height:34%!important;left:29%}
  #levelStoryPanel.storyCast3 #storyMoxyArt,#levelStoryPanel.storyCast4 #storyMoxyArt{height:31%!important;left:44%;bottom:31%}
}

/* R38 STORY FINAL — narrator and dialogue are deliberately separate. */
#levelStoryPanel:not(.storyHasDialogue) .speechBubble{display:none!important}
#levelStoryPanel .storySpeakerName{
  margin:0 0 4px;
  color:#6c3bb2;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.7px;
  line-height:1;
}
#levelStoryPanel.speakerNull .storySpeakerName{color:#51306f}
#levelStoryPanel.speakerCat .storySpeakerName{color:#176e9d}
#levelStoryPanel.speakerMoxy .storySpeakerName{color:#b46800}
#levelStoryPanel .storyNarration{
  box-sizing:border-box;
  width:100%;
  margin:10px 0 0;
  padding:9px 10px;
  border:3px solid #17243a;
  border-radius:8px;
  background:#17243a;
  color:#fff;
  text-align:left;
  font-size:clamp(11px,2.15vw,14px);
  font-weight:800;
  line-height:1.3;
  overflow-wrap:anywhere;
}
#levelStoryPanel .storyNarratorLabel{
  margin:0 0 4px;
  color:#ffd95a;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.8px;
  line-height:1;
}
#levelStoryPanel .reactionText{
  font-style:italic;
}
#levelStoryPanel.hasSceneArt:not(.storyHasDialogue) .comicHero{margin-bottom:0}
@media(max-width:620px){
  #levelStoryPanel .storySpeakerName{font-size:8.5px;margin-bottom:3px}
  #levelStoryPanel .storyNarration{margin-top:6px;padding:7px 8px;border-width:2px;font-size:10.5px;line-height:1.24}
  #levelStoryPanel .storyNarratorLabel{font-size:8px;margin-bottom:3px}
  #levelStoryPanel .reactionText{max-height:none;overflow:visible}
}

/* ================= STORY FINAL 2 — wordless Moxy gameplay companion ================= */
#moxyGameCompanion[hidden]{display:none!important}
#moxyGameCompanion{
  position:absolute;
  right:clamp(132px,31vw,218px);
  bottom:calc(var(--sab) + 8px);
  width:clamp(66px,16vw,96px);
  aspect-ratio:1.05/1;
  z-index:8;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
  filter:drop-shadow(0 8px 13px rgba(0,0,0,.48));
  transform-origin:50% 100%;
}
#moxyGameCompanion img{display:block;width:100%;height:100%;object-fit:contain;position:relative;z-index:2}
#moxyGameCompanion i{
  position:absolute;left:13%;right:13%;bottom:4%;height:21%;border-radius:50%;z-index:1;
  background:radial-gradient(ellipse,rgba(79,216,255,.36) 0%,rgba(79,216,255,.08) 46%,rgba(79,216,255,0) 72%);
  filter:blur(3px);
}
#moxyGameCompanion.react-ready img{animation:mxMoxyFloat 2.55s ease-in-out infinite}
#moxyGameCompanion.react-ready i{animation:mxMoxyHalo 2.55s ease-in-out infinite}
@keyframes mxMoxyFloat{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-7px) rotate(1.5deg)}}
@keyframes mxMoxyHalo{0%,100%{opacity:.55;transform:scale(.92)}50%{opacity:.92;transform:scale(1.06)}}
@media(max-width:620px){#moxyGameCompanion{right:clamp(126px,33vw,180px);width:78px;bottom:calc(var(--sab) + 7px)}}
@media(max-width:370px), (max-height:690px){#moxyGameCompanion{right:116px;width:64px;bottom:calc(var(--sab) + 5px)}}
body.mxNative #moxyGameCompanion{right:clamp(154px,36vw,224px);bottom:calc(var(--sab) + 8px)}
body.mxIOSNative #moxyGameCompanion{right:clamp(184px,43vw,274px);width:clamp(70px,17vw,94px);bottom:calc(var(--sab) + 10px)}
@media(max-width:430px){body.mxIOSNative #moxyGameCompanion{right:172px;width:76px}}


/* ================= STORY + UI LAYOUT POLISH 1 — no-scroll story/results ================= */
/* User-approved rule: fit the whole interaction on one phone screen. Text/buttons
   may shrink slightly on short phones, never to unreadable sizes. */
#levelStoryPanel{
  box-sizing:border-box!important;
  width:min(96vw,720px)!important;
  max-height:calc(100dvh - max(10px,var(--sat)) - max(10px,var(--sab)))!important;
  overflow:hidden!important;
  padding:10px 10px 9px!important;
}
#levelStoryPanel .storyPageHead{margin:0 38px 6px 0!important;min-height:22px}
#levelStoryPanel .comicStrip{gap:7px!important;margin-bottom:7px!important;min-height:0!important}
#levelStoryPanel .comicPanel{min-height:0!important;overflow:hidden!important}

/* Generated/supplied story artwork fills the comic frame. No white letterboxing. */
#levelStoryPanel.hasSceneArt .comicPanel.comicHero{
  position:relative!important;
  height:clamp(210px,31dvh,310px)!important;
  min-height:0!important;
  overflow:hidden!important;
  background:#09172c!important;
}
#levelStoryPanel.hasSceneArt .comicHero .sceneArtImg{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  margin:0!important;
  border:0!important;
}
/* Dialogue overlays the art so it does not add a second vertical block. */
#levelStoryPanel.hasSceneArt .comicHero .speechBubble{
  position:absolute!important;
  z-index:9!important;
  left:auto!important;right:8px!important;bottom:8px!important;
  width:min(60%,330px)!important;
  max-width:calc(100% - 16px)!important;
  max-height:none!important;
  margin:0!important;
  padding:9px 10px!important;
  overflow:visible!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 3px 0 rgba(23,36,58,.95),0 7px 18px rgba(0,0,0,.22)!important;
}
#levelStoryPanel.hasSceneArt .comicHero .speechBubble:after{display:block!important}
#levelStoryPanel.hasSceneArt.speakerNull .comicHero .speechBubble,
#levelStoryPanel.hasSceneArt.speakerCat .comicHero .speechBubble{left:8px!important;right:auto!important}

/* Narration stays fully visible; no inner scrollbars. */
#levelStoryPanel .comicReaction{min-height:0!important;padding:8px 9px!important}
#levelStoryPanel .storyNarration{margin-top:5px!important;padding:6px 8px!important;font-size:clamp(10.2px,2.25vw,13px)!important;line-height:1.22!important}
#levelStoryPanel .reactionText{max-height:none!important;overflow:visible!important;margin-top:5px!important;padding:5px 7px!important;font-size:clamp(10px,2.15vw,12px)!important;line-height:1.2!important}
#levelStoryPanel .reactionMolecule{font-size:clamp(18px,4vw,24px)!important;padding:3px 8px!important;border-width:3px!important}
#levelStoryPanel .storyNav{position:relative!important;bottom:auto!important;padding:0!important;background:transparent!important;backdrop-filter:none!important;grid-template-columns:48px 1fr!important;gap:6px!important}
#levelStoryPanel .storyNav .btn{min-height:40px!important;padding:7px 9px!important;font-size:clamp(11px,2.8vw,13px)!important}
#levelStoryPanel .storySkipText{margin-top:4px!important;font-size:10px!important}

@media(max-width:620px){
  #levelStoryPanel{width:min(96vw,520px)!important;padding:8px!important}
  #levelStoryPanel .comicStrip{grid-template-columns:1fr!important;gap:5px!important;margin-bottom:5px!important}
  #levelStoryPanel.hasSceneArt .comicPanel.comicHero{height:clamp(180px,29dvh,235px)!important}
  #levelStoryPanel:not(.hasSceneArt) .comicHero{min-height:clamp(170px,27dvh,220px)!important}
  #levelStoryPanel .comicReaction{padding:6px 7px!important}
  #levelStoryPanel #storyChapter{font-size:clamp(10.5px,2.9vw,12px)!important}
  #levelStoryPanel #storyPageCounter{font-size:9.5px!important}
  #levelStoryPanel.hasSceneArt .comicHero .speechBubble{width:min(66%,300px)!important;padding:7px 8px!important;font-size:clamp(10px,2.65vw,11.5px)!important;line-height:1.2!important}
  #levelStoryPanel #storyText{font-size:inherit!important;line-height:inherit!important}
  #levelStoryPanel .storySpeakerName{font-size:8px!important;margin-bottom:2px!important}
  #levelStoryPanel .storyNarration{font-size:clamp(9.8px,2.55vw,11px)!important;line-height:1.18!important;padding:5px 7px!important}
  #levelStoryPanel .storyNarratorLabel{font-size:7.5px!important;margin-bottom:2px!important}
  #levelStoryPanel .reactionText{font-size:clamp(9.5px,2.45vw,10.5px)!important;line-height:1.17!important}
  #levelStoryPanel .reactionMolecule{font-size:18px!important;margin:0 auto!important}
}
@media(max-height:700px){
  #levelStoryPanel{padding:7px!important}
  #levelStoryPanel .storyPageHead{margin-bottom:4px!important}
  #levelStoryPanel.hasSceneArt .comicPanel.comicHero{height:clamp(165px,27dvh,195px)!important}
  #levelStoryPanel:not(.hasSceneArt) .comicHero{min-height:160px!important}
  #levelStoryPanel .storyNarration{font-size:9.7px!important;line-height:1.16!important}
  #levelStoryPanel .reactionText{font-size:9.3px!important;line-height:1.15!important}
  #levelStoryPanel .storyNav .btn{min-height:37px!important;padding:6px 8px!important}
}

/* Level-complete modal: keep all routine result information on one screen. */
#modalBox.winResultModal{
  width:min(91vw,380px)!important;
  max-height:calc(100dvh - max(14px,var(--sat)) - max(14px,var(--sab)))!important;
  overflow:hidden!important;
  padding:clamp(10px,1.8vh,15px) clamp(11px,3vw,16px)!important;
  text-align:center!important;
}
#modalBox.winResultModal>.mxModalScrollRail{display:none!important}
#modalBox.winResultModal h3{font-size:clamp(17px,4.8vw,21px)!important;margin-bottom:2px!important;line-height:1.08!important}
#modalBox.winResultModal .msub{font-size:clamp(10.5px,2.9vw,12.5px)!important;margin-bottom:4px!important;line-height:1.15!important}
#modalBox.winResultModal .mxResultMolecule{width:clamp(70px,18vw,88px)!important;height:clamp(70px,18vw,88px)!important;margin:2px auto!important}
#modalBox.winResultModal .mxResultOrbit{font-size:clamp(30px,8vw,39px)!important}
#modalBox.winResultModal .mxResultMolecule>b{font-size:clamp(12px,3.3vw,14px)!important}
#modalBox.winResultModal .mxResultMolecule>small{font-size:7.5px!important;max-width:82px!important}
#modalBox.winResultModal .performanceResult{margin:4px auto!important;padding:5px 8px!important;gap:4px 6px!important;border-radius:11px!important}
#modalBox.winResultModal .performanceResult b{font-size:clamp(13px,3.6vw,15px)!important}
#modalBox.winResultModal .performanceResult span{font-size:9px!important}
#modalBox.winResultModal .performanceResult em{font-size:8px!important}
#modalBox.winResultModal .mxSolveTimeResult{margin:4px auto!important;padding:6px 8px!important;gap:1px 7px!important;border-radius:11px!important}
#modalBox.winResultModal .mxSolveTimeResult b{font-size:clamp(15px,4.2vw,18px)!important}
#modalBox.winResultModal .mxSolveTimeResult span{font-size:8.5px!important}
#modalBox.winResultModal .mxSolveTimeResult em{font-size:9px!important}
#modalBox.winResultModal .mstars{font-size:clamp(28px,8vw,34px)!important;letter-spacing:5px!important;min-height:34px!important;margin:3px 0 1px!important;line-height:1!important}
#modalBox.winResultModal .mcoins{font-size:clamp(12px,3.4vw,15px)!important;margin-bottom:4px!important;line-height:1.1!important}
#modalBox.winResultModal .bonusUnlockNotice{margin:4px 0!important;padding:6px 8px!important}
#modalBox.winResultModal .bonusUnlockNotice b{font-size:11px!important}
#modalBox.winResultModal .bonusUnlockNotice span{margin-top:2px!important;font-size:9px!important;line-height:1.2!important}
#modalBox.winResultModal .accountMilestoneInvite{margin:4px 0!important;padding:7px!important;gap:7px!important}
#modalBox.winResultModal .accountMilestoneIcon{font-size:20px!important}
#modalBox.winResultModal .accountMilestoneInvite b{font-size:10.5px!important}
#modalBox.winResultModal .accountMilestoneInvite span{font-size:9px!important;line-height:1.15!important}
#modalBox.winResultModal>#mDiscoverMolecule{width:100%!important;min-height:38px!important;padding:7px 9px!important;font-size:clamp(10.5px,3vw,12.5px)!important;margin-top:2px!important}
#modalBox.winResultModal .mrow{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important;margin-top:6px!important;padding:0!important}
#modalBox.winResultModal .mrow>.btn{min-height:38px!important;padding:7px 8px!important;font-size:clamp(10.5px,3vw,12.5px)!important;line-height:1.12!important;margin:0!important}
#modalBox.winResultModal #mNext{grid-column:1/-1!important;min-height:42px!important;font-size:clamp(12px,3.5vw,14px)!important}
#modalBox.winResultModal #mBonusNow{grid-column:1/-1!important}

/* The Nobel final has genuinely extra certificate controls; compact them too. */
#modalBox.winResultModal .nobelCertificatePreview{margin:4px auto!important;padding:7px 9px!important;border-radius:12px!important}
#modalBox.winResultModal .nobelCertSeal{font-size:24px!important}
#modalBox.winResultModal .nobelCertificatePreview h4{margin:2px 0!important;font-size:12px!important}
#modalBox.winResultModal .nobelCertificatePreview strong{font-size:14px!important}
#modalBox.winResultModal .nobelCertificatePreview p{margin:3px auto!important;font-size:9px!important;line-height:1.18!important}
#modalBox.winResultModal .nobelCertFormula{padding:3px 7px!important;font-size:9px!important}
#modalBox.winResultModal .nobelShareActions{gap:5px!important;margin:4px 0!important}
#modalBox.winResultModal .nobelShareActions .btn{min-height:34px!important;padding:6px 8px!important;font-size:10px!important}

@media(max-height:700px){
  #modalBox.winResultModal{padding:8px 10px!important}
  #modalBox.winResultModal .mxResultMolecule{width:62px!important;height:62px!important}
  #modalBox.winResultModal .mxResultOrbit{font-size:28px!important}
  #modalBox.winResultModal .performanceResult{margin:3px auto!important;padding:4px 6px!important}
  #modalBox.winResultModal .mxSolveTimeResult{margin:3px auto!important;padding:4px 7px!important}
  #modalBox.winResultModal .mstars{font-size:27px!important;min-height:29px!important;margin:2px 0!important}
  #modalBox.winResultModal .mrow{gap:4px!important;margin-top:4px!important}
  #modalBox.winResultModal .mrow>.btn{min-height:34px!important;padding:5px 7px!important;font-size:10.5px!important}
  #modalBox.winResultModal #mNext{min-height:38px!important;font-size:12px!important}
}

/* Final guard: no sideways menu drift on phone screens. */
.screen,#modal,#modalBox,#levelStoryPanel{max-width:100vw;overflow-x:hidden}
/* Science content polish — keep educational notes readable without enlarging cards. */
.molCard .molModelNote{font-size:9.5px;line-height:1.3;color:rgba(190,220,245,.72);padding-top:2px}
.elCard .elFact{font-size:8.8px;line-height:1.25;color:var(--dim);margin:3px 4px 0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:420px){
  .molCard .molModelNote{font-size:9px}
  .elCard .elFact{font-size:8.3px;-webkit-line-clamp:3}
}


/* STORY LOCK CANDIDATE 2 — art is never covered by dialogue */
#levelStoryPanel .comicHero .speechBubble{display:none!important}
#levelStoryPanel .comicReaction{justify-content:flex-start!important;align-items:stretch!important;gap:5px!important;background:linear-gradient(180deg,#fffdf5,#f7f1df)!important}
#levelStoryPanel .comicReaction .speechBubble{display:block;position:relative!important;inset:auto!important;box-sizing:border-box!important;width:min(92%,390px)!important;max-width:100%!important;max-height:none!important;overflow:visible!important;margin:0!important;padding:8px 10px!important;border:2px solid #17243a!important;border-radius:15px!important;background:#fff!important;color:#17243a!important;box-shadow:2px 3px 0 rgba(23,36,58,.85)!important;transform:none!important;font-size:clamp(10.5px,2.3vw,12.5px)!important;line-height:1.22!important;text-align:left!important;align-self:flex-start!important}
#levelStoryPanel .comicReaction .speechBubble:after{display:block!important;content:""!important;position:absolute!important;left:18px!important;right:auto!important;bottom:-7px!important;width:12px!important;height:12px!important;background:#fff!important;border:0!important;border-right:2px solid #17243a!important;border-bottom:2px solid #17243a!important;transform:rotate(45deg)!important}
#levelStoryPanel.speakerNull .comicReaction .speechBubble{align-self:flex-end!important}
#levelStoryPanel.speakerNull .comicReaction .speechBubble:after{left:auto!important;right:18px!important}
#levelStoryPanel.speakerCat .comicReaction .speechBubble,#levelStoryPanel.speakerMoxy .comicReaction .speechBubble{align-self:center!important}
#levelStoryPanel.speakerCat .comicReaction .speechBubble:after,#levelStoryPanel.speakerMoxy .comicReaction .speechBubble:after{left:50%!important;margin-left:-6px!important}
#levelStoryPanel:not(.storyHasDialogue) .comicReaction .speechBubble{display:none!important}
#levelStoryPanel .reactionMolecule{display:none!important}
#levelStoryPanel:not(.storyHasFx) .comicBang{display:none!important}
#levelStoryPanel .comicBang{max-width:45%!important;padding:3px 6px!important;border-width:2px!important;border-radius:8px!important;font-size:clamp(9px,2.2vw,12px)!important;line-height:1!important;opacity:.92!important}
#levelStoryPanel.hasSceneArt .comicHero .sceneArtImg{inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important}
#levelStoryPanel .storyNarration{margin-top:0!important}
#levelStoryPanel .reactionText{margin-top:0!important}
@media(max-width:620px){#levelStoryPanel .comicReaction{padding:6px 7px!important;gap:4px!important}#levelStoryPanel .comicReaction .speechBubble{padding:6px 8px!important;font-size:clamp(9.7px,2.55vw,10.8px)!important;line-height:1.18!important}#levelStoryPanel.hasSceneArt .comicPanel.comicHero{height:clamp(176px,27dvh,225px)!important}}
@media(max-height:700px){#levelStoryPanel .comicReaction .speechBubble{padding:5px 7px!important;font-size:9.5px!important;line-height:1.16!important}#levelStoryPanel.hasSceneArt .comicPanel.comicHero{height:clamp(155px,25dvh,185px)!important}}


/* ================= UI BALANCE + MOXY COMPANION POLISH 2 ================= */
/* Result screen: one-screen composition, centered hierarchy, no internal rail. */
#modal.winResultHost,#modal:has(#modalBox.winResultModal){overflow:hidden!important}
#modalBox.winResultModal{
  width:min(90vw,366px)!important;
  max-height:calc(100dvh - max(10px,var(--sat)) - max(10px,var(--sab)))!important;
  padding:clamp(8px,1.35vh,12px) clamp(10px,2.7vw,14px)!important;
  overflow:hidden!important;
}
#modalBox.winResultModal h3{font-size:clamp(16px,4.35vw,19px)!important}
#modalBox.winResultModal .msub{font-size:clamp(9.7px,2.55vw,11.5px)!important;margin-bottom:3px!important}
#modalBox.winResultModal .mxResultMolecule{
  width:clamp(62px,16.2vw,78px)!important;height:clamp(62px,16.2vw,78px)!important;
  margin:1px auto 2px!important;overflow:hidden!important;
  border:1px solid rgba(114,225,255,.32)!important;
  box-shadow:inset 0 0 18px rgba(79,216,255,.08),0 6px 13px rgba(0,0,0,.24)!important;
}
#modalBox.winResultModal .mxResultMolecule::before,#modalBox.winResultModal .mxResultMolecule::after{inset:14%!important}
#modalBox.winResultModal .mxResultOrbit{font-size:clamp(25px,6.7vw,32px)!important;transform-origin:center!important}
#modalBox.winResultModal .mxResultMolecule>b{font-size:clamp(10.5px,2.8vw,12px)!important;margin-top:1px!important}
#modalBox.winResultModal .mxResultMolecule>small{font-size:6.8px!important;max-width:68px!important}
#modalBox.winResultModal .performanceResult{margin:3px auto!important;padding:4px 7px!important}
#modalBox.winResultModal .mxSolveTimeResult{margin:3px auto!important;padding:5px 7px!important}
#modalBox.winResultModal .mstars{font-size:clamp(25px,7vw,31px)!important;min-height:30px!important;letter-spacing:4px!important;margin:2px 0!important}
#modalBox.winResultModal .mcoins{font-size:clamp(11px,3vw,13.5px)!important;margin-bottom:3px!important}
/* Account invitation should inform without dominating the result card. */
#modalBox.winResultModal .accountMilestoneInvite{
  grid-template-columns:22px minmax(0,1fr) auto!important;gap:6px!important;
  margin:3px 0!important;padding:5px 7px!important;border-radius:11px!important;
}
#modalBox.winResultModal .accountMilestoneIcon{font-size:17px!important}
#modalBox.winResultModal .accountMilestoneInvite b{font-size:9.4px!important;line-height:1.05!important}
#modalBox.winResultModal .accountMilestoneInvite span{font-size:8px!important;line-height:1.12!important;margin-top:1px!important}
#modalBox.winResultModal .accountMilestoneInvite .btn{
  grid-column:auto!important;width:auto!important;min-height:30px!important;padding:5px 8px!important;
  font-size:9px!important;white-space:nowrap!important;margin:0!important;
}
#modalBox.winResultModal>#mDiscoverMolecule{
  display:block!important;width:88%!important;min-height:34px!important;margin:3px auto 0!important;
  padding:5px 8px!important;font-size:clamp(9.5px,2.6vw,11px)!important;
}
#modalBox.winResultModal .mrow{grid-template-columns:1fr 1fr!important;gap:5px!important;margin-top:5px!important}
#modalBox.winResultModal .mrow>.btn{min-height:34px!important;padding:5px 7px!important;font-size:clamp(9.8px,2.7vw,11.3px)!important}
#modalBox.winResultModal #mNext{
  grid-column:1/-1!important;width:82%!important;justify-self:center!important;
  min-height:37px!important;font-size:clamp(10.8px,3vw,12.5px)!important;
}
#modalBox.winResultModal #mBonusNow{width:86%!important;justify-self:center!important}
@media(max-height:760px){
  #modalBox.winResultModal{padding:7px 9px!important}
  #modalBox.winResultModal .accountMilestoneInvite span{display:none!important}
  #modalBox.winResultModal .accountMilestoneInvite{grid-template-columns:20px 1fr auto!important}
  #modalBox.winResultModal .mxResultMolecule{width:58px!important;height:58px!important}
  #modalBox.winResultModal .mrow>.btn{min-height:31px!important;font-size:9.7px!important}
  #modalBox.winResultModal #mNext{min-height:34px!important}
}
@media(max-width:390px){
  #modalBox.winResultModal{width:min(91vw,350px)!important}
  #modalBox.winResultModal .accountMilestoneInvite .btn{padding:4px 6px!important;font-size:8.5px!important}
}

/* Moxy lives on the upper-left rim of the board after Experiment 50.
   It stays outside playable cells and balances Dr. E on the lower-right. */
#boardFrame>#moxyGameCompanion{
  position:absolute!important;left:clamp(5px,1.6vw,10px)!important;right:auto!important;
  top:clamp(-43px,-5.2vw,-31px)!important;bottom:auto!important;
  width:clamp(48px,11.5vw,64px)!important;aspect-ratio:1.05/1!important;
  z-index:18!important;pointer-events:none!important;filter:drop-shadow(0 5px 9px rgba(0,0,0,.52))!important;
}
#boardFrame>#moxyGameCompanion i{left:17%!important;right:17%!important;bottom:2%!important;height:18%!important}
#boardFrame>#moxyGameCompanion.react-ready img{animation:mxMoxyFloatRim 2.7s ease-in-out infinite}
#boardFrame>#moxyGameCompanion.mx-pop img{animation:mxMoxyPop .58s cubic-bezier(.2,1.55,.35,1)!important}
#boardFrame>#moxyGameCompanion.mx-squish img{animation:mxMoxySquish .46s cubic-bezier(.2,1.6,.35,1)!important}
#boardFrame>#moxyGameCompanion.mx-happy img{animation:mxMoxyHappy .78s ease!important}
@keyframes mxMoxyFloatRim{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}
@keyframes mxMoxyPop{0%{transform:scale(.8,.72) translateY(3px)}42%{transform:scale(1.12,.94) translateY(-8px)}72%{transform:scale(.96,1.06) translateY(-2px)}100%{transform:scale(1) translateY(0)}}
@keyframes mxMoxySquish{0%,100%{transform:scale(1)}35%{transform:scale(1.12,.78) translateY(4px)}65%{transform:scale(.9,1.13) translateY(-5px)}}
@keyframes mxMoxyHappy{0%,100%{transform:translateY(0) rotate(0)}28%{transform:translateY(-7px) rotate(-8deg)}55%{transform:translateY(-3px) rotate(8deg)}78%{transform:translateY(-5px) rotate(-4deg)}}
@media(max-width:390px){#boardFrame>#moxyGameCompanion{left:4px!important;top:-35px!important;width:50px!important}}
@media(max-height:700px){#boardFrame>#moxyGameCompanion{top:-31px!important;width:46px!important}}
body.mxReduceMotion #boardFrame>#moxyGameCompanion img{animation:none!important}

/* ================= RESULT CLEANUP + FX POLISH 3 ================= */
/* Moleculopedia remains available from the collection navigation; the result card focuses on flow. */
#modalBox.winResultModal>#mDiscoverMolecule{display:none!important}
#modalBox.winResultModal .mrow{margin-top:7px!important;gap:7px!important}
#modalBox.winResultModal #mNext{
  width:88%!important;min-height:42px!important;justify-self:center!important;
  font-size:clamp(11.5px,3.2vw,13.5px)!important;letter-spacing:.02em!important;
}
#modalBox.winResultModal #mRetry,#modalBox.winResultModal #mLab{
  min-height:35px!important;font-size:clamp(9.8px,2.7vw,11.4px)!important;
}
/* Nudge Moxy slightly down while keeping it on the non-playable board rim. */
#boardFrame>#moxyGameCompanion{top:clamp(-36px,-4.35vw,-24px)!important}
@media(max-width:390px){#boardFrame>#moxyGameCompanion{top:-28px!important}}
@media(max-height:700px){#boardFrame>#moxyGameCompanion{top:-24px!important}}

/* ================= CHARACTER LIFE PASS 1 =================
   Moxy: organic wordless idle reactions. Dr. E: subtle idle life only.
   No gameplay geometry is affected. */
#boardFrame>#moxyGameCompanion b{
  position:absolute;z-index:4;pointer-events:none;
  width:10px;height:10px;border-radius:50%;right:13%;top:20%;
  opacity:0;background:radial-gradient(circle,#fff 0 18%,#8eeaff 28%,rgba(142,234,255,0) 72%);
  filter:drop-shadow(0 0 5px rgba(110,226,255,.95));
}
#boardFrame>#moxyGameCompanion.react-ready b{animation:mxMoxyGlint 7.4s ease-in-out infinite}
#boardFrame>#moxyGameCompanion.mx-curious img{animation:mxMoxyCurious 1.45s cubic-bezier(.22,.8,.24,1)!important}
#boardFrame>#moxyGameCompanion.mx-wiggle img{animation:mxMoxyWiggle 1.05s cubic-bezier(.2,.9,.24,1)!important}
#boardFrame>#moxyGameCompanion.mx-listen img{animation:mxMoxyListen 1.2s ease!important}
#boardFrame>#moxyGameCompanion.mx-curious b,
#boardFrame>#moxyGameCompanion.mx-happy b{animation:mxMoxySpark .72s ease-out 1!important}
@keyframes mxMoxyCurious{
  0%,100%{transform:translateY(0) rotate(-1deg) scale(1)}
  32%{transform:translate(3px,-4px) rotate(7deg) scale(.98,1.03)}
  62%{transform:translate(4px,-2px) rotate(9deg) scale(1.02,.99)}
}
@keyframes mxMoxyWiggle{
  0%,100%{transform:translateY(0) rotate(0) scale(1)}
  18%{transform:translateY(-2px) rotate(-7deg) scale(1.03,.97)}
  42%{transform:translateY(-4px) rotate(7deg) scale(.98,1.04)}
  68%{transform:translateY(-2px) rotate(-4deg) scale(1.02,.99)}
}
@keyframes mxMoxyListen{
  0%,100%{transform:translateY(0) rotate(-1deg)}
  35%,70%{transform:translate(3px,-3px) rotate(5deg) scale(.99,1.02)}
}
@keyframes mxMoxyGlint{
  0%,72%,100%{opacity:0;transform:scale(.35) rotate(0)}
  77%{opacity:.95;transform:scale(1.35) rotate(45deg)}
  82%{opacity:0;transform:scale(.6) rotate(90deg)}
}
@keyframes mxMoxySpark{0%{opacity:0;transform:scale(.2)}38%{opacity:1;transform:scale(1.7)}100%{opacity:0;transform:scale(.5)}}

#einBoxG:not(.mxPoseAsset).mx-life-breathe .einImg{animation:mxDrELifeBreathe 1.35s ease-in-out!important}
#einBoxG:not(.mxPoseAsset).mx-life-nod .einImg{animation:mxDrELifeNod 1.25s ease-in-out!important}
@keyframes mxDrELifeBreathe{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-2px) scale(1.008,1.018)}
}
@keyframes mxDrELifeNod{
  0%,100%{transform:translateY(0) rotate(0)}
  38%{transform:translateY(2px) rotate(1.1deg)}
  66%{transform:translateY(-1px) rotate(-.6deg)}
}
body.mxReduceMotion #boardFrame>#moxyGameCompanion b,
body.mxReduceMotion #einBoxG .einImg{animation:none!important}


/* R38 UI + Animation Polish — account single-screen layout */
#modalBox.accountModal{
  width:min(92vw,390px)!important;
  max-height:calc(100dvh - max(10px,var(--sat)) - max(10px,var(--sab)))!important;
  overflow:hidden!important;
  padding:clamp(10px,1.55vh,14px) 14px 11px!important;
}
#modalBox.accountModal>.mxModalScrollRail{display:none!important}
#modalBox.accountModal>.mxUniversalBody{
  overflow:visible!important;max-height:none!important;height:auto!important;padding:0!important;
}
#modalBox.accountModal h3{
  margin:0 0 5px!important;
  font-size:clamp(14px,3.8vw,17px)!important;
  line-height:1.08!important;
}
#modalBox.accountModal .accountCloseX{
  width:36px!important;height:36px!important;min-height:36px!important;
  right:8px!important;top:8px!important;font-size:25px!important;
}
#modalBox.accountModal .accountHero{
  gap:9px!important;padding:8px 9px!important;margin-bottom:5px!important;
  border-radius:13px!important;
}
#modalBox.accountModal .accountAvatar{width:40px!important;height:40px!important;font-size:19px!important}
#modalBox.accountModal .accountHero strong{font-size:13.5px!important;margin-bottom:1px!important;line-height:1.1!important}
#modalBox.accountModal .accountHero small{font-size:10px!important;line-height:1.22!important}
#modalBox.accountModal .accountNotice{
  padding:7px 9px!important;margin:5px 0!important;border-radius:11px!important;
  font-size:10.5px!important;line-height:1.23!important;
}
#modalBox.accountModal .accountActions{gap:5px!important}
#modalBox.accountModal .accountActions .btn{
  min-height:38px!important;height:auto!important;padding:7px 8px!important;
  font-size:clamp(11px,3.15vw,13px)!important;line-height:1.12!important;
  border-radius:12px!important;margin:0!important;
}
#modalBox.accountModal .accountActions .btn.google::before{
  width:19px!important;height:19px!important;font-size:13px!important;
}
#modalBox.accountModal .accountUtilityRow{
  gap:5px!important;margin:0!important;
}
#modalBox.accountModal .accountUtilityRow .btn{
  min-height:46px!important;font-size:clamp(10px,2.9vw,12px)!important;
  padding:6px!important;
}
#modalBox.accountModal .authTiny{
  margin-top:4px!important;font-size:9px!important;line-height:1.15!important;
}
#modalBox.accountModal .accountDivider{margin:4px 0!important;font-size:8.5px!important}
@media(max-height:760px){
  #modalBox.accountModal{padding:8px 11px!important}
  #modalBox.accountModal h3{font-size:14px!important;margin-bottom:3px!important}
  #modalBox.accountModal .accountHero{padding:6px 8px!important;margin-bottom:3px!important}
  #modalBox.accountModal .accountAvatar{width:36px!important;height:36px!important}
  #modalBox.accountModal .accountHero strong{font-size:12.5px!important}
  #modalBox.accountModal .accountHero small{font-size:9px!important}
  #modalBox.accountModal .accountNotice{padding:5px 7px!important;margin:3px 0!important;font-size:9.5px!important}
  #modalBox.accountModal .accountActions{gap:4px!important}
  #modalBox.accountModal .accountActions .btn{min-height:34px!important;padding:5px 7px!important;font-size:11px!important}
  #modalBox.accountModal .accountUtilityRow .btn{min-height:40px!important;font-size:9.5px!important}
  #modalBox.accountModal .authTiny{font-size:8.5px!important;margin-top:2px!important}
}

/* R38 premium but brief level-entry transition */
#levelTransition{
  display:grid;place-items:center;
  background:
    radial-gradient(circle at 50% 43%,rgba(59,42,116,.94),rgba(10,8,24,.98) 68%),
    linear-gradient(180deg,#11102a,#070611)!important;
  transition:opacity .25s ease!important;
}
#levelTransition .mxLevelEntryCard{
  min-width:min(72vw,280px);padding:14px 22px 16px;border-radius:22px;text-align:center;
  opacity:0;transform:translateY(13px) scale(.92);
  border:1px solid rgba(126,228,255,.42);
  background:linear-gradient(145deg,rgba(20,24,62,.86),rgba(39,20,73,.82));
  box-shadow:0 18px 55px rgba(0,0,0,.48),0 0 32px rgba(112,93,255,.18),inset 0 0 0 1px rgba(255,255,255,.05);
}
#levelTransition.on .mxLevelEntryCard{animation:mxLevelEntryIn .46s cubic-bezier(.18,.9,.24,1) both}
#levelTransition.mxOut .mxLevelEntryCard{animation:mxLevelEntryOut .28s ease-in both}
.mxLevelEntryCard small{display:block;color:#7deaff;font:900 10px/1 system-ui;letter-spacing:.26em;margin-bottom:4px}
.mxLevelEntryCard strong{display:block;color:#fff;font:1000 clamp(30px,9vw,42px)/.95 system-ui;text-shadow:0 0 18px rgba(143,117,255,.55)}
.mxLevelEntryCard b{display:block;margin-top:9px;color:#fff;font:900 clamp(12px,3.7vw,15px)/1.1 system-ui;letter-spacing:.04em}
.mxLevelEntryCard em{display:block;margin-top:3px;color:#ffd86e;font:900 12px/1 system-ui;font-style:normal}
@keyframes mxLevelEntryIn{
  0%{opacity:0;transform:translateY(13px) scale(.92);filter:blur(3px)}
  58%{opacity:1;transform:translateY(-2px) scale(1.025);filter:blur(0)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes mxLevelEntryOut{to{opacity:0;transform:translateY(-8px) scale(1.025);filter:blur(2px)}}

/* R38 result arrival + clearer three-star celebration */
#modalBox.winResultModal.mxResultArrive{animation:mxResultPanelIn .38s cubic-bezier(.18,.9,.24,1) both}
#modalBox.winResultModal.mxResultArrive .mstars{position:relative}
#modalBox.winResultModal.mxResultArrive .mstars::after{
  content:'';position:absolute;left:50%;top:50%;width:150px;height:44px;
  transform:translate(-50%,-50%) scale(.45);border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,224,105,.30),rgba(255,205,69,.08) 48%,transparent 72%);
  opacity:0;pointer-events:none;animation:mxStarsHalo 1.45s .62s ease-out both;
}
#modalBox.winResultModal .mstars span.pop{
  filter:drop-shadow(0 0 7px rgba(255,211,75,.72));
}
@keyframes mxResultPanelIn{
  0%{opacity:0;transform:translateY(18px) scale(.965)}
  70%{opacity:1;transform:translateY(-2px) scale(1.008)}
  100%{opacity:1;transform:none}
}
@keyframes mxStarsHalo{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.45)}
  35%{opacity:.95}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.35)}
}
@media(prefers-reduced-motion:reduce){
  #levelTransition .mxLevelEntryCard,#modalBox.winResultModal.mxResultArrive,
  #modalBox.winResultModal.mxResultArrive .mstars::after{animation:none!important}
}


/* R38 VFX Pass 1 — restrained chemical bond bloom */
.mxBondBloom{
  position:fixed;z-index:88;pointer-events:none;
  width:22px;height:22px;border-radius:50%;
  transform:translate(-50%,-50%) scale(.25);opacity:0;
  border:2px solid color-mix(in srgb,var(--mx-bond-col,#9feeff) 72%,white);
  box-shadow:
    0 0 9px var(--mx-bond-col,#9feeff),
    0 0 22px color-mix(in srgb,var(--mx-bond-col,#9feeff) 62%,transparent),
    inset 0 0 12px rgba(255,255,255,.7);
  animation:mxBondBloomOut .56s cubic-bezier(.15,.76,.22,1) both;
}
@keyframes mxBondBloomOut{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.22)}
  18%{opacity:.95}
  100%{opacity:0;transform:translate(-50%,-50%) scale(3.1)}
}
@media(prefers-reduced-motion:reduce){.mxBondBloom{display:none!important}}


/* R38 VFX Pass 2 — readable, short-lived mechanic pulses */
.mxSpecialCellPulse{
  position:fixed;z-index:87;pointer-events:none;
  width:38px;height:38px;border-radius:50%;
  transform:translate(-50%,-50%) scale(.35);opacity:0;
  border:2px solid #9fefff;
  box-shadow:0 0 12px rgba(122,232,255,.75),inset 0 0 12px rgba(255,255,255,.42);
  animation:mxSpecialCellPulseOut .58s cubic-bezier(.14,.76,.2,1) both;
}
.mxSpecialCellPulse.chain{
  border-color:#ffd65c;box-shadow:0 0 13px rgba(255,202,68,.82),0 0 28px rgba(255,123,45,.28);
}
.mxSpecialCellPulse.gateOpen{
  border-color:#70ffb0;box-shadow:0 0 13px rgba(88,255,171,.72),0 0 25px rgba(88,255,171,.22);
}
.mxSpecialCellPulse.gateClose{
  border-color:#ffd06c;box-shadow:0 0 13px rgba(255,203,95,.68),0 0 22px rgba(255,144,52,.20);
}
.mxSpecialCellPulse.barrierBreak{
  border-color:#9af4ff;box-shadow:0 0 14px rgba(116,235,255,.86),0 0 31px rgba(79,173,255,.3);
}
@keyframes mxSpecialCellPulseOut{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.28)}
  16%{opacity:.96}
  100%{opacity:0;transform:translate(-50%,-50%) scale(calc(2.25 * var(--mx-cell-strength,1)))}
}
@media(prefers-reduced-motion:reduce){.mxSpecialCellPulse{display:none!important}}

.mxSpecialCellPulse.portalA{
  border-color:#6eefff;box-shadow:0 0 14px rgba(90,235,255,.84),0 0 31px rgba(52,159,255,.24);
}
.mxSpecialCellPulse.portalB{
  border-color:#cf92ff;box-shadow:0 0 14px rgba(199,126,255,.84),0 0 31px rgba(126,66,255,.24);
}


/* R38 Character Interaction Pass */
#boardFrame>#moxyGameCompanion{
  transition:transform .78s cubic-bezier(.2,.78,.2,1),filter .35s ease!important;
  will-change:transform;
}
#boardFrame>#moxyGameCompanion.mx-visit-dre{
  transform:translate(var(--mx-visit-x,0px),var(--mx-visit-y,0px)) scale(1.06)!important;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.52)) drop-shadow(0 0 9px rgba(104,229,255,.38))!important;
  z-index:74!important;
}
#mxMoxyEmojiBubble{
  position:fixed;z-index:96;pointer-events:none;
  min-width:42px;min-height:34px;padding:5px 8px;
  display:grid;place-items:center;
  border:2px solid rgba(20,37,58,.92);border-radius:18px 18px 18px 5px;
  background:rgba(255,255,255,.97);color:#17243a;
  box-shadow:0 7px 18px rgba(0,0,0,.30);
  font:900 clamp(17px,5vw,23px)/1 system-ui,-apple-system,sans-serif;
  opacity:0;transform:translate(-50%,-100%) scale(.7);
}
#mxMoxyEmojiBubble.on{animation:mxMoxyEmojiTalk 1.45s cubic-bezier(.18,.86,.25,1) both}
@keyframes mxMoxyEmojiTalk{
  0%{opacity:0;transform:translate(-50%,-92%) scale(.66)}
  18%{opacity:1;transform:translate(-50%,-108%) scale(1.08)}
  30%,74%{opacity:1;transform:translate(-50%,-104%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-114%) scale(.9)}
}
body.mxReduceMotion #boardFrame>#moxyGameCompanion{transition:none!important}
body.mxReduceMotion #mxMoxyEmojiBubble{display:none!important}


/* ================= R38 AAA CHARACTER + VFX POLISH =================
   Existing artwork only: motion, light, timing and material response. */

/* Moxy: organic jelly motion rather than repeated sprite bouncing. */
#boardFrame>#moxyGameCompanion img{
  transform-origin:50% 84%;
  backface-visibility:hidden;
}
#boardFrame>#moxyGameCompanion.mx-peek img{animation:mxMoxyPeek 1.35s cubic-bezier(.22,.75,.2,1)!important}
#boardFrame>#moxyGameCompanion.mx-floaty img{animation:mxMoxyFloaty 1.65s cubic-bezier(.2,.78,.22,1)!important}
#boardFrame>#moxyGameCompanion.mx-greet img{animation:mxMoxyGreet 1.12s cubic-bezier(.16,.88,.25,1)!important}
#boardFrame>#moxyGameCompanion.mx-curious img{animation:mxMoxyCuriousAAA 1.55s cubic-bezier(.2,.8,.22,1)!important}
#boardFrame>#moxyGameCompanion.mx-wiggle img{animation:mxMoxyWiggleAAA 1.08s cubic-bezier(.22,.78,.2,1)!important}
#boardFrame>#moxyGameCompanion.mx-listen img{animation:mxMoxyListenAAA 1.3s cubic-bezier(.2,.8,.2,1)!important}
#boardFrame>#moxyGameCompanion.mx-happy img{animation:mxMoxyHappyAAA .86s cubic-bezier(.18,1.1,.22,1)!important}

@keyframes mxMoxyPeek{
  0%,100%{transform:translate(0,0) rotate(0) scale(1)}
  28%{transform:translate(3px,-3px) rotate(5deg) scale(.98,1.03)}
  52%{transform:translate(5px,-5px) rotate(7deg) scale(.96,1.05)}
  72%{transform:translate(2px,-2px) rotate(2deg) scale(1.02,.98)}
}
@keyframes mxMoxyFloaty{
  0%,100%{transform:translateY(0) scale(1)}
  25%{transform:translateY(-5px) scale(.97,1.035)}
  52%{transform:translateY(-8px) scale(1.025,.98)}
  76%{transform:translateY(-3px) scale(.99,1.015)}
}
@keyframes mxMoxyGreet{
  0%,100%{transform:translateY(0) rotate(0) scale(1)}
  24%{transform:translateY(-6px) rotate(-7deg) scale(.94,1.08)}
  48%{transform:translateY(-2px) rotate(8deg) scale(1.08,.94)}
  68%{transform:translateY(-5px) rotate(-4deg) scale(.97,1.04)}
}
@keyframes mxMoxyCuriousAAA{
  0%,100%{transform:rotate(0) translateY(0) scale(1)}
  30%{transform:rotate(-6deg) translate(-1px,-2px) scale(.98,1.025)}
  62%{transform:rotate(5deg) translate(2px,-4px) scale(1.02,.985)}
  78%{transform:rotate(2deg) translateY(-1px) scale(.995,1.01)}
}
@keyframes mxMoxyWiggleAAA{
  0%,100%{transform:translateX(0) scale(1)}
  18%{transform:translateX(-2px) rotate(-5deg) scale(1.07,.94)}
  38%{transform:translateX(2px) rotate(5deg) scale(.94,1.07)}
  58%{transform:translateX(-1px) rotate(-3deg) scale(1.04,.97)}
  78%{transform:translateX(1px) rotate(2deg) scale(.98,1.025)}
}
@keyframes mxMoxyListenAAA{
  0%,100%{transform:translate(0,0) rotate(0) scale(1)}
  35%,68%{transform:translate(2px,-2px) rotate(5deg) scale(.98,1.025)}
}
@keyframes mxMoxyHappyAAA{
  0%,100%{transform:translateY(0) rotate(0) scale(1)}
  20%{transform:translateY(2px) scale(1.13,.88)}
  43%{transform:translateY(-9px) rotate(-6deg) scale(.93,1.10)}
  66%{transform:translateY(-3px) rotate(6deg) scale(1.06,.96)}
  84%{transform:translateY(-1px) rotate(-2deg) scale(.99,1.02)}
}

/* Curved, buoyant trip to Dr. E instead of a straight UI translation. */
#boardFrame>#moxyGameCompanion.mx-visit-dre{
  animation:mxMoxyVisitArc .82s cubic-bezier(.18,.82,.2,1) both!important;
  transition:filter .3s ease!important;
}
@keyframes mxMoxyVisitArc{
  0%{transform:translate(0,0) scale(1)}
  58%{transform:translate(calc(var(--mx-visit-x,0px)*.58),calc(var(--mx-visit-y,0px)*.58 - 10px)) scale(1.08)}
  100%{transform:translate(var(--mx-visit-x,0px),var(--mx-visit-y,0px)) scale(1.055)}
}

/* Dr. E: tiny human-like weight shifts. Existing pose system remains authoritative. */
#einBoxG:not(.mxPoseAsset).mx-life-focus .einImg{animation:mxDrEFocus 1.45s cubic-bezier(.25,.72,.2,1)!important}
#einBoxG:not(.mxPoseAsset).mx-life-think .einImg{animation:mxDrEThink 1.65s cubic-bezier(.25,.72,.2,1)!important}
#einBoxG:not(.mxPoseAsset).mx-life-settle .einImg{animation:mxDrESettle 1.45s ease-in-out!important}
@keyframes mxDrEFocus{
  0%,100%{transform:translate(0,0) scale(1);filter:brightness(1)}
  40%,67%{transform:translate(-1px,-2px) scale(1.012);filter:brightness(1.035)}
}
@keyframes mxDrEThink{
  0%,100%{transform:translate(0,0) rotate(0) scale(1)}
  35%,66%{transform:translate(-1px,-1px) rotate(-1.25deg) scale(1.008)}
}
@keyframes mxDrESettle{
  0%,100%{transform:translateY(0) scale(1)}
  35%{transform:translateY(1px) scale(1.008,.992)}
  68%{transform:translateY(-1px) scale(.997,1.005)}
}

/* Gentle optical polish around Dr. E, not an extra sprite. */
#einBoxG::after{
  content:'';position:absolute;inset:9% 10% 8%;pointer-events:none;z-index:0;border-radius:48%;
  opacity:0;background:radial-gradient(ellipse at 50% 62%,rgba(114,226,255,.13),rgba(130,113,255,.035) 52%,transparent 72%);
  transition:opacity .4s ease;
}
#einBoxG.mx-life-focus::after,#einBoxG.mx-life-think::after{opacity:1}

body.mxReduceMotion #boardFrame>#moxyGameCompanion,
body.mxReduceMotion #boardFrame>#moxyGameCompanion img,
body.mxReduceMotion #einBoxG .einImg{animation:none!important}


/* ================= MOXY ORIGINAL EXPRESSION LANGUAGE =================
   No system emoji. All symbols and temporary hands are inline SVG. */
#mxMoxyExpression{
  position:fixed;z-index:98;pointer-events:none;
  width:48px;height:48px;display:grid;place-items:center;
  opacity:0;transform:translate(-50%,-92%) scale(.45) rotate(-7deg);
  filter:drop-shadow(0 5px 10px rgba(0,0,0,.38));
}
#mxMoxyExpression.on{animation:mxExpressionPop 1.4s cubic-bezier(.16,.88,.22,1) both}
#mxMoxyExpression.on.energy,#mxMoxyExpression.on.burst{animation-duration:1.65s}
#mxMoxyExpression svg{overflow:visible}
@keyframes mxExpressionPop{
  0%{opacity:0;transform:translate(-50%,-88%) scale(.35) rotate(-9deg)}
  18%{opacity:1;transform:translate(-50%,-108%) scale(1.12) rotate(4deg)}
  34%,72%{opacity:1;transform:translate(-50%,-104%) scale(1) rotate(0)}
  100%{opacity:0;transform:translate(-50%,-122%) scale(.78) rotate(7deg)}
}

#boardFrame>#moxyGameCompanion .mxMoxyGesture{
  position:absolute;left:-24%;right:-24%;top:-17%;bottom:-14%;z-index:1;
  pointer-events:none;opacity:0;transform-origin:50% 65%;
}
#boardFrame>#moxyGameCompanion .mxMoxyGesture:not(:empty){opacity:1}
#boardFrame>#moxyGameCompanion .mxMoxyGesture.point{animation:mxGelPoint 1.35s cubic-bezier(.18,.85,.22,1) both}
#boardFrame>#moxyGameCompanion .mxMoxyGesture.think{animation:mxGelThink 1.4s cubic-bezier(.18,.85,.22,1) both}
#boardFrame>#moxyGameCompanion .mxMoxyGesture.celebrate{animation:mxGelCelebrate 1.65s cubic-bezier(.14,.9,.2,1) both}
#boardFrame>#moxyGameCompanion .mxMoxyGesture.wave{animation:mxGelWave 1.25s cubic-bezier(.16,.88,.22,1) both}
#boardFrame>#moxyGameCompanion .mxMoxyGesture.shield{animation:mxGelShield 1.35s cubic-bezier(.16,.82,.22,1) both}
#boardFrame>#moxyGameCompanion .mxMoxyGesture svg{filter:drop-shadow(0 2px 4px rgba(30,185,220,.32))}
@keyframes mxGelPoint{
  0%,100%{opacity:0;transform:scale(.45,.7) translateX(-5px)}
  20%,74%{opacity:1;transform:scale(1) translateX(0)}
  42%{transform:scale(1.08,.94) translateX(3px)}
}
@keyframes mxGelThink{
  0%,100%{opacity:0;transform:scale(.5) translate(-6px,5px)}
  20%,76%{opacity:1;transform:scale(1) translate(0,0)}
  48%{transform:scale(.96,1.05) translate(-1px,-2px)}
}
@keyframes mxGelCelebrate{
  0%,100%{opacity:0;transform:scale(.5,.65) translateY(9px)}
  18%{opacity:1;transform:scale(1.08,.92) translateY(-3px)}
  38%,68%{opacity:1;transform:scale(.98,1.08) translateY(-7px)}
  84%{opacity:.8;transform:scale(1.03,.97)}
}
@keyframes mxGelWave{
  0%,100%{opacity:0;transform:scale(.55) rotate(0)}
  20%{opacity:1;transform:scale(1) rotate(-8deg)}
  38%{transform:scale(1.03) rotate(9deg)}
  56%{transform:scale(.99) rotate(-7deg)}
  74%{opacity:1;transform:scale(1) rotate(5deg)}
}
@keyframes mxGelShield{
  0%,100%{opacity:0;transform:scale(.55) translateX(4px)}
  20%,76%{opacity:1;transform:scale(1) translateX(0)}
  46%{transform:scale(1.08,.96) translateX(2px)}
}

/* Ten named reaction states share the same canonical Moxy art, but have
   independent performance/gesture/expression layers. */
#boardFrame>#moxyGameCompanion.mx-state-pointing img{animation:mxMoxyPeek 1.35s cubic-bezier(.22,.75,.2,1)!important}
#boardFrame>#moxyGameCompanion.mx-state-thinking img{animation:mxMoxyCuriousAAA 1.5s cubic-bezier(.2,.8,.22,1)!important}
#boardFrame>#moxyGameCompanion.mx-state-worried img{animation:mxMoxySquish .52s cubic-bezier(.2,1.5,.35,1)!important}

body.mxReduceMotion #mxMoxyExpression,
body.mxReduceMotion #boardFrame>#moxyGameCompanion .mxMoxyGesture{display:none!important}


/* ================= R38 REAL MOXY 10-POSE ART ================= */
#boardFrame>#moxyGameCompanion img.mxPoseSwap{
  animation:mxMoxyPoseSwap .24s cubic-bezier(.2,.82,.22,1) both;
}
@keyframes mxMoxyPoseSwap{
  0%{opacity:.35;transform:scale(.88) translateY(3px)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}
#boardFrame>#moxyGameCompanion img{
  object-fit:contain!important;
  object-position:center!important;
}

/* ================= RESULT MOLECULE FORMULA VISIBILITY FIX =================
   Keep the orbit compact, but never crop the chemical formula or molecule name. */
#modalBox.winResultModal .mxResultMolecule{
  overflow:visible!important;
  width:clamp(70px,18vw,84px)!important;
  height:clamp(70px,18vw,84px)!important;
  margin:2px auto 17px!important;
}
#modalBox.winResultModal .mxResultOrbit{
  position:absolute!important;
  left:50%!important;top:44%!important;
  transform:translate(-50%,-50%)!important;
}
#modalBox.winResultModal .mxResultMolecule::before,
#modalBox.winResultModal .mxResultMolecule::after{
  inset:8%!important;
}
#modalBox.winResultModal .mxResultFormula{
  position:absolute!important;
  left:50%!important;bottom:-8px!important;
  transform:translateX(-50%)!important;
  z-index:4!important;
  display:block!important;
  min-width:max-content!important;
  padding:1px 6px!important;
  border-radius:8px!important;
  background:rgba(14,19,52,.78)!important;
  color:#f5fbff!important;
  font-size:clamp(12px,3.3vw,15px)!important;
  line-height:1.15!important;
  letter-spacing:.02em!important;
  white-space:nowrap!important;
  text-shadow:0 0 9px rgba(79,216,255,.75)!important;
}
#modalBox.winResultModal .mxResultName{
  position:absolute!important;
  left:50%!important;top:calc(100% + 10px)!important;
  transform:translateX(-50%)!important;
  z-index:4!important;
  display:block!important;
  width:min(170px,52vw)!important;
  max-width:none!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
  color:#cfdcff!important;
  font-size:clamp(7.5px,2vw,9px)!important;
  line-height:1.1!important;
  font-weight:850!important;
  text-align:center!important;
}
@media(max-height:690px){
  #modalBox.winResultModal .mxResultMolecule{
    width:64px!important;height:64px!important;margin-bottom:15px!important;
  }
  #modalBox.winResultModal .mxResultFormula{font-size:11.5px!important;bottom:-8px!important}
  #modalBox.winResultModal .mxResultName{font-size:7px!important;top:calc(100% + 9px)!important}
}


/* ================= GLOBAL CHEMICAL FORMULA FIT =================
   Formulas stay on one line and shrink by content length instead of clipping. */
#goalFor,
.lvFormula,
.mxResultFormula,
.mxResultHeadingFormula,
.nobelCertFormula{
  max-width:100%!important;
  box-sizing:border-box!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  font-variant-numeric:lining-nums tabular-nums;
}
#goalFor{
  display:block!important;
  width:100%!important;
  padding-inline:3px!important;
  text-align:center!important;
  line-height:1.05!important;
}
#goalFor.mxFormulaS{font-size:13px!important}
#goalFor.mxFormulaM{font-size:11.5px!important;letter-spacing:-.1px!important}
#goalFor.mxFormulaL{font-size:10px!important;letter-spacing:-.25px!important}
#goalFor.mxFormulaXL{font-size:8.8px!important;letter-spacing:-.35px!important}

.lvFormula.mxFormulaS{font-size:10px!important}
.lvFormula.mxFormulaM{font-size:9px!important}
.lvFormula.mxFormulaL{font-size:8px!important;max-width:92%!important}
.lvFormula.mxFormulaXL{font-size:7px!important;max-width:96%!important;letter-spacing:-.25px!important}

#modalBox.winResultModal .mxResultFormula.mxFormulaS{font-size:14px!important}
#modalBox.winResultModal .mxResultFormula.mxFormulaM{font-size:12.5px!important}
#modalBox.winResultModal .mxResultFormula.mxFormulaL{font-size:10.8px!important;letter-spacing:-.18px!important}
#modalBox.winResultModal .mxResultFormula.mxFormulaXL{font-size:9.4px!important;letter-spacing:-.28px!important}
#modalBox.winResultModal .mxResultFormula{
  max-width:min(74vw,210px)!important;
  min-width:0!important;
  width:max-content!important;
}

/* Completion title no longer forces name + formula into one oversized line. */
#modalBox.winResultModal .mxResultHeading{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:baseline!important;
  justify-content:center!important;
  gap:2px 7px!important;
  width:100%!important;
  max-width:100%!important;
  padding-inline:4px!important;
  overflow:visible!important;
  text-align:center!important;
  line-height:1.08!important;
}
#modalBox.winResultModal .mxResultHeadingName{
  min-width:0!important;
  max-width:100%!important;
  overflow-wrap:anywhere!important;
}
#modalBox.winResultModal .mxResultHeadingFormula{
  display:inline-block!important;
  flex:0 0 auto!important;
  white-space:nowrap!important;
  color:#bff5ff!important;
  text-shadow:0 0 8px rgba(79,216,255,.65)!important;
}
#modalBox.winResultModal .mxResultHeadingFormula.mxFormulaS{font-size:.82em!important}
#modalBox.winResultModal .mxResultHeadingFormula.mxFormulaM{font-size:.75em!important}
#modalBox.winResultModal .mxResultHeadingFormula.mxFormulaL{font-size:.66em!important}
#modalBox.winResultModal .mxResultHeadingFormula.mxFormulaXL{font-size:.58em!important}

@media(max-width:390px){
  #goalFor.mxFormulaL{font-size:9.2px!important}
  #goalFor.mxFormulaXL{font-size:8px!important}
  #modalBox.winResultModal .mxResultFormula.mxFormulaL{font-size:10px!important}
  #modalBox.winResultModal .mxResultFormula.mxFormulaXL{font-size:8.7px!important}
}
@media(max-height:690px){
  #goalFor.mxFormulaS{font-size:11px!important}
  #goalFor.mxFormulaM{font-size:10px!important}
  #goalFor.mxFormulaL{font-size:9px!important}
  #goalFor.mxFormulaXL{font-size:7.8px!important}
}


/* ================= MOBILE PLAYABILITY FIX ================= */

/* iOS Safari: manipulation was overriding the board's touch-action:none.
   The puzzle board owns the gesture completely; page scrolling must never steal atom swipes. */
html body #board,
html body #boardFrame canvas#board{
  touch-action:none!important;
  -ms-touch-action:none!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  -webkit-touch-callout:none!important;
}

/* Slightly smaller target card: enough room for Moxy without shrinking gameplay text aggressively. */



/* Moxy: larger and closer to the playable board rim, but never inside a cell hit area. */
#boardFrame>#moxyGameCompanion{
  left:clamp(5px,1.5vw,9px)!important;
  top:clamp(-18px,-2.1vw,-11px)!important;
  width:clamp(66px,16.5vw,82px)!important;
  z-index:108!important;
  overflow:visible!important;
}
@media(max-width:390px){
  #boardFrame>#moxyGameCompanion{
    left:5px!important;
    top:-15px!important;
    width:68px!important;
  }
}
#boardFrame>#moxyGameCompanion.mx-visit-dre,
#boardFrame>#moxyGameCompanion.mx-visit-return,
#boardFrame>#moxyGameCompanion.mxCinemaFocus{
  z-index:118!important;
}

/* Original Moleculox expression symbols must remain readable over HUD/bubbles. */
#mxMoxyExpression{
  z-index:126!important;
  width:58px!important;height:58px!important;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.72)) drop-shadow(0 0 9px rgba(94,229,255,.78))!important;
}
#mxMoxyExpression svg{width:58px!important;height:58px!important}
#mxMoxyExpression.on{opacity:1}

/* During a Dr. E line, keep Moxy optically above the board and never behind the legacy bubble. */
#boardFrame>#moxyGameCompanion.mx-look-dre,
#boardFrame>#moxyGameCompanion.mxCinemaFocus{opacity:1!important;visibility:visible!important}

/* Character bubble stays below expression symbols but above the board. */
#mxCharacterBeatBubble{z-index:122!important}


/* ================= LEVEL TITLE CENTERING ================= */
#hudMid{
  align-items:center!important;
  text-align:center!important;
}
#lvPill{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  margin-inline:auto!important;
  text-align:center!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  line-height:1.12!important;
  padding-inline:4px!important;
  box-sizing:border-box!important;
}
@media(max-width:430px){
  #lvPill{font-size:clamp(14px,4.3vw,17px)!important;letter-spacing:.7px!important}
}
@media(max-width:370px){
  #lvPill{font-size:13.5px!important;letter-spacing:.45px!important}
}

/* ================= RESPONSIVE FRAME CENTERING — R38 =================
   Remove the old native right-bias and center all modal frames from the viewport,
   not from an inner scroll rail. */
#modal{
  box-sizing:border-box!important;
  width:100%!important;
  left:0!important;right:0!important;
  justify-content:center!important;
  padding-left:max(10px,var(--sal))!important;
  padding-right:max(10px,var(--sar))!important;
}
#modalBox{
  position:relative!important;
  left:auto!important;right:auto!important;
  margin-left:auto!important;margin-right:auto!important;
  box-sizing:border-box!important;
  transform-origin:50% 50%!important;
}
body.mxNative #modalBox.accountModal .accountActions,
body.mxNative #modalBox .mrow,
body.mxNative #modalBox.settingsModal .settingsActions{
  margin-left:auto!important;
  margin-right:auto!important;
  width:100%!important;
}
#modalBox>.mxFirstUseHead,
#modalBox>.mxMechanicContextNote,
#modalBox>.mxFirstUseList,
#modalBox>.mrow,
#modalBox>.performanceResult,
#modalBox>.mxSolveTimeResult,
#modalBox>.accountMilestoneInvite{
  box-sizing:border-box!important;
  margin-left:auto!important;
  margin-right:auto!important;
  max-width:100%!important;
}
#modal:has(.mxFirstUseHead) #modalBox{
  width:min(calc(100vw - max(20px,var(--sal)) - max(20px,var(--sar))),430px)!important;
}
.mxFirstUseHead{
  width:100%!important;
  margin-left:auto!important;margin-right:auto!important;
  padding-left:11px!important;padding-right:11px!important;
}
.mxFirstUseList{width:100%!important;padding-left:0!important;padding-right:0!important}
.mxFirstUseRow{width:100%!important;margin-inline:auto!important}
#modal:has(.mxFirstUseHead) #modalBox .mrow{width:100%!important}
@media(max-width:390px){
  #modal{padding-left:max(8px,var(--sal))!important;padding-right:max(8px,var(--sar))!important}
  #modal:has(.mxFirstUseHead) #modalBox{width:min(calc(100vw - max(16px,var(--sal)) - max(16px,var(--sar))),390px)!important}
}

/* ================= RESULT ATOM — RESTORE OLD LIVING MOTION =================
   The formula/name stay fixed; only the atom icon and orbital rings move. */
#modalBox.winResultModal .mxResultMolecule{
  overflow:visible!important;
}
#modalBox.winResultModal .mxResultMolecule::before{
  animation:mxResultOrbitSpin 5.4s linear infinite!important;
}
#modalBox.winResultModal .mxResultMolecule::after{
  animation:mxResultOrbitSpin 6.8s linear infinite reverse!important;
}
#modalBox.winResultModal .mxResultOrbit{
  animation:mxResultCoreSpin 7.2s linear infinite!important;
  transform-origin:50% 50%!important;
}
#modalBox.winResultModal .mxResultFormula,
#modalBox.winResultModal .mxResultName{
  animation:none!important;
}
@media(prefers-reduced-motion:reduce){
  #modalBox.winResultModal .mxResultMolecule::before,
  #modalBox.winResultModal .mxResultMolecule::after,
  #modalBox.winResultModal .mxResultOrbit{animation:none!important}
}

/* ================= PROFESSIONAL BOOT REVEAL — EXISTING ART ONLY ================= */
#bootStage{isolation:isolate!important}
#bootStage::before{
  content:'';position:absolute;inset:-8%;z-index:5;pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle at 30% 28%,rgba(255,217,126,.34),transparent 17%),
    radial-gradient(circle at 55% 52%,rgba(95,213,255,.10),transparent 38%),
    linear-gradient(112deg,transparent 38%,rgba(170,238,255,.14) 49%,transparent 60%);
  mix-blend-mode:screen;
}
#bootStage::after{
  content:'';position:absolute;inset:0;z-index:6;pointer-events:none;
  opacity:0;
  background:linear-gradient(90deg,transparent 0%,rgba(102,225,255,.18) 48%,rgba(255,255,255,.30) 50%,rgba(102,225,255,.14) 52%,transparent 100%);
  transform:translateX(-120%) skewX(-10deg);
  mix-blend-mode:screen;
}
#bootScr.mxBootPower #bootStage::before{animation:mxBootPowerBloom 1.25s ease-out both}
#bootScr.mxBootScan #bootStage::after{animation:mxBootScanSweep .92s cubic-bezier(.2,.72,.2,1) both}
#bootScr.mxBootReveal #bootBg{animation:mxBootImageSettle .86s cubic-bezier(.18,.82,.22,1) both}
#bootScr.mxBootReveal #bootLogoHalo{animation:mxBootHaloProfessional 1.4s ease-out both!important}
#bootScr.mxBootReveal .bootAtomGlow{animation:mxBootAtomWake 1.05s ease-out both!important}
@keyframes mxBootPowerBloom{
  0%{opacity:0;filter:blur(18px);transform:scale(.96)}
  55%{opacity:.78;filter:blur(5px);transform:scale(1.015)}
  100%{opacity:.32;filter:blur(0);transform:scale(1)}
}
@keyframes mxBootScanSweep{
  0%{opacity:0;transform:translateX(-120%) skewX(-10deg)}
  18%{opacity:.78}
  100%{opacity:0;transform:translateX(120%) skewX(-10deg)}
}
@keyframes mxBootImageSettle{
  0%{filter:brightness(.72) saturate(.78) contrast(1.06);transform:scale(1.018)}
  100%{filter:brightness(1) saturate(1) contrast(1);transform:scale(1)}
}
@keyframes mxBootHaloProfessional{
  0%{opacity:0;filter:blur(14px);transform:translate(-50%,-50%) scale(.72)}
  45%{opacity:.88}
  100%{opacity:.46;filter:blur(6px);transform:translate(-50%,-50%) scale(1)}
}
@keyframes mxBootAtomWake{
  0%{opacity:0;filter:blur(10px) brightness(.7)}
  55%{opacity:1;filter:blur(2px) brightness(1.35)}
  100%{opacity:.72;filter:blur(0) brightness(1)}
}
#bootDarkScrim{transition:opacity .85s cubic-bezier(.2,.75,.2,1)!important}
#bootBulbGlow.on{
  animation:mxBulbProfessional .9s cubic-bezier(.18,.8,.2,1) forwards,bulbPulse 3.6s ease-in-out .9s infinite!important;
}
@keyframes mxBulbProfessional{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.52);filter:blur(7px)}
  28%{opacity:.42}
  55%{opacity:1;transform:translate(-50%,-50%) scale(1.14);filter:blur(1px)}
  100%{opacity:.9;transform:translate(-50%,-50%) scale(1);filter:blur(0)}
}
@media(prefers-reduced-motion:reduce){
  #bootStage::before,#bootStage::after,#bootBg,#bootLogoHalo,.bootAtomGlow,#bootBulbGlow.on{animation:none!important}
}


/* ================= RESULT ATOM — ACTUAL GLYPH ROTATION FIX =================
   Previous rule animated .mxResultOrbit itself, whose transform is also used
   for centering. Rotate the visible atom glyph instead; formula/name stay still. */
#modalBox.winResultModal .mxResultOrbit span{
  display:inline-block!important;
  transform-origin:50% 50%!important;
  animation:mxResultAtomGlyphSpin 3.8s linear infinite!important;
  will-change:transform;
}
#modalBox.winResultModal .mxResultMolecule::before{
  animation:mxResultRingA 4.6s linear infinite!important;
}
#modalBox.winResultModal .mxResultMolecule::after{
  animation:mxResultRingB 5.8s linear infinite reverse!important;
}
@keyframes mxResultAtomGlyphSpin{
  from{transform:rotate(0deg) scale(1)}
  50%{transform:rotate(180deg) scale(1.035)}
  to{transform:rotate(360deg) scale(1)}
}
@keyframes mxResultRingA{
  from{transform:rotate(55deg)}
  to{transform:rotate(415deg)}
}
@keyframes mxResultRingB{
  from{transform:rotate(-55deg)}
  to{transform:rotate(305deg)}
}
/* Keep the requested completion animation even when the OS has Reduce Motion;
   it is small, local and does not move the page or UI. */
@media(prefers-reduced-motion:reduce){
  #modalBox.winResultModal .mxResultOrbit span{
    animation:mxResultAtomGlyphSpin 5.4s linear infinite!important;
  }
}


/* ================= COLLECTION TABS ================= */
#collectionTabs.collectionTabs{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;
  width:min(100%,620px);margin:6px auto 8px;padding:0 8px;box-sizing:border-box;
}
.collectionTab{
  min-width:0;border:1px solid rgba(128,138,255,.34);border-radius:12px;
  padding:8px 4px;background:rgba(18,23,61,.86);color:#cbd5ff;
  font:800 clamp(8px,2.2vw,11px)/1.05 inherit;letter-spacing:.02em;
  display:flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap;
}
.collectionTab.on{
  color:#fff;border-color:rgba(95,225,255,.78);
  background:linear-gradient(180deg,rgba(55,107,185,.86),rgba(42,60,139,.90));
  box-shadow:0 0 14px rgba(72,213,255,.16),inset 0 0 10px rgba(112,234,255,.08);
}
.collectionPanel{display:none}
.collectionPanel.on{display:block;animation:mxCollectionPaneIn .18s ease both}
@keyframes mxCollectionPaneIn{from{opacity:.25;transform:translateY(4px)}to{opacity:1;transform:none}}
#collectScr .collectionScroll{padding-top:0!important}
@media(max-width:390px){
  #collectionTabs.collectionTabs{gap:4px;padding:0 5px}
  .collectionTab{padding:7px 2px;font-size:7.7px;gap:2px}
}

/* ================= AAA NEXT-MOLECULE TRANSITION ================= */
#mxNextMoleculeTransition{
  position:fixed;inset:0;z-index:170;display:none;place-items:center;
  pointer-events:none;overflow:hidden;
}
#mxNextMoleculeTransition.on{display:grid}
#mxNextMoleculeTransition .mxNextMolVeil{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 48%,rgba(66,129,200,.20),transparent 34%),
    linear-gradient(180deg,rgba(5,8,24,.72),rgba(4,7,20,.94));
  backdrop-filter:blur(4px);
  opacity:0;animation:mxNextVeilIn .28s ease forwards;
}
#mxNextMoleculeTransition .mxNextMolStage{
  position:relative;z-index:2;width:min(88vw,520px);min-height:250px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:26px 20px 22px;box-sizing:border-box;text-align:center;
  opacity:0;transform:translateY(16px) scale(.965);
  animation:mxNextStageIn .52s .08s cubic-bezier(.16,.9,.22,1) forwards;
}
.mxNextMolOrb{
  position:relative;width:86px;height:86px;margin-bottom:13px;
  display:grid;place-items:center;
}
.mxNextMolOrb>b{
  font-size:42px;line-height:1;color:#dffcff;
  text-shadow:0 0 10px rgba(107,232,255,.95),0 0 28px rgba(132,111,255,.8);
  animation:mxNextAtomTurn 4s linear infinite;
}
.mxNextMolOrb>i{
  position:absolute;inset:12px;border:1.4px solid rgba(128,232,255,.55);
  border-radius:50%;box-shadow:0 0 14px rgba(80,212,255,.12);
}
.mxNextMolOrb>i:nth-child(1){transform:rotate(58deg);animation:mxNextRingA 3.3s linear infinite}
.mxNextMolOrb>i:nth-child(2){transform:rotate(-58deg);animation:mxNextRingB 4.2s linear infinite reverse}
.mxNextMolOrb>i:nth-child(3){inset:19px;border-color:rgba(188,145,255,.42);animation:mxNextRingC 5.1s linear infinite}
.mxNextMolEyebrow{
  font-size:clamp(9px,2.4vw,11px);font-weight:950;letter-spacing:.22em;
  color:#77e9ff;margin-bottom:7px;text-shadow:0 0 10px rgba(75,215,255,.55);
  opacity:0;animation:mxNextTextIn .34s .27s ease forwards;
}
.mxNextMolName{
  max-width:100%;font-size:clamp(28px,8vw,48px);line-height:.98;font-weight:1000;
  letter-spacing:-.025em;color:#fff;text-wrap:balance;
  text-shadow:0 4px 0 rgba(0,0,0,.28),0 0 22px rgba(128,221,255,.30);
  opacity:0;transform:translateY(7px);animation:mxNextTextIn .44s .34s cubic-bezier(.2,.8,.2,1) forwards;
}
.mxNextMolFormula{
  margin-top:8px;padding:4px 11px;border:1px solid rgba(131,224,255,.36);border-radius:999px;
  background:rgba(21,35,70,.62);color:#c6f8ff;font-size:clamp(15px,4.2vw,21px);font-weight:900;
  letter-spacing:.04em;box-shadow:inset 0 0 12px rgba(90,210,255,.06);
  opacity:0;animation:mxNextTextIn .38s .43s ease forwards;
}
.mxNextMolLine{
  width:min(74%,320px);height:1px;margin:15px auto 10px;overflow:visible;background:rgba(255,255,255,.10)
}
.mxNextMolLine>span{
  display:block;width:0;height:100%;margin:auto;background:linear-gradient(90deg,transparent,#79ecff,#c99cff,transparent);
  box-shadow:0 0 9px rgba(111,226,255,.85);animation:mxNextLineGrow .55s .48s ease-out forwards;
}
.mxNextMolLevel{
  max-width:94%;font-size:clamp(10px,2.8vw,13px);font-weight:850;letter-spacing:.08em;
  color:#aab8e8;text-transform:uppercase;opacity:0;animation:mxNextTextIn .34s .57s ease forwards;
}
#mxNextMoleculeTransition.leave .mxNextMolStage{animation:mxNextStageOut .35s ease-in both}
#mxNextMoleculeTransition.leave .mxNextMolVeil{animation:mxNextVeilOut .36s ease-in both}

/* Molecule family gives the transition a subtle identity without new artwork. */
#mxNextMoleculeTransition[data-fx="flame"] .mxNextMolOrb>b{color:#fff2b4;text-shadow:0 0 12px #ffb342,0 0 28px rgba(255,75,32,.75)}
#mxNextMoleculeTransition[data-fx="crys"] .mxNextMolOrb>b{color:#f1ffff;text-shadow:0 0 12px #a9f3ff,0 0 28px rgba(147,139,255,.82)}
#mxNextMoleculeTransition[data-fx="splash"] .mxNextMolOrb>b,
#mxNextMoleculeTransition[data-fx="bub"] .mxNextMolOrb>b{color:#dfffff;text-shadow:0 0 12px #65ddff,0 0 28px rgba(49,143,255,.78)}
#mxNextMoleculeTransition[data-fx="spark"] .mxNextMolOrb>b{color:#f5ffd1;text-shadow:0 0 12px #c8ff63,0 0 28px rgba(100,231,77,.72)}

@keyframes mxNextVeilIn{to{opacity:1}}
@keyframes mxNextVeilOut{from{opacity:1}to{opacity:0}}
@keyframes mxNextStageIn{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes mxNextStageOut{to{opacity:0;transform:translateY(-10px) scale(.985)}}
@keyframes mxNextTextIn{to{opacity:1;transform:translateY(0)}}
@keyframes mxNextLineGrow{to{width:100%}}
@keyframes mxNextAtomTurn{to{transform:rotate(360deg)}}
@keyframes mxNextRingA{to{transform:rotate(418deg)}}
@keyframes mxNextRingB{to{transform:rotate(302deg)}}
@keyframes mxNextRingC{to{transform:rotate(360deg)}}

@media(max-height:700px){
  #mxNextMoleculeTransition .mxNextMolStage{min-height:210px;padding:18px 16px}
  .mxNextMolOrb{width:68px;height:68px;margin-bottom:8px}
  .mxNextMolOrb>b{font-size:34px}
  .mxNextMolName{font-size:clamp(24px,6.7vw,38px)}
}
body.mxReduceMotion #mxNextMoleculeTransition *{animation:none!important}


/* ================= DR. E-ONLY GAMEPLAY ================= */
#moxyGameCompanion,#mxMoxyExpression,#mxCharacterBeatBubble.fromMoxy{display:none!important}

/* Restore the pre-Moxy target-card sizing behavior. The original responsive
   rules above remain authoritative for smaller phones. */


/* ================= GOAL CARD RESTORED TO PRE-MOXY LAYOUT ================= */
#goalCard{
  width:122px!important;min-width:122px!important;
  padding:8px 7px 9px!important;gap:2px!important;
  border-radius:var(--radius,18px);
}
#goalCard .gt{font-size:10.5px!important;letter-spacing:2.5px!important}
#goalCv{width:100px!important;height:76px!important}
#goalName{font-size:12.5px!important;line-height:1.1!important}
#goalFor.mxFormulaS{font-size:13px!important}
#goalFor.mxFormulaM{font-size:11.5px!important}
#goalFor.mxFormulaL{font-size:10px!important}
#goalFor.mxFormulaXL{font-size:8.8px!important}
@media(max-width:520px){
  #goalCard{width:108px!important;min-width:108px!important;padding:6px!important}
  #goalCv{width:88px!important;height:65px!important}
  #goalName{font-size:10.5px!important}
}
@media(max-width:390px){
  #goalCard{width:96px!important;min-width:96px!important}
  #goalCv{width:76px!important;height:56px!important}
}


/* ================= QA STAGE 5 · CROSS-PLATFORM UI RHYTHM =================
   One geometry system for Web, iOS WKWebView and Android WebView. */
:root{
  --mx-edge:clamp(8px,2.6vw,16px);
  --mx-control-h:clamp(38px,5.5vh,44px);
  --mx-control-r:clamp(10px,2.8vw,14px);
  --mx-control-pad-x:clamp(10px,3.1vw,15px);
}
.btn{
  box-sizing:border-box!important;
  min-height:var(--mx-control-h);
  padding:clamp(8px,1.25vh,11px) var(--mx-control-pad-x)!important;
  border-radius:var(--mx-control-r)!important;
  line-height:1.12!important;
  text-align:center!important;
  overflow-wrap:anywhere;
  text-wrap:balance;
}
button,.btn,input,select{box-sizing:border-box}
.mrow{
  width:100%!important;
  box-sizing:border-box!important;
  margin-left:auto!important;margin-right:auto!important;
  padding-left:0!important;padding-right:0!important;
}
.mrow>.btn{flex:1 1 0;min-width:0}
.accountActions,.settingsActions,.accountUtilityRow{
  width:100%!important;box-sizing:border-box!important;
  margin-left:auto!important;margin-right:auto!important;
}
body.mxNative #modalBox.accountModal .accountActions,
body.mxNative #modalBox .mrow,
body.mxNative #modalBox.settingsModal .settingsActions{
  margin-left:auto!important;margin-right:auto!important;width:100%!important;
}

/* Modal frames are centered from the viewport on Web/Android/iOS. */
#modal{
  padding-left:max(var(--mx-edge),env(safe-area-inset-left,0px))!important;
  padding-right:max(var(--mx-edge),env(safe-area-inset-right,0px))!important;
  padding-top:max(8px,env(safe-area-inset-top,0px))!important;
  padding-bottom:max(8px,env(safe-area-inset-bottom,0px))!important;
  box-sizing:border-box!important;
}
#modalBox{
  box-sizing:border-box!important;
  max-width:min(94vw,520px);
  max-height:min(94dvh,820px);
  margin-inline:auto!important;
  border-width:1px!important;
  overflow-x:hidden!important;
}
#modalBox.accountModal{
  width:min(calc(100vw - 2*var(--mx-edge)),410px)!important;
  max-height:calc(100dvh - max(16px,env(safe-area-inset-top,0px)) - max(16px,env(safe-area-inset-bottom,0px)))!important;
  padding:clamp(14px,3.6vw,20px)!important;
  padding-top:clamp(16px,4vw,22px)!important;
  overflow-x:hidden!important;
}
#modalBox.accountModal h3{
  padding-inline:34px!important;
  margin-top:0!important;
  text-wrap:balance;
}

/* Account/profile X: fully inset, complete border, finger-safe on all platforms. */
#modalBox .accountCloseX{
  position:absolute!important;
  top:clamp(8px,2.2vw,12px)!important;
  right:clamp(8px,2.2vw,12px)!important;
  left:auto!important;
  width:clamp(36px,9.5vw,40px)!important;
  height:clamp(36px,9.5vw,40px)!important;
  min-width:36px!important;min-height:36px!important;
  padding:0!important;margin:0!important;
  display:grid!important;place-items:center!important;
  border:1.5px solid rgba(190,211,255,.52)!important;
  border-radius:50%!important;
  background:linear-gradient(180deg,rgba(35,44,83,.96),rgba(14,19,48,.96))!important;
  color:#eef4ff!important;
  font:800 24px/1 system-ui,sans-serif!important;
  box-shadow:0 3px 12px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.05)!important;
  z-index:20!important;
  transform:none!important;
}
#modalBox .accountCloseX:active{transform:scale(.94)!important}

/* Long localized labels must shrink before they overflow borders. */
#modalBox .btn,#collectScr .btn,#levelsScr .btn,#labScr .btn,#hofScr .btn{
  font-size:clamp(10.5px,3vw,14px);
}
@media(max-width:380px), (max-height:690px){
  :root{--mx-control-h:36px;--mx-control-pad-x:8px}
  #modalBox.accountModal{padding:11px!important;padding-top:13px!important}
  #modalBox.accountModal h3{font-size:16px!important;padding-inline:31px!important}
  #modalBox .btn{font-size:10.5px!important;padding-block:7px!important}
}
@media(min-width:700px) and (pointer:fine){
  :root{--mx-control-h:40px;--mx-control-pad-x:14px}
  #modalBox.accountModal{width:min(88vw,430px)!important}
  #modalBox .accountCloseX{width:36px!important;height:36px!important;font-size:21px!important}
}
@media(pointer:coarse){
  button,.btn,.iconBadge,.accountCloseX{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
}

/* ================= DR. E · CINEMATIC POSE TRANSITIONS ================= */
#einBoxG{isolation:isolate;overflow:visible}
#einBoxG .einImg{transform-origin:52% 86%;will-change:transform,opacity,filter}
#einBoxG .mxDrEPoseGhost{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  object-fit:contain!important;pointer-events:none!important;opacity:0;z-index:3!important;
}
#einBoxG .einImg:not(.mxDrEPoseGhost){position:relative;z-index:4}
#einBoxG .mxPoseIncoming{opacity:.08}
#einBoxG .mxPoseIncoming.mxPoseIncomingOn{opacity:1;transition:opacity .24s ease,transform .34s cubic-bezier(.18,.88,.2,1),filter .28s ease}
#einBoxG .mxPoseGhostOn{opacity:1}
#einBoxG .mxPoseGhostOut{opacity:0!important;transition:opacity .25s ease,transform .32s ease,filter .27s ease}

/* Each type has a different physical intention rather than one generic fade. */
#einBoxG .mxPoseIncoming.mxPose-focus{transform:translateY(3px) scale(.985);filter:brightness(.92) blur(.3px)}
#einBoxG .mxPoseIncomingOn.mxPose-focus{transform:translateY(0) scale(1);filter:none}
#einBoxG .mxPoseGhostOn.mxPose-focus{transform:translateY(0) scale(1)}
#einBoxG .mxPoseGhostOut.mxPose-focus{transform:translateY(-2px) scale(1.018);filter:blur(.7px)}

#einBoxG .mxPoseIncoming.mxPose-lift{transform:translateY(8px) scale(.97);filter:brightness(.92)}
#einBoxG .mxPoseIncomingOn.mxPose-lift{transform:translateY(-1px) scale(1.015);filter:none}
#einBoxG .mxPoseGhostOut.mxPose-lift{transform:translateY(-8px) scale(1.025)}

#einBoxG .mxPoseIncoming.mxPose-snap{transform:translateX(5px) rotate(1.1deg) scale(.99);filter:contrast(.95)}
#einBoxG .mxPoseIncomingOn.mxPose-snap{transform:none;filter:none}
#einBoxG .mxPoseGhostOut.mxPose-snap{transform:translateX(-5px) rotate(-.8deg) scale(.99)}

#einBoxG .mxPoseIncoming.mxPose-lab{transform:translateY(3px) rotate(-.7deg) scale(.98);filter:brightness(.88) saturate(.9)}
#einBoxG .mxPoseIncomingOn.mxPose-lab{transform:none;filter:none}
#einBoxG .mxPoseGhostOut.mxPose-lab{transform:translateY(-3px) rotate(.7deg);filter:brightness(1.08)}

#einBoxG .mxPoseIncoming.mxPose-enter{transform:translateY(5px) scale(.98);filter:blur(.45px)}
#einBoxG .mxPoseIncomingOn.mxPose-enter{transform:none;filter:none}
#einBoxG .mxPoseGhostOut.mxPose-enter{transform:scale(1.015);filter:blur(.6px)}
#einBoxG .mxPoseIncoming.mxPose-cross{transform:scale(.985);filter:blur(.35px)}
#einBoxG .mxPoseIncomingOn.mxPose-cross{transform:scale(1);filter:none}

#einBoxG.mxDrETransitionFocus::after,
#einBoxG.mxDrETransitionLab::after,
#einBoxG.mxDrETransitionLift::after{
  content:'';position:absolute;left:18%;right:18%;bottom:4%;height:18%;
  border-radius:50%;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse,rgba(102,226,255,.20),transparent 68%);
  animation:mxDrEPoseFloorGlow .42s ease-out both;
}
#einBoxG.mxDrETransitionLift::after{background:radial-gradient(ellipse,rgba(255,222,111,.20),transparent 68%)}
@keyframes mxDrEPoseFloorGlow{0%{opacity:0;transform:scale(.7)}45%{opacity:1}100%{opacity:0;transform:scale(1.14)}}
body.mxReduceMotion #einBoxG .mxDrEPoseGhost{display:none!important}
body.mxReduceMotion #einBoxG .einImg{transition:none!important;animation:none!important}


/* ================= HOTFIX · RESULT/TIMER TRUE CENTER ================= */
#duelTimer.countup{
  width:max-content!important;
  min-width:112px!important;
  margin-inline:auto!important;
  justify-content:center!important;
  text-align:center!important;
}
.mxSolveTimeResult{
  grid-template-columns:auto!important;
  justify-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  gap:3px!important;
}
.mxSolveTimeResult b{
  grid-row:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  width:100%!important;
}
.mxSolveTimeResult .mxSolveMeta{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
}
.mxSolveTimeResult em{text-align:center!important;width:100%!important}

/* ================= HOTFIX · RESTORE ORIGINAL COMPACT GAME CONTROLS =================
   QA5's global button rhythm remains for dialogs/account screens only. */
#gameScr #actionCol .btn.iconBadge{
  width:58px!important;
  height:68px!important;
  min-width:58px!important;
  min-height:68px!important;
  padding:7px 4px 6px!important;
  border-radius:16px!important;
  flex:none!important;
}
#gameScr #actionCol .btn.iconBadge .badgeIcon{
  width:28px!important;height:28px!important;padding:3px!important;
}
#gameScr #actionCol .btn.iconBadge small{
  font-size:8px!important;line-height:1!important;letter-spacing:.55px!important;
}
#gameScr #actionCol{gap:8px!important}

/* Bottom LAB / MOLECULES / AWARDS return to their old compact geometry. */
#gameScr #navBtns .navB{
  width:52px!important;height:64px!important;
  min-width:52px!important;min-height:64px!important;
  padding:7px 3px 6px!important;
  border-radius:15px!important;
  flex:none!important;
}
#gameScr #navBtns .navB .badgeIcon{width:27px!important;height:27px!important}
#gameScr #navBtns .navB small{
  font-size:7.3px!important;line-height:1.05!important;letter-spacing:.2px!important;
}
@media(max-width:390px),(max-height:700px){
  #gameScr #actionCol .btn.iconBadge{
    width:54px!important;height:63px!important;min-width:54px!important;min-height:63px!important;
  }
  #gameScr #actionCol .btn.iconBadge .badgeIcon{width:25px!important;height:25px!important}
  #gameScr #navBtns .navB{
    width:46px!important;height:57px!important;min-width:46px!important;min-height:57px!important;
    padding:6px 2px 5px!important;
  }
  #gameScr #navBtns .navB .badgeIcon{width:24px!important;height:24px!important}
}

/* ================= HOTFIX · SINGLE AAA LEVEL ENTRY ================= */
#levelTransition{
  overflow:hidden!important;
  background:
    radial-gradient(circle at 50% 47%,rgba(66,38,138,.72),transparent 34%),
    radial-gradient(circle at 50% 45%,rgba(18,16,54,.96),rgba(5,6,18,.995) 72%)!important;
}
#levelTransition .mxLevelEntryEnergy{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
}
#levelTransition .mxLevelEntryEnergy i{
  position:absolute;width:54vw;height:54vw;max-width:430px;max-height:430px;
  border:1px solid rgba(110,225,255,.16);border-radius:50%;
  box-shadow:0 0 40px rgba(83,123,255,.08);
  opacity:0;transform:scale(.45);
}
#levelTransition.on .mxLevelEntryEnergy i:nth-child(1){animation:mxEntryEnergy 1.05s ease-out .02s both}
#levelTransition.on .mxLevelEntryEnergy i:nth-child(2){animation:mxEntryEnergy 1.05s ease-out .12s both}
#levelTransition.on .mxLevelEntryEnergy i:nth-child(3){animation:mxEntryEnergy 1.05s ease-out .22s both}

#levelTransition .mxLevelEntryCard{
  position:relative!important;
  min-width:min(78vw,310px)!important;
  max-width:min(86vw,360px)!important;
  padding:16px 22px 18px!important;
  border-radius:24px!important;
  border:1px solid rgba(128,228,255,.52)!important;
  background:
    linear-gradient(145deg,rgba(17,27,68,.92),rgba(43,21,83,.91))!important;
  box-shadow:
    0 22px 70px rgba(0,0,0,.56),
    0 0 42px rgba(91,116,255,.16),
    inset 0 0 0 1px rgba(255,255,255,.06)!important;
}
#levelTransition .mxLevelEntryCard>small{
  display:block;color:#81ecff;font-size:9px;font-weight:1000;
  letter-spacing:.24em;margin-bottom:4px;
}
.mxLevelEntryNo{display:flex;align-items:baseline;justify-content:center;gap:7px}
.mxLevelEntryNo span{font-size:9px;font-weight:900;letter-spacing:.19em;color:#aab6dd}
.mxLevelEntryNo strong{font-size:36px;line-height:1;font-weight:1000;color:#fff;text-shadow:0 0 18px rgba(117,224,255,.32)}
#levelTransition .mxLevelEntryAtom{
  margin:8px auto 6px;width:52px;height:52px;display:grid;place-items:center;
  font-size:29px;color:#e8fcff;border-radius:50%;
  border:1px solid rgba(123,230,255,.44);
  box-shadow:0 0 20px rgba(89,218,255,.22),inset 0 0 18px rgba(117,90,255,.14);
}
#levelTransition.on .mxLevelEntryAtom{animation:mxEntryAtom .72s cubic-bezier(.2,.86,.22,1) both}
#levelTransition .mxLevelEntryCard>b{
  display:block;font-size:clamp(19px,5.8vw,27px);line-height:1.02;
  color:#fff;text-wrap:balance;letter-spacing:.02em;
}
#levelTransition .mxLevelEntryCard>em{
  display:inline-block;margin-top:6px;padding:3px 10px;border-radius:999px;
  font-style:normal;font-weight:950;font-size:13px;color:#ffe17a;
  border:1px solid rgba(255,223,114,.28);background:rgba(255,209,71,.06);
}
.mxLevelEntryBeam{
  height:1px;width:0;margin:11px auto 0;
  background:linear-gradient(90deg,transparent,#65e7ff,#c48bff,transparent);
  box-shadow:0 0 8px rgba(97,227,255,.7);
}
#levelTransition.on .mxLevelEntryBeam{animation:mxEntryBeam .48s .2s ease-out forwards}
#levelTransition.mxOut{opacity:0!important;transition:opacity .22s ease!important}

@keyframes mxEntryEnergy{
  0%{opacity:0;transform:scale(.45)}
  35%{opacity:.65}
  100%{opacity:0;transform:scale(1.3)}
}
@keyframes mxEntryAtom{
  0%{opacity:0;transform:scale(.45) rotate(-25deg);filter:blur(2px)}
  60%{opacity:1;transform:scale(1.08) rotate(8deg);filter:none}
  100%{opacity:1;transform:scale(1) rotate(0)}
}
@keyframes mxEntryBeam{to{width:82%}}
@media(prefers-reduced-motion:reduce){
  #levelTransition .mxLevelEntryEnergy{display:none!important}
  #levelTransition .mxLevelEntryAtom,#levelTransition .mxLevelEntryBeam{animation:none!important}
  #levelTransition .mxLevelEntryBeam{width:82%!important}
}


/* ================= MODAL CENTER + FULL BORDER HOTFIX =================
   Applies to Web, iOS Safari/WKWebView and Android WebView. */
#modal{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  width:100%!important;
  height:100dvh!important;
  inset:0!important;
  padding:
    max(12px,env(safe-area-inset-top,0px))
    max(14px,env(safe-area-inset-right,0px))
    max(12px,env(safe-area-inset-bottom,0px))
    max(14px,env(safe-area-inset-left,0px))!important;
  overflow:hidden!important;
}
#modalBox{
  position:relative!important;
  left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  transform:none!important;
  margin:auto!important;
  width:min(100%,520px)!important;
  max-width:520px!important;
  max-height:calc(100dvh - max(24px,env(safe-area-inset-top,0px)) - max(24px,env(safe-area-inset-bottom,0px)))!important;
  box-sizing:border-box!important;
  border:1.5px solid rgba(135,119,229,.68)!important;
  border-radius:22px!important;
  overflow-x:hidden!important;
  background-clip:padding-box!important;
}
#modalBox>*{box-sizing:border-box!important}
#modalBox input,
#modalBox select,
#modalBox textarea,
#modalBox .btn,
#modalBox .mrow{
  max-width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}
#modalBox input{
  width:100%!important;
  text-align:center!important;
  padding-left:14px!important;
  padding-right:14px!important;
}
#modalBox .mrow{
  width:100%!important;
  display:flex!important;
  justify-content:center!important;
  gap:10px!important;
}
#modalBox .mrow>.btn{
  min-width:0!important;
  flex:1 1 0!important;
}
#modalBox.accountModal{
  width:min(100%,410px)!important;
  margin:auto!important;
  border:1.5px solid rgba(135,119,229,.68)!important;
}
#modalBox .accountCloseX{
  top:10px!important;
  right:10px!important;
  left:auto!important;
  transform:none!important;
}

/* Name/profile creation dialog: balanced visual rhythm. */
#modalBox:has(input[type="text"]),
#modalBox:has(input:not([type])){
  padding-left:18px!important;
  padding-right:18px!important;
}
#modalBox:has(input[type="text"]) h3,
#modalBox:has(input:not([type])) h3{
  text-align:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
#modalBox:has(input[type="text"]) .msub,
#modalBox:has(input:not([type])) .msub{
  text-align:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Keyboard-open viewport: keep the dialog inside the visible viewport rather than clipping borders. */
@media(max-height:650px){
  #modal{
    align-items:flex-start!important;
    overflow-y:auto!important;
    padding-top:max(8px,env(safe-area-inset-top,0px))!important;
    padding-bottom:max(8px,env(safe-area-inset-bottom,0px))!important;
  }
  #modalBox{
    margin-top:8px!important;
    margin-bottom:8px!important;
    max-height:none!important;
  }
}

/* Keep the result screen and gameplay controls on their pre-QA5 compact sizing. */
#modalBox.winResultModal .btn{
  min-height:unset!important;
}


/* ================= NEXT LEVEL HARD FIX ================= */
/* Legacy reveal is retired from gameplay navigation. */
#mxNextMoleculeTransition{display:none!important;pointer-events:none!important}

/* New entry reveal sits over an already-loaded level, so it can never block progress. */
#levelTransition{
  pointer-events:none!important;
  overflow:hidden!important;
}
#levelTransition .mxLevelEntryCard{
  min-width:min(76vw,300px)!important;
  padding:15px 22px 17px!important;
}
#levelTransition .mxLevelEntryCard small{
  display:block!important;
  margin-bottom:1px!important;
  color:#7be8ff!important;
  letter-spacing:.22em!important;
  font-size:9px!important;
  font-weight:950!important;
}
#levelTransition .mxLevelEntryCard strong{
  display:block!important;
  font-size:38px!important;
  line-height:1!important;
  color:#fff!important;
}
#levelTransition .mxEntryAtom{
  width:48px;height:48px;margin:7px auto 5px;
  display:grid;place-items:center;border-radius:50%;
  font-size:27px;color:#eaffff;
  border:1px solid rgba(118,230,255,.42);
  box-shadow:0 0 18px rgba(85,217,255,.25),inset 0 0 14px rgba(142,103,255,.12);
}
#levelTransition.on .mxEntryAtom{animation:mxHardEntryAtom .58s cubic-bezier(.18,.88,.22,1) both}
#levelTransition .mxLevelEntryCard b{
  display:block!important;
  font-size:clamp(19px,5.7vw,27px)!important;
  line-height:1.02!important;
  text-wrap:balance!important;
}
#levelTransition .mxLevelEntryCard em{
  display:inline-block!important;
  margin-top:5px!important;
  color:#ffe376!important;
  font-style:normal!important;
  font-size:13px!important;
  font-weight:950!important;
}
@keyframes mxHardEntryAtom{
  0%{opacity:0;transform:scale(.45) rotate(-30deg)}
  60%{opacity:1;transform:scale(1.08) rotate(8deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}


/* ================= UI RESTORE · USER REQUEST ================= */

/* A) Restart confirmation: restore the compact pre-QA5 dialog. */
#modal:has(#mRestartYes) #modalBox{
  width:min(86vw,340px)!important;
  max-width:340px!important;
  padding:22px 18px 18px!important;
  border-radius:20px!important;
  margin:auto!important;
}
#modal:has(#mRestartYes) #modalBox h3{
  font-size:22px!important;
  line-height:1.15!important;
  margin:0 0 4px!important;
  letter-spacing:1px!important;
}
#modal:has(#mRestartYes) #modalBox .msub{
  font-size:13.5px!important;
  line-height:1.32!important;
  margin:0 0 10px!important;
}
#modal:has(#mRestartYes) #modalBox .mrow{
  display:flex!important;
  flex-direction:column!important;
  width:100%!important;
  gap:10px!important;
  margin-top:8px!important;
}
#modal:has(#mRestartYes) #modalBox .btn{
  width:100%!important;
  min-height:0!important;
  padding:14px 10px!important;
  font-size:16px!important;
  line-height:1.1!important;
  border-radius:12px!important;
}

/* Player delete uses the same compact dialog rhythm. */
#modal:has(#mDelYes) #modalBox{
  width:min(86vw,340px)!important;
  max-width:340px!important;
  padding:22px 18px 18px!important;
}
#modal:has(#mDelYes) #modalBox h3{font-size:22px!important;line-height:1.15!important}
#modal:has(#mDelYes) #modalBox .msub{font-size:13.5px!important;line-height:1.35!important}
#modal:has(#mDelYes) #modalBox .mrow{
  display:flex!important;flex-direction:column!important;gap:10px!important;width:100%!important;
}
#modal:has(#mDelYes) #modalBox .btn{
  width:100%!important;min-height:0!important;padding:14px 10px!important;font-size:15px!important;
}

/* B) "KİM OYNUYOR?" screen: exactly restore compact card text/layout despite global .btn rules. */
#profileScr #profileWrap{
  width:min(86vw,340px)!important;
  margin:auto!important;
  text-align:center!important;
  display:flex!important;
  flex-direction:column!important;
  gap:14px!important;
  max-height:80vh!important;
  padding-top:calc(var(--sat) + 6vh)!important;
}
#profileScr #profileTop{
  font-size:14px!important;font-weight:800!important;letter-spacing:4px!important;text-align:center!important;
}
#profileScr #profileTitle{
  font-size:26px!important;font-weight:900!important;margin-bottom:4px!important;text-align:center!important;
}
#profileScr .profileRow{
  display:flex!important;align-items:stretch!important;gap:8px!important;width:100%!important;
}
#profileScr .profileBtn{
  flex:1 1 auto!important;
  width:auto!important;
  min-width:0!important;
  min-height:0!important;
  padding:15px 18px!important;
  border-radius:14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  text-align:left!important;
}
#profileScr .profileIdentity{
  display:flex!important;align-items:center!important;gap:10px!important;min-width:0!important;
}
#profileScr .profileAvatar{
  flex:0 0 34px!important;width:34px!important;height:34px!important;
}
#profileScr .profileTexts{
  display:flex!important;flex-direction:column!important;align-items:flex-start!important;
  justify-content:center!important;min-width:0!important;text-align:left!important;
}
#profileScr .profileTexts strong{
  font-size:14px!important;line-height:1.1!important;max-width:160px!important;
  overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
}
#profileScr .profileTexts small{
  margin-top:2px!important;font-size:13px!important;line-height:1.15!important;
  white-space:nowrap!important;text-align:left!important;
}
#profileScr .profileDel{
  flex:0 0 52px!important;width:52px!important;min-width:52px!important;
  padding:0!important;margin:0!important;border-radius:14px!important;
}
#profileScr #profileBack{
  margin-top:2px!important;min-height:0!important;padding:13px!important;
  font-size:14px!important;border-radius:14px!important;
}

/* C) First-use mechanic briefing: freeze all frames in one coordinate system.
   This prevents borders from sliding/clipping during Dr. E/UI transitions. */
#modal:has(.mxFirstUseHead){
  align-items:center!important;
  justify-content:center!important;
}
#modal:has(.mxFirstUseHead) #modalBox{
  width:min(calc(100vw - max(28px,var(--sal)) - max(28px,var(--sar))),430px)!important;
  max-width:430px!important;
  padding:14px 13px 13px!important;
  overflow:hidden!important;
  border:1.5px solid rgba(135,119,229,.68)!important;
  border-radius:22px!important;
  transform:none!important;
  margin:auto!important;
}
#modal:has(.mxFirstUseHead) #modalBox>.mxFirstUseHead,
#modal:has(.mxFirstUseHead) #modalBox>.mxMechanicContextNote,
#modal:has(.mxFirstUseHead) #modalBox>.mxFirstUseList,
#modal:has(.mxFirstUseHead) #modalBox>.mrow{
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  box-sizing:border-box!important;
  transform:none!important;
}
#modal:has(.mxFirstUseHead) .mxFirstUseHead{
  margin:0 0 10px!important;
  padding:10px 11px!important;
  border:1px solid rgba(120,231,255,.30)!important;
  border-radius:18px!important;
  overflow:hidden!important;
  animation:none!important;
}
#modal:has(.mxFirstUseHead) .mxMechanicContextNote{
  margin:10px 0 13px!important;
  border:1px solid rgba(255,211,110,.34)!important;
  border-radius:15px!important;
  overflow:hidden!important;
}
#modal:has(.mxFirstUseHead) .mxFirstUseList{
  padding:2px 2px 4px!important;
  overflow-x:hidden!important;
}
#modal:has(.mxFirstUseHead) .mxFirstUseRow{
  width:100%!important;
  margin:0!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:14px!important;
  transform:none!important;
  animation:none!important;
}
#modal:has(.mxFirstUseHead) #modalBox .mrow{
  gap:7px!important;margin-top:6px!important;
}
#modal:has(.mxFirstUseHead) #modalBox .btn{
  min-height:0!important;
  padding:10px 8px!important;
  font-size:13px!important;
  line-height:1.12!important;
}

/* Small phones: same design, merely tighter — no horizontal movement. */
@media(max-width:390px){
  #modal:has(.mxFirstUseHead) #modalBox{
    width:calc(100vw - max(24px,var(--sal)) - max(24px,var(--sar)))!important;
    padding:12px 11px!important;
  }
  #modal:has(.mxFirstUseHead) .mxFirstUseHead{
    grid-template-columns:70px minmax(0,1fr)!important;
  }
  #profileScr #profileWrap{width:min(88vw,330px)!important}
  #profileScr .profileBtn{padding:13px 14px!important}
  #profileScr .profileTexts strong{max-width:130px!important}
  #profileScr .profileTexts small{font-size:11.5px!important}
  #profileScr .profileDel{flex-basis:48px!important;width:48px!important;min-width:48px!important}
}


/* ================= OLD ICONS · UI SIZE RESTORE ================= */
/* First-use rule card: keep the clean layout, use the original game icons. */
#modal:has(.mxFirstUseHead) #modalBox{
  width:min(92vw,430px)!important;
  max-width:430px!important;
  max-height:min(90dvh,720px)!important;
  padding:14px 13px 13px!important;
  overflow:hidden!important;
  border-radius:22px!important;
}
#modal:has(.mxFirstUseHead) .mxFirstUseHead{
  display:grid!important;
  grid-template-columns:84px minmax(0,1fr)!important;
  gap:12px!important;
  align-items:end!important;
  width:100%!important;
  margin:-6px -4px 10px!important;
  padding:10px 11px!important;
  border:1px solid rgba(120,231,255,.30)!important;
  border-radius:18px!important;
  text-align:left!important;
}
#modal:has(.mxFirstUseHead) .mxFirstUseHead img{
  width:84px!important;height:94px!important;object-fit:contain!important;object-position:center bottom!important;
}
#modal:has(.mxFirstUseHead) .mxFirstUseList{
  width:100%!important;max-height:min(40dvh,310px)!important;
  display:flex!important;flex-direction:column!important;gap:8px!important;
  overflow-y:auto!important;overflow-x:hidden!important;padding:2px 2px 4px!important;
}
#modal:has(.mxFirstUseHead) .mxFirstUseRow{
  display:grid!important;grid-template-columns:46px minmax(0,1fr)!important;
  gap:10px!important;align-items:center!important;
  width:100%!important;padding:10px 11px!important;margin:0!important;
  border:1px solid rgba(255,255,255,.12)!important;border-radius:14px!important;
}
#modal:has(.mxFirstUseHead) .mxFirstUseIcon{
  width:42px!important;height:42px!important;display:grid!important;place-items:center!important;
  font-size:22px!important;border:1px solid rgba(120,231,255,.30)!important;
  border-radius:12px!important;background:rgba(10,24,52,.72)!important;
}
#modal:has(.mxFirstUseHead) #modalBox>.mrow{
  display:flex!important;flex-direction:column!important;gap:10px!important;
  width:100%!important;margin:9px 0 0!important;
}
#modal:has(.mxFirstUseHead) #modalBox>.mrow .btn{
  width:100%!important;min-height:46px!important;
  padding:11px 10px!important;font-size:14px!important;line-height:1.1!important;margin:0!important;
}

/* Restart confirm: retain the larger readable proportions requested. */
#modal:has(#mRestartYes) #modalBox{
  width:min(88vw,365px)!important;max-width:365px!important;
  padding:24px 20px 20px!important;border-radius:22px!important;
}
#modal:has(#mRestartYes) #modalBox h3{
  font-size:24px!important;line-height:1.12!important;margin:0 0 7px!important;
}
#modal:has(#mRestartYes) #modalBox .msub{
  font-size:14.5px!important;line-height:1.38!important;margin:0 0 14px!important;
}
#modal:has(#mRestartYes) #modalBox .mrow{
  display:flex!important;flex-direction:column!important;gap:12px!important;width:100%!important;margin:0!important;
}
#modal:has(#mRestartYes) #modalBox .btn{
  width:100%!important;min-height:49px!important;padding:13px 12px!important;
  font-size:17px!important;line-height:1.05!important;border-radius:14px!important;
}


/* ================= MOLECULOX PRODUCTION PNG ICON TRIAL ================= */
.mxProdIcon{
  display:block!important;
  width:100%!important;height:100%!important;
  object-fit:contain!important;object-position:center!important;
  background:transparent!important;border:0!important;
  box-shadow:none!important;filter:none!important;
  user-select:none!important;-webkit-user-drag:none!important;
}
.mxProdSupportTitle{
  display:flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;
}
.mxProdSupportTitle>.mxProdIcon{width:34px!important;height:34px!important;flex:0 0 34px!important}
.mxDrETrainingAvatar{
  width:46px!important;height:46px!important;flex:0 0 46px!important;
  padding:3px!important;overflow:hidden!important;
}
.mxDrETrainingAvatar>.mxProdIcon{width:100%!important;height:100%!important}
.mxDrETrainingArrow{
  width:32px!important;height:32px!important;display:grid!important;place-items:center!important;
}
.mxDrETrainingArrow>.mxProdIcon{width:30px!important;height:30px!important}
.mxProdDemoCell{
  width:48px!important;height:46px!important;flex:0 0 48px!important;
  padding:4px!important;border-radius:12px!important;
  display:grid!important;place-items:center!important;
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(121,223,255,.16)!important;
}
.mxProdDemoCell>.mxProdIcon{width:38px!important;height:38px!important}
.mxProdDemoArrow{
  width:25px!important;height:25px!important;flex:0 0 25px!important;
  display:grid!important;place-items:center!important;opacity:.8!important;
}
.mxProdDemoArrow>.mxProdIcon{width:23px!important;height:23px!important}
#mSupportTry{
  display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;
}
#mSupportTry>.mxProdIcon{width:20px!important;height:20px!important;flex:0 0 20px!important}
.mxProdRestartTitle{
  display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;
}
.mxProdRestartTitle>.mxProdIcon{width:32px!important;height:32px!important;flex:0 0 32px!important}
@media(max-width:390px){
  .mxProdDemoCell{width:43px!important;height:42px!important;flex-basis:43px!important}
  .mxProdDemoCell>.mxProdIcon{width:34px!important;height:34px!important}
  .mxDrETrainingAvatar{width:42px!important;height:42px!important;flex-basis:42px!important}
}


/* ================= MODAL RHYTHM + DR. E SUPPORT FIX ================= */
/* A consistent spacing system for all modal/card stacks without changing gameplay geometry. */
#modalBox{
  --mx-modal-gap:12px;
}
#modalBox .modalScroll{
  box-sizing:border-box!important;
}
#modalBox .modalScroll>*+*{
  margin-top:var(--mx-modal-gap);
}
#modalBox .modalScroll>h3,
#modalBox .modalScroll>.msub{
  margin-left:auto!important;
  margin-right:auto!important;
}
#modalBox .mrow{
  gap:12px!important;
}
#modalBox .mrow+.mrow{
  margin-top:12px!important;
}
#modalBox .btn{
  box-sizing:border-box!important;
}
#modalBox .btn+.btn{
  margin-left:0!important;
}

/* Player Support Dr. E card — the missing layout that caused image/text overlap. */
.mxDrETrainingCard{
  display:grid!important;
  grid-template-columns:64px minmax(0,1fr) 34px!important;
  align-items:center!important;
  gap:12px!important;
  width:100%!important;
  box-sizing:border-box!important;
  margin:16px 0!important;
  padding:13px 14px!important;
  border-radius:18px!important;
  border:1px solid rgba(120,231,255,.34)!important;
  background:linear-gradient(135deg,rgba(37,69,98,.66),rgba(27,25,64,.74))!important;
  overflow:hidden!important;
}
.mxDrETrainingAvatar{
  width:60px!important;
  height:64px!important;
  min-width:60px!important;
  padding:0!important;
  border:0!important;
  border-radius:14px!important;
  background:rgba(5,15,34,.44)!important;
  overflow:hidden!important;
  display:block!important;
}
.mxDrETrainingAvatar>.mxProdIcon{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  transform:scale(1.08)!important;
  transform-origin:center bottom!important;
}
.mxDrETrainingCopy{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:4px!important;
  text-align:left!important;
}
.mxDrETrainingCopy b{
  display:block!important;
  margin:0!important;
  color:#ffd974!important;
  font-size:13px!important;
  line-height:1.1!important;
  letter-spacing:.08em!important;
}
.mxDrETrainingCopy span{
  display:block!important;
  margin:0!important;
  color:#f3f5ff!important;
  font-size:15px!important;
  line-height:1.3!important;
  text-align:left!important;
  overflow-wrap:anywhere!important;
}
.mxDrETrainingArrow{
  width:32px!important;
  height:32px!important;
  align-self:center!important;
  justify-self:end!important;
  margin:0!important;
  display:grid!important;
  place-items:center!important;
}
.mxDrETrainingArrow>.mxProdIcon{
  width:30px!important;
  height:30px!important;
  object-fit:contain!important;
}

/* Support flow gets its own clean vertical spacing. */
#modalBox .supportTutorialScroll{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:0!important;
  padding:2px 4px 8px!important;
}
#modalBox .supportTutorialScroll>div[style*="display:flex"][style*="flex-wrap:wrap"]{
  margin:14px 0 16px!important;
}
#modalBox .supportTutorialScroll>.mrow{
  margin:0!important;
}
#modalBox .supportTutorialScroll+.modalFixedClose{
  margin-top:14px!important;
  padding-top:12px!important;
}

/* Keep buttons visually separated on all modal screens. */
#modalBox .modalFixedClose .btn,
#modalBox .supportTutorialScroll .btn,
#modalBox .accountActions .btn,
#modalBox .settingsActions .btn{
  margin-top:0!important;
  margin-bottom:0!important;
}

/* Small phones: compact but never overlapping. */
@media(max-width:390px),(max-height:700px){
  #modalBox{--mx-modal-gap:10px}
  .mxDrETrainingCard{
    grid-template-columns:52px minmax(0,1fr) 28px!important;
    gap:9px!important;
    margin:12px 0!important;
    padding:11px 10px!important;
  }
  .mxDrETrainingAvatar{
    width:50px!important;height:56px!important;min-width:50px!important;
  }
  .mxDrETrainingCopy b{font-size:12px!important}
  .mxDrETrainingCopy span{font-size:13.5px!important;line-height:1.28!important}
  .mxDrETrainingArrow{width:27px!important;height:27px!important}
  .mxDrETrainingArrow>.mxProdIcon{width:25px!important;height:25px!important}
}

/* Inputs/buttons remain inside their cards and keep a clear gap from borders. */
#modalBox input,
#modalBox select,
#modalBox textarea{
  box-sizing:border-box!important;
  max-width:100%!important;
}


/* ================= QA SPACING PASS 2 · MODAL RHYTHM =================
   Dialog/form spacing only. Gameplay HUD/control dimensions are untouched. */
#modalBox{
  --mx-stack-gap:14px;
  --mx-action-gap:12px;
}
#modalBox .msub{
  margin-top:6px!important;
  margin-bottom:10px!important;
  line-height:1.34!important;
}
#modalBox>.mrow,
#modalBox .modalScroll>.mrow{
  gap:var(--mx-action-gap)!important;
}
#modalBox>.mrow+.mrow,
#modalBox .modalScroll>.mrow+.mrow{
  margin-top:var(--mx-action-gap)!important;
}
#modalBox .btn{
  line-height:1.12!important;
}
#modalBox .btn>span{
  line-height:inherit;
}

/* Any single-button action row is centered rather than left-biased. */
#modalBox .mrow:has(>button:only-child){
  display:flex!important;
  justify-content:center!important;
  width:100%!important;
}
#modalBox .mrow:has(>button:only-child)>button{
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Two-button form rows keep equal visual weight and breathing room. */
#modalBox .mrow:has(>button:nth-child(2)):not(:has(>button:nth-child(3))){
  display:flex!important;
  align-items:stretch!important;
  justify-content:center!important;
  gap:12px!important;
}
#modalBox .mrow:has(>button:nth-child(2)):not(:has(>button:nth-child(3)))>button{
  min-width:0!important;
}

/* ================= NEW PLAYER / NAME ENTRY ================= */
#modalBox:has(#newNameInput){
  width:min(90vw,390px)!important;
  padding:24px 22px 22px!important;
  text-align:center!important;
}
#modalBox:has(#newNameInput)>h3{
  margin:0 0 7px!important;
  text-align:center!important;
  line-height:1.14!important;
}
#modalBox:has(#newNameInput)>.msub{
  margin:0 auto 18px!important;
  max-width:320px!important;
  text-align:center!important;
  line-height:1.32!important;
}
#newNameInput{
  display:block!important;
  width:100%!important;
  margin:0 auto 20px!important;
  min-height:52px!important;
  box-sizing:border-box!important;
}
#modalBox:has(#newNameInput)>.mrow{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:12px!important;
  width:100%!important;
  margin:0!important;
}
#modalBox:has(#newNameInput) #newNameGo{
  width:min(100%,320px)!important;
  min-height:50px!important;
  margin:0 auto!important;
}
#modalBox:has(#newNameInput) #newNameCancel{
  width:min(62%,190px)!important;
  min-height:46px!important;
  margin:0 auto!important;
}

/* ================= RESULT SCREEN BREATHING ROOM ================= */
#modalBox.winResultModal{
  padding-top:18px!important;
  padding-bottom:18px!important;
}
#modalBox.winResultModal .mxResultMolecule{
  margin-top:6px!important;
  margin-bottom:8px!important;
}
#modalBox.winResultModal .performanceResult{
  margin-top:9px!important;
  margin-bottom:9px!important;
}
#modalBox.winResultModal .accountMilestoneInvite{
  margin-top:8px!important;
  margin-bottom:10px!important;
  padding-top:9px!important;
  padding-bottom:9px!important;
}
#modalBox.winResultModal .mxSolveTimeResult{
  margin:9px auto!important;
  padding:8px 9px!important;
  gap:3px!important;
}
#modalBox.winResultModal .mstars{
  margin-top:9px!important;
  margin-bottom:7px!important;
}
#modalBox.winResultModal .mcoins{
  margin-top:4px!important;
  margin-bottom:8px!important;
}
#modalBox.winResultModal>.mrow{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:11px!important;
  width:100%!important;
  margin-top:12px!important;
}
#modalBox.winResultModal>.mrow #mNext,
#modalBox.winResultModal>.mrow #mBonusNow{
  grid-column:1/-1!important;
  width:82%!important;
  justify-self:center!important;
  min-height:48px!important;
}
#modalBox.winResultModal>.mrow #mRetry,
#modalBox.winResultModal>.mrow #mLab{
  width:100%!important;
  min-height:45px!important;
}

/* ================= ACCOUNT / PLAYERS ================= */
#modalBox.accountModal{
  padding-bottom:18px!important;
}
#modalBox.accountModal .accountActions{
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  width:100%!important;
  margin-top:12px!important;
}
#modalBox.accountModal .accountActions .btn{
  width:100%!important;
  margin:0!important;
  min-height:44px!important;
}
#modalBox.accountModal .accountUtilityRow{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
  width:100%!important;
  margin-top:12px!important;
}
#modalBox.accountModal .accountUtilityRow .btn{
  width:100%!important;
  margin:0!important;
  min-height:44px!important;
}
#modalBox.accountModal>.btn:last-of-type{
  margin-top:12px!important;
}

/* ================= PLAYER SUPPORT · CHARACTERFUL DR. E ================= */
.mxDrETrainingCard{
  grid-template-columns:78px minmax(0,1fr) 34px!important;
  gap:13px!important;
  margin:18px 0!important;
  padding:14px 15px!important;
  min-height:104px!important;
}
.mxDrETrainingAvatar{
  width:76px!important;
  height:92px!important;
  min-width:76px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  overflow:visible!important;
  align-self:end!important;
}
.mxDrETrainingAvatar>img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  filter:drop-shadow(0 6px 7px rgba(0,0,0,.28))!important;
}
.mxDrETrainingCopy{
  gap:6px!important;
}
.mxDrETrainingCopy b{
  font-size:13.5px!important;
}
.mxDrETrainingCopy span{
  font-size:15px!important;
  line-height:1.34!important;
}
#modalBox .supportTutorialScroll>div[style*="flex-wrap:wrap"]{
  margin:16px 0 18px!important;
}
#modalBox .supportTutorialScroll>.mrow{
  margin-top:0!important;
}
#modalBox .supportTutorialScroll+.modalFixedClose{
  margin-top:16px!important;
  padding-top:13px!important;
}

/* Narrow phones: preserve separation rather than overlapping. */
@media(max-width:390px),(max-height:700px){
  #modalBox{--mx-stack-gap:11px;--mx-action-gap:10px}
  #modalBox:has(#newNameInput){padding:19px 16px 17px!important}
  #modalBox:has(#newNameInput)>.msub{margin-bottom:14px!important}
  #newNameInput{margin-bottom:16px!important;min-height:48px!important}
  #modalBox:has(#newNameInput) #newNameGo{min-height:46px!important}
  #modalBox:has(#newNameInput) #newNameCancel{min-height:42px!important}
  #modalBox.winResultModal{padding-top:14px!important;padding-bottom:14px!important}
  #modalBox.winResultModal .accountMilestoneInvite{margin-top:6px!important;margin-bottom:8px!important}
  #modalBox.winResultModal .mxSolveTimeResult{margin:7px auto!important;padding:7px 8px!important}
  #modalBox.winResultModal>.mrow{gap:9px!important;margin-top:10px!important}
  .mxDrETrainingCard{
    grid-template-columns:62px minmax(0,1fr) 28px!important;
    gap:9px!important;margin:14px 0!important;padding:11px 10px!important;min-height:88px!important;
  }
  .mxDrETrainingAvatar{width:60px!important;height:74px!important;min-width:60px!important}
  .mxDrETrainingCopy b{font-size:12px!important}
  .mxDrETrainingCopy span{font-size:13.5px!important;line-height:1.3!important}
}

/* Touch keyboard can reduce viewport height drastically; keep forms centered and usable. */
@media(max-height:560px){
  #modalBox:has(#newNameInput){
    margin-top:8px!important;margin-bottom:8px!important;
  }
}


/* ================= FIRST-USE MECHANIC MODAL · STRUCTURAL FIX =================
   The content and actions now have separate layout containers, so the global
   modal scroll wrapper can never collapse/overlap the two bottom buttons. */
#modal:has(.mxFirstUseBody) #modalBox{
  width:min(92vw,430px)!important;
  max-width:430px!important;
  max-height:min(90dvh,720px)!important;
  padding:14px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:12px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  border:1.5px solid rgba(135,119,229,.68)!important;
  border-radius:22px!important;
}
#modal:has(.mxFirstUseBody) .mxFirstUseBody{
  flex:1 1 auto!important;
  min-height:0!important;
  width:100%!important;
  box-sizing:border-box!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:2px 2px 4px!important;
  margin:0!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
}

/* Header card: no negative margins, equal left/right breathing room. */
#modal:has(.mxFirstUseBody) .mxFirstUseHead{
  display:grid!important;
  grid-template-columns:82px minmax(0,1fr)!important;
  gap:12px!important;
  align-items:end!important;
  width:100%!important;
  margin:0 0 12px!important;
  padding:11px 12px!important;
  box-sizing:border-box!important;
  border:1px solid rgba(120,231,255,.30)!important;
  border-radius:18px!important;
  overflow:hidden!important;
  background:linear-gradient(145deg,rgba(53,75,111,.58),rgba(38,35,77,.56))!important;
}
#modal:has(.mxFirstUseBody) .mxFirstUseHead img{
  width:82px!important;
  height:94px!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  align-self:end!important;
}
#modal:has(.mxFirstUseBody) .mxFirstUseHead>div{
  min-width:0!important;
  padding:2px 0!important;
}
#modal:has(.mxFirstUseBody) .mxFirstUseHead span{
  display:block!important;
  margin:0 0 4px!important;
}
#modal:has(.mxFirstUseBody) .mxFirstUseHead h3{
  margin:0 0 6px!important;
  line-height:1.12!important;
  text-wrap:balance!important;
}
#modal:has(.mxFirstUseBody) .mxFirstUseHead p{
  margin:0!important;
  line-height:1.35!important;
}

/* Mechanic card/list always stays inside the same inner edge. */
#modal:has(.mxFirstUseBody) .mxMechanicContextNote{
  width:100%!important;
  box-sizing:border-box!important;
  margin:0 0 12px!important;
}
#modal:has(.mxFirstUseBody) .mxFirstUseList{
  width:100%!important;
  max-height:none!important;
  overflow:visible!important;
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  padding:0!important;
  margin:0!important;
}
#modal:has(.mxFirstUseBody) .mxFirstUseRow{
  width:100%!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:11px 12px!important;
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr)!important;
  gap:11px!important;
  align-items:center!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:15px!important;
  overflow:hidden!important;
}
#modal:has(.mxFirstUseBody) .mxFirstUseIcon{
  width:44px!important;height:44px!important;
  box-sizing:border-box!important;
}

/* Dedicated footer: two clearly separated full-width buttons. */
#modal:has(.mxFirstUseBody) .mxFirstUseActions{
  flex:0 0 auto!important;
  width:100%!important;
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:11px!important;
  padding:2px 2px 0!important;
  margin:0!important;
}
#modal:has(.mxFirstUseBody) .mxFirstUseActions .btn{
  position:relative!important;
  width:100%!important;
  max-width:100%!important;
  min-height:48px!important;
  margin:0!important;
  padding:12px 14px!important;
  box-sizing:border-box!important;
  border-radius:15px!important;
  font-size:14px!important;
  line-height:1.12!important;
  transform:none!important;
}
#modal:has(.mxFirstUseBody) #mMechanicDetails{
  order:1!important;
}
#modal:has(.mxFirstUseBody) #mMechanicQuickGo{
  order:2!important;
  outline:2px solid rgba(255,211,110,.78)!important;
  box-shadow:0 0 16px rgba(255,211,110,.28)!important;
}
#modal:has(.mxFirstUseBody) #mMechanicQuickGo.mxGuidedTarget{
  transform:none!important;
}

/* This modal has a real scroll body; don't add the generic wrapper rail/layout. */
#modal:has(.mxFirstUseBody) #modalBox.mxTouchScrollModal{
  overflow:hidden!important;
}

/* Phone-height fallback keeps all borders visible and only scrolls content. */
@media(max-width:390px),(max-height:700px){
  #modal:has(.mxFirstUseBody) #modalBox{
    width:min(94vw,420px)!important;
    max-height:88dvh!important;
    padding:11px!important;
    gap:10px!important;
  }
  #modal:has(.mxFirstUseBody) .mxFirstUseHead{
    grid-template-columns:70px minmax(0,1fr)!important;
    gap:9px!important;
    margin-bottom:10px!important;
    padding:9px 10px!important;
  }
  #modal:has(.mxFirstUseBody) .mxFirstUseHead img{
    width:70px!important;height:82px!important;
  }
  #modal:has(.mxFirstUseBody) .mxFirstUseRow{
    grid-template-columns:42px minmax(0,1fr)!important;
    gap:9px!important;padding:9px 10px!important;
  }
  #modal:has(.mxFirstUseBody) .mxFirstUseIcon{
    width:39px!important;height:39px!important;
  }
  #modal:has(.mxFirstUseBody) .mxFirstUseActions{
    gap:9px!important;
  }
  #modal:has(.mxFirstUseBody) .mxFirstUseActions .btn{
    min-height:44px!important;
    padding:10px 11px!important;
    font-size:13px!important;
  }
}


/* =====================================================================
   MOLECULOX UI CONSISTENCY PASS 1
   Visual hierarchy only. Gameplay board/touch mechanics remain untouched.
   ===================================================================== */

:root{
  --mx-ui-radius:14px;
  --mx-ui-radius-lg:17px;
  --mx-ui-btn-h:44px;
  --mx-ui-btn-primary-h:48px;
  --mx-ui-gap:10px;
  --mx-ui-gap-lg:14px;
}

/* ---- Shared text-button rhythm ---- */
#modalBox .btn,
#profileScr .btn,
#splash .btn:not(.iconBadge),
#levelsScr .btn:not(.iconBadge):not(.crystalLabBtn),
#collectScr .btn:not(.iconBadge),
#labScr .btn:not(.iconBadge),
#hofScr .btn:not(.iconBadge){
  min-height:var(--mx-ui-btn-h)!important;
  height:auto!important;
  padding:10px 14px!important;
  border-radius:var(--mx-ui-radius)!important;
  font-size:clamp(12.5px,3.35vw,15px)!important;
  line-height:1.12!important;
  letter-spacing:.02em!important;
  box-sizing:border-box!important;
  text-align:center!important;
}

/* Primary calls-to-action get one controlled step of emphasis. */
#modalBox .btn.green,
#splash .btn.green,
#profileScr .btn.green,
#levelsScr .btn.green,
#collectScr .btn.green,
#labScr .btn.green,
#hofScr .btn.green{
  min-height:var(--mx-ui-btn-primary-h)!important;
  border-radius:var(--mx-ui-radius-lg)!important;
  padding:11px 15px!important;
  font-size:clamp(13.5px,3.55vw,16px)!important;
}

/* Secondary / ghost controls should visually recede. */
#modalBox .btn.ghost,
#profileScr .btn.ghost,
#splash .btn.ghost{
  min-height:42px!important;
  padding:9px 13px!important;
}

/* Equal spacing for stacked action areas. */
#modalBox .mrow,
#modalBox .accountActions,
#modalBox .settingsActions{
  gap:var(--mx-ui-gap)!important;
}
#modalBox .mrow+.mrow,
#modalBox .accountActions+.accountActions,
#modalBox .settingsActions+.settingsActions{
  margin-top:var(--mx-ui-gap)!important;
}

/* ---- Modal hierarchy ---- */
#modalBox{
  --mx-modal-gap:12px;
}
#modalBox h3{
  line-height:1.14!important;
  text-wrap:balance!important;
}
#modalBox .msub{
  line-height:1.35!important;
}
#modalBox .modalFixedClose .btn{
  min-height:44px!important;
}
#modalBox .modalFixedClose{
  margin-top:12px!important;
  padding-top:11px!important;
}

/* Result screen: clear 3-tier action hierarchy. */
#modalBox.winResultModal>.mrow{
  gap:10px!important;
}
#modalBox.winResultModal #mNext,
#modalBox.winResultModal #mBonusNow{
  min-height:48px!important;
  border-radius:16px!important;
  font-size:15px!important;
}
#modalBox.winResultModal #mRetry,
#modalBox.winResultModal #mLab{
  min-height:42px!important;
  border-radius:13px!important;
  font-size:13.5px!important;
}

/* Account screen: compact, calm, still easy to tap. */
#modalBox.accountModal .accountActions{
  gap:8px!important;
}
#modalBox.accountModal .accountActions .btn{
  min-height:42px!important;
  padding:9px 12px!important;
  font-size:13px!important;
  border-radius:13px!important;
}
#modalBox.accountModal .accountUtilityRow{
  gap:9px!important;
}
#modalBox.accountModal .accountUtilityRow .btn{
  min-height:42px!important;
  padding:9px 9px!important;
  font-size:11.5px!important;
  border-radius:13px!important;
}

/* New player form: centered action hierarchy. */
#modalBox:has(#newNameInput) #newNameGo{
  min-height:48px!important;
  width:min(100%,310px)!important;
}
#modalBox:has(#newNameInput) #newNameCancel{
  min-height:42px!important;
  width:min(58%,180px)!important;
  margin-inline:auto!important;
}

/* First-use mechanic guide keeps its dedicated footer but follows same sizes. */
#modal:has(.mxFirstUseBody) .mxFirstUseActions{
  gap:10px!important;
}
#modal:has(.mxFirstUseBody) .mxFirstUseActions .btn{
  min-height:44px!important;
  padding:10px 13px!important;
  font-size:13.5px!important;
  border-radius:14px!important;
}
#modal:has(.mxFirstUseBody) #mMechanicQuickGo{
  min-height:47px!important;
  font-size:14px!important;
}

/* ---- Profile screen ---- */
#profileScr #profileWrap{
  gap:12px!important;
}
#profileScr .profileBtn{
  min-height:62px!important;
  padding:11px 14px!important;
  border-radius:14px!important;
}
#profileScr .profileDel{
  width:48px!important;
  min-width:48px!important;
  flex-basis:48px!important;
  border-radius:14px!important;
}
#profileScr #profileBack{
  width:min(72%,240px)!important;
  min-height:42px!important;
  margin:4px auto 0!important;
  align-self:center!important;
}

/* ---- List headers: back/home should feel like header controls, not giant buttons ---- */
#levelsScr .listHead .iconBadge,
#collectScr .listHead .iconBadge,
#labScr .listHead .iconBadge{
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  min-height:48px!important;
  padding:8px!important;
  border-radius:14px!important;
}
#levelsScr .listHead .iconBadge .badgeIcon,
#collectScr .listHead .iconBadge .badgeIcon,
#labScr .listHead .iconBadge .badgeIcon{
  width:25px!important;
  height:25px!important;
}

/* Bonus button in level header should not dominate title/navigation. */
#levelsScr .crystalLabBtn{
  min-height:46px!important;
  height:46px!important;
  padding:6px 10px!important;
  border-radius:14px!important;
  font-size:11px!important;
}

/* ---- Collection / Lab tabs ---- */
#collectionTabs{
  gap:7px!important;
}
#collectionTabs .collectionTab{
  min-height:44px!important;
  padding:7px 5px!important;
  border-radius:13px!important;
  font-size:10.5px!important;
  line-height:1.05!important;
}
#labTabs{
  gap:7px!important;
}
#labTabs .labTab{
  min-height:44px!important;
  padding:7px 6px!important;
  border-radius:13px!important;
  font-size:10.5px!important;
  line-height:1.05!important;
}

/* ---- Splash / main menu ---- */
#splashBtns{
  gap:9px!important;
}
#splashBtns .btn{
  min-height:45px!important;
  padding:10px 14px!important;
  border-radius:15px!important;
}
#splashBtns .btn.green{
  min-height:49px!important;
}

/* Corner icon controls use one shared scale. */
#splash .iconBadge{
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  min-height:48px!important;
  border-radius:14px!important;
}
#splash .iconBadge .badgeIcon{
  width:25px!important;
  height:25px!important;
}

/* ---- Keep gameplay touch controls as-is; only unify their visible radius/text ---- */
#gameScr #actionCol .btn.iconBadge{
  border-radius:15px!important;
}
#gameScr #navBtns .navB{
  border-radius:14px!important;
}

/* Avoid cramped localized labels without enlarging whole buttons. */
#modalBox .btn,
#profileScr .btn,
#splashBtns .btn,
#collectionTabs .collectionTab,
#labTabs .labTab{
  overflow:hidden!important;
  text-overflow:ellipsis;
}
#modalBox .btn{
  white-space:normal!important;
  text-wrap:balance!important;
}

/* ---- Small phones: proportion, not shrink-to-tiny ---- */
@media(max-width:390px),(max-height:700px){
  :root{
    --mx-ui-btn-h:42px;
    --mx-ui-btn-primary-h:46px;
    --mx-ui-gap:9px;
  }
  #modalBox .btn,
  #profileScr .btn,
  #splash .btn:not(.iconBadge){
    padding:9px 11px!important;
  }
  #levelsScr .listHead .iconBadge,
  #collectScr .listHead .iconBadge,
  #labScr .listHead .iconBadge,
  #splash .iconBadge{
    width:45px!important;height:45px!important;
    min-width:45px!important;min-height:45px!important;
  }
  #profileScr .profileBtn{
    min-height:58px!important;
  }
  #collectionTabs .collectionTab,
  #labTabs .labTab{
    min-height:41px!important;
    font-size:9.5px!important;
  }
}

/* =====================================================================
   MOLECULOX UI CONSISTENCY PASS 2 — LAYOUT & SPACING
   Keeps gameplay geometry/mechanics untouched. Fixes cramped modal rhythm,
   clipped borders and uneven action spacing across phone-sized screens.
   ===================================================================== */
:root{--mx-space-1:8px;--mx-space-2:12px;--mx-space-3:16px;--mx-space-4:20px}
#modalBox{padding-left:20px!important;padding-right:20px!important;box-sizing:border-box!important}
#modalBox>h3{margin:0 0 7px!important}
#modalBox>h3+.msub{margin-top:0!important;margin-bottom:14px!important}
#modalBox .mrow{margin-top:12px!important;align-items:stretch!important}
#modalBox .mrow .btn{margin:0!important}

/* Result: breathing room between information blocks and actions. */
#modalBox.winResultModal{padding-top:18px!important;padding-bottom:18px!important}
#modalBox.winResultModal .mxResultMolecule{margin-top:7px!important;margin-bottom:8px!important}
#modalBox.winResultModal .mxPerformanceResult{margin-top:8px!important;margin-bottom:8px!important}
#modalBox.winResultModal .mstars{margin-top:8px!important;margin-bottom:5px!important}
#modalBox.winResultModal>.mrow{margin-top:13px!important;row-gap:9px!important}

/* Account/player forms: consistent vertical rhythm and no border clipping. */
#modalBox.accountModal{padding:18px 20px 19px!important}
#modalBox.accountModal .accountActions{margin-top:10px!important;margin-bottom:0!important}
#modalBox.accountModal .accountUtilityRow{margin-top:10px!important}
#modalBox.accountModal .btn{box-sizing:border-box!important}

/* New-player form: input and actions read as one centered stack. */
#modalBox:has(#newNameInput){padding:24px 22px!important}
#modalBox:has(#newNameInput) #newNameInput{margin:18px 0 16px!important;min-height:54px!important;box-sizing:border-box!important}
#modalBox:has(#newNameInput) .mrow{display:flex!important;flex-direction:column!important;align-items:center!important;gap:12px!important;margin-top:0!important}
#modalBox:has(#newNameInput) #newNameGo{width:min(100%,330px)!important}
#modalBox:has(#newNameInput) #newNameCancel{width:min(72%,220px)!important;margin:0 auto!important}

/* First-use mechanic card: reserve a real footer lane so actions never overlap. */
#modal:has(.mxFirstUseBody) #modalBox{padding:16px 18px 18px!important;display:flex!important;flex-direction:column!important;gap:12px!important}
#modal:has(.mxFirstUseBody) .mxFirstUseBody{min-height:0!important;margin:0!important;padding-bottom:0!important}
#modal:has(.mxFirstUseBody) .mxFirstUseHead{margin-bottom:10px!important}
#modal:has(.mxFirstUseBody) .mxFirstUseList{margin-top:10px!important;margin-bottom:0!important}
#modal:has(.mxFirstUseBody) .mxFirstUseActions{position:static!important;display:flex!important;flex-direction:column!important;gap:10px!important;margin:0!important;padding:0!important;flex:0 0 auto!important}
#modal:has(.mxFirstUseBody) .mxFirstUseActions .btn{width:min(100%,360px)!important;margin:0 auto!important;flex:none!important}

/* Profile/player chooser: even rows and centered exit action. */
#profileScr #profileWrap{padding-inline:14px!important;box-sizing:border-box!important}
#profileScr .profileRow{gap:10px!important;align-items:stretch!important}
#profileScr #profileBack{margin-top:10px!important;margin-bottom:8px!important}

/* List pages: consistent safe gutters, header rhythm and tab separation. */
#levelsScr .listHead,#collectScr .listHead,#labScr .listHead{padding-inline:14px!important;gap:10px!important;box-sizing:border-box!important}
#collectionTabs,#labTabs{margin-top:8px!important;margin-bottom:10px!important;padding-inline:12px!important;box-sizing:border-box!important}

@media(max-width:390px),(max-height:700px){
  #modalBox{padding-left:16px!important;padding-right:16px!important}
  #modalBox.accountModal{padding:15px 16px 16px!important}
  #modalBox:has(#newNameInput){padding:20px 18px!important}
  #modal:has(.mxFirstUseBody) #modalBox{padding:13px 14px 15px!important;gap:9px!important}
  #modal:has(.mxFirstUseBody) .mxFirstUseHead{margin-bottom:7px!important}
  #modal:has(.mxFirstUseBody) .mxFirstUseList{margin-top:7px!important}
  #modal:has(.mxFirstUseBody) .mxFirstUseActions{gap:8px!important}
}

/* =====================================================================
   MOLECULOX UI PASS 3 — ICON LANGUAGE + DELETE PROFILE PROPORTIONS
   Code-drawn SVG only; no phone/OS emoji icons in this corrected modal.
   ===================================================================== */
.mxCodeIcon{width:1.15em;height:1.15em;display:block;flex:0 0 auto}
.mxModalTitleIcon,.mxBtnIcon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.mxModalTitleIcon{width:34px;height:34px;border:1px solid rgba(124,231,255,.34);border-radius:11px;color:#b9f5ff;background:linear-gradient(145deg,rgba(38,104,146,.28),rgba(71,36,128,.22));box-shadow:inset 0 0 14px rgba(81,217,255,.08)}
.mxModalTitleIcon .mxCodeIcon{width:20px;height:20px}
.mxBtnIcon{width:22px;height:22px;color:currentColor}
.mxBtnIcon .mxCodeIcon{width:19px;height:19px}

#modalBox.deleteProfileModal{width:min(86vw,440px)!important;padding:24px 24px 22px!important}
#modalBox.deleteProfileModal .mxDeleteTitle{display:flex!important;align-items:center!important;justify-content:center!important;gap:11px!important;margin:0 0 10px!important;font-size:clamp(24px,6vw,32px)!important;line-height:1.08!important;text-align:center!important}
#modalBox.deleteProfileModal>.msub{max-width:360px!important;margin:0 auto 19px!important;font-size:clamp(14px,3.8vw,17px)!important;line-height:1.38!important;text-align:center!important}
#modalBox.deleteProfileModal .mxDeleteActions{display:flex!important;flex-direction:column!important;align-items:center!important;gap:12px!important;margin:0!important}
#modalBox.deleteProfileModal .mxDeleteActions .btn{width:min(100%,350px)!important;min-height:50px!important;padding:11px 18px!important;margin:0!important;font-size:clamp(14px,3.8vw,16px)!important;line-height:1.15!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;overflow:visible!important;text-overflow:clip!important;white-space:normal!important}
#modalBox.deleteProfileModal #mDelYes{border-radius:15px!important}
#modalBox.deleteProfileModal #mDelNo{width:min(72%,235px)!important;min-height:46px!important;border-radius:14px!important}

@media(max-width:390px),(max-height:700px){
  #modalBox.deleteProfileModal{width:min(88vw,410px)!important;padding:20px 18px 19px!important}
  #modalBox.deleteProfileModal .mxDeleteTitle{gap:9px!important;font-size:clamp(22px,6vw,28px)!important}
  #modalBox.deleteProfileModal>.msub{margin-bottom:16px!important;font-size:14px!important}
  #modalBox.deleteProfileModal .mxDeleteActions{gap:10px!important}
  #modalBox.deleteProfileModal .mxDeleteActions .btn{min-height:47px!important}
  #modalBox.deleteProfileModal #mDelNo{min-height:43px!important}
}


/* =====================================================================
   MOLECULOX PASS 4 · TYPOGRAPHY & TEXT HIERARCHY
   Visual text system only. Gameplay logic and touch geometry unchanged.
   ===================================================================== */

:root{
  --mx-type-title:clamp(21px,5.8vw,30px);
  --mx-type-h2:clamp(18px,5vw,25px);
  --mx-type-h3:clamp(16px,4.3vw,22px);
  --mx-type-body:clamp(13px,3.45vw,15.5px);
  --mx-type-small:clamp(10.5px,2.8vw,12.5px);
  --mx-type-micro:clamp(9px,2.35vw,10.5px);
  --mx-type-btn:clamp(12.5px,3.35vw,15px);
  --mx-type-btn-primary:clamp(13.5px,3.6vw,16px);
  --mx-type-track:.035em;
}

/* Shared readable defaults */
body,
button,
input,
select,
textarea{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,
.btn{
  font-family:inherit!important;
}

/* Screen titles */
.listHead h2,
#profileTitle,
#labTitle,
#logoTitle{
  font-size:var(--mx-type-h2)!important;
  line-height:1.08!important;
  letter-spacing:.035em!important;
  font-weight:900!important;
  text-wrap:balance!important;
}

/* Splash gets one stronger title tier */
#logoTitle{
  font-size:clamp(27px,8vw,39px)!important;
  letter-spacing:.065em!important;
}
#logoTop,
#profileTop{
  font-size:var(--mx-type-micro)!important;
  letter-spacing:.22em!important;
  font-weight:900!important;
}
#logoSub{
  font-size:var(--mx-type-small)!important;
  line-height:1.3!important;
  letter-spacing:.025em!important;
}

/* Modal titles and supporting copy */
#modalBox h3{
  font-size:var(--mx-type-h3)!important;
  line-height:1.12!important;
  letter-spacing:.025em!important;
  font-weight:900!important;
  text-wrap:balance!important;
}
#modalBox .msub,
#modalBox p,
#modalBox .mxDrETrainingCopy span,
#modalBox .mxMechanicContextNote span{
  font-size:var(--mx-type-body)!important;
  line-height:1.38!important;
  letter-spacing:.005em!important;
}
#modalBox small,
#modalBox .authTiny,
#modalBox .mxFirstUseRow small,
#modalBox .mxFirstUseCue{
  font-size:var(--mx-type-small)!important;
  line-height:1.35!important;
}
#modalBox b,
#modalBox strong{
  letter-spacing:.015em;
}

/* Buttons: strong but not shouty */
#modalBox .btn,
#profileScr .btn,
#splash .btn:not(.iconBadge),
#levelsScr .btn:not(.iconBadge),
#collectScr .btn:not(.iconBadge),
#labScr .btn:not(.iconBadge),
#hofScr .btn:not(.iconBadge){
  font-size:var(--mx-type-btn)!important;
  font-weight:850!important;
  letter-spacing:.025em!important;
  line-height:1.12!important;
}
#modalBox .btn.green,
#profileScr .btn.green,
#splash .btn.green,
#levelsScr .btn.green,
#collectScr .btn.green,
#labScr .btn.green,
#hofScr .btn.green{
  font-size:var(--mx-type-btn-primary)!important;
  letter-spacing:.035em!important;
}

/* Result screen */
#modalBox.winResultModal .mxResultFormula{
  font-weight:900!important;
  letter-spacing:.015em!important;
}
#modalBox.winResultModal .mxResultName{
  font-size:var(--mx-type-small)!important;
  line-height:1.12!important;
  letter-spacing:.075em!important;
  font-weight:800!important;
}
#modalBox.winResultModal .performanceResult{
  font-size:var(--mx-type-small)!important;
  line-height:1.2!important;
}
#modalBox.winResultModal .mxSolveTimeResult b{
  font-size:clamp(15px,4vw,18px)!important;
  letter-spacing:.045em!important;
}
#modalBox.winResultModal .mxSolveTimeResult span,
#modalBox.winResultModal .mxSolveTimeResult em{
  font-size:var(--mx-type-small)!important;
  line-height:1.22!important;
}
#modalBox.winResultModal .mcoins{
  font-size:clamp(14px,3.9vw,17px)!important;
  line-height:1.1!important;
}

/* First-use mechanic tutorial */
#modal:has(.mxFirstUseBody) .mxFirstUseHead span{
  font-size:var(--mx-type-micro)!important;
  letter-spacing:.18em!important;
  font-weight:900!important;
}
#modal:has(.mxFirstUseBody) .mxFirstUseHead h3{
  font-size:clamp(17px,4.65vw,23px)!important;
  line-height:1.1!important;
}
#modal:has(.mxFirstUseBody) .mxFirstUseHead p{
  font-size:var(--mx-type-body)!important;
  line-height:1.35!important;
}
#modal:has(.mxFirstUseBody) .mxFirstUseRow b{
  font-size:clamp(13px,3.55vw,15px)!important;
  line-height:1.2!important;
}
#modal:has(.mxFirstUseBody) .mxFirstUseRow small{
  font-size:var(--mx-type-small)!important;
  line-height:1.35!important;
}
#modal:has(.mxFirstUseBody) .mxFirstUseCue{
  font-size:var(--mx-type-small)!important;
  line-height:1.3!important;
}

/* Account/profile screens */
#modalBox.accountModal h3{
  font-size:clamp(18px,4.9vw,23px)!important;
}
#modalBox.accountModal .accountActions .btn,
#modalBox.accountModal .accountUtilityRow .btn{
  line-height:1.12!important;
}
#profileScr .profileTexts strong{
  font-size:clamp(13px,3.45vw,15px)!important;
  line-height:1.12!important;
}
#profileScr .profileTexts small{
  font-size:clamp(10.5px,2.85vw,12.5px)!important;
  line-height:1.2!important;
}

/* Level selection / collection / lab */
#levelsScr .listHead h2,
#collectScr .listHead h2,
#labScr .listHead h2{
  text-align:center!important;
}
#lvGrid .lvNum,
#lvGrid .lvName{
  line-height:1.08!important;
}
.collectionTab span,
.labTab span{
  font-size:clamp(8.8px,2.4vw,10.5px)!important;
  line-height:1.02!important;
  letter-spacing:.025em!important;
  font-weight:850!important;
}

/* HUD typography: align hierarchy, do not alter hit areas */
#lvPill{
  font-size:clamp(18px,5vw,24px)!important;
  line-height:1.05!important;
  letter-spacing:.025em!important;
  font-weight:900!important;
}
#movePill,
#duelTimer,
#crystalCounter,
#chainCounter,
#reactorCounter,
#coinChip{
  font-weight:850!important;
  letter-spacing:.03em!important;
  line-height:1.05!important;
}
#goalCard .gt{
  font-size:clamp(10px,2.6vw,12px)!important;
  letter-spacing:.18em!important;
  font-weight:900!important;
}
#goalName{
  font-size:clamp(11px,3vw,13.5px)!important;
  line-height:1.08!important;
  font-weight:900!important;
  text-wrap:balance!important;
}
#goalFor{
  font-size:clamp(13px,3.6vw,16px)!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.04em!important;
}

/* Long-language safety */
#modalBox .btn,
#profileScr .btn,
#splashBtns .btn,
.collectionTab,
.labTab,
#goalName,
#profileTitle,
.listHead h2{
  overflow-wrap:anywhere!important;
  hyphens:auto;
}
#modalBox .btn,
#profileScr .btn,
#splashBtns .btn{
  white-space:normal!important;
  text-wrap:balance!important;
}

/* Japanese / German / Portuguese can need slightly tighter tracking */
html[lang="ja"] #modalBox .btn,
html[lang="ja"] .listHead h2,
html[lang="ja"] #profileTitle,
html[lang="zh"] #modalBox .btn,
html[lang="zh"] .listHead h2,
html[lang="zh"] #profileTitle{
  letter-spacing:0!important;
}
html[lang="de"] #modalBox .btn,
html[lang="pt"] #modalBox .btn,
html[lang="fr"] #modalBox .btn{
  letter-spacing:.01em!important;
}

/* Small phone fallback */
@media(max-width:390px),(max-height:700px){
  :root{
    --mx-type-title:clamp(20px,5.5vw,26px);
    --mx-type-h2:clamp(17px,4.7vw,22px);
    --mx-type-h3:clamp(15px,4.1vw,20px);
    --mx-type-body:clamp(12px,3.25vw,14px);
    --mx-type-small:clamp(10px,2.65vw,11.5px);
    --mx-type-btn:clamp(12px,3.2vw,14px);
    --mx-type-btn-primary:clamp(13px,3.45vw,15px);
  }
  #logoTitle{font-size:clamp(25px,7.4vw,34px)!important}
  #lvPill{font-size:clamp(17px,4.7vw,21px)!important}
}


/* =====================================================================
   MOLECULOX PASS 5 · MICRO-ANIMATIONS & TRANSITION POLISH
   Cosmetic only. Never blocks gameplay or navigation.
   ===================================================================== */

:root{
  --mx-ease-out:cubic-bezier(.18,.82,.22,1);
  --mx-ease-spring:cubic-bezier(.2,.9,.25,1.18);
  --mx-press:scale(.965);
}

/* ---------------- BUTTON PRESS FEEL ---------------- */
.btn,
.iconBadge,
.collectionTab,
.labTab,
.profileBtn,
.profileDel{
  transition:
    transform .12s ease,
    filter .15s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background-color .18s ease!important;
  transform-origin:center center!important;
  -webkit-tap-highlight-color:transparent;
}
.btn:active,
.iconBadge:active,
.collectionTab:active,
.labTab:active,
.profileBtn:active,
.profileDel:active{
  transform:var(--mx-press)!important;
  filter:brightness(.94)!important;
}
.btn.green:active{
  transform:scale(.975)!important;
}

/* hover only on devices that truly have hover */
@media(hover:hover) and (pointer:fine){
  .btn:hover,
  .iconBadge:hover,
  .collectionTab:hover,
  .labTab:hover{
    filter:brightness(1.05);
  }
}

/* ---------------- MODAL ARRIVAL ---------------- */
#modal{
  transition:background-color .18s ease, backdrop-filter .18s ease!important;
}
#modal.on #modalBox{
  animation:mxModalArrive .26s var(--mx-ease-out) both;
}
#modalBox.mxClosing{
  animation:mxModalLeave .18s ease-in both!important;
}
@keyframes mxModalArrive{
  0%{opacity:0;transform:translateY(12px) scale(.975)}
  55%{opacity:1}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes mxModalLeave{
  0%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(6px) scale(.985)}
}

/* Result modal: slightly more celebratory but still fast */
#modalBox.winResultModal.mxResultArrive{
  animation:mxResultArrive .34s var(--mx-ease-spring) both!important;
}
@keyframes mxResultArrive{
  0%{opacity:0;transform:translateY(18px) scale(.955)}
  68%{opacity:1;transform:translateY(-2px) scale(1.006)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

/* ---------------- RESULT ELEMENT CASCADE ---------------- */
#modalBox.winResultModal .mxResultMolecule,
#modalBox.winResultModal .performanceResult,
#modalBox.winResultModal .accountMilestoneInvite,
#modalBox.winResultModal .mxSolveTimeResult,
#modalBox.winResultModal .mstars,
#modalBox.winResultModal .mcoins,
#modalBox.winResultModal>.mrow{
  opacity:0;
  transform:translateY(7px);
  animation:mxResultItemIn .28s var(--mx-ease-out) forwards;
}
#modalBox.winResultModal .mxResultMolecule{animation-delay:.03s}
#modalBox.winResultModal .performanceResult{animation-delay:.07s}
#modalBox.winResultModal .accountMilestoneInvite{animation-delay:.10s}
#modalBox.winResultModal .mxSolveTimeResult{animation-delay:.13s}
#modalBox.winResultModal .mstars{animation-delay:.16s}
#modalBox.winResultModal .mcoins{animation-delay:.19s}
#modalBox.winResultModal>.mrow{animation-delay:.22s}
@keyframes mxResultItemIn{
  to{opacity:1;transform:translateY(0)}
}

/* ---------------- DR. E MOTION ---------------- */
.mxFirstUseHead img,
.mxDrETrainingAvatar>img,
#tutorialEinFace,
.einImg{
  transform-origin:center bottom!important;
}
#modal.on .mxFirstUseHead img{
  animation:mxDrEEnter .36s var(--mx-ease-spring) both;
}
#modal.on .mxDrETrainingAvatar>img{
  animation:mxDrECardEnter .34s var(--mx-ease-spring) both;
}
@keyframes mxDrEEnter{
  0%{opacity:0;transform:translateX(-14px) translateY(8px) scale(.92) rotate(-2deg)}
  70%{opacity:1;transform:translateX(2px) translateY(-1px) scale(1.015) rotate(.4deg)}
  100%{opacity:1;transform:none}
}
@keyframes mxDrECardEnter{
  0%{opacity:0;transform:translateY(10px) scale(.93)}
  100%{opacity:1;transform:none}
}

/* Subtle idle life, not constant bouncing */
.mxDrETrainingCard:hover .mxDrETrainingAvatar>img{
  animation:mxDrEHoverNod .6s ease-in-out both;
}
@keyframes mxDrEHoverNod{
  0%,100%{transform:none}
  45%{transform:translateY(-2px) rotate(-1deg)}
}

/* ---------------- FIRST-USE GUIDE ---------------- */
#modal.on .mxFirstUseHead,
#modal.on .mxFirstUseRow{
  animation:mxGuideCardIn .28s var(--mx-ease-out) both;
}
#modal.on .mxFirstUseRow:nth-child(1){animation-delay:.06s}
#modal.on .mxFirstUseRow:nth-child(2){animation-delay:.10s}
#modal.on .mxFirstUseRow:nth-child(3){animation-delay:.14s}
#modal.on .mxFirstUseActions{animation:mxGuideActionsIn .25s var(--mx-ease-out) .16s both}
@keyframes mxGuideCardIn{
  0%{opacity:0;transform:translateY(8px)}
  100%{opacity:1;transform:none}
}
@keyframes mxGuideActionsIn{
  0%{opacity:0;transform:translateY(6px)}
  100%{opacity:1;transform:none}
}

/* ---------------- TAB SWITCH FEEL ---------------- */
.collectionTab.on,
.labTab.on{
  animation:mxTabSelect .20s var(--mx-ease-out) both;
}
@keyframes mxTabSelect{
  0%{transform:scale(.97)}
  65%{transform:scale(1.018)}
  100%{transform:scale(1)}
}

/* ---------------- HEADER ICON FEEDBACK ---------------- */
.listHead .iconBadge:active,
#hudRight .iconBadge:active,
#splash .iconBadge:active{
  transform:scale(.93)!important;
}

/* ---------------- PROFILE ROW ARRIVAL ---------------- */
#profileScr.on .profileRow{
  animation:mxProfileRowIn .24s var(--mx-ease-out) both;
}
#profileScr.on .profileRow:nth-child(2){animation-delay:.035s}
#profileScr.on .profileRow:nth-child(3){animation-delay:.07s}
#profileScr.on .profileRow:nth-child(4){animation-delay:.105s}
#profileScr.on .profileRow:nth-child(5){animation-delay:.14s}
@keyframes mxProfileRowIn{
  0%{opacity:0;transform:translateY(7px)}
  100%{opacity:1;transform:none}
}

/* ---------------- LEVEL ENTRY REVEAL ---------------- */
#levelTransition.on{
  animation:mxLevelBackdropIn .18s ease-out both;
}
#levelTransition.on .mxLevelEntryCard{
  animation:mxLevelCardIn .34s var(--mx-ease-spring) both!important;
}
@keyframes mxLevelBackdropIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes mxLevelCardIn{
  0%{opacity:0;transform:scale(.94) translateY(12px)}
  68%{opacity:1;transform:scale(1.012) translateY(-1px)}
  100%{opacity:1;transform:none}
}

/* ---------------- REDUCED MOTION / ACCESSIBILITY ---------------- */
@media(prefers-reduced-motion:reduce){
  .btn,
  .iconBadge,
  .collectionTab,
  .labTab,
  .profileBtn,
  .profileDel,
  #modal.on #modalBox,
  #modalBox.winResultModal.mxResultArrive,
  #modalBox.winResultModal .mxResultMolecule,
  #modalBox.winResultModal .performanceResult,
  #modalBox.winResultModal .accountMilestoneInvite,
  #modalBox.winResultModal .mxSolveTimeResult,
  #modalBox.winResultModal .mstars,
  #modalBox.winResultModal .mcoins,
  #modalBox.winResultModal>.mrow,
  #modal.on .mxFirstUseHead,
  #modal.on .mxFirstUseRow,
  #modal.on .mxFirstUseActions,
  #profileScr.on .profileRow,
  #levelTransition.on,
  #levelTransition.on .mxLevelEntryCard{
    animation:none!important;
    transition:none!important;
    transform:none!important;
    opacity:1!important;
  }
}

/* Game setting: reduced-motion option gets same behavior */
body.mxReduceMotion .btn,
body.mxReduceMotion .iconBadge,
body.mxReduceMotion .collectionTab,
body.mxReduceMotion .labTab,
body.mxReduceMotion #modal.on #modalBox,
body.mxReduceMotion #modalBox.winResultModal *,
body.mxReduceMotion #levelTransition,
body.mxReduceMotion #levelTransition *{
  animation:none!important;
  transition:none!important;
}


/* =====================================================================
   MOLECULOX PASS 6 · VFX/SFX FINAL POLISH
   Reward readability and low-cost visual accents only.
   ===================================================================== */
#modalBox.winResultModal .mstars{
  position:relative!important;
  isolation:isolate;
}
#modalBox.winResultModal .mstars::after{
  content:"";
  position:absolute;
  inset:50% auto auto 50%;
  width:120px;height:42px;
  transform:translate(-50%,-50%) scale(.7);
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,226,111,.20),rgba(120,231,255,.08) 42%,transparent 72%);
  filter:blur(2px);
  opacity:0;
  pointer-events:none;
  animation:mxRewardHalo .75s ease-out .18s both;
  z-index:-1;
}
@keyframes mxRewardHalo{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.62)}
  38%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.18)}
}
#modalBox.winResultModal .mcoins{
  animation:mxRewardSettle .36s cubic-bezier(.2,.85,.25,1.15) .20s both!important;
}
@keyframes mxRewardSettle{
  0%{opacity:0;transform:translateY(5px) scale(.96)}
  100%{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  #modalBox.winResultModal .mstars::after,
  #modalBox.winResultModal .mcoins{animation:none!important}
}
body.mxReduceMotion #modalBox.winResultModal .mstars::after,
body.mxReduceMotion #modalBox.winResultModal .mcoins{animation:none!important}


/* =====================================================================
   MOLECULOX PASS 7 · STABILITY / MEMORY GUARDS
   Decorative cost reductions only; gameplay layout is unchanged.
   ===================================================================== */
body.mxPerfLow #fx{
  filter:none!important;
}
body.mxPerfLow #mxMoleculeFinishFx .mxOrbit,
body.mxPerfLow #mxMoleculeFinishFx .mxEnergyRing{
  filter:none!important;
}
body.mxPerfLow .mxDrEPoseGhost{
  filter:none!important;
}

/* FINAL menu alignment — central CTA stack optical balance. */
#splash #splashBtns{transform:translateX(3px)!important}


/* =====================================================================
   FINAL R45 POLISH · MENU / TAB CONSISTENCY + OVERFLOW SAFETY
   Conservative release pass: no gameplay geometry or mechanics changed.
   ===================================================================== */
:root{
  --mx-tab-bg:rgba(255,255,255,.065);
  --mx-tab-border:rgba(157,123,255,.34);
  --mx-tab-text:#c4c8e8;
  --mx-tab-active-a:#765cff;
  --mx-tab-active-b:#4c35c9;
  --mx-tab-active-border:rgba(197,184,255,.72);
  --mx-tab-cyan:rgba(79,216,255,.18);
}

/* Every release screen owns its width; child content may scroll vertically,
   never push the app sideways. */
#levelsScr,#collectScr,#labScr,#hofScr,#profileScr,#gameScr,#splash{
  min-width:0!important;
  max-width:100%!important;
  overflow-x:hidden!important;
}
#levelsScr .scrollArea,#collectScr .scrollArea,#labScr .scrollArea,#hofScr .scrollArea{
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}

/* Header controls retain fixed tap targets while titles absorb narrow-screen
   pressure without causing horizontal shift. */
.listHead{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
.listHead>*{min-width:0}
.listHead h2{
  min-width:0!important;
  max-width:100%!important;
  font-size:clamp(14px,4.6vw,20px)!important;
  line-height:1.06!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* One visual language for the four main tab families. */
#collectionTabs,#labTabs,#hofTopTabs,#hofSubTabs,#duelRankTabs{
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
.collectionTab,.labTab,.hofTopTab,.hofSubTab,.duelRankTab{
  min-width:0!important;
  max-width:100%!important;
  color:var(--mx-tab-text)!important;
  background:var(--mx-tab-bg)!important;
  border-color:var(--mx-tab-border)!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  text-align:center!important;
  line-height:1.08!important;
}
.collectionTab.on,.labTab.on,.hofTopTab.on,.duelRankTab.on{
  color:#fff!important;
  background:linear-gradient(180deg,var(--mx-tab-active-a),var(--mx-tab-active-b))!important;
  border-color:var(--mx-tab-active-border)!important;
  box-shadow:0 4px 0 rgba(49,31,142,.78),0 7px 18px rgba(0,0,0,.30),0 0 15px rgba(157,123,255,.20)!important;
}
.hofSubTab.on{
  color:#b8f2ff!important;
  background:var(--mx-tab-cyan)!important;
  border-color:rgba(79,216,255,.55)!important;
  box-shadow:inset 0 0 0 1px rgba(79,216,255,.18)!important;
}
.collectionTab span,.labTab span{
  min-width:0!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
.hofTopTab,.hofSubTab,.duelRankTab{
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}

/* Preserve Moleculox hierarchy: green = continue/confirm, amber = daily/reward,
   purple = navigation, cyan = information/secondary science state. */
.btn.green{color:#f4fff8!important}
.btn.amber{color:#3a2200!important}
.btn.blue{color:#f4fbff!important}
.btn.ghost{color:var(--txt)!important}

/* Generic release safety for localized labels and dynamically generated rows. */
.btn,.chip,.card,.profileRow,.hofWorldRow,.hofChampRow,.hofSpotlight,
.labShopCard,.bonusMissionCard,.duelChoice,.duelStat{
  max-width:100%;
  box-sizing:border-box;
}
.btn{overflow-wrap:anywhere}
.chip{min-width:0}

/* Small phones: reduce gaps before reducing text below comfortable size. */
@media(max-width:390px){
  #collectionTabs,#labTabs,#hofTopTabs{gap:5px!important;padding-left:8px!important;padding-right:8px!important}
  #hofSubTabs,#duelRankTabs{gap:5px!important}
  .collectionTab,.labTab,.hofTopTab{padding-left:4px!important;padding-right:4px!important;font-size:clamp(8.6px,2.5vw,10px)!important}
  .hofSubTab,.duelRankTab{padding-left:3px!important;padding-right:3px!important;font-size:clamp(8.4px,2.45vw,9.8px)!important}
}
@media(max-width:340px){
  .listHead{gap:5px!important;padding-left:7px!important;padding-right:7px!important}
  .listHead h2{font-size:clamp(13px,4.5vw,16px)!important;letter-spacing:.2px!important}
  #collectionTabs,#labTabs,#hofTopTabs{gap:4px!important;padding-left:6px!important;padding-right:6px!important}
  .collectionTab,.labTab,.hofTopTab{min-height:39px!important;padding-top:5px!important;padding-bottom:5px!important}
}

/* Release cleanup: only the current My Molecules optical correction remains. */
#splash #btnCollect > span[data-i18n="myMolsLabel"]{
  position:relative!important;
  left:-3px!important;
}

/* =====================================================================
   FINAL R45 POLISH 3 · RELEASE READABILITY / ACCESSIBILITY / SAFE LAYOUT
   Small, low-risk refinements only: no board geometry or art direction changes.
   ===================================================================== */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
button,input,select,textarea{font-family:inherit}

/* Keyboard/web focus is visible without changing the touch presentation. */
:where(button,.btn,.collectionTab,.labTab,.hofTopTab,.hofSubTab,.duelRankTab,.profileBtn,.profileDel,[role="button"]):focus-visible{
  outline:3px solid rgba(143,224,255,.96)!important;
  outline-offset:3px!important;
  box-shadow:0 0 0 2px rgba(12,9,40,.92),0 0 0 5px rgba(79,216,255,.35)!important;
}

/* Localization hardening: translated labels may wrap, but can never widen a
   screen/modal beyond the mobile viewport. */
#modalBox,#modalBox *,.listHead,.listHead *,#splashBtns,#splashBtns *,
.collectionTab,.labTab,.hofTopTab,.hofSubTab,.duelRankTab,
.profileRow,.profileRow *,.labShopCard,.labShopCard *,
.hofWorldRow,.hofWorldRow *,.hofChampRow,.hofChampRow *{
  min-width:0;
}
#modalBox h3,#modalBox h4,#modalBox .msub,#modalBox p,#modalBox li,
.btn,.collectionTab,.labTab,.hofTopTab,.hofSubTab,.duelRankTab,
.profileRow b,.profileRow small,.hofWorldRow,.hofChampRow{
  overflow-wrap:anywhere;
  word-break:normal;
}
#modalBox,#modalBox .modalScroll,#modalBox .settingsScroll,#modalBox .guideScroll,
#levelsScr,#collectScr,#labScr,#hofScr,#profileScr,#splash,#gameScr{
  overflow-x:clip!important;
}

/* Primary tab families keep a reliable touch target on normal phones. Short
   displays retain the compact geometry already defined by earlier rules. */
@media(min-height:651px){
  .collectionTab,.labTab,.hofTopTab,.hofSubTab,.duelRankTab{min-height:42px}
}

/* Active tabs get the same crisp text treatment used by main CTA buttons. */
.collectionTab.on,.labTab.on,.hofTopTab.on,.hofSubTab.on,.duelRankTab.on{
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}

/* Disabled controls should read as unavailable, not broken or hidden. */
.btn:disabled,
.collectionTab[aria-disabled="true"],.labTab[aria-disabled="true"],
.hofTopTab[aria-disabled="true"],.hofSubTab[aria-disabled="true"],.duelRankTab[aria-disabled="true"]{
  opacity:.62;
  filter:saturate(.55) brightness(.72)!important;
}

/* Prevent the HUD counters from reflowing when values change (moves, coins,
   timer, impacts) — a small but noticeable premium-game detail. */
#movePill,#reactorCounter,#chainCounter,#crystalCounter,#duelTimer,
.coinVal,#lvCoins,#labCoins,#hofCoins{
  font-variant-numeric:tabular-nums;
}

/* Impact feedback is intentionally brief but more legible after the +1-move
   rule: counter flashes without changing layout. */
#reactorCounter.hit{
  transform-origin:center;
  animation:mxImpactCounterHit .34s cubic-bezier(.2,.85,.25,1) both!important;
}
@keyframes mxImpactCounterHit{
  0%{transform:scale(1);filter:brightness(1)}
  42%{transform:scale(1.09);filter:brightness(1.55)}
  100%{transform:scale(1);filter:brightness(1)}
}
@media(prefers-reduced-motion:reduce){#reactorCounter.hit{animation:none!important}}
body.mxReduceMotion #reactorCounter.hit{animation:none!important}


/* =====================================================================
   FINAL R45 POLISH 4 · LABORATORY + TRAINING CENTER MOBILE COMPOSITION
   Fixes the two release screens reported from iPhone/itch. Layout only.
   ===================================================================== */

/* Laboratory header: fixed tap targets + a title column that can actually fit
   Turkish/German without creating the orphaned last-letter line. */
#labScr .labHead{
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr) auto 48px!important;
  align-items:center!important;
  gap:8px!important;
  padding-left:10px!important;
  padding-right:10px!important;
}
#labScr .labHead #labBack,#labScr .labHead #labHome{
  width:48px!important;height:48px!important;min-width:48px!important;
  padding:7px 3px!important;
}
#labScr .labHead #labTitle{
  width:100%!important;max-width:none!important;min-width:0!important;
  margin:0!important;padding:0 2px!important;
  font-size:clamp(14px,4.05vw,18px)!important;
  line-height:1!important;letter-spacing:.018em!important;
  white-space:nowrap!important;word-break:keep-all!important;
  overflow-wrap:normal!important;text-wrap:nowrap!important;
  overflow:hidden!important;text-overflow:ellipsis!important;
}
#labScr .labCoinBtn{
  min-width:72px!important;max-width:86px!important;height:44px!important;
  padding:7px 9px!important;gap:6px!important;font-size:12px!important;
  white-space:nowrap!important;
}

/* Four tabs stay in one deliberate row. Labels no longer wrap at random
   places; the icon/text proportions are identical across all four tabs. */
#labTabs{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:6px!important;padding:2px 10px 10px!important;
}
#labTabs .labTab{
  width:100%!important;min-width:0!important;height:48px!important;
  padding:7px 3px!important;border-radius:13px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  gap:4px!important;font-size:12px!important;line-height:1!important;
}
#labTabs .labTab span{
  display:block!important;min-width:0!important;
  font-size:clamp(7.7px,2.08vw,9.5px)!important;
  line-height:1!important;letter-spacing:.01em!important;
  white-space:nowrap!important;word-break:keep-all!important;
  overflow-wrap:normal!important;text-overflow:ellipsis!important;overflow:hidden!important;
}

/* The lab room was visually much taller than its actual content on iPhone.
   Compact it while preserving all owned-item placement slots. */
#labOverviewPane .labRoom{height:214px!important;margin-bottom:10px!important}
#labOverviewPane .labRoomGlow{top:10px!important;height:70px!important}
#labOverviewPane .labShelf{top:18px!important}
#labOverviewPane .labWindow{top:18px!important}

/* Career numbers are too cramped as four narrow tiles on 393/430px phones.
   Two clean columns read more like a dashboard and stop label fragmentation. */
@media(max-width:480px){
  #labCareerStrip{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .labMetric{min-height:76px!important;padding:10px 6px!important;display:flex!important;flex-direction:column!important;justify-content:center!important}
  .labMetric>span{font-size:20px!important}.labMetric b{font-size:15px!important}.labMetric small{font-size:8.6px!important;line-height:1.15!important}
}
@media(max-width:360px){
  #labScr .labHead{grid-template-columns:44px minmax(0,1fr) 66px 44px!important;gap:6px!important;padding-left:7px!important;padding-right:7px!important}
  #labScr .labHead #labBack,#labScr .labHead #labHome{width:44px!important;height:44px!important;min-width:44px!important}
  #labScr .labHead #labTitle{font-size:clamp(12.5px,4vw,14px)!important;letter-spacing:0!important}
  #labScr .labCoinBtn{min-width:66px!important;max-width:66px!important;padding-left:6px!important;padding-right:6px!important;font-size:10.5px!important}
  #labTabs{gap:4px!important;padding-left:7px!important;padding-right:7px!important}
  #labTabs .labTab{height:45px!important;padding-left:2px!important;padding-right:2px!important;gap:2px!important}
  #labTabs .labTab span{font-size:7.2px!important;letter-spacing:0!important}
  #labOverviewPane .labRoom{height:198px!important}
}

/* Training Center: one vertical rhythm, equal-width choices, aligned icons and
   a single full-width close action. No floating uneven button widths. */
#modalBox.trainingCenterModal{
  width:min(91vw,390px)!important;
  max-height:calc(100dvh - max(18px,var(--sat)) - max(18px,var(--sab)))!important;
  padding:20px 18px 16px!important;text-align:left!important;
  overflow-y:auto!important;
}
#modalBox.trainingCenterModal .trainingCenterHead{text-align:center!important}
#modalBox.trainingCenterModal .trainingCenterHead h3{margin:0 0 8px!important}
#modalBox.trainingCenterModal .trainingCenterHead .msub{margin:0!important;max-width:330px!important;margin-inline:auto!important}
#modalBox.trainingCenterModal .trainingProgressCard{
  margin:16px 0 14px!important;padding:13px 14px!important;border-radius:17px!important;
  background:rgba(120,231,255,.075)!important;border:1px solid rgba(120,231,255,.28)!important;
}
#modalBox.trainingCenterModal .trainingProgressTop{
  display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:10px!important;
  font-weight:900!important;
}
#modalBox.trainingCenterModal .trainingProgressTop span{font-size:13px!important;line-height:1.2!important}
#modalBox.trainingCenterModal .trainingProgressTop strong{font-size:13px!important;white-space:nowrap!important;text-align:right!important}
#modalBox.trainingCenterModal .trainingProgressTrack{height:8px!important;border-radius:999px!important;background:rgba(255,255,255,.1)!important;overflow:hidden!important;margin-top:10px!important}
#modalBox.trainingCenterModal .trainingProgressTrack i{display:block!important;height:100%!important;background:linear-gradient(90deg,#78e7ff,#ffd36e)!important;border-radius:999px!important}
#modalBox.trainingCenterModal .trainingChoiceList{display:grid!important;gap:9px!important;margin:0!important;padding:0!important}
#modalBox.trainingCenterModal .trainingChoice{
  width:100%!important;min-height:52px!important;margin:0!important;padding:10px 12px!important;
  border-radius:14px!important;display:grid!important;grid-template-columns:30px minmax(0,1fr) 18px!important;
  align-items:center!important;gap:9px!important;text-align:left!important;
  box-shadow:inset 0 0 0 1px rgba(157,123,255,.38)!important;
  background:rgba(255,255,255,.07)!important;
}
#modalBox.trainingCenterModal .trainingChoice .trainingChoiceIcon{width:30px!important;text-align:center!important;font-size:19px!important;line-height:1!important}
#modalBox.trainingCenterModal .trainingChoice>span:nth-child(2){font-size:14px!important;line-height:1.2!important;font-weight:850!important;overflow-wrap:normal!important}
#modalBox.trainingCenterModal .trainingChoice>b{font-size:22px!important;line-height:1!important;color:#b8aaff!important;text-align:right!important}
#modalBox.trainingCenterModal .trainingCenterClose{
  width:100%!important;min-height:48px!important;margin-top:13px!important;padding:11px 12px!important;
  border-radius:14px!important;text-align:center!important;
}
@media(max-width:360px),(max-height:650px){
  #modalBox.trainingCenterModal{width:94vw!important;padding:14px 13px 12px!important}
  #modalBox.trainingCenterModal .trainingCenterHead h3{font-size:18px!important;margin-bottom:6px!important}
  #modalBox.trainingCenterModal .trainingCenterHead .msub{font-size:12px!important;line-height:1.3!important}
  #modalBox.trainingCenterModal .trainingProgressCard{margin:11px 0!important;padding:10px 11px!important}
  #modalBox.trainingCenterModal .trainingChoiceList{gap:7px!important}
  #modalBox.trainingCenterModal .trainingChoice{min-height:47px!important;padding:8px 10px!important;grid-template-columns:27px minmax(0,1fr) 16px!important;gap:7px!important}
  #modalBox.trainingCenterModal .trainingChoice .trainingChoiceIcon{width:27px!important;font-size:17px!important}
  #modalBox.trainingCenterModal .trainingChoice>span:nth-child(2){font-size:12.5px!important}
  #modalBox.trainingCenterModal .trainingCenterClose{min-height:44px!important;margin-top:10px!important}
}


/* =====================================================================
   FINAL R45 POLISH 5 · FULL MOBILE UI SAFETY PASS
   Targeted release fixes after multi-language / short-phone audit.
   No gameplay rules, board geometry, progression, story or FX recipes changed.
   ===================================================================== */

/* Lab tabs: preserve the one-row composition on normal phones, but give the
   text a little more readable size. On 320/340px devices the icon stacks over
   the label so long German/Spanish/Portuguese labels fit without ellipsis. */
#labTabs .labTab span{
  font-size:clamp(8.2px,2.25vw,9.5px)!important;
}
@media(max-width:480px){
  #labTabs .labTab{
    height:52px!important;
    flex-direction:column!important;
    gap:2px!important;
    padding:4px 2px!important;
  }
  #labTabs .labTab span{
    width:100%!important;
    max-width:100%!important;
    font-size:8.2px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:clip!important;
  }
}

/* Collection filters: do not hide the last localized filter off-screen.
   Mobile uses a clean 2×2 control grid rather than a horizontal scroller. */
@media(max-width:430px){
  .collectionTools{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    overflow:visible!important;
    padding:2px 1px 10px!important;
  }
  .collectionFilter{
    width:100%!important;
    min-width:0!important;
    padding:7px 8px!important;
    font-size:10.2px!important;
    letter-spacing:.25px!important;
    text-align:center!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
}

/* Settings: very long localized picker names get the whole line on narrow
   phones; the current value moves underneath instead of squeezing the title. */
@media(max-width:340px){
  #modalBox.settingsModal .settingsPickerRow{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-items:start!important;
    gap:7px!important;
  }
  #modalBox.settingsModal .settingsPickerLabel{
    width:100%!important;
    max-width:100%!important;
  }
  #modalBox.settingsModal .settingsPickerValue{
    width:100%!important;
    justify-content:space-between!important;
  }
}

/* Splash mascot remains visually edge-aligned, but its interactive box never
   extends outside the viewport/safe area. */
@media(max-width:480px){
  #splash #einBoxS{
    right:max(5px,var(--sar))!important;
  }
}

/* Gameplay action column: a normal level can show Undo, Hint, Hammer,
   One-Square, Barrier and Restart at the same time. On short phones keep all
   six genuine 44px+ touch targets above the bottom navigation instead of
   letting the column overlap it. */
@media(max-height:720px){
  #gameScr #actionCol{gap:5px!important;transform:none!important}
  #gameScr #actionCol .btn.iconBadge{
    width:52px!important;height:50px!important;
    min-width:52px!important;min-height:50px!important;
    padding:4px 3px!important;
  }
  #gameScr #actionCol .btn.iconBadge .badgeIcon{
    width:22px!important;height:22px!important;padding:2px!important;
  }
  #gameScr #actionCol .btn.iconBadge small{
    display:block!important;max-width:46px!important;
    font-size:6.8px!important;line-height:1!important;letter-spacing:.15px!important;
    white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  }
}
@media(max-height:620px){
  #gameScr #actionCol{gap:4px!important}
  #gameScr #actionCol .btn.iconBadge{
    width:48px!important;height:44px!important;
    min-width:48px!important;min-height:44px!important;
    padding:3px 2px!important;
  }
  #gameScr #actionCol .btn.iconBadge .badgeIcon{
    width:19px!important;height:19px!important;padding:1px!important;
  }
  #gameScr #actionCol .btn.iconBadge small{
    max-width:44px!important;font-size:6.2px!important;letter-spacing:0!important;
  }
}


/* FINAL R45 POLISH 6 · premium atom micro-FX (presentation only) */
#mxCompletionSnap{
  position:fixed;z-index:91;pointer-events:none;width:74px;height:74px;
  transform:translate(-50%,-50%);filter:drop-shadow(0 0 8px var(--mx-snap,#7ee8ff));
}
#mxCompletionSnap .ring{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%) scale(.2);opacity:0}
#mxCompletionSnap .ring.a{width:28px;height:28px;border:2px solid var(--mx-snap-hi,#fff);box-shadow:0 0 12px var(--mx-snap,#7ee8ff);animation:mxCompletionRingA .48s cubic-bezier(.15,.8,.2,1) both}
#mxCompletionSnap .ring.b{width:42px;height:42px;border:1.5px solid var(--mx-snap,#7ee8ff);animation:mxCompletionRingB .58s .045s cubic-bezier(.15,.8,.2,1) both}
#mxCompletionSnap .flare{position:absolute;left:50%;top:50%;background:linear-gradient(90deg,transparent,var(--mx-snap-hi,#fff),transparent);opacity:0;transform:translate(-50%,-50%) scaleX(.25)}
#mxCompletionSnap .flare.h{width:68px;height:2px;animation:mxCompletionFlareH .42s .035s ease-out both}
#mxCompletionSnap .flare.v{width:54px;height:1.5px;transform:translate(-50%,-50%) rotate(90deg) scaleX(.25);animation:mxCompletionFlareV .42s .055s ease-out both}
#boardFrame.mxCompletionHold{animation:mxCompletionHold .20s ease-out both}
@keyframes mxCompletionRingA{0%{opacity:0;transform:translate(-50%,-50%) scale(.18)}24%{opacity:1}72%{opacity:.82;transform:translate(-50%,-50%) scale(1.18)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.52)}}
@keyframes mxCompletionRingB{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}28%{opacity:.74}100%{opacity:0;transform:translate(-50%,-50%) scale(1.62)}}
@keyframes mxCompletionFlareH{0%{opacity:0;transform:translate(-50%,-50%) scaleX(.15)}35%{opacity:.9}100%{opacity:0;transform:translate(-50%,-50%) scaleX(1)}}
@keyframes mxCompletionFlareV{0%{opacity:0;transform:translate(-50%,-50%) rotate(90deg) scaleX(.15)}35%{opacity:.72}100%{opacity:0;transform:translate(-50%,-50%) rotate(90deg) scaleX(1)}}
@keyframes mxCompletionHold{0%{filter:brightness(1)}45%{filter:brightness(1.075)}100%{filter:brightness(1)}}
@media(prefers-reduced-motion:reduce){#mxCompletionSnap{display:none!important}#boardFrame.mxCompletionHold{animation:none!important}}


/* =====================================================================
   FINAL R45 POLISH 8 · DR. E SCENE COMPOSITING + PREMIUM TOOLS
   Presentation-only integration. Existing Dr. E assets and gameplay remain intact.
   ===================================================================== */

/* Main-menu Dr. E is now composited into the laboratory instead of reading as
   a hard-cut transparent PNG. The bottom haze deliberately hides the crop edge. */
#splash #einBoxS{
  isolation:isolate!important;
  overflow:visible!important;
  animation:mxDrEMenuScene 6.4s ease-in-out infinite!important;
}
#splash #einBoxS::before{
  content:"";position:absolute;pointer-events:none;z-index:1;
  left:10%;right:-4%;top:10%;bottom:2%;border-radius:48% 42% 18% 34%;
  background:
    radial-gradient(ellipse at 58% 61%,rgba(84,219,255,.15),rgba(92,89,218,.055) 46%,transparent 72%),
    radial-gradient(ellipse at 64% 96%,rgba(99,223,255,.14),transparent 54%);
  filter:blur(3px);opacity:.9;
}
#splash #einBoxS .einImg{
  position:relative!important;z-index:4!important;
  filter:drop-shadow(-5px -1px 9px rgba(88,224,255,.16)) drop-shadow(7px 7px 16px rgba(3,8,26,.60)) saturate(1.035) contrast(1.015)!important;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 94%,rgba(0,0,0,.94) 96%,rgba(0,0,0,.55) 98.5%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 94%,rgba(0,0,0,.94) 96%,rgba(0,0,0,.55) 98.5%,transparent 100%);
}
#splash #einBoxS::after{
  content:"";position:absolute;pointer-events:none;z-index:9;
  left:1%;right:-5%;bottom:-1%;height:13%;border-radius:55% 48% 0 0/78% 72% 0 0;
  background:
    linear-gradient(180deg,transparent 0%,rgba(58,187,226,.09) 24%,rgba(9,23,49,.54) 63%,rgba(5,13,31,.93) 100%),
    radial-gradient(ellipse at 58% 12%,rgba(116,236,255,.26),transparent 52%);
  border-top:1px solid rgba(140,239,255,.18);
  box-shadow:0 -7px 18px rgba(45,180,224,.08),inset 0 1px rgba(255,255,255,.05);
}
@keyframes mxDrEMenuScene{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.8px)}}

/* In-game Dr. E: less cut-out, more embedded laboratory companion. */
#einBoxG{isolation:isolate!important}
#einBoxG::before{
  content:"";position:absolute;pointer-events:none;z-index:0;
  inset:14% 7% 4% 10%;border-radius:50%;
  background:radial-gradient(ellipse at 58% 62%,rgba(86,219,255,.115),rgba(119,96,236,.04) 48%,transparent 72%);
  filter:blur(3px);opacity:.82;
}
#einBoxG{filter:drop-shadow(-3px 0 6px rgba(85,223,255,.13)) drop-shadow(5px 6px 11px rgba(3,8,25,.58))}
#einBoxG .einImg{
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 95%,rgba(0,0,0,.88) 98%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 95%,rgba(0,0,0,.88) 98%,transparent 100%);
}
#gameScr #einBoxG .einFx::after{
  content:"";position:absolute;pointer-events:none;z-index:45;
  left:8%;right:-5%;bottom:-2%;height:11%;border-radius:50% 42% 0 0;
  background:linear-gradient(180deg,transparent,rgba(39,164,208,.08) 28%,rgba(7,20,43,.72) 82%,rgba(5,13,30,.92));
  border-top:1px solid rgba(125,232,255,.13);
}

/* Premium hammer strike: the SVG remains the approved icon; these are only
   transient contact cues. */
#mxToolFx.hammer,#mxToolFx.barrier{isolation:isolate}
#mxToolFx .mxStrikeHammer,#mxToolFx .mxBuildBarrier{position:relative;z-index:3}
#mxToolFx .mxHammerImpactHalo,
#mxToolFx .mxHammerImpactFlash,
#mxToolFx .mxBarrierBuildRing{position:absolute;left:50%;top:58%;pointer-events:none;z-index:1;border-radius:50%}
#mxToolFx .mxHammerImpactHalo{width:42px;height:42px;border:2px solid rgba(255,239,165,.92);box-shadow:0 0 14px rgba(255,184,64,.72);animation:mxHammerHalo .40s .18s ease-out both}
#mxToolFx .mxHammerImpactFlash{width:58px;height:3px;background:linear-gradient(90deg,transparent,#fff7c4,transparent);box-shadow:0 0 9px rgba(120,232,255,.72);animation:mxHammerFlash .28s .19s ease-out both}
#mxToolFx .mxBarrierBuildRing{top:50%;border:1.5px solid rgba(156,247,255,.92);box-shadow:0 0 12px rgba(76,226,255,.55);opacity:0}
#mxToolFx .mxBarrierBuildRing.a{width:34px;height:34px;animation:mxBarrierRingLock .54s .06s ease-out both}
#mxToolFx .mxBarrierBuildRing.b{width:52px;height:52px;animation:mxBarrierRingLock .60s .12s ease-out both}
@keyframes mxHammerHalo{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}32%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.65)}}
@keyframes mxHammerFlash{0%{opacity:0;transform:translate(-50%,-50%) rotate(-12deg) scaleX(.2)}35%{opacity:.95}100%{opacity:0;transform:translate(-50%,-50%) rotate(-12deg) scaleX(1.25)}}
@keyframes mxBarrierRingLock{0%{opacity:0;transform:translate(-50%,-50%) scale(1.55)}42%{opacity:.9}100%{opacity:0;transform:translate(-50%,-50%) scale(.58)}}

/* Active booster buttons feel like tools, not generic menu tiles. */
#btnHammer.on{box-shadow:0 0 0 2px rgba(255,218,112,.34),0 0 20px rgba(255,173,59,.42),inset 0 1px 0 rgba(255,255,255,.22)!important}
#btnBarrier.on{box-shadow:0 0 0 2px rgba(108,235,255,.32),0 0 22px rgba(63,217,255,.44),inset 0 1px 0 rgba(255,255,255,.22)!important}

@media(prefers-reduced-motion:reduce){
  #splash #einBoxS{animation:none!important;transform:none!important}
  #mxToolFx .mxHammerImpactHalo,#mxToolFx .mxHammerImpactFlash,#mxToolFx .mxBarrierBuildRing{display:none!important}
}
body.mxReduceMotion #splash #einBoxS{animation:none!important;transform:none!important}
body.mxReduceMotion #mxToolFx .mxHammerImpactHalo,
body.mxReduceMotion #mxToolFx .mxHammerImpactFlash,
body.mxReduceMotion #mxToolFx .mxBarrierBuildRing{display:none!important}


/* ================= POLISH 8 INTRO — STUDIO IDENT + LAB CHOREOGRAPHY =================
   Existing artwork is preserved. This layer only changes timing, compositing and
   motion so the two identities feel intentional rather than like static splash art. */
#studioScr{transition:opacity .46s ease,transform .46s cubic-bezier(.2,.72,.2,1)!important}
#studioScr.fadeOut{opacity:0!important;transform:scale(1.009)!important}
#studioLogo{background:transparent!important;animation:studioLogoIn .72s ease-out both!important;will-change:transform,opacity}
#studioEnergyCore{
  position:absolute;left:50%;top:41.2%;width:min(43vw,260px);aspect-ratio:1;z-index:2;
  transform:translate(-50%,-50%) scale(.56);border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(226,249,255,.9) 0 4%,rgba(64,188,255,.44) 18%,rgba(31,133,255,.20) 40%,rgba(35,112,255,0) 72%);
  mix-blend-mode:screen;filter:blur(2px)
}
#studioEnergySweep{
  position:absolute;left:11%;right:11%;top:61.8%;height:2px;z-index:2;pointer-events:none;opacity:0;overflow:visible;
  background:linear-gradient(90deg,transparent,rgba(60,177,255,.12) 20%,rgba(110,218,255,.8) 50%,rgba(60,177,255,.12) 80%,transparent);
  box-shadow:0 0 10px rgba(75,188,255,.28);transform:scaleX(.08);transform-origin:center
}
#studioScr.started #studioLogo{animation:mxStudioImageSettle 2.05s cubic-bezier(.2,.72,.2,1) both!important}
#studioScr.started #studioEnergyCore{animation:mxStudioCore 1.42s cubic-bezier(.18,.82,.2,1) .08s both}
#studioScr.started #studioEnergySweep{animation:mxStudioSweep .72s cubic-bezier(.18,.72,.2,1) .72s both}
@keyframes mxStudioImageSettle{
  /* Keep the PNG's pure-white canvas identical to the full-screen white stage.
     Filtering the whole image darkened its white canvas and exposed a rectangular frame. */
  0%{filter:none;transform:scale(1)}
  28%{filter:none;transform:scale(1.002)}
  62%{filter:none;transform:scale(.999)}
  100%{filter:none;transform:scale(1)}
}
@keyframes mxStudioCore{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.48);filter:blur(7px)}
  18%{opacity:.48}
  42%{opacity:.88;transform:translate(-50%,-50%) scale(1.08);filter:blur(1px)}
  66%{opacity:.30;transform:translate(-50%,-50%) scale(.96);filter:blur(2px)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.12);filter:blur(5px)}
}
@keyframes mxStudioSweep{
  0%{opacity:0;transform:scaleX(.08)}
  18%{opacity:.9}
  60%{opacity:.72;transform:scaleX(1)}
  100%{opacity:0;transform:scaleX(1.04)}
}
#studioTap{min-width:176px!important;padding:10px 17px 9px!important;gap:0!important;flex-direction:column!important;line-height:1.05!important}
#studioTap b{font-size:12px;font-weight:1000;letter-spacing:.72px;color:#353153}
#studioTap small{position:static!important;margin-top:5px!important;display:flex;align-items:center;justify-content:center;gap:5px;color:#686188!important;font-size:8.5px!important;line-height:1!important;letter-spacing:.55px!important;text-shadow:none!important}
#studioTap small i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#38aef7;box-shadow:0 0 7px rgba(56,174,247,.66)}
#studioScr.started #studioTap{opacity:0!important;pointer-events:none!important;animation:none!important}

/* Two relay attempts before the lamp settles on. */
#bootBulbGlow.preflash{animation:mxBulbPreflash .20s ease-out both!important}
#bootBulbGlow.preflash2{animation:mxBulbPreflash2 .22s ease-out both!important}
@keyframes mxBulbPreflash{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.52)}
  36%{opacity:.48;transform:translate(-50%,-50%) scale(.86)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.66)}
}
@keyframes mxBulbPreflash2{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.60)}
  34%{opacity:.72;transform:translate(-50%,-50%) scale(1.02)}
  100%{opacity:.05;transform:translate(-50%,-50%) scale(.76)}
}

/* Keep chemistry dormant until the lamp actually powers the lab. */
#bootScr.bootSequence #bootLogoHalo{opacity:0!important;animation:none!important}
#bootScr.bootSequence .bootBub{opacity:0;transition:opacity .42s ease}
#bootScr.bootSequence .bootAtomGlow{opacity:0!important;animation:none!important}
#bootScr.bootSequence .bootBondSpark{opacity:0;transition:opacity .32s ease}
#bootScr.mxBootChem #bootBubTopLeft{opacity:1;transition-delay:.02s}
#bootScr.mxBootChem #bootBubRightTube{opacity:1;transition-delay:.16s}
#bootScr.mxBootChem #bootBubFlask{opacity:1;transition-delay:.28s}
#bootScr.mxBootChem #bootBubTube1{opacity:1;transition-delay:.34s}
#bootScr.mxBootChem #bootBubTube2{opacity:1;transition-delay:.41s}
#bootScr.mxBootChem #bootBubTube3{opacity:1;transition-delay:.48s}
#bootScr.mxBootChem #bootBubTube4{opacity:1;transition-delay:.55s}
#bootScr.mxBootAtoms #bootGlowH{animation:mxBootAtomWake .62s ease-out .00s both!important,atomGlowPulse 2.9s ease-in-out .62s infinite!important}
#bootScr.mxBootAtoms #bootGlowO{animation:mxBootAtomWake .62s ease-out .17s both!important,atomGlowPulse 2.9s ease-in-out .79s infinite!important}
#bootScr.mxBootAtoms #bootGlowC{animation:mxBootAtomWake .62s ease-out .34s both!important,atomGlowPulse 2.9s ease-in-out .96s infinite!important}
#bootScr.mxBootAtoms .bootBondSpark{opacity:.86;transition-delay:.42s}
#bootScr.mxBootReveal #bootLogoHalo{opacity:1!important;animation:mxBootHaloProfessional 1.22s ease-out both!important}
#bootScr.bootFinished #bootLogoHalo{opacity:.52!important;animation:logoHaloPulse 3.8s ease-in-out infinite!important}
#bootScr.bootFinished .bootAtomGlow{opacity:.72!important}
#bootScr.bootFinished .bootBondSpark{opacity:.86}
#bootScr.bootFinished .bootBub{opacity:1}
#bootScr.bootFinished #bootBulbGlow{opacity:.9}

/* Waiting-for-tap state stays alive without becoming noisy. */
#bootScr.bootFinished #btnBootPlay.on{animation:mxBootTapPulse 2.15s ease-in-out infinite!important}
#bootScr.bootFinished #bootShine::after{animation:titleShine 1.75s ease-in-out .65s infinite}

@media(prefers-reduced-motion:reduce){
  #studioScr.started #studioLogo,#studioScr.started #studioEnergyCore,#studioScr.started #studioEnergySweep,
  #bootBulbGlow.preflash,#bootBulbGlow.preflash2,#bootScr.mxBootAtoms .bootAtomGlow{animation:none!important}
  #studioEnergyCore,#studioEnergySweep{display:none!important}
  #bootScr.bootSequence .bootBub,#bootScr.bootSequence .bootBondSpark{opacity:1!important}
  #bootScr.bootSequence .bootAtomGlow{opacity:.72!important}
  #bootScr.bootSequence #bootLogoHalo{opacity:.52!important}
}

/* =====================================================================
   FINAL R45 AAA BUTTON / LABEL POLISH
   Release-blocking control pass: optical centering, predictable wrapping,
   language-safe labels and consistent touch geometry. No gameplay rules.
   ===================================================================== */
:root{
  --mx-aa-btn-h:46px;
  --mx-aa-btn-r:15px;
  --mx-aa-btn-font:clamp(12px,3.25vw,15px);
  --mx-aa-btn-line:1.13;
}

/* The native button element itself must never become wider than its card/screen. */
button,a.btn{
  max-width:100%;
  box-sizing:border-box;
  font-family:inherit;
}

/* Standard action buttons: center the complete label block horizontally and
   vertically. Long localized copy may use two lines instead of clipping. */
.btn:not(.iconBadge):not(.mt):not(.profileBtn){
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  min-width:0!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:auto;
  text-wrap:balance;
  line-height:var(--mx-aa-btn-line)!important;
}
.btn:not(.iconBadge):not(.mt):not(.profileBtn)>span,
.btn:not(.iconBadge):not(.mt):not(.profileBtn)>b,
.btn:not(.iconBadge):not(.mt):not(.profileBtn)>small{
  min-width:0;
  max-width:100%;
}

/* Main menu: remove historical optical nudges. The CTA column and every label
   now use the same mathematical center. */
#splash #splashBtns{
  transform:none!important;
  align-items:stretch!important;
}
#splashBtns .btn:not(.iconBadge){
  width:100%!important;
  min-height:46px!important;
  padding:9px clamp(18px,5.4vw,30px)!important;
  font-size:clamp(13px,3.75vw,16px)!important;
  line-height:1.12!important;
  letter-spacing:.22px!important;
  text-align:center!important;
}
#splash #btnCollect > span[data-i18n="myMolsLabel"]{
  position:static!important;
  left:auto!important;
  transform:none!important;
}

/* Shared modal action system. Auto-fit columns collapse to one column when a
   translated pair would become too narrow, instead of squeezing or clipping. */
#modalBox .mrow{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(142px,100%),1fr))!important;
  align-items:stretch!important;
  justify-content:center!important;
  gap:10px!important;
  width:100%!important;
}
#modalBox .mrow>.btn{
  width:100%!important;
  min-width:0!important;
  min-height:44px!important;
  margin:0!important;
  padding:9px 12px!important;
  font-size:clamp(11.5px,3.15vw,14.5px)!important;
  line-height:1.14!important;
  text-align:center!important;
  white-space:normal!important;
  overflow:visible!important;
}
#modalBox .mrow>.btn.green,
#modalBox .mrow>.btn.amber,
#modalBox .mxFirstUseActions .btn,
#modalBox .modalFixedClose .btn{
  min-height:46px!important;
}
#modalBox .accountActions .btn,
#modalBox .settingsActions .btn,
#modalBox .aboutActions .btn,
#modalBox .mtclose,
#modalBox .trainingCenterClose,
#modalBox .languageSheetCancel{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  width:100%!important;
  min-width:0!important;
  min-height:44px!important;
  padding:9px 12px!important;
  font-size:clamp(11.5px,3.15vw,14.5px)!important;
  line-height:1.14!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  text-wrap:balance;
}

/* Confirmation dialogs with verbose German/Portuguese/Japanese copy become a
   deliberate vertical stack on the smallest phones. */
@media(max-width:360px){
  #modalBox .mrow{grid-template-columns:1fr!important}
  #modalBox .mrow>.btn{min-height:44px!important;font-size:clamp(11px,3.7vw,13.5px)!important}
}

/* Result actions are short and frequent; retain the two-column rhythm on
   normal phones, but permit a safe single-column fallback on very narrow UI. */
#modalBox.winResultModal>.mrow{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
}
#modalBox.winResultModal>.mrow>.btn{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  white-space:normal!important;
  min-width:0!important;
}
@media(max-width:335px){
  #modalBox.winResultModal>.mrow{grid-template-columns:1fr!important}
}

/* Top-level tab families. No ellipsis and no one-line clipping: translated
   labels receive a centered two-line lane with a stable tap target. */
.collectionTab,.labTab,.hofTopTab,.hofSubTab,.duelRankTab{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  min-width:0!important;
  white-space:normal!important;
  overflow:visible!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:auto;
  text-wrap:balance;
  line-height:1.08!important;
}
#collectionTabs .collectionTab{
  min-height:48px!important;
  padding:6px 3px!important;
  gap:3px!important;
  flex-direction:column!important;
  font-size:clamp(8.6px,2.45vw,10.5px)!important;
}
#collectionTabs .collectionTab span{
  display:block!important;
  width:100%!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  line-height:1.05!important;
}
#labTabs .labTab{
  min-height:54px!important;
  height:auto!important;
  padding:5px 2px!important;
  flex-direction:column!important;
  gap:2px!important;
}
#labTabs .labTab span{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  line-height:1.05!important;
  font-size:clamp(7.6px,2.15vw,9.3px)!important;
  text-align:center!important;
}
#hofTopTabs .hofTopTab{
  min-height:46px!important;
  padding:7px 5px!important;
  font-size:clamp(9px,2.6vw,11.5px)!important;
}
#hofSubTabs .hofSubTab,#duelRankTabs .duelRankTab{
  min-height:40px!important;
  padding:6px 3px!important;
  font-size:clamp(8.2px,2.35vw,10px)!important;
}

/* Collection filter row: previous ellipsis could hide a translated filter.
   A compact two-line button is preferable to truncated copy. */
.collectionFilter{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  min-width:0!important;
  min-height:38px!important;
  padding:6px 8px!important;
  line-height:1.08!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  text-wrap:balance;
}
@media(max-width:430px){
  .collectionFilter{font-size:clamp(9px,2.7vw,10.5px)!important}
}

/* In-game action tower and bottom navigation. Compact labels are always
   centered under their icon and can wrap to two very short lines. */
#actionCol .act,#navBtns .navB{
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}
#actionCol .act small{
  display:block!important;
  width:100%!important;
  max-width:52px!important;
  margin:0 auto!important;
  font-size:clamp(7.2px,1.95vw,8.3px)!important;
  line-height:1.02!important;
  letter-spacing:.12px!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  text-align:center!important;
}
#navBtns .navB small{
  display:block!important;
  width:100%!important;
  max-width:48px!important;
  margin:0 auto!important;
  font-size:clamp(6.7px,1.8vw,7.5px)!important;
  line-height:1.02!important;
  letter-spacing:.08px!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  text-align:center!important;
}

/* Simple secondary buttons that are not .btn. */
.languageSheetCancel,.onlineQuickMsgBtn,.onlineQuickTrayClose,
.onlineSpectatorLeave,.hofRefreshBtn,.storySkipText{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  min-width:0!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  line-height:1.12!important;
}
.onlineQuickMsgBtn{padding:8px 9px!important;font-size:clamp(10px,2.8vw,12px)!important}

/* Rich card-buttons keep their intentional icon/copy layout, but their label
   cells are protected from overflow. */
.trainingChoice,.duelChoice,.bonusModeCard,.bonusMissionCard,.moleculoCard,
.mechanicGuideRow,.languageSheetChoice,.settingsPickerRow,.languageSettingRow{
  max-width:100%!important;
  box-sizing:border-box!important;
}
.trainingChoice>span:nth-child(2),
.duelChoice>b,.duelChoice>small,
.bonusModeCard b,.bonusModeCard small,
.bonusMissionCard b,.bonusMissionCard span,.bonusMissionCard em,.bonusMissionCard small,
.moleculoCard b,.moleculoCard small,
.mechanicGuideRow b,.mechanicGuideRow small{
  min-width:0!important;
  max-width:100%!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  white-space:normal!important;
}

/* Laboratory purchase/equip/reward actions use the same polished CTA lane. */
.labBuy,.labEquip,.missionClaim,.rewardSpotBtn{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  width:100%!important;
  min-width:0!important;
  min-height:40px!important;
  padding:7px 8px!important;
  font-size:clamp(9px,2.55vw,11px)!important;
  line-height:1.08!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  text-wrap:balance;
}

/* Profile rows are information-rich list controls, not centered CTAs. Keep the
   identity layout but guarantee that the right-side delete control is centered. */
#profileScr .profileDel,.accountCloseX,.dbtn,.mtplay,.tog,.iconbtn{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}

/* Long-language safety: preserve readable type before shrinking below 10px. */
html[lang="de"] #modalBox .mrow>.btn,
html[lang="pt"] #modalBox .mrow>.btn,
html[lang="es"] #modalBox .mrow>.btn,
html[lang="fr"] #modalBox .mrow>.btn{
  letter-spacing:0!important;
}
html[lang="ja"] button,html[lang="ja"] .btn,
html[lang="zh"] button,html[lang="zh"] .btn{
  letter-spacing:0!important;
  word-break:keep-all!important;
}
html[lang="zh"] body{line-break:strict}
html[lang="zh"] #modalBox .msub,
html[lang="zh"] .storyNarration,
html[lang="zh"] .speechBubble{overflow-wrap:anywhere;word-break:normal}

/* Short phones: spacing is reduced before typography, maintaining touch size. */
@media(max-height:680px){
  #splashBtns .btn:not(.iconBadge){min-height:42px!important;padding-top:7px!important;padding-bottom:7px!important}
  #labTabs .labTab{min-height:48px!important}
  #collectionTabs .collectionTab{min-height:44px!important}
  #modalBox .mrow>.btn{min-height:42px!important;padding-top:8px!important;padding-bottom:8px!important}
}

/* Text buttons without the shared .btn class still follow the same release rules. */
#bannerDiscover,#tutorialSkip{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  max-width:min(92vw,360px)!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  line-height:1.1!important;
  text-wrap:balance;
}
#bannerDiscover{min-height:34px!important}
#tutorialSkip{min-height:36px!important;padding:7px 11px!important}
#btnAbout,#hofNameEdit,#storySkip{
  display:grid!important;
  place-items:center!important;
  text-align:center!important;
}
/* Remaining icon/value buttons found by the full button-tag coverage scan. */
#labCoinChip,.molFav{display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important}

/* Main-menu dock labels keep their designed two-line hierarchy but are never
   optically left/right biased after localization. */
.learningDockMain,.learningDockMini,.guideDockMain,.guideDockMini,
.labDockMain,.labDockMini,.duelMini,.duelVs,.trophyMini{
  max-width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  line-height:1.02!important;
}

/* ========================================================================
   R45 FINAL — proportional CTA + compact dock polish
   Real-device follow-up from itch.io iPhone QA.
   Goals: readable compact bottom labels, proportional training CTAs,
   unclipped green/guided buttons, and more usable account/player actions.
   ======================================================================== */

/* Bottom in-game navigation: keep the 52px touch target, but make long
   localized labels live inside it instead of looking squeezed outside. */
#navBtns .navB{
  width:52px!important;
  height:64px!important;
  min-width:52px!important;
  box-sizing:border-box!important;
  padding-left:3px!important;
  padding-right:3px!important;
  overflow:visible!important;
}
#navBtns .navB small{
  max-width:100%!important;
  padding:0!important;
  font-size:7px!important;
  line-height:1!important;
  letter-spacing:-.10px!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  transform:none!important;
}
/* Turkish MOLEKÜLLER is the longest dock label in the current release. */
html[lang="tr"] #btnMols small{font-size:6.35px!important;letter-spacing:-.22px!important}
html[lang="de"] #btnMols small{font-size:6.55px!important;letter-spacing:-.18px!important}
html[lang="pt"] #btnMols small,html[lang="es"] #btnMols small{font-size:6.45px!important;letter-spacing:-.18px!important}

/* Training experiment CTAs: both actions belong to the same visual scale.
   They are intentionally a touch smaller than the previous release. */
#modalBox #mMechanicTry,
#modalBox #mMechanicNext,
#modalBox #mMechanicRepeat,
#modalBox #mMechanicContinue{
  width:min(82%,310px)!important;
  min-width:0!important;
  min-height:43px!important;
  height:auto!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding:9px 14px!important;
  border-radius:15px!important;
  font-size:clamp(12.5px,3.45vw,14.5px)!important;
  line-height:1.08!important;
  letter-spacing:.12px!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  white-space:normal!important;
  text-wrap:balance!important;
  overflow:visible!important;
}
#modalBox:has(#mMechanicTry) .mrow,
#modalBox:has(#mMechanicContinue) .mrow{
  width:100%!important;
  gap:9px!important;
  padding:0 8px 5px!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}

/* Green / guided modal CTAs need real breathing room around their glow.
   The previous broad rule could visually clip the left halo on iPhone. */
#modalBox .btn.green,
#modalBox .mxGuidedTarget.btn{
  max-width:calc(100% - 24px)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
  overflow:visible!important;
  background-clip:padding-box!important;
}
#modalBox .mrow{overflow:visible!important}

/* Account & Players: prior compact-phone overrides made these actions feel
   undersized relative to the rest of the game. Raise them one tier without
   turning them into oversized primary CTAs. */
#modalBox.accountModal .accountActions{
  gap:7px!important;
}
#modalBox.accountModal .accountActions .btn{
  min-height:44px!important;
  padding:9px 10px!important;
  border-radius:14px!important;
  font-size:clamp(12.2px,3.35vw,13.6px)!important;
  line-height:1.12!important;
  letter-spacing:.08px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  white-space:normal!important;
}
#modalBox.accountModal .accountActions .btn.google::before{
  width:21px!important;height:21px!important;font-size:14px!important;flex:0 0 21px!important;
}

@media(max-width:370px){
  #navBtns .navB small{font-size:6.7px!important}
  html[lang="tr"] #btnMols small{font-size:6.05px!important}
  #modalBox #mMechanicTry,#modalBox #mMechanicNext,#modalBox #mMechanicRepeat,#modalBox #mMechanicContinue{
    width:min(84%,290px)!important;font-size:12.4px!important;padding-left:10px!important;padding-right:10px!important;
  }
}
@media(max-height:650px){
  #modalBox.accountModal .accountActions .btn{min-height:41px!important;padding-top:7px!important;padding-bottom:7px!important}
}

/* R46 ranking safety: one unobtrusive, accessible action per public row. */
.hofWorldRow{grid-template-columns:28px minmax(0,1fr) auto 44px}
.duelRankRow{grid-template-columns:38px minmax(0,1fr) auto 44px}
.rankingSafetyBtn{
  width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border-radius:12px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.055);color:#b9bdd6;
  display:grid;place-items:center;font:900 21px/1 system-ui,sans-serif;touch-action:manipulation;cursor:pointer;
}
.rankingSafetyBtn:active{transform:scale(.94);background:rgba(157,123,255,.18);color:#fff}
#modalBox.rankingSafetyModal{width:min(91vw,390px)}
#modalBox.rankingSafetyModal .mrow{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
#modalBox.rankingSafetyModal .mrow .btn{width:100%!important;max-width:100%!important;margin:0!important}
@media(max-width:390px){
  .hofWorldRow{grid-template-columns:25px minmax(0,1fr) 44px}
  .hofWorldRow .sc{grid-column:2;text-align:left}
  .hofWorldRow .rankingSafetyBtn{grid-column:3;grid-row:1 / span 2}
  .duelRankRow{grid-template-columns:34px minmax(0,1fr) 44px}
  .duelRankScore{grid-column:2;text-align:left}
  .duelRankRow .rankingSafetyBtn{grid-column:3;grid-row:1 / span 2}
}

/* =====================================================================
   R46 WEB · COMPLETE SHORT-ACTION CENTERING PASS
   Position only: existing widths, colors, radii, shadows and animations stay
   unchanged. This final cascade guard also covers dynamically-created modals.
   ===================================================================== */

/* Grid-based modal actions: a deliberately short button sits in the centre of
   its own action lane. Full-width and paired controls are visually unchanged. */
#modalBox .mrow{
  justify-items:center!important;
}
#modalBox .mrow>.btn,
#modalBox .mrow>a.btn{
  justify-self:center!important;
}

/* A one-action row always belongs to the centre of the dialog, regardless of
   older modal-specific margin resets. */
#modalBox .mrow:has(>.btn:only-child)>.btn,
#modalBox .mrow:has(>a.btn:only-child)>a.btn{
  margin-left:auto!important;
  margin-right:auto!important;
  align-self:center!important;
  justify-self:center!important;
}

/* Account/cloud actions are a vertical flex stack. The primary green action is
   intentionally narrower for hierarchy; centre it instead of leaving it on
   the left edge. Other 100%-wide account buttons keep their exact dimensions. */
#modalBox.accountModal .accountActions{
  align-items:center!important;
}
#modalBox.accountModal .accountActions>.btn,
#modalBox.accountModal .accountActions>a.btn{
  align-self:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
#modalBox.accountModal .accountActions>.accountUtilityRow,
#modalBox.accountModal .accountActions>.accountDivider{
  align-self:stretch!important;
  width:100%!important;
}
#modalBox.accountModal.cloudStatusModal .accountActions>#cloudSyncNow{
  width:calc(100% - 24px)!important;
  max-width:calc(100% - 24px)!important;
  align-self:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Remaining vertical action families use the same centre contract. These rules
   do not assign a new width, so each screen keeps its established proportions. */
#modalBox :is(.mxFirstUseActions,.mxDeleteActions,.aboutActions,.nobelShareActions)>.btn,
#modalBox :is(.mxFirstUseActions,.mxDeleteActions,.aboutActions,.nobelShareActions)>a.btn,
#modalBox .modalFixedClose>.btn,
#modalBox .modalFixedClose>a.btn{
  align-self:center!important;
  justify-self:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Non-modal short text action retained by the game UI. */
#profileScr #profileBack{
  align-self:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* =====================================================================
   R50 · STRICT MULTI-LANGUAGE LAYOUT / OVERFLOW SAFETY
   Responsive polish only. No gameplay, board geometry, progression, story,
   online rules, economy, audio or art assets are changed here.
   ===================================================================== */

/* Every localized UI surface must remain inside the viewport. */
#modalBox,
#modalBox * ,
#splashBtns,#splashBtns *,
.listHead,.listHead *,
#collectionTabs,#collectionTabs *,
#labTabs,#labTabs *,
#hofTopTabs,#hofTopTabs *,
#hofSubTabs,#hofSubTabs *,
#duelRankTabs,#duelRankTabs *{
  box-sizing:border-box;
  min-width:0;
}

#modalBox{
  max-width:calc(100vw - max(14px,var(--sal)) - max(14px,var(--sar)))!important;
}

/* Long translations are allowed to wrap rather than disappear or push a
   neighboring control off-screen. */
#modalBox h3,#modalBox h4,#modalBox .msub,
#modalBox button,#modalBox .btn,
#splashBtns .btn,
.collectionTab,.labTab,.hofTopTab,.hofSubTab,.duelRankTab,
.collectionFilter,.trainingChoice,.duelChoice,.languageSheetChoice,
.settingsPickerRow,.languageSettingRow{
  max-width:100%!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}

html[lang="de"] :is(#modalBox button,#modalBox .btn,#splashBtns .btn,.collectionTab,.labTab,.hofTopTab,.hofSubTab,.duelRankTab,.trainingChoice,.duelChoice),
html[lang="fr"] :is(#modalBox button,#modalBox .btn,#splashBtns .btn,.collectionTab,.labTab,.hofTopTab,.hofSubTab,.duelRankTab,.trainingChoice,.duelChoice),
html[lang="es"] :is(#modalBox button,#modalBox .btn,#splashBtns .btn,.collectionTab,.labTab,.hofTopTab,.hofSubTab,.duelRankTab,.trainingChoice,.duelChoice),
html[lang="pt"] :is(#modalBox button,#modalBox .btn,#splashBtns .btn,.collectionTab,.labTab,.hofTopTab,.hofSubTab,.duelRankTab,.trainingChoice,.duelChoice){
  hyphens:auto;
}

/* Main menu: primary buttons can become two lines on narrow devices without
   changing their visual hierarchy. */
#splashBtns .btn:not(.iconBadge){
  height:auto!important;
  min-height:48px!important;
  white-space:normal!important;
  line-height:1.08!important;
  text-align:center!important;
  text-wrap:balance;
}
#splashBtns .btn:not(.iconBadge)>span{
  min-width:0!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}

/* Header titles may use two compact lines instead of an ellipsis in a language
   with a longer title. */
.listHead h2{
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  line-height:1.02!important;
  text-wrap:balance;
}

/* Laboratory tabs: R49 still had a nowrap/clip rule. That could visibly cut
   German/French/Portuguese labels. R50 keeps the row but lets labels use two
   centered lines. */
#labTabs .labTab{
  height:auto!important;
  min-height:52px!important;
}
#labTabs .labTab span{
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  line-height:1.02!important;
  text-align:center!important;
  text-wrap:balance;
}

/* Collection filters previously used ellipsis. Full localized labels now stay
   readable instead of being silently shortened. */
.collectionFilter{
  min-height:42px!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  line-height:1.08!important;
  overflow-wrap:anywhere!important;
  text-align:center!important;
}

/* Settings/account rows: give the label flexible space and never let the
   current value crush it. */
#modalBox.settingsModal .languageSettingRow,
#modalBox.settingsModal .settingsPickerRow{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:10px!important;
}
#modalBox.settingsModal .languageSettingLabel,
#modalBox.settingsModal .settingsPickerLabel,
#modalBox.settingsModal .togRow>span{
  min-width:0!important;
  max-width:100%!important;
}
#modalBox.settingsModal .languageSettingLabel b,
#modalBox.settingsModal .languageSettingLabel small,
#modalBox.settingsModal .settingsPickerLabel b,
#modalBox.settingsModal .settingsPickerLabel small,
#modalBox.settingsModal .togRow>span>b,
#modalBox.settingsModal .togRow>span>small{
  max-width:100%!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}
#modalBox.settingsModal .languageSettingValue,
#modalBox.settingsModal .settingsPickerValue{
  min-width:0!important;
  max-width:min(42vw,170px)!important;
}
#modalBox.settingsModal .languageSettingValue strong,
#modalBox.settingsModal .settingsPickerValue strong{
  min-width:0!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  text-align:right!important;
  line-height:1.1!important;
}
#modalBox.settingsModal .togRow{
  align-items:center!important;
}
#modalBox.settingsModal .togRow>.tog{
  flex:0 0 auto!important;
}

/* Training Center / Moleculopedia / How to Play content: no card title or
   explanation is clipped by a fixed text box. */
#modalBox.trainingCenterModal .trainingChoice>span:nth-child(2),
#modalBox.moleculopediaModal .mechanicGuideRow b,
#modalBox.moleculopediaModal .mechanicGuideRow small,
#modalBox.guideModal .guideSection h4,
#modalBox.guideModal .guideSection p,
#modalBox.guideModal .guideSection li,
#modalBox.guideModal .guideGrid b,
#modalBox.guideModal .guideGrid span{
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  max-width:100%!important;
}
#modalBox.moleculopediaModal .moleculoTab{
  white-space:normal!important;
  line-height:1.08!important;
  text-wrap:balance;
}

/* Duel cards and preset messages use the full localized copy. */
.duelChoice>b,.duelChoice>small,.onlineQuickMsgBtn{
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  max-width:100%!important;
}
.onlineQuickMessages>div{align-items:stretch!important}
.onlineQuickMsgBtn{height:auto!important;min-height:40px!important}

/* Dr. E text should always remain readable without pushing the character or
   board. Vertical scrolling is only used as a last resort for very long copy. */
.speechBubble,.einSpeech,#einBoxG .speech,#einBoxS .speech{
  max-width:100%!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}

/* Bottom/action controls: text may use two compact lines; it must not escape
   the button rectangle or be replaced by ellipsis. */
#gameScr #actionCol .btn.iconBadge small,
#gameScr #actionCol .act small,
#gameScr #navBtns .navB small{
  white-space:normal!important;
  overflow:hidden!important;
  text-overflow:clip!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  line-height:1.0!important;
}

@media(max-width:430px){
  #labTabs{gap:4px!important;padding-left:7px!important;padding-right:7px!important}
  #labTabs .labTab{min-height:56px!important;padding:5px 2px!important;gap:2px!important}
  #labTabs .labTab span{font-size:clamp(7.1px,2.15vw,8.4px)!important}

  #collectionTabs{grid-auto-rows:minmax(44px,auto)!important}
  .collectionTab{height:auto!important;min-height:44px!important;padding-top:6px!important;padding-bottom:6px!important}
  .collectionTab span{line-height:1.05!important;text-wrap:balance}

  #modalBox.settingsModal .languageSettingRow,
  #modalBox.settingsModal .settingsPickerRow{padding-left:10px!important;padding-right:10px!important}

  #modalBox.trainingCenterModal .trainingProgressTop{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:7px!important;
  }
  #modalBox.trainingCenterModal .trainingProgressTop span{
    white-space:normal!important;overflow-wrap:anywhere!important;
  }
}

@media(max-width:370px){
  /* On the narrowest supported phones, setting values move below their label
     instead of forcing either side outside the card. */
  #modalBox.settingsModal .languageSettingRow,
  #modalBox.settingsModal .settingsPickerRow{
    grid-template-columns:minmax(0,1fr)!important;
    align-items:start!important;
    gap:6px!important;
  }
  #modalBox.settingsModal .languageSettingValue,
  #modalBox.settingsModal .settingsPickerValue{
    width:100%!important;
    max-width:100%!important;
    justify-content:space-between!important;
  }
  #modalBox.settingsModal .languageSettingValue strong,
  #modalBox.settingsModal .settingsPickerValue strong{text-align:left!important}

  #modalBox.trainingCenterModal .trainingProgressTop{
    grid-template-columns:minmax(0,1fr)!important;
    gap:4px!important;
  }
  #modalBox.trainingCenterModal .trainingProgressTop strong{text-align:left!important}

  #labTabs .labTab{min-height:58px!important}
  #labTabs .labTab span{font-size:7px!important}
}

@media(max-width:335px){
  #splashBtns .btn:not(.iconBadge){font-size:clamp(11.5px,3.8vw,13px)!important;padding-left:8px!important;padding-right:8px!important}
  #modalBox{max-width:calc(100vw - 10px)!important}
  #modalBox.trainingCenterModal,#modalBox.accountModal,#modalBox.settingsModal{width:calc(100vw - 10px)!important}
}

/* ================= R51 — mobile/iPhone compositor + viewport jitter guard =================
   Keep the approved visuals intact while preventing Safari/WebKit from repeatedly
   re-rasterizing full-screen fixed layers during dynamic-toolbar / ProMotion resizes. */
@supports (-webkit-touch-callout:none){
  body.mxIOSWebKit{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  body.mxIOSWebKit #bgA,
  body.mxIOSWebKit #bgB,
  body.mxIOSWebKit #bgVignette,
  body.mxIOSWebKit #bgParticles,
  body.mxIOSWebKit #fx{
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
  }
  body.mxIOSWebKit #bgA,body.mxIOSWebKit #bgB{will-change:opacity}
  body.mxIOSWebKit .screen{
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    -webkit-transform:translate3d(0,0,0) scale(1.02);
    transform:translate3d(0,0,0) scale(1.02);
  }
  body.mxIOSWebKit .screen.on{
    -webkit-transform:translate3d(0,0,0) scale(1);
    transform:translate3d(0,0,0) scale(1);
  }
  body.mxIOSWebKit canvas,
  body.mxIOSWebKit .einBox,
  body.mxIOSWebKit #boardFrame{
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
  }
}


/* ================= R53 — full localization edge-case polish =================
   Language-length safety only. No visual redesign or gameplay layout change. */
#modalBox.onlineDuelModal :is(.onlineDuelSection,.duelLevelLabel,.quickMatchRules,.onlineDuelNotice,.msub),
#modalBox.accountModal :is(.accountCloudStatus,.authMessage,.authTiny,.profileName,.accountMilestoneInvite span,.accountMilestoneInvite b),
#modalBox.trainingCenterModal .trainingChoice>span:nth-child(2),
#modalBox.moleculopediaModal :is(.mechanicGuideRow b,.mechanicGuideRow small),
#modalBox.guideModal :is(.guideIntro,.guideSection,.guideSection li){
  min-width:0!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}
#modalBox.onlineDuelModal .mrow,
#modalBox.accountModal .mrow,
#modalBox.accountModal .accountActions,
#modalBox.accountModal .accountUtilityRow{
  min-width:0!important;
  max-width:100%!important;
  flex-wrap:wrap!important;
}
#modalBox.onlineDuelModal .mrow>.btn,
#modalBox.accountModal .mrow>.btn,
#modalBox.accountModal .accountActions>.btn,
#modalBox.accountModal .accountUtilityRow>.btn{
  min-width:0!important;
  height:auto!important;
  min-height:44px!important;
  white-space:normal!important;
  line-height:1.08!important;
  overflow-wrap:anywhere!important;
  text-wrap:balance;
}
#modalBox.onlineDuelModal :is(input,select),
#modalBox.accountModal :is(input,select){
  min-width:0!important;
  max-width:100%!important;
}
html[lang="ja"] :is(#modalBox,.screen),
html[lang="zh"] :is(#modalBox,.screen){line-break:strict}
html[lang="ja"] :is(button,.btn,.msub,small,p,li),
html[lang="zh"] :is(button,.btn,.msub,small,p,li){word-break:normal;overflow-wrap:anywhere}

@media(max-width:370px){
  #modalBox.onlineDuelModal .mrow>.btn,
  #modalBox.accountModal .mrow>.btn,
  #modalBox.accountModal .accountActions>.btn,
  #modalBox.accountModal .accountUtilityRow>.btn{
    flex:1 1 100%!important;
    width:100%!important;
  }
  #modalBox.onlineDuelModal .duelChoice,
  #modalBox.trainingCenterModal .trainingChoice{
    height:auto!important;
    min-height:54px!important;
  }
}


/* ================= R59 — cross-phone anti-flicker hardening =================
   Target WebKit/120 Hz devices that intermittently re-rasterize transformed or
   backdrop-filtered UI text. Keep the approved visual design; remove only the
   compositing paths known to cause text/button shimmer on iPhone Safari/WKWebView. */
@supports (-webkit-touch-callout:none){
  body.mxIOSWebKit .screen,
  body.mxIOSWebKit .screen.on{
    -webkit-transform:none!important;
    transform:none!important;
  }
  body.mxIOSWebKit .screen{transition:opacity .20s ease!important}

  body.mxIOSWebKit :is(button,.btn,.pill,.chip,.tab,.labTab,.hofTopTab,.hofSubTab,.duelTurnBadge,#goalCard,#lvPill,#movePill,#duelTimer){
    -webkit-font-smoothing:antialiased;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
  }

  /* WebKit blur + animated descendants can intermittently flash their glyph
     texture. Use the same translucent surface without live blur on buttons. */
  body.mxIOSWebKit .btn.ghost{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    background:rgba(30,27,57,.88)!important;
  }

  /* The intentional CTA breathing animation can look like display flicker on
     high-refresh iPhones. Keep it on other platforms, make iOS CTA steady. */
  body.mxIOSWebKit .breathe{animation:none!important}
}

/* Respect devices/users that ask for reduced motion; this also protects older
   phones where repeated glow/transform rasterization can flash UI layers. */
@media (prefers-reduced-motion:reduce){
  .screen{transition:opacity .12s linear!important;transform:none!important}
  .breathe,.syncDot.sync-syncing{animation:none!important}
}
/* R62 online duel escape control */
.onlineCountdownCard .onlineCountdownLeave{margin-top:18px;min-width:180px;max-width:88%;align-self:center;white-space:normal;line-height:1.15}
@media(max-width:390px){.onlineCountdownCard .onlineCountdownLeave{min-width:150px;font-size:13px;padding:10px 14px}}

/* ================= R66 — iPhone sustained-FPS + post-level menu stability =================
   iOS WebKit can accumulate expensive blur/filter/continuous animation layers across
   repeated puzzle -> menu transitions. The automatic iPhone profile preserves layout,
   color and interaction while replacing only the costly continuously-rasterized effects. */
@supports (-webkit-touch-callout:none){
  body:is(.mxIOSSafePerf,.mxAndroidSafePerf) #bgParticles{display:none!important}
  body:is(.mxIOSSafePerf,.mxAndroidSafePerf) #fx{filter:none!important}
  body:is(.mxIOSSafePerf,.mxAndroidSafePerf) :is(#goalCard.mxGoalBreath,#goalCard.mxGoalNear,#splash #einBoxS,#einBoxG.mx-life-breathe .einImg,#einBoxG.mx-life-focus .einImg,#einBoxG.mx-life-think .einImg){animation:none!important}
  body:is(.mxIOSSafePerf,.mxAndroidSafePerf) :is(.mxNextMolVeil,#modal,#levelTransition){-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  body:is(.mxIOSSafePerf,.mxAndroidSafePerf) :is(#bgA,#bgB,#bgVignette,#boardFrame,#goalCard,.btn,.pill,.chip){filter:none}
  body:is(.mxIOSSafePerf,.mxAndroidSafePerf) #bgA,body:is(.mxIOSSafePerf,.mxAndroidSafePerf) #bgB{will-change:auto!important}
  body:is(.mxIOSSafePerf,.mxAndroidSafePerf) .screen{transition:opacity .14s linear!important}
  body:is(.mxIOSSafePerf,.mxAndroidSafePerf) .mxFlyingCoin,
  body:is(.mxIOSSafePerf,.mxAndroidSafePerf) #mxMoleculeFinishFx .mxOrbit,
  body:is(.mxIOSSafePerf,.mxAndroidSafePerf) #mxMoleculeFinishFx .mxEnergyRing{display:none!important}
}


/* ================= R69 — duel variety + final-30-second tension ================= */
#gameScr.duelTimeWarning #duelTimer{
  background:linear-gradient(180deg,#f2c94c,#9a6a05)!important;
  border-color:rgba(255,236,155,.92)!important;
  color:#fff!important;
  box-shadow:0 0 12px rgba(242,201,76,.38);
}
#gameScr.duelTimeDanger #duelTimer{
  background:linear-gradient(180deg,#ff9a3d,#b6460b)!important;
  border-color:rgba(255,211,170,.95)!important;
  color:#fff!important;
  box-shadow:0 0 15px rgba(255,122,47,.46);
}
#gameScr.duelTimeCritical #duelTimer{
  background:linear-gradient(180deg,#ff5968,#a70f24)!important;
  border-color:#ffd5da!important;
  color:#fff!important;
  box-shadow:0 0 20px rgba(255,62,82,.68);
}
#gameScr.duelTimeCritical #boardFrame{
  border-color:rgba(255,66,82,.95)!important;
  box-shadow:0 0 0 2px rgba(255,66,82,.38),0 0 22px rgba(255,40,63,.48)!important;
  animation:mxDuelFinalBorder .72s ease-in-out infinite alternate;
}
@keyframes mxDuelFinalBorder{
  from{box-shadow:0 0 0 1px rgba(255,66,82,.22),0 0 10px rgba(255,40,63,.24)}
  to{box-shadow:0 0 0 3px rgba(255,90,104,.62),0 0 28px rgba(255,40,63,.72)}
}
/* Avoid adding compositor pressure to devices already in reduced-motion mode. */
@media (prefers-reduced-motion:reduce){#gameScr.duelTimeCritical #boardFrame{animation:none!important}}
body.mxPerfLow #gameScr.duelTimeCritical #boardFrame{animation:none!important}

/* R75 online duel polish: reconnect clarity + post-reveal round recap */
.onlineDisconnectPlayer{display:inline-flex;margin:11px auto 0;padding:6px 11px;border-radius:999px;background:rgba(87,214,255,.10);border:1px solid rgba(87,214,255,.24);font-size:11px;font-weight:900;color:#e8faff;max-width:88%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.onlineDisconnectProgressTrack{height:6px;margin:11px 18px 2px;border-radius:999px;background:rgba(255,255,255,.09);overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.onlineDisconnectProgressTrack i{display:block;height:100%;width:100%;border-radius:inherit;background:linear-gradient(90deg,#ffd54f,#66e6ff);transition:width .24s linear}
.onlineReconnectProtection{display:inline-block;margin-top:13px;padding:7px 10px;border-radius:10px;background:rgba(96,224,180,.10);border:1px solid rgba(96,224,180,.25);color:#bff6df;font-size:10px;font-weight:850;line-height:1.35}
.duelFinalRoundStats{margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.10)}
.duelFinalRoundStats>strong{display:block;margin-bottom:7px;font-size:9px;letter-spacing:.75px;color:rgba(229,239,255,.72)}
.duelFinalStatRow{display:grid;grid-template-columns:minmax(58px,.7fr) minmax(0,1fr) minmax(0,1fr);gap:6px;align-items:center;padding:6px 3px;border-top:1px solid rgba(255,255,255,.055);font-size:9px;font-variant-numeric:tabular-nums}
.duelFinalStatRow:first-of-type{border-top:0}.duelFinalStatRow b{color:#f5f8ff;text-align:left}.duelFinalStatRow span{min-width:0;white-space:nowrap;text-align:center;font-weight:850}.duelFinalStatRow .red{color:#ffb6bf}.duelFinalStatRow .blue{color:#a9e4ff}
@media(max-width:380px){.duelFinalStatRow{grid-template-columns:50px 1fr 1fr;font-size:8px;gap:3px}.duelFinalRoundStats{margin-top:9px;padding-top:8px}}

/* R76 How-to-Play: compact ranked Atom Duel explanation */
.guideSection.guideDuelSection{border-color:rgba(255,196,74,.38);background:linear-gradient(145deg,rgba(75,43,114,.28),rgba(19,74,105,.25));box-shadow:inset 0 1px rgba(255,255,255,.035)}
.guideDuelSection>p{margin-bottom:9px!important}
.guideDuelScoreRow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:9px 0 10px}
.guideDuelScoreRow span{min-width:0;padding:9px 5px 8px;border-radius:11px;text-align:center;border:1px solid rgba(255,255,255,.12);background:rgba(8,17,34,.36)}
.guideDuelScoreRow span small{display:block;font-size:9.5px;line-height:1.2;letter-spacing:.055em;font-weight:900;opacity:.82;overflow-wrap:anywhere}
.guideDuelScoreRow span b{display:block;margin-top:4px;font-size:15px;line-height:1.1;white-space:nowrap}
.guideDuelScoreRow .win{border-color:rgba(92,231,143,.34)}.guideDuelScoreRow .win b{color:#70f0a6}
.guideDuelScoreRow .draw{border-color:rgba(104,215,255,.34)}.guideDuelScoreRow .draw b{color:#7de4ff}
.guideDuelScoreRow .loss{border-color:rgba(255,117,129,.34)}.guideDuelScoreRow .loss b{color:#ff8e98}
.guideDuelNote{margin-top:9px;padding:9px 10px;border-radius:10px;background:rgba(255,205,80,.075);border:1px solid rgba(255,205,80,.2);font-size:11.5px;line-height:1.42;color:#f5f1df}
@media(max-width:360px){.guideDuelScoreRow{gap:5px}.guideDuelScoreRow span{padding:8px 3px}.guideDuelScoreRow span small{font-size:8.5px}.guideDuelScoreRow span b{font-size:13.5px}.guideDuelNote{font-size:11px}}

/* ================= R77 PHONE-MATRIX RESPONSIVE HARDENING =================
   Native WKWebView/Android WebView use the full device height, so historical
   height-only dock rules can leave 58px left-rail controls beside a centered
   CTA stack on narrow phones. Reserve a real left rail by WIDTH as well as
   height. This keeps the approved artwork/order/colours while preventing
   side-button overlap on iPhone and Android portrait phones. */
@media (orientation:portrait) and (max-width:430px){
  body.mxNative #splash #splashBtns{
    transform:none!important;
  }
  body.mxNative #splash :is(
    #btnTrainingDock.learningDockBtn,
    #btnMoleculopediaDock.learningDockBtn,
    #btnGuide.guideDockBtn,
    #btnLabMenu.labDockBtn,
    #btnDuel.duelBtn,
    #btnHof.trophyBtn
  ){
    left:max(10px,calc(var(--sal) + 10px))!important;
  }
  /* Keep gameplay utility controls fully inside the physical display edge. */
  body.mxNative #gameScr #actionCol{
    right:max(6px,calc(var(--sar) + 4px))!important;
  }
  /* Safe-area aware list/tab chrome: no side clipping on narrow cutout phones. */
  body.mxNative :is(#levelsScr,#collectScr,#labScr,#hofScr) .listHead{
    padding-left:max(10px,calc(var(--sal) + 10px))!important;
    padding-right:max(10px,calc(var(--sar) + 10px))!important;
  }
  body.mxNative :is(#collectionTabs,#labTabs){
    padding-left:max(8px,calc(var(--sal) + 8px))!important;
    padding-right:max(8px,calc(var(--sar) + 8px))!important;
  }
}

/* Most current phones fall here, including iPhone 12/13/14/15 widths and the
   common 360–412 CSS-pixel Android range. Use 48px dock targets (still above
   the 44px touch minimum) so the main CTA column retains an actual gap. */
@media (orientation:portrait) and (max-width:414px){
  body.mxNative #splash #splashBtns{
    width:min(68vw,278px)!important;
  }
  body.mxNative #splash :is(
    #btnTrainingDock.learningDockBtn,
    #btnMoleculopediaDock.learningDockBtn,
    #btnGuide.guideDockBtn,
    #btnLabMenu.labDockBtn,
    #btnDuel.duelBtn,
    #btnHof.trophyBtn
  ){
    left:max(8px,calc(var(--sal) + 8px))!important;
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    min-height:48px!important;
  }
  body.mxNative #splash :is(#btnTrainingDock.learningDockBtn,#btnMoleculopediaDock.learningDockBtn){border-radius:15px!important}
  body.mxNative #splash #btnGuide.guideDockBtn{border-radius:15px!important}
  body.mxNative #splash #btnLabMenu.labDockBtn{border-radius:15px!important}

  body.mxNative #splash .learningDockIcon{width:24px!important;height:24px!important;padding:4px!important;margin:0 auto 1px!important}
  body.mxNative #splash .learningDockMain{font-size:6.6px!important;letter-spacing:.18px!important}
  body.mxNative #splash .learningDockMini{font-size:5.4px!important;letter-spacing:.2px!important}
  body.mxNative #splash .guideDockIcon{width:20px!important;height:20px!important;font-size:14px!important}
  body.mxNative #splash .guideDockMain{font-size:7.1px!important;letter-spacing:.45px!important}
  body.mxNative #splash .guideDockMini{font-size:5.8px!important;letter-spacing:.55px!important}
  body.mxNative #splash .labDockIcon{width:24px!important;height:24px!important;padding:4px!important;margin:0 auto 1px!important}
  body.mxNative #splash .labDockMain{font-size:8.4px!important;letter-spacing:.7px!important}
  body.mxNative #splash .labDockMini{font-size:5.9px!important;letter-spacing:.65px!important}
  body.mxNative #splash .duelVs{font-size:18px!important}
  body.mxNative #splash .duelMini{font-size:7.5px!important;letter-spacing:.8px!important}
  body.mxNative #splash #btnHof .trophyIcon{width:32px!important;height:32px!important;padding:3px!important}
  body.mxNative #splash #btnHof .trophyIcon svg{width:25px!important;height:25px!important}
}

/* Legacy 320–350px phones need a little more center-column breathing room.
   Do not shrink the rail below a safe tap target; narrow the CTA stack instead. */
@media (orientation:portrait) and (max-width:350px){
  body.mxNative #splash #splashBtns{
    width:min(64vw,218px)!important;
  }
  body.mxNative #splashBtns .btn:not(.iconBadge){
    padding-left:8px!important;
    padding-right:8px!important;
  }
}

/* 415–430px large phones can keep slightly larger dock controls and still have
   a clean gap from the 278px capped CTA stack. */
@media (orientation:portrait) and (min-width:415px) and (max-width:430px){
  body.mxNative #splash :is(
    #btnTrainingDock.learningDockBtn,
    #btnMoleculopediaDock.learningDockBtn,
    #btnGuide.guideDockBtn,
    #btnLabMenu.labDockBtn,
    #btnDuel.duelBtn,
    #btnHof.trophyBtn
  ){
    width:52px!important;
    height:52px!important;
    min-width:52px!important;
    min-height:52px!important;
  }
}


/* ================= R77.1 — native intro prompt no-wrap hardening =================
   iPhone 13/14-family and narrow Android WebViews can apply larger text metrics
   than desktop Safari. Keep the Whiteway studio/boot sound prompts as one-line
   capsules without changing copy, order, artwork, or audio behavior. */
@media (orientation:portrait) and (max-width:430px){
  body.mxNative #studioTap,
  body.mxNative #btnBootPlay{
    box-sizing:border-box!important;
    width:max-content!important;
    max-width:calc(100vw - var(--sal) - var(--sar) - 28px)!important;
    white-space:nowrap!important;
  }
  body.mxNative #studioTap b,
  body.mxNative #studioTap small,
  body.mxNative #btnBootPlay{
    white-space:nowrap!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
    hyphens:none!important;
  }
  body.mxNative #studioTap b,
  body.mxNative #btnBootPlay{
    font-size:clamp(10px,3.05vw,12px)!important;
    letter-spacing:clamp(.2px,.14vw,.55px)!important;
  }
  body.mxNative #studioTap small{
    font-size:clamp(7.5px,2.25vw,9px)!important;
    letter-spacing:clamp(.1px,.1vw,.35px)!important;
  }
}
@media (orientation:portrait) and (max-width:350px){
  body.mxNative #studioTap,
  body.mxNative #btnBootPlay{
    min-width:148px!important;
    padding-left:11px!important;
    padding-right:11px!important;
  }
}

/* ================= R77.2 — RESTORE APPROVED MY MOLECULES COLOUR =================
   The iOS anti-flicker fallback intentionally replaces generic ghost-button
   blur with an opaque surface. That generic fallback must not override the
   approved steel-blue MY MOLECULES artwork. Keep the button's original R77
   colour/doodles on every phone while retaining the no-blur iOS protection. */
#splash #btnCollect.btn.ghost{
  background-color:transparent!important;
  background-image:
    url("../assets/images/button-doodle-left.svg"),
    url("../assets/images/button-doodle-right.svg"),
    linear-gradient(180deg,rgba(126,161,197,.62),rgba(87,119,157,.58))!important;
  background-blend-mode:soft-light,soft-light,normal!important;
  background-repeat:no-repeat,no-repeat,no-repeat!important;
  background-position:left 8px center,right 8px center,center!important;
  background-size:58px auto,58px auto,100% 100%!important;
}
@supports (-webkit-touch-callout:none){
  body.mxIOSWebKit #splash #btnCollect.btn.ghost{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    background-color:transparent!important;
    background-image:
      url("../assets/images/button-doodle-left.svg"),
      url("../assets/images/button-doodle-right.svg"),
      linear-gradient(180deg,rgba(126,161,197,.62),rgba(87,119,157,.58))!important;
  }
}

/* ================= R79 / R5 — ZERO-LOSS MOBILE PERFORMANCE PASS =================
   Performance rule: automatic optimization may lower internal canvas pixel fill
   and suspend work that is completely hidden, but it MUST NOT remove, hide,
   disable, or reduce any authored Moleculox visual effect or animation while it
   is visible. This keeps the R77 look intact on iPhone and Android. */

/* Hidden screens used to remain fully live at opacity:0. Keep transition-out
   frames intact, then let the engine skip layout/paint/animation work until the
   screen is shown again. No visible content is changed. */
body.mxNative .screen:not(.on):not(.mxLeaving){
  visibility:hidden;
  content-visibility:hidden;
}
body.mxNative .screen:not(.on):not(.mxLeaving) *{
  animation-play-state:paused!important;
}

/* Stable compositor ownership for the layers that are actually visible. This
   avoids repeated layer promotion/demotion during atom motion and screen FX. */
body.mxNative :is(#board,#fx,#bgA,#bgB,#bgVignette,#bgParticles){
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
}
body.mxNative #boardFrame{contain:paint;}
body.mxNative #fx{contain:strict;}

/* Automatic pressure classes are intentionally visual no-ops. Their only job
   is to let JS lower internal DPR / non-interactive refresh work. Do not add
   display:none, animation:none, filter:none, opacity changes, particle-count
   reductions, or feature suppression here. */
body.mxPerfPressure,body.mxPerfSevere{--mx-perf-pressure:1;}