/* Science Fenns Lab look. One shared look for every grades 6 to 12 game.
   Same family as Science Fenns: glowing dark stage, gold buttons, Lora and Poppins, SVG art, rewards.
   Each game picks an accent with data-lab="chem|phys|ipc|math|earth|build" on <html>, or sets --acc and --acc2 itself. */
:root{
  --lab-ink:#f4f7ff;--lab-sub:#c9d4f2;--lab-mute:#93a3cf;
  --lab-bg1:#0a1245;--lab-bg2:#1a3a96;--lab-bg3:#0b0f33;
  --lab-gold:#f6c744;--lab-gold2:#ffe08a;--lab-gold-d:#b8860b;
  --lab-good:#4fe3a0;--lab-bad:#ff7b72;--lab-warn:#ffc15e;
  --acc:#35e0c8;--acc2:#8b7bff;
  --lab-glass:rgba(255,255,255,.06);--lab-edge:rgba(255,255,255,.16);
  --lab-r:20px;--lab-serif:Lora,Georgia,serif;--lab-sans:Poppins,"Segoe UI",system-ui,sans-serif;
}
html[data-lab=chem]{--acc:#35e0c8;--acc2:#9a7bff;--lab-bg2:#1b3f9f}
html[data-lab=phys]{--acc:#ffb347;--acc2:#4aa8ff;--lab-bg2:#26338f}
html[data-lab=ipc]{--acc:#a6ec6a;--acc2:#2cc6c6;--lab-bg2:#0f4a78}
html[data-lab=math]{--acc:#52d6f4;--acc2:#f6c744;--lab-bg2:#1b3f9f}
html[data-lab=earth]{--acc:#ff8a6e;--acc2:#7c8bff;--lab-bg2:#43268f}
html[data-lab=build]{--acc:#ffa86b;--acc2:#5cc8ff;--lab-bg2:#2a3a99}

.lab,.lab *{box-sizing:border-box}
body.lab{margin:0;color:var(--lab-ink);font-family:var(--lab-sans);line-height:1.5;min-height:100vh;
  background:radial-gradient(1100px 620px at 12% -8%,color-mix(in srgb,var(--acc) 22%,transparent),transparent 62%),
  radial-gradient(900px 600px at 96% 6%,color-mix(in srgb,var(--acc2) 26%,transparent),transparent 60%),
  radial-gradient(1200px 500px at 50% 112%,color-mix(in srgb,var(--acc) 20%,transparent),transparent 70%),linear-gradient(180deg,var(--lab-bg2),var(--lab-bg1) 86%);background-attachment:fixed;overflow-x:hidden}
body.lab:before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(1.6px 1.6px at 8% 12%,#fff8,transparent),radial-gradient(1.2px 1.2px at 24% 30%,#fff6,transparent),radial-gradient(1.6px 1.6px at 44% 8%,#fff7,transparent),radial-gradient(1.2px 1.2px at 63% 24%,#fff6,transparent),radial-gradient(1.6px 1.6px at 81% 14%,#fff8,transparent),radial-gradient(1.2px 1.2px at 92% 36%,#fff6,transparent),radial-gradient(1.2px 1.2px at 14% 58%,#fff5,transparent),radial-gradient(1.6px 1.6px at 36% 74%,#fff6,transparent),radial-gradient(1.2px 1.2px at 70% 66%,#fff5,transparent),radial-gradient(1.6px 1.6px at 88% 82%,#fff6,transparent)}
.lab main,.lab .lab-wrap{position:relative;z-index:1}
.lab-wrap{max-width:1180px;margin:0 auto;padding:18px max(16px,3vw) 48px}
.lab h1,.lab h2,.lab h3{font-family:var(--lab-serif);font-weight:700;margin:0;line-height:1.15;letter-spacing:-.01em}
.lab h1{font-size:clamp(2rem,4.6vw,3.4rem)}
.lab h2{font-size:clamp(1.4rem,2.6vw,2rem)}
.lab p{margin:0 0 .8em}
.lab a{color:var(--lab-gold2)}
.lab :focus-visible{outline:3px solid var(--lab-gold);outline-offset:3px;border-radius:8px}
.lab .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lab [hidden]{display:none!important}
.lab-eyebrow{font:700 .74rem/1.2 var(--lab-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin:0 0 8px}

/* panels */
.lab-card{background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035));border:1px solid var(--lab-edge);border-radius:var(--lab-r);padding:20px;box-shadow:0 18px 50px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.1);backdrop-filter:blur(6px)}
.lab-card.glow{box-shadow:0 18px 50px rgba(0,0,0,.35),0 0 0 1px color-mix(in srgb,var(--acc) 40%,transparent),0 0 38px color-mix(in srgb,var(--acc) 22%,transparent)}
.lab-stage{position:relative;border-radius:calc(var(--lab-r) + 4px);overflow:hidden;border:2px solid color-mix(in srgb,var(--lab-gold) 70%,transparent);box-shadow:0 22px 60px rgba(0,0,0,.45),0 0 0 6px rgba(255,255,255,.04)}
.lab-stage svg{display:block;width:100%;height:auto}

/* buttons */
.lab-btn{white-space:nowrap;font:700 1rem/1 var(--lab-sans);border:0;border-radius:999px;padding:15px 26px;cursor:pointer;color:#241a00;background:linear-gradient(180deg,var(--lab-gold2),var(--lab-gold));box-shadow:0 5px 0 var(--lab-gold-d),0 12px 22px rgba(0,0,0,.35);transition:transform .12s,box-shadow .12s,filter .12s;text-decoration:none;display:inline-flex;align-items:center;gap:8px;justify-content:center}
.lab-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.lab-btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--lab-gold-d),0 6px 14px rgba(0,0,0,.35)}
.lab-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.lab-btn.ghost{background:rgba(255,255,255,.08);color:var(--lab-ink);box-shadow:inset 0 0 0 2px rgba(255,255,255,.22)}
.lab-btn.ghost:hover{background:rgba(255,255,255,.14)}
.lab-btn.sm{padding:10px 16px;font-size:.85rem;box-shadow:0 3px 0 var(--lab-gold-d),0 8px 16px rgba(0,0,0,.3)}
.lab-btn.ghost.sm{box-shadow:inset 0 0 0 2px rgba(255,255,255,.22)}
.lab-btn[aria-pressed=true].ghost{background:color-mix(in srgb,var(--acc) 26%,transparent);box-shadow:inset 0 0 0 2px var(--acc)}

/* HUD */
.lab-top{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:space-between;padding:12px 16px;margin:0 0 14px;border-radius:18px;background:rgba(6,10,40,.62);border:1px solid var(--lab-edge);backdrop-filter:blur(8px)}
.lab-top .where small{display:block;font:600 .7rem/1.2 var(--lab-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--lab-mute)}
.lab-top .where b{font:700 1.15rem/1.2 var(--lab-serif)}
.lab-hud{display:flex;gap:8px;flex-wrap:wrap}
.lab-chip{white-space:nowrap;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.09);border:1px solid var(--lab-edge);font:700 .95rem/1 var(--lab-sans)}
.lab-chip svg{width:20px;height:20px;flex:none}
.lab-chip.hot{background:color-mix(in srgb,var(--lab-warn) 22%,transparent);border-color:var(--lab-warn);animation:labpulse 1s ease-in-out infinite}
@keyframes labpulse{50%{box-shadow:0 0 18px color-mix(in srgb,var(--lab-warn) 60%,transparent)}}
.lab-pips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.lab-pips i{width:26px;height:8px;border-radius:99px;background:rgba(255,255,255,.18);transition:background .25s,transform .25s}
.lab-pips i.on{background:var(--acc);box-shadow:0 0 10px var(--acc)}
.lab-pips i.bad{background:var(--lab-bad)}
.lab-pips i.now{background:var(--lab-gold);transform:scaleY(1.5)}
.lab-bar{height:10px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
.lab-bar>i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--acc),var(--acc2));box-shadow:0 0 14px var(--acc);transition:width .5s cubic-bezier(.2,.8,.2,1)}

/* questions and answers */
.lab-q{font:700 clamp(1.3rem,2.6vw,1.9rem)/1.3 var(--lab-serif);margin:0 0 14px}
.lab-prompt{color:var(--lab-sub);font-size:1.02rem}
.lab-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:16px 0}
.lab-choice{position:relative;text-align:left;font:600 1.02rem/1.35 var(--lab-sans);color:var(--lab-ink);padding:16px 18px 16px 52px;border-radius:16px;border:2px solid rgba(255,255,255,.2);background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));cursor:pointer;box-shadow:0 5px 0 rgba(0,0,0,.35);transition:transform .12s,border-color .12s,background .12s}
.lab-choice:before{content:attr(data-k);position:absolute;left:14px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);font:700 .8rem/1 var(--lab-sans)}
.lab-choice:hover{transform:translateY(-2px);border-color:var(--acc)}
.lab-choice.right{border-color:var(--lab-good);background:linear-gradient(180deg,rgba(79,227,160,.3),rgba(79,227,160,.12))}
.lab-choice.right:before{content:"\2713";background:var(--lab-good);color:#06301d}
.lab-choice.wrong{border-color:var(--lab-bad);background:linear-gradient(180deg,rgba(255,123,114,.25),rgba(255,123,114,.08))}
.lab-choice.wrong:before{content:"\2715";background:var(--lab-bad);color:#3a0a06}
.lab-choice[disabled]{cursor:default;transform:none}
.lab-input{width:100%;font:700 1.6rem/1 var(--lab-serif);color:var(--lab-ink);padding:14px 16px;border-radius:14px;border:2px solid rgba(255,255,255,.25);background:rgba(3,6,26,.55)}
.lab-input:focus{border-color:var(--acc);outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 30%,transparent)}
.lab-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:340px}
.lab-keypad button{font:700 1.5rem/1 var(--lab-serif);padding:16px 0;border-radius:16px;border:2px solid rgba(255,255,255,.22);background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.05));color:var(--lab-ink);cursor:pointer;box-shadow:0 5px 0 rgba(0,0,0,.35)}
.lab-keypad button:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.lab-keypad .go{background:linear-gradient(180deg,var(--lab-gold2),var(--lab-gold));color:#241a00;border-color:transparent;box-shadow:0 5px 0 var(--lab-gold-d)}
.lab-say{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.07);border-left:4px solid var(--acc);margin:12px 0}
.lab-say b{display:block;font:700 .7rem/1.2 var(--lab-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-bottom:4px}
.lab-say.good{border-left-color:var(--lab-good)}.lab-say.bad{border-left-color:var(--lab-bad)}

/* level picker */
.lab-levels{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.lab-level{text-align:left;color:var(--lab-ink);cursor:pointer;padding:18px;border-radius:18px;border:2px solid rgba(255,255,255,.18);background:linear-gradient(160deg,color-mix(in srgb,var(--acc) 16%,rgba(255,255,255,.06)),rgba(255,255,255,.03));box-shadow:0 8px 0 rgba(0,0,0,.3),0 16px 30px rgba(0,0,0,.25);transition:transform .15s,border-color .15s;font-family:var(--lab-sans)}
.lab-level:hover{transform:translateY(-3px);border-color:var(--acc)}
.lab-level small{display:block;font:700 .7rem/1.2 var(--lab-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.lab-level b{display:block;font:700 1.15rem/1.25 var(--lab-serif);margin:4px 0}
.lab-level span{display:block;color:var(--lab-sub);font-size:.9rem}
.lab-level .st{display:flex;gap:3px;margin-top:10px}.lab-level .st svg{width:20px;height:20px}

/* overlays */
.lab-modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:rgba(3,5,22,.74);backdrop-filter:blur(6px)}
.lab-modal>div{max-width:560px;width:100%;text-align:center;background:linear-gradient(180deg,#1b2680,#0d1352);border:2px solid var(--lab-gold);border-radius:26px;padding:26px 24px;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 60px color-mix(in srgb,var(--acc) 25%,transparent)}
.lab-modal h2{margin:6px 0 10px}
.lab-modal .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.lab-stars{display:flex;gap:8px;justify-content:center;margin:12px 0}.lab-stars svg{width:44px;height:44px}
.lab-toast{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:60;padding:12px 22px;border-radius:999px;font:700 .95rem/1 var(--lab-sans);color:#241a00;background:linear-gradient(180deg,var(--lab-gold2),var(--lab-gold));box-shadow:0 10px 30px rgba(0,0,0,.5);animation:labtoast 2.6s both}
@keyframes labtoast{0%{opacity:0;transform:translate(-50%,-14px)}12%,82%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-10px)}}
.lab-fx{position:fixed;inset:0;pointer-events:none;z-index:70}

/* rank ladder shared by every lab game */
.lab-rank{display:flex;gap:10px;align-items:center}
.lab-rank .shield{width:34px;height:34px}
.lab-rank b{font:700 1rem/1.1 var(--lab-serif)}.lab-rank small{display:block;font:600 .7rem/1.2 var(--lab-sans);color:var(--lab-mute)}

/* hide site chrome when a game is embedded in the class games page */
html.lab-emb .lab-chrome,html.lab-emb .mbs-chrome,html.lab-emb .mbs-topnav{display:none!important}
html.lab-emb .lab-wrap{padding-top:10px}
@media (max-width:640px){.lab-choices{grid-template-columns:1fr}.lab-top{padding:10px 12px}.lab-wrap{padding-bottom:30px}}
@media (prefers-reduced-motion:reduce){.lab *{animation:none!important;transition:none!important}}

/* stage cards get their own hue so the ladder feels like a climb */
.lab-level{position:relative;overflow:hidden;background:linear-gradient(160deg,color-mix(in srgb,var(--lv,var(--acc)) 30%,rgba(255,255,255,.05)),rgba(8,14,60,.55))}
.lab-level:after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--lv,var(--acc)) 55%,transparent),transparent 70%)}
.lab-level .no{position:absolute;right:14px;top:10px;font:700 2.4rem/1 var(--lab-serif);color:rgba(255,255,255,.16)}
.lab-level small{color:var(--lv,var(--acc))}
.lab-level .gl{width:44px;height:44px;margin-bottom:8px;position:relative;z-index:1}
.lab-hero{position:relative;border-radius:26px;overflow:hidden;padding:clamp(18px,3vw,34px);margin:0 0 18px;background:linear-gradient(120deg,rgba(255,255,255,.1),rgba(255,255,255,.03)),radial-gradient(500px 240px at 90% 0,color-mix(in srgb,var(--acc2) 40%,transparent),transparent 70%);border:1px solid var(--lab-edge);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.lab-orb{position:fixed;border-radius:50%;filter:blur(60px);opacity:.28;pointer-events:none;z-index:0}

/* ===== Refined pass: deep ink, one accent per subject, restrained color ===== */
html[data-lab=chem]{--acc:#2dd4bf;--acc2:#6c8cff;--lab-bg1:#070d1f;--lab-bg2:#0f1b3d}
html[data-lab=phys]{--acc:#f5a524;--acc2:#5b8cff;--lab-bg1:#0a0d1f;--lab-bg2:#17193f}
html[data-lab=ipc]{--acc:#8bd33a;--acc2:#2bb7c4;--lab-bg1:#061519;--lab-bg2:#0d2a33}
html[data-lab=math]{--acc:#4cc9f0;--acc2:#f5c04a;--lab-bg1:#070d1f;--lab-bg2:#10204a}
html[data-lab=earth]{--acc:#f2845c;--acc2:#7c8bff;--lab-bg1:#0d0b1f;--lab-bg2:#21183f}
html[data-lab=build]{--acc:#f59e5a;--acc2:#4cb8ff;--lab-bg1:#080d1c;--lab-bg2:#14224a}
body.lab{background:
 radial-gradient(900px 520px at 88% -10%,color-mix(in srgb,var(--acc) 22%,transparent),transparent 65%),
 radial-gradient(800px 520px at 0% 8%,color-mix(in srgb,var(--acc2) 16%,transparent),transparent 62%),
 linear-gradient(180deg,var(--lab-bg2),var(--lab-bg1) 70%);background-attachment:fixed}
body.lab:before{opacity:.5;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 50% 20%,#000 20%,transparent 78%);mask-image:radial-gradient(ellipse at 50% 20%,#000 20%,transparent 78%)}
body.lab:after{display:none}
.lab-card{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 50px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08)}
.lab-card.glow{box-shadow:0 20px 50px rgba(0,0,0,.4),0 0 0 1px color-mix(in srgb,var(--acc) 35%,transparent),0 0 40px color-mix(in srgb,var(--acc) 12%,transparent);border-top:2px solid var(--acc)}
.lab-top{background:rgba(7,12,34,.7);border:1px solid rgba(255,255,255,.1)}
.lab-chip{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.lab-eyebrow{color:var(--acc)}
.lab h1 em{background:none;color:var(--acc);-webkit-text-fill-color:currentColor}
.lab-btn{background:linear-gradient(180deg,#f7d46a,#e8b63a);box-shadow:0 3px 0 #9a7416,0 10px 20px rgba(0,0,0,.35)}
.lab-btn.ghost{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22)}
/* answers: calm glass, accent edge, color only for right and wrong */
.lab-choice{border:1px solid rgba(255,255,255,.16);border-left:4px solid var(--acc);color:var(--lab-ink);text-shadow:none;padding:16px 18px 16px 58px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));box-shadow:0 8px 20px rgba(0,0,0,.28)}
.lab-choice:nth-child(n){--c:var(--acc)}
.lab-choice:before{background:color-mix(in srgb,var(--acc) 22%,transparent);color:var(--acc);border:1px solid color-mix(in srgb,var(--acc) 55%,transparent)}
.lab-choice:hover{border-color:var(--acc);background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 16%,rgba(255,255,255,.06)),rgba(255,255,255,.04));filter:none;transform:translateY(-1px)}
.lab-choice.right{border-color:#34d399;border-left-color:#34d399;background:linear-gradient(180deg,rgba(52,211,153,.28),rgba(52,211,153,.1));box-shadow:0 0 26px rgba(52,211,153,.3)}
.lab-choice.right:before{background:#34d399;color:#04271b;border-color:#34d399}
.lab-choice.wrong{border-color:#fb7185;border-left-color:#fb7185;background:linear-gradient(180deg,rgba(251,113,133,.24),rgba(251,113,133,.08));box-shadow:none;opacity:1}
.lab-choice.wrong:before{background:#fb7185;color:#3b0a14;border-color:#fb7185}
.lab-choice[disabled]:not(.right):not(.wrong){opacity:.5;filter:none}
/* stage cards: one shared tone, hue only on the number and rule */
.lab-level{border:1px solid rgba(255,255,255,.12);border-top:3px solid var(--lv);background:linear-gradient(170deg,color-mix(in srgb,var(--lv) 14%,rgba(255,255,255,.05)),rgba(255,255,255,.02));box-shadow:0 14px 30px rgba(0,0,0,.35);color:var(--lab-ink)}
.lab-level small{color:var(--lv)}
.lab-level b{color:#fff}.lab-level span{color:var(--lab-sub)}
.lab-level .no{color:color-mix(in srgb,var(--lv) 55%,transparent);font-size:2.6rem}
.lab-level:after{background:radial-gradient(circle,color-mix(in srgb,var(--lv) 30%,transparent),transparent 70%)}
.lab-level:hover{border-color:var(--lv);border-top-width:3px;transform:translateY(-3px);filter:none;box-shadow:0 18px 36px rgba(0,0,0,.4),0 0 30px color-mix(in srgb,var(--lv) 22%,transparent)}
.lab-q{text-shadow:none}
.lab-say{background:rgba(255,255,255,.06)}
.lab-pips i{background:rgba(255,255,255,.16)}
.lab-modal>div{background:linear-gradient(180deg,#14214a,#0a1230)}