/* GameForKidz shared player shell — one consistent frame every game runs inside.
   Fixes the ad-hoc per-game layouts that caused HUD/canvas overlaps: a fixed header
   bar + a flex "stage" that owns exactly the remaining space (min-height:0 is what
   makes flex stop overflowing). Games size their canvas to .gfk-stage, never to the
   raw viewport. Works identically on the web and in the bundled app.
   Fonts self-hosted per game; this file only lays out the frame + chrome. */

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;user-select:none;color:#fff;
  font-family:'Baloo 2','Nunito',system-ui,-apple-system,sans-serif;touch-action:none}

.gfk-player{position:fixed;inset:0;display:flex;flex-direction:column;overflow:hidden;
  background:var(--gfk-bg,#05060f)}

/* header / chrome bar */
.gfk-bar{flex:0 0 auto;display:flex;align-items:center;gap:8px;
  padding:calc(env(safe-area-inset-top,0px) + 8px) 12px 6px;min-height:46px}
.gfk-title{flex:1;text-align:center;font-weight:800;font-size:1.02rem;opacity:.96;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 0 14px var(--gfk-glow,rgba(75,229,255,.5))}
.gfk-actions{display:flex;gap:6px}
.gfk-btn{border:0;border-radius:12px;background:rgba(255,255,255,.13);color:#fff;font-weight:800;
  font-family:inherit;font-size:.92rem;padding:8px 12px;cursor:pointer;display:flex;align-items:center;gap:5px;line-height:1;transition:transform .06s,background .12s}
.gfk-btn:active{transform:scale(.93)}
.gfk-btn.icon{width:40px;justify-content:center;padding:8px 0;font-size:1.08rem}
.gfk-back-hidden{display:none}

/* the play area — the only thing games draw into. Never overflows the frame. */
.gfk-stage{flex:1 1 auto;min-height:0;position:relative;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  overflow:hidden;padding:0 10px calc(env(safe-area-inset-bottom,0px) + 8px)}

/* a small in-stage HUD row games can drop their score/lives into */
.gfk-hud{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:10px;
  width:100%;max-width:560px;padding:6px 4px 8px;font-weight:800}
.gfk-hud .g{display:flex;flex-direction:column;line-height:1}
.gfk-hud .g.r{align-items:flex-end}
.gfk-hud .k{font-size:.58rem;letter-spacing:.14em;opacity:.7;text-transform:uppercase}
.gfk-hud .v{font-size:1.35rem}

/* consistent overlays (start / pause / game-over) */
.gfk-overlay{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;
  justify-content:center;gap:16px;text-align:center;padding:22px;z-index:9;
  background:rgba(4,6,15,.86);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.gfk-overlay.show{display:flex}
.gfk-overlay h1{font-size:2.5rem;margin:0;color:var(--gfk-accent,#4be5ff);
  text-shadow:0 0 22px var(--gfk-glow,rgba(75,229,255,.7))}
.gfk-overlay p{margin:0;opacity:.85;font-size:1rem;max-width:22em}
.gfk-play{border:0;border-radius:16px;padding:14px 36px;font-weight:800;font-family:inherit;
  font-size:1.3rem;cursor:pointer;color:#05060f;background:var(--gfk-btn,linear-gradient(180deg,#7bf0ff,#2ec8ff));
  box-shadow:0 0 24px var(--gfk-glow,rgba(75,229,255,.55)),0 6px 0 var(--gfk-btn-sh,#1a92c0);transition:transform .08s}
.gfk-play:active{transform:translateY(3px)}
.gfk-hint{font-size:.85rem;opacity:.6;margin:0}

/* Control hints adapt to the device: on a touch screen (the app + mobile web) we
   never mention arrow keys / WASD; on a mouse/desktop we hide the touch wording.
   Games wrap the relevant text in <span class="touch-only"> / <span class="kbd-only">. */
@media (pointer:coarse){.kbd-only{display:none!important}}
@media (pointer:fine){.touch-only{display:none!important}}