:root{--pixl-shell-accent:#9B39FF;--pixl-shell-accent2:#4DFF8B}
.pixl-shell-studio,.pixl-shell-studio *{-webkit-tap-highlight-color:transparent}
.pixl-shell-studio button{touch-action:manipulation}
.pixl-shell-studio{position:fixed;inset:0;z-index:10000;display:flex;align-items:flex-end;opacity:0;transition:opacity .18s ease;font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif}
.pixl-shell-studio.is-open{opacity:1}
.ps-scrim{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(12px)}
.ps-sheet{position:relative;width:100%;max-height:88dvh;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:10px 20px calc(env(safe-area-inset-bottom) + 24px);border:1px solid rgba(255,255,255,.12);border-bottom:0;border-radius:32px 32px 0 0;background:linear-gradient(180deg,#17131f,#09090e);box-shadow:0 -30px 90px #000}
.ps-grip{width:44px;height:5px;border-radius:10px;background:#ffffff2d;margin:2px auto 18px}
.ps-sheet header{display:flex;justify-content:space-between;gap:16px}
.ps-sheet header span,.ps-section>span{font-size:10px;letter-spacing:.18em;font-weight:900;color:#bba4ff}
.ps-sheet h2{font-size:30px;margin:5px 0;letter-spacing:-.04em}
.ps-sheet header p{margin:0;color:#96909f}
.ps-sheet header button{width:48px;height:48px;border-radius:17px;border:1px solid #ffffff16;background:#ffffff0c;color:white;font-size:28px}
.ps-import{margin:22px 0;min-height:82px;border:1px dashed #9b39ff66;border-radius:22px;background:#9b39ff12;display:flex;align-items:center;gap:14px;padding:16px}
.ps-import input{display:none}
.ps-import>span{width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg,var(--pixl-shell-accent),#c026d3);display:grid;place-items:center;font-size:28px}
.ps-import div{display:grid;gap:4px}.ps-import small{color:#938d9e}
.ps-section{margin-top:8px}.ps-list{display:grid;gap:12px;margin-top:10px}
.ps-card{width:100%;border:1px solid #ffffff13;border-radius:22px;background:#ffffff08;color:white;padding:12px;display:grid;grid-template-columns:78px 1fr auto;align-items:center;gap:13px;text-align:left}
.ps-card.is-active{border-color:#9b39ff88;background:#9b39ff12}
.ps-preview{height:70px;border-radius:16px;position:relative;overflow:hidden;background:radial-gradient(circle at 75% 20%,var(--b),transparent 34%),linear-gradient(145deg,#151020,#050509);box-shadow:inset 0 0 0 1px #ffffff12}
.ps-preview i{position:absolute;left:9px;bottom:12px;width:24px;height:24px;border:6px solid var(--a);border-radius:5px}
.ps-preview b,.ps-preview em{position:absolute;right:13px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--a);font-style:normal;font-size:10px}
.ps-preview b{bottom:13px}.ps-preview em{bottom:34px;right:33px;background:var(--b);color:#050509}
.ps-copy{min-width:0;display:grid;gap:5px}.ps-copy strong{font-size:16px}
.ps-copy small{color:#918b9a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-state{font-size:9px;font-weight:900;letter-spacing:.1em;color:#cbbcff}
.ps-sheet footer{text-align:center;color:#6f6976;font-size:10px;margin-top:20px}


/* Active shell renderer: strictly scoped to the actual game player. */
.player.pixl-shell-active{
  --shell-accent:#9B39FF;
  --shell-accent2:#4DFF8B;
  position:fixed;
  overflow:hidden;
  background:
    radial-gradient(70% 45% at 18% 0%,color-mix(in srgb,var(--shell-accent2) 15%,transparent),transparent 72%),
    radial-gradient(65% 50% at 95% 22%,color-mix(in srgb,var(--shell-accent) 18%,transparent),transparent 72%),
    #030307!important;
}
.player.pixl-shell-active .pixl-shell-chrome{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  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:28px 28px;
  mask-image:linear-gradient(#000 0 62%,transparent 88%);
}
.player.pixl-shell-active .pixl-shell-chrome:before,
.player.pixl-shell-active .pixl-shell-chrome:after{
  content:"";position:absolute;width:48vw;height:48vw;border-radius:50%;filter:blur(60px);opacity:.20
}
.player.pixl-shell-active .pixl-shell-chrome:before{left:-18vw;top:12vh;background:var(--shell-accent2)}
.player.pixl-shell-active .pixl-shell-chrome:after{right:-20vw;top:25vh;background:var(--shell-accent)}
.player.pixl-shell-active .pixl-shell-chrome i{
  position:absolute;width:5px;height:5px;background:var(--shell-accent2);
  box-shadow:0 0 16px var(--shell-accent2);opacity:.45
}
.player.pixl-shell-active .pixl-shell-chrome i:nth-child(1){left:14%;top:24%}
.player.pixl-shell-active .pixl-shell-chrome i:nth-child(2){left:77%;top:34%;background:var(--shell-accent)}
.player.pixl-shell-active .pixl-shell-chrome i:nth-child(3){left:64%;top:57%}
.player.pixl-shell-active .pixl-shell-chrome i:nth-child(4){left:23%;top:64%;background:var(--shell-accent)}
.player.pixl-shell-active > :not(.pixl-shell-chrome){position:relative;z-index:1}
.player.pixl-shell-active .canvas-wrap{
  border:1px solid color-mix(in srgb,var(--shell-accent) 42%,rgba(255,255,255,.12))!important;
  background:#000!important;
  box-shadow:0 22px 70px rgba(0,0,0,.7),0 0 42px color-mix(in srgb,var(--shell-accent) 15%,transparent)!important;
}
.player.pixl-shell-active .controls{
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.55));
}
.player.pixl-shell-active .control{
  border-color:color-mix(in srgb,var(--shell-accent) 38%,rgba(255,255,255,.18))!important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--shell-accent) 15%,#17131f),#0a090e)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.09),0 0 24px color-mix(in srgb,var(--shell-accent) 10%,transparent)!important;
}
.player.pixl-shell-active .action-a{
  background:linear-gradient(145deg,var(--shell-accent),color-mix(in srgb,var(--shell-accent) 55%,#111))!important;
}
.player.pixl-shell-active .action-b{
  background:linear-gradient(145deg,var(--shell-accent2),color-mix(in srgb,var(--shell-accent2) 48%,#111))!important;
  color:#09090b!important;
}
.player.pixl-shell-active .pixl-shell-name{
  position:absolute;left:50%;bottom:-28px;transform:translateX(-50%);
  color:rgba(255,255,255,.38);font-size:9px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;
  white-space:nowrap;pointer-events:none;
}


/* PIXL native four-button standard — P / I / X / L.
   Positions are brand-stable; shells may restyle them but should preserve glyph identity. */
.player.pixl-shell-active .actions.pixl-face-buttons{
  position:absolute!important;
  right:18px!important;
  bottom:46px!important;
  width:176px!important;
  height:176px!important;
  display:block!important;
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.55));
}
.player.pixl-shell-active .pixl-face{
  position:absolute!important;
  width:68px!important;
  height:68px!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  font-size:24px!important;
  font-weight:950!important;
  line-height:1!important;
  color:#fff!important;
  padding:0!important;
  letter-spacing:-.04em!important;
}
.player.pixl-shell-active .pixl-face-x{
  left:54px!important;
  top:0!important;
  background:linear-gradient(145deg,var(--shell-accent),color-mix(in srgb,var(--shell-accent) 55%,#111))!important;
}
.player.pixl-shell-active .pixl-face-p{
  left:0!important;
  top:54px!important;
}
.player.pixl-shell-active .pixl-face-l{
  right:0!important;
  top:54px!important;
}
.player.pixl-shell-active .pixl-face-i{
  left:54px!important;
  bottom:0!important;
  background:linear-gradient(145deg,var(--shell-accent2),color-mix(in srgb,var(--shell-accent2) 48%,#111))!important;
  color:#07090a!important;
}


/* PIXL 4.1 — block-pixel native glyph renderer.
   No webfont/network dependency: every letter is a 5x7 pixel mask. */
.player.pixl-shell-active .pixl-face {
  font-size:0!important;
  color:transparent!important;
}
.player.pixl-shell-active .pixl-face::after {
  content:"";
  width:30px;
  height:42px;
  display:block;
  background:#fff;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
  image-rendering:pixelated;
  pointer-events:none;
}
.player.pixl-shell-active .pixl-face-p::after {
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2050%2070'%3E%3Crect%20x%3D'0'%20y%3D'0'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'10'%20y%3D'0'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'20'%20y%3D'0'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'30'%20y%3D'0'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'0'%20y%3D'10'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'40'%20y%3D'10'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'0'%20y%3D'20'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'40'%20y%3D'20'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'0'%20y%3D'30'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'10'%20y%3D'30'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'20'%20y%3D'30'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'30'%20y%3D'30'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'0'%20y%3D'40'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'0'%20y%3D'50'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'0'%20y%3D'60'%20width%3D'10'%20height%3D'10'%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2050%2070'%3E%3Crect%20x%3D'0'%20y%3D'0'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'10'%20y%3D'0'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'20'%20y%3D'0'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'30'%20y%3D'0'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'0'%20y%3D'10'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'40'%20y%3D'10'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'0'%20y%3D'20'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'40'%20y%3D'20'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'0'%20y%3D'30'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'10'%20y%3D'30'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'20'%20y%3D'30'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'30'%20y%3D'30'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'0'%20y%3D'40'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'0'%20y%3D'50'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'0'%20y%3D'60'%20width%3D'10'%20height%3D'10'%2F%3E%3C%2Fsvg%3E");
}
.player.pixl-shell-active .pixl-face-i::after {
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2050%2070'%3E%3Crect%20x%3D'0'%20y%3D'0'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'10'%20y%3D'0'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'20'%20y%3D'0'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'30'%20y%3D'0'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'40'%20y%3D'0'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'20'%20y%3D'10'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'20'%20y%3D'20'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'20'%20y%3D'30'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'20'%20y%3D'40'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'20'%20y%3D'50'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'0'%20y%3D'60'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'10'%20y%3D'60'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'20'%20y%3D'60'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'30'%20y%3D'60'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'40'%20y%3D'60'%20width%3D'10'%20height%3D'10'%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2050%2070'%3E%3Crect%20x%3D'0'%20y%3D'0'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'10'%20y%3D'0'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'20'%20y%3D'0'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'30'%20y%3D'0'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'40'%20y%3D'0'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'20'%20y%3D'10'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'20'%20y%3D'20'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'20'%20y%3D'30'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'20'%20y%3D'40'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'20'%20y%3D'50'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'0'%20y%3D'60'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'10'%20y%3D'60'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'20'%20y%3D'60'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'30'%20y%3D'60'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'40'%20y%3D'60'%20width%3D'10'%20height%3D'10'%2F%3E%3C%2Fsvg%3E");
  background:#07090a;
}
.player.pixl-shell-active .pixl-face-x::after {
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2050%2070'%3E%3Crect%20x%3D'0'%20y%3D'0'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'40'%20y%3D'0'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'0'%20y%3D'10'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'40'%20y%3D'10'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'10'%20y%3D'20'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'30'%20y%3D'20'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'20'%20y%3D'30'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'10'%20y%3D'40'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'30'%20y%3D'40'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'0'%20y%3D'50'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'40'%20y%3D'50'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'0'%20y%3D'60'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'40'%20y%3D'60'%20width%3D'10'%20height%3D'10'%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2050%2070'%3E%3Crect%20x%3D'0'%20y%3D'0'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'40'%20y%3D'0'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'0'%20y%3D'10'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'40'%20y%3D'10'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'10'%20y%3D'20'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'30'%20y%3D'20'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'20'%20y%3D'30'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'10'%20y%3D'40'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'30'%20y%3D'40'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'0'%20y%3D'50'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'40'%20y%3D'50'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'0'%20y%3D'60'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'40'%20y%3D'60'%20width%3D'10'%20height%3D'10'%2F%3E%3C%2Fsvg%3E");
}
.player.pixl-shell-active .pixl-face-l::after {
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2050%2070'%3E%3Crect%20x%3D'0'%20y%3D'0'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'0'%20y%3D'10'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'0'%20y%3D'20'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'0'%20y%3D'30'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'0'%20y%3D'40'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'0'%20y%3D'50'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'0'%20y%3D'60'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'10'%20y%3D'60'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'20'%20y%3D'60'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'30'%20y%3D'60'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'40'%20y%3D'60'%20width%3D'10'%20height%3D'10'%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2050%2070'%3E%3Crect%20x%3D'0'%20y%3D'0'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'0'%20y%3D'10'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'0'%20y%3D'20'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'0'%20y%3D'30'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'0'%20y%3D'40'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'0'%20y%3D'50'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'0'%20y%3D'60'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'10'%20y%3D'60'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'20'%20y%3D'60'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'30'%20y%3D'60'%20width%3D'10'%20height%3D'10'%2F%3E%3Crect%20x%3D'40'%20y%3D'60'%20width%3D'10'%20height%3D'10'%2F%3E%3C%2Fsvg%3E");
}


/* ==========================================================
   PIXL 4.2 — canonical P / I / X / L face cluster
   True controller diamond:
                     X
                  P     L
                     I
   ========================================================== */

.player.pixl-shell-active .actions.pixl-face-buttons{
  position:absolute!important;
  right:20px!important;
  bottom:24px!important;
  left:auto!important;
  top:auto!important;

  width:184px!important;
  height:184px!important;

  display:block!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.58))!important;
  pointer-events:none;
}

.player.pixl-shell-active .actions.pixl-face-buttons > .pixl-face{
  position:absolute!important;
  box-sizing:border-box!important;
  width:70px!important;
  height:70px!important;
  min-width:70px!important;
  min-height:70px!important;
  max-width:70px!important;
  max-height:70px!important;

  display:grid!important;
  place-items:center!important;

  margin:0!important;
  padding:0!important;
  inset:auto!important;
  transform:none!important;

  border-radius:50%!important;
  font-size:0!important;
  line-height:0!important;
  color:#fff!important;

  pointer-events:auto;
  touch-action:none;
}

/* exact diamond coordinates */
.player.pixl-shell-active .actions.pixl-face-buttons > .pixl-face-x{
  left:57px!important;
  top:0!important;
  right:auto!important;
  bottom:auto!important;
}
.player.pixl-shell-active .actions.pixl-face-buttons > .pixl-face-p{
  left:0!important;
  top:57px!important;
  right:auto!important;
  bottom:auto!important;
}
.player.pixl-shell-active .actions.pixl-face-buttons > .pixl-face-l{
  left:114px!important;
  top:57px!important;
  right:auto!important;
  bottom:auto!important;
}
.player.pixl-shell-active .actions.pixl-face-buttons > .pixl-face-i{
  left:57px!important;
  top:114px!important;
  right:auto!important;
  bottom:auto!important;
}

/* Neon Grid button materials */
.player.pixl-shell-active .actions.pixl-face-buttons > .pixl-face-x{
  background:linear-gradient(145deg,var(--shell-accent),color-mix(in srgb,var(--shell-accent) 55%,#111))!important;
}
.player.pixl-shell-active .actions.pixl-face-buttons > .pixl-face-i{
  background:linear-gradient(145deg,var(--shell-accent2),color-mix(in srgb,var(--shell-accent2) 48%,#111))!important;
  color:#07100a!important;
}
.player.pixl-shell-active .actions.pixl-face-buttons > .pixl-face-p,
.player.pixl-shell-active .actions.pixl-face-buttons > .pixl-face-l{
  background:linear-gradient(145deg,color-mix(in srgb,var(--shell-accent) 20%,#17131f),#0a090e)!important;
}

/* Real pixel glyphs: inline 5x7 block geometry, not a font.
   shape-rendering=crispEdges lives on the SVG itself. */
.player.pixl-shell-active .actions.pixl-face-buttons .pixl-glyph{
  display:block!important;
  width:29px!important;
  height:41px!important;
  overflow:visible!important;
  color:currentColor!important;
  fill:currentColor!important;
  image-rendering:pixelated!important;
  shape-rendering:crispEdges!important;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.20));
}

/* kill the old mask pseudo-glyph path entirely */
.player.pixl-shell-active .actions.pixl-face-buttons > .pixl-face::before,
.player.pixl-shell-active .actions.pixl-face-buttons > .pixl-face::after{
  content:none!important;
  display:none!important;
}


/* ==========================================================
   PIXL 4.3 — production control proportions
   Face buttons now match the visual weight of the D-pad.
   ========================================================== */

.player.pixl-shell-active .actions.pixl-face-buttons{
  right:24px!important;
  bottom:34px!important;
  width:150px!important;
  height:150px!important;
}

/* 58px buttons: large enough for touch, no longer oversized beside the D-pad. */
.player.pixl-shell-active .actions.pixl-face-buttons > .pixl-face{
  width:58px!important;
  height:58px!important;
  min-width:58px!important;
  min-height:58px!important;
  max-width:58px!important;
  max-height:58px!important;
  border-width:1px!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 7px 18px rgba(0,0,0,.30)!important;
}

/* exact compact diamond; 46px center-axis offset */
.player.pixl-shell-active .actions.pixl-face-buttons > .pixl-face-x{
  left:46px!important;
  top:0!important;
}
.player.pixl-shell-active .actions.pixl-face-buttons > .pixl-face-p{
  left:0!important;
  top:46px!important;
}
.player.pixl-shell-active .actions.pixl-face-buttons > .pixl-face-l{
  left:92px!important;
  top:46px!important;
}
.player.pixl-shell-active .actions.pixl-face-buttons > .pixl-face-i{
  left:46px!important;
  top:92px!important;
}

/* Keep every PIXL glyph the same optical scale.
   20x28 means the 5x7 matrix lands on exact 4px cells. */
.player.pixl-shell-active .actions.pixl-face-buttons .pixl-glyph{
  width:20px!important;
  height:28px!important;
  filter:none!important;
}

/* Slight optical correction for the very open L and I forms. */
.player.pixl-shell-active .actions.pixl-face-buttons .pixl-face-l .pixl-glyph{
  width:18px!important;
  height:28px!important;
}
.player.pixl-shell-active .actions.pixl-face-buttons .pixl-face-i .pixl-glyph{
  width:18px!important;
  height:28px!important;
}


/* ==========================================================
   PIXL 4.4 — ergonomic touchscreen control geometry
   Both thumb clusters are now mathematically mirrored:
   - identical 150x150 footprints
   - identical vertical centerline
   - identical 15px edge inset
   - 52px D-pad + 52px face buttons
   - face-button centers form a true diamond with generous gaps
   ========================================================== */

.player.pixl-shell-active .controls{
  height:190px!important;
  position:relative!important;
}

/* LEFT THUMB — exact 150px cluster */
.player.pixl-shell-active .dpad{
  left:15px!important;
  right:auto!important;
  bottom:10px!important;
  top:auto!important;
  width:150px!important;
  height:150px!important;
  transform:none!important;
}

.player.pixl-shell-active .dpad > .up,
.player.pixl-shell-active .dpad > .down,
.player.pixl-shell-active .dpad > .left,
.player.pixl-shell-active .dpad > .right{
  width:52px!important;
  height:52px!important;
  min-width:52px!important;
  min-height:52px!important;
  max-width:52px!important;
  max-height:52px!important;
  border-radius:16px!important;
}

.player.pixl-shell-active .dpad > .up{
  left:49px!important;
  top:0!important;
  right:auto!important;
  bottom:auto!important;
}
.player.pixl-shell-active .dpad > .down{
  left:49px!important;
  top:auto!important;
  right:auto!important;
  bottom:0!important;
}
.player.pixl-shell-active .dpad > .left{
  left:0!important;
  top:49px!important;
  right:auto!important;
  bottom:auto!important;
}
.player.pixl-shell-active .dpad > .right{
  left:auto!important;
  top:49px!important;
  right:0!important;
  bottom:auto!important;
}
.player.pixl-shell-active .dpad > .dpad-center{
  left:57px!important;
  top:57px!important;
  width:36px!important;
  height:36px!important;
  border-radius:12px!important;
}

/* RIGHT THUMB — exact mirror footprint of D-pad */
.player.pixl-shell-active .actions.pixl-face-buttons{
  left:auto!important;
  right:15px!important;
  top:auto!important;
  bottom:10px!important;

  width:150px!important;
  height:150px!important;

  margin:0!important;
  padding:0!important;
  transform:none!important;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.42))!important;
}

/*
  52px buttons in a true diamond.

            X
         P     L
            I

  Cluster center = (75,75)
  Button centers:
    X = (75,26)
    P = (26,75)
    L = (124,75)
    I = (75,124)

  Adjacent-center distance ≈ 69.3px, leaving ~17px of air
  between 52px circles — enough to avoid accidental adjacent taps.
*/
.player.pixl-shell-active .actions.pixl-face-buttons > .pixl-face{
  width:52px!important;
  height:52px!important;
  min-width:52px!important;
  min-height:52px!important;
  max-width:52px!important;
  max-height:52px!important;
  border-radius:50%!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  touch-action:none!important;
  -webkit-tap-highlight-color:transparent!important;
  user-select:none!important;
  -webkit-user-select:none!important;
}

.player.pixl-shell-active .actions.pixl-face-buttons > .pixl-face-x{
  left:49px!important;
  top:0!important;
  right:auto!important;
  bottom:auto!important;
}
.player.pixl-shell-active .actions.pixl-face-buttons > .pixl-face-p{
  left:0!important;
  top:49px!important;
  right:auto!important;
  bottom:auto!important;
}
.player.pixl-shell-active .actions.pixl-face-buttons > .pixl-face-l{
  left:98px!important;
  top:49px!important;
  right:auto!important;
  bottom:auto!important;
}
.player.pixl-shell-active .actions.pixl-face-buttons > .pixl-face-i{
  left:49px!important;
  top:98px!important;
  right:auto!important;
  bottom:auto!important;
}

/* Exact 5x7 PIXL glyph scale: each logical pixel is 3x3 CSS px.
   This keeps the letters crisp, compact, and optically centered. */
.player.pixl-shell-active .actions.pixl-face-buttons .pixl-glyph,
.player.pixl-shell-active .actions.pixl-face-buttons .pixl-face-l .pixl-glyph,
.player.pixl-shell-active .actions.pixl-face-buttons .pixl-face-i .pixl-glyph{
  width:15px!important;
  height:21px!important;
  display:block!important;
  transform:none!important;
  filter:none!important;
  shape-rendering:crispEdges!important;
  image-rendering:pixelated!important;
}

/* Press feedback stays inside the control instead of shifting its position. */
.player.pixl-shell-active .actions.pixl-face-buttons > .pixl-face:active,
.player.pixl-shell-active .dpad > .control:active{
  transform:scale(.92)!important;
  transform-origin:center!important;
}

/* Very narrow phones: preserve mirrored geometry, only tighten edge inset. */
@media (max-width:360px){
  .player.pixl-shell-active .dpad{left:9px!important;}
  .player.pixl-shell-active .actions.pixl-face-buttons{right:9px!important;}
}

/* PIXL 5.5 iOS runtime stability */
.player.pixl-shell-active .canvas-wrap{flex:0 1 auto!important;width:100%!important;max-height:calc(100dvh - 330px)!important;padding:0!important;overflow:hidden!important;}
.player.pixl-shell-active .game-canvas{width:100%!important;height:auto!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;pointer-events:none!important;}


/* PIXL alpha.47 — universal Start / Select controls */
.player.pixl-shell-active .pixl-system-buttons{
  position:absolute!important;
  left:50%!important;
  bottom:24px!important;
  transform:translateX(-50%)!important;
  width:92px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:9px!important;
  z-index:3!important;
}
.player.pixl-shell-active .pixl-system-button{
  position:relative!important;
  inset:auto!important;
  width:74px!important;
  min-width:74px!important;
  height:28px!important;
  min-height:28px!important;
  border-radius:999px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  touch-action:none!important;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(9,9,14,.96))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.10),0 8px 20px rgba(0,0,0,.34)!important;
}
.player.pixl-shell-active .pixl-system-button span{
  font-size:8px!important;
  line-height:1!important;
  letter-spacing:.16em!important;
  font-weight:900!important;
  color:rgba(255,255,255,.74)!important;
  pointer-events:none!important;
}
.player.pixl-shell-active .pixl-system-button:active{transform:scale(.94)!important;}
.player.pixl-shell-active .pixl-shell-name{bottom:-31px!important;}
@media (max-width:360px){
  .player.pixl-shell-active .pixl-system-buttons{width:76px!important;}
  .player.pixl-shell-active .pixl-system-button{width:62px!important;min-width:62px!important;}
}

/* alpha.47 default-shell fallback for START/SELECT */
.player .controls{position:relative;}
.player .pixl-system-buttons{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;align-items:center;z-index:4;}
.player .pixl-system-button{width:70px;height:28px;min-height:28px;border-radius:999px;font-size:8px;font-weight:900;letter-spacing:.12em;touch-action:none;}


/* PIXL alpha.49 — true handheld Start / Select cluster */
.player.pixl-shell-active .pixl-system-buttons,
.player .pixl-system-buttons{
  left:50%!important; right:auto!important; bottom:46px!important;
  transform:translateX(-50%)!important; width:128px!important;
  display:flex!important; flex-direction:row!important; justify-content:center!important;
  align-items:center!important; gap:10px!important; z-index:5!important;
}
.player.pixl-shell-active .pixl-system-button,
.player .pixl-system-button{
  position:relative!important; inset:auto!important; width:56px!important; min-width:56px!important;
  height:24px!important; min-height:24px!important; border-radius:999px!important;
  transform:rotate(-7deg)!important; padding:0!important;
}
.player.pixl-shell-active .pixl-start,.player .pixl-start{transform:rotate(-7deg)!important}
.player.pixl-shell-active .pixl-select,.player .pixl-select{transform:rotate(-7deg)!important}
.player.pixl-shell-active .pixl-system-button:active,.player .pixl-system-button:active{transform:rotate(-7deg) scale(.94)!important}
.player.pixl-shell-active .pixl-system-button span,.player .pixl-system-button span{font-size:7px!important;letter-spacing:.14em!important}
@media(max-width:360px){.player.pixl-shell-active .pixl-system-buttons,.player .pixl-system-buttons{width:118px!important;gap:8px!important}.player.pixl-shell-active .pixl-system-button,.player .pixl-system-button{width:53px!important;min-width:53px!important}}

/* ======================================================================
   PIXL alpha.51 — GAME BOY-STYLE START / SELECT GEOMETRY
   System buttons live in their own centered row BELOW the thumb clusters.
   This layer also fixes the inherited .control{position:absolute} collision.
   ====================================================================== */
.player .controls,
.player.pixl-shell-active .controls{
  height:208px!important;
  min-height:208px!important;
  position:relative!important;
  flex:none!important;
}
.player .dpad,
.player.pixl-shell-active .dpad{
  top:0!important;bottom:auto!important;
}
.player .actions.pixl-face-buttons,
.player.pixl-shell-active .actions.pixl-face-buttons{
  top:0!important;bottom:auto!important;
}
.player .pixl-system-buttons,
.player.pixl-shell-active .pixl-system-buttons{
  position:absolute!important;
  left:50%!important;right:auto!important;
  top:auto!important;bottom:5px!important;
  transform:translateX(-50%)!important;
  width:136px!important;height:27px!important;
  display:flex!important;flex-direction:row!important;
  justify-content:center!important;align-items:center!important;
  gap:14px!important;z-index:8!important;
  filter:drop-shadow(0 7px 11px rgba(0,0,0,.28))!important;
}
.player .pixl-system-button,
.player.pixl-shell-active .pixl-system-button{
  position:relative!important;
  left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;inset:auto!important;
  flex:0 0 56px!important;
  width:56px!important;min-width:56px!important;max-width:56px!important;
  height:21px!important;min-height:21px!important;max-height:21px!important;
  margin:0!important;padding:0!important;border-radius:999px!important;
  transform:rotate(-7deg)!important;
  background:linear-gradient(180deg,#273743,#14232d)!important;
  border:1px solid rgba(156,205,214,.46)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.12),inset 0 -2px rgba(0,0,0,.22),0 3px 0 rgba(0,0,0,.28)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
.player .pixl-system-button span,
.player.pixl-shell-active .pixl-system-button span{
  color:#d9edf1!important;font:900 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace!important;
  letter-spacing:.12em!important;text-shadow:0 1px rgba(0,0,0,.45)!important;
}
.player .pixl-system-button:active,
.player.pixl-shell-active .pixl-system-button:active{transform:rotate(-7deg) translateY(2px) scale(.97)!important;box-shadow:inset 0 1px rgba(255,255,255,.08),0 1px 0 rgba(0,0,0,.28)!important}
.player.pixl-shell-active .pixl-shell-name{bottom:-20px!important;opacity:.62!important}

/* Keep the runtime canvas proportional after giving controls a dedicated lower row. */
.player .canvas-wrap,
.player.pixl-shell-active .canvas-wrap{max-height:calc(100dvh - 348px)!important}
@media (max-height:760px){
  .player .controls,.player.pixl-shell-active .controls{height:196px!important;min-height:196px!important}
  .player .dpad,.player.pixl-shell-active .dpad{transform:scale(.94)!important;transform-origin:left top!important}
  .player .actions.pixl-face-buttons,.player.pixl-shell-active .actions.pixl-face-buttons{transform:scale(.94)!important;transform-origin:right top!important}
  .player .pixl-system-buttons,.player.pixl-shell-active .pixl-system-buttons{bottom:3px!important}
  .player .canvas-wrap,.player.pixl-shell-active .canvas-wrap{max-height:calc(100dvh - 332px)!important}
}


/* ============================================================
   PIXL alpha.52 — refined handheld control spacing
   ============================================================ */
.player .controls,.player.pixl-shell-active .controls{height:212px!important;min-height:212px!important}
.player .pixl-system-buttons,.player.pixl-shell-active .pixl-system-buttons{bottom:8px!important;width:142px!important;gap:16px!important}
.player .pixl-system-button,.player.pixl-shell-active .pixl-system-button{flex:0 0 58px!important;width:58px!important;min-width:58px!important;max-width:58px!important;height:22px!important;min-height:22px!important;max-height:22px!important;transform:rotate(-8deg)!important;border:1px solid rgba(126,190,203,.46)!important;background:linear-gradient(180deg,#26414d,#142631)!important;box-shadow:inset 0 1px rgba(255,255,255,.13),inset 0 -2px rgba(0,0,0,.22),0 4px 0 rgba(0,0,0,.26)!important}
.player .pixl-start,.player .pixl-select,.player.pixl-shell-active .pixl-start,.player.pixl-shell-active .pixl-select{transform:rotate(-8deg)!important}
.player .pixl-system-button span,.player.pixl-shell-active .pixl-system-button span{font-size:7px!important;letter-spacing:.16em!important;color:#e6f4f8!important}
.player .pixl-system-button:active,.player.pixl-shell-active .pixl-system-button:active{transform:rotate(-8deg) translateY(2px) scale(.97)!important}
.player .canvas-wrap,.player.pixl-shell-active .canvas-wrap{max-height:calc(100dvh - 352px)!important}
@media (max-height:760px){.player .controls,.player.pixl-shell-active .controls{height:198px!important;min-height:198px!important}.player .pixl-system-buttons,.player.pixl-shell-active .pixl-system-buttons{bottom:4px!important}.player .canvas-wrap,.player.pixl-shell-active .canvas-wrap{max-height:calc(100dvh - 336px)!important}}


/* PIXL alpha.57 — player breathing room without changing controller geometry */
.player .controls,
.player.pixl-shell-active .controls{
  margin-top:18px!important;
}
.player .canvas-wrap,
.player.pixl-shell-active .canvas-wrap{
  padding-bottom:4px!important;
  max-height:calc(100dvh - 374px)!important;
}
@media (max-height:760px){
  .player .controls,.player.pixl-shell-active .controls{margin-top:12px!important}
  .player .canvas-wrap,.player.pixl-shell-active .canvas-wrap{max-height:calc(100dvh - 352px)!important}
}