/* Tomato Battle — phones/tablets: full map + edge drawers (same scheme as index map).
   html.tb-mobile-shell is set by tomato.js; desktop browser layout unchanged. */

html.tb-mobile-shell {
  height: 100%;
  overflow: hidden;
}

html.tb-mobile-shell body {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

html.tb-mobile-shell .tb-root {
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  --tb-top-h: 72px;
}

html.tb-mobile-shell .tb-top {
  height: var(--tb-top-h) !important;
  min-height: var(--tb-top-h) !important;
  padding: 6px 10px !important;
  flex-shrink: 0;
}

html.tb-mobile-shell .tb-main {
  grid-template-columns: minmax(0, 1fr) 0 !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
}

html.tb-mobile-shell .tb-map-wrap {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

/* Left drawer: live stack (event, combo, viral, chat) */
html.tb-mobile-shell .tb-left-stack {
  position: fixed !important;
  left: 0 !important;
  top: var(--tb-top-h) !important;
  bottom: 0 !important;
  width: min(88vw, 300px) !important;
  z-index: 120 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding:
    6px
    max(6px, env(safe-area-inset-right, 0px))
    max(6px, env(safe-area-inset-bottom, 0px))
    max(6px, env(safe-area-inset-left, 0px)) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, rgba(18, 2, 8, 0.97), rgba(8, 0, 2, 0.98)) !important;
  border-right: 1px solid rgba(255, 140, 140, 0.28) !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.45) !important;
  transition: transform 0.22s ease, opacity 0.18s ease !important;
  transform: translateX(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

html.tb-mobile-shell.tb-left-drawer-collapsed .tb-left-stack {
  transform: translateX(-110%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html.tb-mobile-shell .tb-left-stack .tb-event-drop,
html.tb-mobile-shell .tb-left-stack .tb-combo-hud {
  flex-shrink: 0;
}

html.tb-mobile-shell .tb-left-stack .tb-live-left {
  flex: 0 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

html.tb-mobile-shell .tb-left-stack .tb-live-chat {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

html.tb-mobile-shell .tb-left-stack .tb-live-chat-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

/* Right ranking drawer */
html.tb-mobile-shell.tb-drawer-mode .tb-side-backdrop {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 115 !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: rgba(0, 0, 0, 0.45) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

html.tb-mobile-shell.tb-drawer-mode.tb-side-collapsed .tb-side-backdrop {
  opacity: 0 !important;
  pointer-events: none !important;
}

html.tb-mobile-shell.tb-drawer-mode .tb-side {
  position: fixed !important;
  top: var(--tb-top-h) !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: min(88vw, 300px) !important;
  min-width: 0 !important;
  max-width: min(88vw, 300px) !important;
  height: auto !important;
  max-height: none !important;
  z-index: 118 !important;
  display: grid !important;
  gap: 6px !important;
  align-content: start !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  padding:
    6px
    max(6px, env(safe-area-inset-right, 0px))
    max(6px, env(safe-area-inset-bottom, 0px))
    6px !important;
  border-left: 1px solid rgba(255, 140, 140, 0.28) !important;
  box-shadow: -14px 0 28px rgba(0, 0, 0, 0.42) !important;
  transform: translateX(0) !important;
  transition: transform 0.24s ease, box-shadow 0.24s ease !important;
}

html.tb-mobile-shell.tb-drawer-mode.tb-side-collapsed .tb-side {
  transform: translateX(110%) !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

html.tb-mobile-shell.tb-drawer-mode.tb-side-collapsed .tb-side > :not(.tb-side-handle) {
  opacity: 1 !important;
  pointer-events: none !important;
}

html.tb-mobile-shell.tb-drawer-mode .tb-side-handle {
  display: inline-flex !important;
}

html.tb-mobile-shell .tb-btn-panel {
  display: inline-flex !important;
}

/* Map overlays: declutter when drawers own the side columns */
html.tb-mobile-shell .tb-hero {
  display: none !important;
}

html.tb-mobile-shell .tb-focus {
  position: absolute !important;
  left: max(8px, env(safe-area-inset-left, 0px)) !important;
  right: max(8px, env(safe-area-inset-right, 0px)) !important;
  width: auto !important;
  top: auto !important;
  bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
  max-height: min(52dvh, calc(100% - 48px)) !important;
  overflow-y: auto !important;
}

html.tb-mobile-shell .tb-map-hud {
  top: 8px !important;
  width: min(240px, calc(100% - 24px)) !important;
}

html.tb-mobile-shell .tb-search {
  top: 8px !important;
}

html.tb-mobile-shell .tb-my-battle {
  display: none !important;
}

.tb-left-panel-handle {
  position: fixed;
  left: 0;
  top: calc(var(--tb-top-h, 72px) + 42%);
  z-index: 130;
  width: 24px;
  height: 56px;
  border: 1px solid rgba(255, 140, 140, 0.38);
  border-left: none;
  border-radius: 0 10px 10px 0;
  background: rgba(18, 2, 8, 0.94);
  color: rgba(255, 220, 220, 0.92);
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
}

.tb-left-panel-handle[hidden] {
  display: none !important;
}

.tb-left-panel-handle-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 120, 120, 0.9);
  box-shadow: 0 0 8px rgba(255, 90, 90, 0.45);
}

html:not(.tb-mobile-shell) .tb-left-panel-handle {
  display: none !important;
}

/* Landscape wide phones: taller drawers use full height below header */
@media (orientation: landscape) and (max-height: 600px) {
  html.tb-mobile-shell {
    --tb-top-h: 52px;
  }

  html.tb-mobile-shell .tb-top {
    padding: 4px 8px !important;
  }

  html.tb-mobile-shell .tb-brand-img {
    width: auto !important;
    height: 52px !important;
    max-width: 68px !important;
    object-fit: contain !important;
  }

  html.tb-mobile-shell .tb-left-stack,
  html.tb-mobile-shell.tb-drawer-mode .tb-side {
    width: min(50vw, 360px) !important;
    max-width: min(50vw, 360px) !important;
  }

  html.tb-mobile-shell .tb-focus {
    max-height: min(68dvh, calc(100% - 24px)) !important;
  }
}