/* Teamz Lab games — modal / menu UI theme (CSS vars on #game-root via TzGameDock.init theme). */

/* Always follow html[data-theme] branding — never hardcoded dock preset colors. */
html,
#game-root.tz-game-themed {
  --tz-game-modal-backdrop: rgba(0, 0, 0, 0.55);
  --tz-game-modal-panel-bg: var(--surface);
  --tz-game-modal-panel-border: var(--border);
  --tz-game-modal-heading: var(--heading);
  --tz-game-modal-text: var(--text);
  --tz-game-modal-text-muted: var(--text-muted);
  --tz-game-modal-divider: var(--border);
  --tz-game-btn-bg: transparent;
  --tz-game-btn-border: var(--border);
  --tz-game-btn-color: var(--heading);
  /* Configurable primary/CTA colour for ALL modals (buttons + ad offers).
     Defaults to --success (green) so existing games are unchanged; a game can
     set --tz-game-primary: var(--accent) to make every modal match its brand. */
  --tz-game-primary: var(--success);
  --tz-game-primary-on: #ffffff;
  --tz-game-btn-primary-bg: var(--tz-game-primary);
  --tz-game-btn-primary-border: var(--tz-game-primary);
  --tz-game-btn-primary-color: var(--tz-game-primary-on);
  --tz-game-level-bg: var(--surface);
  --tz-game-level-border: var(--border);
  --tz-game-level-color: var(--heading);
  --tz-game-level-done-border: var(--success);
  --tz-game-level-done-color: var(--success);
  --tz-game-level-current-bg: var(--danger);
  --tz-game-level-current-color: #ffffff;
  --tz-game-tier-label: var(--text-muted);
  --tz-game-menu-item-bg: var(--surface);
  --tz-game-menu-item-border: var(--border);
  --tz-game-menu-item-color: var(--heading);
  --tz-game-menu-item-hover-border: var(--heading);
  --tz-game-accent: var(--accent);
  --tz-game-accent-on: var(--accent-text);
}

/* ── Modals (kit + game-specific panels) ── */
.tz-game-modal {
  background: var(--tz-game-modal-backdrop);
}

.tz-game-modal-panel,
.ae3d-panel.tz-game-modal-panel,
.ae3d-panel {
  background: var(--tz-game-modal-panel-bg);
  border: 1px solid var(--tz-game-modal-panel-border);
  color: var(--tz-game-modal-text);
}

.tz-game-modal-panel h2,
.tz-game-modal-panel h3,
.ae3d-panel h2 {
  color: var(--tz-game-modal-heading);
}

.tz-game-modal-panel p,
.ae3d-panel p {
  color: var(--tz-game-modal-text-muted);
}

.tz-game-modal-actions .tz-game-modal-btn,
.tz-game-modal-actions .ae3d-btn,
.ae3d-modal-actions .ae3d-btn,
.ae3d-modal-actions .tz-game-modal-btn,
.tz-platform-btn {
  background: var(--tz-game-btn-bg);
  border: 1px solid var(--tz-game-btn-border);
  color: var(--tz-game-btn-color);
}

.tz-game-modal-actions .tz-game-modal-btn--primary,
.tz-game-modal-actions .ae3d-btn-primary,
.ae3d-modal-actions .ae3d-btn-primary,
.ae3d-modal-actions .tz-game-modal-btn--primary {
  background: var(--tz-game-btn-primary-bg);
  border-color: var(--tz-game-btn-primary-border);
  color: var(--tz-game-btn-primary-color);
}

.tz-game-modal-actions .tz-game-modal-btn:hover,
.tz-game-modal-actions .ae3d-btn:hover,
.ae3d-modal-actions .ae3d-btn:hover,
.ae3d-modal-actions .tz-game-modal-btn:hover,
.tz-platform-btn:hover {
  border-color: var(--tz-game-modal-heading);
}

.tz-game-modal-actions .tz-game-modal-btn--primary:hover,
.tz-game-modal-actions .ae3d-btn-primary:hover,
.ae3d-modal-actions .ae3d-btn-primary:hover,
.ae3d-modal-actions .tz-game-modal-btn--primary:hover {
  opacity: 0.9;
  border-color: var(--tz-game-btn-primary-border);
}

/* ── Dock menu drawer (portaled to #game-root) ── */
.tz-game-dock-menu-panel .tz-game-modal-actions button,
.tz-game-dock-menu-item {
  background: var(--tz-game-menu-item-bg);
  border: 1px solid var(--tz-game-menu-item-border);
  color: var(--tz-game-menu-item-color);
}

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

.tz-game-dock-menu-item.is-recording {
  background: var(--tz-dock-menu-record-bg, rgba(237, 81, 38, 0.15));
  border-color: var(--tz-dock-menu-record-color, #ed5126);
  color: var(--tz-dock-menu-record-color, #ed5126);
}

/* ── Level picker grid (tz-level-* = reusable; ae3d-* = Arrow Escape alias) ── */
.tz-tier-label,
.ae3d-tier-label {
  color: var(--tz-game-tier-label);
  background: var(--tz-game-modal-panel-bg);
}

.tz-level-btn,
.ae3d-lvl {
  background: var(--tz-game-level-bg);
  border-color: var(--tz-game-level-border);
  color: var(--tz-game-level-color);
}

.tz-level-btn:hover:not([disabled]),
.ae3d-lvl:hover:not([disabled]) {
  border-color: var(--tz-game-modal-heading);
}

.tz-level-btn.is-done,
.ae3d-lvl.done {
  border-color: var(--tz-game-level-done-border);
  color: var(--tz-game-level-done-color);
}

.tz-level-btn.is-current,
.ae3d-lvl.current {
  border-color: var(--tz-game-level-current-bg);
  background: var(--tz-game-level-current-bg);
  color: var(--tz-game-level-current-color);
}

/* ── Platform leaderboard modal ── */
.tz-platform-tab {
  border-color: var(--tz-game-btn-border);
  color: var(--tz-game-modal-text);
}

.tz-platform-tab.is-active {
  background: var(--tz-game-accent);
  border-color: transparent;
  color: var(--tz-game-accent-on);
}

.tz-platform-muted {
  color: var(--tz-game-modal-text-muted);
}

.tz-platform-leaderboard-row {
  border-bottom-color: var(--tz-game-modal-divider);
  color: var(--tz-game-modal-text);
}

.tz-platform-leaderboard-row.is-me {
  background: color-mix(in srgb, var(--tz-game-accent) 14%, transparent);
}

.tz-platform-rank {
  color: var(--tz-game-modal-text-muted);
}

.tz-platform-score {
  color: var(--tz-game-accent);
}