/* glass-overrides.css — icy frost glass for topbar controls */

/* Topbar: cooler translucent ice sheet */
@media (max-width: 959px) {
  html[data-theme="dark"] .topbar {
    background: linear-gradient(
        180deg,
        rgba(186, 220, 255, 0.10),
        rgba(12, 24, 44, 0.28)
      ),
      rgba(10, 20, 38, 0.32) !important;
    border-bottom: 1px solid rgba(186, 220, 255, 0.08) !important;
    box-shadow:
      inset 0 1px 0 rgba(220, 240, 255, 0.14),
      0 12px 28px rgba(2, 8, 18, 0.28) !important;
    backdrop-filter: blur(32px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(190%) !important;
  }
  html[data-theme="light"] .topbar {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.42),
        rgba(230, 242, 255, 0.22)
      ),
      rgba(255, 252, 248, 0.30) !important;
    border-bottom: 1px solid rgba(160, 190, 220, 0.12) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.65),
      0 12px 28px rgba(40, 38, 34, 0.08) !important;
    backdrop-filter: blur(32px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(190%) !important;
  }
}

/* Icon buttons — ice cubes */
.topbar .icon-btn,
.city-tools .icon-btn,
.top-actions .icon-btn {
  background:
    linear-gradient(145deg, rgba(230, 245, 255, 0.34) 0%, rgba(140, 190, 240, 0.08) 45%, rgba(20, 36, 64, 0.18) 100%) !important;
  border: 1px solid rgba(200, 230, 255, 0.38) !important;
  color: #eef6ff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(80, 130, 180, 0.18),
    0 8px 18px rgba(4, 12, 28, 0.22) !important;
  backdrop-filter: blur(22px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
}
html[data-theme="light"] .topbar .icon-btn,
html[data-theme="light"] .city-tools .icon-btn,
html[data-theme="light"] .top-actions .icon-btn {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.78) 0%, rgba(210, 232, 255, 0.35) 55%, rgba(255, 252, 248, 0.28) 100%) !important;
  border-color: rgba(170, 200, 230, 0.45) !important;
  color: #243044 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(140, 170, 200, 0.12),
    0 8px 16px rgba(60, 90, 130, 0.08) !important;
}

.topbar .icon-btn.is-active,
.city-tools .icon-btn.is-active,
.top-actions .icon-btn.is-active {
  background:
    linear-gradient(145deg, rgba(232, 228, 220, 0.48) 0%, rgba(196, 181, 154, 0.22) 100%) !important;
  border-color: rgba(232, 228, 220, 0.55) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 0 0 1px rgba(196, 181, 154, 0.18),
    0 8px 18px rgba(40, 100, 180, 0.18) !important;
}
html[data-theme="light"] .topbar .icon-btn.is-active,
html[data-theme="light"] .city-tools .icon-btn.is-active,
html[data-theme="light"] .top-actions .icon-btn.is-active {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.88) 0%, rgba(190, 220, 250, 0.42) 100%) !important;
  border-color: rgba(120, 160, 210, 0.5) !important;
  color: #1e3350 !important;
}

/* Count badges — vivid alert red */
.topbar .icon-btn .dot,
.city-tools .icon-btn .dot,
.top-actions .icon-btn .dot {
  background: #E53935 !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(229, 57, 53, 0.45) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-weight: 750 !important;
}

/* Resource chips — ice badges */
.topbar .resbar > .res-chip,
.topbar .res-chip,
.resbar > .res-chip {
  background:
    linear-gradient(145deg, rgba(230, 245, 255, 0.30) 0%, rgba(140, 190, 240, 0.08) 50%, rgba(32, 34, 38, 0.22) 100%) !important;
  border: 1px solid rgba(200, 230, 255, 0.32) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(80, 130, 180, 0.14),
    0 6px 14px rgba(4, 12, 28, 0.18) !important;
  backdrop-filter: blur(18px) saturate(175%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(175%) !important;
  color: #f2f8ff !important;
}
html[data-theme="light"] .topbar .resbar > .res-chip,
html[data-theme="light"] .topbar .res-chip,
html[data-theme="light"] .resbar > .res-chip {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.82) 0%, rgba(210, 232, 255, 0.38) 60%, rgba(255, 252, 248, 0.35) 100%) !important;
  border-color: rgba(170, 200, 230, 0.42) !important;
  color: #243044 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 6px 14px rgba(60, 90, 130, 0.08) !important;
}

/* Bottom dock active — icy glide */
@media (max-width: 959px) {
  #tabbar .tab-glide,
  .tabbar:not(.tabbar-right):not(#tabbar-right) .tab-glide {
    background:
      linear-gradient(180deg, rgba(232, 228, 220, 0.28), rgba(196, 181, 154, 0.10)) !important;
    border: 1px solid rgba(200, 230, 255, 0.36) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      0 6px 14px rgba(0, 0, 0, 0.22) !important;
    backdrop-filter: blur(16px) saturate(175%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(175%) !important;
  }
  html[data-theme="light"] #tabbar .tab-glide,
  html[data-theme="light"] .tabbar:not(.tabbar-right):not(#tabbar-right) .tab-glide {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(200, 225, 250, 0.28)) !important;
    border-color: rgba(160, 190, 220, 0.4) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.75),
      0 6px 14px rgba(40, 38, 34, 0.08) !important;
  }
  #tabbar .tab.is-active .tab-fab,
  .tabbar:not(.tabbar-right) .tab.is-active .tab-fab {
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Dock shell ice */
  #tabbar::before,
  .tabbar:not(.tabbar-right):not(#tabbar-right)::before {
    background:
      linear-gradient(180deg, rgba(200, 230, 255, 0.14), rgba(12, 24, 44, 0.42)) !important;
    border: 1px solid rgba(186, 220, 255, 0.22) !important;
    box-shadow:
      inset 0 1px 0 rgba(220, 240, 255, 0.22),
      0 16px 34px rgba(2, 8, 18, 0.32) !important;
    backdrop-filter: blur(30px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(190%) !important;
  }
  html[data-theme="light"] #tabbar::before,
  html[data-theme="light"] .tabbar:not(.tabbar-right)::before {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(220, 236, 255, 0.32)) !important;
    border-color: rgba(160, 190, 220, 0.32) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.75),
      0 16px 34px rgba(40, 38, 34, 0.10) !important;
  }
}

/* Tablet gutters — pages (classic mobile shell <960) */
@media (min-width: 600px) and (max-width: 959px) {
  html,
  html[data-theme="light"],
  html[data-theme="dark"] {
    --space: 45px;
  }
  .view {
    padding-left: 45px !important;
    padding-right: 45px !important;
  }
  #tabbar,
  .tabbar:not(.tabbar-right):not(#tabbar-right) {
    left: 0 !important;
    right: 0 !important;
    width: min(400px, calc(100% - 80px)) !important;
    max-width: 400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/*
  Chat/sohbet full-bleed override in app.css (max-width:959):
  body[data-screen=chat|thread] .view:has(.chat-screen) { padding-left/right: 0 !important; }
  That zeroed gutters while on chat; leaving dropped the rule → brief padding flash.
  Restore 45px on the view only. Composer stays left:0 inside chat-screen (already inset by view padding).
*/
@media (min-width: 600px) and (max-width: 1366px) {
  body[data-screen="chat"] .view:has(.chat-screen),
  body[data-screen="thread"] .view:has(.chat-screen),
  body[data-screen="inbox"] .view,
  body[data-screen="chat"] .view,
  body[data-screen="thread"] .view {
    padding-left: 45px !important;
    padding-right: 45px !important;
  }

  /* Undo android absolute 8px edge pin — sit flush to padded chat-screen */
  html.android-app body[data-screen="chat"] .chat-screen:not(.is-dm) > .composer,
  html.android-app body[data-screen="chat"] .chat-screen:not(.is-dm) > .reply-bar,
  html.android-app body[data-screen="chat"] .chat-screen.is-dm > .composer,
  html.android-app body[data-screen="thread"] .chat-screen.is-dm > .composer,
  html.android-app body[data-screen="chat"] .chat-screen.is-dm > .reply-bar,
  html.android-app body[data-screen="thread"] .chat-screen.is-dm > .reply-bar,
  body[data-screen="chat"] .chat-screen.is-dm > .composer,
  body[data-screen="thread"] .chat-screen.is-dm > .composer,
  body[data-screen="chat"] .chat-screen.is-dm > .reply-bar,
  body[data-screen="thread"] .chat-screen.is-dm > .reply-bar {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* === sohbet: hide navbar, player card only (mobile) === */
/*
  IMPORTANT: do NOT key off body[data-screen="thread"] alone.
  navigation sets data-screen before AJAX paints the DM, which made the
  topbar vanish while the inbox was still on screen. Hide only when
  .chat-screen.is-dm is actually in the DOM so the swap looks atomic.
  Desktop keeps side tabbars + topbar — only immersive on max-width 959.
*/
@media (max-width: 959px) {
  body:has(.chat-screen.is-dm) .topbar,
  body:has(.chat-screen.is-dm) #topbar,
  body:has(.chat-screen.is-dm) .resbar,
  html.android-app body:has(.chat-screen.is-dm) .topbar,
  html.android-app body:has(.chat-screen.is-dm) #topbar,
  body:has(.chat-screen.is-dm) .tabbar,
  body:has(.chat-screen.is-dm) #tabbar,
  body:has(.chat-screen.is-dm) #tabbar-right,
  body:has(.chat-screen.is-dm) .tabbar-right {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* No topbar offset once DM chrome is mounted (mobile) */
  body:has(.chat-screen.is-dm) .view,
  body:has(.chat-screen.is-dm) .view:has(.chat-screen),
  html.android-app body:has(.chat-screen.is-dm) .view,
  html.android-app body[data-screen="thread"]:has(.chat-screen.is-dm) .view {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Desktop DM: keep dual side navs + topbar; tighten center column only */
@media (min-width: 960px) {
  body[data-screen="thread"] .shell > #tabbar,
  body[data-screen="thread"] .shell > .tabbar:not(.tabbar-right),
  body[data-screen="thread"] .shell > #tabbar-right,
  body[data-screen="thread"] .shell > .tabbar-right,
  body:has(.chat-screen.is-dm) .shell > #tabbar,
  body:has(.chat-screen.is-dm) .shell > .tabbar:not(.tabbar-right),
  body:has(.chat-screen.is-dm) .shell > #tabbar-right,
  body:has(.chat-screen.is-dm) .shell > .tabbar-right {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
  }
  body[data-screen="thread"] .topbar,
  body[data-screen="thread"] #topbar,
  body:has(.chat-screen.is-dm) .topbar,
  body:has(.chat-screen.is-dm) #topbar {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
  }
  body:has(.chat-screen.is-dm) .view,
  body:has(.chat-screen.is-dm) .view:has(.chat-screen),
  body[data-screen="thread"] .view {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
  }
  body:has(.chat-screen.is-dm) .chat-screen.is-dm > .section-head {
    border-radius: 0 !important;
    /* desktop: no mobile safe-area gap above player card */
    padding-top: 10px !important;
  }
}

/* Player card: flush to top + edges */
body:has(.chat-screen.is-dm) .chat-screen.is-dm > .section-head,
.chat-screen.is-dm > .section-head {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 6 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 14px 12px !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(200, 230, 255, 0.22) !important;
  background:
    linear-gradient(180deg, rgba(230, 245, 255, 0.22), rgba(32, 34, 38, 0.42)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 8px 20px rgba(2, 8, 18, 0.18) !important;
  backdrop-filter: blur(22px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
}
html[data-theme="light"] body:has(.chat-screen.is-dm) .chat-screen.is-dm > .section-head,
html[data-theme="light"] .chat-screen.is-dm > .section-head {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(230, 240, 255, 0.42)) !important;
  border-bottom-color: rgba(160, 190, 220, 0.32) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 8px 18px rgba(40, 38, 34, 0.06) !important;
  color: #243044 !important;
}

.chat-screen.is-dm > .section-head .dm-back {
  flex: none !important;
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}
html[data-theme="light"] .chat-screen.is-dm > .section-head .dm-back {
  background: rgba(255, 255, 255, 0.55) !important;
  border-color: rgba(110, 104, 94, 0.18) !important;
}

.chat-screen.is-dm > .section-head .dm-identity {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.chat-screen.is-dm > .section-head .screen-title {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 750 !important;
  line-height: 1.15 !important;
}

.chat-screen.is-dm > .section-head .dm-presence {
  margin: 2px 0 0 !important;
  font-size: 12px !important;
}

.chat-screen.is-dm {
  --dm-lift: 0px !important;
  margin-top: 0 !important;
}

/* Clear absolute player card — beat android padding-top:0 */
body:has(.chat-screen.is-dm) .chat-screen.is-dm .chat-log,
body:has(.chat-screen.is-dm) .chat-screen.is-dm > .chat-log,
html.android-app body:has(.chat-screen.is-dm) .chat-screen > .chat-log,
html.android-app body:has(.chat-screen.is-dm) .chat-screen.is-dm > .chat-log,
html.android-app body[data-screen="thread"] .chat-screen.is-dm > .chat-log {
  padding-top: calc(var(--dm-top, 72px) + 12px) !important;
  margin-top: 0 !important;
  scroll-padding-top: calc(var(--dm-top, 72px) + 12px) !important;
}

/* composer flush removed — see sohbet composer match world-chat */

@media (min-width: 600px) and (max-width: 1366px) {
  body:has(.chat-screen.is-dm) .chat-screen.is-dm .chat-log {
    padding-left: 45px !important;
    padding-right: 45px !important;
  }
}

/* sohbet-lock chrome — mobile only (desktop keeps side navs) */
@media (max-width: 959px) {
  body.is-sohbet-lock .topbar,
  body.is-sohbet-lock #topbar,
  body.is-sohbet-lock .resbar,
  body.is-sohbet-lock .tabbar,
  body.is-sohbet-lock #tabbar,
  body.is-sohbet-lock #tabbar-right,
  body.is-sohbet-lock .tabbar-right {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}
/* end-sohbet-hide-navbar */

/* === sohbet composer match world-chat === */
/* Undo edge-flush flat bar; use the same rounded glass textarea as world chat */
.chat-screen.is-dm > .composer,
html.android-app .chat-screen.is-dm > .composer,
html.android-app body[data-screen="thread"] .chat-screen.is-dm > .composer,
body:has(.chat-screen.is-dm) .chat-screen.is-dm > .composer {
  left: 8px !important;
  right: 8px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 8px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  align-items: flex-end !important;
  gap: 8px !important;
}

.chat-screen.is-dm > .composer textarea,
html.android-app .chat-screen.is-dm > .composer textarea {
  flex: 1 !important;
  min-width: 0 !important;
  min-height: 48px !important;
  max-height: 120px !important;
  padding: 12px 16px !important;
  border-radius: 18px !important;
  border: 1px solid var(--glass-line) !important;
  background: var(--glass-bg-strong) !important;
  box-shadow: none !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  color: inherit !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
}

.chat-screen.is-dm > .composer .btn.send,
html.android-app .chat-screen.is-dm > .composer .btn.send {
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
}

.chat-screen.is-dm > .reply-bar,
html.android-app .chat-screen.is-dm > .reply-bar {
  left: 8px !important;
  right: 8px !important;
  width: auto !important;
  margin: 0 !important;
  border-radius: 16px !important;
}

/* Keep android keyboard offset, but same 8px side inset as world chat */
html.android-app .chat-screen.is-dm > .composer {
  bottom: calc(7px + var(--kb-inset, 0px)) !important;
}
html.android-app .chat-screen.is-dm > .reply-bar {
  bottom: calc(7px + var(--kb-inset, 0px) + var(--dm-form, 60px) + 6px) !important;
}
/* end-sohbet-composer-match-chat */

/* === chat-lock chrome === */
/* Same idea as sohbet-lock: cover enter/leave paint gap for world chat */
body.is-chat-lock .tabbar,
body.is-chat-lock #tabbar,
body.is-chat-lock #tabbar-right,
body.is-chat-lock .tabbar-right {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* While entering /chat, keep previous page chrome until .chat-screen lands.
   Scope to #view so the world-dock chat does not hide desktop side navs. */
body:has(#view > .chat-screen:not(.is-dm)) .tabbar,
body:has(#view > .chat-screen:not(.is-dm)) #tabbar,
body:has(#view > .chat-screen:not(.is-dm)) #tabbar-right,
body:has(#view > .chat-screen:not(.is-dm)) .tabbar-right,
body[data-screen="chat"]:has(.chat-screen:not(.is-dm)) .tabbar,
body[data-screen="chat"]:has(.chat-screen:not(.is-dm)) #tabbar,
body[data-screen="chat"]:has(.chat-screen:not(.is-dm)) #tabbar-right,
body[data-screen="chat"]:has(.chat-screen:not(.is-dm)) .tabbar-right {
  display: none !important;
}
/* end-chat-lock-chrome */

/* === topbar logo left === */
@media (max-width: 959px) {
  .topbar .city-head.topbar-mobile {
    justify-content: flex-start !important;
  }
  .topbar .city-brand {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    z-index: 1 !important;
    margin-right: auto !important;
    padding: 0 !important;
    background: none !important;
  }
  .topbar .city-brand:hover {
    transform: none !important;
  }
  .topbar .city-brand img,
  .topbar .city-brand .brand-logo {
    height: 34px !important;
    max-width: 120px !important;
  }
  .topbar .city-tools {
    margin-left: auto !important;
  }
  /* Player chip removed from navbar */
  .topbar .city-player,
  .topbar .topbar-user {
    display: none !important;
  }
}
@media (min-width: 960px) {
  .topbar .topbar-user,
  .topbar-row .city-player {
    display: none !important;
  }
  .topbar .brand-lockup {
    margin-right: auto !important;
  }
}
/* end-topbar-logo-left */

/* === home menu grid tidy === */
.home-block .home-tools.home-city-grid,
.home-block .home-tools.home-game-grid {
  display: grid !important;
  gap: 6px !important;
  margin-top: 2px !important;
  align-items: stretch !important;
}

/* 5 across for both city + game */
.home-block .home-tools.home-city-grid,
.home-block .home-tools.home-game-grid,
.home-block .home-tools.home-tools-3.home-game-grid,
.home-block .home-tools.home-tools-4.home-city-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.home-block .home-city-grid .home-tool,
.home-block .home-game-grid .home-tool,
.home-block .home-game-grid .home-settings,
.home-block .home-game-grid .home-help,
.home-block .home-game-grid .home-logout,
.home-block .home-city-grid .home-settings,
.home-block .home-city-grid .home-help,
.home-block .home-city-grid .home-logout {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  padding: 6px 2px 5px !important;
  gap: 3px !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  grid-template-rows: none !important;
  grid-template-columns: none !important;
  justify-items: center !important;
  box-sizing: border-box !important;
}

/* Bigger icons */
.home-block .home-city-grid .home-tool > img,
.home-block .home-city-grid .home-tool > .icon,
.home-block .home-city-grid .home-tool .home-pin-img,
.home-block .home-city-grid .home-caravan,
.home-block .home-city-grid .home-merchant,
.home-block .home-city-grid .home-tax,
.home-block .home-city-grid .home-hunt-ico,
.home-block .home-city-grid .home-health,
.home-block .home-game-grid .home-tool > img,
.home-block .home-game-grid .home-settings > img,
.home-block .home-game-grid .home-help > img,
.home-block .home-game-grid .home-logout > .icon,
.home-block .home-game-grid .home-online,
.home-block .home-game-grid .home-friends,
.home-block .home-game-grid .home-leaders,
.home-block .home-game-grid .home-settings-img,
.home-block .home-game-grid .home-help-img,
.home-block .home-city-grid .home-tool > svg,
.home-block .home-game-grid .home-tool > svg {
  width: 42px !important;
  height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
  object-fit: contain !important;
  flex: none !important;
  margin: 0 auto !important;
  display: block !important;
  align-self: center !important;
  justify-self: center !important;
}

/* Labels centered */
.home-block .home-city-grid .home-tool > span,
.home-block .home-game-grid .home-tool > span,
.home-block .home-game-grid .home-settings > span,
.home-block .home-game-grid .home-help > span,
.home-block .home-game-grid .home-logout > span {
  width: 100% !important;
  font-size: 9.5px !important;
  line-height: 1.15 !important;
  font-weight: 650 !important;
  margin: 0 !important;
  padding: 0 1px !important;
  max-width: 100% !important;
  text-align: center !important;
  display: block !important;
  align-self: center !important;
  -webkit-line-clamp: unset !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.home-block .home-menu-head {
  margin: 12px 0 6px !important;
}
.home-block .home-menu-head:first-of-type {
  margin-top: 2px !important;
}

@media (min-width: 600px) {
  .home-block .home-city-grid .home-tool > img,
  .home-block .home-city-grid .home-tool .home-pin-img,
  .home-block .home-city-grid .home-caravan,
  .home-block .home-city-grid .home-merchant,
  .home-block .home-city-grid .home-tax,
  .home-block .home-city-grid .home-hunt-ico,
  .home-block .home-city-grid .home-health,
  .home-block .home-game-grid .home-tool > img,
  .home-block .home-game-grid .home-settings > img,
  .home-block .home-game-grid .home-help > img,
  .home-block .home-game-grid .home-online,
  .home-block .home-game-grid .home-friends,
  .home-block .home-game-grid .home-leaders,
  .home-block .home-game-grid .home-settings-img,
  .home-block .home-game-grid .home-help-img,
  .home-block .home-game-grid .home-logout > .icon {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
  }
  .home-block .home-city-grid .home-tool > span,
  .home-block .home-game-grid .home-tool > span,
  .home-block .home-game-grid .home-settings > span,
  .home-block .home-game-grid .home-help > span,
  .home-block .home-game-grid .home-logout > span {
    font-size: 11px !important;
    white-space: normal !important;
  }
}

@media (max-width: 380px) {
  .home-block .home-city-grid .home-tool > img,
  .home-block .home-city-grid .home-tool .home-pin-img,
  .home-block .home-game-grid .home-tool > img,
  .home-block .home-game-grid .home-settings > img,
  .home-block .home-game-grid .home-help > img,
  .home-block .home-game-grid .home-online,
  .home-block .home-game-grid .home-friends,
  .home-block .home-game-grid .home-leaders {
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
  }
  .home-block .home-city-grid .home-tool > span,
  .home-block .home-game-grid .home-tool > span,
  .home-block .home-game-grid .home-settings > span,
  .home-block .home-game-grid .home-help > span,
  .home-block .home-game-grid .home-logout > span {
    font-size: 8.5px !important;
  }
}
/* end-home-menu-grid-tidy */
/* desktop-btn-simple — flatter topbar controls on desktop only */
@media (min-width: 960px) {
    .topbar .icon-btn,
    .top-actions .icon-btn,
    .city-tools .icon-btn {
        background: color-mix(in srgb, var(--bg-elevated) 72%, transparent) !important;
        border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent) !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        color: var(--text-primary) !important;
        border-radius: 12px !important;
    }
    html[data-theme="light"] .topbar .icon-btn,
    html[data-theme="light"] .top-actions .icon-btn,
    html[data-theme="light"] .city-tools .icon-btn {
        background: color-mix(in srgb, #fff 78%, transparent) !important;
        border-color: color-mix(in srgb, var(--border-color) 70%, transparent) !important;
        color: var(--text-primary) !important;
        box-shadow: none !important;
    }
    .topbar .icon-btn.is-active,
    .top-actions .icon-btn.is-active,
    .city-tools .icon-btn.is-active {
        background: color-mix(in srgb, var(--accent) 18%, var(--bg-elevated)) !important;
        border-color: color-mix(in srgb, var(--accent) 35%, var(--border-color)) !important;
        color: var(--accent-text) !important;
        box-shadow: none !important;
    }
    .topbar .icon-btn .dot,
    .top-actions .icon-btn .dot,
    .city-tools .icon-btn .dot {
        background: #E53935 !important;
        border: 1px solid rgba(255, 255, 255, 0.22) !important;
        box-shadow: 0 2px 6px rgba(229, 57, 53, 0.45) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        font-weight: 750 !important;
    }
    .topbar .resbar > .res-chip,
    .topbar .res-chip,
    .resbar > .res-chip,
    .res-strip .res-chip {
        background: color-mix(in srgb, var(--bg-elevated) 70%, transparent) !important;
        border: 1px solid color-mix(in srgb, var(--border-color) 75%, transparent) !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        color: var(--text-primary) !important;
    }
    html[data-theme="light"] .topbar .resbar > .res-chip,
    html[data-theme="light"] .topbar .res-chip,
    html[data-theme="light"] .resbar > .res-chip,
    html[data-theme="light"] .res-strip .res-chip {
        background: color-mix(in srgb, #fff 82%, transparent) !important;
        border-color: color-mix(in srgb, var(--border-color) 65%, transparent) !important;
        box-shadow: none !important;
    }
    .topbar .icon-btn:hover,
    .top-actions .icon-btn:hover,
    .resbar > .res-chip:hover,
    .res-strip .res-chip:hover {
        transform: none !important;
        filter: none !important;
        border-color: color-mix(in srgb, var(--accent) 28%, var(--border-color)) !important;
        background: color-mix(in srgb, var(--accent) 10%, var(--bg-elevated)) !important;
    }
}

/* === home health icon size === */
.home-block .home-city-grid .home-tool .home-health,
.home-block .home-city-grid .home-health {
  width: 30px !important;
  height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;
}
@media (min-width: 600px) {
  .home-block .home-city-grid .home-tool .home-health,
  .home-block .home-city-grid .home-health {
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
  }
}
/* end-home-health-icon-size */

/* === home user card compact === */
.home-user-card {
  gap: 8px !important;
  margin: 0 0 6px !important;
  padding: 10px !important;
  border-radius: 16px !important;
  background:
    linear-gradient(145deg, rgba(196, 181, 154, 0.14), rgba(32, 34, 38, 0.18) 55%, transparent),
    color-mix(in srgb, var(--glass-bg-strong) 72%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--glass-line) 90%, transparent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 8px 18px rgba(2, 8, 18, 0.12) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
}
html[data-theme="light"] .home-user-card {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.55), rgba(210, 232, 255, 0.22)),
    rgba(255, 252, 248, 0.72) !important;
  border-color: rgba(160, 190, 220, 0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 8px 16px rgba(40, 38, 34, 0.06) !important;
}
.home-user-head {
  gap: 10px !important;
}
.home-user-head .avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 13px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14) !important;
}
.home-user-id {
  gap: 4px !important;
}
.home-user-id strong {
  font-size: 15px !important;
  line-height: 1.1 !important;
}
.home-user-lvl {
  gap: 6px !important;
}
.home-user-lvl em {
  font-size: 11px !important;
}
.home-user-lvl .xp {
  height: 5px !important;
  min-width: 56px !important;
  max-width: 120px !important;
}
.home-user-go {
  width: 24px !important;
  height: 24px !important;
  font-size: 10px !important;
}
.home-user-metrics {
  gap: 5px !important;
}
.home-user-metric {
  gap: 2px !important;
  padding: 7px 8px !important;
  border-radius: 11px !important;
  min-height: 0 !important;
  background: color-mix(in srgb, var(--text-primary) 5%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent) !important;
}
.home-user-metric > span {
  font-size: 9.5px !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  opacity: 0.72 !important;
  line-height: 1.1 !important;
}
.home-user-metric > strong {
  font-size: 12.5px !important;
  line-height: 1.15 !important;
  font-weight: 750 !important;
}
.home-user-vitals {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 5px !important;
}
.home-user-vital {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-height: 0 !important;
  padding: 6px 6px !important;
  border-radius: 11px !important;
  background: color-mix(in srgb, var(--text-primary) 5%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent) !important;
}
.home-user-vital img {
  width: 16px !important;
  height: 16px !important;
  object-fit: contain !important;
  flex: none !important;
}
.home-user-vital span {
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}
.home-user-vital small {
  font-size: 10px !important;
  font-weight: 600 !important;
  opacity: 0.65 !important;
}
/* end-home-user-card-compact */

/* === topbar border soft === */
.topbar,
html[data-theme="light"] .topbar,
html[data-theme="dark"] .topbar,
html.android-app .topbar,
html.android-app body[data-screen="chat"] .topbar,
html.android-app body[data-screen="thread"] .topbar {
  border-top: 0 !important;
  box-shadow:
    0 8px 18px rgba(2, 8, 18, 0.10) !important;
}
html[data-theme="light"] .topbar,
html[data-theme="light"].android-app .topbar {
  border-bottom: 1px solid rgba(110, 104, 94, 0.10) !important;
  box-shadow: 0 6px 14px rgba(40, 38, 34, 0.05) !important;
}
html[data-theme="dark"] .topbar,
html[data-theme="dark"].android-app .topbar,
html.android-app .topbar {
  border-bottom: 1px solid rgba(186, 220, 255, 0.08) !important;
  box-shadow: 0 8px 16px rgba(2, 8, 18, 0.12) !important;
}
@media (max-width: 959px) {
  .topbar,
  html[data-theme="light"] .topbar,
  html[data-theme="dark"] .topbar {
    border-top: 0 !important;
  }
  html[data-theme="light"] .topbar {
    border-bottom-color: rgba(110, 104, 94, 0.09) !important;
  }
  html[data-theme="dark"] .topbar {
    border-bottom-color: rgba(186, 220, 255, 0.07) !important;
  }
}
/* end-topbar-border-soft */

/* === mobile ice navbar v2 === */
@media (max-width: 959px) {
  /* Soft frosted navbar — muted, not shiny */
  .topbar,
  #topbar,
  html[data-theme="dark"] .topbar,
  html[data-theme="dark"] #topbar,
  html.android-app .topbar,
  html.android-app #topbar,
  html[data-theme="dark"].android-app .topbar {
    background:
      linear-gradient(
        180deg,
        rgba(160, 190, 230, 0.10) 0%,
        rgba(14, 26, 46, 0.42) 100%
      ) !important;
    border-top: 0 !important;
    border-bottom: 1px solid rgba(170, 200, 230, 0.08) !important;
    box-shadow: 0 8px 18px rgba(2, 8, 18, 0.14) !important;
    backdrop-filter: blur(24px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
  }
  html[data-theme="light"] .topbar,
  html[data-theme="light"] #topbar {
    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.36) 0%,
        rgba(236, 242, 250, 0.28) 100%
      ) !important;
    border-top: 0 !important;
    border-bottom: 1px solid rgba(140, 160, 180, 0.10) !important;
    box-shadow: 0 6px 14px rgba(40, 38, 34, 0.04) !important;
  }

  .topbar .resbar:not([hidden]),
  #topbar .resbar:not([hidden]) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Soft glass buttons */
  .topbar .icon-btn,
  .topbar .city-tools .icon-btn,
  .city-tools .icon-btn,
  html[data-theme="dark"] .topbar .icon-btn,
  html[data-theme="dark"] .city-tools .icon-btn,
  html.android-app .topbar .icon-btn,
  html.android-app .city-tools .icon-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(200, 220, 245, 0.14) !important;
    color: rgba(240, 246, 255, 0.92) !important;
    box-shadow: none !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
  }
  html[data-theme="light"] .topbar .icon-btn,
  html[data-theme="light"] .city-tools .icon-btn {
    background: rgba(255, 255, 255, 0.38) !important;
    border-color: rgba(140, 160, 180, 0.16) !important;
    color: #2a3344 !important;
    box-shadow: none !important;
  }

  .topbar .icon-btn.is-active,
  .city-tools .icon-btn.is-active,
  html[data-theme="dark"] .topbar .icon-btn.is-active,
  html.android-app .topbar .icon-btn.is-active {
    background: rgba(196, 181, 154, 0.18) !important;
    border-color: rgba(196, 181, 154, 0.28) !important;
    color: #fff !important;
  }
  html[data-theme="light"] .topbar .icon-btn.is-active,
  html[data-theme="light"] .city-tools .icon-btn.is-active {
    background: rgba(120, 160, 210, 0.16) !important;
    border-color: rgba(120, 160, 210, 0.28) !important;
    color: #1e3350 !important;
  }

  /* Soft resource pills */
  .topbar .resbar > .res-chip,
  .topbar .res-chip,
  .resbar > .res-chip,
  html[data-theme="dark"] .topbar .resbar > .res-chip,
  html[data-theme="dark"] .resbar > .res-chip,
  html.android-app .topbar .resbar > .res-chip,
  html.android-app .resbar > .res-chip {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(200, 220, 245, 0.12) !important;
    box-shadow: none !important;
    backdrop-filter: blur(10px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
    color: rgba(242, 248, 255, 0.92) !important;
  }
  html[data-theme="light"] .topbar .resbar > .res-chip,
  html[data-theme="light"] .resbar > .res-chip {
    background: rgba(255, 255, 255, 0.42) !important;
    border-color: rgba(140, 160, 180, 0.14) !important;
    color: #2a3344 !important;
    box-shadow: none !important;
  }
}
/* end-mobile-ice-navbar-v2 */
/* ticarisk-style toast v1 */
.toast-root {
  position: fixed !important;
  top: calc(14px + env(safe-area-inset-top, 0px)) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: min(480px, calc(100vw - 24px)) !important;
  z-index: 10050 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  pointer-events: none !important;
}
body:has(#shell:not([hidden])) .toast-root {
  top: calc(var(--topbar-glass-h, 108px) + 10px) !important;
}
@media (max-width: 959px) {
  body:has(#shell:not([hidden])) .toast-root {
    top: calc(var(--topbar-glass-h, 108px) + 10px) !important;
    width: min(480px, calc(100vw - 24px)) !important;
    left: 50% !important;
    right: auto !important;
  }
}
.toast {
  margin: 0 !important;
  width: max-content !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  color: #f1f3f9 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
  text-align: left !important;
  white-space: normal !important;
  border: 1px solid rgba(124, 140, 255, .22) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)),
    rgba(14, 18, 38, .52) !important;
  backdrop-filter: blur(28px) saturate(1.65) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.65) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 16px 40px rgba(0,0,0,.32) !important;
  opacity: 0 !important;
  transform: translateY(-14px) !important;
  transition: transform .3s ease, opacity .3s ease !important;
  animation: none !important;
}
.toast.toast-show {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.toast.out {
  opacity: 0 !important;
  transform: translateY(-10px) !important;
  transition: transform .28s ease, opacity .28s ease !important;
}
.toast .toast-ico {
  flex-shrink: 0 !important;
  margin-top: 1px !important;
  font-size: 16px !important;
  line-height: 1 !important;
  color: #a5b4fc !important;
}
.toast .toast-msg {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  line-height: 1.4 !important;
}
.toast.toast-success,
.toast.success {
  box-shadow:
    inset 3px 0 0 rgba(52,211,153,.9),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 16px 40px rgba(0,0,0,.32) !important;
}
.toast.toast-success .toast-ico,
.toast.success .toast-ico {
  color: #6ee7b7 !important;
}
.toast.toast-danger,
.toast.danger,
.toast.toast-error,
.toast.error {
  box-shadow:
    inset 3px 0 0 rgba(251,113,133,.9),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 16px 40px rgba(0,0,0,.32) !important;
}
.toast.toast-danger .toast-ico,
.toast.danger .toast-ico,
.toast.toast-error .toast-ico,
.toast.error .toast-ico {
  color: #fda4af !important;
}
html[data-theme="light"] .toast {
  color: #12182b !important;
  border-color: rgba(99, 112, 180, .22) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.4)),
    rgba(255,255,255,.46) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    0 14px 32px rgba(18, 24, 43, .14) !important;
}
html[data-theme="light"] .toast.toast-success,
html[data-theme="light"] .toast.success {
  box-shadow:
    inset 3px 0 0 rgba(16,185,129,.95),
    inset 0 1px 0 rgba(255,255,255,.65),
    0 14px 32px rgba(18, 24, 43, .14) !important;
}
html[data-theme="light"] .toast.toast-danger,
html[data-theme="light"] .toast.danger,
html[data-theme="light"] .toast.toast-error,
html[data-theme="light"] .toast.error {
  box-shadow:
    inset 3px 0 0 rgba(244,63,94,.95),
    inset 0 1px 0 rgba(255,255,255,.65),
    0 14px 32px rgba(18, 24, 43, .14) !important;
}
html[data-theme="light"] .toast .toast-ico { color: #6366f1 !important; }
html[data-theme="light"] .toast.toast-success .toast-ico,
html[data-theme="light"] .toast.success .toast-ico { color: #059669 !important; }
html[data-theme="light"] .toast.toast-danger .toast-ico,
html[data-theme="light"] .toast.danger .toast-ico,
html[data-theme="light"] .toast.toast-error .toast-ico,
html[data-theme="light"] .toast.error .toast-ico { color: #e11d48 !important; }
/* end-ticarisk-style-toast-v1 */

/* desktop-dm-side-nav-fix */
@media (min-width: 960px) {
  body[data-screen="thread"] .shell,
  body:has(.chat-screen.is-dm) .shell {
    grid-template-columns: 108px minmax(0, 1fr) 108px !important;
  }
  body[data-screen="thread"] .shell > #tabbar,
  body[data-screen="thread"] .shell > .tabbar:not(.tabbar-right),
  body:has(.chat-screen.is-dm) .shell > #tabbar,
  body:has(.chat-screen.is-dm) .shell > .tabbar:not(.tabbar-right) {
    grid-column: 1 !important;
  }
  body[data-screen="thread"] .shell > .workspace,
  body:has(.chat-screen.is-dm) .shell > .workspace {
    grid-column: 2 !important;
  }
  body[data-screen="thread"] .shell > #tabbar-right,
  body[data-screen="thread"] .shell > .tabbar-right,
  body:has(.chat-screen.is-dm) .shell > #tabbar-right,
  body:has(.chat-screen.is-dm) .shell > .tabbar-right {
    grid-column: 3 !important;
  }
  body:has(.chat-screen.is-dm) .chat-screen.is-dm > .composer,
  body:has(.chat-screen.is-dm) .chat-screen.is-dm > .reply-bar {
    left: 12px !important;
    right: 12px !important;
  }
  body:has(.chat-screen.is-dm) .chat-screen.is-dm .chat-log {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}
/* end-desktop-dm-side-nav-fix */



/* === mobile tabbar redesign v3 (stone shelf) === */
@media (max-width: 959px) {
  /*
    Edge-to-edge carved stone shelf.
    Equal 5 tabs, no floating pill, no raised center bump.
  */
  #tabbar,
  .tabbar:not(.tabbar-right):not(#tabbar-right) {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 7px 4px calc(7px + env(safe-area-inset-bottom, 0px)) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-top: 1px solid #b6afa4 !important;
    background:
      linear-gradient(180deg, #f1ece3 0%, #e5dfd4 48%, #ddd6ca 100%) !important;
    box-shadow:
      0 1px 0 rgba(255, 252, 246, 0.7) inset,
      0 -10px 28px rgba(42, 38, 32, 0.07) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: hidden !important;
    isolation: isolate !important;
  }

  html[data-theme="dark"] #tabbar,
  html[data-theme="dark"] .tabbar:not(.tabbar-right):not(#tabbar-right) {
    border-top: 1px solid #3f3d38 !important;
    background:
      linear-gradient(180deg, #22252a 0%, #181a1e 55%, #14161a 100%) !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.045) inset,
      0 -12px 30px rgba(0, 0, 0, 0.35) !important;
  }

  #tabbar::before,
  .tabbar:not(.tabbar-right):not(#tabbar-right)::before {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #tabbar .tab-main,
  .tabbar:not(.tabbar-right) .tab-main {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 60px !important;
    margin: 0 !important;
    padding: 0 2px !important;
    gap: 0 !important;
    overflow: visible !important;
  }

  #tabbar .tab-extra,
  #tabbar .tab-foot,
  .tabbar:not(.tabbar-right) .tab-extra,
  .tabbar:not(.tabbar-right) .tab-foot,
  #tabbar .tab-extra .tab,
  #tabbar .tab-foot .tab {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* Active marker: no capsule — only thin amber tick (::after on .is-active) */
  #tabbar .tab-glide,
  .tabbar:not(.tabbar-right) .tab-glide {
    opacity: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }
  html[data-theme="dark"] #tabbar .tab-glide,
  html[data-theme="dark"] .tabbar:not(.tabbar-right) .tab-glide {
    opacity: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #tabbar .tab-main > .tab,
  .tabbar:not(.tabbar-right) .tab-main > .tab {
    position: relative !important;
    min-height: 60px !important;
    padding: 6px 2px 8px !important;
    gap: 3px !important;
    justify-content: center !important;
    align-items: center !important;
    color: #6f695f !important;
    font-size: 10px !important;
    font-weight: 650 !important;
    letter-spacing: 0.015em !important;
    line-height: 1.05 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  html[data-theme="dark"] #tabbar .tab-main > .tab,
  html[data-theme="dark"] .tabbar:not(.tabbar-right) .tab-main > .tab {
    color: rgba(228, 223, 214, 0.58) !important;
  }
  #tabbar .tab-main > .tab.is-active,
  .tabbar:not(.tabbar-right) .tab-main > .tab.is-active {
    color: #2e2a24 !important;
    font-weight: 780 !important;
  }
  html[data-theme="dark"] #tabbar .tab-main > .tab.is-active,
  html[data-theme="dark"] .tabbar:not(.tabbar-right) .tab-main > .tab.is-active {
    color: #f4eee3 !important;
  }

  /* Active amber tick under label */
  #tabbar .tab-main > .tab.is-active::after,
  .tabbar:not(.tabbar-right) .tab-main > .tab.is-active::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 4px !important;
    transform: translateX(-50%) !important;
    width: 14px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: #b08a45 !important;
    opacity: 0.85 !important;
  }
  html[data-theme="dark"] #tabbar .tab-main > .tab.is-active::after,
  html[data-theme="dark"] .tabbar:not(.tabbar-right) .tab-main > .tab.is-active::after {
    background: #d4b06a !important;
  }

  /* Equal icons — center stays in-row */
  #tabbar .tab-main > .tab .tab-fab,
  #tabbar .tab-main > .tab.is-center .tab-fab,
  #tabbar .tab-main > .tab.is-center.is-active .tab-fab,
  .tabbar:not(.tabbar-right) .tab-main > .tab .tab-fab,
  .tabbar:not(.tabbar-right) .tab-main > .tab.is-center .tab-fab {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: grid !important;
    place-items: center !important;
    overflow: visible !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #tabbar .tab-main > .tab.is-center .tab-fab,
  #tabbar .tab-main > .tab.is-center.is-active .tab-fab,
  .tabbar:not(.tabbar-right) .tab-main > .tab.is-center .tab-fab {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    border: 1px solid #bdb6ab !important;
    background: #f6f1e8 !important;
    overflow: hidden !important;
    box-shadow: 0 1px 2px rgba(40, 36, 30, 0.10) !important;
  }
  html[data-theme="dark"] #tabbar .tab-main > .tab.is-center .tab-fab,
  html[data-theme="dark"] #tabbar .tab-main > .tab.is-center.is-active .tab-fab,
  html[data-theme="dark"] .tabbar:not(.tabbar-right) .tab-main > .tab.is-center .tab-fab {
    border: 1px solid #4a4741 !important;
    background: #262930 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
  }

  #tabbar .tab-main > .tab .tab-fab img,
  #tabbar .tab-main > .tab:not(.is-center) .tab-fab img,
  .tabbar:not(.tabbar-right) .tab-main > .tab .tab-fab img {
    width: 22px !important;
    height: 22px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    opacity: 0.7 !important;
    filter: none !important;
  }
  #tabbar .tab-main > .tab.is-active .tab-fab img,
  .tabbar:not(.tabbar-right) .tab-main > .tab.is-active .tab-fab img {
    opacity: 1 !important;
  }

  #tabbar .tab-main > .tab.is-center .tab-fab img,
  #tabbar .tab-main > .tab.is-center .tab-quick-img,
  .tabbar:not(.tabbar-right) .tab-main > .tab.is-center .tab-fab img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    opacity: 1 !important;
  }

  #tabbar .tab-main > .tab > span:last-child,
  .tabbar:not(.tabbar-right) .tab-main > .tab > span:last-child {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Center has no text node — synthesize label */
  #tabbar .tab-main > .tab.is-center::before,
  .tabbar:not(.tabbar-right) .tab-main > .tab.is-center::before {
    content: "Menü" !important;
    order: 2 !important;
    display: block !important;
    font-size: 10px !important;
    font-weight: 650 !important;
    letter-spacing: 0.015em !important;
    line-height: 1.05 !important;
    color: inherit !important;
  }
  #tabbar .tab-main > .tab.is-center,
  .tabbar:not(.tabbar-right) .tab-main > .tab.is-center {
    flex-direction: column !important;
  }
  #tabbar .tab-main > .tab.is-center.is-active::after,
  .tabbar:not(.tabbar-right) .tab-main > .tab.is-center.is-active::after {
    bottom: 3px !important;
  }
}
/* === /mobile tabbar redesign v3 === */

/* === home logout icon scale === */
.home-block .home-game-grid .home-logout > .icon,
.home-block .home-city-grid .home-logout > .icon,
.home-block .home-logout > .icon,
.home-block .home-logout > svg.icon {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
}
@media (min-width: 600px) {
  .home-block .home-game-grid .home-logout > .icon,
  .home-block .home-city-grid .home-logout > .icon,
  .home-block .home-logout > .icon,
  .home-block .home-logout > svg.icon {
    width: 30px !important;
    height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
  }
}
/* === /home logout icon scale === */



/* === world-chat keep side gutters v1 === */
/*
  After /chat paints, navigation sets data-screen=chat which used to trip
  app.css padding-left/right:0 and yank the side gutters mid-open.
  Keep gutters for world chat; DM stays flush.
*/
@media (max-width: 959px) {
  body[data-screen="chat"] .view:has(.chat-screen:not(.is-dm)),
  body[data-screen="chat"] .view:has(#view > .chat-screen:not(.is-dm)),
  body:has(#view > .chat-screen:not(.is-dm)) .view {
    padding-left: max(8px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(8px, env(safe-area-inset-right, 0px)) !important;
  }
  body[data-screen="chat"] .chat-screen:not(.is-dm) > .composer,
  body[data-screen="chat"] .chat-screen:not(.is-dm) > .reply-bar,
  html.android-app body[data-screen="chat"] .chat-screen:not(.is-dm) > .composer,
  html.android-app body[data-screen="chat"] .chat-screen:not(.is-dm) > .reply-bar {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
@media (min-width: 600px) and (max-width: 959px) {
  body[data-screen="chat"] .view:has(.chat-screen:not(.is-dm)),
  body:has(#view > .chat-screen:not(.is-dm)) .view {
    padding-left: 45px !important;
    padding-right: 45px !important;
  }
}
/* Desktop: side tabbars hide on world chat — collapse 3-col grid or empty rails appear */
@media (min-width: 960px) {
  body[data-screen="chat"]:has(#view > .chat-screen:not(.is-dm)) .shell,
  body:has(#view > .chat-screen:not(.is-dm)) .shell {
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(960px, calc(100vw - 40px)) !important;
    max-width: min(960px, calc(100vw - 40px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body[data-screen="chat"]:has(#view > .chat-screen:not(.is-dm)) .shell > .workspace,
  body:has(#view > .chat-screen:not(.is-dm)) .shell > .workspace {
    grid-column: 1 !important;
  }
  body[data-screen="chat"] .view:has(.chat-screen:not(.is-dm)),
  body:has(#view > .chat-screen:not(.is-dm)) .view {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
/* end-world-chat-keep-side-gutters-v1 */

/* === resbar chips compact v2 — slightly larger than v1, still under original === */
.topbar .resbar:not([hidden]),
#topbar .resbar:not([hidden]),
.resbar:not([hidden]) {
  gap: 4px !important;
  margin-top: 5px !important;
}
.topbar .resbar > .res-chip,
.topbar .res-chip,
.resbar > .res-chip {
  gap: 3px !important;
  padding: 4px 8px !important;
  min-height: 0 !important;
  border-radius: 10px !important;
}
.topbar .resbar > .res-chip .res-copy strong,
.resbar > .res-chip .res-copy strong {
  font-size: 11.5px !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
}
.topbar .resbar > .res-chip .res-ico,
.resbar > .res-chip .res-ico {
  width: 14px !important;
  height: 14px !important;
}
.topbar .resbar > .res-chip .res-ico .icon,
.resbar > .res-chip .res-ico .icon {
  width: 10px !important;
  height: 10px !important;
}
.topbar .resbar > .res-chip .res-ico.res-sikke,
.topbar .resbar > .res-chip .res-ico.res-wood,
.topbar .resbar > .res-chip .res-ico.res-yakut,
.resbar > .res-chip .res-ico.res-sikke,
.resbar > .res-chip .res-ico.res-wood,
.resbar > .res-chip .res-ico.res-yakut {
  width: 14px !important;
  height: 14px !important;
}
.topbar .resbar > .res-chip .res-ico.res-sikke img,
.topbar .resbar > .res-chip .res-ico.res-wood img,
.topbar .resbar > .res-chip .res-ico.res-yakut img,
.resbar > .res-chip .res-ico.res-sikke img,
.resbar > .res-chip .res-ico.res-wood img,
.resbar > .res-chip .res-ico.res-yakut img {
  width: 14px !important;
  height: 14px !important;
}
.topbar .resbar > .res-chip .res-ico.res-good,
.resbar > .res-chip .res-ico.res-good {
  width: 20px !important;
  height: 13px !important;
}
.topbar .resbar > .res-chip .res-ico.res-good img,
.resbar > .res-chip .res-ico.res-good img {
  width: 20px !important;
  height: 13px !important;
}
.topbar .resbar > .res-chip .res-ico.res-energy,
.topbar .resbar > .res-chip .res-ico.res-health,
.resbar > .res-chip .res-ico.res-energy,
.resbar > .res-chip .res-ico.res-health {
  width: 15px !important;
  height: 15px !important;
}
.topbar .resbar > .res-chip .res-ico.res-energy img,
.topbar .resbar > .res-chip .res-ico.res-health img,
.resbar > .res-chip .res-ico.res-energy img,
.resbar > .res-chip .res-ico.res-health img {
  width: 15px !important;
  height: 15px !important;
}
.topbar .resbar > .res-chip .res-ico.res-energy i,
.resbar > .res-chip .res-ico.res-energy i {
  font-size: 12px !important;
}
/* end-resbar-chips-compact-v2 */