/* game-app.css (7 Nov 2026, FX): ColorMix and the 100 hue test as web apps on a phone (game-app.js puts .ga-on on the game). The game
   takes the whole screen and scrolls inside it if it must; the page under it stops scrolling. Each game fits itself to the screen in
   its own stylesheet (.ga-on rules at the end of color-mix.css and page-hue-test.css). */
.ga-bar{display:none}
html.ga-app-on,html.ga-app-on body{overflow:hidden;overscroll-behavior:none}
.ga-on{position:fixed!important;inset:0;z-index:1000;display:flex;flex-direction:column;height:100vh;height:100dvh;margin:0!important;max-width:none!important;
  padding:env(safe-area-inset-top) 12px calc(env(safe-area-inset-bottom) + 10px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:manipulation}
.ga-on > .ga-bar{position:sticky;top:0;z-index:20;flex:none;display:flex;align-items:center;gap:10px;min-height:52px;margin:0 -12px 4px;padding:0 4px 0 14px;background:inherit}
.ga-bar img{width:auto;height:20px}
.ga-bar span{flex:1;font-size:15px;font-weight:600;color:#141416}
.ga-bar.is-dark span{color:#fff}
.ga-leave{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:none;color:#141416;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ga-bar.is-dark .ga-leave{color:#fff}
.ga-leave svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.ga-leave:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.ga-extra{min-height:36px;padding:0 12px;border:1px solid rgba(20,20,22,.25);border-radius:999px;background:none;font:inherit;font-size:13px;font-weight:600;color:#141416;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ga-bar.is-dark .ga-extra{border-color:rgba(255,255,255,.3);color:#fff}