/* PIXL alpha.57 — Performance Mode UI + compositor containment.
   Performance Mode never changes game FPS, audio quality, input mapping, OPFS,
   or the native presentation correction. It removes diagnostics/compositor work. */
.performance-setting-row{position:relative}
.performance-setting-row>div{min-width:0;flex:1}
.performance-setting-row p{max-width:31rem}
.pixl-performance-toggle{position:relative;flex:0 0 auto;width:58px;height:32px;margin-left:auto;padding:0;border:1px solid color-mix(in srgb,var(--pixl-theme,#9B39FF) 34%,rgba(255,255,255,.18));border-radius:18px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.pixl-performance-toggle::before{content:"";position:absolute;width:24px;height:24px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.28);transform:translateX(0);transition:transform .14s ease}
.pixl-performance-toggle[aria-pressed="true"]{background:linear-gradient(135deg,var(--pixl-theme,#9B39FF),var(--pixl-theme-2,#C47AFF));border-color:color-mix(in srgb,var(--pixl-theme,#9B39FF) 62%,white 18%)}
.pixl-performance-toggle[aria-pressed="true"]::before{transform:translateX(27px)}
.pixl-performance-toggle .pixl-performance-state{position:absolute;inset:0;display:grid;place-items:center;color:transparent;font-size:0}
.performance-mode-note{display:block;margin-top:5px;font-size:11px;line-height:1.35;opacity:.72}

/* The launcher UI remains mounted beneath the player. On iOS that means its
   animations can continue compositing even though the user cannot see them.
   Hide it from paint/compositing while a game is active in Performance Mode. */
html[data-pixl-performance="on"][data-pixl-game-active="true"] #app{visibility:hidden!important;pointer-events:none!important}
html[data-pixl-performance="on"][data-pixl-game-active="true"] #app *,
html[data-pixl-performance="on"][data-pixl-game-active="true"] #app *::before,
html[data-pixl-performance="on"][data-pixl-game-active="true"] #app *::after{animation-play-state:paused!important;transition:none!important}

/* Keep the player itself visually identical while avoiding decorative effects
   that create extra compositor layers on mobile Safari. */
html[data-pixl-performance="on"][data-pixl-game-active="true"] .player{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html[data-pixl-performance="on"][data-pixl-game-active="true"] .player::before,
html[data-pixl-performance="on"][data-pixl-game-active="true"] .player::after{filter:none!important}

html[data-pixl-theme="sinnoh"] .pixl-performance-toggle{border-radius:5px;border:1px solid #70a6b9;background:#e7f1f8;box-shadow:inset 0 -2px rgba(66,119,143,.08)}
html[data-pixl-theme="sinnoh"] .pixl-performance-toggle::before{border-radius:3px;background:#f9fcff;border:1px solid #79a7b6;box-shadow:0 2px 0 rgba(67,116,138,.16)}
html[data-pixl-theme="sinnoh"] .pixl-performance-toggle[aria-pressed="true"]{background:#69e4b2;border-color:#348d82}

@media (prefers-reduced-motion:reduce){.pixl-performance-toggle::before{transition:none!important}}