/* Shared fullscreen panel chrome for the Telegram Mini App shell.
   Surface-specific panel layout stays in frontend/legacy/index-shell.css and
   lazy feature styles; this file owns the safe-area and shared .ot-panel base. */

:root {
  --ot-tg-safe-top: 0px;
  --ot-tg-safe-right: 0px;
  --ot-tg-safe-bottom: 0px;
  --ot-tg-safe-left: 0px;
  --ot-tg-content-safe-top: 0px;
  --ot-tg-content-safe-right: 0px;
  --ot-tg-content-safe-bottom: 0px;
  --ot-tg-content-safe-left: 0px;
  --ot-panel-safe-top: max(env(safe-area-inset-top, 0px), var(--ot-tg-content-safe-top), var(--ot-tg-safe-top));
  --ot-panel-header-pad-top: calc(10px + var(--ot-panel-safe-top));
  --ot-panel-header-pad-top-lg: calc(12px + var(--ot-panel-safe-top));
  --ot-panel-header-height: 48px;
  --ot-panel-header-pad-x: 14px;
  --ot-panel-close-size: 34px;
  --ot-panel-body-pad-bottom: max(env(safe-area-inset-bottom, 0px), var(--ot-tg-content-safe-bottom), var(--ot-tg-safe-bottom));
  --ot-panel-motion-duration: 220ms;
  --ot-panel-motion-fade-duration: 160ms;
  --ot-panel-motion-reduced-duration: 80ms;
  --ot-craft-press-duration: 120ms;
  --ot-craft-feedback-duration: 220ms;
  --ot-craft-sheet-duration: 280ms;
  --ot-panel-motion-offset: 14px;
  --ot-panel-overlay-motion-offset: 0px;
  --ot-panel-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html.tg-fullscreen {
  --ot-panel-safe-top: max(env(safe-area-inset-top, 0px), var(--ot-tg-content-safe-top), var(--ot-tg-safe-top), 82px);
  --ot-panel-header-pad-top: calc(10px + var(--ot-panel-safe-top));
  --ot-panel-header-pad-top-lg: calc(12px + var(--ot-panel-safe-top));
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ot-craft-press-duration: 80ms;
    --ot-craft-feedback-duration: 80ms;
    --ot-craft-sheet-duration: 80ms;
  }
}

.ot-panel,
.ot-panel-overlay,
.ot-panel *,
.ot-panel-overlay * {
  box-sizing: border-box;
}

.ot-panel,
.ot-panel-overlay {
  opacity: 0;
  transform: translate3d(0, var(--ot-panel-motion-offset), 0);
  transition:
    transform var(--ot-panel-motion-duration) var(--ot-panel-motion-ease),
    opacity var(--ot-panel-motion-fade-duration) var(--ot-panel-motion-ease);
  will-change: transform, opacity;
}

.ot-panel-overlay {
  transform: translate3d(0, var(--ot-panel-overlay-motion-offset), 0);
}

.ot-panel.open,
.ot-panel-overlay.open {
  z-index: 5200;
}

.ot-panel.open,
.ot-panel-overlay.open,
.ot-panel-overlay.open .ot-panel {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.ot-panel.is-closing,
.ot-panel-overlay.is-closing,
.ot-panel-overlay.is-closing .ot-panel {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, var(--ot-panel-motion-offset), 0);
}

.ot-panel-overlay.is-closing {
  transform: translate3d(0, var(--ot-panel-overlay-motion-offset), 0);
}

@starting-style {
  .ot-panel.open,
  .ot-panel-overlay.open .ot-panel {
    opacity: 0;
    transform: translate3d(0, var(--ot-panel-motion-offset), 0);
  }

  .ot-panel-overlay.open {
    opacity: 0;
    transform: translate3d(0, var(--ot-panel-overlay-motion-offset), 0);
  }
}

.ot-panel-header {
  min-height: calc(var(--ot-panel-header-height) + var(--ot-panel-safe-top));
  padding: var(--ot-panel-header-pad-top) var(--ot-panel-header-pad-x) 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  background: rgba(15,17,21,0.94) !important;
  border-bottom: var(--tg-hairline) !important;
  color: var(--tg-text);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.ot-panel-header-stack {
  display: block;
}

.ot-panel-header-row {
  min-height: var(--ot-panel-header-height);
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ot-panel-title {
  min-width: 0;
  flex: 1 1 auto;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ot-panel-close {
  width: var(--ot-panel-close-size) !important;
  height: var(--ot-panel-close-size) !important;
  min-width: var(--ot-panel-close-size) !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: var(--tg-surface-2) !important;
  border: var(--tg-hairline) !important;
  color: var(--tg-muted) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-size: 16px !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  order: 99;
  margin-left: auto;
  flex: 0 0 var(--ot-panel-close-size) !important;
  position: static !important;
  inset: auto !important;
  transition:
    transform var(--tg-motion-fast) var(--tg-ease),
    background var(--tg-motion-fast) var(--tg-ease),
    color var(--tg-motion-fast) var(--tg-ease);
}

.ot-panel-close:active {
  transform: scale(0.92);
  background: var(--tg-surface-3) !important;
  color: var(--tg-text) !important;
}

.ot-panel-body {
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-padding-top: calc(var(--ot-panel-header-height) + var(--ot-panel-safe-top));
  scroll-padding-bottom: calc(16px + var(--ot-panel-body-pad-bottom));
}

body.tg-panel-open #hud-top-pill {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
}

html.tg-fullscreen #settings-drawer.open #settings-header,
html.tg-fullscreen #leaderboard-overlay.open #leaderboard-header,
html.tg-fullscreen #profile-modal.open #profile-modal-header,
html.tg-fullscreen #shop-modal.open #shop-header,
html.tg-fullscreen #market-modal.open #market-header,
html.tg-fullscreen #market-list-overlay.open #market-list-header,
html.tg-fullscreen #craft-overlay.open #craft-header,
html.tg-fullscreen #craft-pick-overlay.open #craft-pick-header,
html.tg-fullscreen #clan-screen.open .cs-header,
html.tg-fullscreen #referral-hub-overlay.open .ref-overlay-header,
html.tg-fullscreen #underground-season-overlay.open .ref-overlay-header,
html.tg-fullscreen #daily-missions-overlay.open .daily-missions-header,
html.tg-fullscreen #monument-worldmap-overlay.open #mwm-search-bar,
html.tg-fullscreen #monument-raids-overlay.open .mr-header,
html.tg-fullscreen #admin-player-modal.open .apm-header,
html.tg-fullscreen #admin-reports-modal.open .apm-header,
html.tg-fullscreen #admin-pin-locks-modal.open .apm-header,
html.tg-fullscreen #chat-history-overlay.open .chc-header,
html.tg-fullscreen #game-hub-overlay.open .game-hub-header,
html.tg-fullscreen .ot-panel.open .ot-panel-header,
html.tg-fullscreen .ot-panel-overlay.open .ot-panel-header,
body.tg-panel-open #settings-header,
body.tg-panel-open #leaderboard-header,
body.tg-panel-open #profile-modal-header,
body.tg-panel-open #shop-header,
body.tg-panel-open #market-header,
body.tg-panel-open #market-list-header,
body.tg-panel-open #craft-header,
body.tg-panel-open #craft-pick-header,
body.tg-panel-open #clan-screen .cs-header,
body.tg-panel-open #referral-hub-overlay .ref-overlay-header,
body.tg-panel-open #underground-season-overlay .ref-overlay-header,
body.tg-panel-open #daily-missions-overlay .daily-missions-header,
body.tg-panel-open #monument-worldmap-overlay #mwm-search-bar,
body.tg-panel-open #monument-raids-overlay .mr-header,
body.tg-panel-open #admin-player-modal .apm-header,
body.tg-panel-open #admin-reports-modal .apm-header,
body.tg-panel-open #admin-pin-locks-modal .apm-header,
body.tg-panel-open #chat-history-overlay .chc-header,
body.tg-panel-open #game-hub-overlay .game-hub-header,
body.tg-panel-open .ot-panel-header {
  height: auto !important;
  min-height: calc(48px + var(--ot-panel-safe-top)) !important;
  padding-top: var(--ot-panel-header-pad-top-lg) !important;
  padding-bottom: 8px !important;
}

html.tg-fullscreen #settings-drawer.open #settings-body,
html.tg-fullscreen #leaderboard-overlay.open #leaderboard-body,
html.tg-fullscreen #profile-modal.open #profile-modal-body,
html.tg-fullscreen #shop-modal.open #shop-body,
html.tg-fullscreen #market-modal.open #market-body,
html.tg-fullscreen #market-list-overlay.open #market-list-body,
html.tg-fullscreen #craft-overlay.open #craft-inv-grid,
html.tg-fullscreen #craft-pick-overlay.open #craft-pick-grid,
html.tg-fullscreen #clan-screen.open .cs-body,
html.tg-fullscreen #referral-hub-overlay.open #referral-hub-body,
html.tg-fullscreen #underground-season-overlay.open #underground-season-body,
html.tg-fullscreen #daily-missions-overlay.open #daily-missions-body,
html.tg-fullscreen #chat-history-overlay.open #chat-history-list,
html.tg-fullscreen #game-hub-overlay.open .game-hub-body,
html.tg-fullscreen .ot-panel.open .ot-panel-body,
html.tg-fullscreen .ot-panel-overlay.open .ot-panel-body,
body.tg-panel-open #settings-body,
body.tg-panel-open #leaderboard-body,
body.tg-panel-open #profile-modal-body,
body.tg-panel-open #shop-body,
body.tg-panel-open #market-body,
body.tg-panel-open #market-list-body,
body.tg-panel-open #craft-inv-grid,
body.tg-panel-open #craft-pick-grid,
body.tg-panel-open #clan-screen .cs-body,
body.tg-panel-open #referral-hub-body,
body.tg-panel-open #underground-season-body,
body.tg-panel-open #daily-missions-body,
body.tg-panel-open #chat-history-list,
body.tg-panel-open #game-hub-overlay .game-hub-body,
body.tg-panel-open .ot-panel-body {
  scroll-padding-top: var(--ot-panel-safe-top) !important;
}

html.tg-fullscreen #profile-modal.open #profile-modal-close,
html.tg-fullscreen #shop-modal.open #shop-close,
html.tg-fullscreen #market-modal.open #market-close,
html.tg-fullscreen #market-list-overlay.open #market-list-close,
html.tg-fullscreen #settings-drawer.open #btn-close-settings,
html.tg-fullscreen #leaderboard-overlay.open .lb-close,
html.tg-fullscreen #clan-screen.open .cs-close,
html.tg-fullscreen #referral-hub-overlay.open .ref-overlay-close,
html.tg-fullscreen #underground-season-overlay.open .underground-season-close,
html.tg-fullscreen #daily-missions-overlay.open .daily-missions-close,
html.tg-fullscreen #monument-worldmap-overlay.open #mwm-close-btn,
html.tg-fullscreen #admin-player-modal.open .apm-close,
html.tg-fullscreen #admin-reports-modal.open .apm-close,
html.tg-fullscreen #admin-pin-locks-modal.open .apm-close,
html.tg-fullscreen #craft-overlay.open #craft-close,
html.tg-fullscreen #craft-pick-overlay.open #craft-pick-close,
html.tg-fullscreen #chat-history-overlay.open .chc-close,
html.tg-fullscreen #monument-raids-overlay.open .mr-close,
html.tg-fullscreen #game-hub-overlay.open .game-hub-close,
html.tg-fullscreen .ot-panel.open .ot-panel-close,
html.tg-fullscreen .ot-panel-overlay.open .ot-panel-close,
body.tg-panel-open #profile-modal-close,
body.tg-panel-open #shop-close,
body.tg-panel-open #market-close,
body.tg-panel-open #market-list-close,
body.tg-panel-open #btn-close-settings,
body.tg-panel-open .lb-close,
body.tg-panel-open #clan-screen .cs-close,
body.tg-panel-open #referral-hub-overlay .ref-overlay-close,
body.tg-panel-open #underground-season-overlay .underground-season-close,
body.tg-panel-open #daily-missions-overlay .daily-missions-close,
body.tg-panel-open #monument-worldmap-overlay #mwm-close-btn,
body.tg-panel-open #admin-player-modal .apm-close,
body.tg-panel-open #admin-reports-modal .apm-close,
body.tg-panel-open #admin-pin-locks-modal .apm-close,
body.tg-panel-open #craft-close,
body.tg-panel-open #craft-pick-close,
body.tg-panel-open #chat-history-card .chc-close,
body.tg-panel-open #monument-raids-overlay .mr-close,
body.tg-panel-open #game-hub-overlay .game-hub-close,
body.tg-panel-open .ot-panel-close {
  width: var(--ot-panel-close-size) !important;
  height: var(--ot-panel-close-size) !important;
  min-width: var(--ot-panel-close-size) !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: var(--tg-surface-2) !important;
  border: var(--tg-hairline) !important;
  color: var(--tg-muted) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-size: 16px !important;
  order: 99 !important;
  margin-left: auto !important;
  flex: 0 0 var(--ot-panel-close-size) !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
}

html.tg-fullscreen #monument-worldmap-overlay.open #mwm-search-wrap,
body.tg-panel-open #monument-worldmap-overlay #mwm-search-wrap {
  order: 1 !important;
  min-width: 0;
}

html.tg-fullscreen #settings-drawer.open #settings-header h3,
html.tg-fullscreen #leaderboard-overlay.open #leaderboard-header h3,
html.tg-fullscreen #shop-modal.open #shop-header h2,
html.tg-fullscreen #market-modal.open #market-header h2,
html.tg-fullscreen #market-list-overlay.open #market-list-header h2,
html.tg-fullscreen #market-list-overlay.open #market-list-header h3,
html.tg-fullscreen #craft-overlay.open #craft-header h2,
html.tg-fullscreen #craft-pick-overlay.open #craft-pick-header h3,
html.tg-fullscreen #clan-screen.open .cs-header-main,
html.tg-fullscreen #referral-hub-overlay.open .ref-overlay-header > div,
html.tg-fullscreen #underground-season-overlay.open .ref-overlay-header > div,
html.tg-fullscreen #chat-history-overlay.open .chc-header span,
html.tg-fullscreen #game-hub-overlay.open .game-hub-title,
html.tg-fullscreen #admin-player-modal.open .apm-header h2,
html.tg-fullscreen #admin-reports-modal.open .apm-header h2,
html.tg-fullscreen #admin-pin-locks-modal.open .apm-header h2,
html.tg-fullscreen .ot-panel.open .ot-panel-title,
html.tg-fullscreen .ot-panel-overlay.open .ot-panel-title,
body.tg-panel-open #leaderboard-header h3,
body.tg-panel-open #settings-header h3,
body.tg-panel-open #shop-header h2,
body.tg-panel-open #market-header h2,
body.tg-panel-open #market-list-header h2,
body.tg-panel-open #market-list-header h3,
body.tg-panel-open #craft-header h2,
body.tg-panel-open #craft-pick-header h3,
body.tg-panel-open #clan-screen .cs-header-main,
body.tg-panel-open #referral-hub-overlay .ref-overlay-header > div,
body.tg-panel-open #underground-season-overlay .ref-overlay-header > div,
body.tg-panel-open #chat-history-overlay .chc-header span,
body.tg-panel-open #game-hub-overlay .game-hub-title,
body.tg-panel-open #admin-player-modal .apm-header h2,
body.tg-panel-open #admin-reports-modal .apm-header h2,
body.tg-panel-open #admin-pin-locks-modal .apm-header h2,
body.tg-panel-open .ot-panel-title {
  min-width: 0;
  flex: 1 1 auto !important;
}

html.tg-fullscreen #shop-modal.open #shop-header-balances,
body.tg-panel-open #shop-header-balances {
  margin-left: 0 !important;
}

html.tg-fullscreen #clan-screen.open .cs-tabs,
body.tg-panel-open #clan-screen .cs-tabs {
  top: calc(48px + var(--ot-panel-safe-top)) !important;
}

html.tg-fullscreen #monument-raids-overlay.open #monument-raids-card,
body.tg-panel-open #monument-raids-card {
  max-height: calc(var(--ot-viewport-height, 100dvh) - var(--ot-panel-safe-top) - 12px) !important;
}

body.tg-panel-open #chat-history-overlay.open,
body.tg-panel-open #game-hub-overlay.open,
body.tg-panel-open #monument-raids-overlay.open {
  align-items: stretch !important;
  justify-content: center !important;
  padding: 0 !important;
}

body.tg-panel-open #chat-history-card,
body.tg-panel-open #game-hub-sheet,
body.tg-panel-open #monument-raids-card {
  width: 100% !important;
  max-width: none !important;
  height: var(--ot-viewport-height, 100dvh) !important;
  max-height: var(--ot-viewport-height, 100dvh) !important;
  border-radius: 0 !important;
  transform: translate3d(0, 0, 0) !important;
  display: flex !important;
  flex-direction: column !important;
}

body.tg-panel-open #game-hub-sheet,
body.tg-panel-open #monument-raids-card {
  padding: 0 !important;
}

body.tg-panel-open #monument-raids-overlay .mr-subtitle {
  flex-shrink: 0;
  margin: 0 16px 10px;
}

@media (prefers-reduced-motion: reduce) {
  .ot-panel,
  .ot-panel-overlay,
  .ot-panel-overlay .ot-panel {
    transform: translate3d(0, 0, 0);
    transition: opacity var(--ot-panel-motion-reduced-duration) linear;
    will-change: opacity;
  }

  .ot-panel.open,
  .ot-panel-overlay.open,
  .ot-panel-overlay.open .ot-panel,
  .ot-panel.is-closing,
  .ot-panel-overlay.is-closing,
  .ot-panel-overlay.is-closing .ot-panel {
    transform: translate3d(0, 0, 0);
  }

  #btn-close-settings,
  .ot-panel-close {
    transition:
      transform var(--ot-panel-motion-reduced-duration) linear,
      background var(--ot-panel-motion-reduced-duration) linear,
      color var(--ot-panel-motion-reduced-duration) linear !important;
  }

  #btn-close-settings:active,
  .ot-panel-close:active {
    transform: none;
  }
}