/* Teamz Lab games — generic bottom dock + menu drawer (themed via CSS vars on .tz-game-dock) */

.tz-game-dock {
  /* Defaults — override per game via TzGameDock.init({ theme }) or content.en.json dock.theme */
  --tz-dock-inset: 14px;
  --tz-dock-bar-bg: rgba(6, 10, 18, 0.92);
  --tz-dock-bar-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  --tz-dock-bar-radius: 19px;
  --tz-dock-bar-blur: 16px;
  --tz-dock-text: #f0f4fa;
  --tz-dock-level-bg: transparent;
  --tz-dock-level-color: var(--tz-dock-text);
  --tz-dock-heart: #ed5126;
  --tz-dock-heart-lost-opacity: 0.18;
  --tz-dock-btn-bg: rgba(255, 255, 255, 0.08);
  --tz-dock-btn-hover-bg: rgba(255, 255, 255, 0.14);
  --tz-dock-btn-hover-opacity: 1;
  --tz-dock-btn-active-bg: rgba(255, 255, 255, 0.14);
  --tz-dock-btn-color: #f0f4fa;
  --tz-dock-btn-radius: 8px;
  --tz-dock-btn-size: 32px;
  --tz-dock-btn-muted-opacity: 0.42;
  --tz-dock-record-bg: #ed5126;
  --tz-dock-record-color: #fff;
  --tz-dock-menu-item-bg: var(--surface, #12151a);
  --tz-dock-menu-item-border: var(--border, #2d3a4d);
  --tz-dock-menu-item-color: var(--heading, #e8eef7);
  --tz-dock-menu-item-hover-border: var(--heading, #e8eef7);
  --tz-dock-menu-record-bg: rgba(237, 81, 38, 0.15);
  --tz-dock-menu-record-color: #ed5126;
  --tz-dock-platform-btn-bg: rgba(255, 255, 255, 0.08);
  --tz-dock-platform-btn-hover-bg: rgba(255, 255, 255, 0.14);
  --tz-dock-platform-btn-color: #e8eef7;

  position: absolute;
  top: auto;
  /* Clear the system nav bar / home indicator. --tz-ins-bottom is the real
     inset Flutter injects (env() does NOT cover Android's nav bar). */
  bottom: calc(var(--tz-dock-inset) + max(env(safe-area-inset-bottom, 0px), var(--tz-ins-bottom, 0px), var(--tz-safe-bottom, 0px)));
  left: calc(var(--tz-dock-inset) + max(env(safe-area-inset-left, 0px), var(--tz-ins-left, 0px), var(--tz-safe-left, 0px)));
  right: calc(var(--tz-dock-inset) + max(env(safe-area-inset-right, 0px), var(--tz-ins-right, 0px), var(--tz-safe-right, 0px)));
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  padding: 0;
  pointer-events: none;
  z-index: 8;
}

.tz-game-dock > * {
  pointer-events: auto;
}

.tz-game-dock__bar {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  max-width: none;
  min-height: 38px;
  padding: 2px 4px;
  border-radius: var(--tz-dock-bar-radius);
  background: var(--tz-dock-bar-bg);
  border: none;
  backdrop-filter: blur(var(--tz-dock-bar-blur));
  -webkit-backdrop-filter: blur(var(--tz-dock-bar-blur));
  box-shadow: var(--tz-dock-bar-shadow);
}

.tz-game-dock__stats {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  flex: 0 0 auto;
  gap: 8px;
  padding: 0 2px 0 4px;
  margin: 0;
  min-width: 0;
}

.tz-game-dock__level {
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--tz-dock-level-color, var(--tz-dock-text));
  background: var(--tz-dock-level-bg, transparent);
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  max-width: 5.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Top-right scoreboard CARD (opt-in via stats.levelTopRight) — holds the live
   level count + lives, floated clear of the system status bar. --tz-ins-* are
   the real system-bar insets injected by Flutter (env() misses the nav bar). */
.tz-game-scoreboard {
  /* The heart var lives on .tz-game-dock; redefine here since the card is a
     sibling (not inside the dock), or hearts render with no fill. */
  --tz-dock-heart: #ed5126;
  --tz-dock-heart-lost-opacity: 0.22;
  position: fixed;
  top: calc(10px + max(env(safe-area-inset-top, 0px), var(--tz-ins-top, 0px), var(--tz-safe-top, 0px)));
  right: calc(10px + max(env(safe-area-inset-right, 0px), var(--tz-ins-right, 0px), var(--tz-safe-right, 0px)));
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 9px 15px;
  border-radius: 16px;
  background: var(--tz-game-menu-item-bg, var(--surface, #ffffff));
  border: 1px solid var(--tz-game-menu-item-border, var(--border, rgba(0, 0, 0, 0.08)));
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
  pointer-events: none;
}

.tz-game-scoreboard .tz-game-dock__level {
  max-width: none;
  padding: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: transparent;
  color: var(--tz-game-modal-heading, var(--heading, #1e293b));
}

.tz-game-scoreboard .tz-game-dock__lives {
  gap: 4px;
}

.tz-game-scoreboard .tz-game-dock__heart {
  width: 13px;
  height: 13px;
}

.tz-game-dock__lives {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0;
  flex-shrink: 0;
}

.tz-game-dock__lives-count {
  display: none;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--tz-dock-heart);
  line-height: 1;
  margin-left: 1px;
}

.tz-game-dock__heart {
  display: inline-block;
  width: 9px;
  height: 9px;
  background: var(--tz-dock-heart);
  clip-path: polygon(50% 84%, 12% 50%, 12% 26%, 28% 14%, 50% 30%, 72% 14%, 88% 26%, 88% 50%);
  transition: opacity 0.25s, transform 0.25s;
}

.tz-game-dock__heart.is-lost {
  opacity: var(--tz-dock-heart-lost-opacity);
  transform: scale(0.7);
}

.tz-game-dock__actions {
  display: flex;
  flex: 0 1 auto;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  min-width: 0;
  margin-left: auto;
}

/* When stats moved to the top-right scoreboard, the dock has no left group —
   spread the actions across the full width instead of bunching them right. */
.tz-game-dock__bar--no-stats .tz-game-dock__actions {
  margin-left: 0;
  flex: 1 1 auto;
  justify-content: space-around;
}

.tz-game-dock__actions .tz-platform-dock--inline {
  position: static;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0;
  pointer-events: auto;
  margin: 0;
  padding: 0;
}

.tz-game-dock-btn {
  width: var(--tz-dock-btn-size);
  height: var(--tz-dock-btn-size);
  min-width: var(--tz-dock-btn-size);
  font-size: 14px;
  line-height: 1;
  border-radius: var(--tz-dock-btn-radius);
  background: var(--tz-dock-btn-bg);
  border: none;
  color: var(--tz-dock-btn-color);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  transition: background 0.15s;
}

.tz-game-dock-btn:hover:not(.is-recording) {
  background: var(--tz-dock-btn-hover-bg);
  opacity: var(--tz-dock-btn-hover-opacity, 1);
}

.tz-game-dock-btn:active:not(.is-recording) {
  background: var(--tz-dock-btn-active-bg);
  transform: scale(0.94);
  opacity: var(--tz-dock-btn-hover-opacity, 1);
}

.tz-game-dock-btn.is-muted {
  opacity: var(--tz-dock-btn-muted-opacity);
}

.tz-game-dock-btn:disabled {
  opacity: 0.28;
  pointer-events: none;
  cursor: default;
}

.tz-game-dock-btn--secondary {
  /* hidden in compact mode via .tz-game-dock--compact below */
}

.tz-game-dock-btn.is-recording {
  background: var(--tz-dock-record-bg);
  color: var(--tz-dock-record-color);
  animation: tzGameDockRecPulse 1s ease-in-out infinite;
}

@keyframes tzGameDockRecPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.65;
  }
}

.tz-game-dock__svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Platform leaderboard inline (legacy mount on bar — prefer actions slot) */
.tz-game-dock__bar > .tz-platform-dock--inline {
  position: static;
  display: flex;
  flex-shrink: 0;
  pointer-events: auto;
  margin: 0 0 0 auto;
  padding: 0;
  order: 2;
}

.tz-game-dock__bar .tz-platform-dock--inline .tz-platform-dock-btn {
  width: var(--tz-dock-btn-size);
  height: var(--tz-dock-btn-size);
  border-radius: var(--tz-dock-btn-radius);
  background: var(--tz-dock-platform-btn-bg);
  border: none;
  color: var(--tz-dock-platform-btn-color);
}

.tz-game-dock__bar .tz-platform-dock--inline .tz-platform-dock-btn:hover {
  background: var(--tz-dock-platform-btn-hover-bg, var(--tz-dock-btn-hover-bg));
  opacity: var(--tz-dock-btn-hover-opacity, 1);
}

.tz-game-dock__bar #tz-platform-btn-auth {
  display: none !important;
}

html.tz-app-mode .tz-game-dock {
  /* ADDITIVE: base inset is breathing room ON TOP of the safe area, not max'd
     away by it. Sources, largest wins: env() (real iOS/browser), --tz-ins-*
     (real inset Flutter injects), --tz-safe-* (tz-safe-area.js incl. preview
     fallback). Without the +inset the dock sat flush on the safe-area edge. */
  bottom: calc(var(--tz-dock-inset) + max(env(safe-area-inset-bottom, 0px), var(--tz-ins-bottom, 0px), var(--tz-safe-bottom, 0px)));
  left: calc(var(--tz-dock-inset) + max(env(safe-area-inset-left, 0px), var(--tz-ins-left, 0px), var(--tz-safe-left, 0px)));
  right: calc(var(--tz-dock-inset) + max(env(safe-area-inset-right, 0px), var(--tz-ins-right, 0px), var(--tz-safe-right, 0px)));
}

/* Menu drawer — inherits game page tokens where useful */
.tz-game-dock-menu-panel {
  text-align: left;
  max-width: 360px;
}

.tz-game-dock-menu-panel h2 {
  text-align: center;
  margin-bottom: 12px;
}

.tz-game-dock-menu-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 14px;
}

.tz-game-dock-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--tz-game-menu-item-border, var(--tz-dock-menu-item-border));
  border-radius: 10px;
  background: var(--tz-game-menu-item-bg, var(--tz-dock-menu-item-bg));
  color: var(--tz-game-menu-item-color, var(--tz-dock-menu-item-color));
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

/* The base rule sets display:flex, which would override the `hidden`
   attribute (UA [hidden]{display:none} loses to an author class rule).
   This restores hidden so config-gated items (profile, leaderboard, …)
   actually disappear when syncPlatformMenu sets item.hidden = true. */
.tz-game-dock-menu-item[hidden] {
  display: none;
}

.tz-game-dock-menu-item:hover {
  border-color: var(--tz-game-menu-item-hover-border, var(--tz-dock-menu-item-hover-border));
}

.tz-game-dock-menu-item.is-recording {
  background: var(--tz-dock-menu-record-bg);
  border-color: var(--tz-dock-menu-record-color);
  color: var(--tz-dock-menu-record-color);
}

.tz-game-dock-menu-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 800;
}

.tz-game-dock-menu-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tz-game-dock-menu-panel .tz-game-modal-actions button {
  width: 100%;
  border: 1px solid var(--tz-game-btn-border, var(--tz-dock-menu-item-border));
  background: var(--tz-game-btn-bg, transparent);
  color: var(--tz-game-btn-color, var(--tz-dock-menu-item-color));
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 700;
  font-family: inherit;
}

@media (max-width: 520px), (max-height: 380px) {
  .tz-game-dock__bar .tz-platform-dock--inline,
  .tz-game-dock__actions .tz-platform-dock--inline {
    display: none !important;
  }
}

/* Auto-compact: toggled by ResizeObserver when bar is narrow or overflowing */
.tz-game-dock--compact .tz-game-dock-btn--secondary {
  display: none !important;
}

.tz-game-dock--compact .tz-game-dock__heart:nth-child(n + 2) {
  display: none;
}

.tz-game-dock--compact .tz-game-dock__lives-count {
  display: inline;
}

.tz-game-dock--tight {
  --tz-dock-btn-size: 28px;
}

.tz-game-dock--tight .tz-game-dock__level {
  font-size: 10px;
  padding: 2px 6px;
  max-width: 4.25rem;
}

.tz-game-dock--tight .tz-game-dock__svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 600px) {
  .tz-game-dock {
    --tz-dock-inset: 4px;
    --tz-dock-bar-radius: 18px;
    --tz-dock-btn-size: 30px;
  }
  .tz-game-dock__bar {
    min-height: 36px;
    padding: 2px;
  }
}