:root{--ink:#263858;--muted:#6b7d9d;--sky:#8bd7ff;--lavender:#a9a0ff;--panel:rgba(255,255,255,.88);--shadow:0 18px 50px rgba(68,93,144,.18)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-rounded,"SF Pro Rounded",system-ui,sans-serif;color:var(--ink);background:radial-gradient(circle at 12% 12%,rgba(255,255,255,.9) 0 7%,transparent 8%),radial-gradient(circle at 87% 18%,rgba(255,255,255,.68) 0 5%,transparent 6%),linear-gradient(145deg,#d9f6ff 0%,#cfe5ff 42%,#e8ddff 100%)}body{min-height:100vh;overflow-x:hidden}button{font:inherit}.app-shell{width:min(1120px,100%);margin:auto;padding:22px clamp(14px,3vw,34px) 40px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px}.brand{display:flex;align-items:center;gap:12px}.mascot{width:56px;height:56px;display:grid;place-items:center;border-radius:20px;background:rgba(255,255,255,.78);box-shadow:var(--shadow);font-size:29px}.eyebrow{margin:0 0 4px;font-size:11px;font-weight:900;letter-spacing:.14em;color:#6e76d8}h1,h2,p{margin-top:0}h1{margin-bottom:0;font-size:clamp(22px,3vw,34px)}h2{font-size:clamp(29px,5vw,45px);margin-bottom:12px}.stats{display:flex;gap:8px}.stat{min-width:76px;padding:9px 13px;border-radius:16px;background:rgba(255,255,255,.72);text-align:center;box-shadow:0 10px 28px rgba(74,94,142,.1)}.stat span{display:block;color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase}.stat strong{font-size:20px}.game-card,.tip-card{background:var(--panel);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow)}.game-card{padding:clamp(16px,3vw,28px);border-radius:32px}.mission-row{display:flex;justify-content:space-between;align-items:center;gap:16px}.mission-title{margin-bottom:5px;font-weight:900;font-size:18px}.mission-copy{margin-bottom:0;color:var(--muted)}.sdk-badge{padding:8px 12px;border-radius:999px;background:#eef2ff;color:#6366c9;font-weight:850;font-size:12px}.sdk-badge.connected{background:#e2fbeb;color:#228a50}.progress-track{height:10px;margin:20px 0 6px;border-radius:999px;overflow:hidden;background:#e8edf7}.progress-fill{width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--sky),var(--lavender));transition:width .25s}.board{min-height:430px;display:flex;align-content:center;justify-content:center;align-items:flex-end;flex-wrap:wrap;gap:clamp(13px,2.1vw,26px);padding:42px 10px 34px;perspective:900px}.tube-wrap{position:relative;width:clamp(62px,8.2vw,86px);height:clamp(190px,27vw,250px);display:grid;place-items:end center;cursor:pointer;user-select:none;background:none;border:0;transition:transform .2s,filter .2s}.tube-wrap:hover{transform:translateY(-6px)}.tube-wrap.selected{transform:translateY(-18px) rotate(-2deg);filter:drop-shadow(0 12px 12px rgba(88,115,190,.24))}.tube-wrap.invalid{animation:shake .33s linear}.tube{position:relative;width:74%;height:92%;overflow:hidden;border:5px solid rgba(85,111,145,.42);border-top-width:3px;border-radius:10px 10px 28px 28px;background:linear-gradient(90deg,rgba(255,255,255,.58),rgba(255,255,255,.13) 54%,rgba(255,255,255,.47));box-shadow:inset 8px 0 12px rgba(255,255,255,.42),inset -5px 0 10px rgba(49,79,123,.08),0 12px 18px rgba(73,101,145,.13)}.tube:before{content:"";position:absolute;z-index:6;left:8px;top:10px;width:7px;height:63%;border-radius:999px;background:rgba(255,255,255,.44)}.tube-lip{position:absolute;z-index:8;top:4%;left:5%;width:90%;height:12px;border:4px solid rgba(83,108,144,.42);border-radius:50%;background:rgba(255,255,255,.28)}.liquid{position:absolute;left:0;width:100%;height:25.15%;border-top:2px solid rgba(255,255,255,.45);transition:bottom .25s}.liquid:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.22),transparent 50%,rgba(22,43,78,.08))}.liquid.top{border-radius:42% 42% 0 0/12px 12px 0 0}.tube-shadow{width:72%;height:12px;margin-top:2px;border-radius:50%;background:rgba(64,81,121,.14);filter:blur(3px)}.controls{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.primary-btn,.secondary-btn{border:0;border-radius:16px;font-weight:900;cursor:pointer;transition:transform .15s,opacity .15s}.primary-btn{padding:14px 25px;color:white;background:linear-gradient(135deg,#6cc9ff,#8a7df1);box-shadow:0 12px 25px rgba(109,111,224,.3)}.secondary-btn{padding:11px 17px;color:#52668b;background:#edf2fb}button:hover{transform:translateY(-2px)}button:disabled{opacity:.42;cursor:default;transform:none}.tip-card{margin-top:14px;padding:13px 18px;display:flex;gap:11px;align-items:center;border-radius:18px}.tip-card p{margin:0;color:var(--muted)}.tip-icon{font-size:22px}.modal{position:fixed;z-index:40;inset:0;display:none;place-items:center;padding:20px;background:rgba(31,48,82,.38);backdrop-filter:blur(12px)}.modal.visible{display:grid}.modal-panel{width:min(460px,100%);padding:34px;border-radius:31px;text-align:center;background:white;box-shadow:0 28px 80px rgba(37,54,91,.3);animation:pop .35s}.modal-panel>p:not(.eyebrow){color:var(--muted);line-height:1.6}.modal-art{font-size:65px;margin-bottom:12px}.results{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}.results div{padding:15px;border-radius:16px;background:#f1f5fc}.results span{display:block;color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase}.results strong{font-size:24px}.toast{position:fixed;z-index:60;left:50%;bottom:24px;transform:translate(-50%,120px);padding:11px 18px;border-radius:999px;color:white;background:#344567;font-weight:800;box-shadow:0 12px 30px rgba(30,46,77,.25);transition:transform .3s}.toast.visible{transform:translate(-50%,0)}@keyframes shake{25%{transform:translateX(-7px)}50%{transform:translateX(7px)}75%{transform:translateX(-4px)}}@keyframes pop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}@media(max-width:720px){.topbar{align-items:flex-start}.brand h1{font-size:20px}.mascot{width:46px;height:46px;border-radius:15px}.stats{gap:5px}.stat{min-width:60px;padding:7px 8px}.stat strong{font-size:17px}.mission-row{align-items:flex-start}.mission-copy{font-size:13px}.board{min-height:390px;padding-inline:0;gap:8px}.tube-wrap{width:clamp(50px,16vw,68px);height:clamp(165px,48vw,215px)}}@media(max-width:470px){.topbar{flex-direction:column}.stats{width:100%}.stat{flex:1}.game-card{border-radius:24px}.board{min-height:350px;padding-top:30px}.tube-wrap{width:52px;height:172px}}