/* Toy tablet layout. This file is scoped to the Bilibili build so the
   standalone server UI keeps its established desktop and phone rules. */
@media (min-width: 700px) and (max-width: 1100px) {
  .toy-ranked-only #lobby {
    padding: max(18px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  }

  .toy-ranked-only #lobby:not(.boss-material-selection) .lobby-header {
    flex-basis: 68px !important;
    height: 68px !important;
    min-height: 68px !important;
    grid-template-columns: 52px minmax(0, 1fr) 164px !important;
    column-gap: 12px !important;
    padding: 10px 4px !important;
  }

  .toy-ranked-only #lobby:not(.boss-material-selection) .lobby-header > #lobby-back {
    width: 46px !important;
    height: 46px !important;
  }

  .toy-ranked-only #lobby:not(.boss-material-selection) .lobby-header h2 { font-size: 24px !important; }
  .toy-ranked-only #lobby:not(.boss-material-selection) .header-leaderboard-button {
    top: 14px !important;
    width: 116px !important;
    min-width: 116px !important;
    height: 44px !important;
  }

  .toy-ranked-only #lobby:not(.boss-material-selection) .lobby-wallet {
    grid-template-columns: 98px 58px !important;
    width: 164px !important;
    min-width: 164px !important;
    height: 44px !important;
    min-height: 44px !important;
    gap: 8px !important;
  }

  .toy-ranked-only #lobby:not(.boss-material-selection) .lobby-wallet .lobby-currency-coins,
  .toy-ranked-only #lobby:not(.boss-material-selection) .lobby-wallet .lobby-currency-lives {
    height: 44px !important;
    min-height: 44px !important;
  }

  .toy-ranked-only #lobby:not(.boss-material-selection) .lobby-tabs {
    flex-basis: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    gap: 8px !important;
    padding: 8px 2px !important;
  }

  .toy-ranked-only #lobby:not(.boss-material-selection) .lobby-tabs > button[data-shop-tab] {
    min-height: 40px !important;
    padding-inline: 14px !important;
    font-size: 13px !important;
  }

  .toy-ranked-only #lobby:not(.boss-material-selection) .lobby-character-view {
    grid-template-columns: 156px minmax(0, 1fr) 78px !important;
    grid-template-rows: minmax(350px, 1fr) auto 112px !important;
    column-gap: 16px !important;
  }

  .toy-ranked-only #lobby:not(.boss-material-selection) .lobby-map-select {
    gap: 12px !important;
    padding: 14px 0 !important;
  }

  .toy-ranked-only #lobby:not(.boss-material-selection) .lobby-map-select button {
    min-height: 52px !important;
    padding-inline: 12px !important;
    font-size: 13px !important;
  }

  .toy-ranked-only #lobby:not(.boss-material-selection) .lobby-guide-entry { min-height: 64px !important; }

  .toy-ranked-only #lobby:not(.boss-material-selection) .character-list.character-wheel {
    height: min(50dvh, 500px) !important;
    min-height: 350px !important;
    max-height: 500px !important;
    padding-inline: 10px !important;
  }

  .toy-ranked-only #lobby:not(.boss-material-selection) .character-list.character-wheel .character-option {
    width: clamp(174px, 24vw, 260px) !important;
    height: 96% !important;
  }

  .toy-ranked-only #lobby:not(.boss-material-selection) .character-list.character-wheel .character-platform {
    width: 80% !important;
    height: 16px !important;
  }

  .toy-ranked-only #lobby:not(.boss-material-selection) .character-list.character-wheel .character-option-label strong { font-size: 17px !important; }
  .toy-ranked-only #lobby:not(.boss-material-selection) .character-list.character-wheel .character-option-label small { font-size: 11px !important; }

  .toy-ranked-only #lobby:not(.boss-material-selection) .character-summary {
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) !important;
    gap: 28px !important;
    min-height: 100px !important;
    padding: 14px 24px !important;
  }

  .toy-ranked-only #lobby:not(.boss-material-selection) .character-identity h1 { font-size: 38px !important; }
  .toy-ranked-only #lobby:not(.boss-material-selection) .character-skill-summary h3 { font-size: 20px !important; }
  .toy-ranked-only #lobby:not(.boss-material-selection) .character-skill-summary p { font-size: 13px !important; line-height: 1.55 !important; }

  .toy-ranked-only #lobby:not(.boss-material-selection) .lobby-footer {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: 1fr !important;
    gap: 12px !important;
    min-height: 112px !important;
    padding: 14px 0 !important;
  }

  .toy-ranked-only #lobby:not(.boss-material-selection) .lobby-footer > button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;
    padding-inline: 10px !important;
  }

  .toy-ranked-only #lobby:not(.boss-material-selection) #lobby-multiplayer span,
  .toy-ranked-only #lobby:not(.boss-material-selection) #toy-coin-reward span { font-size: 15px !important; }
  .toy-ranked-only #lobby:not(.boss-material-selection) #toy-coin-reward small { font-size: 10px !important; }
  .toy-ranked-only #lobby:not(.boss-material-selection) #lobby-start { font-size: 18px !important; }

  /* Boss-material mode has no summary row, but should retain the same larger
     touch targets and a usable map column on tablets. */
  .toy-ranked-only #lobby.boss-material-selection .lobby-character-view {
    grid-template-columns: 156px minmax(0, 1fr) !important;
    grid-template-rows: minmax(350px, 1fr) 104px !important;
    column-gap: 16px !important;
  }

  .toy-ranked-only #lobby.boss-material-selection #lobby-map-select {
    min-width: 156px !important;
    gap: 12px !important;
    padding: 14px 0 !important;
  }

  .toy-ranked-only #lobby.boss-material-selection #lobby-map-select button { min-height: 52px !important; font-size: 13px !important; }
  .toy-ranked-only #lobby.boss-material-selection .character-list.character-wheel {
    height: min(58dvh, 540px) !important;
    min-height: 350px !important;
    max-height: 540px !important;
  }

  .toy-ranked-only #lobby.boss-material-selection .character-list.character-wheel .character-option {
    width: clamp(174px, 24vw, 260px) !important;
    height: 96% !important;
  }

  .toy-ranked-only #lobby.boss-material-selection .lobby-footer {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;
    min-height: 104px !important;
    padding: 14px 0 !important;
  }

  .toy-ranked-only #lobby.boss-material-selection #lobby-start { width: min(320px, 100%) !important; min-height: 58px !important; }

  /* Battle HUD: use the extra tablet space without changing the fixed
     movement-stick radius used by game.js. */
  .toy-ranked-only #hud .health-panel {
    left: max(24px, env(safe-area-inset-left)) !important;
    bottom: max(26px, env(safe-area-inset-bottom)) !important;
    width: clamp(320px, 34vw, 430px) !important;
    padding: 14px 16px 12px !important;
  }

  .toy-ranked-only #hud .health-heading strong { font-size: 19px !important; }
  .toy-ranked-only #hud .health-track { height: 13px !important; }
  .toy-ranked-only #hud #timer { min-width: 104px !important; padding: 9px 14px !important; font-size: 20px !important; }
  .toy-ranked-only #hud #exploration-timer { top: max(78px, calc(env(safe-area-inset-top) + 78px)) !important; width: min(440px, calc(100vw - 48px)) !important; padding: 9px 12px !important; }
  .toy-ranked-only #hud #boss-panel { top: max(138px, calc(env(safe-area-inset-top) + 138px)) !important; width: min(480px, calc(100vw - 48px)) !important; }
  .toy-ranked-only #event-banner { top: max(136px, calc(env(safe-area-inset-top) + 136px)) !important; max-width: min(680px, calc(100vw - 64px)) !important; }

  .toy-ranked-only .signature-controls {
    right: max(30px, env(safe-area-inset-right)) !important;
    bottom: max(30px, env(safe-area-inset-bottom)) !important;
    grid-template-columns: 108px !important;
    gap: 9px !important;
  }

  .toy-ranked-only .signature-skill { width: 102px !important; height: 102px !important; }
  .toy-ranked-only .signature-skill > span:first-child { font-size: 28px !important; }
  .toy-ranked-only .signature-skill strong { font-size: 11px !important; }
  .toy-ranked-only .signature-mode { min-height: 34px !important; font-size: 11px !important; }

  .toy-ranked-only #level-up { padding: max(30px, env(safe-area-inset-top)) 28px max(30px, env(safe-area-inset-bottom)) !important; }
  .toy-ranked-only #level-up .choice-panel { max-width: 960px !important; max-height: calc(100vh - 60px) !important; }
  .toy-ranked-only #level-up .upgrade-option { min-height: 210px !important; padding: 20px 18px 18px !important; }
}

@media (min-width: 700px) and (max-width: 1100px) and (orientation: portrait) {
  .toy-ranked-only #lobby:not(.boss-material-selection) .lobby-character-view {
    grid-template-columns: 138px minmax(0, 1fr) 70px !important;
    column-gap: 10px !important;
  }

  .toy-ranked-only #lobby:not(.boss-material-selection) .lobby-map-select { padding-inline: 2px !important; }
  .toy-ranked-only #lobby:not(.boss-material-selection) .character-summary { grid-template-columns: 170px minmax(0, 1fr) !important; gap: 18px !important; padding-inline: 16px !important; }
  .toy-ranked-only #lobby:not(.boss-material-selection) .character-identity h1 { font-size: 32px !important; }
  .toy-ranked-only #lobby:not(.boss-material-selection) .character-skill-summary p { font-size: 12px !important; }

  .toy-ranked-only #lobby.boss-material-selection .lobby-character-view { grid-template-columns: 138px minmax(0, 1fr) !important; column-gap: 10px !important; }
  .toy-ranked-only #lobby.boss-material-selection #lobby-map-select { min-width: 138px !important; }
}

@media (min-width: 700px) and (max-width: 1100px) and (orientation: landscape) {
  .toy-ranked-only #lobby:not(.boss-material-selection) .character-list.character-wheel { height: min(58dvh, 430px) !important; min-height: 300px !important; }
  .toy-ranked-only #lobby:not(.boss-material-selection) .lobby-character-view { grid-template-rows: minmax(300px, 1fr) auto 104px !important; }
  .toy-ranked-only #lobby:not(.boss-material-selection) .lobby-footer { min-height: 104px !important; padding-block: 10px !important; }
  .toy-ranked-only #lobby.boss-material-selection .character-list.character-wheel { height: min(62dvh, 450px) !important; min-height: 300px !important; }
  .toy-ranked-only #lobby.boss-material-selection .lobby-character-view { grid-template-rows: minmax(300px, 1fr) 92px !important; }
  .toy-ranked-only #lobby.boss-material-selection .lobby-footer { min-height: 92px !important; padding-block: 10px !important; }
}

/* v180: rank map/source controls use the same light treatment as the period row. */
.toy-ranked-only #lobby .leaderboard-source-modes {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important;
  gap: 6px !important;
  width: min(520px, calc(100% - 28px)) !important;
  margin: 0 auto 8px !important;
  padding: 0 !important;
}
.toy-ranked-only #lobby .leaderboard-source-modes button,
.toy-ranked-only #lobby .leaderboard-refresh {
  min-height: 34px !important;
  border: 1px solid #7a9f96 !important;
  border-radius: 5px !important;
  color: #315752 !important;
  background: #edf7f3 !important;
  box-shadow: none !important;
  font: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}
.toy-ranked-only #lobby .leaderboard-source-modes button.active {
  border-color: #b7832b !important;
  color: #6b4a16 !important;
  background: #f8d866 !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .65) !important;
}
.toy-ranked-only #lobby .leaderboard-refresh {
  display: grid !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  place-items: center;
  font-size: 20px !important;
  line-height: 1 !important;
}
.toy-ranked-only #lobby .leaderboard-refresh:hover:not(:disabled) {
  border-color: #4e8276 !important;
  color: #173f39 !important;
  background: #d9eee7 !important;
}
@media (max-width: 640px) {
  .toy-ranked-only #lobby .leaderboard-source-modes { width: calc(100% - 20px) !important; }
}