*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root{
    --night:#0A1024;
    --night-2:#141F45;
    --night-3:#1D2C5E;
    --glow:#FFD84D;
    --glow-soft:#FFE9A3;
    --glass:rgba(180,214,255,0.10);
    --glass-line:rgba(168,205,255,0.42);
    --teal:#00C9A7;
    --purple:#8B6BFF;
    --coral:#FF6B57;
    --text:#E6EEFF;
    --text-dim:#8FA3C8;
    --r:14px;
}

[hidden]{display:none!important}

html,body{
    height:100%;
    font-family:'Inter',system-ui,sans-serif;
    background:var(--night);
    color:var(--text);
    -webkit-user-select:none; user-select:none;
    -webkit-tap-highlight-color:transparent;
}
body{overflow-y:auto; overflow-x:hidden;}

.game-viewport{min-height:100dvh;display:flex;align-items:stretch;justify-content:center;width:100%;
    background:
      radial-gradient(1200px 620px at 50% -12%, var(--night-3) 0%, var(--night-2) 45%, var(--night) 78%),
      var(--night);
    position:relative; overflow:hidden;
}
/* distant stars */
.game-viewport::before{
    content:''; position:absolute; inset:0; pointer-events:none; opacity:.55;
    background-image:
      radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent),
      radial-gradient(1.5px 1.5px at 78% 12%, #fff, transparent),
      radial-gradient(1.2px 1.2px at 34% 8%,  #cfe0ff, transparent),
      radial-gradient(1.2px 1.2px at 62% 26%, #cfe0ff, transparent),
      radial-gradient(1.6px 1.6px at 88% 34%, #fff, transparent),
      radial-gradient(1.2px 1.2px at 22% 40%, #b9cdf5, transparent),
      radial-gradient(1.4px 1.4px at 52% 4%,  #fff, transparent);
}

.back-link{position:fixed;top:10px;left:12px;z-index:300;color:var(--text-dim);font-size:.75rem;
    font-weight:600;text-decoration:none;letter-spacing:.03em}
.back-link:hover{color:var(--text)}

#app{
    position:relative; z-index:2; flex:1 1 auto;
    width:100%; max-width:1080px; min-height:100dvh;
    display:flex; flex-direction:column;
    padding:38px 14px 0;
    touch-action:none;
}

/* ---------- HUD ---------- */
#hud{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.hud-tier{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.hud-right{display:flex;gap:14px;font-size:.72rem;font-weight:600;color:var(--text-dim);letter-spacing:.04em}
.hud-right b{color:var(--text);font-size:.9rem}
#dots{display:flex;gap:5px}
.dot{width:8px;height:8px;border-radius:50%;background:rgba(168,205,255,.20);transition:background .25s,transform .25s}
.dot.good{background:var(--teal);transform:scale(1.25)}
.dot.help{background:var(--glow)}
.dot.now{background:rgba(168,205,255,.55);transform:scale(1.35)}

/* ---------- PROMPT ---------- */
#prompt{
    text-align:center;margin:6px 0 14px;min-height:52px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
}
#promptText{font-size:clamp(1.15rem,3.2vw,1.6rem);font-weight:800;letter-spacing:-.01em}
#promptText em{font-style:normal;color:var(--glow);text-shadow:0 0 18px rgba(255,216,77,.45)}
#promptSub{font-size:.78rem;color:var(--text-dim);font-weight:600;min-height:1em}

#stage{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;
    gap:clamp(10px,2.4vh,22px);padding-bottom:18px}

/* ---------- JARS ---------- */
#jars{--sz:clamp(26px,7vw,40px);display:flex;align-items:flex-end;justify-content:center;
    gap:clamp(6px,2vw,18px);flex-wrap:wrap;row-gap:12px}
.pair{display:flex;align-items:flex-end;gap:clamp(6px,2vw,18px);flex-wrap:nowrap}
.row-break{display:none;flex-basis:100%;height:0}
.op{font-size:clamp(1.4rem,4vw,2.2rem);font-weight:800;color:var(--text-dim);padding-bottom:34px;flex:0 0 auto}

.jar{position:relative;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px;
    transition:transform .18s ease, filter .18s ease}
.jar-glass{
    position:relative;
    background:linear-gradient(160deg, rgba(180,214,255,.16), rgba(120,160,230,.06));
    border:2px solid var(--glass-line);
    border-radius:10px 10px 16px 16px;
    padding:12px 12px 12px 26px;
    box-shadow:inset 0 12px 26px rgba(255,255,255,.07), 0 12px 30px rgba(0,0,0,.35);
    backdrop-filter:blur(2px);
    transition:box-shadow .3s, border-color .3s;
}
.jar-glass::after{ /* glass highlight */
    content:'';position:absolute;left:8px;top:10px;width:10px;bottom:14px;border-radius:8px;
    background:linear-gradient(to bottom, rgba(255,255,255,.30), rgba(255,255,255,0));
    pointer-events:none;
}
.jar-lid{width:calc(100% + 10px);height:11px;border-radius:5px;
    background:linear-gradient(180deg,#6E7EA8,#3C486B);border:1px solid rgba(200,220,255,.35)}
.jar-label{
    font-size:clamp(1.5rem,4.6vw,2.3rem);font-weight:900;line-height:1;
    color:var(--glow);text-shadow:0 0 20px rgba(255,216,77,.35)
}
.jar-label{transition:color .15s}
.jar-label.zero{color:rgba(143,163,200,.45);text-shadow:none}
.jar-label.ok{color:var(--teal);text-shadow:0 0 22px rgba(0,201,167,.45)}
.jar-label.over{color:var(--coral);text-shadow:0 0 22px rgba(255,107,87,.5);animation:shake .38s}
.jar.hint .jar-label{animation:hintPop 1.1s ease-in-out 2}
@keyframes hintPop{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}

.jar.full .jar-glass{border-color:rgba(255,216,77,.75);
    box-shadow:inset 0 12px 26px rgba(255,236,170,.16), 0 0 34px rgba(255,216,77,.28)}
.jar.over .jar-glass{border-color:rgba(255,107,87,.65);box-shadow:0 0 26px rgba(255,107,87,.20)}
.jar.ready{cursor:grab;animation:readyBob 1.5s ease-in-out infinite}
.jar.ready .jar-glass{border-color:var(--glow)}
@keyframes readyBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.jar.dragging{z-index:250;cursor:grabbing;animation:none;pointer-events:none;
    filter:drop-shadow(0 18px 30px rgba(0,0,0,.5))}
.jar.poured .jar-glass{opacity:.30}
.jar.poured .jar-lid{opacity:.35}
.jar.big .jar-glass{min-height:calc(var(--sz) * 2 + 18px)}
.jar.hover .jar-glass{border-color:var(--teal);box-shadow:0 0 30px rgba(0,201,167,.35)}

.frame{display:grid;gap:6px;justify-content:center;align-content:start}
.slot{width:var(--sz);height:var(--sz);flex:0 0 auto;border-radius:8px;
    border:1.5px dashed rgba(168,205,255,.30);background:rgba(10,16,36,.35);
    display:flex;align-items:center;justify-content:center;position:relative}
.slot.open{border-color:transparent;background:transparent}
.slot.tenline:has(.fly){border-bottom:3px solid rgba(0,201,167,.55);border-radius:8px 8px 3px 3px}
.slot.target{border-style:solid;border-color:rgba(255,216,77,.45);
    box-shadow:inset 0 0 12px rgba(255,216,77,.12)}


/* ---------- FIREFLIES ---------- */
.fly{
    width:var(--fsz,clamp(26px,6.6vw,36px));height:var(--fsz,clamp(26px,6.6vw,36px));
    position:relative;cursor:grab;touch-action:none;
    display:flex;align-items:center;justify-content:center;
}
.fly::before{ /* glow halo */
    content:'';position:absolute;inset:-42%;border-radius:50%;
    background:radial-gradient(circle, rgba(255,216,77,.55) 0%, rgba(255,216,77,.20) 38%, rgba(255,216,77,0) 68%);
    animation:pulse 2.4s ease-in-out infinite;
}
.fly .body{
    position:relative;width:62%;height:62%;border-radius:50% 50% 46% 46%;
    background:radial-gradient(circle at 34% 30%, #FFF6D0 0%, var(--glow) 46%, #E8A200 100%);
    box-shadow:0 0 12px rgba(255,216,77,.85);
}
.fly .body::before,.fly .body::after{ /* wings */
    content:'';position:absolute;top:6%;width:60%;height:74%;border-radius:60% 40% 50% 50%;
    background:rgba(214,235,255,.34);border:1px solid rgba(230,244,255,.35);
}
.fly .body::before{left:-46%;transform:rotate(-24deg)}
.fly .body::after{right:-46%;transform:rotate(24deg) scaleX(-1)}
@keyframes pulse{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.12)}}

#meadow .fly{position:absolute;animation:bob 3.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(0,0)}25%{transform:translate(4px,-6px)}
    50%{transform:translate(-3px,-9px)}75%{transform:translate(-5px,-3px)}}

.fly.dragging{position:fixed;z-index:400;pointer-events:none;animation:none;
    transform:translate(-50%,-50%) scale(1.22);filter:drop-shadow(0 10px 16px rgba(0,0,0,.5))}
.fly.selected::after{content:'';position:absolute;inset:-16%;border-radius:50%;
    border:2px solid var(--teal);animation:pulse 1.1s ease-in-out infinite}
.fly.counted .body{box-shadow:0 0 22px 6px rgba(255,255,255,.9)}
.countnum{position:absolute;top:-20px;left:50%;transform:translateX(-50%);
    font-size:.8rem;font-weight:900;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.7)}

.jar .fly{--fsz:calc(var(--sz) * 0.92)}

/* ---------- MEADOW ---------- */
#meadow{
    position:relative;flex:0 0 auto;height:clamp(160px,26vh,260px);
    border-radius:22px 22px 0 0;
    background:linear-gradient(180deg, rgba(20,40,50,0) 0%, rgba(14,44,44,.55) 55%, rgba(10,34,32,.9) 100%);
    transition:box-shadow .2s;
}
#meadow.hover{box-shadow:inset 0 0 0 2px rgba(0,201,167,.45)}
#meadow::after{ /* grass silhouette */
    content:'';position:absolute;left:0;right:0;bottom:0;height:46px;pointer-events:none;
    background:
      repeating-linear-gradient(80deg, transparent 0 10px, rgba(6,26,24,.95) 10px 13px),
      linear-gradient(180deg, transparent, rgba(4,20,18,.95));
    mask-image:linear-gradient(180deg,transparent,#000 60%);
}
.meadow-hint{position:absolute;left:50%;top:8px;transform:translateX(-50%);
    font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--text-dim)}

/* ---------- EQUATION ---------- */
#equation{flex:0 0 auto;min-height:clamp(160px,26vh,260px);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,3vh,26px)}
#eqRow{display:flex;align-items:center;gap:clamp(6px,1.6vw,14px)}
.eq-box{
    width:clamp(50px,12vw,74px);height:clamp(58px,14vw,84px);border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    font-size:clamp(1.6rem,5.4vw,2.6rem);font-weight:900;
    background:rgba(180,214,255,.08);border:2px solid var(--glass-line);color:var(--glow)
}
.eq-box.slot{border-style:dashed;border-color:rgba(139,107,255,.45);background:rgba(139,107,255,.06)}
.eq-box.active{border-color:var(--purple);background:rgba(139,107,255,.16);
    box-shadow:0 0 0 4px rgba(139,107,255,.12);animation:slotPulse 1.6s ease-in-out infinite}
@keyframes slotPulse{0%,100%{box-shadow:0 0 0 4px rgba(139,107,255,.10)}
    50%{box-shadow:0 0 0 10px rgba(139,107,255,.05)}}
.eq-box.slot.hover{background:rgba(139,107,255,.26);transform:scale(1.06)}
.eq-box.right{border-color:var(--teal);color:var(--teal);background:rgba(0,201,167,.14);
    box-shadow:0 0 34px rgba(0,201,167,.35)}
.eq-op{display:flex;flex-direction:column;align-items:center;gap:2px;
    font-size:clamp(1.3rem,4vw,2rem);font-weight:800;color:var(--text-dim);
    transition:opacity .3s,transform .3s}
.eq-op small{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    color:rgba(143,163,200,.7)}
.eq-op.veiled{opacity:.18;transform:scale(.85)}

#tray{display:flex;gap:clamp(7px,2vw,14px);flex-wrap:wrap;justify-content:center}
.tile{
    width:clamp(46px,11vw,64px);height:clamp(46px,11vw,64px);border-radius:12px;
    display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:none;
    font-size:clamp(1.3rem,4.4vw,1.9rem);font-weight:900;color:#0A1024;
    background:linear-gradient(180deg,#FFE9A3,#F0BC25);
    box-shadow:0 5px 0 #B98A10, 0 10px 20px rgba(0,0,0,.35);
    transition:transform .12s
}
.tile:active{transform:translateY(3px)}
.tile.dragging{position:fixed;z-index:400;pointer-events:none;
    transform:translate(-50%,-50%) scale(1.12) rotate(-4deg);box-shadow:0 14px 26px rgba(0,0,0,.5)}
.tile.gone{visibility:hidden}

.shake{animation:shake .38s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}
    40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(4px)}}

/* ---------- OVERLAYS ---------- */
.overlay{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;
    padding:22px;background:rgba(6,10,26,.86);backdrop-filter:blur(6px)}
.overlay[hidden]{display:none}
.panel{width:100%;max-width:460px;text-align:center;background:linear-gradient(180deg,#182448,#101835);
    border:1.5px solid rgba(168,205,255,.28);border-radius:20px;padding:30px 24px;
    box-shadow:0 26px 60px rgba(0,0,0,.55)}
.panel h1{font-size:clamp(1.7rem,6vw,2.4rem);font-weight:900;letter-spacing:-.02em;margin-bottom:6px}
.panel h1 span{color:var(--glow)}
.panel p{font-size:.9rem;color:var(--text-dim);line-height:1.6;margin-bottom:20px}
.tiers{display:flex;flex-direction:column;gap:9px;margin-bottom:22px}
.tier-btn{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
    padding:12px 14px;border-radius:12px;font-family:inherit;color:var(--text);
    background:rgba(180,214,255,.07);border:1.5px solid rgba(168,205,255,.22);transition:.15s}
.tier-btn:hover:not(:disabled){background:rgba(180,214,255,.14);border-color:var(--teal)}
.tier-btn.sel{border-color:var(--glow);background:rgba(255,216,77,.12)}
.tier-btn:disabled{opacity:.38;cursor:not-allowed}
.tier-btn b{display:block;font-size:.95rem;font-weight:800}
.tier-btn small{font-size:.74rem;color:var(--text-dim)}
.tier-n{width:26px;height:26px;flex:0 0 auto;border-radius:50%;background:rgba(255,216,77,.18);
    color:var(--glow);font-weight:900;font-size:.8rem;display:flex;align-items:center;justify-content:center}
.btn{display:inline-block;cursor:pointer;font-family:inherit;font-weight:800;font-size:1rem;
    padding:14px 30px;border-radius:12px;border:none;color:#06121F;
    background:linear-gradient(180deg,#3BE8C6,#00B995);box-shadow:0 5px 0 #027A63}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #027A63}
.btn.ghost{background:none;color:var(--text-dim);box-shadow:none;font-size:.85rem;padding:10px 16px}
.btn.ghost:hover{color:var(--text)}
.end-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 10px}
.end-actions .btn:not(.ghost){flex-basis:100%;margin-bottom:6px}
.stars{font-size:2rem;letter-spacing:6px;color:var(--glow);margin-bottom:6px}
.big-score{font-size:3.2rem;font-weight:900;color:var(--glow);line-height:1}

/* ---------- TEACHER GUIDE ---------- */
.tg-section{background:#F7F6F2;border-top:3px solid #DDDBD4;padding:56px 24px 64px;font-family:'Inter',sans-serif;color:#0B0F1A;line-height:1.6}
.tg-inner{max-width:960px;margin:0 auto}
.tg-eyebrow{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:#009E82;margin:0 0 8px;display:block}
.tg-heading{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;margin:0 0 10px}
.tg-intro{font-size:1rem;color:#374151;max-width:680px;margin:0 0 32px;line-height:1.7}
.tg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-bottom:36px}
.tg-card{background:#fff;border:1.5px solid #DDDBD4;border-radius:10px;padding:22px}
.tg-card h3{font-size:.9375rem;font-weight:700;margin:0 0 12px}
.tg-card ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.tg-card li{font-size:.875rem;color:#374151;padding-left:18px;position:relative;line-height:1.55}
.tg-card li::before{content:'→';position:absolute;left:0;color:#009E82;font-size:.75rem;top:3px}
.tg-std{font-weight:700;color:#5533E8}
.tg-faq{border-top:1.5px solid #DDDBD4;padding-top:24px;display:flex;flex-direction:column;gap:10px}
.tg-faq details{border:1.5px solid #DDDBD4;border-radius:8px;padding:14px 18px;background:#fff}
.tg-faq summary{font-weight:700;font-size:.9375rem;cursor:pointer;list-style:none;color:#0B0F1A}
.tg-faq summary::-webkit-details-marker{display:none}
.tg-faq summary::before{content:'+ ';color:#009E82}
.tg-faq details[open] summary::before{content:'− '}
.tg-faq details p{margin:10px 0 0;font-size:.875rem;color:#374151;line-height:1.6}

@media (max-width:620px){
    .row-break{display:block}
    #jars{gap:8px}
    .op{padding-bottom:22px}
}

@media (max-width:520px){
    #app{padding-top:34px}
    .op{padding-bottom:26px}
    .jar-glass{padding:8px 8px 8px 20px;border-radius:8px 8px 12px 12px}
}