/* Teamz Lab games — hide web-only chrome in native app WebView (?app=1). */

/* ── Base app chrome hiding ── */
html.tz-app-mode .tz-web-only,
html.tz-app-mode #site-header,
html.tz-app-mode #breadcrumbs,
html.tz-app-mode .floating-cta,
html.tz-app-mode .inapp-overlay,
html.tz-app-mode .cookie-banner,
html.tz-app-mode .tool-trust-bar,
html.tz-app-mode .tool-rating,
html.tz-app-mode .tool-feedback {
  display: none !important;
}

html:not(.tz-app-mode) .tz-app-only {
  display: none !important;
}

/* ── Full-bleed app shell (safe area + no platform padding) ── */
html.tz-app-mode.tz-app-safe-area {
  --tz-safe-top: env(safe-area-inset-top, 0px);
  --tz-safe-right: env(safe-area-inset-right, 0px);
  --tz-safe-bottom: env(safe-area-inset-bottom, 0px);
  --tz-safe-left: env(safe-area-inset-left, 0px);
}

html.tz-app-mode,
html.tz-app-mode body {
  height: 100%;
  min-height: 100dvh;
  overflow: hidden;
  background: #0c1222;
}

html.tz-app-mode body {
  padding: 0 !important;
  margin: 0 !important;
}

html.tz-app-mode .site-main {
  max-width: none !important;
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

html.tz-app-mode.tz-app-safe-area .site-main {
  padding: 0 !important;
}

/* Full-bleed canvas — safe area applies to floating controls only (see --tz-safe-*). */
html.tz-app-mode.tz-app-safe-area .tool-calculator.tz-app-core {
  padding: 0 !important;
}

html.tz-app-mode.tz-app-compact.tz-app-safe-area .site-main {
  padding: 0 !important;
}

html.tz-app-mode.tz-app-compact.tz-app-safe-area .tool-calculator.tz-app-core {
  padding: 0 !important;
}

html.tz-app-mode.tz-app-compact:not(.tz-app-safe-area) .site-main {
  padding:
    max(2px, env(safe-area-inset-top, 0px))
    max(2px, env(safe-area-inset-right, 0px))
    max(2px, env(safe-area-inset-bottom, 0px))
    max(2px, env(safe-area-inset-left, 0px)) !important;
}

html.tz-app-mode .tool-calculator.tz-app-core {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* ── Landscape app layout (full-bleed canvas + floating controls) ── */
html.tz-app-mode.tz-app-landscape .tool-calculator.tz-app-core {
  flex-direction: column;
  position: relative;
  height: 100%;
  min-height: 0;
}

html.tz-app-mode .tz-game-surface,
html.tz-app-mode .ae3d-wrap {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  max-height: none !important;
  aspect-ratio: unset !important;
}

html.tz-app-mode.tz-app-landscape .tz-game-surface,
html.tz-app-mode.tz-app-landscape .ae3d-wrap {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  max-height: none !important;
  aspect-ratio: unset !important;
}

/* Float side/bottom controls over the canvas — never a sidebar column */
html.tz-app-mode .tz-game-controls,
html.tz-app-mode .ae3d-controls {
  position: absolute;
  z-index: 7;
  margin: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: min(94%, 480px);
  pointer-events: none;
  justify-content: center;
}

html.tz-app-mode .tz-game-controls > *,
html.tz-app-mode .ae3d-controls > * {
  pointer-events: auto;
}


/* ── Flush game card (no bordered box) ── */
html.tz-app-mode.tz-app-no-card .tz-game-surface,
html.tz-app-mode.tz-app-no-card .ae3d-wrap {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

html.tz-app-mode.tz-app-show-card .tz-game-surface,
html.tz-app-mode.tz-app-show-card .ae3d-wrap {
  border: 1px solid var(--border);
  border-radius: 12px;
}

/* ── Page head / hints / platform chrome toggles ── */
html.tz-app-mode .tz-page-head {
  display: none !important;
}

html.tz-app-mode.tz-app-show-head .tz-page-head {
  display: block !important;
}

html.tz-app-mode.tz-app-show-head .tz-page-head .tz-web-only {
  display: none !important;
}

html.tz-app-mode.tz-app-hide-hints .tz-page-hints,
html.tz-app-mode.tz-app-hide-hints .tz-game-hints {
  display: none !important;
}

html.tz-app-mode.tz-app-hide-share_bar .teamz-share-bar,
html.tz-web-hide-share_bar .teamz-share-bar {
  display: none !important;
}

html.tz-app-mode.tz-app-hide-trust_strip .tool-trust-strip,
html.tz-web-hide-trust_strip .tool-trust-strip {
  display: none !important;
}

html.tz-app-mode.tz-app-hide-pwa_banner .pwa-install-banner,
html.tz-app-mode.tz-app-hide-pwa_banner .pwa-ios-modal,
html.tz-app-mode.tz-app-hide-pwa_banner .offline-banner,
html.tz-app-mode.tz-app-hide-pwa_banner .share-btn--install,
html.tz-web-hide-pwa_banner .pwa-install-banner,
html.tz-web-hide-pwa_banner .pwa-ios-modal,
html.tz-web-hide-pwa_banner .offline-banner,
html.tz-web-hide-pwa_banner .share-btn--install {
  display: none !important;
}

html.tz-app-mode.tz-app-hide-byline .tool-author-byline,
html.tz-web-hide-byline .tool-author-byline {
  display: none !important;
}

html.tz-app-mode.tz-app-hide-footer #site-footer,
html.tz-web-hide-footer #site-footer {
  display: none !important;
}

html.tz-app-mode.tz-app-hide-hub_banner .lang-auto-banner,
html.tz-web-hide-hub_banner .lang-auto-banner {
  display: none !important;
}

html.tz-app-mode .tz-page-app-head {
  margin: 0 0 0.25rem;
}

html.tz-app-mode .tz-page-app-head h1 {
  font-size: 1rem;
  margin: 0 0 0.15rem;
}

html.tz-app-mode .tz-page-app-head .tz-page-subtitle {
  font-size: 0.8rem;
  margin: 0;
  color: var(--text-muted);
}