:root{--fh:'Fredoka One',cursive;--fb:'Nunito',sans-serif;--spring:cubic-bezier(.34,1.56,.64,1);--lv-accent:#4ECDC4;--lv-grad:linear-gradient(135deg,#4ECDC4,#2196F3)}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}body{font-family:var(--fb);background:#07051A;color:#fff;min-height:100vh;overflow-x:hidden}
button,input{font-family:var(--fb);border:none;cursor:pointer}a{text-decoration:none;color:inherit}.hidden{display:none!important}
button:focus-visible,a:focus-visible,[role="button"]:focus-visible,[role="link"]:focus-visible,input:focus-visible,label:focus-within{outline:3px solid #FFD93D;outline-offset:3px}

/* STARFIELD */
#starCanvas{position:fixed;inset:0;z-index:0;pointer-events:none}

/* BLOBS */
.blob{position:fixed;border-radius:50%;filter:blur(90px);opacity:.13;pointer-events:none;z-index:1;animation:blobF 12s ease-in-out infinite alternate}
@keyframes blobF{from{transform:translate(0,0)scale(1)}to{transform:translate(40px,30px)scale(1.1)}}

/* FLOATING ICONS */
.fi{position:fixed;font-size:2rem;opacity:.1;pointer-events:none;z-index:1;animation:floatUp var(--fd,9s) linear infinite}
@keyframes floatUp{from{transform:translateY(110vh)rotate(0deg);opacity:.15}to{transform:translateY(-15vh)rotate(360deg);opacity:0}}

/* TOPBAR */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 28px;background:rgba(7,5,26,.9);backdrop-filter:blur(24px);border-bottom:1px solid rgba(255,255,255,.07);position:sticky;top:0;z-index:100}
.logo{font-family:var(--fh);font-size:1.8rem;background:linear-gradient(100deg,#FFD93D,#FF6B9D,#4ECDC4);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.btn-back{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);border-radius:99px;padding:9px 18px;font-weight:800;font-size:.9rem;color:#fff;transition:all .2s}
.btn-back:hover{background:rgba(255,255,255,.15);transform:translateX(-3px)}
.xp-chip{font-family:var(--fh);font-size:1.05rem;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.15);border-radius:99px;padding:8px 18px;color:#FFD93D}
.pill{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:99px;padding:8px 16px 8px 10px;cursor:pointer;transition:all .2s}
.pill:hover{background:rgba(255,255,255,.13);transform:scale(1.03)}
.pill-av{font-size:1.5rem}.pill-name{font-weight:800;font-size:.9rem}.pill-xp{font-size:.7rem;color:rgba(255,255,255,.5);font-weight:700}

/* CARD */
.card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:22px;backdrop-filter:blur(12px)}

/* LEVEL CARD */
.lv-card{border-radius:26px;padding:26px;cursor:pointer;border:2px solid var(--lc-border,rgba(255,255,255,.12));position:relative;overflow:hidden;transition:transform .25s var(--spring),box-shadow .25s;animation:cardIn .5s var(--spring) backwards}
.lv-card:hover:not(.locked){transform:translateY(-8px)scale(1.02);box-shadow:0 20px 50px var(--lc-glow,rgba(78,205,196,.2))}
.lv-card.locked{opacity:.45;cursor:not-allowed;filter:saturate(.3)}
@keyframes cardIn{from{opacity:0;transform:translateY(40px)scale(.88)}to{opacity:1;transform:none}}

/* CHALLENGE CARD */
.ch-card{border-radius:22px;padding:22px 20px;cursor:pointer;border:2px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);backdrop-filter:blur(10px);transition:transform .25s var(--spring),border-color .2s,box-shadow .25s;animation:cardIn .4s var(--spring) backwards;position:relative;overflow:hidden}
.ch-card:hover:not(.ch-lock){transform:translateY(-6px)scale(1.03);border-color:var(--lv-accent);box-shadow:0 12px 40px rgba(0,0,0,.4)}
.ch-card.ch-done{border-color:var(--lv-accent);background:rgba(255,255,255,.09)}
.ch-card.ch-lock{opacity:.35;cursor:not-allowed}
.lesson-order{position:absolute;left:16px;top:14px;font-size:.48rem;letter-spacing:1.4px;font-weight:900;color:rgba(255,255,255,.26)}
.ch-card.ch-done .lesson-order{display:none}

/* PROGRESS */
.prog-bar{height:8px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden}
.prog-fill{height:100%;border-radius:99px;transition:width .8s var(--spring)}

/* ROBOT TEACHER */
.robot-teacher{display:flex;align-items:flex-start;gap:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:18px 20px;width:100%}
.teacher-bot{font-size:3rem;flex-shrink:0;animation:teachBob 3s ease-in-out infinite;filter:drop-shadow(0 4px 10px rgba(0,0,0,.3))}
@keyframes teachBob{0%,100%{transform:translateY(0)rotate(-3deg)}50%{transform:translateY(-6px)rotate(3deg)}}
.teacher-tag{font-size:.68rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--lv-accent);margin-bottom:5px}
.teacher-msg{font-size:.98rem;font-weight:700;color:#fff;line-height:1.55}
.hint-btn{margin-top:10px;background:none;border:1.5px solid rgba(255,255,255,.18);border-radius:99px;padding:5px 14px;font-size:.78rem;font-weight:800;color:rgba(255,255,255,.5);transition:all .2s}
.hint-btn:hover{border-color:rgba(255,255,255,.5);color:#fff}
.hint-box{margin-top:10px;background:rgba(255,213,61,.1);border-left:3px solid #FFD93D;border-radius:0 10px 10px 0;padding:8px 14px;font-size:.88rem;font-weight:700;color:#FFD93D}

/* GAME AREA */
.game-area{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:26px;padding:22px}
.game-label{font-size:.7rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:10px}

/* DRAG BLOCKS */
.drag-block{display:flex;align-items:center;gap:8px;background:var(--lv-grad);color:#000;border-radius:12px;padding:10px 16px;font-weight:800;font-size:.88rem;cursor:grab;user-select:none;touch-action:none;transition:transform .2s,opacity .2s;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.drag-block:hover{transform:scale(1.05)rotate(-1deg)}
.drag-block.dragging{opacity:.25;cursor:grabbing}
.drag-block.selected{outline:3px solid #FFD93D;outline-offset:3px}
.drag-block.used{opacity:.2;pointer-events:none;filter:grayscale(1)}
.drag-handle{opacity:.4;font-size:.9rem}

/* DROP SLOTS */
.drop-slot{flex:1;min-height:52px;border-radius:14px;border:2px dashed rgba(255,255,255,.18);display:flex;align-items:center;padding:0 14px;color:rgba(255,255,255,.22);font-weight:700;font-size:.85rem;transition:all .2s;position:relative}
.drop-slot.over{border-color:var(--lv-accent);background:rgba(255,255,255,.08)}
.drop-slot.filled{border-color:var(--lv-accent);border-style:solid}
.slot-num{width:30px;height:30px;border-radius:50%;flex-shrink:0;background:var(--lv-grad);color:#000;display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-size:.95rem}
.remove-x{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;background:rgba(255,0,0,.3);color:rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;font-size:.75rem;cursor:pointer;border:none}

/* LOOP */
.loop-scene{width:100%;height:110px;border-radius:16px;background:rgba(0,0,0,.3);position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.08);margin-bottom:16px}
.loop-track{position:absolute;bottom:18px;left:0;right:0;height:3px;background:rgba(255,255,255,.08)}
.loop-actor{position:absolute;bottom:24px;font-size:2.2rem;transition:left .3s var(--spring)}
.loop-stamp{position:absolute;bottom:32px;font-size:1.2rem;animation:stampPop .3s var(--spring)}
@keyframes stampPop{from{transform:scale(0)rotate(-20deg)}to{transform:scale(1)}}
.loop-count{font-family:var(--fh);font-size:5rem;text-align:center;line-height:1;background:var(--lv-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.loop-opts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.loop-opt{width:70px;height:70px;border-radius:18px;background:rgba(255,255,255,.07);border:3px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-size:2rem;color:#fff;cursor:pointer;transition:all .2s var(--spring)}
.loop-opt:hover{transform:scale(1.1);border-color:var(--lv-accent)}
.loop-opt.selected{border-color:var(--lv-accent);background:rgba(255,255,255,.14);transform:scale(1.12);box-shadow:0 0 24px var(--lv-accent)}

/* TAP COUNT */
.tap-btn{width:148px;height:148px;border-radius:50%;background:var(--lv-grad);color:#000;font-family:var(--fh);font-size:1.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;margin:0 auto;transition:transform .15s var(--spring),box-shadow .15s;box-shadow:0 8px 30px rgba(0,0,0,.3);border:none;gap:4px;user-select:none}
.tap-btn:active{transform:scale(.88)}
.tap-icon{font-size:2.4rem;line-height:1}
.tap-progress{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;max-width:360px;margin:16px auto 0}
.tap-dot{width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.15);transition:all .2s var(--spring)}
.tap-dot.done{background:var(--lv-grad);border-color:transparent;transform:scale(1.1)}

/* CONDITION */
.cond-situ{font-size:5rem;text-align:center;margin-bottom:10px;animation:situPop .5s var(--spring)}
@keyframes situPop{from{transform:scale(.5)}to{transform:scale(1)}}
.cond-q{background:rgba(255,255,255,.09);border:2px solid rgba(255,255,255,.15);border-radius:16px;padding:14px 24px;font-family:var(--fh);font-size:1.2rem;text-align:center;margin-bottom:20px;max-width:440px;margin-left:auto;margin-right:auto}
.cond-choices{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.cond-choice{flex:1;min-width:120px;max-width:180px;border-radius:20px;padding:20px 14px;border:3px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);cursor:pointer;transition:all .25s var(--spring);text-align:center}
.cond-choice:hover{transform:translateY(-6px);border-color:var(--lv-accent)}
.cond-choice.selected{border-color:var(--lv-accent);background:rgba(255,255,255,.12);transform:translateY(-6px)}
.choice-icon{display:block;font-size:2.8rem;line-height:1;margin-bottom:8px}
.choice-text{display:block;font-size:.9rem;font-weight:800;color:#fff;line-height:1.3}
.correct-flash{animation:cFlash .4s ease}
.wrong-shake{animation:cShake .4s ease}
@keyframes cFlash{0%,100%{transform:translateY(-6px)}50%{transform:translateY(-6px)scale(1.08)}}
@keyframes cShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}

/* TAP CONDITION */
.tc-card{background:rgba(0,0,0,.3);border-radius:20px;padding:24px;text-align:center;border:2px solid rgba(255,255,255,.1);margin-bottom:14px}
.tc-val{font-family:var(--fh);font-size:2.6rem;color:var(--lv-accent);margin-bottom:8px}
.tc-q{font-size:1rem;font-weight:800;color:rgba(255,255,255,.7);margin-bottom:16px}
.tc-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.tc-btn{min-width:100px;padding:12px 16px;border-radius:14px;font-family:var(--fh);font-size:1rem;background:rgba(255,255,255,.08);color:#fff;border:2px solid rgba(255,255,255,.15);transition:all .2s var(--spring)}
.tc-btn:hover{transform:scale(1.05);border-color:var(--lv-accent)}
.tc-btn.ok{background:rgba(0,255,136,.2);border-color:#00FF88}
.tc-btn.no{background:rgba(255,68,68,.2);border-color:#FF4444}
.tc-dots{display:flex;gap:8px;justify-content:center;margin-bottom:14px}
.tc-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.15);transition:all .3s var(--spring)}
.tc-dot.done{background:#00FF88}.tc-dot.bad{background:#FF4444}.tc-dot.cur{background:var(--lv-accent);transform:scale(1.3)}

/* VARIABLE */
.var-box{background:rgba(0,0,0,.35);border:3px solid var(--lv-accent);border-radius:22px;padding:22px 32px;text-align:center;position:relative;min-width:200px;max-width:320px;margin:0 auto 16px}
.var-box-lbl{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--lv-grad);border-radius:99px;padding:4px 18px;font-size:.75rem;font-weight:800;color:#000;white-space:nowrap}
.var-name{font-family:var(--fh);font-size:1.4rem;color:rgba(255,255,255,.35);margin-bottom:4px}
.var-val{font-family:var(--fh);font-size:4rem;line-height:1;min-height:68px;display:flex;align-items:center;justify-content:center;background:var(--lv-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.var-choices{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.var-choice{min-width:72px;height:72px;border-radius:18px;background:rgba(255,255,255,.07);border:3px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-size:1.4rem;color:#fff;cursor:pointer;transition:all .2s var(--spring);padding:0 10px}
.var-choice:hover{transform:scale(1.1);border-color:var(--lv-accent)}
.var-choice.picked{border-color:var(--lv-accent);background:rgba(255,255,255,.14);transform:scale(1.12)}

/* SORT */
.sort-src{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding:16px;background:rgba(0,0,0,.25);border-radius:16px;border:2px dashed rgba(255,255,255,.12);min-height:80px;margin-bottom:14px}
.sort-tgt{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.sort-slot{width:64px;height:64px;border-radius:16px;border:2px dashed rgba(255,255,255,.2);background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-size:.75rem;color:rgba(255,255,255,.25);transition:all .2s;position:relative}
.sort-slot.over{border-color:var(--lv-accent);background:rgba(255,255,255,.08)}.sort-slot.filled{border-style:solid;border-color:var(--lv-accent)}
.sort-item{width:64px;height:64px;border-radius:16px;background:var(--lv-grad);color:#000;display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-size:.9rem;cursor:grab;user-select:none;transition:all .2s;box-shadow:0 4px 14px rgba(0,0,0,.25);touch-action:none}
.sort-item:hover{transform:translateY(-4px)scale(1.05)}.sort-item.dragging{opacity:.25}.sort-item.used{opacity:.2;pointer-events:none}
.sort-item.selected{outline:3px solid #FFD93D;outline-offset:3px}

/* MATCH */
.match-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.match-col{display:flex;flex-direction:column;gap:10px}
.match-item{padding:13px 14px;border-radius:16px;background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.12);font-weight:800;font-size:.88rem;color:#fff;cursor:pointer;transition:all .2s;text-align:center;min-height:52px;display:flex;align-items:center;justify-content:center;line-height:1.35}
.match-item:hover:not(.matched){transform:scale(1.03);border-color:var(--lv-accent)}
.match-item.selected{border-color:var(--lv-accent);background:rgba(255,255,255,.14);box-shadow:0 0 20px var(--lv-accent)}
.match-item.matched{border-color:var(--lv-accent);opacity:.6;cursor:default}

/* FILL CODE */
.code-editor{background:#0D1117;border-radius:16px;padding:20px;font-family:'Courier New',monospace;font-size:.9rem;line-height:2.4;border:1px solid rgba(255,255,255,.1);margin-bottom:14px;white-space:pre-wrap}
.kw{color:#FF7B72}.fn{color:#D2A8FF}.str{color:#A5D6FF}.val{color:#79C0FF}
.code-blank{display:inline-flex;align-items:center;justify-content:center;min-width:90px;height:30px;border-radius:8px;border:2px dashed rgba(255,255,255,.25);background:rgba(255,255,255,.05);font-size:.88rem;font-weight:800;color:rgba(255,255,255,.3);padding:0 10px;vertical-align:middle;cursor:pointer;transition:all .2s;position:relative;top:-2px}
.code-blank.active{outline:2px solid var(--lv-accent);border-color:var(--lv-accent)}
.code-blank.filled{border-color:var(--lv-accent);color:var(--lv-accent);border-style:solid}
.word-bank{display:flex;flex-wrap:wrap;gap:10px;padding:14px;background:rgba(0,0,0,.25);border-radius:14px;border:2px dashed rgba(255,255,255,.1)}
.code-word{background:var(--lv-grad);color:#000;border-radius:10px;padding:8px 16px;font-family:'Courier New',monospace;font-weight:800;font-size:.88rem;cursor:pointer;transition:all .2s;user-select:none}
.code-word:hover{transform:scale(1.06)}.code-word.used-word{opacity:.2;pointer-events:none}

/* PATTERN */
.pat-cell{width:60px;height:60px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.12)}
.pat-answer{border:3px dashed var(--lv-accent)!important;background:rgba(255,255,255,.04)!important}
.pat-opt{width:60px;height:60px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;background:rgba(255,255,255,.07);border:3px solid rgba(255,255,255,.15);cursor:pointer;transition:all .2s var(--spring)}
.pat-opt:hover{transform:scale(1.1);border-color:var(--lv-accent)}
.pat-opt.pat-sel{border-color:var(--lv-accent);background:rgba(255,255,255,.14);transform:scale(1.12)}

/* ARRAY TAP */
.arr-cell{min-width:54px;height:54px;border-radius:12px;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.15);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--fh);font-size:1.2rem;position:relative}
.arr-idx{position:absolute;top:2px;left:4px;font-size:.5rem;color:rgba(255,255,255,.3);font-weight:800}
.arr-choice{min-width:62px;height:62px;border-radius:16px;background:rgba(255,255,255,.07);border:3px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-size:1.3rem;cursor:pointer;transition:all .2s var(--spring);padding:0 8px;text-align:center;line-height:1.2}
.arr-choice:hover{transform:scale(1.08);border-color:var(--lv-accent)}
.arr-choice.selected{border-color:var(--lv-accent);background:rgba(255,255,255,.14)}
.arr-choice.ok{border-color:#00FF88;background:rgba(0,255,136,.15)}
.arr-choice.no{border-color:#FF4444;background:rgba(255,68,68,.12);animation:cShake .3s ease}

/* CHECK BTN */
.btn-check{width:100%;padding:16px;border-radius:16px;font-family:var(--fh);font-size:1.25rem;background:var(--lv-grad);color:#000;transition:all .2s var(--spring);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.btn-check:hover{transform:translateY(-3px)scale(1.02)}
.btn-check:active{transform:scale(.97)}
.btn-check:disabled{opacity:.35;transform:none;cursor:not-allowed}

/* SUCCESS OVERLAY */
.overlay{position:fixed;inset:0;z-index:999;background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--lv-accent) 14%,rgba(0,0,0,.82)),rgba(0,0,0,.9));backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.suc-box{position:relative;background:#100E2E;border:3px solid var(--lv-accent);border-radius:32px;padding:44px 36px;text-align:center;max-width:460px;width:92%;box-shadow:0 0 80px var(--lv-accent),0 40px 80px rgba(0,0,0,.6);animation:popIn .6s var(--spring)}
.suc-box::before,.suc-box::after{content:"";position:absolute;left:50%;top:120px;transform:translate(-50%,-50%);border-radius:50%;border:2px solid var(--lv-accent);pointer-events:none;animation:sucRing 1.4s ease-out forwards;opacity:0}
.suc-box::after{animation-delay:.25s}
@keyframes sucRing{0%{width:60px;height:60px;opacity:.7}100%{width:420px;height:420px;opacity:0}}
@keyframes popIn{0%{transform:scale(.4)rotate(-10deg);opacity:0}60%{transform:scale(1.06)rotate(2deg)}100%{transform:none;opacity:1}}
.suc-emoji{font-size:5.5rem;display:block;margin-bottom:10px;animation:eSpin .8s var(--spring)}
@keyframes eSpin{from{transform:rotate(-360deg)scale(0)}to{transform:none}}
.suc-title{font-family:var(--fh);font-size:2.7rem;color:#fff;margin-bottom:6px}
.suc-sub{color:rgba(255,255,255,.5);font-size:.95rem;font-weight:700;margin-bottom:16px}
.suc-explain{background:rgba(255,255,255,.07);border-radius:14px;padding:12px 16px;color:rgba(255,255,255,.75);font-size:.88rem;font-weight:700;line-height:1.5;margin-bottom:16px}
.suc-stars{display:flex;justify-content:center;gap:10px;font-size:2.8rem;margin-bottom:14px}
.suc-xp{display:inline-flex;align-items:center;gap:8px;background:rgba(255,213,61,.12);border:2px solid rgba(255,213,61,.3);border-radius:99px;padding:10px 24px;font-family:var(--fh);font-size:1.4rem;color:#FFD93D;margin-bottom:20px}
.suc-ach{margin-bottom:16px}
.ach-n{display:flex;align-items:center;gap:10px;background:rgba(255,213,61,.1);border:1px solid rgba(255,213,61,.25);border-radius:12px;padding:10px 16px;margin-bottom:8px;font-size:.9rem;font-weight:800;color:#FFD93D;animation:slideIn .4s var(--spring) backwards}
@keyframes slideIn{from{transform:translateX(-30px);opacity:0}to{transform:none;opacity:1}}
.suc-btns{display:flex;gap:12px}
.btn-home-s{flex-shrink:0;padding:14px 20px;border-radius:14px;background:rgba(255,255,255,.1);color:#fff;font-family:var(--fh);font-size:1.1rem;transition:all .2s}
.btn-home-s:hover{background:rgba(255,255,255,.18)}
.btn-next-s{flex:1;padding:14px;border-radius:14px;background:var(--lv-grad);color:#000;font-family:var(--fh);font-size:1.1rem;transition:all .2s var(--spring)}
.btn-next-s:hover{transform:scale(1.04)}

/* NAME MODAL */
.name-modal{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.92);backdrop-filter:blur(16px);display:flex;align-items:center;justify-content:center}
.name-box{background:#100E2E;border:3px solid #4ECDC4;border-radius:28px;padding:44px 36px;text-align:center;max-width:440px;width:92%;box-shadow:0 0 80px rgba(78,205,196,.3);animation:popIn .5s var(--spring)}
.name-box h2{font-family:var(--fh);font-size:2.4rem;color:#fff;margin-bottom:8px}
.name-box p{color:rgba(255,255,255,.5);margin-bottom:22px;font-size:.95rem;font-weight:700;line-height:1.5}
.av-grid{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
.av-btn{width:58px;height:58px;border-radius:16px;font-size:1.9rem;background:rgba(255,255,255,.06);border:3px solid rgba(255,255,255,.12);cursor:pointer;transition:all .2s var(--spring);display:flex;align-items:center;justify-content:center}
.av-btn:hover{transform:scale(1.15);border-color:#4ECDC4}
.av-btn.chosen{border-color:#4ECDC4;background:rgba(78,205,196,.15);transform:scale(1.1)}
.name-input{width:100%;padding:14px 20px;background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.12);border-radius:14px;color:#fff;font-size:1.1rem;font-weight:800;text-align:center;margin-bottom:14px;transition:border-color .2s}
.name-input:focus{border-color:#4ECDC4}.name-input::placeholder{color:rgba(255,255,255,.22)}
.btn-start{width:100%;padding:16px;border-radius:14px;background:linear-gradient(135deg,#4ECDC4,#2196F3);color:#fff;font-family:var(--fh);font-size:1.3rem;transition:all .2s var(--spring);box-shadow:0 8px 24px rgba(78,205,196,.3)}
.btn-start:hover{transform:scale(1.04)}

/* PROFILE ACTIONS */
.profile-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.profile-actions button,.import-label{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:12px 18px;color:#fff;font-weight:800;font-size:.85rem;cursor:pointer}
.profile-actions .danger-btn{background:rgba(255,68,68,.15);border-color:rgba(255,68,68,.3);color:#FF8A80}
.import-label input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* TOAST */
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);border-radius:99px;padding:12px 24px;font-family:var(--fh);font-size:1rem;color:#fff;z-index:9997;white-space:nowrap;animation:toastIn .3s var(--spring);box-shadow:0 8px 24px rgba(0,0,0,.4)}
@keyframes toastIn{from{transform:translateX(-50%)translateY(20px);opacity:0}to{transform:translateX(-50%)translateY(0);opacity:1}}

/* CONFETTI */
.confetti{position:fixed;pointer-events:none;z-index:9998;top:-10px;animation:confFall var(--cd,2.5s) var(--cdel,0s) cubic-bezier(.4,.1,.6,1) forwards}
@keyframes confFall{0%{transform:translateY(0) translateX(0) rotateZ(0deg);opacity:1}100%{transform:translateY(108vh) translateX(var(--cdx,0px)) rotateZ(var(--crot,720deg));opacity:0}}

/* FIREWORKS */
.firework-spark{position:fixed;width:7px;height:7px;border-radius:50%;pointer-events:none;z-index:9998;box-shadow:0 0 10px currentColor;animation:fwBurst 1s ease-out forwards}
@keyframes fwBurst{0%{transform:translate(0,0) scale(1.3);opacity:1}100%{transform:translate(var(--fx),var(--fy)) scale(.2);opacity:0}}

/* LAYOUT */
.ch-layout{max-width:860px;margin:0 auto;width:100%;padding:20px 20px 60px;display:flex;flex-direction:column;gap:18px}
.hero-robot{font-size:6rem;display:inline-block;line-height:1;animation:rFloat 3s ease-in-out infinite;filter:drop-shadow(0 0 32px rgba(78,205,196,.4))}
@keyframes rFloat{0%,100%{transform:translateY(0)rotate(-2deg)}50%{transform:translateY(-18px)rotate(2deg)}}
/* MODELS A STYLES */
.model-active .ch-layout{max-width:980px}
.model-active .game-area{position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.025));border-color:rgba(255,255,255,.16);box-shadow:0 22px 60px rgba(0,0,0,.35),inset 0 1px rgba(255,255,255,.08)}
.model-active .game-area::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-130px;top:-150px;background:var(--lv-accent);opacity:.08;filter:blur(20px);pointer-events:none}
.model-stage{isolation:isolate}
.model-toolbar{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:10px 0 14px}
.model-secondary,.model-play{padding:10px 16px;border-radius:10px;color:#fff;font-family:var(--fh);font-weight:800;transition:transform .2s,filter .2s}
.model-secondary{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18)}
.model-secondary.danger{background:rgba(255,68,68,.16);color:#FF8A80}
.model-play{background:var(--lv-grad);color:#07120d;box-shadow:0 8px 22px color-mix(in srgb,var(--lv-accent) 35%,transparent)}
.model-secondary:hover,.model-play:hover{transform:translateY(-2px);filter:brightness(1.15)}
.model-play:disabled{opacity:.45;transform:none}
.model-empty{color:rgba(255,255,255,.35);font-weight:800;font-size:.8rem}
.maze-cmd{padding:10px 15px;background:var(--lv-grad);color:#000;border-radius:8px;cursor:pointer;font-weight:800;font-size:.9rem;box-shadow:0 4px 10px rgba(0,0,0,.2);transition:transform 0.2s}
.maze-cmd:hover{transform:translateY(-3px) rotate(-1deg)}.maze-cmd:active{transform:scale(0.95)}
.maze-grid{box-shadow:inset 0 0 30px rgba(0,0,0,.35),0 12px 30px rgba(0,0,0,.25);border:2px solid rgba(255,255,255,.1);border-radius:12px;overflow:hidden}
.maze-cell{position:relative}
.maze-cell::after{content:"";position:absolute;inset:4px;border:1px solid rgba(255,255,255,.035);border-radius:3px}
.maze-program{min-height:66px;padding:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:rgba(0,0,0,.3);border:2px dashed rgba(255,255,255,.15);border-radius:14px;transition:border-color .2s,background .2s}
.maze-program.over{border-color:#FFD93D;background:rgba(255,217,61,.08)}
.maze-chip{display:flex;gap:7px;align-items:center;padding:8px 11px;border-radius:10px;background:rgba(78,205,196,.14);border:1px solid rgba(78,205,196,.45);color:#fff;font-weight:800;cursor:grab}
.maze-chip span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--lv-grad);color:#000;font-size:.7rem}
.maze-chip.pickup,.maze-chip.deliver{background:rgba(255,217,61,.12);border-color:rgba(255,217,61,.42)}
#mazeBot{filter:drop-shadow(0 6px 8px rgba(0,0,0,.45));will-change:left,top,transform}
.robot-mission-head{margin-bottom:12px}.robot-inventory{min-width:116px;padding:9px 12px;border-radius:13px;text-align:right;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1)}.robot-inventory small{display:block;font-size:.47rem;letter-spacing:1.5px;font-weight:900;color:rgba(255,255,255,.32)}.robot-inventory span{font-family:var(--fh);font-size:.78rem;color:rgba(255,255,255,.58)}.robot-inventory span.has-item{color:#FFD93D;text-shadow:0 0 12px rgba(255,217,61,.5)}.robot-inventory span.delivered{color:#00FF88}
.robot-board{display:flex;flex-direction:column;align-items:center}.robot-legend{display:flex;justify-content:center;gap:13px;flex-wrap:wrap;margin-top:9px;font-size:.58rem;font-weight:800;color:rgba(255,255,255,.35)}.maze-object{display:grid;place-items:center;width:100%;height:100%;font-size:1.55rem;filter:drop-shadow(0 5px 7px rgba(0,0,0,.4))}.maze-object.package{animation:packageFloat 1.8s ease-in-out infinite}.maze-object.package.collected{opacity:0;transform:scale(0)}.maze-object.goal{animation:goalPulse 1.6s ease-in-out infinite}.maze-wall{background:linear-gradient(145deg,#4a2032,#8b263f)!important;box-shadow:inset 0 0 0 2px rgba(255,255,255,.04)}
@keyframes packageFloat{50%{transform:translateY(-5px) rotate(3deg)}}@keyframes goalPulse{50%{filter:drop-shadow(0 0 12px #FFD93D);transform:scale(1.08)}}
.maze-cmd.move{background:linear-gradient(135deg,#4ECDC4,#22c55e)}.maze-cmd.turn{background:linear-gradient(135deg,#60a5fa,#8b5cf6);color:#fff}.maze-cmd.action{background:linear-gradient(135deg,#FFD93D,#f59e0b)}
.maze-cmd span{font-size:1rem;margin-right:3px}
.dw-node{padding:15px;background:rgba(255,255,255,0.05);border:2px solid rgba(255,255,255,0.15);border-radius:10px;cursor:pointer;font-family:var(--fh);color:#fff;z-index:2;transition:border-color 0.2s,transform .2s}
.dw-node:hover{transform:translateY(-2px);border-color:var(--lv-accent)}
.model-stage-head{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:13px}.model-stage-head strong{display:block;font-family:var(--fh);font-size:1.1rem;color:#fff}.model-stage-head .game-label{margin-bottom:4px}
.wire-hint{display:flex;align-items:center;justify-content:center;gap:9px;color:rgba(255,255,255,.45);font-size:.67rem;font-weight:800;margin:8px 0 2px}.wire-hint span{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);color:var(--lv-accent)}.wire-hint i{width:28px;height:1px;background:rgba(255,255,255,.12)}
.wire-arena{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:clamp(40px,10vw,150px);height:260px;position:relative;padding:20px 10px}
.wire-column{display:flex;flex-direction:column;align-items:center;gap:13px;z-index:2}.wire-column.center{align-self:center}.wire-column-title{font-size:.54rem;letter-spacing:2px;font-weight:900;color:rgba(255,255,255,.28)}
.dw-node{position:relative;width:132px;min-height:74px;padding:11px 14px;text-align:left;background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.14);border-radius:16px;box-shadow:0 12px 28px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.08)}
.dw-node small,.dw-node span{display:block;font-family:var(--fb)}.dw-node small{font-size:.48rem;letter-spacing:1.4px;color:rgba(255,255,255,.35)}.dw-node strong{display:block;font-size:1.3rem;margin:2px 0}.dw-node span{font-size:.58rem;color:rgba(255,255,255,.4);font-weight:800}.dw-node.processor{width:142px;min-height:112px;text-align:center;background:linear-gradient(145deg,color-mix(in srgb,var(--lv-accent) 16%,#15172d),#101226)}.dw-node.output strong{color:#FFD93D}
.dw-node.node-selected{border-color:#FFD93D;box-shadow:0 0 0 3px rgba(255,217,61,.12),0 14px 35px rgba(0,0,0,.3)}.dw-node.node-linked{border-color:color-mix(in srgb,var(--lv-accent) 65%,white);box-shadow:0 0 24px color-mix(in srgb,var(--lv-accent) 16%,transparent)}
.node-port{position:absolute;width:13px;height:13px;border-radius:50%;background:#17192b;border:3px solid var(--lv-accent);box-shadow:0 0 10px var(--lv-accent);top:50%;transform:translateY(-50%)}.node-port.left{left:-7px}.node-port.right{right:-7px}.node-port.top{top:35%}.node-port.bottom{top:68%}
@keyframes flowDash { to { stroke-dashoffset: -20; } }
.dw-wire{filter:drop-shadow(0 0 5px #4ECDC4)}.dw-flow{animation: flowDash 0.35s linear infinite; stroke: #FFD93D;filter:drop-shadow(0 0 8px #FFD93D)}
.plumber-valve{padding:15px 25px;background:var(--lv-grad);border:none;border-radius:50%;font-size:1.5rem;color:#000;font-weight:800;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,0.3);transition:transform 0.2s}
.plumber-valve:hover{transform:rotate(45deg)}
.dp-out{padding:15px;background:rgba(255,255,255,0.05);border:2px solid rgba(255,255,255,0.1);border-radius:10px;transition:border-color 0.3s}
.water-drop{box-shadow:0 0 18px #4ECDC4;animation:waterGlow .55s ease-in-out infinite alternate}
@keyframes waterGlow{to{filter:brightness(1.6);transform:scale(1.25)}}
.safe-sw{display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--fh);color:#fff;}
.safe-sw input{width:24px;height:24px;cursor:pointer}
.safe-sw input,.model-active input[type="checkbox"]{accent-color:var(--lv-accent)}
.safe-open{box-shadow:0 0 45px rgba(0,255,136,.3),inset 0 0 30px rgba(0,255,136,.08)}
.model-active input[type="range"]{accent-color:var(--lv-accent);cursor:grab}
.model-active input[type="range"]:active{cursor:grabbing}
.mixer-preview{position:relative;display:flex;justify-content:center;align-items:center;gap:42px;margin:4px auto 22px}
.mixer-preview>div{text-align:center}
.model-caption{font-size:.65rem;font-weight:900;letter-spacing:1.5px;color:rgba(255,255,255,.4);margin-bottom:7px}
.mixer-orb{width:104px;height:104px;border-radius:50%;border:4px solid rgba(255,255,255,.85);background:rgb(0,50,0);box-shadow:0 0 20px rgba(0,255,0,.5);transition:all .15s}
.mixer-orb.target{border-style:dashed}
.jsg-block{padding:10px 15px;background:#4ECDC4;color:#000;border-radius:5px 15px 15px 5px;font-family:monospace;font-weight:800;cursor:grab;border-left:8px solid #00C853;box-shadow:0 4px 6px rgba(0,0,0,0.2)}
.jsg-block.selected{outline:3px solid #FFD93D;outline-offset:3px}
.jsg-slot{min-height:45px;width:100%;color:#fff;background:rgba(0,0,0,0.2);border:2px dashed rgba(255,255,255,0.2);border-radius:5px 15px 15px 5px;font-family:monospace;font-weight:800}
.jsg-slot.filled{border-style:solid;border-color:#4ECDC4;background:rgba(78,205,196,.15)}
.jsg-slot.over{border-color:#FFD93D;background:rgba(255,217,61,0.2)}
.in-slot{cursor:pointer;margin:0;width:100%}
.rx-str{padding:10px 15px;background:rgba(255,255,255,0.05);color:#fff;border:2px solid rgba(255,255,255,0.1);border-radius:10px;cursor:pointer;font-family:monospace;transition:all 0.2s}
.rx-str.rx-sel{border-color:#00FF88;background:rgba(0,255,136,0.15)}
.timeline-track{display:flex;justify-content:space-between;align-items:center;position:relative;margin:4px 8px 10px}
.timeline-track::before{content:"";position:absolute;left:10px;right:10px;height:3px;background:rgba(255,255,255,.12);z-index:-1}
.timeline-track span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#24213e;border:2px solid rgba(255,255,255,.16);font-size:.65rem;font-weight:900;transition:.25s}
.timeline-track span.active{background:var(--lv-grad);border-color:transparent;color:#000;box-shadow:0 0 14px var(--lv-accent)}
.bit-switch{padding:7px 5px;border-radius:12px;background:rgba(0,0,0,.15)}
.bit-light{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#18172a;border:2px solid rgba(255,255,255,.14);color:rgba(255,255,255,.3);transition:.2s}
.bit-light.on{background:#FFD93D;color:#201900;border-color:#fff;box-shadow:0 0 22px #FFD93D;transform:scale(1.08)}
.clock-running{filter:drop-shadow(0 0 8px #FFD93D)}
.rx-enter{animation:rxDrop .5s var(--delay) var(--spring) backwards}
.rx-accepted{transform:translateY(8px);background:rgba(0,255,136,.2)!important;border-color:#00FF88!important;box-shadow:0 8px 18px rgba(0,255,136,.15)}
.rx-rejected{opacity:.4;transform:translateY(-8px) rotate(-3deg);filter:grayscale(.7)}
@keyframes rxDrop{from{opacity:0;transform:translateY(-35px) rotate(8deg)}to{opacity:1;transform:none}}
.model-pulse{animation:modelPulse .45s ease}
.model-particle{position:absolute;left:50%;top:50%;pointer-events:none;color:#FFD93D;animation:modelParticle .8s ease-out forwards}
@keyframes modelPulse{50%{transform:scale(1.08);filter:brightness(1.3)}}
@keyframes modelParticle{to{transform:translate(var(--px),var(--py)) rotate(180deg);opacity:0}}

@media(max-width:600px){
  .topbar{padding:12px 16px}.logo{font-size:1.4rem}
  .match-item{font-size:.78rem;padding:10px}.ch-layout{padding:12px 12px 60px}
  .sort-item,.sort-slot{width:52px;height:52px}
  #dwArea{height:auto!important;min-height:260px;gap:8px}
  .wire-arena{grid-template-columns:1fr;gap:22px;padding:14px 20px;min-height:510px!important}.wire-column{width:100%;flex-direction:row;justify-content:center;flex-wrap:wrap}.wire-column-title{width:100%;text-align:center}.dw-node{width:126px}.dw-node.processor{width:150px}.wire-hint{font-size:.58rem}.model-stage-head{align-items:flex-start}.model-stage-head strong{font-size:.9rem}
  .plumber-valve{padding:12px 16px;font-size:1rem}
  .safe-sw{font-size:.75rem}
  .game-area{padding:16px}
  .maze-grid{transform:scale(.92);margin-block:-10px!important}
  .maze-chip{font-size:.72rem;padding:7px 9px}
  .model-secondary,.model-play{padding:9px 11px;font-size:.78rem}
  .robot-mission-head{align-items:flex-start}.robot-inventory{min-width:92px}.robot-legend{font-size:.52rem;gap:8px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* MODERN GAME SHELL */
#sChallenge{background:#050713;min-height:100vh}
#sChallenge::selection{background:var(--lv-accent);color:#07120d}
.game-grid-bg{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.22;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:54px 54px;mask-image:linear-gradient(to bottom,black,transparent 88%)}
.game-ambient{position:fixed;width:55vw;height:55vw;border-radius:50%;filter:blur(110px);opacity:.12;pointer-events:none;z-index:0}
.ambient-a{left:-20vw;top:0;background:var(--lv-accent)}
.ambient-b{right:-20vw;bottom:-22vw;background:#7c3aed}
.game-hud{position:sticky;top:0;z-index:200;display:grid;grid-template-columns:1fr minmax(260px,2fr) 1fr;align-items:center;min-height:78px;padding:11px clamp(16px,3vw,42px);background:linear-gradient(180deg,rgba(5,7,19,.96),rgba(5,7,19,.78));border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(26px) saturate(1.4)}
.hud-back,.hud-icon{display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);transition:.2s}
.hud-back{justify-self:start;gap:9px;padding:10px 15px;border-radius:13px}
.hud-back span{font-size:1.2rem}.hud-back strong{font-size:.78rem;letter-spacing:.5px}
.hud-back:hover,.hud-icon:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.22);transform:translateY(-1px)}
.hud-center{text-align:center;min-width:0}.hud-kicker{font-size:.57rem;font-weight:900;letter-spacing:2.6px;color:var(--lv-accent);margin-bottom:3px}.hud-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--fh);font-size:clamp(.8rem,2vw,1.03rem);color:#fff}
.hud-actions{justify-self:end;display:flex;align-items:center;gap:10px}.hud-icon{width:42px;height:42px;border-radius:13px;font-family:var(--fh);font-size:1.15rem}.hud-icon.muted{opacity:.4}
.hud-timer{min-width:86px;padding:7px 12px;border-radius:13px;background:rgba(255,217,61,.07);border:1px solid rgba(255,217,61,.16);text-align:center}.hud-timer small{display:block;font-size:.48rem;letter-spacing:1.8px;font-weight:900;color:rgba(255,255,255,.35)}.hud-timer span{font-family:var(--fh);font-size:1.04rem;color:#FFD93D;letter-spacing:1px}
.mission-progress{position:sticky;top:78px;height:3px;z-index:201;background:rgba(255,255,255,.05)}.mission-progress>div{height:100%;width:0;background:var(--lv-grad);box-shadow:0 0 16px var(--lv-accent);transition:width .7s var(--spring)}
#sChallenge .ch-layout{position:relative;z-index:5;max-width:1080px;padding:clamp(22px,4vw,46px) clamp(14px,3vw,30px) 80px;gap:22px}
.mission-brief{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:18px 22px;border-radius:22px;background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.11);box-shadow:0 18px 60px rgba(0,0,0,.22);backdrop-filter:blur(18px)}
.brief-avatar{position:relative;display:grid;place-items:center;width:68px;height:68px;border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px rgba(255,255,255,.12),0 12px 28px rgba(0,0,0,.25)}.brief-avatar span{font-size:2.45rem;filter:drop-shadow(0 6px 8px rgba(0,0,0,.35))}.brief-avatar i{position:absolute;right:-2px;bottom:-2px;width:15px;height:15px;border-radius:50%;background:#00FF88;border:3px solid #121426;box-shadow:0 0 12px #00FF88}
.brief-copy{min-width:0}.brief-copy .teacher-msg{font-size:clamp(.94rem,2vw,1.08rem);font-weight:800}.brief-actions{display:flex;align-items:center;gap:14px;margin-top:10px}.difficulty-pips{display:flex;gap:5px}.difficulty-pips i{width:18px;height:4px;border-radius:99px;background:rgba(255,255,255,.1)}.difficulty-pips i.on{background:var(--lv-grad);box-shadow:0 0 8px var(--lv-accent)}
.hint-btn{margin:0;padding:6px 11px;background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.11);font-size:.68rem}.hint-box{margin-top:12px;padding:10px 13px;border:1px solid rgba(255,217,61,.15);border-left:3px solid #FFD93D;background:rgba(255,217,61,.06);font-size:.78rem}.hint-box strong{font-size:.57rem;letter-spacing:1.5px;margin-right:8px}
.model-active .game-area{min-height:390px;padding:clamp(22px,4vw,38px);border-radius:28px;background:radial-gradient(circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.105),transparent 32%),linear-gradient(145deg,rgba(17,20,43,.94),rgba(8,11,29,.97));border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 90px rgba(0,0,0,.4),inset 0 1px rgba(255,255,255,.1);transition:border-color .25s,box-shadow .25s}
.model-active .game-area:hover{border-color:color-mix(in srgb,var(--lv-accent) 35%,rgba(255,255,255,.12));box-shadow:0 34px 100px rgba(0,0,0,.48),0 0 50px color-mix(in srgb,var(--lv-accent) 8%,transparent),inset 0 1px rgba(255,255,255,.11)}
.model-active .game-area::before{width:340px;height:340px;right:-160px;top:-190px;opacity:.11}
.model-active .game-label{font-size:.61rem;letter-spacing:2.2px;color:rgba(255,255,255,.42)}
.model-active button{touch-action:manipulation}
.model-active button:not(.btn-check):active{transform:scale(.96)}
.model-active .btn-check{min-height:58px;border-radius:17px;font-size:1.02rem;letter-spacing:.2px;box-shadow:0 14px 35px color-mix(in srgb,var(--lv-accent) 24%,transparent)}
.model-active .btn-check:hover{box-shadow:0 18px 44px color-mix(in srgb,var(--lv-accent) 34%,transparent)}
.toast{display:flex;align-items:center;gap:10px;bottom:25px;padding:12px 17px;background:rgba(12,14,31,.94)!important;border:1px solid color-mix(in srgb,var(--toast-color) 45%,transparent);box-shadow:0 16px 45px rgba(0,0,0,.45),0 0 24px color-mix(in srgb,var(--toast-color) 12%,transparent);font-family:var(--fb);font-size:.84rem}.toast-dot{width:9px;height:9px;border-radius:50%;background:var(--toast-color);box-shadow:0 0 12px var(--toast-color)}

@media(max-width:700px){
  .game-hud{grid-template-columns:auto 1fr auto;min-height:66px;padding:8px 11px}.hud-back{width:42px;height:42px;padding:0}.hud-back strong,.hud-kicker{display:none}.hud-title{font-size:.72rem}.hud-actions{gap:6px}.hud-icon{width:38px;height:38px}.hud-timer{min-width:70px;padding:5px 7px}.hud-timer span{font-size:.85rem}.mission-progress{top:66px}
  #sChallenge .ch-layout{padding-top:18px}.mission-brief{grid-template-columns:auto 1fr;padding:14px;gap:12px;border-radius:18px}.brief-avatar{width:52px;height:52px;border-radius:16px}.brief-avatar span{font-size:1.9rem}.brief-copy .teacher-msg{font-size:.84rem;line-height:1.4}.teacher-tag{font-size:.54rem}.model-active .game-area{min-height:330px;border-radius:22px;padding:18px}
}

/* ════════════════════════════════════════════════
   PHASE B — INTERACTIVE GAME STYLES
════════════════════════════════════════════════ */

/* shared mini helpers */
.model-play{cursor:pointer}
@keyframes pbPop{from{transform:scale(0) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}
@keyframes pbGlow{0%,100%{filter:drop-shadow(0 0 6px var(--lv-accent))}50%{filter:drop-shadow(0 0 18px var(--lv-accent))}}

/* 1. CODE CANNON */
.cannon-stage{text-align:center}
.cannon-question{font-family:var(--fh);font-size:1.25rem;color:#fff;margin:6px auto 4px;max-width:520px;line-height:1.3}
.cannon-field{position:relative;height:300px;margin-top:10px;border-radius:22px;background:radial-gradient(circle at 50% 110%,color-mix(in srgb,var(--lv-accent) 14%,transparent),transparent 60%),rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08);overflow:hidden}
.cannon-target{position:absolute;top:calc(14px + (var(--ci) * 0px));left:50%;min-width:74px;height:74px;border-radius:50%;display:grid;place-items:center;font-family:var(--fh);font-size:1.15rem;color:#fff;background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.04));border:2px solid rgba(255,255,255,.22);cursor:pointer;animation:cannonFloat 4s ease-in-out infinite;transition:transform .2s,border-color .2s;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.cannon-target:nth-child(1){left:14%;animation-delay:0s}.cannon-target:nth-child(2){left:38%;animation-delay:.6s;top:46px}.cannon-target:nth-child(3){left:62%;animation-delay:1.1s}.cannon-target:nth-child(4){left:84%;animation-delay:.3s;top:50px}
.cannon-target span{padding:0 8px}
.cannon-target:hover{transform:scale(1.12);border-color:var(--lv-accent)}
.cannon-target.hit{background:var(--lv-grad);color:#06120d;border-color:#fff;transform:scale(1.3);box-shadow:0 0 40px var(--lv-accent)}
.cannon-target.miss{border-color:#EF5350;background:rgba(239,83,80,.22)}
@keyframes cannonFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.cannon-base{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);display:grid;place-items:center}
.cannon-body{font-size:2.4rem;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.cannon-barrel{position:absolute;bottom:24px;width:10px;height:34px;border-radius:5px;background:var(--lv-grad);transform-origin:bottom center;box-shadow:0 0 14px var(--lv-accent);transition:transform .25s var(--spring)}
.cannon-shot{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--lv-accent);box-shadow:0 0 16px var(--lv-accent);z-index:6;transition:transform .34s cubic-bezier(.4,0,.9,.5)}

/* 2. SIGNAL FLOW */
.sf-board{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,12vw,160px);padding:6px 4px;margin-top:8px}
.sf-col{display:flex;flex-direction:column;gap:12px;z-index:2}
.sf-wires{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:visible}
.sf-wire{stroke-dasharray:7 6;filter:drop-shadow(0 0 6px var(--lv-accent));animation:sfDash .6s linear infinite,pbPop .4s var(--spring)}
@keyframes sfDash{to{stroke-dashoffset:-26}}
.sf-node{position:relative;display:flex;align-items:center;gap:10px;padding:13px 15px;border-radius:15px;font-weight:800;font-size:.86rem;color:#fff;text-align:left;line-height:1.3;background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1.5px solid rgba(255,255,255,.13);cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s;animation:pbPop .4s var(--spring) backwards}
.sf-node span{flex:1}
.sf-right{flex-direction:row-reverse;text-align:right}
.sf-node:hover:not(.linked){transform:translateY(-2px);border-color:var(--lv-accent)}
.sf-node.active{border-color:#FFD93D;box-shadow:0 0 0 3px rgba(255,217,61,.16),0 8px 24px rgba(0,0,0,.3)}
.sf-node.linked{border-color:var(--lv-accent);box-shadow:0 0 22px color-mix(in srgb,var(--lv-accent) 22%,transparent);opacity:.92}
.sf-dot{width:13px;height:13px;flex-shrink:0;border-radius:50%;background:#13162b;border:3px solid var(--lv-accent);box-shadow:0 0 10px var(--lv-accent)}
.sf-node.linked .sf-dot{background:var(--lv-accent)}

/* 3. STACK TOWER */
.st-wrap{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;margin-top:8px}
.st-pool{display:flex;flex-direction:column;gap:9px}
.st-chip{display:flex;flex-direction:column;gap:2px;padding:11px 13px;border-radius:13px;font-weight:800;font-size:.82rem;color:#fff;text-align:left;background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1.5px solid rgba(255,255,255,.14);cursor:pointer;transition:transform .2s,opacity .2s;animation:pbPop .4s var(--spring) backwards}
.st-chip:hover:not(.used){transform:translateX(4px);border-color:var(--lv-accent)}
.st-chip.used{opacity:.22;pointer-events:none;filter:grayscale(.6)}
.st-arrow{font-size:.6rem;letter-spacing:1px;font-weight:900;color:var(--lv-accent)}
.st-tower-box{display:flex;flex-direction:column;justify-content:flex-end;min-height:240px;padding:10px;border-radius:16px;background:rgba(0,0,0,.28);border:2px dashed rgba(255,255,255,.12)}
.st-tower{display:flex;flex-direction:column-reverse;gap:6px;flex:1;justify-content:flex-start}
.st-empty{margin:auto;color:rgba(255,255,255,.28);font-weight:800;font-size:.82rem}
.st-block{display:flex;align-items:center;gap:8px;padding:11px 13px;border-radius:11px;font-weight:800;font-size:.8rem;color:#06120d;background:var(--lv-grad);box-shadow:0 6px 16px rgba(0,0,0,.3);animation:stDrop .4s var(--spring)}
.st-block b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.25);color:#fff;font-size:.68rem;flex-shrink:0}
@keyframes stDrop{from{transform:translateY(-30px) scale(.8);opacity:0}to{transform:none;opacity:1}}
.st-floor{text-align:center;margin-top:8px;font-size:.62rem;font-weight:900;letter-spacing:1.5px;color:rgba(255,255,255,.4)}

/* 4. BINARY HUNTER */
.bh-stage{text-align:center}
.bh-target{font-family:var(--fh);font-size:1.3rem;margin:4px 0 14px;color:#fff}.bh-target b{color:var(--lv-accent)}
.bh-array{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.bh-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;width:54px;height:62px;border-radius:13px;background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.13);transition:all .35s var(--spring)}
.bh-cell small{font-size:.5rem;color:rgba(255,255,255,.35);font-weight:800}
.bh-cell b{font-family:var(--fh);font-size:1.3rem;color:#fff}
.bh-cell.bh-out{opacity:.18;transform:scale(.82);filter:grayscale(1)}
.bh-cell.bh-mid{border-color:#FFD93D;background:rgba(255,217,61,.16);box-shadow:0 0 22px rgba(255,217,61,.4);transform:translateY(-6px) scale(1.08)}
.bh-cell.bh-found{border-color:var(--lv-accent);background:var(--lv-grad)}.bh-cell.bh-found b{color:#06120d}
.bh-readout{min-height:44px;display:flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:13px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.1);font-weight:700;font-size:.9rem;color:rgba(255,255,255,.85);margin-bottom:10px}
.bh-readout b{color:var(--lv-accent)}
.bh-steps{margin-top:10px;font-size:.8rem;font-weight:800;color:rgba(255,255,255,.5)}.bh-steps b{color:#FFD93D;font-family:var(--fh)}

/* 5. SORT ARENA */
.sa-stage{text-align:center}
.sa-track{display:flex;gap:8px;justify-content:center;align-items:flex-end;min-height:190px;padding:14px;border-radius:18px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08);margin-top:8px}
.sa-bar{display:flex;align-items:flex-start;justify-content:center;width:46px;border-radius:9px 9px 4px 4px;background:var(--lv-grad);color:#06120d;font-family:var(--fh);font-size:.78rem;padding-top:6px;cursor:pointer;transition:height .35s var(--spring),transform .2s,box-shadow .2s;box-shadow:0 6px 14px rgba(0,0,0,.25)}
.sa-bar b{background:rgba(0,0,0,.18);border-radius:6px;padding:1px 5px}
.sa-bar:hover{transform:translateY(-5px);filter:brightness(1.12)}
.sa-bar.sa-sel{outline:3px solid #FFD93D;outline-offset:2px;transform:translateY(-8px)}
.sa-bar.sa-swap{animation:saSwap .35s ease}
.sa-bar.sa-ok{outline:3px solid #00FF88;box-shadow:0 0 22px rgba(0,255,136,.4)}
@keyframes saSwap{50%{transform:translateY(-16px) rotate(4deg)}}

/* 6. LOGIC GATES */
.lg-stage{text-align:center}
.lg-circuit{display:flex;align-items:center;justify-content:center;gap:clamp(14px,5vw,46px);margin:14px 0;flex-wrap:wrap}
.lg-col{display:flex;flex-direction:column;gap:12px}
.lg-input{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 16px;border-radius:14px;background:rgba(255,255,255,.05);border:2px solid rgba(255,255,255,.14);cursor:pointer;transition:all .2s var(--spring)}
.lg-input small{font-family:var(--fh);color:rgba(255,255,255,.6);font-size:.8rem}
.lg-led{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#16182c;border:2px solid rgba(255,255,255,.18);font-family:var(--fh);font-size:1.2rem;color:rgba(255,255,255,.4);transition:.2s}
.lg-input[data-on="1"]{border-color:var(--lv-accent)}
.lg-input[data-on="1"] .lg-led{background:var(--lv-accent);color:#06120d;border-color:#fff;box-shadow:0 0 20px var(--lv-accent)}
.lg-gate{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 22px;border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.02));border:2px solid rgba(255,255,255,.16)}
.lg-gate small{font-family:var(--fh);letter-spacing:2px;color:#fff;font-size:1rem}
.lg-gate-icon{font-size:2rem}
.lg-gate.on{border-color:var(--lv-accent);box-shadow:0 0 26px color-mix(in srgb,var(--lv-accent) 30%,transparent)}
.lg-gate.on .lg-gate-icon{animation:pbGlow 1.2s ease-in-out infinite}
.lg-out{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 20px;border-radius:16px;border:2px solid rgba(255,255,255,.14)}
.lg-out small{font-size:.55rem;font-weight:900;letter-spacing:1.5px;color:rgba(255,255,255,.4)}
.lg-bulb{font-size:2.6rem;transition:.2s}
.lg-out.on{border-color:#FFD93D;background:rgba(255,217,61,.1)}
.lg-out.on .lg-bulb{filter:drop-shadow(0 0 18px #FFD93D);transform:scale(1.1)}
.lg-goal{font-weight:800;color:rgba(255,255,255,.65);margin-bottom:12px}.lg-goal b{color:var(--lv-accent)}

/* 7. MEMORY GRID */
.mg-stage{text-align:center}
.mg-cell{position:relative;max-width:280px;margin:6px auto 16px;padding:20px;border-radius:20px;background:rgba(0,0,0,.32);border:3px solid var(--lv-accent);transition:.2s}
.mg-cell.mg-ok{box-shadow:0 0 36px color-mix(in srgb,var(--lv-accent) 40%,transparent)}
.mg-addr{position:absolute;top:8px;right:14px;font-family:'Courier New',monospace;font-size:.62rem;color:rgba(255,255,255,.35);font-weight:800}
.mg-name{font-family:var(--fh);font-size:1.15rem;color:rgba(255,255,255,.42);margin-bottom:4px}
.mg-val{font-family:var(--fh);font-size:3.6rem;line-height:1;min-height:62px;display:flex;align-items:center;justify-content:center;background:var(--lv-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.mg-q{font-weight:800;color:rgba(255,255,255,.62);max-width:440px;margin:0 auto 14px;line-height:1.5}
.mg-chips{display:flex;gap:11px;flex-wrap:wrap;justify-content:center}
.mg-chip{min-width:72px;height:62px;padding:0 14px;border-radius:16px;background:rgba(255,255,255,.07);border:3px solid rgba(255,255,255,.15);font-family:var(--fh);font-size:1.25rem;color:#fff;cursor:pointer;transition:all .2s var(--spring)}
.mg-chip:hover{transform:scale(1.08);border-color:var(--lv-accent)}
.mg-chip.mg-active{border-color:var(--lv-accent);background:rgba(255,255,255,.14);transform:scale(1.1)}
.mg-chip.mg-no{border-color:#EF5350;background:rgba(239,83,80,.18)}

/* 8. TRUTH SWITCH */
.ts-stage{text-align:center}
.ts-track{display:flex;gap:9px;justify-content:center;margin:6px 0 16px}
.ts-dot{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.15);transition:.3s var(--spring)}
.ts-dot.done{background:#00FF88;box-shadow:0 0 10px rgba(0,255,136,.5)}.ts-dot.bad{background:#FF4444}.ts-dot.cur{background:var(--lv-accent);transform:scale(1.4)}
.ts-card{max-width:440px;margin:0 auto;padding:22px;border-radius:20px;background:rgba(0,0,0,.3);border:2px solid rgba(255,255,255,.1);animation:pbPop .35s var(--spring)}
.ts-expr{font-family:'Courier New',monospace;font-size:1.5rem;font-weight:800;color:var(--lv-accent);margin-bottom:8px}
.ts-q{font-weight:800;color:rgba(255,255,255,.7);margin-bottom:18px}
.ts-switches{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.ts-switch{display:flex;align-items:center;gap:10px;min-width:130px;padding:8px 10px 8px 8px;border-radius:99px;background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.15);font-family:var(--fh);font-size:1rem;color:#fff;cursor:pointer;transition:all .2s var(--spring)}
.ts-knob{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.25);transition:.25s var(--spring);flex-shrink:0}
.ts-switch:hover{border-color:var(--lv-accent)}
.ts-switch.ts-on{border-color:#00FF88;background:rgba(0,255,136,.16)}.ts-switch.ts-on .ts-knob{background:#00FF88;transform:translateX(4px);box-shadow:0 0 14px #00FF88}
.ts-switch.ts-off{border-color:#FF4444;background:rgba(255,68,68,.16)}.ts-switch.ts-off .ts-knob{background:#FF4444}

/* 9. PATH FINDER */
.pf-stage{text-align:center}
.pf-grid{display:grid;gap:6px;max-width:340px;margin:10px auto;padding:10px;border-radius:16px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08)}
.pf-cell{aspect-ratio:1;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.05);font-size:1.4rem;display:grid;place-items:center;cursor:pointer;transition:all .2s var(--spring)}
.pf-cell.pf-open:hover{background:rgba(255,255,255,.12);transform:scale(1.06)}
.pf-cell.pf-wall{background:linear-gradient(145deg,#4a2032,#8b263f);cursor:not-allowed;border-color:rgba(255,255,255,.04)}
.pf-cell.pf-start{background:var(--lv-grad)}
.pf-cell.pf-goal{background:rgba(255,217,61,.18);border-color:#FFD93D;animation:pbGlow 1.6s ease-in-out infinite}
.pf-cell.pf-on{background:var(--lv-grad);box-shadow:0 0 16px color-mix(in srgb,var(--lv-accent) 40%,transparent);animation:pfPulse .3s var(--spring)}
@keyframes pfPulse{50%{transform:scale(1.18)}}
.pf-info{min-height:38px;display:flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:12px;background:rgba(0,0,0,.25);font-weight:700;font-size:.84rem;color:rgba(255,255,255,.7);max-width:420px;margin:0 auto}.pf-info b{color:var(--lv-accent)}

/* 10. CODE BUILDER */
.cb-stage{text-align:center}
.cb-term{max-width:560px;margin:4px auto 0;border-radius:14px;overflow:hidden;background:#0a0e1a;border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 50px rgba(0,0,0,.4)}
.cb-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.06)}
.cb-bar i{width:11px;height:11px;border-radius:50%}.cb-bar i:nth-child(1){background:#FF5F57}.cb-bar i:nth-child(2){background:#FEBC2E}.cb-bar i:nth-child(3){background:#28C840}
.cb-bar span{margin-left:8px;font-family:'Courier New',monospace;font-size:.7rem;color:rgba(255,255,255,.4)}
.cb-code{text-align:left;padding:18px 20px;font-family:'Courier New',monospace;font-size:.92rem;line-height:2.5;color:#c9d1d9;white-space:pre-wrap}
.cb-kw{color:#FF7B72;font-weight:700}.cb-str{color:#A5D6FF}
.cb-slot{display:inline-flex;align-items:center;justify-content:center;min-width:70px;height:28px;padding:0 10px;margin:0 2px;border-radius:7px;border:2px dashed rgba(255,255,255,.28);background:rgba(255,255,255,.04);font-family:'Courier New',monospace;font-weight:800;font-size:.86rem;color:rgba(255,255,255,.35);cursor:pointer;vertical-align:middle;transition:.2s}
.cb-slot.active{border-color:var(--lv-accent);outline:2px solid color-mix(in srgb,var(--lv-accent) 40%,transparent)}
.cb-slot.filled{border-style:solid;border-color:var(--lv-accent);color:var(--lv-accent);background:color-mix(in srgb,var(--lv-accent) 12%,transparent)}
.cb-slot.cb-ok{border-color:#00FF88;color:#00FF88;background:rgba(0,255,136,.12)}
.cb-slot.cb-err{border-color:#EF5350;color:#EF5350;animation:cShake .4s ease}
.cb-bank{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:6px}
.cb-token{padding:9px 16px;border-radius:10px;background:var(--lv-grad);color:#06120d;font-family:'Courier New',monospace;font-weight:800;font-size:.86rem;cursor:pointer;transition:transform .15s var(--spring);box-shadow:0 4px 12px rgba(0,0,0,.25)}
.cb-token:hover{transform:translateY(-3px) scale(1.05)}

@media(max-width:600px){
  .st-wrap{grid-template-columns:1fr}
  .cannon-field{height:260px}
  .sf-board{gap:50px}.sf-node{font-size:.78rem;padding:11px}
  .sa-bar{width:36px}.bh-cell{width:44px;height:54px}.bh-cell b{font-size:1rem}
  .lg-circuit{gap:14px}
}

/* ════════════════════════════════════════════════
   HOME / LEVEL SPECTACULAR POLISH
════════════════════════════════════════════════ */
/* animated sheen on the hero gradient word */
@keyframes heroSheen{0%{background-position:0% 50%}100%{background-position:200% 50%}}
h1 span[style*="background-clip"]{background-size:200% auto!important;animation:heroSheen 4s linear infinite}
/* stat cards gentle lift + shimmer */
#statsRow .card{transition:transform .3s var(--spring),box-shadow .3s;position:relative;overflow:hidden}
#statsRow .card:hover{transform:translateY(-5px) scale(1.04);box-shadow:0 16px 40px rgba(0,0,0,.4)}
#statsRow .card::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.12),transparent);transform:skewX(-18deg);animation:cardShine 5s ease-in-out infinite}
@keyframes cardShine{0%,72%{left:-60%}82%{left:120%}100%{left:120%}}
/* level card glow sweep on hover + animated border */
.lv-card::after{content:"";position:absolute;inset:0;border-radius:26px;background:radial-gradient(circle at 50% -20%,color-mix(in srgb,var(--lc-border,#4ECDC4) 22%,transparent),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.lv-card:hover:not(.locked)::after{opacity:1}
.lv-card:hover:not(.locked){transform:translateY(-10px) scale(1.025)}
/* hero robot subtle aura */
.hero-robot{position:relative}
.hero-robot::before{content:"";position:absolute;inset:-30px;border-radius:50%;background:radial-gradient(circle,rgba(78,205,196,.18),transparent 65%);z-index:-1;animation:auraPulse 3s ease-in-out infinite}
@keyframes auraPulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.18);opacity:1}}
/* challenge cards stagger shine */
.ch-card::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.08),transparent);transform:skewX(-18deg);opacity:0;transition:opacity .2s}
.ch-card:hover:not(.ch-lock)::after{opacity:1;animation:cardShine 1.2s ease-out}
/* topbar logo gentle pulse */
.logo{animation:logoFloat 5s ease-in-out infinite}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}