/* AE//OS + LAB */
.aeos,.lab{position:fixed;inset:0;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s,transform .45s cubic-bezier(.2,.8,.2,1);font-family:ui-monospace,Menlo,Consolas,monospace;color:#dcebff}
.aeos{z-index:900;--ac:#7fc4ff;transform:scale(1.04);background:#02040a}
.aeos.on,.lab.on{opacity:1;visibility:visible;transform:none}
.lab{z-index:960;background:#02040c;transform:scale(1.06)}
.ae-bg{position:absolute;inset:0;background:radial-gradient(900px 500px at 70% 10%,rgba(90,110,255,.22),transparent),radial-gradient(800px 600px at 10% 90%,rgba(40,160,255,.18),transparent),linear-gradient(#02040a,#050a1c)}
.ae-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(127,196,255,.07) 1px,transparent 1px) 0 0/44px 44px,linear-gradient(90deg,rgba(127,196,255,.07) 1px,transparent 1px) 0 0/44px 44px;mask:radial-gradient(circle at 50% 40%,#000,transparent 80%)}
.aeos:not(.noscan)::after,.lab-scan{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(transparent 0 2px,rgba(0,0,0,.18) 2px 3px);z-index:2000}
.aeos[data-wp=b] .ae-bg{filter:hue-rotate(60deg)}.aeos[data-wp=c] .ae-bg{filter:brightness(.15)}
.aeos.noglow .ae-win{box-shadow:none}
.ae-top{position:absolute;top:0;left:0;right:0;height:34px;display:flex;align-items:center;gap:14px;padding:0 10px;background:rgba(6,12,28,.78);backdrop-filter:blur(14px);border-bottom:1px solid rgba(127,196,255,.18);z-index:3000;font-size:.74rem}
.ae-title{flex:1;color:#7d8ba3;letter-spacing:.2em}.ae-net{color:#5dffa8}.ae-net.off{color:#ff7a8a}
.ae-start,.ae-btn{background:none;border:1px solid rgba(127,196,255,.25);color:#dcebff;border-radius:7px;padding:3px 10px;cursor:pointer;font:inherit;transition:.25s}
.ae-start{font-weight:800;letter-spacing:.08em}.ae-start i{color:var(--ac);font-style:normal}
.ae-start:hover,.ae-btn:hover{background:rgba(127,196,255,.15);box-shadow:0 0 14px rgba(127,196,255,.35)}
.ae-btn b{background:var(--ac);color:#000;border-radius:9px;padding:0 5px;margin-left:4px;font-size:.65rem}
.ae-menu{position:absolute;top:40px;left:8px;z-index:3000;width:210px;padding:8px;background:rgba(6,12,28,.92);backdrop-filter:blur(16px);border:1px solid rgba(127,196,255,.25);border-radius:12px;display:grid;gap:2px;transform:translateY(-8px);opacity:0;visibility:hidden;transition:.25s}
.ae-menu.on{transform:none;opacity:1;visibility:visible}
.ae-menu button{display:flex;gap:10px;background:none;border:0;color:inherit;font:inherit;padding:8px 10px;border-radius:8px;cursor:pointer;text-align:left}
.ae-menu button:hover{background:rgba(127,196,255,.14)}.ae-menu i{font-style:normal;width:18px;color:var(--ac)}
.ae-notes{position:absolute;top:40px;right:8px;z-index:3000;width:280px;max-height:50vh;overflow:auto;display:none;gap:6px}
.ae-notes.on{display:grid}
.ae-notes div,.ae-pop{background:rgba(6,12,28,.92);border:1px solid rgba(127,196,255,.25);border-radius:10px;padding:8px 12px;font-size:.76rem;display:grid}
.ae-notes span,.ae-pop span{color:#8d9bb5}.ae-pop{position:absolute;right:12px;bottom:60px;z-index:3000;animation:aePop .4s both}
@keyframes aePop{from{transform:translateX(30px);opacity:0}}
.ae-desk{position:absolute;top:52px;left:16px;bottom:60px;display:grid;grid-auto-flow:row;grid-template-rows:repeat(auto-fill,84px);gap:6px;align-content:start}
.ae-desk button{width:84px;background:none;border:0;color:inherit;font:inherit;font-size:.68rem;display:grid;justify-items:center;gap:3px;padding:6px;border-radius:10px;cursor:pointer;transition:.25s}
.ae-desk button i{font-style:normal;font-size:1.5rem;width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:rgba(127,196,255,.1);border:1px solid rgba(127,196,255,.25);transition:.25s}
.ae-desk button:hover i{box-shadow:0 0 20px rgba(127,196,255,.5);transform:translateY(-3px) rotateX(18deg)}
.ae-dock{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:6px;padding:6px;background:rgba(6,12,28,.8);backdrop-filter:blur(14px);border:1px solid rgba(127,196,255,.22);border-radius:14px;z-index:3000;max-width:96vw;overflow-x:auto}
.ae-dock:empty{display:none}.ae-dock button{background:none;border:1px solid transparent;color:#9fb0cc;font:inherit;font-size:.72rem;padding:6px 10px;border-radius:9px;cursor:pointer;white-space:nowrap;transition:.25s}
.ae-dock button.act{border-color:var(--ac);color:#fff;box-shadow:0 0 12px rgba(127,196,255,.3)}
.ae-win{position:absolute;display:flex;flex-direction:column;max-width:100vw;max-height:calc(100vh - 100px);background:rgba(7,12,26,.88);backdrop-filter:blur(18px);border:1px solid rgba(127,196,255,.22);border-radius:12px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6);animation:winIn .3s cubic-bezier(.2,.9,.3,1.2) both;transition:opacity .18s,transform .18s}
.ae-win.act{border-color:rgba(127,196,255,.6);box-shadow:0 0 0 1px rgba(127,196,255,.2),0 20px 70px rgba(40,120,255,.28)}
.ae-win.min{opacity:0;pointer-events:none;transform:translateY(40px) scale(.9)}.ae-win.closing{opacity:0;transform:scale(.92)}
.ae-win.max{left:0!important;top:34px!important;width:100vw!important;height:calc(100vh - 34px)!important;max-height:none;border-radius:0}
@keyframes winIn{from{opacity:0;transform:translateY(16px) scale(.94)}}
.ae-wh{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;background:linear-gradient(90deg,rgba(127,196,255,.14),transparent);cursor:grab;user-select:none;touch-action:none;font-size:.76rem}
.ae-wh button{background:none;border:0;color:#9fb0cc;width:26px;height:22px;border-radius:6px;cursor:pointer;font:inherit}.ae-wh button:hover{background:rgba(127,196,255,.2);color:#fff}.ae-wh button[data-w=x]:hover{background:#ff4d6a}
.ae-wb{flex:1;overflow:auto;min-height:0}.ae-pad{padding:14px;display:grid;gap:10px;align-content:start;font-size:.82rem}.ae-pad h3{letter-spacing:.14em;color:#fff}.ae-dim{color:#7d8ba3;font-size:.74rem}
.ae-row{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:8px 10px;border:1px solid rgba(127,196,255,.14);border-radius:9px;transition:.25s}.ae-row:hover{border-color:var(--ac);background:rgba(127,196,255,.06)}
.ae-row small{grid-column:1;color:#7d8ba3}.ae-row a{color:var(--ac);grid-column:2;grid-row:2;font-size:.74rem}
.st{font-style:normal;font-size:.64rem;padding:1px 8px;border-radius:9px;border:1px solid;align-self:center}.st.online{color:#5dffa8}.st.comingsoon,.st.planned{color:#ffd166}
.ae-files summary,.ae-files div[data-f]{cursor:pointer;padding:3px 8px;border-radius:6px}.ae-files div[data-f]{margin-left:18px;color:#9fb0cc}.ae-files [data-f]:hover{background:rgba(127,196,255,.12)}
.ae-out{white-space:pre-wrap;background:rgba(0,0,0,.4);border-radius:8px;padding:10px;min-height:70px;color:#8fe3ff;font-size:.76rem}
.ae-pad label{display:flex;justify-content:space-between;align-items:center}.ae-pad select,.ae-pad input[type=color]{background:#0a1226;color:#dcebff;border:1px solid rgba(127,196,255,.3);border-radius:6px;padding:3px}
.ae-big{background:linear-gradient(135deg,rgba(127,196,255,.3),rgba(130,100,255,.3));border:1px solid var(--ac);color:#fff;padding:10px;border-radius:10px;font:inherit;font-weight:800;letter-spacing:.14em;cursor:pointer;transition:.3s}.ae-big:hover{box-shadow:0 0 26px rgba(127,196,255,.5);letter-spacing:.2em}
.ae-term{height:100%;display:flex;flex-direction:column;background:#02060f;font-size:.78rem;padding:10px;overflow:auto;color:#9fe8b8}.ae-term .cm{color:#7fc4ff}.ae-term .er{color:#ff7a8a}.ae-term div{white-space:pre-wrap}
.tin{display:flex;gap:8px;margin-top:4px}.tin span{color:#7fc4ff}.tin input{flex:1;background:none;border:0;outline:0;color:#fff;font:inherit;caret-color:var(--ac)}
.ae-mon{padding:12px;display:grid;gap:8px}.ae-mon .m{display:grid;grid-template-columns:1fr 60px;grid-template-rows:auto auto;gap:2px 8px;padding:8px;border:1px solid rgba(127,196,255,.14);border-radius:9px;font-size:.72rem}.ae-mon .m span{grid-column:1}.ae-mon em{color:#7d8ba3;font-style:normal}.ae-mon canvas{grid-column:1;width:100%;height:44px}.ae-mon .m b{grid-column:2;grid-row:1/3;align-self:center;text-align:right;font-size:1.1rem;color:var(--ac)}.ae-mon .up{grid-template-rows:auto}
/* LAB */
.lab-top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:16px 22px;z-index:5}.lab-top small{color:#7d8ba3;letter-spacing:.3em;display:block}.lab-top b{letter-spacing:.2em;color:#6ee7ff;text-shadow:0 0 14px #6ee7ff}
.lab-top button,#bbBack{background:none;border:1px solid rgba(255,93,122,.6);color:#ff9fb0;padding:8px 16px;border-radius:9px;font:inherit;letter-spacing:.14em;cursor:pointer;transition:.3s}.lab-top button:hover{background:rgba(255,93,122,.18);box-shadow:0 0 22px rgba(255,93,122,.4)}
.lab::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 400px at 50% 30%,rgba(70,100,255,.2),transparent),linear-gradient(rgba(110,170,255,.06) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,rgba(110,170,255,.06) 1px,transparent 1px) 0 0/40px 40px}
.lab.flash::after{content:"";position:absolute;inset:0;background:#9fd2ff;animation:lf .7s forwards;z-index:9}@keyframes lf{from{opacity:.8}to{opacity:0}}
.lab-menu{position:relative;z-index:4;height:100%;display:flex;gap:22px;justify-content:center;align-items:center;flex-wrap:wrap;padding:70px 20px 20px}
.lab-menu button{width:min(320px,88vw);padding:34px 26px;background:rgba(8,14,34,.7);backdrop-filter:blur(14px);border:1px solid rgba(127,196,255,.28);border-radius:16px;color:#dcebff;font:inherit;text-align:left;display:grid;gap:8px;cursor:pointer;transition:.35s cubic-bezier(.2,.8,.2,1)}
.lab-menu button:hover{transform:translateY(-8px) perspective(600px) rotateX(6deg);border-color:#6ee7ff;box-shadow:0 20px 60px rgba(60,140,255,.35),inset 0 0 40px rgba(110,200,255,.08)}
.lab-menu span{color:#6ee7ff;font-size:.8rem}.lab-menu b{font-size:1.3rem;letter-spacing:.14em}.lab-menu em{color:#7d8ba3;font-style:normal;font-size:.8rem}
.lab-stage{position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:60px 10px 10px}.lab-stage canvas{width:min(100%,calc((100vh - 80px)*1.538));aspect-ratio:800/520;border:1px solid rgba(127,196,255,.3);border-radius:14px;box-shadow:0 0 60px rgba(60,120,255,.3);touch-action:none;cursor:none;background:#04060f}
#bbBack{position:absolute;top:22px;left:50%;transform:translateX(-50%);border-color:rgba(127,196,255,.4);color:#9fd2ff;padding:5px 12px;z-index:6}
.lab-stage:empty{display:none}
.lab-menu{overflow:auto;align-content:center}
.g2k{display:grid;gap:12px;justify-items:center;color:#dcebff;z-index:5;width:min(92vw,440px)}.g2k .hd{display:flex;justify-content:space-between;width:100%;align-items:center;letter-spacing:.12em}.g2k .hd b{color:#6ee7ff;font-size:1.3rem}
.g2k .hd button{background:none;border:1px solid #6ee7ff;color:#6ee7ff;padding:6px 12px;border-radius:8px;font:inherit;cursor:pointer}
.g2k .bd{position:relative;width:100%;aspect-ratio:1;background:rgba(8,14,34,.8);border:1px solid rgba(127,196,255,.3);border-radius:14px;padding:10px;display:grid;grid-template:repeat(4,1fr)/repeat(4,1fr);gap:10px;touch-action:none;box-shadow:0 0 50px rgba(60,120,255,.25)}
.g2k .c{border-radius:9px;background:rgba(127,196,255,.06);display:grid;place-items:center;font-weight:900;font-size:clamp(1.1rem,6vw,1.9rem);transition:background .15s}
.g2k .c.pop{animation:g2p .22s}.g2k .c.mg{animation:g2m .22s}@keyframes g2p{from{transform:scale(.3);opacity:0}}@keyframes g2m{50%{transform:scale(1.18)}}
.g2k .ov{position:absolute;inset:0;border-radius:14px;background:rgba(2,4,12,.82);display:none;place-items:center;text-align:center;font-weight:800;letter-spacing:.14em;line-height:2}.g2k .ov.on{display:grid}
/* native cursor inside overlays (site's custom cursor sits below them) */
.aeos,.aeos *,.lab,.lab *,.game-modal,.game-modal *,.project-ide,.project-ide *{cursor:default!important}
.aeos button,.aeos summary,.aeos [data-f],.aeos a,.lab button,.game-modal button,.project-ide button,.project-ide a{cursor:pointer!important}
.aeos .ae-wh{cursor:grab!important}.aeos .ae-wh:active{cursor:grabbing!important}.aeos input[type=text],.aeos .tin input,.aeos .ae-term{cursor:text!important}
.lab-stage canvas,.game-modal canvas{cursor:crosshair!important}
#cursorDot,#cursorRing{z-index:2147483000!important}
body:has(.aeos.on) #cursorDot,body:has(.aeos.on) #cursorRing,body:has(.lab.on) #cursorDot,body:has(.lab.on) #cursorRing,body:has(.game-modal.open) #cursorDot,body:has(.game-modal.open) #cursorRing,body:has(.project-ide.open) #cursorDot,body:has(.project-ide.open) #cursorRing{opacity:0!important}
/* ===== MOBILE ===== */
.aeos,.lab{height:100vh;height:100dvh}
@media (max-width:820px){
  .ae-top{gap:6px;padding:0 6px;white-space:nowrap;padding-top:env(safe-area-inset-top);height:calc(38px + env(safe-area-inset-top))}
  .ae-title{display:none}.ae-top>span:nth-of-type(2){margin-left:auto}
  .ae-start,.ae-btn{padding:5px 9px;min-height:30px}
  .ae-menu{top:calc(44px + env(safe-area-inset-top));width:min(260px,92vw)}.ae-menu button{padding:12px}
  .ae-notes{top:calc(44px + env(safe-area-inset-top));width:min(300px,94vw)}
  .ae-desk{top:calc(52px + env(safe-area-inset-top));left:0;right:0;bottom:auto;grid-auto-flow:row;grid-template-rows:none;grid-template-columns:repeat(4,1fr);gap:4px;padding:8px}
  .ae-desk button{width:auto}.ae-desk button i{width:52px;height:52px}
  .ae-win{max-height:none}
  .ae-win.max,.ae-win{left:0!important;top:calc(38px + env(safe-area-inset-top))!important;width:100vw!important;height:calc(100dvh - 38px - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;border-radius:0}
  .ae-win .ae-wh [data-w=max]{display:none}.ae-wh{padding:10px 12px}.ae-wh button{width:40px;height:32px}
  .ae-dock{bottom:calc(8px + env(safe-area-inset-bottom));max-width:96vw}.ae-dock button{padding:10px 12px}
  .tin input,.ae-pad select{font-size:16px}
  .ae-pop{bottom:calc(76px + env(safe-area-inset-bottom));left:10px;right:10px}
  .lab-top{padding:calc(10px + env(safe-area-inset-top)) 12px 10px}.lab-top button{padding:10px 12px}
  .lab-menu{padding:84px 14px 20px;gap:12px;align-content:start;justify-content:center}.lab-menu button{padding:18px;width:100%}
  .lab-stage{padding:70px 4px 10px;align-content:center}.lab-stage canvas{width:100%;border-radius:8px}
  #bbBack{top:calc(14px + env(safe-area-inset-top));padding:10px 12px}
  .g2k{margin-top:30px}
}
@media (max-width:820px) and (orientation:portrait){.lab-stage::after{content:"↻ ROTATE PHONE FOR A BIGGER ARENA";position:absolute;bottom:18px;left:0;right:0;text-align:center;font-size:.68rem;letter-spacing:.14em;color:#7d8ba3;pointer-events:none}.lab-stage:has(.g2k)::after{display:none}}
@media (max-height:480px){.lab-stage canvas{width:auto;height:calc(100dvh - 60px)}.ae-win{height:calc(100dvh - 38px - 56px)!important}}
/* project IDE + game modal on phones */
.project-ide{z-index:1000!important}.game-modal{z-index:1000!important}
@media (max-width:820px){
  .ide-sidebar{display:flex!important;flex-direction:row!important;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .ide-sidebar .ide-project{flex:0 0 auto!important;width:auto!important;min-width:150px}
  .project-ide .ide-content{overflow-wrap:anywhere}
  .ide-close,.modal-close{min-width:44px;min-height:44px}
}

/* AE//OS mobile interaction polish */
@media (max-width:820px){
  .aeos{font-size:14px}
  .ae-top{padding-left:8px;padding-right:8px}
  .ae-start,.ae-btn{min-height:36px;padding:6px 10px}
  .ae-start{font-size:.68rem}
  .ae-top>span:nth-of-type(2){font-size:.58rem}
  .ae-menu{left:8px;right:8px;width:auto;max-height:calc(100dvh - 110px);overflow:auto}
  .ae-menu button{min-height:44px;font-size:.72rem}
  .ae-notes{left:8px;right:8px;width:auto;max-height:38dvh}
  .ae-desk{top:calc(56px + env(safe-area-inset-top));left:6px;right:6px;grid-template-columns:repeat(4,minmax(0,1fr));padding:6px}
  .ae-desk button{font-size:.55rem;min-width:0}
  .ae-desk button i{width:46px;height:46px;font-size:1.3rem}
  .ae-win,.ae-win.max{top:calc(42px + env(safe-area-inset-top))!important;left:6px!important;right:6px!important;width:auto!important;height:calc(100dvh - 42px - 74px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;max-height:none!important;border-radius:12px}
  .ae-wh{min-height:46px;padding:8px 9px;font-size:.68rem}
  .ae-wh button{width:40px;height:36px}
  .ae-wb{overflow:auto;-webkit-overflow-scrolling:touch}
  .ae-pad{padding:12px;font-size:.76rem}
  .ae-row{padding:10px;font-size:.74rem}
  .ae-out{font-size:.7rem}
  .ae-term{font-size:.7rem;line-height:1.7}
  .tin{min-height:42px;align-items:center}
  .tin input{font-size:16px}
  .ae-mon{padding:10px}
  .ae-mon .m{grid-template-columns:1fr 52px}
  .ae-mon canvas{height:40px}
  .ae-dock{bottom:calc(8px + env(safe-area-inset-bottom));left:6px;right:6px;transform:none;max-width:none;justify-content:flex-start}
  .ae-dock button{min-height:42px;padding:9px 11px;font-size:.58rem;flex:0 0 auto}
}
@media (max-width:520px){
  .ae-desk{grid-template-columns:repeat(4,1fr);gap:2px}
  .ae-desk button{padding:4px 2px}
  .ae-desk button i{width:42px;height:42px}
  .ae-win,.ae-win.max{left:4px!important;right:4px!important;width:auto!important;border-radius:10px}
  .ae-dock{overflow-x:auto}
}