/* v61: keep menu and card surfaces image-free for immediate rendering. */

#intro,
#lobby,
#multiplayer-lobby,
#name-entry,
#sponsor-overlay {
  background-color: #579e87 !important;
  background-image:
    linear-gradient(180deg, rgba(255, 225, 135, .16), transparent 38%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 2px, transparent 2px 12px) !important;
  background-position: center !important;
  background-size: auto !important;
}

/* In-run overlays should reveal the current canvas/HUD instead of the menu artwork. */
#level-up,
#pause-overlay,
#audio-settings,
#game-over,
#run-result {
  background: rgba(5, 10, 8, .30) !important;
  background-image: none !important;
  backdrop-filter: none !important;
}

/* Keep the live battlefield visible around upgrade cards, especially in multiplayer. */
#level-up {
  background: rgba(3, 8, 6, .18) !important;
}

#level-up[data-multiplayer="true"] {
  background: rgba(3, 8, 6, .12) !important;
}

/* Cards provide their own contrast; the outer sheet must not cover the battlefield. */
#level-up .choice-panel {
  min-height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#level-up .choice-panel::before {
  display: none !important;
}

#level-up .choice-panel > p,
#level-up .choice-panel > h2,
#level-up .level-up-timer {
  color: #fff8dc !important;
  text-shadow: 0 2px 2px rgba(0,0,0,.95), 0 0 8px rgba(0,0,0,.82) !important;
}

/* One warm gold frame for every card, independent of rarity or card surface color. */
#level-up .upgrade-option,
#level-up .upgrade-grid:not(.four-options) > .upgrade-option:last-child:nth-child(odd),
#level-up .upgrade-option[data-quality] {
  border: 3px solid #d8ad4d !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 235, 156, .74),
    inset 0 0 0 3px rgba(103, 65, 16, .72),
    inset 0 0 26px rgba(0,0,0,.4),
    0 3px 0 #76501d,
    0 6px 13px rgba(52, 31, 8, .22) !important;
}

#level-up .upgrade-option::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 7px !important;
  z-index: 0 !important;
  border: 2px solid rgba(238, 197, 94, .84) !important;
  border-radius: 4px !important;
  pointer-events: none !important;
  box-shadow: inset 0 0 0 1px rgba(103, 65, 16, .52) !important;
}

#level-up .upgrade-option .card-copy,
#level-up .upgrade-option .skill-star {
  z-index: 1 !important;
}

/* Explicit surfaces prevent legacy green card rules from overriding rarity. */
#level-up .upgrade-option[data-quality="standard"] {
  --card-accent: #aee878;
  background-color: #082218 !important;
  background-image: radial-gradient(circle at 16% 50%, rgba(112, 218, 128, .14), transparent 40%) !important;
}
#level-up .upgrade-option[data-quality="strong"] {
  --card-accent: #75caff;
  background-color: #082b4b !important;
  background-image: radial-gradient(circle at 16% 50%, rgba(65, 155, 235, .3), transparent 44%) !important;
}
#level-up .upgrade-option[data-quality="premium"] {
  --card-accent: #d5a1ff;
  background-color: #301547 !important;
  background-image: radial-gradient(circle at 16% 50%, rgba(181, 89, 232, .3), transparent 44%) !important;
}
#level-up .upgrade-option[data-quality="mythic"] {
  --card-accent: #ffd676;
  background-color: #53330d !important;
  background-image: radial-gradient(circle at 16% 50%, rgba(238, 166, 49, .3), transparent 44%) !important;
}

/* The badge is a compact pill like the reference, while its text remains white. */
#level-up .upgrade-option .card-quality,
#level-up .upgrade-option[data-quality] .card-quality {
  width: fit-content !important;
  max-width: 100% !important;
  padding: 4px 12px !important;
  border: 1px solid color-mix(in srgb, var(--card-accent) 58%, #d8ad4d) !important;
  border-radius: 999px !important;
  background: rgba(7, 13, 10, .36) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 1px 0 rgba(0,0,0,.2) !important;
  color: #fffbea !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.62) !important;
}

@media (max-width: 600px) {
  #level-up {
    padding: max(7px, env(safe-area-inset-top)) 10px max(9px, env(safe-area-inset-bottom)) !important;
  }

  #level-up .choice-panel {
    width: 100% !important;
    min-height: 0 !important;
    padding: 15px 0 10px !important;
  }

  #level-up .upgrade-option .card-quality,
  #level-up .upgrade-option[data-quality] .card-quality {
    padding: 3px 9px !important;
  }
}

/* v66: room browsing owns the upper half; creation and direct join stay below it. */
#multiplayer-lobby:not(.room-active) .multiplayer-panel {
  width: min(920px, calc(100vw - 28px)) !important;
  max-height: min(92vh, 840px) !important;
}

#multiplayer-lobby:not(.room-active) .room-directory {
  width: 100% !important;
  min-height: 240px !important;
}

#multiplayer-lobby:not(.room-active) .room-directory-list {
  min-height: 210px !important;
  max-height: min(42vh, 420px) !important;
  overflow-y: auto !important;
}

#multiplayer-lobby:not(.room-active) .multiplayer-directory-actions,
#multiplayer-lobby:not(.room-active) .multiplayer-create-row,
#multiplayer-lobby:not(.room-active) .room-code-form {
  width: 100% !important;
}

.room-countdown {
  display: grid;
  place-items: center;
  width: min(100%, 460px);
  min-height: 128px;
  margin: 10px auto 16px;
  color: #fff5c4;
  font: 900 clamp(58px, 10vw, 112px)/1 system-ui, sans-serif;
  letter-spacing: 0;
  text-shadow: 0 5px 0 #7b351e, 0 0 24px rgba(255, 205, 87, .86), 0 8px 24px rgba(0, 0, 0, .62);
  animation: room-countdown-pulse .8s ease-in-out infinite alternate;
}

.room-countdown[data-kind="selecting"] {
  font-size: clamp(46px, 8vw, 86px);
}

@keyframes room-countdown-pulse {
  from { transform: scale(.96); }
  to { transform: scale(1.04); }
}

@media (max-width: 600px) {
  #multiplayer-lobby:not(.room-active) .room-directory { min-height: 190px !important; }
  #multiplayer-lobby:not(.room-active) .room-directory-list {
    min-height: 165px !important;
    max-height: 31vh !important;
  }
  .room-countdown { min-height: 92px; }
}

/* v68: stable character roster. Keep this last so legacy wheel rules cannot stack cards. */
.character-list.character-roster {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(104px, 1fr)) !important;
  align-items: end !important;
  gap: 12px !important;
  width: 100% !important;
  height: min(42vh, 380px) !important;
  min-height: 250px !important;
  padding: 14px 18px 8px !important;
  overflow: visible !important;
  box-sizing: border-box;
}

.character-list.character-roster .character-option {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) 16px 46px !important;
  width: 100% !important;
  height: 92% !important;
  min-width: 0 !important;
  min-height: 220px !important;
  padding: 0 4px !important;
  opacity: 1 !important;
  filter: none !important;
  transform: scale(.94) !important;
  transform-origin: center bottom !important;
  border: 2px solid #9a642e !important;
  border-radius: 6px !important;
  background: rgba(255, 250, 220, .76) !important;
  box-shadow: 0 4px 0 #9d652c !important;
  overflow: hidden !important;
  transition: transform .18s ease, opacity .18s ease, filter .18s ease, border-color .18s ease !important;
}

.character-list.character-roster .character-option:hover {
  transform: scale(.97) translateY(-2px) !important;
}

.character-list.character-roster .character-option.active {
  z-index: 2 !important;
  height: 100% !important;
  opacity: 1 !important;
  filter: none !important;
  transform: scale(1) !important;
  border-color: #e0a72f !important;
  background: #ffe17b !important;
  box-shadow: 0 5px 0 #8a4c18, 0 0 0 3px rgba(255, 196, 47, .25) !important;
}

.character-list.character-roster .character-portrait {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.character-list.character-roster .character-portrait img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  filter: brightness(.72) saturate(.78) drop-shadow(0 14px 12px rgba(0, 0, 0, .42)) !important;
}

.character-list.character-roster .character-option.active .character-portrait img,
.character-list.character-roster .character-option:hover .character-portrait img {
  filter: brightness(1) saturate(1) drop-shadow(0 16px 14px rgba(0, 0, 0, .46)) !important;
}

.character-list.character-roster .character-option-label strong,
.character-list.character-roster .character-option-label small {
  color: #fff6dc !important;
}

.room-active .room-character-select.character-roster {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(104px, 1fr)) !important;
  align-items: end !important;
  gap: 12px !important;
  width: 100% !important;
  height: min(46vh, 410px) !important;
  min-height: 300px !important;
  padding: 10px 4px !important;
  overflow: visible !important;
  box-sizing: border-box;
}

.room-active .room-character-select.character-roster button {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto auto !important;
  width: 100% !important;
  height: 92% !important;
  min-width: 0 !important;
  min-height: 250px !important;
  opacity: 1 !important;
  filter: none !important;
  transform: scale(.94) !important;
  transform-origin: center bottom !important;
  overflow: hidden !important;
  transition: transform .18s ease, opacity .18s ease, filter .18s ease !important;
}

.room-active .room-character-select.character-roster button.active {
  z-index: 2 !important;
  height: 100% !important;
  opacity: 1 !important;
  filter: none !important;
  transform: scale(1) !important;
}

.room-active .room-character-select.character-roster img {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  filter: brightness(.72) saturate(.78) !important;
}

.room-active .room-character-select.character-roster button.active img,
.room-active .room-character-select.character-roster button:hover img {
  filter: brightness(1) saturate(1) !important;
}

.room-active .room-character-select.character-roster strong {
  color: #693916 !important;
  text-shadow: none !important;
}

.room-active .room-character-select.character-roster small {
  color: #765531 !important;
  text-shadow: none !important;
}

.room-active .room-character-select.character-roster button.active::after {
  content: "\5DF2\9009";
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  padding: 3px 7px;
  border-radius: 5px;
  color: #61320d;
  background: #ffd84c;
  font-size: 11px;
  font-weight: 900;
}

@media (max-width: 760px) {
  .character-list.character-roster,
  .room-active .room-character-select.character-roster {
    display: flex !important;
    align-items: stretch !important;
    gap: 10px !important;
    height: 250px !important;
    min-height: 250px !important;
    padding: 8px max(42px, calc((100vw - 164px) / 2)) 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: max(42px, calc((100vw - 164px) / 2));
    overscroll-behavior-x: contain;
    touch-action: pan-x;
  }

  .character-list.character-roster .character-option,
  .room-active .room-character-select.character-roster button {
    flex: 0 0 164px !important;
    width: 164px !important;
    height: 220px !important;
    min-height: 220px !important;
    scroll-snap-align: center;
  }

  .character-list.character-roster .character-option.active,
  .room-active .room-character-select.character-roster button.active {
    height: 228px !important;
  }
}

/* fix-v72: final mobile social contrast and collision-free lobby header. */
.social-drawer .friend-search-form > button,
.social-drawer .social-message-form > button,
.social-drawer .social-row-actions button:not([data-tone="quiet"]) {
  border-color: #154f55 !important;
  background: linear-gradient(#19798a 0 48%, #0f5b68 52% 100%) !important;
  color: #fffbea !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .72) !important;
  box-shadow: inset 0 2px rgba(255,255,255,.22), 0 4px 0 #623817 !important;
}

.social-drawer .social-row-actions button[data-tone="quiet"] {
  color: #553113 !important;
  text-shadow: none !important;
}

.social-drawer input,
.social-drawer input::placeholder,
.social-list strong,
.friend-section h3,
.online-directory-heading h3,
.conversation-heading strong {
  opacity: 1 !important;
  text-shadow: none !important;
}

@media (max-width: 600px) {
  .lobby-header {
    grid-template-columns: 38px minmax(72px, 1fr) minmax(112px, 138px) 68px !important;
    grid-template-rows: 40px 36px !important;
    min-height: 86px !important;
    height: 86px !important;
    flex-basis: 86px !important;
  }
  .header-leaderboard-button {
    left: calc(38px + (100% - 218px) / 2) !important;
    bottom: 3px !important;
    width: 78px !important;
    height: 30px !important;
  }
  .lobby-wallet {
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
  }
  .lobby-player-identity {
    grid-column: 4 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
  }
  .social-tabs button { font-size: 13px !important; }
  .friend-search-form > button,
  .social-message-form > button,
  .social-row-actions button { font-size: 13px !important; }
}
/* fix-v83: the hidden Boss challenge has a deliberately restricted lobby. */
#menu-boss-material {
  border-color: #c77b1a;
  color: #5a3212;
  background: linear-gradient(#ffe277 0 48%, #f2a521 52% 100%);
  box-shadow: inset 0 2px rgba(255,255,255,.34), 0 5px 0 #754018;
  font-weight: 900;
}

#menu-boss-material::before { content: "\2694"; }
#menu-boss-material:hover { background: linear-gradient(#ffe990 0 48%, #f6b43a 52% 100%); }

#lobby.boss-material-selection .lobby-header > :not(#lobby-back),
#lobby.boss-material-selection #shop-tabs,
#lobby.boss-material-selection #lobby-map-select,
#lobby.boss-material-selection .character-summary,
#lobby.boss-material-selection #lobby-multiplayer,
#lobby.boss-material-selection #meta-shop,
#lobby.boss-material-selection #social-drawer {
  display: none !important;
}

#lobby.boss-material-selection .lobby-header {
  flex: 0 0 48px;
  grid-template-columns: 48px;
  height: 48px;
  min-height: 48px;
  border-bottom: 0;
}

#lobby.boss-material-selection .lobby-character-view {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 84px;
  column-gap: 0;
  overflow: hidden;
}

#lobby.boss-material-selection .character-list {
  grid-column: 1;
  grid-row: 1;
  grid-template-columns: repeat(6, minmax(108px, 1fr));
}

#lobby.boss-material-selection .lobby-footer {
  grid-column: 1;
  grid-row: 2;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  min-height: 84px;
  padding: 10px 0;
}

#lobby.boss-material-selection #lobby-start { grid-column: 1; }

@media (max-width: 700px) {
  #lobby.boss-material-selection .character-list {
    grid-template-columns: repeat(6, minmax(112px, 1fr));
    gap: 8px;
    overflow-x: auto;
    padding-inline: 4px;
  }

  #lobby.boss-material-selection .character-option { min-height: 210px; }
  #lobby.boss-material-selection .character-portrait { min-height: 135px; }
  #lobby.boss-material-selection .lobby-footer { min-height: 76px; }
}

/* fix-v87: make the main-menu sponsor action unmistakable without changing HUD controls. */
#intro #menu-sponsor {
  min-height: 58px;
  border-color: #9f315d !important;
  background: linear-gradient(#ffc2d8 0 48%, #f276a6 52% 100%) !important;
  color: #6f193d !important;
  font-weight: 900;
  box-shadow:
    inset 0 2px rgba(255,255,255,.58),
    inset 0 -3px rgba(160,37,89,.18),
    0 5px 0 #a92f62,
    0 10px 24px rgba(255,79,145,.30) !important;
  animation: menu-sponsor-pulse 2.2s ease-in-out infinite;
}

#intro #menu-sponsor::before {
  color: #fff3a9;
  font-size: 23px;
  text-shadow: 0 2px #a92f62, 0 0 9px rgba(255,255,255,.86);
}

#intro #menu-sponsor:hover {
  border-color: #842347 !important;
  background: linear-gradient(#ffd0e0 0 48%, #fa8bb6 52% 100%) !important;
  color: #57112f !important;
  filter: brightness(1.04) saturate(1.08);
}

@keyframes menu-sponsor-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.09); }
}

@media (prefers-reduced-motion: reduce) {
  #intro #menu-sponsor { animation: none; }
}

/* fix-v87: a fresher lobby chrome with solid, high-contrast labels. */
#lobby:not(.boss-material-selection) .lobby-header {
  border-color: #39786c !important;
  background: linear-gradient(180deg, #e8f8f1 0 48%, #b8e2d4 52% 100%) !important;
  box-shadow:
    inset 0 2px rgba(255,255,255,.78),
    inset 0 -3px rgba(44,113,98,.13),
    0 4px 0 #39786c,
    0 9px 22px rgba(27,83,72,.18) !important;
}

#lobby:not(.boss-material-selection) .lobby-header > div:first-of-type p {
  color: #4c776f !important;
  font-weight: 800;
  text-shadow: none !important;
}

#lobby:not(.boss-material-selection) .lobby-header h2 {
  color: #214f47 !important;
  text-shadow: 0 1px rgba(255,255,255,.9) !important;
}

#lobby:not(.boss-material-selection) .lobby-player-identity {
  border-left-color: rgba(45,107,95,.28) !important;
}

#lobby:not(.boss-material-selection) .lobby-player-identity b {
  color: #214f47 !important;
  text-shadow: none !important;
}

#lobby:not(.boss-material-selection) .lobby-player-identity small {
  color: #49756d !important;
  text-shadow: none !important;
}

#lobby:not(.boss-material-selection) .lobby-tabs {
  border-color: #39786c !important;
  background: linear-gradient(180deg, #f5fcf9, #d2eee5) !important;
  box-shadow:
    inset 0 2px rgba(255,255,255,.8),
    0 4px 0 #39786c,
    0 8px 18px rgba(27,83,72,.15) !important;
}

#lobby:not(.boss-material-selection) .lobby-tabs button,
#lobby:not(.boss-material-selection) .lobby-tabs .community-tab {
  border-color: #579487 !important;
  background: linear-gradient(180deg, #edf9f5 0 48%, #b7dfd3 52% 100%) !important;
  color: #24544b !important;
  text-shadow: none !important;
  box-shadow:
    inset 0 2px rgba(255,255,255,.72),
    inset 0 -2px rgba(45,112,98,.12),
    0 3px 0 #4d8277 !important;
}

#lobby:not(.boss-material-selection) .lobby-tabs button::before {
  color: #39786c !important;
  text-shadow: 0 1px rgba(255,255,255,.9) !important;
}

#lobby:not(.boss-material-selection) .lobby-tabs button:hover {
  background: linear-gradient(180deg, #ffffff 0 48%, #c8eadf 52% 100%) !important;
  color: #153f38 !important;
}

#lobby:not(.boss-material-selection) .lobby-tabs button.active {
  border-color: #987026 !important;
  background: linear-gradient(180deg, #fff3a4 0 48%, #f6c94d 52% 100%) !important;
  color: #5d4216 !important;
  text-shadow: 0 1px rgba(255,255,255,.72) !important;
  box-shadow:
    inset 0 2px rgba(255,255,255,.64),
    inset 0 -3px rgba(170,102,18,.15),
    0 3px 0 #987026 !important;
}

#lobby:not(.boss-material-selection) .lobby-tabs button.active::before {
  color: #d06d31 !important;
}

#lobby:not(.boss-material-selection) .header-leaderboard-button {
  border-color: #987026 !important;
  background: linear-gradient(180deg, #fff5af 0 48%, #f2c449 52% 100%) !important;
  color: #5d4216 !important;
  text-shadow: none !important;
  box-shadow: inset 0 2px rgba(255,255,255,.62), 0 3px 0 #987026 !important;
}

#lobby:not(.boss-material-selection) .lobby-character-view,
#lobby:not(.boss-material-selection) .lobby-meta-view {
  border-color: #39786c !important;
  background: linear-gradient(180deg, rgba(247,253,250,.97), rgba(220,241,233,.97)) !important;
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.64),
    0 5px 0 #39786c,
    0 12px 28px rgba(27,83,72,.18) !important;
}

#lobby:not(.boss-material-selection) .character-option {
  border-color: #579487 !important;
  background: linear-gradient(180deg, #fffef5, #eef8f3) !important;
  box-shadow: 0 4px 0 #4d8277 !important;
}

#lobby:not(.boss-material-selection) .character-option:hover {
  border-color: #2f7568 !important;
  background: linear-gradient(180deg, #ffffff, #ddf2ea) !important;
}

#lobby:not(.boss-material-selection) .character-option.active {
  border-color: #aa7623 !important;
  background: linear-gradient(180deg, #fff4b2, #f6d664) !important;
  box-shadow: 0 5px 0 #987026, 0 0 0 3px rgba(255,211,77,.22) !important;
}

#lobby:not(.boss-material-selection) .character-platform {
  border-color: #4c887c !important;
  background: #91cbb9 !important;
}

#lobby:not(.boss-material-selection) .character-option.active .character-platform {
  border-color: #ae7b2c !important;
  background: #d5b85b !important;
}

#lobby:not(.boss-material-selection) .character-option-label {
  background: linear-gradient(180deg, #5e9d8f, #3c776c) !important;
}

#lobby:not(.boss-material-selection) .character-option-label strong {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(18,62,54,.62) !important;
}

#lobby:not(.boss-material-selection) .character-option-label small {
  color: #e8fff7 !important;
  text-shadow: 0 1px 2px rgba(18,62,54,.55) !important;
}

#lobby:not(.boss-material-selection) .character-option.active .character-option-label {
  background: linear-gradient(180deg, #8c6a27, #6f501e) !important;
}

#lobby:not(.boss-material-selection) .character-summary {
  border-color: #579487 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(223,243,235,.9)) !important;
  box-shadow: 0 4px 0 #39786c !important;
}

#lobby:not(.boss-material-selection) .character-summary h1,
#lobby:not(.boss-material-selection) .character-summary h3 {
  color: #214f47 !important;
  text-shadow: none !important;
}

#lobby:not(.boss-material-selection) .character-summary p {
  color: #406b63 !important;
  text-shadow: none !important;
}

#lobby:not(.boss-material-selection) .lobby-map-select button {
  border-color: #39786c !important;
  background: linear-gradient(180deg, #ebf8f3, #b7dfd3) !important;
  color: #24544b !important;
  text-shadow: none !important;
  box-shadow: 0 3px 0 #4d8277 !important;
}

#lobby:not(.boss-material-selection) .lobby-map-select button.active {
  border-color: #987026 !important;
  background: linear-gradient(180deg, #fff3a4, #f6c94d) !important;
  color: #5d4216 !important;
  box-shadow: 0 3px 0 #987026 !important;
}