:root{
  --px-bg:#050508;--px-panel:#0b0a11;--px-violet:#9b4dff;--px-violet2:#6c2cff;--px-lime:#98ff52;
  --px-text:#f8f7ff;--px-dim:#8e899e;--px-line:rgba(255,255,255,.10);--px-safe-bottom:env(safe-area-inset-bottom,0px)
}
html[data-pixl-os="2"],html[data-pixl-os="2"] body{background:#050508!important;overflow:hidden!important}
html[data-pixl-os="2"] #app{height:100dvh;overflow:hidden}
html[data-pixl-os="2"] #app>.app-shell[data-pixl-os-hidden="true"]{display:none!important}
html[data-pixl-os="2"] body>.modal,html[data-pixl-os="2"] body>.player{z-index:500!important}

.pixl-os{position:relative;height:100dvh;overflow:hidden;color:var(--px-text);font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;background:var(--px-bg);isolation:isolate}
.pixl-os *{box-sizing:border-box}.pixl-os button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}.pixl-os button:active{transform:scale(.97)}
.px-ambient{position:absolute;inset:0;overflow:hidden;z-index:-3;background:radial-gradient(90% 65% at 20% -5%,hsla(var(--focus-a),85%,58%,.16),transparent 66%),linear-gradient(180deg,#080710 0,#050508 64%,#030305 100%)}
.px-ambient:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(#000,transparent 75%)}
.px-ambient i{position:absolute;width:4px;height:4px;background:var(--px-violet);box-shadow:0 0 18px var(--px-violet);opacity:.25;animation:px-drift 8s ease-in-out infinite}.px-ambient i:nth-child(1){left:13%;top:26%}.px-ambient i:nth-child(2){left:72%;top:18%;animation-delay:-3s}.px-ambient i:nth-child(3){left:89%;top:52%;animation-delay:-6s}@keyframes px-drift{50%{transform:translateY(20px);opacity:.55}}

.px-system-bar{height:calc(env(safe-area-inset-top,0px) + 64px);padding:calc(env(safe-area-inset-top,0px) + 10px) 18px 8px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:20}
.px-brand{height:44px;border:0;background:transparent;display:flex;align-items:center;gap:10px;padding:0}.px-brand img{width:34px;height:34px;border-radius:10px;box-shadow:0 0 25px rgba(139,63,255,.35)}.px-brand span{font-weight:950;font-size:18px;letter-spacing:.24em}.px-brand b{font-size:8px;letter-spacing:.22em;color:#a692cc;border:1px solid rgba(166,146,204,.22);padding:4px 5px;border-radius:6px;margin-left:-3px}
.px-system-right{display:flex;align-items:center;gap:9px}.px-local{height:30px;display:flex;align-items:center;gap:6px;padding:0 9px;border:1px solid rgba(255,255,255,.08);background:rgba(13,12,20,.7);border-radius:10px;font-size:8px;letter-spacing:.18em;color:#9e98ad}.px-local i{width:6px;height:6px;border-radius:1px;background:var(--px-lime);box-shadow:0 0 11px rgba(152,255,82,.65)}.px-icon{width:38px;height:38px;border-radius:12px;border:1px solid var(--px-line);background:rgba(18,16,27,.8);font-size:21px;font-weight:800}

.px-stage{position:relative;height:min(49dvh,470px);margin:5px 14px 0;border:1px solid rgba(255,255,255,.12);border-radius:28px;overflow:hidden;background:linear-gradient(135deg,hsla(var(--focus-a),77%,40%,.36),rgba(7,7,11,.82) 49%,hsla(var(--focus-b),75%,42%,.24));box-shadow:0 32px 80px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.06);transition:background .35s ease}
.px-stage:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 76% 60%,hsla(var(--focus-b),95%,60%,.21),transparent 30%),linear-gradient(115deg,rgba(255,255,255,.04),transparent 28%)}
.px-stage:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--px-lime),hsla(var(--focus-a),100%,64%,.7),transparent 82%);box-shadow:0 -8px 28px hsla(var(--focus-a),100%,55%,.28)}
.px-stage-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:15px 15px;mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.65),transparent)}
.px-stage-copy{position:absolute;z-index:3;left:25px;right:36%;bottom:30px}.px-kicker{display:flex;align-items:center;gap:8px;color:#c8b1ff;font-size:9px;font-weight:900;letter-spacing:.21em}.px-kicker i{display:block;width:8px;height:8px;background:var(--px-lime);clip-path:polygon(0 0,100% 0,100% 100%,35% 100%,35% 65%,0 65%);box-shadow:0 0 12px var(--px-lime)}.px-stage h1{font-size:clamp(32px,9.2vw,54px);line-height:.94;letter-spacing:-.055em;margin:13px 0 9px;font-weight:970;text-wrap:balance;text-shadow:0 4px 28px rgba(0,0,0,.35)}.px-stage-copy>p{margin:0;color:#a7a1b3;font-size:12px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.px-stage-actions{display:flex;gap:8px;margin-top:21px}.px-primary,.px-secondary{height:48px;border:0;border-radius:14px;font-weight:950;letter-spacing:.05em}.px-primary{padding:0 22px;background:var(--px-lime);color:#0c1208!important;box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 9px 35px rgba(109,255,40,.20)}.px-primary span{margin-right:7px}.px-secondary{width:48px;background:rgba(12,11,18,.68);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(15px)}
.px-stage-art{position:absolute;right:-7%;bottom:-3%;width:52%;height:83%;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}.px-stage-art>span{font-size:clamp(112px,37vw,220px);line-height:.68;font-weight:1000;letter-spacing:-.14em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.13);text-shadow:0 0 80px hsla(var(--focus-b),100%,60%,.22);transform:skewX(-7deg);opacity:.86}.px-stage-art b{position:absolute;width:8px;height:8px;border:1px solid rgba(255,255,255,.15);background:hsla(var(--focus-a),100%,60%,.22)}.px-stage-art b:nth-child(2){left:27%;top:19%}.px-stage-art b:nth-child(3){right:22%;top:37%;width:4px;height:4px}.px-stage-art b:nth-child(4){left:43%;bottom:9%;width:5px;height:5px}.px-stage-position{position:absolute;right:18px;top:18px;display:flex;align-items:baseline;gap:3px;color:#8f879c;font-size:8px;letter-spacing:.09em}.px-stage-position strong{font-size:18px;color:#fff;letter-spacing:-.05em}.px-welcome .px-stage-copy{right:18px}.px-logo-art{right:-9%;opacity:.19;filter:saturate(1.6)}.px-logo-art img{width:100%;max-width:235px}

.px-shelf{height:calc(100dvh - min(49dvh,470px) - env(safe-area-inset-top,0px) - 152px);min-height:190px;padding:19px 0 0}.px-shelf-head{height:26px;padding:0 20px;display:flex;justify-content:space-between;align-items:center}.px-shelf-head>span{font-size:9px;font-weight:900;letter-spacing:.22em;color:#8e8799}.px-shelf-head button{border:0;background:transparent;font-size:8px;font-weight:900;letter-spacing:.15em;color:#a67aff}
.px-game-rail{display:flex;gap:11px;padding:7px 20px 22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;align-items:flex-end;height:calc(100% - 26px)}.px-game-rail::-webkit-scrollbar{display:none}.px-game-tile{position:relative;flex:0 0 102px;height:132px;border-radius:18px;border:1px solid rgba(255,255,255,.10);overflow:hidden;scroll-snap-align:center;background:linear-gradient(145deg,hsla(var(--ga),78%,40%,.65),rgba(9,9,14,.9) 55%,hsla(var(--gb),76%,44%,.36));box-shadow:0 14px 28px rgba(0,0,0,.25);transition:.22s cubic-bezier(.2,.8,.2,1);padding:0;text-align:left}.px-game-tile:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(3,3,6,.82))}.px-game-tile.is-selected{flex-basis:132px;height:165px;border-color:rgba(152,255,82,.75);box-shadow:0 0 0 2px rgba(152,255,82,.07),0 18px 40px rgba(0,0,0,.4),0 0 32px hsla(var(--ga),90%,56%,.18);transform:translateY(-2px)}.px-tile-grid{position:absolute;inset:0;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:12px 12px}.px-tile-mono{position:absolute;z-index:1;right:-8px;top:22%;font-size:54px;font-weight:1000;letter-spacing:-.12em;color:rgba(255,255,255,.78);text-shadow:0 10px 30px rgba(0,0,0,.4)}.px-game-tile.is-selected .px-tile-mono{font-size:66px}.px-tile-index{position:absolute;z-index:2;left:10px;top:9px;font-size:7px;font-weight:900;letter-spacing:.14em;color:rgba(255,255,255,.55)}.px-tile-label{position:absolute;z-index:2;left:10px;right:8px;bottom:10px;font-size:9px;line-height:1.1;font-weight:850;color:white;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.px-console-dock{position:absolute;z-index:45;left:14px;right:14px;bottom:calc(var(--px-safe-bottom) + 9px);height:72px;border:1px solid rgba(255,255,255,.11);background:rgba(10,9,16,.86);backdrop-filter:blur(28px) saturate(1.35);border-radius:22px;display:grid;grid-template-columns:1fr 1fr 74px 1fr 1fr;align-items:center;padding:0 6px;box-shadow:0 20px 55px rgba(0,0,0,.5)}.px-console-dock>button{height:58px;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#665f73}.px-console-dock>button.is-active{color:#d7c8ff}.px-nav-icon{font-size:21px;line-height:1;font-weight:700}.px-console-dock small{font-size:7px;letter-spacing:.12em;font-weight:900}.px-console-dock .px-home-core{position:relative;width:64px;height:64px;justify-self:center;border-radius:20px;background:linear-gradient(145deg,#802eff,#4c16b8);border:1px solid rgba(255,255,255,.27);box-shadow:0 0 0 5px rgba(115,42,255,.08),0 0 30px rgba(123,48,255,.42);transform:translateY(-10px)}.px-console-dock .px-home-core:active{transform:translateY(-10px) scale(.96)}.px-home-core img{width:41px;height:41px;border-radius:12px;image-rendering:auto}

.px-center,.px-library-panel{position:fixed;z-index:100;inset:0;pointer-events:none}.px-center.is-open,.px-library-panel.is-open{pointer-events:auto}.px-center-scrim,.px-library-scrim{position:absolute;inset:0;border:0;background:rgba(2,2,5,.2);backdrop-filter:blur(0);opacity:0;transition:.25s}.px-center.is-open .px-center-scrim,.px-library-panel.is-open .px-library-scrim{opacity:1;backdrop-filter:blur(16px)}
.px-center-panel{position:absolute;left:12px;right:12px;bottom:calc(var(--px-safe-bottom) + 7px);padding:10px 14px 17px;border:1px solid rgba(255,255,255,.13);background:linear-gradient(180deg,rgba(23,20,34,.97),rgba(8,8,13,.98));border-radius:29px;box-shadow:0 -25px 80px rgba(0,0,0,.55),0 0 80px rgba(101,34,255,.09);transform:translateY(calc(100% + 30px));transition:.32s cubic-bezier(.2,.85,.2,1)}.px-center.is-open .px-center-panel{transform:none}.px-center-grip{width:32px;height:4px;border-radius:9px;background:#4d4658;margin:0 auto 11px}.px-center-head{display:flex;justify-content:space-between;align-items:center;padding:1px 4px 12px}.px-center-head span,.px-library-top span{font-size:8px;color:#aa82ff;letter-spacing:.2em;font-weight:900}.px-center-head h2,.px-library-top h2{margin:4px 0 0;font-size:22px;letter-spacing:-.035em}.px-center-head>button,.px-library-top>button{width:38px;height:38px;border-radius:12px;border:1px solid var(--px-line);background:#15131e;font-size:21px}.px-center-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.px-center-grid>button{min-height:83px;border-radius:17px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035);text-align:left;padding:12px;display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;column-gap:7px}.px-center-grid>button>span{grid-row:1/3;width:30px;height:30px;border-radius:9px;background:rgba(151,78,255,.12);display:grid;place-items:center;color:#c6a8ff;font-weight:900;font-size:17px}.px-center-grid strong{font-size:11px;align-self:end}.px-center-grid small{font-size:8px;color:#777181;align-self:start;margin-top:3px}.px-center-grid .px-center-wide{grid-column:1/-1;min-height:72px;display:flex;align-items:center;gap:10px;background:linear-gradient(100deg,rgba(119,42,255,.2),rgba(152,255,82,.06));border-color:rgba(152,255,82,.2)}.px-center-wide>span{width:43px!important;height:43px!important;border-radius:13px!important;background:var(--px-lime)!important;color:#081006!important}.px-center-wide div{display:flex;flex-direction:column;gap:3px}.px-center-wide strong{font-size:13px}.px-center-wide small{font-size:9px}.px-center-foot{display:flex;align-items:center;gap:7px;margin-top:12px;padding:0 4px;color:#645e70;font-size:7px;letter-spacing:.1em}.px-center-foot i{width:5px;height:5px;background:var(--px-lime);border-radius:1px}.px-center-foot b{margin-left:auto;font-weight:700}

.px-library-sheet{position:absolute;inset:calc(env(safe-area-inset-top,0px) + 10px) 9px calc(var(--px-safe-bottom) + 8px);border:1px solid rgba(255,255,255,.12);background:rgba(7,7,11,.97);backdrop-filter:blur(25px);border-radius:28px;padding:18px;transform:translateY(18px) scale(.98);opacity:0;transition:.25s;display:flex;flex-direction:column}.px-library-panel.is-open .px-library-sheet{transform:none;opacity:1}.px-library-top{display:flex;justify-content:space-between;align-items:center}.px-library-list{flex:1;min-height:0;overflow:auto;margin:15px -4px 12px;padding:0 4px}.px-library-row{width:100%;height:74px;border:0;border-bottom:1px solid rgba(255,255,255,.07);background:transparent;display:flex;align-items:center;gap:12px;text-align:left;padding:7px 2px}.px-library-cover{width:54px;height:54px;border-radius:14px;flex:none;display:grid;place-items:center;font-size:21px;font-weight:1000;letter-spacing:-.08em;background:linear-gradient(145deg,hsla(var(--ga),80%,42%,.75),hsla(var(--gb),76%,30%,.4));border:1px solid rgba(255,255,255,.1)}.px-library-text{display:flex;flex-direction:column;min-width:0;gap:4px}.px-library-text strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.px-library-text small{font-size:8px;color:#777181}.px-library-arrow{margin-left:auto;font-size:24px;color:#5e5867}.px-library-install{height:52px;border:1px solid rgba(152,255,82,.24);border-radius:15px;background:rgba(152,255,82,.08);color:#b9ff8d!important;font-size:9px;font-weight:950;letter-spacing:.13em}.px-library-empty{height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#817b8c}.px-library-empty strong{color:#fff}
.px-toast{position:absolute;z-index:150;left:50%;bottom:calc(var(--px-safe-bottom) + 98px);transform:translate(-50%,15px);opacity:0;pointer-events:none;background:rgba(20,18,28,.96);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px 14px;font-size:9px;font-weight:800;white-space:nowrap;transition:.2s}.px-toast.show{opacity:1;transform:translate(-50%,0)}

/* Existing overlays remain functional, but give them PIXL OS chrome. */
html[data-pixl-os="2"] .modal{background:rgba(2,2,5,.52)!important;backdrop-filter:blur(18px)!important}
html[data-pixl-os="2"] .sheet{background:linear-gradient(180deg,#12101b,#08080d)!important;border-color:rgba(255,255,255,.12)!important;border-radius:28px 28px 0 0!important}
html[data-pixl-os="2"] .play-button{background:var(--px-lime)!important;color:#091006!important;box-shadow:none!important}
html[data-pixl-os="2"] .filter-pill.active{background:#7e39ff!important}
html[data-pixl-os="2"] body>.pixl-log-toggle,html[data-pixl-os="2"] [data-pixl-log-toggle]{z-index:350!important}

@media(max-height:720px){.px-stage{height:45dvh}.px-stage h1{font-size:31px}.px-stage-copy{bottom:20px}.px-shelf{height:calc(100dvh - 45dvh - env(safe-area-inset-top,0px) - 152px)}.px-game-tile{height:112px}.px-game-tile.is-selected{height:135px}}
@media(min-width:700px){.pixl-os{max-width:560px;margin:auto;border-left:1px solid rgba(255,255,255,.07);border-right:1px solid rgba(255,255,255,.07)}.px-center-panel{max-width:530px;left:50%;right:auto;width:calc(100% - 24px);transform:translate(-50%,calc(100% + 30px))}.px-center.is-open .px-center-panel{transform:translate(-50%,0)}.px-library-sheet{max-width:540px;left:50%;right:auto;width:calc(100% - 18px);transform:translate(-50%,18px) scale(.98)}.px-library-panel.is-open .px-library-sheet{transform:translate(-50%,0)}}
html[data-pixl-os="2"] #pixl-log-button{left:118px!important;top:max(16px,env(safe-area-inset-top))!important;height:30px!important;min-width:44px!important;padding:0 9px!important;border-radius:9px!important;background:rgba(14,12,21,.72)!important;border-color:rgba(255,255,255,.09)!important;font-size:8px!important;opacity:.72;box-shadow:none!important}
html[data-pixl-os="2"] #pixl-log-button.has-errors{opacity:1;border-color:rgba(255,64,92,.65)!important}


/* ============================================================
   PIXL OS 2.2 — MOBILE SCROLL / SPACING CORRECTION
   The console is a scrollable surface on phones; only overlays
   and the bottom system dock stay fixed.
   ============================================================ */

html[data-pixl-os="2"]{
  background:#050508!important;
  min-height:100%;
  height:auto!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  scroll-padding-bottom:calc(env(safe-area-inset-bottom,0px) + 104px);
  -webkit-overflow-scrolling:touch;
}
html[data-pixl-os="2"] body{
  background:#050508!important;
  min-height:100%;
  height:auto!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:contain!important;
  -webkit-overflow-scrolling:touch;
}
html[data-pixl-os="2"] #app{
  min-height:100dvh!important;
  height:auto!important;
  overflow:visible!important;
}
.pixl-os{
  position:relative;
  min-height:100dvh!important;
  height:auto!important;
  overflow:visible!important;
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 116px);
}

/* Keep the ambient console lighting behind the full page as it scrolls. */
.pixl-os .px-ambient{
  position:fixed;
  inset:0;
  pointer-events:none;
}

/* Stop trying to fit hero + shelf + dock into one 844px viewport. */
.pixl-os .px-stage{
  height:clamp(390px,56svh,520px)!important;
  min-height:390px;
  margin-top:6px;
}
.pixl-os .px-stage-copy{
  left:24px;
  right:31%;
  bottom:34px;
}
.pixl-os .px-stage h1{
  font-size:clamp(36px,10vw,55px);
}
.pixl-os .px-shelf{
  height:auto!important;
  min-height:0!important;
  padding:25px 0 28px!important;
}
.pixl-os .px-shelf-head{
  height:auto;
  min-height:28px;
}
.pixl-os .px-game-rail{
  height:auto!important;
  min-height:196px;
  align-items:flex-end;
  padding-top:12px;
  padding-bottom:10px;
  -webkit-overflow-scrolling:touch;
}
.pixl-os .px-game-tile{
  flex-basis:116px;
  height:150px;
}
.pixl-os .px-game-tile.is-selected{
  flex-basis:148px;
  height:184px;
}

/* The dock acts like console chrome, not a container clipping the page. */
.pixl-os .px-console-dock{
  position:fixed!important;
  left:max(14px, calc((100vw - 560px) / 2 + 14px));
  right:max(14px, calc((100vw - 560px) / 2 + 14px));
  bottom:calc(env(safe-area-inset-bottom,0px) + 9px);
}

/* Bottom sheets must remain usable on smaller iPhones. */
.pixl-os .px-center-panel{
  max-height:calc(100dvh - env(safe-area-inset-top,0px) - 22px);
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.pixl-os .px-library-sheet{
  max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 18px);
}
.pixl-os .px-library-list{
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

/* Preserve the existing install/settings/detail sheet's native scrolling. */
html[data-pixl-os="2"] body>.modal .sheet{
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch;
}

/* Short phones get a slightly smaller hero, but NEVER a locked viewport. */
@media(max-height:720px){
  .pixl-os .px-stage{
    height:410px!important;
    min-height:410px!important;
  }
  .pixl-os .px-shelf{
    height:auto!important;
  }
  .pixl-os .px-game-tile{
    height:142px;
  }
  .pixl-os .px-game-tile.is-selected{
    height:174px;
  }
}


/* ============================================================
   PIXL OS 2.3 — INVISIBLE SCROLLBARS
   Keep native touch scrolling / momentum, remove visible browser
   scrollbar chrome so the PWA reads like a console app.
   ============================================================ */

/* Firefox */
html[data-pixl-os="2"],
html[data-pixl-os="2"] body,
html[data-pixl-os="2"] #app,
html[data-pixl-os="2"] .pixl-os,
html[data-pixl-os="2"] .px-game-rail,
html[data-pixl-os="2"] .px-center-panel,
html[data-pixl-os="2"] .px-library-sheet,
html[data-pixl-os="2"] .px-library-list,
html[data-pixl-os="2"] body > .modal .sheet,
html[data-pixl-os="2"] body > .modal .sheet * {
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
}

/* Safari / Chromium / iOS WebKit */
html[data-pixl-os="2"]::-webkit-scrollbar,
html[data-pixl-os="2"] body::-webkit-scrollbar,
html[data-pixl-os="2"] #app::-webkit-scrollbar,
html[data-pixl-os="2"] .pixl-os::-webkit-scrollbar,
html[data-pixl-os="2"] .px-game-rail::-webkit-scrollbar,
html[data-pixl-os="2"] .px-center-panel::-webkit-scrollbar,
html[data-pixl-os="2"] .px-library-sheet::-webkit-scrollbar,
html[data-pixl-os="2"] .px-library-list::-webkit-scrollbar,
html[data-pixl-os="2"] body > .modal .sheet::-webkit-scrollbar,
html[data-pixl-os="2"] body > .modal .sheet *::-webkit-scrollbar {
  display:none!important;
  width:0!important;
  height:0!important;
  background:transparent!important;
}

/* Preserve smooth native touch scrolling after hiding the indicator. */
html[data-pixl-os="2"],
html[data-pixl-os="2"] body,
html[data-pixl-os="2"] .px-game-rail,
html[data-pixl-os="2"] .px-center-panel,
html[data-pixl-os="2"] .px-library-sheet,
html[data-pixl-os="2"] .px-library-list,
html[data-pixl-os="2"] body > .modal .sheet {
  -webkit-overflow-scrolling:touch;
}


/* ============================================================
   PIXL OS 3 — IDENTITY / MOTION / ICON / BOOT POLISH
   Presentation-only layer. Runtime/storage contracts untouched.
   ============================================================ */

:root{
  --px-violet:#9d55ff;
  --px-violet2:#6f28ff;
  --px-lime:#91ff4e;
  --px-cyan:#48eaff;
  --px-ease:cubic-bezier(.2,.82,.2,1);
}

/* ---------- Professional in-app boot sequence ---------- */
.pixl-boot{
  position:fixed;
  z-index:10000;
  inset:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:
    radial-gradient(70% 50% at 50% 46%,rgba(113,38,255,.11),transparent 64%),
    #030305;
  color:#fff;
  opacity:1;
  transition:opacity .36s ease,filter .36s ease;
  isolation:isolate;
}
.pixl-boot::before{
  content:"";
  position:absolute;
  inset:-20%;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(circle at center,#000 0 26%,transparent 68%);
  opacity:0;
  animation:px-boot-grid .8s .32s var(--px-ease) forwards;
}
.pixl-boot.is-exiting{opacity:0;filter:blur(5px);pointer-events:none}
.px-boot-lockup{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:15px;
  transform:translateY(5px);
}
.px-boot-mark{
  position:relative;
  width:78px;height:78px;
  border-radius:23px;
  opacity:0;
  transform:scale(.72);
  animation:px-boot-mark .52s .12s var(--px-ease) forwards;
}
.px-boot-mark::before{
  content:"";
  position:absolute;inset:-9px;
  border:1px solid rgba(153,77,255,.3);
  border-radius:29px;
  box-shadow:0 0 52px rgba(128,48,255,.3);
  opacity:0;
  animation:px-boot-ring .45s .42s ease forwards;
}
.px-boot-mark img{width:100%;height:100%;border-radius:23px;display:block}
.px-boot-word{
  font:950 18px/1 Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif;
  letter-spacing:.34em;
  margin-right:-.34em;
  opacity:0;
  transform:translateY(8px);
  animation:px-boot-word .38s .48s ease forwards;
}
.px-boot-tag{
  font:800 7px/1 Inter,-apple-system,BlinkMacSystemFont,sans-serif;
  letter-spacing:.26em;
  color:#756d83;
  opacity:0;
  animation:px-boot-word .3s .62s ease forwards;
}
.px-boot-pixels{position:absolute;inset:0;pointer-events:none}
.px-boot-pixels i{position:absolute;width:4px;height:4px;background:var(--px-violet);opacity:0;box-shadow:0 0 14px rgba(154,78,255,.7)}
.px-boot-pixels i:nth-child(1){left:20%;top:34%;animation:px-boot-pixel 1s .08s ease forwards}
.px-boot-pixels i:nth-child(2){left:73%;top:29%;width:3px;height:3px;animation:px-boot-pixel 1s .16s ease forwards}
.px-boot-pixels i:nth-child(3){left:66%;top:68%;background:var(--px-lime);animation:px-boot-pixel 1s .26s ease forwards}
.px-boot-pixels i:nth-child(4){left:31%;top:72%;width:2px;height:2px;animation:px-boot-pixel 1s .35s ease forwards}
@keyframes px-boot-mark{to{opacity:1;transform:scale(1)}}
@keyframes px-boot-ring{50%{opacity:1;transform:scale(1.04)}100%{opacity:.36;transform:scale(1)}}
@keyframes px-boot-word{to{opacity:1;transform:none}}
@keyframes px-boot-grid{to{opacity:1}}
@keyframes px-boot-pixel{0%{opacity:0;transform:translateY(15px) scale(.5)}40%{opacity:.75}100%{opacity:.12;transform:translateY(-10px) scale(1)}}

/* ---------- Ownable PIXL icon language ---------- */
.px-glyph{
  width:22px;height:22px;
  display:block;
  overflow:visible;
}
.px-glyph path,.px-glyph circle{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:square;
  stroke-linejoin:miter;
  vector-effect:non-scaling-stroke;
}
.px-glyph rect{fill:currentColor;stroke:none}
.px-icon .px-glyph{width:18px;height:18px}
.px-nav-icon{width:24px;height:24px;display:grid;place-items:center}
.px-nav-icon .px-glyph{width:21px;height:21px}
.px-library-arrow{width:24px;height:24px;display:grid;place-items:center}
.px-library-arrow .px-glyph{width:16px;height:16px}
.px-library-install>span{display:inline-grid;vertical-align:middle;margin-right:8px}
.px-library-install .px-glyph{width:15px;height:15px}
.px-action-icon{display:inline-grid!important;margin:0 8px 0 0!important;vertical-align:middle}
.px-action-icon .px-glyph{width:20px;height:20px}

/* ---------- Background world: more alive, never "particle effect" ---------- */
.px-v3 .px-ambient{
  background:
    radial-gradient(95% 60% at 10% -8%,hsla(var(--focus-a),88%,55%,.16),transparent 64%),
    radial-gradient(70% 45% at 98% 20%,hsla(var(--focus-b),90%,55%,.08),transparent 72%),
    linear-gradient(180deg,#06060a 0,#040407 68%,#020203 100%);
}
.px-v3 .px-ambient::after{
  opacity:.72;
  background-size:25px 25px;
  mask-image:linear-gradient(#000,rgba(0,0,0,.65) 55%,transparent 90%);
}
.px-ambient-orb{
  position:absolute;
  width:70vw;height:70vw;
  max-width:520px;max-height:520px;
  border-radius:50%;
  filter:blur(75px);
  opacity:.08;
  transition:background-color .55s ease,transform .8s var(--px-ease);
}
.px-orb-a{left:-32%;top:9%;background:hsla(var(--focus-a),100%,55%,1)}
.px-orb-b{right:-38%;top:38%;background:hsla(var(--focus-b),100%,56%,1)}
.px-world-pixels{position:absolute;inset:0;overflow:hidden}
.px-world-pixel{
  position:absolute;
  left:var(--px);top:var(--py);
  width:var(--ps);height:var(--ps);
  opacity:calc(.06 + var(--pdepth) * .14);
  transform:translate3d(0,0,0);
  animation:px-world-drift var(--pd) var(--pdelay) ease-in-out infinite;
  box-shadow:0 0 calc(10px * var(--pdepth)) currentColor;
}
.px-world-pixel.is-focus-a{color:hsla(var(--focus-a),100%,67%,1);background:currentColor}
.px-world-pixel.is-focus-b{color:hsla(var(--focus-b),100%,68%,1);background:currentColor}
.px-world-pixel.is-lime{color:var(--px-lime);background:currentColor}
@keyframes px-world-drift{
  0%,100%{transform:translate3d(0,-7px,0) scale(.82);opacity:calc(.04 + var(--pdepth) * .12)}
  45%{transform:translate3d(5px,12px,0) scale(1);opacity:calc(.10 + var(--pdepth) * .22)}
  70%{transform:translate3d(-3px,5px,0) scale(.9)}
}

/* ---------- Header: product, not debug HUD ---------- */
.px-v3 .px-system-bar{padding-left:20px;padding-right:20px}
.px-v3 .px-brand{gap:11px}
.px-v3 .px-brand img{width:36px;height:36px;border-radius:11px;box-shadow:0 0 28px rgba(125,46,255,.3)}
.px-v3 .px-brand span{font-size:18px;letter-spacing:.27em}
.px-v3 .px-brand b{border-radius:5px;padding:4px 5px;color:#b79de6;background:rgba(113,45,199,.07)}
.px-v3 .px-icon{
  display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(22,19,31,.82),rgba(10,9,15,.82));
  box-shadow:inset 0 1px rgba(255,255,255,.04);
}
.px-v3 .px-local{background:rgba(10,10,15,.58);backdrop-filter:blur(16px)}
/* Diagnostics remain available inside PIXL Center; remove floating web/debug chrome. */
html[data-pixl-ui="3"] #pixl-log-button{display:none!important}

/* ---------- Cinematic game stage ---------- */
.px-v3 .px-stage{
  border-color:rgba(255,255,255,.105);
  background:
    radial-gradient(65% 55% at 77% 58%,hsla(var(--focus-b),92%,55%,.18),transparent 70%),
    linear-gradient(136deg,hsla(var(--focus-a),76%,36%,.34),rgba(6,6,10,.9) 51%,hsla(var(--focus-b),76%,38%,.22));
  box-shadow:
    0 32px 88px rgba(0,0,0,.42),
    0 0 42px hsla(var(--focus-a),85%,50%,.06),
    inset 0 1px rgba(255,255,255,.055);
  transition:background .48s ease,box-shadow .48s ease,transform .34s var(--px-ease),filter .34s var(--px-ease),opacity .34s ease;
}
.px-v3 .px-stage::before{
  background:
    linear-gradient(115deg,rgba(255,255,255,.045),transparent 24%),
    radial-gradient(circle at 80% 62%,hsla(var(--focus-b),100%,65%,.17),transparent 31%);
}
.px-v3 .px-stage-grid{
  background-size:16px 16px;
  opacity:.78;
  mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.75) 58%,transparent 95%);
}
.px-v3 .px-kicker{color:#d5c1ff}
.px-v3 .px-kicker i{filter:drop-shadow(0 0 8px rgba(145,255,78,.8))}
.px-v3 .px-stage h1{
  letter-spacing:-.062em;
  text-shadow:0 8px 35px rgba(0,0,0,.48);
}
.px-v3 .px-primary{
  display:flex;align-items:center;justify-content:center;
  border-radius:15px;
  background:linear-gradient(180deg,#9cff57,#83f43c);
  box-shadow:inset 0 1px rgba(255,255,255,.48),0 12px 34px rgba(105,255,43,.2);
}
.px-v3 .px-primary b{font:950 15px/1 Inter,-apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:.05em}
.px-v3 .px-secondary{display:grid;place-items:center}
.px-v3 .px-secondary .px-glyph{width:20px;height:20px}
.px-v3 .px-stage-art>span{
  -webkit-text-stroke:1px rgba(255,255,255,.105);
  opacity:.72;
  text-shadow:0 0 90px hsla(var(--focus-b),100%,64%,.18);
}
.px-v3 .px-stage-position strong{font-size:19px}
.px-v3 .px-stage-position span{opacity:.8}
.px-v3 .px-stage::selection{background:transparent}

/* Game focus has a deliberate console transition instead of a DOM "jump". */
.px-v3.is-focus-enter .px-stage-copy{animation:px-focus-copy .44s var(--px-ease)}
.px-v3.is-focus-enter .px-stage-art{animation:px-focus-art .48s var(--px-ease)}
.px-v3.is-focus-enter .px-stage-grid{animation:px-focus-grid .6s ease}
.px-v3.is-focus-enter .px-stage::after{animation:px-focus-line .55s ease}
@keyframes px-focus-copy{0%{opacity:0;transform:translate3d(-12px,7px,0);filter:blur(5px)}100%{opacity:1;transform:none;filter:none}}
@keyframes px-focus-art{0%{opacity:.1;transform:translate3d(18px,0,0) scale(1.04)}100%{opacity:1;transform:none}}
@keyframes px-focus-grid{0%{opacity:.12;transform:translateX(9px)}100%{opacity:.78;transform:none}}
@keyframes px-focus-line{0%{transform:scaleX(0);transform-origin:left}100%{transform:scaleX(1);transform-origin:left}}

/* ---------- Shelf: selection feels physical ---------- */
.px-v3 .px-game-rail{gap:13px}
.px-v3 .px-game-tile{
  border-color:rgba(255,255,255,.085);
  transition:height .28s var(--px-ease),flex-basis .28s var(--px-ease),transform .28s var(--px-ease),border-color .28s ease,box-shadow .28s ease,filter .28s ease;
}
.px-v3 .px-game-tile:not(.is-selected){filter:saturate(.72) brightness(.72)}
.px-v3 .px-game-tile.is-selected{
  filter:none;
  transform:translateY(-5px);
  border-color:rgba(145,255,78,.76);
  box-shadow:0 0 0 1px rgba(145,255,78,.08),0 22px 46px rgba(0,0,0,.45),0 0 40px hsla(var(--ga),95%,55%,.17);
}
.px-v3 .px-game-tile.is-selected::before{
  content:"";
  position:absolute;z-index:3;left:10px;bottom:7px;width:5px;height:5px;
  background:var(--px-lime);
  box-shadow:0 0 12px rgba(145,255,78,.75);
}

/* ---------- Dock becomes a recognizable hardware-like control strip ---------- */
.px-v3 .px-console-dock{
  height:76px;
  border-radius:24px;
  border-color:rgba(255,255,255,.105);
  background:linear-gradient(180deg,rgba(14,12,22,.9),rgba(8,7,12,.92));
  box-shadow:0 20px 60px rgba(0,0,0,.56),inset 0 1px rgba(255,255,255,.045);
  transition:transform .34s var(--px-ease),opacity .3s ease,filter .3s ease;
}
.px-v3 .px-console-dock>button{color:#5c5669;transition:color .18s ease,transform .18s ease}
.px-v3 .px-console-dock>button.is-active{color:#d9c8ff}
.px-v3 .px-console-dock small{font-size:7px;letter-spacing:.14em}
.px-v3 .px-home-core{
  overflow:visible;
  width:66px;height:66px;
  border-radius:21px;
  background:linear-gradient(145deg,#8f39ff,#5218c1);
  box-shadow:0 0 0 5px rgba(119,44,255,.07),0 0 33px rgba(126,48,255,.38),inset 0 1px rgba(255,255,255,.22);
}
.px-v3 .px-home-core img{position:relative;z-index:2;width:42px;height:42px}
.px-core-ring{
  position:absolute;z-index:1;inset:-7px;
  border:1px solid rgba(155,85,255,.18);
  border-radius:26px;
  opacity:.65;
  transition:transform .34s var(--px-ease),opacity .34s ease,box-shadow .34s ease;
}

/* ---------- PIXL Center: signature interaction ---------- */
.px-v3 .px-center-scrim{
  background:rgba(2,2,5,.18);
  transition:opacity .3s ease,backdrop-filter .32s ease;
}
.px-v3 .px-center.is-open .px-center-scrim{backdrop-filter:blur(13px) saturate(.85)}
.px-v3 .px-center-panel{
  background:
    radial-gradient(95% 46% at 50% 0,rgba(126,49,255,.12),transparent 70%),
    linear-gradient(180deg,rgba(22,19,31,.985),rgba(7,7,11,.99));
  border-color:rgba(255,255,255,.12);
  box-shadow:0 -30px 100px rgba(0,0,0,.64),0 0 85px rgba(102,31,255,.11);
  transform:translateY(calc(100% + 35px)) scale(.985);
  transform-origin:50% 100%;
  transition:transform .38s var(--px-ease);
}
.px-v3 .px-center.is-open .px-center-panel{transform:none}
.px-v3 .px-center-panel::before{
  content:"";
  position:absolute;left:50%;top:-1px;width:46px;height:2px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--px-violet),transparent);
  box-shadow:0 0 18px rgba(154,79,255,.5);
}
.px-v3 .px-center-head>button,.px-v3 .px-library-top>button{display:grid;place-items:center}
.px-v3 .px-center-head>button .px-glyph,.px-v3 .px-library-top>button .px-glyph{width:18px;height:18px}
.px-v3 .px-center-grid>button{
  transition:background .2s ease,border-color .2s ease,transform .18s ease;
}
.px-v3 .px-center-grid>button:active{background:rgba(255,255,255,.065)}
.px-v3 .px-center-grid>button>span{color:#c8a8ff}
.px-v3 .px-center-grid>button>span .px-glyph{width:17px;height:17px}
.px-v3 .px-center-grid .px-center-wide>span .px-glyph{width:22px;height:22px}
.px-v3 .px-center-foot span{font-weight:850}
.px-v3 .px-center-foot b{letter-spacing:.13em}

/* When Center opens, the console itself recedes. */
.px-v3.is-center-active .px-system-bar,
.px-v3.is-center-active .px-stage,
.px-v3.is-center-active .px-shelf{
  filter:blur(5px) saturate(.72);
  transform:scale(.987);
  opacity:.62;
}
.px-v3.is-center-active .px-console-dock>button:not(.px-home-core){opacity:.38}
.px-v3.is-center-active .px-home-core{
  transform:translateY(-12px) scale(1.055);
  box-shadow:0 0 0 7px rgba(119,44,255,.08),0 0 46px rgba(133,55,255,.55),inset 0 1px rgba(255,255,255,.24);
}
.px-v3.is-center-active .px-core-ring{
  transform:scale(1.15);
  opacity:1;
  box-shadow:0 0 26px rgba(151,68,255,.3);
}

/* Library uses the same material language. */
.px-v3 .px-library-sheet{
  background:
    radial-gradient(80% 34% at 20% 0,rgba(124,46,255,.1),transparent 70%),
    rgba(7,7,11,.985);
}
.px-v3 .px-library-cover{box-shadow:inset 0 1px rgba(255,255,255,.08)}
.px-v3 .px-library-row:active{background:rgba(255,255,255,.025)}
.px-v3 .px-library-install{display:flex;align-items:center;justify-content:center}

/* ---------- Empty library: a deliberate first screen ---------- */
.px-empty-steps{display:flex;gap:7px;margin-top:16px}
.px-empty-steps span{
  height:25px;padding:0 8px;border-radius:7px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(8,8,12,.35);
  display:flex;align-items:center;gap:5px;
  color:#777080;font-size:6px;font-weight:900;letter-spacing:.12em;
}
.px-empty-steps b{color:#b496ef;font-size:6px}

/* ---------- Launch transition: chrome retracts around the game ---------- */
.px-v3.is-launching .px-stage{
  transform:scale(1.012);
  filter:saturate(1.15) brightness(1.08);
  box-shadow:0 28px 95px rgba(0,0,0,.45),0 0 70px hsla(var(--focus-a),100%,55%,.15);
}
.px-v3.is-launching .px-stage-copy{animation:px-launch-copy .42s var(--px-ease) forwards}
.px-v3.is-launching .px-stage-art{animation:px-launch-art .48s var(--px-ease) forwards}
.px-v3.is-launching .px-console-dock{transform:translateY(16px);opacity:.35}
@keyframes px-launch-copy{to{transform:translateY(7px);opacity:.3}}
@keyframes px-launch-art{to{transform:scale(1.06);opacity:.88}}

/* ---------- Existing sheets inherit the system material ---------- */
html[data-pixl-ui="3"] .modal{backdrop-filter:blur(20px) saturate(.82)!important}
html[data-pixl-ui="3"] .sheet{
  background:
    radial-gradient(90% 35% at 20% 0,rgba(123,43,255,.09),transparent 75%),
    linear-gradient(180deg,#12101b,#07070b)!important;
  box-shadow:0 -28px 90px rgba(0,0,0,.5)!important;
}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .pixl-boot,.pixl-boot *,.px-v3 *{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
}

/* ---------- Small phone precision ---------- */
@media(max-width:380px){
  .px-v3 .px-brand span{font-size:16px}
  .px-v3 .px-system-bar{padding-left:16px;padding-right:16px}
  .px-empty-steps{gap:4px}.px-empty-steps span{padding:0 6px}
}