/* Shared top bar for every game + home + about page.
   Home + Avatar top-left, Help / Pause / Music / Sound top-right.
   Stays out of the way of canvases via pointer-events on the wrapper. */

#kg-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Above corner rotators (9800), title-screen overlays (9700),
     and any in-game UI. Below modals (10000+) and the splash
     (99999) so those still win when open. Keeps Home / Music /
     SFX / Help / Pause reachable on every screen, including
     game title pages whose own art used to bury the controls. */
  z-index: 9900;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 12px;
  pointer-events: none;
  font-family: "Fredoka", "Comic Sans MS", "Chalkboard SE", system-ui, sans-serif;
}
#kg-topbar > * { pointer-events: auto; }

#kg-topbar .kg-left,
#kg-topbar .kg-right {
  display: flex;
  gap: 8px;
  align-items: center;
}

#kg-topbar .kg-btn,
#kg-topbar .kg-home {
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  padding: 8px 12px;
  border-radius: 999px;
  border: 3px solid #ff6bb5;
  background: #fff;
  color: #2b1140;
  box-shadow: 0 3px 0 #ff6bb5, 0 4px 10px rgba(0,0,0,0.15);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 80ms ease;
}
#kg-topbar .kg-btn:active,
#kg-topbar .kg-home:active {
  translate: 0 2px;
  box-shadow: 0 1px 0 #ff6bb5;
}
#kg-topbar .kg-btn.muted {
  background: #f3eaf7;
  opacity: 0.7;
}

#kg-topbar .kg-help { border-color: #6bb5ff; box-shadow: 0 3px 0 #6bb5ff, 0 4px 10px rgba(0,0,0,0.15); }
#kg-topbar .kg-help:active { box-shadow: 0 1px 0 #6bb5ff; }
#kg-topbar .kg-pause { border-color: #b56bff; box-shadow: 0 3px 0 #b56bff, 0 4px 10px rgba(0,0,0,0.15); }
#kg-topbar .kg-pause:active { box-shadow: 0 1px 0 #b56bff; }

#kg-topbar .kg-home .kg-label {
  display: inline;
}

/* Avatar chip next to the Home button */
#kg-topbar .kg-avatar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  border: 3px solid #ffb56b;
  background: #fff;
  color: #2b1140;
  box-shadow: 0 3px 0 #ffb56b, 0 4px 10px rgba(0,0,0,0.15);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}
#kg-topbar .kg-avatar-ring {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffe6a8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border: 2px solid #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  overflow: hidden;
}
#kg-topbar .kg-avatar-ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#kg-topbar .kg-avatar-name {
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Slightly tighter on phones — emoji only for the right-side toggles. */
@media (max-width: 520px) {
  #kg-topbar { padding: 8px 8px; }
  #kg-topbar .kg-btn { padding: 7px 10px; font-size: 15px; }
  #kg-topbar .kg-home { padding: 7px 10px; font-size: 15px; }
  #kg-topbar .kg-home .kg-label { display: none; }
  #kg-topbar .kg-avatar-name { display: none; }
  #kg-topbar .kg-avatar { padding: 3px; }
}

/* Real-phone widths (≤420px) — the four right-side buttons (Help,
   Pause, Music, SFX) were rendering visually clumped together. Kid
   reported "two overlapping sets". Tighten each button + widen the gap
   so each icon sits in its own circle with clear breathing room. */
@media (max-width: 420px) {
  #kg-topbar .kg-left,
  #kg-topbar .kg-right { gap: 6px; }
  #kg-topbar .kg-btn,
  #kg-topbar .kg-home {
    padding: 5px 8px;
    font-size: 14px;
    border-width: 2px;
    box-shadow: 0 2px 0 #ff6bb5, 0 3px 6px rgba(0,0,0,0.12);
  }
  #kg-topbar .kg-help { box-shadow: 0 2px 0 #6bb5ff, 0 3px 6px rgba(0,0,0,0.12); }
  #kg-topbar .kg-pause { box-shadow: 0 2px 0 #b56bff, 0 3px 6px rgba(0,0,0,0.12); }
  #kg-topbar .kg-avatar {
    padding: 2px;
    border-width: 2px;
    box-shadow: 0 2px 0 #ffb56b, 0 3px 6px rgba(0,0,0,0.12);
  }
  #kg-topbar .kg-avatar-ring { width: 24px; height: 24px; font-size: 16px; }
}

/* Hide every game's legacy top-bar button once the shared bar is
   mounted. The legacy buttons still exist in the DOM so the shared
   bar can .click() them and let the game's existing audio code run
   unchanged — they're just no longer visible. */
/* Game Start / Play buttons sit above the corner rotators so they're
   always visible AND tappable, even when the squad image's bounding
   box happens to overlap. Plus the rotators themselves don't block
   pointer events — clicks pass straight through to whatever is
   underneath. */
body:has(#kg-topbar) #title-screen,
body:has(#kg-topbar) #intro,
body:has(#kg-topbar) .mr-title-screen,
body:has(#kg-topbar) .title-screen,
body:has(#kg-topbar) .intro-screen {
  /* Title overlays must sit ABOVE the corner rotators (z 9500) so
     their own Start/Play buttons are visible AND so clicks on the
     overlay don't fall through to in-game UI underneath. Below the
     pause/help modals (z 10000+) so those still win when open. */
  z-index: 9700 !important;
}
#kg-winner-corner, #kg-squad-corner { pointer-events: none; }

/* === Per-game top-chrome push-down ============================
   The shared #kg-topbar is ~56px tall. Per-game elements pinned at
   top:0 (fixed headers) or top:10-12 (centered fixed/absolute HUDs)
   end up hidden under it. Each rule scopes via body:has(#kg-topbar)
   so the shifts only kick in when the shared bar is mounted. */

/* Centered fixed/absolute #hud at top:10-12 (kitten-catch,
   bubble-pop, bunny-trails) → slide below the topbar. */
body:has(#kg-topbar) #hud {
  top: 64px;
}

/* Fixed <header> pinned at top:0 (coin-hop-party, dog-park) →
   keep fixed, just shift down. */
body:has(#kg-topbar) > header,
body:has(#kg-topbar) body > header {
  top: 56px;
}

/* Flow-positioned <header> (memory-match, critter-tap, sticker-scene,
   sticker-wall, gem-match, tower-defense) → bump padding-top so the
   game title text isn't covered by the topbar. */
body:has(#kg-topbar) header {
  padding-top: 64px !important;
}

/* Per-game pinned UI that the shared topbar hides:
   - dog-park's #shop-btn + #cabin-btn (game pills pinned top:10)
   - sticker-wall's #clear-mine (Undo-mine button pinned top:10)
   Push each down so they sit below the topbar instead of under it. */
body:has(#kg-topbar) #shop-btn,
body:has(#kg-topbar) #cabin-btn,
body:has(#kg-topbar) #clear-mine {
  top: 66px !important;
}

/* bunny-trails' #hud2 (active count + ❤️❤️❤️ HP + horde-left wave)
   was a centered pill at top:56 — same vertical band as the shared
   topbar, so the two overlapped. Per the dad's suggestion, slide it
   to top-right under the volume controls. The #hud (carrot count)
   stays centered at top:64 below the topbar. */
body:has(#kg-topbar) #hud2 {
  top: 64px !important;
  left: auto !important;
  right: 12px !important;
  transform: none !important;
}

/* memory-match's #peekCountdown ("3… 2… 1…" badge during the start-of-
   game peek) was pinned top:14 left:50% — directly under the shared
   ❓ help button. Move it to bottom-center where the card grid ends,
   well clear of the topbar. The 0.5s bob keyframe uses translate
   so it keeps working. */
body:has(#kg-topbar) #peekCountdown {
  top: auto !important;
  bottom: 24px !important;
}

body:has(#kg-topbar) #home-btn,
body:has(#kg-topbar) #music-btn,
body:has(#kg-topbar) #sfx-toggle,
body:has(#kg-topbar) #sfx-btn,
body:has(#kg-topbar) .home-btn,
body:has(#kg-topbar) .music-btn,
body:has(#kg-topbar) .sfx-btn {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none !important;
}

/* ---------------- Winners corner rotator ----------------
   Small bottom-LEFT floating image, rotates every 5 s. Pool comes
   from /winners/winners.json (regular). Bottom-LEFT to dodge the
   bottom-right game-version label and any in-game HUD pinned on
   the right. */

#kg-winner-corner {
  position: fixed;
  bottom: 12px;
  left: 12px;
  /* Sits ABOVE title-screen overlays (z 9700) so the rotator is
     visible against full-coverage cover-art backgrounds. Title's
     own Start/Play button is center-positioned so the corner
     never overlaps it. Pointer-events stays 'none' (set later)
     so clicks pass straight through to whatever's underneath
     (the title overlay catches them). */
  z-index: 9800;
  /* Phone default — bumps up on tablet + PC below. */
  width: 110px;
  height: 110px;
  /* No more white card backdrop or border — the alpha-keyed PNGs
     have transparent backgrounds and look better floating clean.
     A drop-shadow on the IMG (instead of the box) traces the
     character silhouette rather than a square. */
  background: transparent;
  border: none;
  transition: opacity 320ms ease, transform 200ms ease;
  cursor: pointer;
  opacity: 0.95;
}
#kg-winner-corner:hover { transform: scale(1.06); opacity: 1; }
#kg-winner-corner.kg-wc-fade { opacity: 0; }
#kg-winner-corner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}
/* Tablet ≥ 520px */
@media (min-width: 520px) {
  #kg-winner-corner { width: 160px; height: 160px; bottom: 16px; left: 16px; }
}
/* PC ≥ 900px */
@media (min-width: 900px) {
  #kg-winner-corner { width: 220px; height: 220px; bottom: 20px; left: 20px; }
}

/* ---------------- Squad corner rotator (right-side mirror) ----------------
   Same shape as #kg-winner-corner but pinned bottom-RIGHT. Uses a
   distinct id/class so styles + JS stay separate. */

/* Squad image is the feature panel — deliberately larger than the
   left winner rotator. Sized to stay clear of typical centered
   "Start" buttons on game title screens (most sit between 40%-60%
   of viewport width, so even at 320px wide on a 900px viewport we
   leave ~30% horizontal margin to the centered button). */
#kg-squad-corner {
  position: fixed;
  bottom: 12px;
  right: 12px;
  /* Same stacking as the left corner — above title-screen
     backgrounds (z 9700), below modals (10000+). */
  z-index: 9800;
  width: 140px;
  height: 140px;
  /* Match winner-corner: no white card, drop-shadow on the image. */
  background: transparent;
  border: none;
  transition: opacity 320ms ease, transform 200ms ease;
  cursor: pointer;
  opacity: 0.96;
}
#kg-squad-corner:hover { transform: scale(1.04); opacity: 1; }
#kg-squad-corner.kg-sc-fade { opacity: 0; }
#kg-squad-corner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 5px 14px rgba(0, 0, 0, 0.4));
}
/* Tablet ≥ 520px */
@media (min-width: 520px) {
  #kg-squad-corner { width: 220px; height: 220px; bottom: 16px; right: 16px; }
}
/* PC ≥ 900px — featured panel size */
@media (min-width: 900px) {
  #kg-squad-corner { width: 300px; height: 300px; bottom: 20px; right: 20px; }
}
/* Big desktop ≥ 1280px — go a bit bigger still */
@media (min-width: 1280px) {
  #kg-squad-corner { width: 340px; height: 340px; bottom: 24px; right: 24px; }
}

/* ---------------- Home splash ----------------
   Full-screen 3-second splash on the site root, drawn from
   /winners/winners.json (bakeoff). Shown once per browser session
   so it doesn't get annoying. */

#kg-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: radial-gradient(ellipse at center, #ffd9ec 0%, #b65aaf 60%, #4d2a8e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: kg-splash-in 240ms ease-out;
  user-select: none;
}
#kg-splash img {
  max-width: 82vw;
  max-height: 82vh;
  border-radius: 26px;
  box-shadow: 0 16px 60px rgba(0, 0, 0, 0.5);
  animation: kg-splash-pop 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
#kg-splash .kg-splash-skip {
  position: absolute;
  bottom: 18px;
  right: 18px;
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 14px;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
#kg-splash.kg-splash-fade { opacity: 0; transition: opacity 380ms ease; }
@keyframes kg-splash-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes kg-splash-pop {
  from { transform: scale(0.65); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* ---------------- Shared overlay base (used by pause menu + help) ---------------- */

.kg-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 8, 40, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: kg-overlay-in 160ms ease-out;
  font-family: "Fredoka", "Comic Sans MS", "Chalkboard SE", system-ui, sans-serif;
}
.kg-overlay[hidden] { display: none; }
@keyframes kg-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.kg-overlay-panel {
  background: linear-gradient(180deg, #fff 0%, #ffe9f4 100%);
  border: 4px solid #ff6bb5;
  border-radius: 24px;
  box-shadow: 0 8px 0 #ff6bb5, 0 12px 40px rgba(0,0,0,0.35);
  padding: 22px 22px 18px;
  width: min(420px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  color: #2b1140;
  animation: kg-overlay-pop 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes kg-overlay-pop {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.kg-overlay-panel h2 {
  margin: 0 0 12px;
  text-align: center;
  font-size: clamp(22px, 5vw, 28px);
  color: #b5006b;
}
.kg-overlay-panel p {
  margin: 8px 0;
  font-size: 16px;
  line-height: 1.4;
  text-align: center;
}

.kg-overlay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  font-weight: 800;
  font-size: 17px;
  padding: 11px 16px;
  border-radius: 16px;
  border: 3px solid #ff6bb5;
  background: #fff;
  color: #2b1140;
  cursor: pointer;
  box-shadow: 0 3px 0 #ff6bb5;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.kg-overlay-btn:active { translate: 0 2px; box-shadow: 0 1px 0 #ff6bb5; }
.kg-overlay-btn.kg-primary { background: #ff6bb5; color: #fff; }
.kg-overlay-btn.kg-secondary { border-color: #6bb5ff; box-shadow: 0 3px 0 #6bb5ff; }
.kg-overlay-btn.kg-secondary:active { box-shadow: 0 1px 0 #6bb5ff; }
.kg-overlay-btn.kg-warn { border-color: #b56bff; box-shadow: 0 3px 0 #b56bff; }
.kg-overlay-btn.kg-warn:active { box-shadow: 0 1px 0 #b56bff; }

.kg-btn-row {
  display: flex;
  gap: 8px;
  margin: 10px 0;
  justify-content: center;
  flex-wrap: wrap;
}
.kg-btn-row .kg-overlay-btn { flex: 1 1 120px; }

/* ---------------- Pause-menu specific ---------------- */

.kg-slider-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  margin: 10px 0;
  padding: 8px 12px;
  background: rgba(255,255,255,0.6);
  border-radius: 14px;
  border: 2px solid rgba(255,107,181,0.3);
}
.kg-slider-row label {
  font-weight: 800;
  font-size: 16px;
  white-space: nowrap;
}
.kg-slider-row input[type="range"] {
  width: 100%;
  accent-color: #ff6bb5;
  cursor: pointer;
}
.kg-slider-row .kg-vol-val {
  font-weight: 800;
  min-width: 36px;
  text-align: right;
  font-size: 14px;
  color: #b5006b;
}
.kg-mute-all {
  width: 100%;
  margin: 6px 0 14px;
}

/* ---------------- Help-modal specific ---------------- */

.kg-help-panel { width: min(480px, 100%); }
.kg-help-block {
  margin: 12px 0;
  padding: 12px 14px;
  background: rgba(255,255,255,0.7);
  border-radius: 14px;
  border: 2px solid rgba(255,107,181,0.25);
}
.kg-help-block h3 {
  margin: 0 0 6px;
  font-size: 18px;
  color: #b5006b;
}
.kg-help-block p {
  margin: 4px 0;
  text-align: left;
  font-size: 15px;
  line-height: 1.4;
}
.kg-help-block ul {
  margin: 4px 0 4px 18px;
  padding: 0;
}
.kg-help-block li {
  font-size: 15px;
  line-height: 1.5;
  margin: 2px 0;
}