/* Braden's Values v2.30.5 — reference-matched top toolbar and dropdowns. */
:root { --top: 58px !important; }

.topbar {
  height: var(--top) !important;
  min-height: var(--top) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 14px !important;
  background: transparent !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(126, 143, 181, 0.12) !important;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.12) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.topbar::before { display: none !important; }
.topbar .brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
}

.topbar-brand .brand-mark {
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  aspect-ratio: 1 / 1 !important;
  flex: 0 0 52px !important;
  border-radius: 8px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.topbar-brand .brand-mark img {
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  display: block !important;
}

.topbar-brand .brand-copy {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.02 !important;
  text-align: left !important;
}

.topbar-brand .brand-copy strong {
  color: #f5f6fb !important;
  font-size: 14px !important;
  font-weight: 780 !important;
  white-space: nowrap !important;
}

.topbar-brand .brand-copy span {
  color: #7f889a !important;
  font-size: 9px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  margin-top: 4px !important;
  white-space: nowrap !important;
}

.global-search {
  min-width: 190px !important;
  max-width: 430px !important;
  flex: 0 1 400px !important;
  width: min(100%, 430px) !important;
  margin: 0 0 0 96px !important;
}


.global-search input {
  height: 42px !important;
  padding: 0 18px 0 45px !important;
  border: 1px solid rgba(142, 157, 191, 0.16) !important;
  border-radius: 10px !important;
  background: rgba(6, 10, 18, 0.58) !important;
  color: #f4f6fb !important;
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 8px 24px rgba(0,0,0,.13) !important;
  -webkit-backdrop-filter: blur(10px) saturate(115%) !important;
  backdrop-filter: blur(10px) saturate(115%) !important;
}

.global-search input::placeholder { color: #7d8598 !important; opacity: 1; }
.global-search .search-icon { left: 14px !important; top: 12px !important; width: 18px !important; height: 18px !important; }
.global-search .search-icon img { width: 18px !important; height: 18px !important; opacity: .86; }
.global-search kbd { display: none !important; }

.topbar-controls {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
  margin-left: auto;
}

.top-online-pill,
.top-coin-button,
.top-square-button,
.top-profile-button {
  height: 39px !important;
  border: 1px solid rgba(142, 157, 191, 0.16) !important;
  border-radius: 9px !important;
  background: rgba(6, 10, 18, 0.58) !important;
  color: #e8ebf2 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 8px 24px rgba(0,0,0,.13) !important;
  -webkit-backdrop-filter: blur(10px) saturate(115%) !important;
  backdrop-filter: blur(10px) saturate(115%) !important;
}

.top-online-pill {
  position: static !important;
  transform: none !important;
  min-width: 94px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 13px !important;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.top-online-pill .presence-dot { width: 7px; height: 7px; background: #20df82; box-shadow: 0 0 0 4px rgba(32,223,130,.07),0 0 13px rgba(32,223,130,.75); }
.top-online-pill .online-separator { width: 12px; height: 1px; background: #687185; }
.top-online-pill strong { display: inline !important; color: #f3f5fa !important; font-size: 10px !important; font-variant-numeric: tabular-nums; }
.top-online-pill .live-label { color: #81899b; }
.top-online-pill.offline .presence-dot,
.top-online-pill.error .presence-dot { background: #6b7280; box-shadow: none; }

.top-menu-wrap { position: relative; }
.top-coin-button,
.top-profile-button,
.top-square-button {
  appearance: none;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.top-coin-button {
  min-width: 96px;
  gap: 8px;
  padding: 0 12px !important;
}
.top-dinocoin-image { width: 23px; height: 23px; object-fit: contain; filter: drop-shadow(0 3px 7px rgba(255,190,35,.28)); }
.top-coin-button b { min-width: 22px; color: #f7f7fa; font-size: 12px; font-variant-numeric: tabular-nums; }
.top-chevron { width: 13px; height: 13px; color: #626b7c; transition: transform .18s ease; }
[aria-expanded="true"] > .top-chevron { transform: rotate(180deg); }

.top-square-button { width: 42px !important; padding: 0 !important; border-radius: 9px !important; }
.top-square-button img,.top-square-button svg { width: 18px !important; height: 18px !important; opacity: .9; }
.top-square-button img { filter: brightness(0) saturate(100%) invert(91%) sepia(6%) saturate(166%) hue-rotate(188deg) brightness(103%) contrast(91%) !important; }

.top-profile-button {
  width: auto !important;
  min-width: 136px !important;
  max-width: 190px !important;
  border-radius: 9px !important;
  gap: 9px !important;
  padding: 0 11px 0 9px !important;
  overflow: visible !important;
}
.top-profile-button::after { display: none !important; }
.top-profile-avatar { width: 27px; height: 27px; display: grid; place-items: center; flex: 0 0 29px; border: 1px solid rgba(166,116,255,.4); border-radius: 8px; overflow: hidden; background: rgba(74,42,120,.6); box-shadow: 0 0 18px rgba(145,85,255,.2); }
.top-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.top-profile-button .guest-name { max-width: 96px !important; overflow: hidden; text-overflow: ellipsis; color: #eef0f5; font-size: 11px; font-weight: 760; white-space: nowrap; }

.top-online-pill:hover,
.top-coin-button:hover,
.top-square-button:hover,
.top-profile-button:hover,
.top-coin-button[aria-expanded="true"],
.top-profile-button[aria-expanded="true"] {
  border-color: rgba(163,112,255,.34) !important;
  background: rgba(12, 15, 28, 0.72) !important;
}

.top-dropdown {
  position: absolute;
  z-index: 260;
  top: calc(100% + 10px);
  right: 0;
  width: 318px;
  padding: 9px;
  border: 1px solid rgba(154, 167, 199, .16);
  border-radius: 15px;
  background: rgba(6, 8, 15, .93);
  box-shadow: 0 28px 80px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.03);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
  backdrop-filter: blur(22px) saturate(125%);
  animation: topMenuIn .14s ease;
}
.top-dropdown[hidden], #topProfileGuest[hidden], #topProfileUser[hidden] { display: none !important; }
@keyframes topMenuIn { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: none; } }

.top-dropdown button {
  width: 100%;
  min-height: 53px;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #dfe3ec;
  text-align: left;
  cursor: pointer;
}
.top-dropdown button:hover { background: rgba(141,91,230,.12); }
.top-dropdown button > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.top-dropdown button b { font-size: 11px; font-weight: 790; }
.top-dropdown button small { color: #777f91; font-size: 9px; line-height: 1.25; }
.top-dropdown button i { color: #697184; font-size: 17px; font-style: normal; }
.dropdown-icon,.dropdown-line-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.07); border-radius: 9px; background: rgba(255,255,255,.035); color: #b9a3ff; }
.dropdown-icon img { width: 23px; height: 23px; object-fit: contain; }
.dropdown-line-icon { font-size: 16px; }

.dropdown-balance-card,
.dropdown-profile-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 7px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(129,76,224,.14), rgba(255,255,255,.025));
}
.dropdown-balance-card > img { width: 43px; height: 43px; object-fit: contain; filter: drop-shadow(0 5px 12px rgba(255,189,25,.25)); }
.dropdown-balance-card div,.dropdown-profile-head div { min-width: 0; display: grid; gap: 2px; }
.dropdown-balance-card span,.dropdown-profile-head span { color: #8a91a3; font-size: 8px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.dropdown-balance-card strong,.dropdown-profile-head strong { color: #f5f6fa; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-balance-card small,.dropdown-profile-head small { color: #777f91; font-size: 9px; }
.dropdown-profile-avatar { width: 43px; height: 43px; display: grid; place-items: center; flex: 0 0 43px; border: 1px solid rgba(166,116,255,.35); border-radius: 11px; overflow: hidden; background: linear-gradient(145deg,#452474,#1d102f); color: #fff; font-size: 17px; font-weight: 900; }
.dropdown-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dropdown-auth-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dropdown-auth-actions button { min-height: 42px; display: flex; justify-content: center; padding: 0 12px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.035); text-align: center; font-size: 11px; font-weight: 800; }
.dropdown-auth-actions .dropdown-primary { border-color: rgba(165,112,255,.34); background: linear-gradient(135deg, rgba(132,78,222,.88), rgba(84,55,159,.92)); }
.dropdown-divider { height: 1px; margin: 7px 5px; background: rgba(255,255,255,.07); }
.top-dropdown .dropdown-danger { color: #ff9ba1; }
.top-dropdown .dropdown-danger:hover { background: rgba(255,82,100,.1); }

/* Replace every legacy generated coin disc with the supplied DinoCoin artwork. */
.dino-coin-icon { border: 0 !important; border-radius: 0 !important; background: url('./assets/ui/dinocoin-purple.svg') center/contain no-repeat !important; box-shadow: none !important; filter: drop-shadow(0 3px 8px rgba(255,190,35,.2)); }
.dino-coin-icon svg { display: none !important; }
img[src$="/dinocoin.png"], img[src$="dinocoin.png"] { object-fit: contain; filter: drop-shadow(0 3px 8px rgba(255,190,35,.2)) !important; }

@media (max-width: 1180px) {
  .global-search { max-width: 360px !important; flex-basis: 320px !important; }
  .topbar-brand .brand-mark { width: 48px !important; min-width: 48px !important; max-width: 48px !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; aspect-ratio: 1 / 1 !important; flex-basis: 48px !important; border-radius: 8px !important; }
  .topbar-brand .brand-copy span { display: none !important; }
}

@media (max-width: 1000px) {
  .topbar-brand .brand-copy { display: none !important; }
  .topbar-brand .brand-mark { width: 46px !important; min-width: 46px !important; max-width: 46px !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; aspect-ratio: 1 / 1 !important; flex-basis: 46px !important; border-radius: 8px !important; }
  .top-profile-button { min-width: 52px !important; width: 52px !important; padding: 0 !important; }
  .top-profile-button .guest-name,.top-profile-button .top-chevron { display: none !important; }
}

@media (max-width: 900px) and (min-width: 768px) {
  .topbar { gap: 10px !important; padding: 8px 10px !important; }
  .top-online-pill { display: none !important; }
  .top-square-button { width: 44px !important; }
  .top-coin-button { min-width: 82px; }
}

@media (max-width: 767px) {
  :root {
    --mobile-header-content: 96px;
    --mobile-header-height: calc(var(--mobile-safe-top) + var(--mobile-header-content));
    --top: var(--mobile-header-height) !important;
  }
  .topbar {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto auto auto !important;
    grid-template-rows: 44px 40px !important;
    column-gap: 7px !important;
    row-gap: 8px !important;
    height: var(--mobile-header-height) !important;
    min-height: var(--mobile-header-height) !important;
    padding: var(--mobile-safe-top) max(10px,env(safe-area-inset-right,0px)) 8px max(10px,env(safe-area-inset-left,0px)) !important;
  }
  .topbar .brand { display: none !important; }
  .global-search { grid-column: 1 / -1 !important; grid-row: 1 !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; }
  .global-search input { height: 44px !important; font-size: 15px !important; }
  .global-search .search-icon { top: 13px !important; }
  .topbar-controls { display: contents !important; }
  .top-online-pill { display: none !important; }
  .coin-menu-wrap { grid-column: 1 !important; grid-row: 2 !important; justify-self: start; }
  .top-coin-button { height: 40px !important; min-width: 82px; border-radius: 11px !important; }
  #exportBtn { grid-column: 2 !important; grid-row: 2 !important; }
  #topUpdatesBtn { grid-column: 3 !important; grid-row: 2 !important; }
  .profile-menu-wrap { grid-column: 4 !important; grid-row: 2 !important; justify-self: end; }
  .top-square-button,.top-profile-button { width: 40px !important; min-width: 40px !important; height: 40px !important; border-radius: 11px !important; }
  .top-profile-avatar { width: 26px; height: 26px; flex-basis: 26px; }
  .top-dropdown { position: fixed; top: calc(var(--mobile-header-height) + 7px); right: max(10px,env(safe-area-inset-right,0px)); left: max(10px,env(safe-area-inset-left,0px)); width: auto; max-height: calc(100vh - var(--mobile-header-height) - 90px); overflow: auto; }
  .coin-dropdown { right: max(10px,env(safe-area-inset-right,0px)); }
}

@media (max-width: 390px) {
  #exportBtn { display: none !important; }
  .topbar { grid-template-columns: minmax(0,1fr) auto auto !important; }
  #topUpdatesBtn { grid-column: 2 !important; }
  .profile-menu-wrap { grid-column: 3 !important; }
}

/* v2.30.34.3.8.43: reliable owner admin launcher */
.top-dropdown .owner-admin-entry {
  color: #d9ceff;
  background: rgba(139, 124, 255, 0.055);
}
.top-dropdown .owner-admin-entry:hover { background: rgba(139, 124, 255, 0.13); }
.top-dropdown .owner-admin-entry .dropdown-line-icon {
  border-color: rgba(139, 124, 255, 0.24);
  background: rgba(139, 124, 255, 0.12);
  color: #c9b8ff;
}