/* Bilibili Toy keeps the multiplayer entry visible; the room client handles
   the public WSS endpoint and opens the room overlay in-place. Toy-only social
   surfaces remain hidden below. */
.toy-ranked-only #lobby-hall-chat,
.toy-ranked-only #lobby-friends,
.toy-ranked-only #social-drawer { display: none !important; }
.toy-ranked-only #lobby .lobby-wallet,
.toy-ranked-only #lobby .lobby-player-identity { display: none !important; }
.toy-ranked-only #lobby .lobby-header { grid-template-columns: 38px minmax(0, 1fr) auto auto !important; }
.toy-ranked-only #toy-coin-reward { display: grid; gap: 2px; background: #f1b640; color: #17333a; border-color: #9d7426; }
.toy-ranked-only #toy-coin-reward small { font-size: 11px; opacity: .82; }
.toy-ranked-only #toy-coin-reward.is-unlocked { background: #63c568; border-color: #2f7d45; }
.toy-ranked-only #lobby:not(.boss-material-selection) .lobby-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.toy-ranked-only #lobby:not(.boss-material-selection) .lobby-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Toy lobby layout: keep the reward card and both primary actions in a
   predictable footer instead of allowing a two-column overflow on phones. */
.toy-ranked-only #lobby:not(.boss-material-selection) .lobby-footer {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(48px, auto) !important;
  align-items: stretch !important;
  gap: 8px !important;
  min-height: 64px !important;
  height: auto !important;
  overflow: visible !important;
}
.toy-ranked-only #lobby:not(.boss-material-selection) .lobby-footer > button {
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
}
@media (max-width: 760px) {
  .toy-ranked-only #lobby:not(.boss-material-selection) .lobby-footer {
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(3, minmax(46px, auto)) !important;
    min-height: 154px !important;
    gap: 6px !important;
  }
  .toy-ranked-only #lobby:not(.boss-material-selection) .lobby-footer #lobby-multiplayer { order: 1; }
  .toy-ranked-only #lobby:not(.boss-material-selection) .lobby-footer #lobby-start { order: 2; }
  .toy-ranked-only #lobby:not(.boss-material-selection) .lobby-footer #toy-coin-reward { order: 3; }
}

/* v125 final mobile header alignment: ranking and wallet share one baseline. */
.toy-ranked-only #lobby:not(.boss-material-selection) .lobby-header {
  position: relative !important;
  height: 50px !important;
  min-height: 50px !important;
  overflow: visible !important;
}
.toy-ranked-only #lobby:not(.boss-material-selection) .header-leaderboard-button {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
}
.toy-ranked-only #lobby:not(.boss-material-selection) .lobby-wallet {
  position: absolute !important;
  top: 50% !important;
  right: 3px !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
}

/* fix-v123-header: match wallet cards and ranking button height and prevent overflow. */
#lobby:not(.boss-material-selection) .lobby-header { position: relative !important; height: 50px !important; min-height: 50px !important; overflow: visible !important; }
.toy-ranked-only #lobby .lobby-header { display: grid !important; grid-template-columns: 38px minmax(0, 1fr) !important; }

/* fix-v126: regular server lobby keeps wallet, ranking and title on one mobile row. */
@media (max-width: 760px) {
  body:not(.toy-ranked-only) #lobby:not(.boss-material-selection) .lobby-header {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) auto auto !important;
    grid-template-rows: 1fr !important;
    height: 58px !important;
    min-height: 58px !important;
    flex: 0 0 58px !important;
    align-items: center !important;
  }

  body:not(.toy-ranked-only) #lobby:not(.boss-material-selection) .lobby-header > .lobby-wallet {
    grid-column: auto !important;
    grid-row: auto !important;
    position: static !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
  }

  body:not(.toy-ranked-only) #lobby:not(.boss-material-selection) .lobby-header > .header-leaderboard-button {
    position: static !important;
    transform: none !important;
    margin: 0 !important;
  }
}

/* v125: pin ranking and wallet to the same mobile header center line. */
.toy-ranked-only #lobby:not(.boss-material-selection) .lobby-header {
  position: relative !important;
  height: 50px !important;
  min-height: 50px !important;
  overflow: visible !important;
}
.toy-ranked-only #lobby:not(.boss-material-selection) .header-leaderboard-button {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
}
.toy-ranked-only #lobby:not(.boss-material-selection) .lobby-wallet {
  position: absolute !important;
  top: 50% !important;
  right: 3px !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
}
.toy-ranked-only #lobby .header-leaderboard-button,
.toy-ranked-only .leaderboards-open .header-leaderboard-button { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; width: 96px !important; min-width: 96px !important; height: 38px !important; margin: 0 !important; z-index: 4; }
.toy-ranked-only #lobby .lobby-wallet { position: absolute !important; top: 50% !important; right: 6px !important; transform: translateY(-50%) !important; display: flex !important; align-items: center !important; gap: 4px !important; width: auto !important; height: 38px !important; min-width: 0 !important; z-index: 5; }
.toy-ranked-only #lobby .lobby-wallet .lobby-currency { width: 46px !important; min-width: 46px !important; height: 36px !important; min-height: 36px !important; padding: 2px !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 2px !important; overflow: hidden !important; }
.toy-ranked-only #lobby .lobby-wallet .lobby-currency-diamonds { display: none !important; }
.toy-ranked-only #lobby .lobby-wallet .lobby-currency::after,
.toy-ranked-only #lobby .lobby-wallet .lobby-currency strong::before { content: none !important; display: none !important; }
.toy-ranked-only #lobby .lobby-wallet .lobby-currency strong { font-size: 13px !important; line-height: 1 !important; min-width: 0; }
@media (max-width: 760px) {
  .toy-ranked-only #lobby .header-leaderboard-button,
  .toy-ranked-only .leaderboards-open .header-leaderboard-button { width: 92px !important; min-width: 92px !important; height: 34px !important; }
  .toy-ranked-only #lobby .lobby-wallet { right: 3px !important; gap: 3px !important; }
  .toy-ranked-only #lobby .lobby-wallet .lobby-currency { width: 42px !important; min-width: 42px !important; height: 34px !important; min-height: 34px !important; }
}

/* fix-v122-tail: final header alignment override. */
#lobby:not(.boss-material-selection) .lobby-header { position: relative !important; height: 50px !important; min-height: 50px !important; overflow: visible !important; }
.toy-ranked-only #lobby .lobby-header { display: grid !important; grid-template-columns: 38px minmax(0, 1fr) !important; }
.toy-ranked-only #lobby .header-leaderboard-button,
.toy-ranked-only .leaderboards-open .header-leaderboard-button { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; width: 96px !important; min-width: 96px !important; height: 38px !important; margin: 0 !important; z-index: 4; }
.toy-ranked-only #lobby .lobby-wallet { position: absolute !important; top: 50% !important; right: 6px !important; transform: translateY(-50%) !important; display: flex !important; align-items: center !important; gap: 4px !important; width: auto !important; height: 38px !important; min-width: 0 !important; z-index: 5; }
.toy-ranked-only #lobby .lobby-wallet .lobby-currency { width: 46px !important; min-width: 46px !important; height: 36px !important; min-height: 36px !important; padding: 2px !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 2px !important; overflow: hidden !important; }
.toy-ranked-only #lobby .lobby-wallet .lobby-currency::after,
.toy-ranked-only #lobby .lobby-wallet .lobby-currency strong::before { content: none !important; display: none !important; }
.toy-ranked-only #lobby .lobby-wallet .lobby-currency strong { font-size: 13px !important; line-height: 1 !important; min-width: 0; }
@media (max-width: 760px) {
  .toy-ranked-only #lobby .header-leaderboard-button,
  .toy-ranked-only .leaderboards-open .header-leaderboard-button { width: 92px !important; min-width: 92px !important; height: 34px !important; }
  .toy-ranked-only #lobby .lobby-wallet { right: 3px !important; gap: 3px !important; }
  .toy-ranked-only #lobby .lobby-wallet .lobby-currency { width: 42px !important; min-width: 42px !important; height: 34px !important; min-height: 34px !important; }
}

/* fix-v122-final: resources stay aligned with the centered leaderboard. */
#lobby:not(.boss-material-selection) .lobby-header { position: relative !important; height: 50px !important; min-height: 50px !important; overflow: visible !important; }
.toy-ranked-only #lobby .lobby-header { display: grid !important; grid-template-columns: 38px minmax(0, 1fr) !important; }
.toy-ranked-only #lobby .header-leaderboard-button,
.toy-ranked-only .leaderboards-open .header-leaderboard-button { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; width: 96px !important; min-width: 96px !important; height: 38px !important; margin: 0 !important; z-index: 4; }
.toy-ranked-only #lobby .lobby-wallet { position: absolute !important; top: 50% !important; right: 6px !important; transform: translateY(-50%) !important; display: flex !important; align-items: center !important; gap: 4px !important; width: auto !important; height: 38px !important; min-width: 0 !important; z-index: 5; }
.toy-ranked-only #lobby .lobby-wallet .lobby-currency { width: 46px !important; min-width: 46px !important; height: 36px !important; min-height: 36px !important; padding: 2px !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 2px !important; overflow: hidden !important; }
.toy-ranked-only #lobby .lobby-wallet .lobby-currency::after,
.toy-ranked-only #lobby .lobby-wallet .lobby-currency strong::before { content: none !important; display: none !important; }
.toy-ranked-only #lobby .lobby-wallet .lobby-currency strong { font-size: 13px !important; line-height: 1 !important; min-width: 0; }
@media (max-width: 760px) {
  .toy-ranked-only #lobby .header-leaderboard-button,
  .toy-ranked-only .leaderboards-open .header-leaderboard-button { width: 92px !important; min-width: 92px !important; height: 34px !important; }
  .toy-ranked-only #lobby .lobby-wallet { right: 3px !important; gap: 3px !important; }
  .toy-ranked-only #lobby .lobby-wallet .lobby-currency { width: 42px !important; min-width: 42px !important; height: 34px !important; min-height: 34px !important; }
}

/* fix-v120-final: every character, including the four Maodie variants, shares
   one horizontal roster row like Dagoujiao. */
#lobby:not(.boss-material-selection) .character-list.character-roster {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 10px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  min-width: 0 !important;
  min-height: 220px !important;
  height: 230px !important;
  padding: 4px 4px 8px !important;
  scrollbar-width: thin;
}
#lobby:not(.boss-material-selection) .character-list.character-roster .character-option {
  flex: 0 0 164px !important;
  width: 164px !important;
  height: 218px !important;
  min-height: 218px !important;
  grid-template-rows: 160px 14px 38px !important;
}
#lobby:not(.boss-material-selection) .character-list.character-roster .character-portrait {
  height: 160px !important;
  min-height: 0 !important;
}
@media (max-width: 760px) {
  #lobby:not(.boss-material-selection) .character-list.character-roster {
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
  }
  #lobby:not(.boss-material-selection) .character-list.character-roster .character-option {
    flex-basis: 164px !important;
    width: 164px !important;
    height: 206px !important;
    min-height: 206px !important;
    grid-template-rows: 150px 12px 38px !important;
  }
  #lobby:not(.boss-material-selection) .character-list.character-roster .character-portrait { height: 150px !important; }
}

/* fix-v122: keep ranking and wallet badges on one centered header row. */
#lobby:not(.boss-material-selection) .lobby-header {
  position: relative !important;
  height: 50px !important;
  min-height: 50px !important;
  flex: 0 0 50px !important;
  overflow: visible !important;
}
.toy-ranked-only #lobby .lobby-header { display: grid !important; grid-template-columns: 38px minmax(0, 1fr) !important; }
.toy-ranked-only #lobby .header-leaderboard-button,
.toy-ranked-only .leaderboards-open .header-leaderboard-button {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 96px !important;
  min-width: 96px !important;
  height: 38px !important;
  margin: 0 !important;
  z-index: 4;
}
.toy-ranked-only #lobby .lobby-wallet {
  position: absolute !important;
  top: 50% !important;
  right: 6px !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: auto !important;
  height: 38px !important;
  min-width: 0 !important;
  z-index: 5;
}
.toy-ranked-only #lobby .lobby-wallet .lobby-currency {
  width: 46px !important;
  min-width: 46px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 2px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  overflow: hidden !important;
}
.toy-ranked-only #lobby .lobby-wallet .lobby-currency::after,
.toy-ranked-only #lobby .lobby-wallet .lobby-currency strong::before { content: none !important; display: none !important; }
.toy-ranked-only #lobby .lobby-wallet .lobby-currency strong { font-size: 13px !important; line-height: 1 !important; min-width: 0; }
@media (max-width: 760px) {
  .toy-ranked-only #lobby .header-leaderboard-button,
  .toy-ranked-only .leaderboards-open .header-leaderboard-button { width: 92px !important; min-width: 92px !important; height: 34px !important; }
  .toy-ranked-only #lobby .lobby-wallet { right: 3px !important; gap: 3px !important; }
  .toy-ranked-only #lobby .lobby-wallet .lobby-currency { width: 42px !important; min-width: 42px !important; height: 34px !important; min-height: 34px !important; }
}


/* fix-v120-final: final cascade for compact lobby chrome and matching HUD badges. */
#lobby:not(.boss-material-selection) .lobby-header {
  flex: 0 0 50px !important;
  height: 50px !important;
  min-height: 50px !important;
}
#lobby:not(.boss-material-selection) .lobby-tabs {
  flex: 0 0 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding-block: 3px !important;
}
#lobby:not(.boss-material-selection) .lobby-tabs button {
  min-height: 30px !important;
  padding-block: 0 !important;
}
#lobby:not(.boss-material-selection) .lobby-map-select {
  gap: 5px !important;
  padding-block: 2px !important;
}
#lobby:not(.boss-material-selection) .lobby-map-select button { min-height: 34px !important; }
#lobby .lobby-wallet .lobby-currency {
  display: grid !important;
  grid-template-columns: 18px auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 6px;
  min-width: 74px;
  min-height: 38px;
  padding: 5px 8px;
  border: 2px solid #29494d;
  border-radius: 7px;
  background: rgba(255, 250, 232, .92);
  color: #17333a;
  box-shadow: 0 3px 0 rgba(10,45,47,.55);
}
#lobby .lobby-wallet .lobby-currency > strong {
  grid-column: 2;
  grid-row: 1;
  margin: 0 !important;
  color: #17333a !important;
  font: 900 15px/1 ui-monospace, monospace !important;
}
#lobby .lobby-wallet .lobby-currency > strong::before { content: none !important; }
#lobby .lobby-wallet .lobby-currency::after {
  grid-column: 2;
  grid-row: 2;
  color: #5d726d;
  font: 700 8px/1.1 system-ui, sans-serif;
}
#lobby .lobby-wallet .lobby-currency-coins::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / 3;
  justify-self: center;
  width: 13px;
  height: 13px;
  border: 2px solid #efd06b;
  border-radius: 50%;
  background: #b4872c;
}
#lobby .lobby-wallet .lobby-currency-coins::after { content: "金币"; }
#lobby .lobby-wallet .lobby-currency-lives::before {
  content: "+";
  display: grid;
  place-items: center;
  grid-column: 1;
  grid-row: 1 / 3;
  justify-self: center;
  width: 15px;
  height: 15px;
  border: 1px solid #e1a19b;
  border-radius: 50%;
  color: #d55e59;
  font: 900 14px/1 system-ui, sans-serif;
}
#lobby .lobby-wallet .lobby-currency-lives::after { content: "命数"; }
#lobby .lobby-wallet .lobby-currency button { display: none !important; }

@media (max-width: 760px) {
  #lobby:not(.boss-material-selection) .lobby-header {
    flex-basis: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
  }
  #lobby:not(.boss-material-selection) .lobby-header button { width: 32px !important; height: 32px !important; }
  #lobby:not(.boss-material-selection) .lobby-tabs { flex-basis: 35px !important; height: 35px !important; min-height: 35px !important; }
  #lobby:not(.boss-material-selection) .lobby-map-select .lobby-guide-entry { min-height: 36px !important; padding-block: 4px !important; }
  #lobby .lobby-wallet { gap: 4px !important; }
  #lobby .lobby-wallet .lobby-currency { min-width: 64px; min-height: 32px; grid-template-columns: 15px auto; column-gap: 4px; padding: 3px 5px; }
  #lobby .lobby-wallet .lobby-currency > strong { font-size: 13px !important; }
}

/* fix-v120: keep the lobby chrome compact so the action row remains visible. */
#lobby:not(.boss-material-selection) .lobby-header {
  flex: 0 0 50px !important;
  height: 50px !important;
  min-height: 50px !important;
}
#lobby:not(.boss-material-selection) .lobby-tabs {
  flex: 0 0 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding-block: 3px !important;
}
#lobby:not(.boss-material-selection) .lobby-tabs button {
  min-height: 30px !important;
  padding-block: 0 !important;
}
#lobby:not(.boss-material-selection) .lobby-map-select {
  gap: 5px !important;
  padding-block: 2px !important;
}
#lobby:not(.boss-material-selection) .lobby-map-select button {
  min-height: 34px !important;
}

@media (max-width: 760px) {
  #lobby:not(.boss-material-selection) .lobby-header {
    flex-basis: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
  }
  #lobby:not(.boss-material-selection) .lobby-header button {
    width: 32px !important;
    height: 32px !important;
  }
  #lobby:not(.boss-material-selection) .lobby-tabs {
    flex-basis: 35px !important;
    height: 35px !important;
    min-height: 35px !important;
  }
  #lobby:not(.boss-material-selection) .lobby-map-select .lobby-guide-entry {
    min-height: 36px !important;
    padding-block: 4px !important;
  }
  #lobby:not(.boss-material-selection) .lobby-map-select > button:not(.lobby-guide-entry) {
    min-height: 34px !important;
  }
}

/* fix-v120: use the same coin/life badges in the lobby as in the combat HUD. */
#lobby .lobby-wallet .lobby-currency {
  display: grid !important;
  grid-template-columns: 18px auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 6px;
  min-width: 74px;
  min-height: 38px;
  padding: 5px 8px;
  border: 2px solid #29494d;
  border-radius: 7px;
  background: rgba(255, 250, 232, .92);
  color: #17333a;
  box-shadow: 0 3px 0 rgba(10,45,47,.55);
}
#lobby .lobby-wallet .lobby-currency > strong {
  grid-column: 2;
  grid-row: 1;
  margin: 0 !important;
  color: #17333a;
  font: 900 15px/1 ui-monospace, monospace;
}
#lobby .lobby-wallet .lobby-currency > strong::before { content: none !important; }
#lobby .lobby-wallet .lobby-currency::after {
  grid-column: 2;
  grid-row: 2;
  color: #5d726d;
  font: 700 8px/1.1 system-ui, sans-serif;
}
#lobby .lobby-wallet .lobby-currency-coins::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / 3;
  justify-self: center;
  width: 13px;
  height: 13px;
  border: 2px solid #efd06b;
  border-radius: 50%;
  background: #b4872c;
}
#lobby .lobby-wallet .lobby-currency-coins::after { content: "金币"; }
#lobby .lobby-wallet .lobby-currency-lives::before {
  content: "+";
  display: grid;
  place-items: center;
  grid-column: 1;
  grid-row: 1 / 3;
  justify-self: center;
  width: 15px;
  height: 15px;
  border: 1px solid #e1a19b;
  border-radius: 50%;
  color: #d55e59;
  font: 900 14px/1 system-ui, sans-serif;
}
#lobby .lobby-wallet .lobby-currency-lives::after { content: "命数"; }
#lobby .lobby-wallet .lobby-currency button { display: none !important; }

@media (max-width: 760px) {
  #lobby .lobby-wallet { gap: 4px !important; }
  #lobby .lobby-wallet .lobby-currency {
    min-width: 64px;
    min-height: 32px;
    grid-template-columns: 15px auto;
    column-gap: 4px;
    padding: 3px 5px;
  }
  #lobby .lobby-wallet .lobby-currency > strong { font-size: 13px; }
}

.toy-ranked-only .leaderboards-open .lobby-header {
  grid-template-columns: 38px minmax(0, 1fr) auto auto !important;
}

.toy-ranked-only .leaderboards-open .header-leaderboard-button {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  width: auto !important;
  min-width: 86px !important;
  height: 36px !important;
  padding: 0 12px !important;
}

.toy-ranked-only .leaderboard-shell {
  display: grid;
  grid-template-rows: auto auto auto auto;
  align-content: start;
  min-height: 100%;
}

/* The official board is a single, centered surface: the period row selects
   the time window and the row directly underneath switches the score type. */
.toy-ranked-only .leaderboard-heading {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
}
.toy-ranked-only .leaderboard-heading > div {
  grid-column: 2;
  text-align: center;
}
.toy-ranked-only .leaderboard-heading .leaderboard-refresh {
  grid-column: 3;
}

.leaderboard-period-modes {
  display: flex;
  gap: 6px;
  align-items: center;
}

.toy-ranked-only .leaderboard-period-modes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(520px, calc(100% - 28px));
  margin: 12px auto 8px;
  padding: 0;
}

.toy-ranked-only .leaderboard-period-modes button {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 4px 8px;
  border: 1px solid #7a9f96;
  border-radius: 5px;
  background: #edf7f3;
  box-shadow: none;
  color: #315752;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-shadow: none;
  cursor: pointer;
}

.toy-ranked-only .leaderboard-period-modes button.active {
  border-color: #b7832b;
  background: #f8d866;
  color: #6b4a16;
  box-shadow: inset 0 1px rgba(255,255,255,.65);
}

.toy-ranked-only .toy-leaderboard-note {
  margin: 0;
  padding: 0 16px 10px;
  color: #53716b;
  font-size: 12px;
  text-align: center;
}

.toy-ranked-only .leaderboard-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 12px;
  width: min(920px, 100%);
  margin: 0 auto;
  padding: 4px 14px 18px;
}

.toy-leaderboard-card { min-height: 220px; }
.toy-leaderboard-card h3 span { background: #f5d66e; color: #5a441b; }
.toy-leaderboard-card h3 strong { display: inline-flex; align-items: center; margin-right: 6px; padding: 2px 6px; border: 1px solid rgba(226,196,95,.44); border-radius: 4px; background: #332e1d; color: #fff1c9; font-size: 11px; font-weight: 800; }
.toy-leaderboard-card ol { min-height: 138px; }
.toy-leaderboard-card .rank-avatar {
  width: 22px;
  height: 22px;
  margin-right: 6px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
}
.toy-leaderboard-card .leaderboard-map-tag { color: #755820; border-color: rgba(183, 131, 43, .45); background: rgba(248, 216, 102, .22); }

/* Keep all ten rows available without letting the leaderboard push other lobby content away. */
.leaderboard-card ol {
  max-height: 320px;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-gutter: stable;
}

.toy-my-rank {
  margin: 10px 0 0;
  padding: 8px 10px;
  border: 1px solid rgba(211, 155, 56, .35);
  border-radius: 8px;
  background: rgba(255, 248, 222, .7);
  color: #644c24;
  font-size: 12px;
}

.toy-leaderboard-error { color: #a5574e; }

/* Toy ranking stays centered and uses a second, explicit page row for the
   two official scoreboards instead of showing both cards at once. */
.toy-ranked-only .leaderboard-board-pages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 180px));
  justify-content: center;
  gap: 7px;
  width: min(520px, calc(100% - 28px));
  margin: 2px auto 8px;
}
.toy-ranked-only .leaderboard-board-pages button {
  min-height: 32px;
  border: 1px solid #7a9f96;
  border-radius: 5px;
  background: #edf7f3;
  box-shadow: none;
  color: #315752;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-shadow: none;
}
.toy-ranked-only .leaderboard-board-pages button.active {
  border-color: #b7832b;
  background: #f8d866;
  color: #6b4a16;
}
.toy-ranked-only .leaderboard-grid { grid-template-columns: minmax(0, 560px); justify-content: center; }
.toy-ranked-only .toy-leaderboard-card { width: 100%; }

/* Keep the requested run economy visible in the upper-right HUD. */
#hud .run-economy {
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  left: auto;
  display: flex;
  flex-direction: row-reverse;
}
#hud .run-economy .run-gold { display: grid !important; }
#hud .run-economy .run-currency { min-width: 54px; }
#hud .run-economy .run-currency small { display: block; font-size: 8px; }

@media (max-width: 640px) {
  .toy-ranked-only #lobby { padding-inline: 8px; }
  .toy-ranked-only #lobby:not(.boss-material-selection) .lobby-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .toy-ranked-only .leaderboards-open .lobby-header {
    grid-template-columns: 34px minmax(0, 1fr) 82px;
    gap: 6px;
  }
  .toy-ranked-only .leaderboards-open .header-leaderboard-button {
    min-width: 82px !important;
    height: 32px !important;
    padding-inline: 7px !important;
    font-size: 10px !important;
  }
  .toy-ranked-only .leaderboard-heading { padding: 12px 14px 10px; }
  .toy-ranked-only .leaderboard-heading h2 { font-size: 19px; }
  .toy-ranked-only .leaderboard-refresh {
    width: 34px;
    height: 34px;
    min-height: 0;
    padding: 0;
    box-shadow: none;
  }
  .toy-ranked-only .leaderboard-period-modes {
    width: calc(100% - 20px);
    margin-top: 10px;
  }
  .toy-ranked-only .leaderboard-period-modes button {
    min-height: 32px;
    padding-inline: 4px;
    font-size: 12px;
  }
  .toy-ranked-only .leaderboard-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 2px 10px 14px;
  }
  .toy-ranked-only .leaderboard-board-pages {
    width: calc(100% - 20px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .toy-ranked-only .leaderboard-board-pages button { min-height: 30px; font-size: 12px; }
  .toy-ranked-only .toy-leaderboard-card {
    height: auto;
    min-height: 0;
    padding: 13px;
  }
  .toy-ranked-only .toy-leaderboard-card h3 { margin-bottom: 8px; font-size: 15px; }
  .toy-ranked-only .toy-leaderboard-card ol { min-height: 0; }
  .toy-ranked-only .toy-my-rank { margin-top: 8px; }
}

/* fix-v100: compact boss HUD and readable settlement sheet */
#boss-panel {
  top: max(58px, calc(env(safe-area-inset-top) + 58px));
  width: min(420px, calc(100vw - 96px));
  padding: 7px 10px;
  border: 1px solid rgba(255, 230, 184, .72);
  border-radius: 5px;
  background: rgba(28, 19, 17, .9);
  box-shadow: 0 3px 0 rgba(73, 34, 25, .72), 0 7px 18px rgba(0, 0, 0, .32);
  color: #fff4de;
  text-shadow: 0 1px 3px #000;
}

#boss-panel .boss-heading {
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  color: #fff4de;
  font-size: 11px;
  line-height: 1.2;
}

#boss-panel .boss-heading strong {
  overflow: hidden;
  color: #fff4de;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#boss-panel #boss-health-value {
  flex: 0 0 auto;
  color: #ffd58a;
  font: 800 10px/1 ui-monospace, monospace;
}

#boss-panel .boss-track {
  height: 8px;
  padding: 1px;
  border-color: rgba(255, 236, 202, .58);
  border-radius: 3px;
  background: #281713;
  box-shadow: none;
}

#boss-panel #boss-fill {
  border-radius: 2px;
  background: linear-gradient(90deg, #b93f3f, #ed8061);
}

#boss-panel .boss-appetite {
  grid-template-columns: auto minmax(52px, 1fr) auto;
  gap: 6px;
  margin-top: 4px;
  color: #eadac7;
  font-size: 9px;
  line-height: 1;
}

#boss-panel .boss-appetite > div {
  height: 3px;
  border-radius: 2px;
  overflow: hidden;
}

#boss-panel .boss-appetite b {
  min-width: 34px;
  color: #ffd58a;
}

#run-result {
  align-items: center;
  padding: max(14px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom));
  overflow-y: auto;
  background: rgba(7, 29, 31, .78);
}

#run-result .result-panel {
  width: min(440px, calc(100vw - 24px));
  max-height: calc(100dvh - 28px);
  margin: auto;
  padding: 22px;
  overflow-y: auto;
  border: 3px solid #34766d;
  border-radius: 7px;
  background: #f8f4df;
  box-shadow: inset 0 0 0 2px #fffdf3, 0 5px 0 #245b55, 0 18px 48px rgba(0,0,0,.42);
  color: #213f3b;
  text-align: center;
}

#run-result .result-panel::before { display: none; }

#run-result .result-panel > p {
  margin: 0 0 5px;
  color: #47746c;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  text-shadow: none;
}

#run-result .result-panel > h2 {
  margin: 0 0 18px;
  color: #3d2d21;
  font-size: 27px;
  line-height: 1.25;
  letter-spacing: 0;
  text-shadow: none;
}

#run-result .result-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin: 0 0 14px;
  background: transparent;
}

#run-result .result-stats > div {
  display: grid;
  place-items: center;
  min-height: 76px;
  padding: 10px 8px;
  border: 1px solid #8bb4aa;
  border-radius: 5px;
  background: #e8f3ed;
  box-shadow: inset 0 1px #fff;
}

#run-result .result-stats strong {
  color: #203e39;
  font: 900 26px/1.05 ui-monospace, monospace;
  text-shadow: none;
}

#run-result .result-stats span {
  margin-top: 4px;
  color: #426b64;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-shadow: none;
}

#run-result .settlement-coins {
  margin: 0 0 15px;
  padding: 10px 12px;
  border: 1px solid #e0bd67;
  border-radius: 5px;
  background: #fff0b8;
  color: #724b13;
  font-size: 15px;
  text-shadow: none;
}

#run-result #result-restart {
  width: 100%;
  min-height: 46px;
  margin: 0;
  font-size: 16px;
}

@media (max-width: 640px) {
  body.control-mobile #boss-panel,
  #boss-panel {
    top: max(60px, calc(env(safe-area-inset-top) + 60px));
    right: max(8px, env(safe-area-inset-right));
    left: auto;
    width: min(210px, calc(100vw - 172px));
    padding: 6px 8px;
    transform: none;
  }
  #boss-panel .boss-heading { font-size: 10px; }
  #boss-panel .boss-appetite { font-size: 8px; }

  body:has(#boss-panel:not(.hidden)) #timer {
    top: max(116px, calc(env(safe-area-inset-top) + 116px));
  }

  #run-result .result-panel {
    width: min(390px, calc(100vw - 20px));
    padding: 17px 15px 16px;
  }
  #run-result .result-panel > h2 {
    margin-bottom: 13px;
    font-size: 22px;
  }
  #run-result .result-stats { gap: 7px; margin-bottom: 11px; }
  #run-result .result-stats > div { min-height: 66px; padding: 8px 6px; }
  #run-result .result-stats strong { font-size: 23px; }
  #run-result .result-stats span { font-size: 11px; }
  #run-result .settlement-coins { margin-bottom: 12px; padding: 8px 10px; font-size: 14px; }
}

/* fix-v105: final combat HUD overrides loaded after the legacy style sheets. */
#sponsor-button.hidden,
.run-gold.hidden { display: none !important; }

@media (max-width: 600px) {
  #audio-settings-button {
    top: max(10px, env(safe-area-inset-top));
    left: max(10px, env(safe-area-inset-left));
    width: 40px;
    height: 40px;
    z-index: 74;
  }
  #run-economy {
    top: max(10px, env(safe-area-inset-top));
    left: max(62px, calc(env(safe-area-inset-left) + 62px));
    right: auto;
    gap: 5px;
    max-width: calc(100vw - 72px);
  }
  #run-economy .run-gold,
  #sponsor-button { display: none !important; }
  .run-currency {
    min-width: 54px;
    min-height: 28px;
    justify-content: center;
    padding: 4px 6px;
  }
  .run-currency small { display: none; }
  .mini-map {
    top: max(64px, calc(env(safe-area-inset-top) + 64px));
    left: max(10px, env(safe-area-inset-left));
    right: auto;
    width: 146px;
    height: 105px;
  }
  #timer {
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    left: auto;
    transform: none;
  }
  #pause-overlay { background: rgba(4, 8, 7, .58); }
  .pause-panel { width: min(340px, calc(100vw - 30px)); padding: 24px 20px 20px; }
  .pause-panel h2 { margin-bottom: 20px; font-size: 28px; }
  .pause-actions { gap: 8px; }
  .pause-actions button { min-height: 48px; }
}

/* fix-v118: final lobby alignment and resource visibility. Historical lobby
   rules use several different parent grids; keep the Toy board centered from
   the outer panel inward and show only the resources needed in its header. */
.toy-ranked-only #lobby .lobby-wallet {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0 !important;
  width: auto;
  margin: 0;
}
.toy-ranked-only #lobby .lobby-wallet .lobby-currency {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  max-width: none;
  white-space: nowrap;
}
.toy-ranked-only #lobby .lobby-wallet .lobby-currency-diamonds { display: none !important; }
.toy-ranked-only #lobby .lobby-wallet .lobby-currency-coins strong,
.toy-ranked-only #lobby .lobby-wallet .lobby-currency-lives strong {
  margin: 0;
  font: 900 15px/1.1 ui-monospace, monospace;
}
.toy-ranked-only #lobby .lobby-wallet .lobby-currency-coins strong::before { content: "金 "; color: #f1cf61; font: 800 10px/1 system-ui, sans-serif; }
.toy-ranked-only #lobby .lobby-wallet .lobby-currency-lives strong::before { content: "命 "; color: #ef9c9c; font: 800 10px/1 system-ui, sans-serif; }
.toy-ranked-only #lobby .lobby-wallet .lobby-currency button { display: none; }
.toy-ranked-only #lobby .lobby-player-identity { display: none !important; }
.toy-ranked-only #lobby .lobby-header { grid-template-columns: 42px minmax(0, 1fr) auto auto !important; }

.toy-ranked-only #lobby .lobby-meta-view,
.toy-ranked-only #lobby .shop-content,
.toy-ranked-only #lobby .leaderboard-shell {
  width: 100% !important;
  max-width: none !important;
  margin-inline: auto !important;
  align-self: stretch;
  justify-self: stretch;
  box-sizing: border-box;
}
.toy-ranked-only #lobby .leaderboard-shell {
  display: grid;
  place-items: center stretch;
  grid-template-columns: minmax(0, 1fr);
  overflow-y: auto;
  padding-inline: 0;
}
.toy-ranked-only #lobby .leaderboard-heading,
.toy-ranked-only #lobby .leaderboard-period-modes,
.toy-ranked-only #lobby .leaderboard-board-pages,
.toy-ranked-only #lobby .toy-leaderboard-note,
.toy-ranked-only #lobby .leaderboard-grid {
  width: min(560px, calc(100% - 28px)) !important;
  max-width: 560px;
  margin-inline: auto !important;
  box-sizing: border-box;
}
.toy-ranked-only #lobby .leaderboard-heading { grid-template-columns: 38px minmax(0, 1fr) 38px; }
.toy-ranked-only #lobby .leaderboard-grid { grid-template-columns: minmax(0, 1fr); justify-items: stretch; padding-inline: 0; }
.toy-ranked-only #lobby .toy-leaderboard-card { width: 100%; min-width: 0; box-sizing: border-box; }

@media (max-width: 760px) {
  /* Give the roster its own bounded scrolling area. The summary and action
     footer therefore remain separate rows and can never be covered by a
     portrait from a taller character. */
  #lobby:not(.boss-material-selection) .lobby-character-view {
    grid-template-rows: auto minmax(0, 1fr) auto auto !important;
    min-height: 0;
    overflow-y: auto;
  }
  #lobby:not(.boss-material-selection) .character-list {
    height: auto;
    min-height: 0;
    max-height: min(250px, 31dvh);
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 2px 8px;
    gap: 7px 9px;
  }
  #lobby:not(.boss-material-selection) .character-option {
    height: 142px;
    min-height: 142px;
    grid-template-rows: 88px 12px 34px;
    overflow: hidden;
  }
  #lobby:not(.boss-material-selection) .character-portrait {
    height: 88px;
    min-height: 0;
    overflow: hidden;
  }
  #lobby:not(.boss-material-selection) .character-option-label strong { font-size: 13px; }
  #lobby:not(.boss-material-selection) .character-option-label small { margin-top: 2px; font-size: 9px; }
  #lobby:not(.boss-material-selection) .character-summary {
    position: relative;
    z-index: 3;
    min-height: 106px;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 8px;
    padding: 8px 6px;
    overflow: hidden;
    background: rgba(9, 18, 14, .94);
  }
  #lobby:not(.boss-material-selection) .character-skill-summary { min-width: 0; overflow: hidden; }
  #lobby:not(.boss-material-selection) .character-skill-summary p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-height: 1.35;
  }
  #lobby:not(.boss-material-selection) .lobby-footer {
    position: relative;
    z-index: 4;
    min-height: 76px;
    padding: 5px 0 max(9px, env(safe-area-inset-bottom));
    background: rgba(8, 16, 12, .78);
  }
  .toy-ranked-only #lobby .lobby-header {
    grid-template-columns: 36px minmax(0, 1fr) auto auto !important;
    gap: 5px;
  }
  .toy-ranked-only #lobby .lobby-wallet { gap: 4px; }
  .toy-ranked-only #lobby .lobby-wallet .lobby-currency strong { font-size: 13px; }
  .toy-ranked-only #lobby .leaderboard-heading,
  .toy-ranked-only #lobby .leaderboard-period-modes,
  .toy-ranked-only #lobby .leaderboard-board-pages,
  .toy-ranked-only #lobby .toy-leaderboard-note,
  .toy-ranked-only #lobby .leaderboard-grid { width: calc(100% - 20px) !important; }
}

/* fix-v129-final: must remain after every historical mobile header override. */
.toy-ranked-only #lobby:not(.boss-material-selection) .lobby-header {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) 134px !important;
  grid-template-rows: 38px !important;
  grid-auto-rows: 38px !important;
  align-items: center !important;
  column-gap: 4px !important;
  height: 54px !important;
  min-height: 54px !important;
  padding: 8px 6px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
.toy-ranked-only #lobby:not(.boss-material-selection) .lobby-header > #lobby-back {
  grid-column: 1 !important;
  grid-row: 1 !important;
}
.toy-ranked-only #lobby:not(.boss-material-selection) .lobby-header > div:not(.lobby-wallet) {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}
.toy-ranked-only #lobby:not(.boss-material-selection) .header-leaderboard-button,
.toy-ranked-only .leaderboards-open .header-leaderboard-button {
  position: absolute !important;
  top: 8px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  width: 92px !important;
  min-width: 92px !important;
  height: 38px !important;
  margin: 0 !important;
  z-index: 6 !important;
}
.toy-ranked-only #lobby:not(.boss-material-selection) .lobby-wallet {
  position: static !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  transform: none !important;
  display: grid !important;
  grid-template-columns: 80px 50px !important;
  grid-template-rows: 38px !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  width: 134px !important;
  min-width: 134px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  gap: 4px !important;
  z-index: 5 !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 {
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 0 !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  align-self: stretch !important;
}
.toy-ranked-only #lobby:not(.boss-material-selection) .lobby-wallet .lobby-currency-coins { grid-column: 1 !important; }
.toy-ranked-only #lobby:not(.boss-material-selection) .lobby-wallet .lobby-currency-lives { grid-column: 2 !important; }

@media (max-width: 360px) {
  .toy-ranked-only #lobby:not(.boss-material-selection) .lobby-header {
    grid-template-columns: 34px minmax(0, 1fr) 122px !important;
    column-gap: 3px !important;
    padding-inline: 4px !important;
  }
  .toy-ranked-only #lobby:not(.boss-material-selection) .header-leaderboard-button,
  .toy-ranked-only .leaderboards-open .header-leaderboard-button { width: 82px !important; min-width: 82px !important; }
  .toy-ranked-only #lobby:not(.boss-material-selection) .lobby-wallet {
    grid-template-columns: 72px 46px !important;
    width: 122px !important;
    min-width: 122px !important;
  }
}

/* fix-v129: the Toy header has three real grid columns.  The ranking button
   is intentionally centered over the bar, while the wallet occupies column 3.
   Older rules left the wallet without a column after the ranking button became
   absolute, so the browser created an implicit second row on phones. */
.toy-ranked-only #lobby:not(.boss-material-selection) .lobby-header {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) 134px !important;
  grid-template-rows: 38px !important;
  grid-auto-rows: 38px !important;
  align-items: center !important;
  column-gap: 4px !important;
  height: 54px !important;
  min-height: 54px !important;
  padding: 8px 6px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
.toy-ranked-only #lobby:not(.boss-material-selection) .lobby-header > #lobby-back {
  grid-column: 1 !important;
  grid-row: 1 !important;
}
.toy-ranked-only #lobby:not(.boss-material-selection) .lobby-header > div:not(.lobby-wallet) {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}
.toy-ranked-only #lobby:not(.boss-material-selection) .header-leaderboard-button,
.toy-ranked-only .leaderboards-open .header-leaderboard-button {
  position: absolute !important;
  top: 8px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  width: 92px !important;
  min-width: 92px !important;
  height: 38px !important;
  margin: 0 !important;
  z-index: 6 !important;
}
.toy-ranked-only #lobby:not(.boss-material-selection) .lobby-wallet {
  position: static !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  transform: none !important;
  display: grid !important;
  grid-template-columns: 80px 50px !important;
  grid-template-rows: 38px !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  width: 134px !important;
  min-width: 134px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  gap: 4px !important;
  z-index: 5 !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 {
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 0 !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  align-self: stretch !important;
}
.toy-ranked-only #lobby:not(.boss-material-selection) .lobby-wallet .lobby-currency-coins { grid-column: 1 !important; }
.toy-ranked-only #lobby:not(.boss-material-selection) .lobby-wallet .lobby-currency-lives { grid-column: 2 !important; }

@media (max-width: 360px) {
  .toy-ranked-only #lobby:not(.boss-material-selection) .lobby-header {
    grid-template-columns: 34px minmax(0, 1fr) 122px !important;
    column-gap: 3px !important;
    padding-inline: 4px !important;
  }
  .toy-ranked-only #lobby:not(.boss-material-selection) .header-leaderboard-button,
  .toy-ranked-only .leaderboards-open .header-leaderboard-button { width: 82px !important; min-width: 82px !important; }
  .toy-ranked-only #lobby:not(.boss-material-selection) .lobby-wallet {
    grid-template-columns: 72px 46px !important;
    width: 122px !important;
    min-width: 122px !important;
  }
}

/* fix-v128: final mobile roster constraints, after every historical override. */
@media (max-width: 760px) {
  #lobby:not(.boss-material-selection) .character-list.character-roster {
    height: 228px !important;
    min-height: 228px !important;
    max-height: 228px !important;
  }
  #lobby:not(.boss-material-selection) .character-list.character-roster .character-option {
    height: 216px !important;
    min-height: 216px !important;
    grid-template-rows: 146px 24px 38px !important;
    overflow: hidden !important;
  }
  #lobby:not(.boss-material-selection) .character-list.character-roster .character-portrait {
    height: 146px !important;
  }
  #lobby:not(.boss-material-selection) .character-option-label {
    min-width: 0;
    overflow: hidden;
  }
  #lobby:not(.boss-material-selection) .character-option-label strong,
  #lobby:not(.boss-material-selection) .character-option-label small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* v125 final mobile header alignment: ranking and wallet share one baseline. */
.toy-ranked-only #lobby:not(.boss-material-selection) .lobby-header {
  position: relative !important;
  height: 50px !important;
  min-height: 50px !important;
  overflow: visible !important;
}
.toy-ranked-only #lobby:not(.boss-material-selection) .header-leaderboard-button {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
}
.toy-ranked-only #lobby:not(.boss-material-selection) .lobby-wallet {
  position: absolute !important;
  top: 50% !important;
  right: 3px !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
}

/* fix-v123: restore map selector, remove only the guide marker, and fit the four tabs. */
#lobby:not(.boss-material-selection) .lobby-map-select > [data-map-id="courtyard"] { display: block !important; }
#lobby:not(.boss-material-selection) .lobby-guide-entry::before { display: none !important; content: none !important; }
#lobby:not(.boss-material-selection) .lobby-guide-entry-icon { display: inline-grid !important; }
#lobby:not(.boss-material-selection) .lobby-tabs { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 3px !important; overflow: hidden !important; padding-inline: 3px !important; box-sizing: border-box !important; }
#lobby:not(.boss-material-selection) .lobby-tabs > button[data-shop-tab] { min-width: 0 !important; width: 100% !important; max-width: none !important; padding-inline: 2px !important; gap: 2px !important; overflow: hidden !important; white-space: nowrap !important; }
#lobby:not(.boss-material-selection) .lobby-tabs > button[data-shop-tab]::before { flex-basis: 13px !important; width: 13px !important; height: 13px !important; font-size: 12px !important; }
@media (max-width: 760px) {
  #lobby:not(.boss-material-selection) .lobby-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 2px !important; }
  #lobby:not(.boss-material-selection) .lobby-tabs > button[data-shop-tab] { font-size: 10px !important; min-height: 30px !important; }
  #lobby:not(.boss-material-selection) .lobby-tabs > button[data-shop-tab]::before { flex-basis: 12px !important; width: 12px !important; font-size: 11px !important; }
}

/* fix-v122-final-cascade: one header row for ranking and wallet. */
#lobby:not(.boss-material-selection) .lobby-header { position: relative !important; height: 50px !important; min-height: 50px !important; overflow: visible !important; }
.toy-ranked-only #lobby .lobby-header { display: grid !important; grid-template-columns: 38px minmax(0, 1fr) !important; }
.toy-ranked-only #lobby .header-leaderboard-button,
.toy-ranked-only .leaderboards-open .header-leaderboard-button { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; width: 96px !important; min-width: 96px !important; height: 38px !important; margin: 0 !important; z-index: 4; }
.toy-ranked-only #lobby .lobby-wallet { position: absolute !important; top: 50% !important; right: 6px !important; transform: translateY(-50%) !important; display: flex !important; align-items: center !important; gap: 4px !important; width: auto !important; height: 38px !important; min-width: 0 !important; z-index: 5; }
.toy-ranked-only #lobby .lobby-wallet .lobby-currency { width: 46px !important; min-width: 46px !important; height: 36px !important; min-height: 36px !important; padding: 2px !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 2px !important; overflow: hidden !important; }
.toy-ranked-only #lobby .lobby-wallet .lobby-currency::after,
.toy-ranked-only #lobby .lobby-wallet .lobby-currency strong::before { content: none !important; display: none !important; }
.toy-ranked-only #lobby .lobby-wallet .lobby-currency strong { font-size: 13px !important; line-height: 1 !important; min-width: 0; }
@media (max-width: 760px) {
  .toy-ranked-only #lobby .header-leaderboard-button,
  .toy-ranked-only .leaderboards-open .header-leaderboard-button { width: 92px !important; min-width: 92px !important; height: 34px !important; }
  .toy-ranked-only #lobby .lobby-wallet { right: 3px !important; gap: 3px !important; }
  .toy-ranked-only #lobby .lobby-wallet .lobby-currency { width: 42px !important; min-width: 42px !important; height: 34px !important; min-height: 34px !important; }
}

/* fix-v122-final-cascade */
#lobby:not(.boss-material-selection) .lobby-header { position: relative !important; height: 50px !important; min-height: 50px !important; overflow: visible !important; }
.toy-ranked-only #lobby .lobby-header { display: grid !important; grid-template-columns: 38px minmax(0, 1fr) !important; }
.toy-ranked-only #lobby .header-leaderboard-button,
.toy-ranked-only .leaderboards-open .header-leaderboard-button { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; width: 96px !important; min-width: 96px !important; height: 38px !important; margin: 0 !important; z-index: 4; }
.toy-ranked-only #lobby .lobby-wallet { position: absolute !important; top: 50% !important; right: 6px !important; transform: translateY(-50%) !important; display: flex !important; align-items: center !important; gap: 4px !important; width: auto !important; height: 38px !important; min-width: 0 !important; z-index: 5; }
.toy-ranked-only #lobby .lobby-wallet .lobby-currency { width: 46px !important; min-width: 46px !important; height: 36px !important; min-height: 36px !important; padding: 2px !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 2px !important; overflow: hidden !important; }
.toy-ranked-only #lobby .lobby-wallet .lobby-currency::after,
.toy-ranked-only #lobby .lobby-wallet .lobby-currency strong::before { content: none !important; display: none !important; }
.toy-ranked-only #lobby .lobby-wallet .lobby-currency strong { font-size: 13px !important; line-height: 1 !important; min-width: 0; }
@media (max-width: 760px) {
  .toy-ranked-only #lobby .header-leaderboard-button,
  .toy-ranked-only .leaderboards-open .header-leaderboard-button { width: 92px !important; min-width: 92px !important; height: 34px !important; }
  .toy-ranked-only #lobby .lobby-wallet { right: 3px !important; gap: 3px !important; }
  .toy-ranked-only #lobby .lobby-wallet .lobby-currency { width: 42px !important; min-width: 42px !important; height: 34px !important; min-height: 34px !important; }
}

/* fix-v121: compact Toy lobby header and align category icons beside labels. */
.toy-ranked-only #lobby .lobby-header {
  grid-template-columns: 36px minmax(0, 1fr) auto !important;
  column-gap: 4px !important;
}
.toy-ranked-only #lobby .lobby-wallet {
  gap: 3px !important;
  flex: 0 0 auto;
}
.toy-ranked-only #lobby .lobby-wallet .lobby-currency {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 46px;
  min-width: 46px !important;
  height: 34px;
  min-height: 34px;
  padding: 2px 3px;
  box-sizing: border-box;
  overflow: hidden;
}
.toy-ranked-only #lobby .lobby-wallet .lobby-currency::after,
.toy-ranked-only #lobby .lobby-wallet .lobby-currency strong::before {
  display: none !important;
  content: none !important;
}
.toy-ranked-only #lobby .lobby-wallet .lobby-currency::before {
  flex: 0 0 auto;
  grid-column: auto;
  grid-row: auto;
  width: 12px;
  height: 12px;
  margin: 0;
}
.toy-ranked-only #lobby .lobby-wallet .lobby-currency strong {
  min-width: 0;
  overflow: hidden;
  font-size: 13px !important;
  line-height: 1 !important;
  text-overflow: ellipsis;
}
.toy-ranked-only #lobby .header-leaderboard-button,
.toy-ranked-only .leaderboards-open .header-leaderboard-button {
  width: 96px !important;
  min-width: 96px !important;
}

/* Only one map is selectable; remove its decorative courtyard marker row. */
#lobby:not(.boss-material-selection) .lobby-map-select > [data-map-id="courtyard"] { display: block !important; }
#lobby:not(.boss-material-selection) .lobby-map-select .lobby-guide-entry { grid-column: 1 / -1; }

#lobby:not(.boss-material-selection) .lobby-tabs button[data-shop-tab] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
#lobby:not(.boss-material-selection) .lobby-tabs button[data-shop-tab]::before {
  display: inline-grid;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  place-items: center;
  font-size: 14px;
  line-height: 1;
}
#lobby:not(.boss-material-selection) .lobby-tabs button[data-shop-tab="characters"]::before { content: "☺"; color: #ff9a55; }
#lobby:not(.boss-material-selection) .lobby-tabs button[data-shop-tab="talents"]::before { content: "✦"; color: #48a8a2; }
#lobby:not(.boss-material-selection) .lobby-tabs button[data-shop-tab="masteries"]::before { content: "◇"; color: #4b968f; font-weight: 900; }
#lobby:not(.boss-material-selection) .lobby-tabs button[data-shop-tab="challenges"]::before { content: "⚑"; color: #4b8a7d; }

@media (max-width: 760px) {
  .toy-ranked-only #lobby .lobby-header { grid-template-columns: 34px minmax(0, 1fr) auto !important; }
  .toy-ranked-only #lobby .lobby-wallet .lobby-currency { width: 44px; min-width: 44px !important; }
  .toy-ranked-only #lobby .header-leaderboard-button,
  .toy-ranked-only .leaderboards-open .header-leaderboard-button { width: 92px !important; min-width: 92px !important; }
}

/* fix-v120b: keep the full Maodie variant name on one line in the
   character summary. The original narrow identity column only affected
   five-character names such as 耄耋（爪）, while shorter names fit. */
#lobby:not(.boss-material-selection) .character-summary {
  grid-template-columns: minmax(132px, 220px) minmax(0, 1fr) !important;
}
#lobby:not(.boss-material-selection) .character-identity {
  min-width: 0;
  white-space: nowrap;
}
#lobby:not(.boss-material-selection) .character-identity h1 {
  white-space: nowrap;
  overflow: visible;
}

@media (max-width: 760px) {
  #lobby:not(.boss-material-selection) .character-summary {
    grid-template-columns: 132px minmax(0, 1fr) !important;
  }
  #lobby:not(.boss-material-selection) .character-identity h1 {
    font-size: 24px !important;
  }
}

/* fix-v120-final-roster: keep all character cards in one horizontal row. */
#lobby:not(.boss-material-selection) .character-list.character-roster {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 10px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  min-width: 0 !important;
  min-height: 220px !important;
  height: 230px !important;
  padding: 4px 4px 8px !important;
  scrollbar-width: thin;
}
#lobby:not(.boss-material-selection) .character-list.character-roster .character-option {
  flex: 0 0 164px !important;
  width: 164px !important;
  height: 218px !important;
  min-height: 218px !important;
  grid-template-rows: 160px 14px 38px !important;
}
#lobby:not(.boss-material-selection) .character-list.character-roster .character-portrait {
  height: 160px !important;
  min-height: 0 !important;
}
@media (max-width: 760px) {
  #lobby:not(.boss-material-selection) .character-list.character-roster {
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
  }
  #lobby:not(.boss-material-selection) .character-list.character-roster .character-option {
    flex-basis: 164px !important;
    width: 164px !important;
    height: 206px !important;
    min-height: 206px !important;
    grid-template-rows: 150px 12px 38px !important;
  }
  #lobby:not(.boss-material-selection) .character-list.character-roster .character-portrait { height: 150px !important; }
}

/* fix-v119-final: keep the Toy board in one centered column. The legacy
   three-column shop grid otherwise gives the board only the first column,
   which makes it appear shifted when the leaderboard tab is opened. */
.toy-ranked-only #shop-content {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: stretch;
  align-items: start;
  padding-inline: 0 !important;
}
.toy-ranked-only #shop-content > .leaderboard-shell {
  grid-column: 1 !important;
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch !important;
  align-self: stretch !important;
}
.toy-ranked-only #lobby-character-description {
  display: -webkit-box !important;
  max-width: 560px;
  max-height: 2.8em;
  overflow: hidden !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.4 !important;
}

@media (max-width: 760px) {
  #lobby:not(.boss-material-selection) .lobby-character-view {
    grid-template-rows: auto 220px 96px 76px !important;
    overflow-y: auto !important;
  }
  #lobby:not(.boss-material-selection) .lobby-map-select {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  #lobby:not(.boss-material-selection) .character-list.character-roster {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
    gap: 10px !important;
    padding: 6px 4px 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    touch-action: pan-x !important;
    scroll-snap-type: x proximity;
  }
  #lobby:not(.boss-material-selection) .character-list.character-roster .character-option {
    flex: 0 0 164px !important;
    width: 164px !important;
    height: 206px !important;
    min-height: 206px !important;
    grid-template-rows: 150px 12px 38px !important;
    scroll-snap-align: center;
  }
  #lobby:not(.boss-material-selection) .character-list.character-roster .character-portrait {
    width: 100% !important;
    height: 150px !important;
    min-height: 0 !important;
  }
  #lobby:not(.boss-material-selection) .character-summary {
    grid-column: 1 !important;
    grid-row: 3 !important;
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
    box-sizing: border-box;
    overflow: hidden !important;
  }
  #lobby:not(.boss-material-selection) .character-skill-summary p {
    max-height: 27px !important;
    -webkit-line-clamp: 2 !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
  }
  .toy-ranked-only #lobby .leaderboard-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
  }
  .toy-ranked-only #lobby .leaderboard-heading,
  .toy-ranked-only #lobby .leaderboard-period-modes,
  .toy-ranked-only #lobby .leaderboard-board-pages,
  .toy-ranked-only #lobby .toy-leaderboard-note,
  .toy-ranked-only #lobby .leaderboard-grid {
    width: calc(100% - 20px) !important;
    max-width: 560px !important;
  }
}

/* fix-v119: the mobile roster is a horizontal carousel and the ranking
   trigger is centered independently of the header's resource columns. */
.toy-ranked-only #lobby .lobby-header {
  position: relative;
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
}
.toy-ranked-only #lobby .header-leaderboard-button,
.toy-ranked-only .leaderboards-open .header-leaderboard-button {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  z-index: 5;
  min-width: 104px !important;
  width: 104px !important;
  height: 36px !important;
  margin: 0 !important;
}

@media (max-width: 760px) {
  #lobby:not(.boss-material-selection) .lobby-character-view {
    grid-template-rows: auto 220px 100px 76px !important;
    overflow-y: auto;
  }
  #lobby:not(.boss-material-selection) .character-list.character-roster {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
    gap: 10px !important;
    padding: 6px 4px 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity;
    touch-action: pan-x;
  }
  #lobby:not(.boss-material-selection) .character-list.character-roster .character-option {
    flex: 0 0 164px !important;
    width: 164px !important;
    height: 206px !important;
    min-height: 206px !important;
    grid-template-rows: 150px 12px 38px !important;
    scroll-snap-align: center;
  }
  #lobby:not(.boss-material-selection) .character-list.character-roster .character-portrait {
    width: 100% !important;
    height: 150px !important;
    min-height: 0 !important;
  }
  #lobby:not(.boss-material-selection) .character-summary {
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
    box-sizing: border-box;
    grid-template-columns: 86px minmax(0, 1fr) !important;
    align-items: center;
    overflow: hidden !important;
  }
  #lobby:not(.boss-material-selection) .character-identity h1 { font-size: 24px; }
  #lobby:not(.boss-material-selection) .character-skill-summary h3 { margin: 2px 0; font-size: 14px; }
  #lobby:not(.boss-material-selection) .character-skill-summary p {
    display: -webkit-box !important;
    max-height: 28px;
    margin: 2px 0 0;
    overflow: hidden !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 10px;
    line-height: 1.35;
  }
  .toy-ranked-only #lobby .lobby-header {
    grid-template-columns: 36px minmax(0, 1fr) auto !important;
  }
  .toy-ranked-only #lobby .header-leaderboard-button,
  .toy-ranked-only .leaderboards-open .header-leaderboard-button {
    min-width: 96px !important;
    width: 96px !important;
    height: 32px !important;
    font-size: 11px !important;
  }
}

/* fix-v117: the four Maodie skills are ordinary roster characters. The gas
   and domain variants keep the shared normal portrait and add one restrained
   visual cue, so their cards remain readable beside the other characters. */
.character-portrait { position: relative; }
.character-variant-effect {
  position: absolute;
  z-index: 2;
  display: block;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .42));
}
.character-variant-effect-gas {
  inset: 19% 4% 3%;
  background-image: url("assets/effects/maodie-tail-smoke-v73-512.png");
  opacity: .56;
  mix-blend-mode: screen;
}
.character-variant-effect-domain {
  inset: 12% 2% 0;
  background-image: url("assets/effects/maodie-domain-ring-v73-512.png");
  opacity: .72;
}
.character-option:hover .character-variant-effect { transform: translateY(-4px); }
.character-option.active .character-variant-effect { transform: translateY(-7px); }

/* fix-v117: at tablet and phone widths, keep the four Maodie choices in the
   normal scroll flow so the lobby action buttons can never cover them. */
@media (max-width: 760px) {
  #lobby:not(.boss-material-selection) .lobby-character-view {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(174px, 30dvh) auto auto !important;
    align-content: start;
    gap: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px 10px max(14px, env(safe-area-inset-bottom));
  }
  #lobby:not(.boss-material-selection) .lobby-map-select {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px;
    width: 100% !important;
    padding: 0;
  }
  #lobby:not(.boss-material-selection) .lobby-map-select .lobby-guide-entry {
    grid-column: auto;
    min-height: 38px;
  }
  #lobby:not(.boss-material-selection) .character-list {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-height: 174px;
    padding: 0;
  }
  #lobby:not(.boss-material-selection) .character-summary {
    grid-column: 1 !important;
    grid-row: 3 !important;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 10px;
    min-height: 0;
    padding: 9px 4px;
  }
  #lobby:not(.boss-material-selection) .signature-skill-options {
    gap: 6px;
    margin-top: 7px;
  }
  #lobby:not(.boss-material-selection) .signature-skill-option {
    min-height: 56px;
    padding: 6px 7px;
  }
  #lobby:not(.boss-material-selection) .signature-skill-option strong { font-size: 13px; }
  #lobby:not(.boss-material-selection) .signature-skill-option small {
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.2;
  }
  #lobby:not(.boss-material-selection) .lobby-footer {
    grid-column: 1 !important;
    grid-row: 4 !important;
    position: relative;
    min-height: 70px;
    padding: 5px 0 max(9px, env(safe-area-inset-bottom));
  }
}

/* fix-v116: Maodie can choose one of four true signature skills before a run. */
.signature-skill-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 11px;
}
.signature-skill-options.hidden { display: none; }
.signature-skill-option {
  min-height: 68px;
  padding: 7px 8px;
  border: 2px solid #4d8e7a;
  border-radius: 6px;
  background: #163e33;
  color: #f7f6e9;
  text-align: left;
  cursor: pointer;
}
.signature-skill-option strong,
.signature-skill-option small { display: block; }
.signature-skill-option strong { color: #fff6c8; font-size: 14px; line-height: 1.2; }
.signature-skill-option small { margin-top: 3px; color: #d5e5db; font-size: 11px; line-height: 1.3; }
.signature-skill-option.active {
  border-color: #f3c84f;
  background: #275842;
  box-shadow: inset 0 0 0 1px rgba(255, 238, 157, .42), 0 2px 0 #112e25;
}
.signature-skill-option:focus-visible { outline: 3px solid #fff2a9; outline-offset: 2px; }

@media (max-width: 600px) {
  .signature-skill-options { gap: 6px; margin-top: 8px; }
  .signature-skill-option { min-height: 61px; padding: 6px 7px; }
  .signature-skill-option strong { font-size: 13px; }
  .signature-skill-option small { font-size: 10px; line-height: 1.2; }
}

/* fix-v116: both persistent run resources remain visible at the upper right. */
#hud .run-economy .run-gold { display: grid !important; }

@media (max-width: 600px) {
  #hud #run-economy {
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    left: auto;
    gap: 5px;
    max-width: calc(100vw - 20px);
  }
  #hud #run-economy .run-currency {
    min-width: 52px;
    min-height: 28px;
    padding: 3px 5px;
  }
  #hud #run-economy .run-currency small { display: block; font-size: 8px; }
  #hud #timer {
    top: max(47px, calc(env(safe-area-inset-top) + 47px));
    right: max(10px, env(safe-area-inset-right));
    left: auto;
    transform: none;
  }
  #hud #boss-panel {
    top: max(78px, calc(env(safe-area-inset-top) + 78px));
  }
}

/* fix-v107: focused, readable newcomer guide. */
.lobby-guide-entry > span:not(.lobby-guide-entry-icon) { display: grid; align-items: center; }
.lobby-guide-entry small { display: none; }

@media (max-width: 600px) {
  #lobby:not(.boss-material-selection) .lobby-character-view {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #lobby:not(.boss-material-selection) .lobby-map-select {
    grid-column: 1 !important;
    grid-row: 1 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-content: stretch !important;
    width: 100% !important;
  }
  #lobby:not(.boss-material-selection) .lobby-map-select .lobby-guide-entry {
    grid-column: 1 / -1;
    grid-template-columns: 24px minmax(0, 1fr) 14px;
    width: 100% !important;
    min-height: 42px;
    padding: 7px 10px;
    writing-mode: horizontal-tb;
    white-space: nowrap;
    border-color: #f2bd45 !important;
    background: linear-gradient(180deg, #28796b, #16564d) !important;
    box-shadow: 0 3px 0 #103d36 !important;
  }
  .lobby-guide-entry-icon { width: 22px; height: 22px; font-size: 14px; }
  #lobby:not(.boss-material-selection) .lobby-guide-entry-icon {
    grid-column: 1;
    border-color: #fff2ba;
    color: #fff6d0;
  }
  #lobby:not(.boss-material-selection) .lobby-guide-entry > span:not(.lobby-guide-entry-icon) {
    grid-column: 2;
    min-width: 0;
  }
  #lobby:not(.boss-material-selection) .lobby-guide-entry strong { color: #fffdf2 !important; font-size: 16px; font-weight: 900; letter-spacing: 0; text-shadow: 0 1px 0 #103d36 !important; }
  #lobby:not(.boss-material-selection) .lobby-guide-entry > b { grid-column: 3; color: #fff2ad !important; }

  #lobby-guide-overlay {
    align-items: center;
    padding: 8px;
    background: rgba(4, 13, 8, .82);
  }
  .lobby-guide-panel {
    width: 100%;
    max-height: calc(100dvh - 16px);
    padding: 18px 16px 16px;
    border: 2px solid rgba(232, 201, 93, .76);
    border-radius: 8px;
    background: #0d2519;
  }
  .lobby-guide-heading { align-items: center; gap: 10px; margin-bottom: 14px; }
  .lobby-guide-heading h2 { font-size: 26px; line-height: 1.16; }
  .lobby-guide-heading p { font-size: 13px; }
  .lobby-guide-heading button { width: 38px; height: 38px; font-size: 27px; }
  .lobby-guide-content { padding: 1px 0 8px; }
  .lobby-guide-intro { margin-bottom: 14px; color: #e1eadc; font-size: 15px; line-height: 1.55; }
  .lobby-guide-grid,
  .lobby-guide-topic-grid { grid-template-columns: 1fr; gap: 10px; }
  .lobby-guide-card,
  .lobby-guide-topic-card { grid-template-columns: 100px minmax(0, 1fr) 18px; min-height: 94px; }
  .lobby-guide-card img,
  .lobby-guide-topic-card img { width: 100px; height: 94px; object-fit: contain; padding: 7px; background: #163d2a; }
  .lobby-guide-card > span { min-width: 0; gap: 5px; padding: 10px 8px; overflow: hidden; }
  .lobby-guide-card strong { overflow-wrap: anywhere; font-size: 16px; line-height: 1.2; white-space: normal; }
  .lobby-guide-card small { font-size: 12px; line-height: 1.35; -webkit-line-clamp: 2; }
  .lobby-guide-card > b { font-size: 25px; }
  .lobby-guide-detail > img {
    height: min(220px, 30dvh);
    padding: 12px;
    object-fit: contain;
    background: #123522;
  }
  .lobby-guide-lead { margin: 14px 0 12px; color: #fff0bf; font-size: 16px; line-height: 1.55; }
  .lobby-guide-detail h3 { margin-bottom: 9px; font-size: 15px; }
.lobby-guide-detail ol { gap: 10px; padding-left: 24px; color: #edf2e7; font-size: 14px; line-height: 1.58; }
}

/* fix-v118-final: these selectors intentionally come last so they win over
   legacy mobile roster rules and keep the active board centered in its panel. */
#lobby-lives::before { content: "命 "; color: #ef9c9c; font: 800 10px/1 system-ui, sans-serif; }
.toy-ranked-only #lobby .lobby-meta-view,
.toy-ranked-only #lobby .shop-content,
.toy-ranked-only #lobby .leaderboard-shell {
  width: 100% !important;
  max-width: none !important;
  margin-inline: auto !important;
  justify-self: stretch;
  align-self: stretch;
  box-sizing: border-box;
}
.toy-ranked-only #lobby .leaderboard-shell {
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  overflow-y: auto;
}
.toy-ranked-only #shop-content {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: stretch;
  align-items: start;
  padding-inline: 0 !important;
}
.toy-ranked-only #shop-content > .leaderboard-shell {
  grid-column: 1 !important;
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch !important;
}
.toy-ranked-only #lobby .leaderboard-heading,
.toy-ranked-only #lobby .leaderboard-period-modes,
.toy-ranked-only #lobby .leaderboard-board-pages,
.toy-ranked-only #lobby .toy-leaderboard-note,
.toy-ranked-only #lobby .leaderboard-grid {
  width: min(560px, calc(100% - 28px)) !important;
  max-width: 560px;
  margin-inline: auto !important;
  box-sizing: border-box;
}
.toy-ranked-only #lobby .leaderboard-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: stretch;
  padding-inline: 0;
}
.toy-ranked-only #lobby .toy-leaderboard-card { width: 100%; min-width: 0; box-sizing: border-box; }
.toy-ranked-only #lobby .lobby-wallet {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  transform: none !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: 80px 50px !important;
  grid-template-rows: 38px !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  gap: 4px !important;
  min-width: 134px !important;
  width: 134px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  z-index: 5;
}
.toy-ranked-only #lobby .lobby-wallet .lobby-currency { display: inline-flex; align-items: center; gap: 2px; max-width: none; white-space: nowrap; }
.toy-ranked-only #lobby .lobby-wallet .lobby-currency-coins { grid-column: 1 !important; width: auto !important; min-width: 0 !important; height: 38px !important; min-height: 38px !important; padding-inline: 5px !important; }
.toy-ranked-only #lobby .lobby-wallet .lobby-currency-lives { grid-column: 2 !important; width: auto !important; min-width: 0 !important; height: 38px !important; min-height: 38px !important; padding-inline: 5px !important; }
.toy-ranked-only #lobby .lobby-wallet .lobby-currency-diamonds { display: none !important; }
.toy-ranked-only #lobby .lobby-wallet .lobby-currency button { display: none; }
.toy-ranked-only #lobby .lobby-wallet .lobby-currency strong { margin: 0; font: 900 15px/1.1 ui-monospace, monospace; }
.toy-ranked-only #lobby .lobby-wallet .lobby-currency-coins strong::before { content: "金 "; color: #f1cf61; font: 800 10px/1 system-ui, sans-serif; }
.toy-ranked-only #lobby .lobby-wallet .lobby-currency-lives strong::before { content: "命 "; color: #ef9c9c; font: 800 10px/1 system-ui, sans-serif; }
.toy-ranked-only #lobby .lobby-player-identity { display: none !important; }
.toy-ranked-only #lobby .lobby-header {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) 134px !important;
  grid-template-rows: 38px !important;
  align-items: center !important;
  column-gap: 4px !important;
  height: 54px !important;
  min-height: 54px !important;
  padding: 8px 6px !important;
  box-sizing: border-box !important;
}

@media (max-width: 760px) {
  #lobby:not(.boss-material-selection) .lobby-character-view {
    grid-template-rows: auto auto auto auto !important;
    min-height: 0;
    overflow-y: auto;
  }
  #lobby:not(.boss-material-selection) .character-list.character-roster {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 6px 4px 8px !important;
    gap: 10px !important;
    touch-action: pan-x !important;
    scroll-snap-type: x proximity;
  }
  #lobby:not(.boss-material-selection) .character-list.character-roster .character-option {
    flex: 0 0 164px !important;
    width: 164px !important;
    height: 206px !important;
    min-height: 206px !important;
    grid-template-rows: 150px 12px 38px !important;
    overflow: hidden;
    scroll-snap-align: center;
  }
  #lobby:not(.boss-material-selection) .character-portrait { height: 150px !important; min-height: 0 !important; overflow: hidden; }
  #lobby:not(.boss-material-selection) .character-summary {
    position: relative;
    z-index: 3;
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
    grid-template-columns: 82px minmax(0, 1fr) !important;
    gap: 8px;
    padding: 8px 6px;
    overflow: hidden;
    background: rgba(9, 18, 14, .94);
  }
  #lobby:not(.boss-material-selection) .character-skill-summary { min-width: 0; overflow: hidden; }
  #lobby:not(.boss-material-selection) .character-skill-summary p { display: -webkit-box; max-height: 27px !important; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2 !important; line-height: 1.35; }
  #lobby:not(.boss-material-selection) .lobby-footer { position: relative; z-index: 4; min-height: 76px !important; padding: 5px 0 max(9px, env(safe-area-inset-bottom)); background: rgba(8, 16, 12, .78); }
  .toy-ranked-only #lobby .lobby-header { grid-template-columns: 38px minmax(0, 1fr) 134px !important; }
  .toy-ranked-only #lobby .lobby-wallet { right: auto !important; gap: 4px !important; }
  .toy-ranked-only #lobby .lobby-wallet .lobby-currency-coins { width: auto !important; min-width: 0 !important; height: 38px !important; min-height: 38px !important; }
  .toy-ranked-only #lobby .lobby-wallet .lobby-currency-lives { width: auto !important; min-width: 0 !important; height: 38px !important; min-height: 38px !important; }
  .toy-ranked-only #lobby .leaderboard-heading,
  .toy-ranked-only #lobby .leaderboard-period-modes,
  .toy-ranked-only #lobby .leaderboard-board-pages,
  .toy-ranked-only #lobby .toy-leaderboard-note,
  .toy-ranked-only #lobby .leaderboard-grid { width: calc(100% - 20px) !important; }
}