/*
Tuin Face Pong
File: css/07-tablet.css

Tablet / iPad bridge layout.
Load this AFTER css/06-mobile.css.

Rules:
- Phones keep css/06-mobile.css.
- Desktop keeps the desktop layout.
- Tablet/iPad uses this bridge layout.

This file is valid CSS only. No selector is mixed with @media.
*/

/* =========================================================
   1. JS class target: html.tuin-tablet
   This is the most reliable route after js/00-state.js runs.
========================================================= */

html.tuin-tablet,
html.tuin-tablet body {
  width: 100% !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  background: #343434 !important;
}

html.tuin-tablet body {
  margin: 0 !important;
  display: block !important;
}

html.tuin-tablet #gameWrap {
  width: min(100vw, 980px) !important;
  max-width: 980px !important;
  min-height: 100dvh !important;
  margin: 0 auto !important;
  padding: 14px 16px 30px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

html.tuin-tablet #hud {
  top: 16px !important;
  left: 16px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  max-width: 310px !important;
  z-index: 25 !important;
}

html.tuin-tablet #topbar {
  top: 16px !important;
  right: 16px !important;
  z-index: 25 !important;
}

html.tuin-tablet #pauseBtn {
  min-width: 100px !important;
  min-height: 48px !important;
  border-radius: 16px !important;
  font-size: 15px !important;
}

html.tuin-tablet #game {
  display: block !important;
  width: min(92vw, 900px) !important;
  height: auto !important;
  max-height: 56dvh !important;
  margin: 142px auto 0 !important;
}

html.tuin-tablet #statusDock {
  width: min(88vw, 820px) !important;
  margin: 10px auto 0 !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

html.tuin-tablet .statusPill,
html.tuin-tablet .powerPill,
html.tuin-tablet .activePowerPill {
  min-width: 150px !important;
  max-width: 250px !important;
}

/* Tablet sidekick: top-center helper above the playfield.
   Right-dock overlaps the arena on iPad landscape, so keep it in the safe top area. */
html.tuin-tablet #sidekickTipBox {
  top: 78px !important;
  left: 50% !important;
  right: auto !important;
  width: 390px !important;
  max-width: 76vw !important;
  transform: translateX(-50%) !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

html.tuin-tablet #sidekickTipBox.active {
  transform: translateX(-50%) !important;
}

html.tuin-tablet #sidekickPortraitFrame {
  width: 74px !important;
  height: 74px !important;
  flex: 0 0 74px !important;
  margin: 0 !important;
}

html.tuin-tablet #sidekickPortrait {
  width: 62px !important;
  height: 62px !important;
  margin: auto !important;
  transform: none !important;
}

html.tuin-tablet #sidekickSpeechBox {
  width: 250px !important;
  max-width: 250px !important;
  min-height: 74px !important;
  margin: 0 !important;
  padding: 13px 14px !important;
}

html.tuin-tablet #sidekickSpeechBox::before {
  display: none !important;
}

/* Hide the old red floating AUTO ON button on tablet.
   Tablet uses mobile/tablet auto-fire logic from JS. */
html.tuin-tablet #fireBtn,
html.tuin-tablet #autoFireButton,
html.tuin-tablet #mobileAutoFireButton,
html.tuin-tablet .autoFireButton,
html.tuin-tablet #mobileAutoButton,
html.tuin-tablet .mobileAutoButton,
html.tuin-tablet button[id*="auto" i],
html.tuin-tablet button[class*="auto" i] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Compact desktop control rows if they appear on tablet. */
html.tuin-tablet #topControls,
html.tuin-tablet #desktopControls,
html.tuin-tablet #menuButtons,
html.tuin-tablet #mainMenuButtons,
html.tuin-tablet #gameButtons,
html.tuin-tablet #buttonBar,
html.tuin-tablet .topControls,
html.tuin-tablet .desktopControls,
html.tuin-tablet .menuButtons,
html.tuin-tablet .gameButtons,
html.tuin-tablet .buttonBar {
  width: min(94vw, 940px) !important;
  margin: 0 auto 10px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
}

html.tuin-tablet #topControls button,
html.tuin-tablet #desktopControls button,
html.tuin-tablet #menuButtons button,
html.tuin-tablet #mainMenuButtons button,
html.tuin-tablet #gameButtons button,
html.tuin-tablet #buttonBar button,
html.tuin-tablet .topControls button,
html.tuin-tablet .desktopControls button,
html.tuin-tablet .menuButtons button,
html.tuin-tablet .gameButtons button,
html.tuin-tablet .buttonBar button {
  min-height: 38px !important;
  padding: 9px 13px !important;
  font-size: 13px !important;
  border-radius: 10px !important;
}

/* Tablet panels */
html.tuin-tablet #selectPanel,
html.tuin-tablet #shopPanel,
html.tuin-tablet #patchNotesPanel,
html.tuin-tablet #helpPanel,
html.tuin-tablet #prestigePanel,
html.tuin-tablet #missionsPanel,
html.tuin-tablet #relicsPanel,
html.tuin-tablet #challengesPanel,
html.tuin-tablet #codexPanel,
html.tuin-tablet #skinInspectPanel,
html.tuin-tablet #difficultySelectPanel,
html.tuin-tablet #nicknamePromptPanel,
html.tuin-tablet #runSummaryPanel,
html.tuin-tablet #backupPanel,
html.tuin-tablet #restorePanel,
html.tuin-tablet #redeemPanel,
html.tuin-tablet #leaderboardPanel,
html.tuin-tablet #dailyGiftPanel,
html.tuin-tablet #trophyRoomPanel {
  width: min(92vw, 860px) !important;
  max-width: min(92vw, 860px) !important;
  max-height: 90dvh !important;
  margin: 0 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* Tablet Market */
html.tuin-tablet #marketTabs {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

html.tuin-tablet .marketPageHeader {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 14px !important;
  align-items: center !important;
}

html.tuin-tablet #shopOverlay #headGrid,
html.tuin-tablet #shopOverlay #shopGrid,
html.tuin-tablet #shopOverlay #secretHeadGrid,
html.tuin-tablet #shopOverlay #presentHeadGrid,
html.tuin-tablet #shopOverlay #specialHeadGrid,
html.tuin-tablet #shopOverlay #paddleGrid,
html.tuin-tablet #shopOverlay #backgroundGrid,
html.tuin-tablet #shopOverlay #mobileBackgroundGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

html.tuin-tablet #prestigeGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

/* Portrait tablet uses the same top helper layout. */
@media (orientation: portrait) {
  html.tuin-tablet #sidekickTipBox {
    left: 50% !important;
    right: auto !important;
    top: 78px !important;
    width: 390px !important;
    max-width: 76vw !important;
    transform: translateX(-50%) !important;
  }

  html.tuin-tablet #sidekickTipBox.active {
    transform: translateX(-50%) !important;
  }

  html.tuin-tablet #game {
    margin-top: 160px !important;
  }
}

/* =========================================================
   2. Broad tablet fallback without JS class
   This helps if the class is delayed or not applied.
========================================================= */

@media (min-width: 701px) and (max-width: 1400px) and (min-height: 520px) {
  body {
    margin: 0 !important;
    overflow-x: hidden !important;
    background: #343434 !important;
  }

  #gameWrap {
    width: min(100vw, 980px) !important;
    max-width: 980px !important;
    min-height: 100dvh !important;
    margin: 0 auto !important;
    padding: 14px 16px 30px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  #hud {
    top: 16px !important;
    left: 16px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    max-width: 310px !important;
    z-index: 25 !important;
  }

  #topbar {
    top: 16px !important;
    right: 16px !important;
    z-index: 25 !important;
  }

  #pauseBtn {
    min-width: 100px !important;
    min-height: 48px !important;
    border-radius: 16px !important;
    font-size: 15px !important;
  }

  #game {
    display: block !important;
    width: min(92vw, 900px) !important;
    height: auto !important;
    max-height: 56dvh !important;
    margin: 142px auto 0 !important;
  }

  #statusDock {
    width: min(88vw, 820px) !important;
    margin: 10px auto 0 !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  #fireBtn,
    #autoFireButton,
  #mobileAutoFireButton,
  .autoFireButton,
  #mobileAutoButton,
  .mobileAutoButton,
  button[id*="auto" i],
  button[class*="auto" i] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* =========================================================
   3. iPad Safari fallback
========================================================= */

@supports (-webkit-touch-callout: none) {
  @media (min-width: 701px) and (max-width: 1400px) {
    #gameWrap {
      width: min(100vw, 980px) !important;
      max-width: 980px !important;
      margin: 0 auto !important;
      padding: 14px 16px 30px !important;
      box-sizing: border-box !important;
      overflow-x: hidden !important;
    }

    #game {
      display: block !important;
      width: min(92vw, 900px) !important;
      height: auto !important;
      max-height: 56dvh !important;
      margin: 128px auto 0 !important;
    }

    #fireBtn,
  #autoFireButton,
    #mobileAutoFireButton,
    .autoFireButton,
    #mobileAutoButton,
    .mobileAutoButton,
    button[id*="auto" i],
    button[class*="auto" i] {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }
  }
}