* { margin: 0; padding: 0; box-sizing: border-box; }

    html {
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #101a26;
}


    body {
      background:
        radial-gradient(circle at 50% 0%, rgba(var(--tg-blue-rgb, 42,171,238), 0.10), transparent 34%),
        linear-gradient(180deg, #101c28 0%, #0F1115 72%, #0F1115 100%);
      color: #e0e0e0;
      font-family: 'Segoe UI', system-ui, sans-serif;
      width: 100%;
      height: 100vh;
      height: 100dvh;
      min-height: 100vh;
      min-height: 100dvh;
      height: var(--ot-viewport-height, 100dvh);
      min-height: var(--ot-viewport-height, 100dvh);
      overflow: hidden;
      /* Kill text selection globally — holding the attack button used to
         select surrounding popup/HUD text, which looked broken and ate taps.
         Inputs/textareas re-enable selection below. */
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent;
  }

    input, textarea, [contenteditable="true"], .allow-select {
      -webkit-user-select: text;
      -moz-user-select: text;
      -ms-user-select: text;
      user-select: text;
      -webkit-touch-callout: default;
    }

    :root {
      --popup-bg: #1a1a2e;
      --card-bg: #252538;
      --card-radius: 12px;
      --text-primary: #ffffff;
      --text-secondary: #888888;
      --text-success: #4caf50;
      --text-danger: #f44336;
      --text-gold: #FFD700;
      --btn-primary: #2196f3;
      --btn-danger: #f44336;
      --btn-dark: #333333;
      --btn-radius: 12px;

      /* Telegram UI v1 tokens: staged first in Profile / Inventory. */
      --tg-bg: #0F1115;
      --tg-surface: #171A20;
      --tg-surface-2: #1F232B;
      --tg-surface-3: #252A33;
      --tg-border: rgba(255,255,255,0.08);
      --tg-border-strong: rgba(255,255,255,0.14);
      --tg-text: #F2F4F7;
      --tg-muted: #8F98A6;
      --tg-muted-2: #687281;
      --tg-blue: #2AABEE;
      --tg-blue-rgb: 42,171,238;
      --tg-success: #34C759;
      --tg-danger: #FF453A;
      --tg-gold: #FFD65A;
      --tg-radius-sm: 8px;
      --tg-radius-md: 12px;
      --tg-radius-lg: 16px;
      --tg-radius-xl: 20px;
      --tg-hairline: 1px solid var(--tg-border);
      --tg-motion-fast: 160ms;
      --tg-motion-base: 240ms;
      --tg-motion-popup-exit: 160ms;
      --tg-motion-popup-reduced: 80ms;
      --tg-ease: cubic-bezier(.2,.8,.2,1);
    }

    /* Top currency block */
    #hud-top-pill {
      position: fixed;
      top: calc(max(env(safe-area-inset-top, 0px), var(--ot-tg-content-safe-top), var(--ot-tg-safe-top)) + 8px);
      left: calc(max(env(safe-area-inset-left, 0px), var(--ot-tg-content-safe-left), var(--ot-tg-safe-left)) + 10px);
      z-index: 1000;
      max-width: min(360px, calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 20px));
      background: rgba(23,26,32,0.90);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 18px;
      padding: 7px 9px;
      white-space: nowrap;
      box-shadow: 0 10px 28px rgba(0,0,0,0.22);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      cursor: pointer;
      touch-action: manipulation;
      user-select: none;
      -webkit-user-select: none;
      -webkit-tap-highlight-color: transparent;
      transition:
        transform var(--tg-motion-fast) var(--tg-ease),
        background var(--tg-motion-fast) var(--tg-ease),
        border-color var(--tg-motion-fast) var(--tg-ease),
        opacity var(--tg-motion-fast) var(--tg-ease);
    }
    #hud-top-pill:active {
      transform: scale(0.99);
      background: rgba(31,35,43,0.94);
      border-color: rgba(255,255,255,0.16);
    }
    html.tg-fullscreen #hud-top-pill {
      top: calc(max(env(safe-area-inset-top, 0px), var(--ot-tg-content-safe-top), var(--ot-tg-safe-top), 82px) + 8px);
      max-width: min(360px, calc(100vw - max(env(safe-area-inset-left, 0px), var(--ot-tg-content-safe-left), var(--ot-tg-safe-left)) - max(env(safe-area-inset-right, 0px), var(--ot-tg-content-safe-right), var(--ot-tg-safe-right)) - 20px));
    }
    .hud-collapsed {
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
      min-height: 24px;
      cursor: pointer;
    }
    .hud-toggle-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      border-radius: 999px;
      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.58);
      font-size: 10px;
      cursor: pointer;
      padding: 0;
      flex-shrink: 0;
      -webkit-tap-highlight-color: transparent;
      transition:
        transform var(--tg-motion-fast) var(--tg-ease),
        background var(--tg-motion-fast) var(--tg-ease),
        color var(--tg-motion-fast) var(--tg-ease);
    }
    .hud-toggle-btn:active {
      transform: scale(0.94);
      background: rgba(255,255,255,0.12);
      color: rgba(255,255,255,0.82);
    }
    .hud-expanded {
      max-height: 0; overflow: hidden;
      transition: max-height 250ms ease-out, margin-top 250ms ease-out, padding-top 250ms ease-out;
    }
    .hud-expanded.open {
      max-height: 74px;
      margin-top: 6px;
      padding-top: 6px;
      border-top: 1px solid rgba(255,255,255,0.08);
    }
    .hud-resource-stack {
      display: grid;
      gap: 4px;
      justify-items: start;
    }
    .hud-resource-line {
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
      gap: 6px;
      min-width: 0;
      min-height: 20px;
      color: var(--tg-text);
      font-size: 13px;
      font-weight: 760;
      text-align: left;
      font-variant-numeric: tabular-nums;
    }
    .hud-collapse-link {
      margin-top: 6px;
      text-align: center;
      font-size: 11px;
      color: rgba(255,255,255,0.46);
      cursor: pointer;
      transition: opacity var(--tg-motion-fast) var(--tg-ease), color var(--tg-motion-fast) var(--tg-ease);
    }
    .hud-collapse-link:active {
      opacity: 0.72;
      color: rgba(255,255,255,0.68);
    }
    .hud-coins {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      min-width: 0;
      font-size: 15px;
      font-weight: 750;
      color: #FFD166;
    }
    .hud-income {
      min-width: 0;
      max-width: 118px;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 11px;
      color: #35D27F;
    }
    .hud-exp-value.hud-income {
      max-width: 172px;
      justify-content: flex-end;
      white-space: normal;
      text-overflow: clip;
      line-height: 1.25;
    }
    .hud-diamonds {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-size: 13px;
      font-weight: 750;
      color: #5AC8FA;
    }
    #coin-display {
      display: inline-block;
      max-width: none;
      overflow: visible;
      text-overflow: clip;
      vertical-align: bottom;
    }
    #diamond-display {
      display: inline-block;
      max-width: none;
      overflow: visible;
      text-overflow: clip;
      vertical-align: bottom;
    }
    .hud-sep { color: rgba(255,255,255,0.16); font-size: 12px; }
    @media (max-width: 380px) {
      #hud-top-pill { padding-inline: 8px; }
      .hud-collapsed { gap: 5px; }
      .hud-income { max-width: 88px; }
      .hud-exp-value.hud-income { max-width: 142px; }
      .hud-coins { font-size: 14px; }
      .hud-diamonds { font-size: 12px; }
    }

    /* Right quick action stack: map tools stay direct, but out of combat bottom zone. */
    #map-action-rail {
      position: fixed;
      right: calc(env(safe-area-inset-right, 0px) + 12px);
      top: 50%;
      transform: translateY(-50%);
      z-index: 1000;
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: center;
      pointer-events: none;
      transition:
        transform var(--tg-motion-base) var(--tg-ease),
        opacity var(--tg-motion-base) var(--tg-ease);
    }
    #hud-top-right,
    #hud-chat-wrap {
      position: static;
      z-index: auto;
      pointer-events: auto;
    }
    #hud-top-right {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: center;
    }
    .hud-right-btn {
      width: 38px;
      height: 38px;
      border-radius: 12px;
      background: rgba(14,14,22,0.92);
      border: 1px solid rgba(255,255,255,0.10);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      transition:
        transform var(--tg-motion-fast) var(--tg-ease),
        background var(--tg-motion-fast) var(--tg-ease),
        border-color var(--tg-motion-fast) var(--tg-ease),
        opacity var(--tg-motion-fast) var(--tg-ease);
      position: relative;
      color: #fff;
    }
    .hud-right-btn:active {
      transform: scale(0.965);
      background: rgba(255,215,0,0.12);
      border-color: rgba(255,215,0,0.3);
    }
    .hud-right-btn:disabled,
    .hud-right-btn.disabled,
    .hud-right-btn[aria-disabled="true"] {
      opacity: 0.42;
      cursor: not-allowed;
      transform: none;
    }
    @media (hover: hover) and (pointer: fine) {
      .hud-right-btn:hover {
        background: rgba(255,255,255,0.08);
        border-color: rgba(255,255,255,0.18);
      }
    }

    /* Direct chat access stays outside the hub and quick menu. */
    #btn-chat.muted { opacity: 0.45; cursor: not-allowed; }
    #btn-chat {
      background: linear-gradient(180deg, rgba(var(--tg-blue-rgb),0.98), rgba(var(--tg-blue-rgb),0.78)) !important;
      border-color: rgba(255,255,255,0.16) !important;
      box-shadow: 0 14px 32px rgba(var(--tg-blue-rgb),0.28), 0 8px 22px rgba(0,0,0,0.24) !important;
    }
    .map-quick-btn {
      font-size: 18px;
    }
    .map-quick-btn.quick-hidden {
      display: none !important;
    }
    #btn-map-quick-menu {
      font-size: 20px;
      font-weight: 800;
    }
    #map-quick-popover {
      position: absolute;
      right: 48px;
      top: 50%;
      transform: translateY(-50%) scale(0.96);
      transform-origin: right center;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 7px;
      padding: 8px;
      max-width: calc(100vw - 74px);
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(23,26,32,0.95);
      box-shadow: 0 18px 42px rgba(0,0,0,0.34);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--tg-motion-fast) var(--tg-ease), transform var(--tg-motion-fast) var(--tg-ease);
    }
    #map-quick-popover.open {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(-50%) scale(1);
    }
    .map-quick-empty {
      max-width: 158px;
      padding: 7px 9px;
      color: var(--tg-muted);
      font-size: 11px;
      font-weight: 650;
      line-height: 1.25;
      text-align: right;
    }
    body.combat-ui-open #bottom-panel {
      transform: translateY(calc(100% + 16px));
      opacity: 0;
      pointer-events: none;
    }
    body.combat-ui-open #map-action-rail {
      transform: translateY(-50%);
      opacity: 1;
    }

    /* Critical visibility guards for lazy panel CSS. Full layout/theme for
       these panels is loaded with market-panels or social-panels. */
    #market-modal,
    #market-list-overlay,
    #clan-screen {
      display: none;
      position: fixed;
      inset: 0;
      overflow: hidden;
      flex-direction: column;
    }
    #market-modal.open,
    #market-list-overlay.open,
    #clan-screen.open {
      display: flex;
    }
    #market-buy-overlay,
    #market-private-overlay,
    #market-sort-overlay,
    #chat-history-overlay,
    #chat-input-backdrop {
      display: none;
      position: fixed;
      inset: 0;
    }
    #market-buy-overlay.open,
    #market-private-overlay.open,
    #market-sort-overlay.open,
    #chat-history-overlay.open,
    #chat-history-overlay.is-closing {
      display: flex;
    }
    #chat-input-backdrop.open,
    #chat-input-backdrop.is-closing {
      display: block;
    }
    /* Critical visibility guards for profile-owned lazy overlays. Their full
       layout/theme is loaded with profile-panels, but the shell markup must
       never appear during first paint before that chunk arrives. */
    #profile-modal,
    #item-detail-overlay,
    #sell-confirm-overlay,
    #craft-overlay,
    #craft-pick-overlay {
      display: none;
      position: fixed;
      inset: 0;
    }
    #profile-modal,
    #craft-overlay,
    #craft-pick-overlay {
      overflow: hidden;
      flex-direction: column;
    }
    #profile-modal.open,
    #item-detail-overlay.open,
    #sell-confirm-overlay.open,
    #craft-overlay.open,
    #craft-pick-overlay.open {
      display: flex;
    }
    #chat-input-sheet {
      position: fixed;
      opacity: 0;
      pointer-events: none;
    }
    #chat-input-sheet.open {
      opacity: 1;
      pointer-events: auto;
    }

    /* Chat input/history panel CSS is lazy-loaded with social-panels. */

    /* Chat bubble (toast-style, over toast-container). The parent
       #toast-container has pointer-events:none so that normal toasts
       never block map taps, but bubbles DO need to receive touches —
       so we re-enable pointer-events here. Without this the touchstart
       handler never fires and iOS happily starts its own selection. */
    .chat-bubble {
      display: flex; align-items: flex-start; gap: 8px;
      background: rgba(8,8,18,0.92);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 14px;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      padding: 8px 12px 8px 10px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.5);
      max-width: min(80vw, 360px);
      transform: translateX(-120%); opacity: 0;
      transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), opacity 0.35s cubic-bezier(0.34,1.56,0.64,1);
      cursor: pointer;
      pointer-events: auto !important;
      -webkit-tap-highlight-color: transparent;
      -webkit-user-select: none !important;
      user-select: none !important;
      -webkit-touch-callout: none !important;
      -webkit-user-drag: none;
      touch-action: manipulation;
    }
    /* Children are visually rendered but can't be the pointer target, so
       the parent bubble always receives pointerdown/up — and the browser
       never tries to start an emoji/text selection on a child element. */
    .chat-bubble * {
      -webkit-user-select: none !important;
      user-select: none !important;
      -webkit-touch-callout: none !important;
      pointer-events: none !important;
    }
    .chat-bubble::selection, .chat-bubble *::selection { background: transparent; }
    .chat-bubble.visible { transform: translateX(0); opacity: 1; }
    .chat-bubble .cb-avatar {
      font-size: 22px; line-height: 1; flex-shrink: 0; width: 28px; text-align: center;
    }
    .chat-bubble .cb-body { flex: 1; min-width: 0; }
    .chat-bubble .cb-name {
      font-size: 11px; color: #FFD700; font-weight: 600; line-height: 1.2;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .chat-bubble .cb-text {
      font-size: 13px; color: #e0e0e0; line-height: 1.35;
      word-wrap: break-word; overflow-wrap: break-word;
    }

    /* Bubble overlay container spans the map. Individual bubbles are
       absolutely positioned inside it by JS each animation frame using
       the sender's real on-screen bounding rect (which already reflects
       any pan/zoom/movement transforms Leaflet is applying). */
    #chat-bubble-overlay {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      z-index: 1000;
    }
    .chat-marker-bubble {
      position: absolute;
      left: 0; top: 0;
      transform: translate(-50%, -100%) scale(0.6);
      transform-origin: bottom center;
      display: inline-block;
      background: rgba(8,8,18,0.94);
      border: 1px solid rgba(255,215,0,0.25);
      border-radius: 12px;
      padding: 6px 10px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.6);
      max-width: min(70vw, 260px);
      opacity: 0;
      transition: transform 0.18s ease, opacity 0.18s ease;
      pointer-events: none;
      white-space: normal;
    }
    .chat-marker-bubble.visible {
      transform: translate(-50%, -100%) scale(1);
      opacity: 1;
    }
    .chat-marker-bubble::after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: -6px;
      transform: translateX(-50%) rotate(45deg);
      width: 10px; height: 10px;
      background: rgba(8,8,18,0.94);
      border-right: 1px solid rgba(255,215,0,0.25);
      border-bottom: 1px solid rgba(255,215,0,0.25);
    }
    .chat-marker-bubble .cmb-text {
      font-size: 12px; color: #fff; line-height: 1.3;
      white-space: pre-wrap;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }
    .tg-empty-state,
    .tg-loading-state,
    .tg-error-state,
    .tg-inline-note {
      border-radius: var(--tg-radius-lg);
      border: var(--tg-hairline);
      background: rgba(255,255,255,0.035);
      color: var(--tg-muted);
      text-align: center;
      line-height: 1.35;
    }
    .tg-empty-state,
    .tg-loading-state,
    .tg-error-state {
      padding: 28px 18px;
      font-size: 14px;
    }
    .tg-inline-note {
      padding: 12px 14px;
      font-size: 12px;
    }
    .tg-loading-state {
      border-color: rgba(var(--tg-blue-rgb),0.18);
      background: rgba(var(--tg-blue-rgb),0.055);
    }
    .tg-error-state {
      border-color: rgba(255,69,58,0.22);
      background: rgba(255,69,58,0.07);
      color: rgba(255,180,176,0.92);
    }
    #game-hub-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 5200;
      background: rgba(0,0,0,0.48);
      align-items: flex-end;
      justify-content: center;
      padding: 0 10px;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    #game-hub-overlay.open { display: flex; }
    #game-hub-sheet {
      width: 100%;
      max-width: 480px;
      max-height: min(82vh, 720px);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      background:
        linear-gradient(180deg, rgba(var(--tg-blue-rgb),0.07), rgba(var(--tg-blue-rgb),0) 160px),
        rgba(17,19,24,0.98);
      border: 1px solid rgba(255,255,255,0.10);
      border-bottom: 0;
      border-radius: 22px 22px 0 0;
      box-shadow: 0 -18px 50px rgba(0,0,0,0.42);
      padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
      transform: translateY(18px);
      opacity: 0;
      transition: transform var(--tg-motion-base) var(--tg-ease), opacity var(--tg-motion-fast) var(--tg-ease);
    }
    #game-hub-overlay.open #game-hub-sheet {
      transform: translateY(0);
      opacity: 1;
    }
    .game-hub-header {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px 10px;
      flex-shrink: 0;
    }
    .game-hub-grabber {
      position: absolute;
      top: 7px;
      left: 50%;
      width: 38px;
      height: 4px;
      transform: translateX(-50%);
      border-radius: 99px;
      background: rgba(255,255,255,0.20);
    }
    .game-hub-avatar {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.10);
      font-size: 24px;
      flex-shrink: 0;
    }
    .game-hub-title {
      flex: 1;
      min-width: 0;
    }
    .game-hub-name {
      font-size: 16px;
      font-weight: 820;
      color: #fff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .game-hub-sub {
      margin-top: 3px;
      font-size: 12px;
      color: rgba(255,255,255,0.52);
    }
    .game-hub-close {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.09);
      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.72);
      font-size: 18px;
      cursor: pointer;
      flex-shrink: 0;
    }
    .game-hub-body {
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 0 16px 10px;
    }
    .game-hub-section {
      margin-top: 14px;
    }
    .game-hub-section-title {
      margin: 0 0 8px;
      font-size: 12px;
      font-weight: 760;
      color: rgba(255,255,255,0.54);
      text-transform: uppercase;
    }
    .game-hub-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }
    .hub-action {
      min-height: 78px;
      border: 1px solid rgba(255,255,255,0.09);
      border-radius: 16px;
      background: rgba(255,255,255,0.055);
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 7px;
      cursor: pointer;
      position: relative;
      text-decoration: none;
      font: inherit;
      -webkit-tap-highlight-color: transparent;
      transition: transform var(--tg-motion-fast) var(--tg-ease), background var(--tg-motion-fast) var(--tg-ease), border-color var(--tg-motion-fast) var(--tg-ease);
    }
    .hub-action:active {
      transform: scale(0.96);
      background: rgba(var(--tg-blue-rgb),0.12);
      border-color: rgba(var(--tg-blue-rgb),0.28);
    }
    .hub-action-icon {
      font-size: 23px;
      line-height: 1;
    }
    .hub-action-label {
      max-width: 100%;
      padding: 0 4px;
      font-size: 12px;
      font-weight: 700;
      color: rgba(255,255,255,0.84);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .hub-action .notif-badge {
      position: absolute;
      top: 9px;
      right: 9px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #FF453A;
      box-shadow: 0 0 0 2px rgba(31,33,38,0.92);
      pointer-events: none;
    }
    .hub-action .notif-badge.is-diamond {
      width: auto;
      height: auto;
      top: 6px;
      right: 6px;
      background: transparent;
      box-shadow: none;
      font-size: 13px;
      line-height: 1;
    }
    .hub-quick-note {
      margin: -2px 0 10px;
      font-size: 12px;
      color: rgba(255,255,255,0.46);
      line-height: 1.35;
    }
    .hub-quick-list {
      display: flex;
      flex-direction: column;
      gap: 7px;
    }
    .hub-quick-row {
      min-height: 46px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 10px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.045);
      color: #fff;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition:
        transform var(--tg-motion-fast) var(--tg-ease),
        background var(--tg-motion-fast) var(--tg-ease),
        border-color var(--tg-motion-fast) var(--tg-ease),
        opacity var(--tg-motion-fast) var(--tg-ease);
    }
    .hub-quick-row:active {
      transform: scale(0.98);
      background: rgba(var(--tg-blue-rgb),0.10);
      border-color: rgba(var(--tg-blue-rgb),0.24);
    }
    .hub-quick-row.locked {
      opacity: 0.42;
      cursor: default;
      transform: none;
    }
    .hub-quick-icon {
      width: 28px;
      height: 28px;
      border-radius: 10px;
      background: rgba(255,255,255,0.07);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .hub-quick-copy {
      flex: 1;
      min-width: 0;
    }
    .hub-quick-name {
      font-size: 13px;
      font-weight: 740;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .hub-quick-desc {
      margin-top: 2px;
      font-size: 11px;
      color: rgba(255,255,255,0.45);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .hub-quick-toggle {
      width: 23px;
      height: 23px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255,255,255,0.12);
      color: rgba(255,255,255,0.40);
      font-size: 12px;
      flex-shrink: 0;
    }
    .hub-quick-row.selected .hub-quick-toggle {
      background: var(--tg-blue);
      border-color: var(--tg-blue);
      color: #fff;
    }
    .hud-right-btn .notif-badge {
      position: absolute;
      top: 4px;
      right: 4px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #f44336;
      display: none;
    }

    #map {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      background: #0d0d0d;
    }
    .ot-map-attribution {
      position: absolute;
      right: calc(10px + env(safe-area-inset-right, 0px));
      bottom: var(--ot-map-attribution-bottom, 66px);
      z-index: 650;
      max-width: min(170px, calc(100vw - 32px));
      padding: 2px 4px;
      border-radius: 4px;
      background: rgba(0, 0, 0, 0.38);
      color: rgba(255, 255, 255, 0.68);
      font-size: 9px;
      line-height: 1.2;
      pointer-events: auto;
      text-align: right;
      white-space: nowrap;
    }
    .ot-map-attribution[hidden],
    body.dungeon-mode .ot-map-attribution,
    body.underground-mode .ot-map-attribution {
      display: none !important;
    }
    .ot-map-attribution a {
      color: inherit;
      text-decoration: none;
    }
    #gamestream-maplibre {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
      opacity: 0;
      background: #0d0d0d;
      transition: opacity 180ms ease-out;
    }
    #gamestream-dom-markers,
    #gamestream-dom-markers-maplibre {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      pointer-events: none;
      opacity: 0;
    }
    #gamestream-dom-markers.leaflet-gamestream-dom-markers {
      position: absolute;
      inset: auto;
      left: 0;
      top: 0;
      width: 0;
      height: 0;
      z-index: auto;
    }
    #gamestream-dom-markers-maplibre.maplibre-gamestream-dom-markers {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
    }
    body.gamestream-maplibre-full #gamestream-dom-markers,
    body.gamestream-maplibre-full #gamestream-dom-markers-maplibre,
    body.gamestream-maplibre-dom-visible #gamestream-dom-markers,
    body.gamestream-maplibre-dom-visible #gamestream-dom-markers-maplibre { opacity: 1; }
    #gamestream-dom-markers .gw-dom-marker,
    #gamestream-dom-markers-maplibre .gw-dom-marker {
      position: absolute;
      left: 0;
      top: 0;
      pointer-events: auto;
      will-change: transform;
      contain: style;
      overflow: visible;
    }
    #gamestream-dom-markers .gw-dom-marker.leaflet-interactive,
    #gamestream-dom-markers-maplibre .gw-dom-marker.leaflet-interactive {
      cursor: pointer;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
    #gamestream-dom-markers .gw-dom-marker > *,
    #gamestream-dom-markers-maplibre .gw-dom-marker > * { pointer-events: auto; }
    body.gamestream-maplibre-controller #gamestream-dom-markers-maplibre,
    body.gamestream-maplibre-controller #gamestream-dom-markers-maplibre .gw-dom-marker,
    body.gamestream-maplibre-controller #gamestream-dom-markers-maplibre .gw-dom-marker > * {
      pointer-events: none !important;
    }
    #gamestream-dom-markers.zoom-med .gw-dom-marker > *,
    #gamestream-dom-markers-maplibre.zoom-med .gw-dom-marker > * { transform: scale(0.85); transform-origin: center center; }
    #gamestream-dom-markers.zoom-far .gw-dom-marker > *,
    #gamestream-dom-markers-maplibre.zoom-far .gw-dom-marker > * { transform: scale(0.65); transform-origin: center center; }
    #gamestream-dom-markers.zoom-far .owner-badge,
    #gamestream-dom-markers-maplibre.zoom-far .owner-badge { display: none; }
    #gamestream-dom-markers.zoom-near .building-balance-label,
    #gamestream-dom-markers-maplibre.zoom-near .building-balance-label { display: block; }
    #dungeon-dom-markers-maplibre {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 3;
      pointer-events: none;
      overflow: visible;
    }
    #dungeon-dom-markers-maplibre .dungeon-dom-marker {
      position: absolute;
      left: 0;
      top: 0;
      pointer-events: auto;
      cursor: pointer;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      will-change: transform;
      overflow: visible;
    }
    #dungeon-dom-markers-maplibre .dungeon-dom-marker > * {
      pointer-events: none;
    }
    .dungeon-entrance-marker {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      font-size: 34px;
      line-height: 1;
      filter: none;
      animation: none;
    }
    body.dungeon-mode .leaflet-tile-pane {
	      filter: invert(.9) sepia(.52) hue-rotate(58deg) saturate(.72) brightness(.48) contrast(1.18);
	      opacity: .94;
	    }
	    body.dungeon-mode .leaflet-container {
	      background: #040b08;
	    }
	    body.dungeon-mode .leaflet-container::before {
	      content: "";
	      position: absolute;
	      inset: 0;
	      z-index: 359;
	      pointer-events: none;
	      background:
	        radial-gradient(circle at 28% 30%, rgba(92,116,54,.16), transparent 30%),
	        radial-gradient(circle at 74% 70%, rgba(14,48,34,.22), transparent 34%),
	        linear-gradient(160deg, rgba(2,10,7,.58), rgba(11,30,17,.44) 46%, rgba(3,10,7,.64));
	      mix-blend-mode: multiply;
	      opacity: .96;
	    }
	    body.dungeon-mode .leaflet-container::after {
	      content: "";
	      position: absolute;
	      inset: 0;
	      z-index: 360;
	      pointer-events: none;
	      background:
	        radial-gradient(circle at 50% 48%, rgba(126,78,35,.08), transparent 34%),
	        radial-gradient(circle at 18% 82%, rgba(39,75,36,.11), transparent 28%),
	        linear-gradient(135deg, rgba(10,49,32,.20), rgba(71,43,23,.10));
	      mix-blend-mode: soft-light;
	    }
		    body.dungeon-mode .leaflet-marker-icon:not(.dungeon-marker-keep):not(.player-marker-passthrough),
		    body.dungeon-mode #gamestream-dom-markers .gw-dom-marker,
		    body.dungeon-mode #gamestream-dom-markers-maplibre .gw-dom-marker:not(#gamestream-self-player-marker),
		    body.dungeon-mode .generator-beam-layer {
		      opacity: 0 !important;
		      pointer-events: none !important;
		      visibility: hidden !important;
		    }
	    body.dungeon-mode .leaflet-clanTerritoryPane-pane,
	    body.dungeon-mode .leaflet-clanLinkPane-pane {
	      opacity: 0 !important;
	      pointer-events: none !important;
	      visibility: hidden !important;
	    }
	    body.dungeon-mode .leaflet-overlay-pane path:not(.dungeon-boulder-line):not(.dungeon-poison-aura-path):not(.dungeon-heal-beam-line) {
	      opacity: 0 !important;
	      stroke-opacity: 0 !important;
	      fill-opacity: 0 !important;
	      pointer-events: none !important;
	      visibility: hidden !important;
	    }
	    #map .leaflet-overlay-pane canvas.leaflet-zoom-animated {
	      pointer-events: none !important;
	    }
	    body.dungeon-mode .leaflet-overlay-pane canvas {
	      opacity: 0 !important;
	      pointer-events: none !important;
	      visibility: hidden !important;
	    }
	    body.underground-mode .leaflet-tile-pane,
	    body.underground-mode #gamestream-maplibre {
	      opacity: 0 !important;
	      pointer-events: none !important;
	      visibility: hidden !important;
	    }
	    body.underground-mode .leaflet-container {
	      background:
	        radial-gradient(ellipse at 24% 20%, rgba(73,54,29,.09), transparent 38%),
	        radial-gradient(ellipse at 72% 78%, rgba(18,38,34,.08), transparent 48%),
	        linear-gradient(180deg, #050403, #010101 74%),
	        #030303;
	    }
	    body.underground-mode .leaflet-container::before {
	      content: "";
	      position: absolute;
	      inset: 0;
	      z-index: 359;
	      pointer-events: none;
	      background:
	        radial-gradient(ellipse at 22% 18%, rgba(98,72,38,.08), transparent 40%),
	        radial-gradient(ellipse at 72% 68%, rgba(25,48,44,.07), transparent 50%),
	        linear-gradient(180deg, rgba(4,3,2,.78), rgba(1,1,1,.96));
	      opacity: .92;
	    }
	    body.underground-mode .leaflet-container::after {
	      content: "";
	      position: absolute;
	      inset: 0;
	      z-index: 360;
	      pointer-events: none;
	      background:
	        radial-gradient(ellipse at 50% 50%, transparent 0 58%, rgba(0,0,0,.24) 78%, rgba(0,0,0,.58) 100%),
	        linear-gradient(135deg, rgba(72,54,27,.035), rgba(0,0,0,.26));
	    }
	    body.underground-mode .leaflet-marker-icon:not(.underground-marker-keep):not(.underground-player-marker),
	    body.underground-mode #gamestream-dom-markers .gw-dom-marker,
	    body.underground-mode #gamestream-dom-markers-maplibre .gw-dom-marker,
	    body.underground-mode .generator-beam-layer {
	      opacity: 0 !important;
	      pointer-events: none !important;
	      visibility: hidden !important;
	    }
	    body.underground-mode #joystick-container,
	    body.underground-mode #btn-joystick-toggle {
	      display: none !important;
	      pointer-events: none !important;
	      visibility: hidden !important;
	    }
	    body.underground-mode .leaflet-clanTerritoryPane-pane,
	    body.underground-mode .leaflet-clanLinkPane-pane {
	      opacity: 0 !important;
	      pointer-events: none !important;
	      visibility: hidden !important;
	    }
	    body.underground-mode .leaflet-overlay-pane path,
    body.underground-mode .leaflet-overlay-pane canvas {
      opacity: 0 !important;
      stroke-opacity: 0 !important;
      fill-opacity: 0 !important;
      pointer-events: none !important;
      visibility: hidden !important;
    }
    body.underground-mode .underground-leaflet-pane,
    body.underground-mode .underground-tile-pane,
    body.underground-mode .underground-hit-pane,
    body.underground-mode .underground-marker-pane {
      opacity: 1 !important;
      visibility: visible !important;
    }
    body.underground-mode .underground-tile-pane {
      pointer-events: none !important;
    }
    body.underground-mode .underground-hit-pane {
      pointer-events: auto !important;
    }
    body.underground-mode .underground-marker-pane {
      pointer-events: none !important;
    }
    body.underground-mode .underground-tile-pane .underground-map-material-frame {
      opacity: 1 !important;
      pointer-events: none !important;
      visibility: visible !important;
      position: absolute;
      overflow: hidden;
      transform-origin: top left;
      backface-visibility: hidden;
      contain: layout paint style;
    }
    body.underground-mode .underground-tile-pane .underground-map-material {
      display: block;
      width: 100%;
      height: 100%;
      opacity: 1 !important;
      pointer-events: none !important;
      visibility: visible !important;
      object-fit: fill;
      object-position: center;
      image-rendering: auto;
      transform-origin: center center;
      backface-visibility: hidden;
      -webkit-user-drag: none;
      user-select: none;
    }
    body.underground-mode .underground-hit-pane path.underground-map-cell {
      opacity: 1 !important;
      stroke-opacity: 0 !important;
      fill-opacity: .001 !important;
      pointer-events: auto !important;
      visibility: visible !important;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    body.underground-mode .underground-hit-pane path.underground-map-cell.preview {
      cursor: default;
    }
    body.underground-mode .underground-hit-pane path.underground-map-selected-outline {
      opacity: 1 !important;
      stroke-opacity: .94 !important;
      fill-opacity: .035 !important;
      pointer-events: none !important;
      visibility: visible !important;
      filter: drop-shadow(0 0 8px rgba(245,197,66,.66));
    }
    .underground-cell-hp {
      position: absolute;
      z-index: 5;
      left: 18%;
      right: 18%;
      bottom: 18%;
      height: 4px;
      border-radius: 999px;
      background: rgba(0,0,0,.62);
      overflow: hidden;
      box-shadow: 0 0 0 1px rgba(255,255,255,.14);
      pointer-events: none;
    }
    .underground-cell-hp span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg,#ff594f,#ffb14a);
    }
    .underground-current-ring { display: none !important; }
    .underground-player-marker {
      pointer-events: none;
      line-height: 1;
      filter: drop-shadow(0 0 14px rgba(245,197,66,.44)) drop-shadow(0 7px 12px rgba(0,0,0,.62));
    }
    .underground-player-marker .player-marker-self {
      transform: scale(.78);
      transform-origin: center;
    }
    .underground-lift-marker {
      pointer-events: none;
      background: transparent;
    }
    .underground-lift-marker-inner {
      display: grid;
      place-items: center;
      width: 32px;
      height: 32px;
      border-radius: 11px;
      background: rgba(17,22,29,.78);
      border: 1px solid rgba(255,214,90,.46);
      box-shadow: 0 0 0 1px rgba(0,0,0,.34), 0 0 16px rgba(245,197,66,.30), 0 5px 12px rgba(0,0,0,.48);
      font-size: 20px;
    }
    .underground-lift-marker.foreign .underground-lift-marker-inner {
      border-color: rgba(100,210,255,.48);
      box-shadow: 0 0 0 1px rgba(0,0,0,.34), 0 0 16px rgba(100,210,255,.26), 0 5px 12px rgba(0,0,0,.48);
    }
    .underground-marker-keep {
      background: transparent;
    }
    .underground-map-panel {
	      --underground-panel-accent: var(--tg-gold, #FFD65A);
	      --underground-panel-accent-rgb: 255,214,90;
	      position: fixed;
	      left: calc(max(env(safe-area-inset-left, 0px), var(--ot-tg-content-safe-left), var(--ot-tg-safe-left)) + 8px);
	      right: calc(max(env(safe-area-inset-right, 0px), var(--ot-tg-content-safe-right), var(--ot-tg-safe-right)) + 8px);
	      bottom: 0;
	      z-index: 3500;
	      display: none;
	      max-width: 480px;
	      max-height: min(25dvh, 248px);
	      margin: 0 auto;
	      padding: 6px 12px calc(10px + max(env(safe-area-inset-bottom, 0px), var(--ot-tg-content-safe-bottom), var(--ot-tg-safe-bottom)));
	      overflow: hidden;
	      border: 1px solid var(--tg-border-strong);
	      border-bottom: 0;
	      border-radius: 22px 22px 0 0;
	      background:
	        radial-gradient(circle at 50% -18px, rgba(var(--underground-panel-accent-rgb),.18), transparent 54%),
	        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 116px),
	        var(--tg-surface);
	      color: var(--tg-text);
	      box-shadow: 0 -18px 48px rgba(0,0,0,.36);
	      animation: tgObjectSheetIn var(--tg-motion-base) var(--tg-ease);
	    }
	    .underground-map-panel.open { display: block; }
	    .underground-panel-grip {
	      width: 42px;
	      height: 4px;
	      margin: 0 auto 8px;
	      border-radius: 999px;
	      background: rgba(255,255,255,.24);
	    }
	    .underground-panel-head {
	      min-height: 58px;
	      display: grid;
	      grid-template-columns: minmax(0,1fr) 34px;
	      align-items: center;
	      gap: 8px;
	      padding: 8px 10px;
	      border: 1px solid rgba(var(--underground-panel-accent-rgb),.16);
	      border-radius: 14px;
	      background:
	        linear-gradient(135deg, rgba(var(--underground-panel-accent-rgb),.11), rgba(255,255,255,.030)),
	        rgba(255,255,255,.035);
	      box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
	    }
	    .underground-panel-head.tone-blue {
	      border-color: rgba(var(--underground-panel-accent-rgb),.16);
	    }
	    .underground-panel-head.tone-green {
	      border-color: rgba(var(--underground-panel-accent-rgb),.16);
	    }
	    .underground-panel-main {
	      min-width: 0;
	      display: flex;
	      flex-direction: column;
	      justify-content: center;
	    }
	    .underground-panel-title {
	      color: #fff;
	      font-size: 17px;
	      line-height: 1.16;
	      font-weight: 850;
	      letter-spacing: 0;
	      overflow-wrap: anywhere;
	      display: flex;
	      align-items: center;
	      gap: 7px;
	      min-width: 0;
	    }
	    .underground-panel-title-icon {
	      flex: 0 0 auto;
	      font-size: 18px;
	      line-height: 1;
	      filter: drop-shadow(0 4px 8px rgba(0,0,0,.38));
	    }
	    .underground-panel-note {
	      margin-top: 2px;
	      color: rgba(255,255,255,.48);
	      font-size: 11px;
	      line-height: 1.22;
	      font-weight: 760;
	    }
	    .underground-panel-close {
	      width: 34px;
	      height: 34px;
	      border: 1px solid rgba(255,255,255,.08);
	      border-radius: 50%;
	      background: rgba(255,255,255,.055);
	      color: rgba(255,255,255,.55);
	      font-size: 18px;
	      line-height: 1;
	      cursor: pointer;
	      touch-action: manipulation;
	      display: inline-flex;
	      align-items: center;
	      justify-content: center;
	      justify-self: end;
	      -webkit-tap-highlight-color: transparent;
	    }
	    .underground-panel-lift {
	      margin-top: 8px;
	      padding: 7px 8px;
	      border: 1px solid rgba(255,255,255,.060);
	      border-radius: 12px;
	      background: rgba(255,255,255,.040);
	    }
	    .underground-panel-lift-head {
	      display: flex;
	      align-items: center;
	      justify-content: space-between;
	      gap: 8px;
	      margin-bottom: 5px;
	      color: rgba(255,255,255,.46);
	      font-size: 10px;
	      font-weight: 850;
	    }
	    .underground-panel-lift-head strong {
	      color: #fff;
	      font-size: 12px;
	      font-weight: 850;
	      white-space: nowrap;
	    }
	    .underground-map-panel .building-hpbar {
	      display: flex;
	      align-items: center;
	      gap: 8px;
	      width: 100%;
	      min-width: 0;
	    }
	    .underground-map-panel .building-hp-track {
	      flex: 1;
	      height: 9px;
	      min-width: 44px;
	      border-radius: 999px;
	      background: rgba(255,255,255,.085);
	      overflow: hidden;
	    }
	    .underground-map-panel .building-hp-fill {
	      height: 100%;
	      border-radius: 999px;
	      transition: width .22s var(--tg-ease);
	      box-shadow: 0 0 14px color-mix(in srgb, currentColor 32%, transparent);
	    }
	    .underground-map-panel .building-hp-text {
	      min-width: 58px;
	      color: var(--tg-text);
	      font-size: 12px;
	      font-weight: 780;
	      line-height: 1;
	      text-align: right;
	      font-variant-numeric: tabular-nums;
	    }
	    .underground-panel-meta {
	      display: flex;
	      align-items: center;
	      flex-wrap: wrap;
	      gap: 8px;
	      margin-top: 12px;
	    }
	    .underground-panel-meta.compact {
	      margin-top: 8px;
	      gap: 6px;
	    }
	    .underground-panel-meta span {
	      display: inline-flex;
	      align-items: baseline;
	      gap: 4px;
	      min-height: 34px;
	      padding: 7px 10px;
	      border: 1px solid rgba(255,255,255,.09);
	      border-radius: 13px;
	      background: rgba(255,255,255,.045);
	      color: rgba(205,216,227,.74);
	      font-size: 13px;
	      font-weight: 820;
	    }
	    .underground-panel-meta b {
	      color: #fff;
	      font-weight: 950;
	    }
	    .underground-lift-meter {
	      height: 9px;
	      border-radius: 999px;
	      background: rgba(255,255,255,.085);
	      overflow: hidden;
	    }
	    .underground-lift-meter span {
	      display: block;
	      height: 100%;
	      border-radius: inherit;
	      background: #34C759;
	    }
	    .underground-lift-meter.damaged span,
	    .underground-lift-meter.repairing span {
	      background: #FF9500;
	    }
	    .underground-lift-meter.breached span {
	      background: #FF3B30;
	    }
	    .underground-panel-actions {
	      display: grid;
	      gap: 8px;
	      margin-top: 8px;
	    }
	    .underground-panel-actions.single { grid-template-columns: 1fr; }
	    .underground-panel-actions.split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	    .underground-panel-btn,
	    .underground-map-entry-btn {
	      min-height: 36px;
	      border: 1px solid rgba(var(--underground-panel-accent-rgb),.30);
	      border-radius: 13px;
	      padding: 7px 10px;
	      color: var(--underground-panel-accent);
	      background: rgba(var(--underground-panel-accent-rgb),.14);
	      font-size: 13px;
	      line-height: 1.1;
	      font-weight: 850;
	      cursor: pointer;
	      touch-action: manipulation;
	      box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
	      -webkit-tap-highlight-color: transparent;
	      white-space: nowrap;
	      overflow: hidden;
	      text-overflow: ellipsis;
	    }
	    .underground-panel-btn.primary,
	    .underground-map-entry-btn {
	      background: rgba(var(--underground-panel-accent-rgb),.14);
	      border-color: rgba(var(--underground-panel-accent-rgb),.30);
	      color: var(--underground-panel-accent);
	    }
	    .underground-panel-btn.danger {
	      background: rgba(var(--underground-panel-accent-rgb),.14);
	      border-color: rgba(var(--underground-panel-accent-rgb),.30);
	      color: var(--underground-panel-accent);
	    }
	    .underground-panel-btn.secondary {
	      background: rgba(var(--underground-panel-accent-rgb),.14);
	      border-color: rgba(var(--underground-panel-accent-rgb),.30);
	      color: var(--underground-panel-accent);
	    }
	    .underground-panel-btn.ghost {
	      background: transparent;
	      color: #D7DEE8;
	    }
	    .underground-panel-btn:disabled,
	    .underground-map-entry-btn:disabled {
	      opacity: .55;
	      cursor: default;
	    }
	    .underground-reward-list {
	      display: grid;
	      gap: 4px;
	      min-width: min(260px, 72vw);
	    }
	    .underground-reward-row {
	      display: grid;
	      grid-template-columns: 22px minmax(0, 1fr) auto;
	      align-items: center;
	      gap: 7px;
	      color: rgba(226,234,242,.82);
	      font-size: 13px;
	      line-height: 1.2;
	      font-weight: 760;
	    }
	    .underground-reward-icon {
	      width: 22px;
	      text-align: center;
	      filter: drop-shadow(0 2px 5px rgba(0,0,0,.35));
	    }
	    .underground-reward-label {
	      min-width: 0;
	      overflow: hidden;
	      text-overflow: ellipsis;
	      white-space: nowrap;
	    }
	    .underground-reward-row strong {
	      color: #fff;
	      font-weight: 900;
	      font-variant-numeric: tabular-nums;
	    }
	    .underground-map-entry-btn {
	      width: 100%;
	      margin-top: 8px;
	    }
	    @media (max-width: 380px) {
	      .underground-map-panel { padding: 6px 10px calc(10px + max(env(safe-area-inset-bottom, 0px), var(--ot-tg-content-safe-bottom), var(--ot-tg-safe-bottom))); }
	      .underground-panel-head { grid-template-columns: minmax(0,1fr) 32px; padding: 8px 9px; gap: 8px; }
	      .underground-panel-close { width: 32px; height: 32px; }
	      .underground-panel-title { font-size: 16px; }
	      .underground-panel-title-icon { font-size: 17px; }
	      .underground-panel-note { font-size: 10.5px; }
	      .underground-panel-btn,
	      .underground-map-entry-btn { min-height: 34px; font-size: 12.5px; }
	      .underground-panel-actions { gap: 8px; }
	    }
	    .dungeon-entrance-marker,
	    .dungeon-entity-marker,
	    .dungeon-chest-marker {
      pointer-events: auto !important;
      text-align: center;
      line-height: 1;
      cursor: pointer;
      transform-origin: center;
    }
	    .dungeon-entrance-marker {
	      position: relative;
	      width: 48px;
	      height: 48px;
	      display: grid;
	      place-items: center;
	      font-size: 34px;
	      line-height: 1;
	      background: transparent;
	      box-shadow: none;
	      filter: none;
	      animation: none;
	    }
	    .dungeon-boss-marker {
	      width: 70px;
	      height: 70px;
	      display: grid;
	      place-items: center;
	      pointer-events: auto;
	      transform-origin: center;
	      transform: translateZ(0);
	    }
	    .dungeon-boss-emoji {
	      font-size: 56px;
	      line-height: 1;
	      filter: drop-shadow(0 5px 8px rgba(0,0,0,.72)) drop-shadow(0 0 9px rgba(255,130,64,.58));
	    }
		    .dungeon-boss-marker.enraged .dungeon-boss-emoji {
		      filter: drop-shadow(0 5px 8px rgba(0,0,0,.74)) drop-shadow(0 0 12px rgba(255,58,42,.72));
		    }
		    .dungeon-boss-marker.dungeon-boss-cast-stone::after {
		      content: '';
		      position: absolute;
		      width: 28px;
		      height: 28px;
		      left: 12px;
		      top: 8px;
		      border-radius: 50%;
		      background: radial-gradient(circle, rgba(255,221,119,.9), rgba(255,121,55,.36) 48%, transparent 72%);
		      filter: blur(.6px) drop-shadow(0 0 12px rgba(255,151,57,.8));
		      animation: dungeonBossStoneCue .52s ease-out both;
		      pointer-events: none;
		    }
		    .dungeon-boss-marker.dungeon-boss-cast-stone .dungeon-boss-emoji {
		      animation: dungeonBossStoneEmojiCue .52s ease-out both;
		    }
	    .dungeon-entity-marker {
	      position: relative;
	      display: flex;
	      flex-direction: column;
	      align-items: center;
	      justify-content: center;
	      width: 48px;
	      height: 48px;
	      filter: drop-shadow(0 3px 5px rgba(0,0,0,.68));
	    }
	    .dungeon-entity-hitbox {
	      position: absolute;
	      left: 50%;
	      top: 50%;
	      width: 74px;
	      height: 74px;
	      border-radius: 50%;
	      transform: translate(-50%,-50%);
	      pointer-events: auto;
	      background: transparent;
	      z-index: 1;
	    }
	    .dungeon-entity-emoji { font-size: 34px; line-height: 1; }
	    .dungeon-entity-marker .dungeon-entity-emoji {
	      position: relative;
	      z-index: 2;
	      pointer-events: auto;
	    }
		    .dungeon-entity-marker.dungeon-entity-zombie .dungeon-entity-emoji,
		    .dungeon-entity-marker.dungeon-entity-mob .dungeon-entity-emoji { font-size: 36px; }
		    .dungeon-entity-marker.dungeon-entity-grave .dungeon-entity-emoji,
		    .dungeon-entity-marker.dungeon-entity-moai .dungeon-entity-emoji,
		    .dungeon-entity-marker.dungeon-entity-generator .dungeon-entity-emoji { font-size: 42px; }
		    .dungeon-entity-marker.dungeon-entity-mushroom {
		      width: 72px;
		      height: 72px;
		    }
		    .dungeon-entity-marker.dungeon-entity-mushroom .dungeon-entity-emoji {
		      font-size: 40px;
		      filter: drop-shadow(0 2px 5px rgba(0,0,0,.62)) drop-shadow(0 0 10px rgba(216,80,255,.58));
		    }
	    .dungeon-entity-hp {
	      position: relative;
	      z-index: 3;
	      width: 42px;
	      height: 5px;
	      margin-top: 2px;
	      border-radius: 999px;
	      overflow: hidden;
	      background: rgba(0,0,0,.58);
	      box-shadow: 0 0 0 1px rgba(0,0,0,.26);
	      pointer-events: none;
	    }
	    .dungeon-entity-hp > div {
	      height: 100%;
	      border-radius: inherit;
	      background: #e06060;
	      transition: width .25s ease-out;
	    }
	    .dungeon-swamp-decor-icon {
	      pointer-events: none !important;
	      user-select: none;
	    }
	    .dungeon-swamp-decor {
	      position: relative;
	      width: 48px;
	      height: 48px;
	      display: grid;
	      place-items: end center;
	      font-size: var(--decor-size, 24px);
	      line-height: 1;
	      opacity: var(--decor-opacity, .56);
	      transform: translateY(2px) rotate(var(--decor-rot, 0deg));
	      transform-origin: center bottom;
	      filter: saturate(.78) brightness(.76) drop-shadow(0 3px 5px rgba(0,0,0,.58));
	      pointer-events: none;
	    }
	    .dungeon-swamp-decor::after {
	      content: "";
	      position: absolute;
	      left: 50%;
	      bottom: 3px;
	      width: calc(var(--decor-size, 24px) * .9);
	      height: 7px;
	      border-radius: 50%;
	      transform: translateX(-50%);
	      background: radial-gradient(ellipse, rgba(4,9,6,.42), transparent 70%);
	      z-index: -1;
	    }
		    .dungeon-swamp-decor-tree { filter: saturate(.68) brightness(.66) drop-shadow(0 4px 5px rgba(0,0,0,.6)); }
		    .dungeon-swamp-decor-mushroom { filter: saturate(.8) brightness(.8) drop-shadow(0 2px 4px rgba(0,0,0,.55)); }
		    .dungeon-swamp-decor-deadtree,
		    .dungeon-swamp-decor-log { filter: saturate(.58) brightness(.7) drop-shadow(0 3px 4px rgba(0,0,0,.58)); }
		    .dungeon-entity-marker.dungeon-emerge .dungeon-entity-emoji {
		      animation: dungeonEntityEmerge 1.72s cubic-bezier(.2,.9,.22,1) both;
		    }
		    .dungeon-entity-marker.dungeon-emerge::before {
		      content: '';
		      position: absolute;
		      left: 50%;
		      top: 68%;
		      width: 46px;
		      height: 16px;
		      border-radius: 50%;
		      transform: translate(-50%,-50%);
		      background: radial-gradient(ellipse, rgba(83,62,43,.72), rgba(128,91,54,.38) 48%, transparent 74%);
		      animation: dungeonEarthMound 1.72s ease-out both;
		      pointer-events: none;
		      z-index: -1;
		    }
		    .dungeon-entity-marker.dungeon-zombie-emerge .dungeon-entity-emoji {
		      animation: dungeonZombieEmerge 1.18s cubic-bezier(.17,.86,.2,1) both;
		    }
		    .dungeon-entity-marker.dungeon-zombie-emerge::before {
		      content: '';
		      position: absolute;
		      left: 50%;
		      top: 70%;
		      width: 42px;
		      height: 13px;
		      border-radius: 50%;
		      transform: translate(-50%,-50%);
		      background: radial-gradient(ellipse, rgba(75,58,40,.68), rgba(123,84,51,.34) 48%, transparent 76%);
		      animation: dungeonEarthMound 1.18s ease-out both;
		      pointer-events: none;
		      z-index: 0;
		    }
    .dungeon-chest-marker {
      width: 54px;
      height: 54px;
      display: grid;
      place-items: center;
      font-size: 38px;
      border-radius: 18px;
      background: radial-gradient(circle at 50% 35%, rgba(255,235,141,.28), rgba(111,73,8,.58));
      box-shadow: 0 0 26px rgba(255,209,68,.9), inset 0 0 18px rgba(255,255,255,.12);
      animation: box-pulse 1.2s infinite;
    }
	    .dungeon-hud {
	      position: fixed;
	      top: calc(10px + env(safe-area-inset-top, 0px));
	      right: calc(10px + env(safe-area-inset-right, 0px));
	      z-index: 3400;
	      width: auto;
	      padding: 0;
	      border-radius: 0;
	      background: transparent;
	      border: 0;
	      box-shadow: none;
	      color: #fff;
	      display: none;
	    }
		    body.dungeon-mode .dungeon-hud { display: block; }
		    .dungeon-hud-actions { display: flex; gap: 8px; }
		    .dungeon-hud-btn { border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 8px 12px; min-height: 34px; background: rgba(5,10,18,.74); color: #fff; font-size: 12px; font-weight: 800; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.3); backdrop-filter: blur(10px); }
		    .dungeon-hud-btn[hidden] { display: none; }
		    .dungeon-hud-btn.primary { background: linear-gradient(135deg,#0b80d8,#23a8ff); border-color: rgba(137,221,255,.35); }
		    /* Critical dungeon FX geometry guards. Full boss/boulder/poison/beam
       visuals are loaded with the dungeon-boss-fx feature CSS. */
    .dungeon-boulder-line,
    .dungeon-heal-beam-line,
    .dungeon-poison-aura-path {
      pointer-events: none;
    }
    body.dungeon-mode .leaflet-marker-pane {
      z-index: 4700;
    }
    body.dungeon-mode .leaflet-dungeonMoaiBeam-pane,
    body.dungeon-mode .leaflet-dungeon-moai-beam-pane {
      z-index: 4690 !important;
      pointer-events: none !important;
    }
    .dungeon-cast-beam,
    .dungeon-heal-beam,
    .dungeon-poison-aura-cloud,
    .dungeon-poison-spore,
    .dungeon-poison-skull,
    .dungeon-heal-particle,
    .dungeon-fx,
    .dungeon-projectile,
    .dungeon-boulder-telegraph,
    .dungeon-boulder-rock,
    .dungeon-boulder-dust,
    .dungeon-boulder-crack {
      position: fixed;
      left: 0;
      top: 0;
      pointer-events: none;
    }
    .dungeon-moai-beam-svg,
    .dungeon-moai-beam-glow,
    .dungeon-moai-beam-aurora,
    .dungeon-moai-beam-core,
    .dungeon-moai-beam-particle {
      pointer-events: none;
    }
    #dungeon-maplibre-fx .dungeon-cast-beam,
    #dungeon-maplibre-fx .dungeon-heal-beam,
    #dungeon-maplibre-fx .dungeon-poison-aura-cloud,
    #dungeon-maplibre-fx .dungeon-poison-spore,
    #dungeon-maplibre-fx .dungeon-poison-skull,
    #dungeon-maplibre-fx .dungeon-heal-particle,
    #dungeon-maplibre-fx .dungeon-fx,
    #dungeon-maplibre-fx .dungeon-projectile,
    #dungeon-maplibre-fx .dungeon-boulder-telegraph,
    #dungeon-maplibre-fx .dungeon-boulder-rock,
    #dungeon-maplibre-fx .dungeon-boulder-dust,
    #dungeon-maplibre-fx .dungeon-boulder-crack {
      position: absolute;
    }

    body.dungeon-mode #gamestream-dom-markers-maplibre .gw-dom-marker:not(#gamestream-self-player-marker) {
      opacity: 0 !important;
      pointer-events: none !important;
      visibility: hidden !important;
    }
    body.gamestream-maplibre-controller.dungeon-mode #map .leaflet-marker-pane,
    body.gamestream-maplibre-controller.dungeon-mode #map .leaflet-overlay-pane {
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: none !important;
    }
    body.gamestream-maplibre-controller.dungeon-mode #map .leaflet-marker-pane .dungeon-marker-keep {
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
    }
	    body.gamestream-maplibre-controller.underground-mode #map .leaflet-marker-pane,
	    body.gamestream-maplibre-controller.underground-mode #map .leaflet-overlay-pane {
	      opacity: 1 !important;
	      visibility: visible !important;
	      pointer-events: none !important;
	    }
	    body.gamestream-maplibre-controller.underground-mode #map .underground-leaflet-pane,
	    body.gamestream-maplibre-controller.underground-mode #map .underground-tile-pane,
	    body.gamestream-maplibre-controller.underground-mode #map .underground-hit-pane,
	    body.gamestream-maplibre-controller.underground-mode #map .underground-marker-pane,
	    body.gamestream-maplibre-controller.underground-mode #map .leaflet-marker-pane .underground-marker-keep,
	    body.gamestream-maplibre-controller.underground-mode #map .leaflet-marker-pane .underground-player-marker {
	      opacity: 1 !important;
	      visibility: visible !important;
	    }
	    body.gamestream-maplibre-controller.underground-mode #map .underground-hit-pane {
	      pointer-events: auto !important;
	    }
	    body.gamestream-maplibre-controller.underground-mode #map .underground-tile-pane,
	    body.gamestream-maplibre-controller.underground-mode #map .underground-marker-pane {
	      pointer-events: none !important;
	    }
	    body.gamestream-maplibre-controller.underground-mode #gamestream-dom-markers #gamestream-self-player-marker,
	    body.gamestream-maplibre-controller.underground-mode #gamestream-dom-markers-maplibre #gamestream-self-player-marker {
	      opacity: 0 !important;
	      visibility: hidden !important;
	      pointer-events: none !important;
	    }
    body.gamestream-maplibre-base #gamestream-maplibre {
      opacity: 0;
      pointer-events: none;
      z-index: 0;
    }
    body.gamestream-maplibre-base.gamestream-maplibre-base-ready #gamestream-maplibre { opacity: 1; }
    body.gamestream-maplibre-base #map {
      z-index: 1;
      background: #0d0d0d;
    }
    body.gamestream-maplibre-base.gamestream-maplibre-base-ready #map,
    body.gamestream-maplibre-base.gamestream-maplibre-base-ready #map.leaflet-container { background: transparent; }
    body.gamestream-maplibre-base #map .leaflet-tile-pane { opacity: 1; }
    body.gamestream-maplibre-base.gamestream-maplibre-base-ready #map .leaflet-tile-pane {
      opacity: 0;
      pointer-events: none;
    }
    body.staging-maplibre-keep-leaflet-tiles.gamestream-maplibre-base.gamestream-maplibre-base-ready #map .leaflet-tile-pane {
      opacity: 1;
      pointer-events: none;
      visibility: visible;
    }
    body.gamestream-maplibre-controller #gamestream-maplibre {
      opacity: 1;
      pointer-events: auto;
      z-index: 0;
    }
    body.gamestream-maplibre-controller #map {
      z-index: 1;
      pointer-events: none;
      background: transparent;
    }
    body.gamestream-maplibre-controller #map.leaflet-container { background: transparent; }
    body.gamestream-maplibre-controller #map .leaflet-tile-pane,
    body.gamestream-maplibre-controller #map .leaflet-marker-pane,
    body.gamestream-maplibre-controller #map .leaflet-overlay-pane,
    body.gamestream-maplibre-controller #map .leaflet-shadow-pane,
    body.gamestream-maplibre-controller #map .leaflet-tooltip-pane,
    body.gamestream-maplibre-controller #map .leaflet-popup-pane {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }
    /* A style reload or a short stream delay must not reveal the stale
       compatibility scene after GL has already published the live world. */
    body.gamestream-maplibre-primary-locked #map {
      z-index: 1;
      pointer-events: none;
      background: transparent;
    }
    body.gamestream-maplibre-primary-locked #map .leaflet-tile-pane,
    body.gamestream-maplibre-primary-locked #map .leaflet-marker-pane,
    body.gamestream-maplibre-primary-locked #map .leaflet-overlay-pane,
    body.gamestream-maplibre-primary-locked #map .leaflet-shadow-pane,
    body.gamestream-maplibre-primary-locked #map .leaflet-tooltip-pane,
    body.gamestream-maplibre-primary-locked #map .leaflet-popup-pane {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }
    body.staging-maplibre-keep-leaflet-tiles.gamestream-maplibre-controller #map .leaflet-tile-pane {
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: none !important;
    }
    body.gamestream-maplibre-controller #gamestream-dom-markers-maplibre {
      opacity: 1;
      z-index: 2;
    }
    body.gamestream-maplibre-full #map .leaflet-shadow-pane,
    body.gamestream-maplibre-full #map .leaflet-tooltip-pane,
    body.gamestream-maplibre-full #map .leaflet-popup-pane {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    /* Container sits OUTSIDE the .leaflet-tile-pane filter, so dark bg
       stays dark even when tiles are inverted. */
    .leaflet-container { background: #0d0d0d; }
    /* Critical hidden/pointer state stays inline; full admin/debug styling is lazy. */
    #gamestream-debug-panel { display: none; pointer-events: none; }
    #gamestream-debug-panel.open { display: block; }
    #gamestream-debug-panel button { pointer-events: auto; }
    #admin-workspace,
    #admin-player-modal,
    #admin-reports-modal,
    #admin-pin-locks-modal {
      display: none;
      position: fixed;
      inset: 0;
      overflow: hidden;
      flex-direction: column;
    }
    #admin-workspace.open,
    #admin-player-modal.open,
    #admin-reports-modal.open,
    #admin-pin-locks-modal.open {
      display: flex;
    }
    #admin-workspace {
      z-index: 10002;
      background: #090d12;
      color: #f4f7fb;
    }
    #admin-player-modal {
      z-index: 10006;
      background: #0d0d0d;
    }
    #admin-reports-modal,
    #admin-pin-locks-modal {
      z-index: 10007;
      background: #0d0d0d;
    }
    #admin-workspace .aw-header,
    #admin-workspace .aw-tabs {
      flex-shrink: 0;
      background: #0f151d;
      border-bottom: 1px solid rgba(255,255,255,0.10);
    }
    #admin-workspace .aw-header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: calc(10px + env(safe-area-inset-top,0px)) 14px 10px;
    }
    #admin-workspace .aw-title { flex: 1; min-width: 0; }
    #admin-workspace .aw-title h2 { margin: 0; font-size: 17px; }
    #admin-workspace .aw-title p { margin: 4px 0 0; color: #8b98a8; font-size: 11px; }
    #admin-workspace .aw-close {
      width: 36px;
      height: 36px;
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 8px;
      background: rgba(255,255,255,0.07);
      color: #fff;
    }
    #admin-workspace .aw-tabs {
      display: flex;
      gap: 6px;
      overflow-x: auto;
      padding: 8px 12px;
    }
    #admin-workspace .aw-tab,
    #admin-workspace .aw-btn,
    #admin-workspace .aw-filter,
    #admin-workspace .aw-load-more {
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 8px;
      background: rgba(255,255,255,0.06);
      color: #fff;
      min-height: 34px;
      padding: 8px 10px;
      font-weight: 700;
    }
    #admin-workspace .aw-tab.active,
    #admin-workspace .aw-filter.active {
      border-color: rgba(78,201,255,0.55);
      background: rgba(78,201,255,0.16);
    }
    #admin-workspace .aw-body {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      padding: 12px;
      padding-bottom: calc(18px + env(safe-area-inset-bottom,0px));
    }
    #admin-workspace .aw-card,
    #admin-workspace .aw-kpi,
    #admin-workspace .aw-player-card,
    #admin-workspace .aw-empty {
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 8px;
      background: #111821;
      padding: 10px;
      margin-bottom: 8px;
    }
    /* Bottom panel */
    #bottom-panel {
      position: fixed;
      bottom: calc(var(--bottom-panel-nudge, 0px) * -1);
      left: 0;
      right: 0;
      z-index: 1000;
      background: #0F1115;
      border-top: 1px solid rgba(255,255,255,0.06);
      padding: 10px 12px;
      padding-bottom: 4px;
      display: flex;
      align-items: center;
      gap: 8px;
      transition:
        transform var(--tg-motion-base) var(--tg-ease),
        opacity var(--tg-motion-base) var(--tg-ease);
    }
    html.ios-pwa #bottom-panel {
      bottom: calc((max(env(safe-area-inset-bottom, 0px), 34px) + var(--bottom-panel-nudge, 0px)) * -1);
      padding-bottom: calc(max(env(safe-area-inset-bottom, 0px), 34px) + 4px);
    }

    #btn-inventory {
      position: relative;
      flex-shrink: 0;
      width: 46px;
      height: 46px;
      border-radius: 14px;
      background: rgba(var(--tg-blue-rgb),0.12) !important;
      border: 1px solid rgba(var(--tg-blue-rgb),0.28) !important;
      color: #fff;
      font-size: 23px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: background 0.2s;
    }
    #btn-inventory:active { background: rgba(255,255,255,0.15); }
    #btn-inventory .bottom-hub-badge {
      position: absolute;
      top: 3px;
      right: 3px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #f44336;
      pointer-events: none;
    }
    #btn-inventory .bottom-hub-badge.is-diamond {
      width: auto;
      height: auto;
      top: 3px;
      right: 3px;
      background: transparent;
      box-shadow: none;
      font-size: 12px;
      line-height: 1;
    }

    #player-avatar-wrap {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      flex-shrink: 0;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    #player-info {
      flex: 1;
      min-width: 0;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      padding: 6px 8px;
      border-radius: 14px;
      background: rgba(255,255,255,0.035);
      border: 1px solid rgba(255,255,255,0.055);
    }

    #player-name-display {
      font-size: 15px;
      font-weight: 600;
      color: #fff;
      line-height: 1.2;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #player-level-display {
      font-size: 12px;
      color: #FFD700;
      margin-top: 1px;
    }

    #player-xp-bar-wrap {
      margin-top: 1px;
      margin-bottom: 4px;
    }

    #player-xp-bar-bg {
      height: 3px;
      background: rgba(255,255,255,0.1);
      border-radius: 2px;
      overflow: hidden;
    }

    #player-xp-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, #FFD700, #FFA000);
      border-radius: 2px;
      width: 0%;
      transition: width 0.4s ease;
    }

    #player-xp-text {
      font-size: 9px;
      color: #888;
      text-align: right;
      margin-top: 1px;
      line-height: 1;
      letter-spacing: 0.2px;
    }

    .player-marker-self {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none !important;
    }
    .player-marker-avatar {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      line-height: 1;
      filter: drop-shadow(0 0 12px rgba(0,0,0,0.9)) drop-shadow(0 4px 8px rgba(0,0,0,0.7));
    }
    /* Player HP bar floats under the player marker (hidden at full HP). */
    .player-marker-hp-bar {
      position: absolute;
      left: 50%;
      top: auto;
      bottom: -8px;
      transform: translateX(-50%);
      width: 36px;
      height: 4px;
      background: rgba(0,0,0,0.6);
      border-radius: 3px;
      overflow: hidden;
      pointer-events: none;
      display: none;
      box-shadow: 0 1px 2px rgba(0,0,0,0.8);
    }
    .player-marker-hp-bar.visible { display: block; }
    .player-marker-hp-bar > div {
      height: 100%;
      width: 100%;
      background: #e06060;
      border-radius: 3px;
      transition: width 0.3s ease, background 0.3s ease;
    }

    /* XP toast chips — now uses standard showToast */

    .btn {
      background: #1e1e1e;
      border: 1px solid #333;
      color: #e0e0e0;
      padding: 8px 14px;
      border-radius: var(--btn-radius);
      font-size: 13px;
      cursor: pointer;
      white-space: nowrap;
      transition:
        transform var(--tg-motion-fast) var(--tg-ease),
        background 0.15s,
        border-color 0.15s,
        opacity var(--tg-motion-fast) var(--tg-ease);
      -webkit-tap-highlight-color: transparent;
    }

    .btn:hover { background: #252525; }
    .btn:active { transform: scale(0.97); background: #2a2a2a; }
    .btn.primary { background: #2a4a2a; border-color: #3d7a3d; color: #6fcf6f; }
    .btn.primary:hover { background: #234223; }
    .btn.primary:active { background: #1e3a1e; }
    .btn.danger { background: #4a1e1e; border-color: #8a3030; color: #e06060; }
    .btn.danger:hover { background: #421a1a; }
    .btn.danger:active { background: #3a1010; }
    .btn.yellow { background: #3a3000; border-color: #806a00; color: #f5c518; }
    .btn.yellow:hover { background: #332a00; }
    .btn.yellow:active { background: #2a2200; }
    .btn.selected { background: #2a4a2a; border-color: #4caf50; color: #4caf50; }
    .btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

    /* Popup stays above fullscreen feature panels such as daily missions. */
    #popup-overlay {
      display: none;
      position: fixed;
      inset: 0;
      box-sizing: border-box;
      background: transparent;
      z-index: 9400;
      align-items: flex-end;
      justify-content: center;
      padding: 0 8px 0;
      /* Let map gestures (pan/zoom) pass through the transparent area above
         the card. Only the card itself captures touches — see #popup-card. */
      pointer-events: none;
    }

    #popup-overlay.open,
    #popup-overlay.is-closing { display: flex; }
    #popup-overlay.is-closing {
      pointer-events: none !important;
    }
    #popup-overlay.popup-overlay-ground-loot-compact {
      padding-left: 0;
      padding-right: 0;
    }

    #popup-card {
      pointer-events: auto;
      background: #1a1a2e;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 16px 16px 0 0;
      box-shadow: 0 -4px 24px rgba(0,0,0,0.5);
      box-sizing: border-box;
      width: 100%;
      max-width: 480px;
      max-height: min(86dvh, calc(100dvh - 8px));
      overflow-y: auto;
      padding: 20px;
      animation: tgObjectSheetIn var(--tg-motion-base) var(--tg-ease);
    }
    #popup-overlay.is-closing #popup-card {
      pointer-events: none;
      animation: none !important;
      transform: translate3d(0, 18px, 0);
      opacity: 0;
      transition:
        transform var(--tg-motion-popup-exit) var(--tg-ease),
        opacity var(--tg-motion-popup-exit) linear;
    }

    .gw-pickup-fly {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 9200;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      line-height: 1;
      transform: translate3d(0, 0, 0);
      opacity: 1;
      will-change: transform;
      transition: transform 360ms linear;
      contain: layout style paint;
    }
    .gw-pickup-fly {
      animation: none !important;
    }
    .gw-pickup-fly * {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
    .gw-pickup-fly-icon {
      flex: 0 0 auto;
      pointer-events: none !important;
    }
    @media (prefers-reduced-motion: reduce) {
      .gw-pickup-fly {
        transition-duration: 80ms;
      }
    }

    @keyframes slideUp {
      from { transform: translateY(40px); opacity: 0; }
      to   { transform: translateY(0);    opacity: 1; }
    }

    /* Mine-sheet layout and motion are defined once at the end of this file.
       Keep only the shared handle styling here. */
    .mine-pop-handle {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      padding: 2px 0 6px;
      margin: -10px -16px 2px;
      cursor: grab;
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
    }
    .mine-pop-bar {
      width: 44px;
      height: 4px;
      border-radius: 2px;
      background: rgba(255,255,255,0.25);
      transition: background 0.15s;
    }
    .mine-pop-handle:active .mine-pop-bar { background: rgba(255,255,255,0.5); }
    .mine-pop-hint {
      font-size: 10px;
      color: #666;
      letter-spacing: 0.5px;
    }
    #popup-card.popup-card-mine-expanded .mine-pop-hint::before { content: attr(data-collapse); }
    #popup-card:not(.popup-card-mine-expanded) .mine-pop-hint::before { content: attr(data-expand); }

    #popup-card h2 { font-size: 16px; margin-bottom: 4px; }
    #popup-card .subtitle { font-size: 12px; color: #999; margin-bottom: 16px; }

    .popup-stat {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: var(--card-bg);
      border-radius: var(--card-radius);
      padding: 10px 12px;
      font-size: 13px;
      color: #ccc;
    }

    .popup-stat .val { font-weight: 600; color: #f5c518; }

    .popup-actions {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 12px;
    }

    .popup-actions > .btn {
      width: 100%;
      text-align: center;
      padding: 12px 16px;
      font-size: 14px;
    }

    .popup-btn-row {
      display: flex;
      gap: 8px;
    }

    .popup-btn-row .btn {
      flex: 1;
      text-align: center;
      padding: 12px 16px;
      font-size: 14px;
    }

    /* Toast container */
    #toast-container {
      position: fixed;
      top: calc(env(safe-area-inset-top, 0px) + 70px);
      left: 50%;
      transform: translateX(-50%);
      z-index: 9998;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      width: min(340px, calc(100vw - 24px));
      max-width: calc(100vw - 24px);
      pointer-events: none;
      word-wrap: break-word;
      overflow-wrap: break-word;
    }

    .gw-toast {
      width: 100%;
      position: relative;
      display: grid;
      grid-template-columns: 22px 1fr;
      gap: 8px;
      align-items: start;
      padding: 8px 10px 8px 12px;
      border-radius: 14px;
      border: var(--tg-hairline);
      background: rgba(23,26,32,0.94);
      color: var(--tg-text);
      box-shadow: 0 10px 24px rgba(0,0,0,0.28);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      opacity: 0;
      transform: translateY(-10px) scale(0.98);
      transition: transform 0.24s var(--tg-ease), opacity 0.24s var(--tg-ease);
      overflow: hidden;
      pointer-events: none;
    }
    .gw-toast::before {
      content: '';
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 3px;
      background: var(--gw-toast-accent, var(--tg-blue));
    }
    .gw-toast.visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    .gw-toast-icon {
      width: 22px;
      height: 22px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: rgba(var(--gw-toast-accent-rgb, var(--tg-blue-rgb)),0.14);
      border: 1px solid rgba(var(--gw-toast-accent-rgb, var(--tg-blue-rgb)),0.22);
      font-size: 12px;
      line-height: 1;
    }
    .gw-toast-body { min-width: 0; }
    .gw-toast-title {
      display: none;
      margin-bottom: 2px;
      color: var(--tg-text);
      font-size: 11px;
      font-weight: 800;
      line-height: 1.2;
    }
    .gw-toast.has-title .gw-toast-title { display: block; }
    .gw-toast-text {
      color: rgba(242,244,247,0.92);
      font-size: 12px;
      font-weight: 600;
      line-height: 1.28;
      white-space: pre-line;
      overflow-wrap: anywhere;
    }
    .gw-toast-success { --gw-toast-accent: var(--tg-success); --gw-toast-accent-rgb: 52,199,89; }
    .gw-toast-error { --gw-toast-accent: var(--tg-danger); --gw-toast-accent-rgb: 255,69,58; }
    .gw-toast-warning { --gw-toast-accent: #FF9F0A; --gw-toast-accent-rgb: 255,159,10; }
    .gw-toast-reward { --gw-toast-accent: var(--tg-gold); --gw-toast-accent-rgb: 255,214,90; }
    .gw-toast-combat { --gw-toast-accent: #FF3B8A; --gw-toast-accent-rgb: 255,59,138; }
    .gw-toast-info { --gw-toast-accent: var(--tg-blue); --gw-toast-accent-rgb: var(--tg-blue-rgb); }

    /* Leaflet marker overrides */
    .leaflet-marker-icon { border: none !important; background: none !important; }
    path.clan-territory-path,
    path.clan-territory-outline-path,
    path.clan-link-path,
    path.clan-link-outline-path,
    path.clan-hq-zone-outline-path,
    path.clan-hq-zone-path {
      vector-effect: non-scaling-stroke;
      shape-rendering: geometricPrecision;
    }
    path.clan-territory-path {
      filter: drop-shadow(0 0 0.8px rgba(0,0,0,0.58)) drop-shadow(0 0 2.2px rgba(255,255,255,0.14));
    }
    path.clan-link-path {
      filter: drop-shadow(0 0 0.9px rgba(0,0,0,0.72)) drop-shadow(0 0 3px rgba(255,255,255,0.18));
    }
    path.clan-hq-zone-path {
      filter: drop-shadow(0 0 0.75px rgba(0,0,0,0.54)) drop-shadow(0 0 2px rgba(255,255,255,0.12));
    }
    /* No bg here — CSS filters on this pane invert it, turning dark bg white.
       Background lives on #map / .leaflet-container, which sit above the filter. */
    .leaflet-tile-pane { will-change: transform, filter; }

    .marker-emoji {
      font-size: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      cursor: pointer;
      filter: drop-shadow(0 1px 3px rgba(0,0,0,0.8));
    }

    /* Loading overlay */
    #loading {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: auto;
      width: 100%;
      height: var(--ot-viewport-height, 100dvh);
      min-height: 100vh;
      min-height: 100svh;
      background:
        radial-gradient(circle at 50% 0%, rgba(var(--tg-blue-rgb),0.10), transparent 34%),
        linear-gradient(180deg, #101c28 0%, var(--tg-bg) 72%, var(--tg-bg) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 10px;
      z-index: 9999;
      color: var(--tg-text);
    }

    #loading h1 { font-size: 20px; font-weight: 850; letter-spacing: 0; color: var(--tg-text); }
    #loading p { color: var(--tg-muted); font-size: 13px; }

    .spinner {
      width: 32px; height: 32px;
      border: 3px solid rgba(255,255,255,0.08);
      border-top-color: var(--tg-blue);
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
    }

    @keyframes spin { to { transform: rotate(360deg); } }

    /* Settings drawer */
    #settings-drawer {
      display: none;
      position: fixed;
      inset: 0;
      background: #1a1a2e;
      z-index: 5500;
      flex-direction: column;
      overflow: hidden;
    }
    #settings-drawer.open { display: flex; }

    #settings-header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      padding-top: calc(12px + env(safe-area-inset-top, 0px));
      background: #1a1a2e;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      flex-shrink: 0;
    }
    #settings-header h3 { flex: 1; font-size: 16px; font-weight: 800; color: #fff; margin: 0; }
    #btn-close-settings {
      background: none;
      border: none;
      color: #888;
      font-size: 20px;
      cursor: pointer;
      padding: 4px;
      -webkit-tap-highlight-color: transparent;
    }

    #settings-tabs {
      display: flex;
      background: #1a1a2e;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      padding: 0 16px;
      flex-shrink: 0;
    }
    .settings-tab {
      flex: 1;
      background: none;
      border: none;
      border-bottom: 2px solid transparent;
      color: #666;
      font-size: 13px;
      font-weight: 600;
      padding: 10px 0;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: color 0.15s, border-color 0.15s;
    }
    .settings-tab.active { color: #FFD700; border-bottom-color: #FFD700; }
    .settings-tab-content { display: none; }
    .settings-tab-content.active { display: block; }

    #settings-body {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 16px;
      padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }

    .settings-section-title {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.5px;
      color: rgba(255,255,255,0.35);
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    .settings-card {
      background: rgba(255,255,255,0.045);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 16px;
      padding: 12px;
      margin-bottom: 12px;
    }

    .monument-request-section { padding: 16px; }
    .monument-request-section .section-title { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 6px; }
    .monument-request-section .section-subtitle { font-size: 13px; color: #888; margin-bottom: 16px; line-height: 1.4; }
    .monument-request-section .form-group label { display: block; font-size: 13px; color: #aaa; margin-bottom: 6px; }
    .level-selector { display: flex; gap: 6px; flex-wrap: wrap; }
    .level-option { width: 42px; height: 42px; background: #1a1a2e; border: 1px solid #333; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; cursor: pointer; color: #888; }
    .level-option.selected { background: rgba(255,215,0,0.2); border-color: #FFD700; color: #FFD700; }

    .settings-action-btn {
      min-height: 46px;
      border-radius: 14px;
      padding: 10px 12px;
      font-size: 13px;
      font-weight: 700;
      width: 100%;
      text-align: left !important;
      display: flex;
      align-items: center;
      justify-content: flex-start !important;
      gap: 10px;
      margin-bottom: 8px;
      transition: all 0.2s;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      border: 1px solid;
      line-height: 1.22;
      white-space: normal;
      word-break: normal;
      overflow-wrap: anywhere;
      box-sizing: border-box;
    }
    .settings-action-btn:active { transform: scale(0.97); filter: brightness(1.2); }
    .settings-action-btn.s-default { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); color: #fff; }
    .settings-action-btn.s-danger { background: rgba(255,23,68,0.12); border-color: rgba(255,23,68,0.3); color: #FF1744; }
    .settings-action-btn.s-yellow { background: rgba(255,193,7,0.12); border-color: rgba(255,193,7,0.3); color: #FFC107; }
    .settings-action-btn.s-purple { background: rgba(123,47,190,0.12); border-color: rgba(123,47,190,0.3); color: #9C27B0; }
    .settings-action-btn.s-blue { background: rgba(33,150,243,0.12); border-color: rgba(33,150,243,0.3); color: #2196F3; }
    .settings-action-btn.info-link { text-decoration: none; }
    #settings-info-card.info-focus {
      border-color: rgba(255,215,0,0.38);
      box-shadow: 0 0 0 1px rgba(255,215,0,0.12), 0 0 28px rgba(255,215,0,0.14);
    }
    .settings-select-row {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 48px;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.045);
    }
    .settings-select-icon {
      width: 30px;
      height: 30px;
      border-radius: 10px;
      background: rgba(255,255,255,0.07);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .settings-select-copy {
      flex: 1;
      min-width: 0;
    }
    .settings-select-title {
      font-size: 13px;
      font-weight: 760;
      color: rgba(255,255,255,0.88);
    }
    .settings-select-sub {
      margin-top: 2px;
      font-size: 11px;
      color: rgba(255,255,255,0.44);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .settings-select {
      width: 112px;
      min-height: 36px;
      padding: 0 10px;
      flex-shrink: 0;
      font-size: 12px;
      font-weight: 700;
    }

    .map-style-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.08);
      background: #252538;
      margin-bottom: 8px;
      cursor: pointer;
      transition: all 0.2s;
      -webkit-tap-highlight-color: transparent;
    }
    .map-style-card.active {
      border-color: rgba(255,215,0,0.4);
      background: rgba(255,215,0,0.06);
    }
    .map-style-card:active { transform: scale(0.98); }
    .map-style-preview {
      width: 60px;
      height: 60px;
      border-radius: 10px;
      flex-shrink: 0;
    }
    .map-style-info { flex: 1; }
    .map-style-name { font-size: 14px; font-weight: 700; color: #fff; }
    .map-style-desc { font-size: 12px; color: #888; margin-top: 2px; }
    .map-style-check { font-size: 18px; color: #FFD700; flex-shrink: 0; }

    #avatar-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 6px;
    }
    .avatar-cell {
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      border-radius: 8px;
      border: 2px solid transparent;
      cursor: pointer;
      background: #1a1a1a;
      -webkit-tap-highlight-color: transparent;
      transition: border-color 0.15s;
    }
    .avatar-cell.selected { border-color: #f5c518; }
    .avatar-cell:active { background: #2a2a2a; }

    /* Avatar bottom sheet */
    #avatar-sheet-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.6);
      z-index: 8100;
      align-items: flex-end;
    }
    #avatar-sheet-overlay.open { display: flex; }
    #avatar-sheet {
      background: #1a1a2e;
      width: 100%;
      border-radius: 16px 16px 0 0;
      padding: 20px;
      max-height: 70vh;
      overflow-y: auto;
      animation: slideUp 0.25s ease-out;
    }

    /* Leaderboard modal */
    #leaderboard-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: #0b0c10;
      z-index: 5000;
      flex-direction: column;
      overflow: hidden;
    }
    #leaderboard-overlay.open { display: flex; }
    #leaderboard-header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      padding-top: calc(12px + env(safe-area-inset-top, 0px));
      border-bottom: 1px solid #1a1d26;
      flex-shrink: 0;
      background: #101117;
    }
    #leaderboard-header h3 { flex: 1; font-size: 16px; font-weight: 800; color: #fff; margin: 0; }
    .lb-close, .lb-refresh {
      background: none;
      border: none;
      color: #888;
      font-size: 20px;
      cursor: pointer;
      padding: 4px;
      -webkit-tap-highlight-color: transparent;
    }
    .lb-refresh { font-size: 16px; }
    .lb-refresh:active { opacity: 0.5; }
    #leaderboard-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px; }
    #leaderboard-list { display: flex; flex-direction: column; gap: 8px; }
    #leaderboard-current {
      border-top: 1px solid #1a1d26; flex-shrink: 0;
      background: #101117; padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px));
    }
    .lb-podium {
      display: grid; grid-template-columns: 1fr 1.08fr 1fr; gap: 8px; align-items: end;
      margin-bottom: 12px;
    }
    .lb-podium-card {
      --accent:#FFD700; --accent-rgb:255,215,0;
      min-height: 128px; border-radius: 8px; padding: 12px 8px 10px; text-align: center;
      background: linear-gradient(180deg, #171922, #11131a);
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 8px 20px rgba(0,0,0,0.14);
      position: relative; overflow: hidden; cursor: pointer;
    }
    .lb-podium-card::before, .lb-row::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(circle at 50% -26px, rgba(var(--accent-rgb),0.16), transparent 58%);
    }
    .lb-podium-card.rank-1 { min-height: 146px; --accent:#FFD700; --accent-rgb:255,215,0; }
    .lb-podium-card.rank-2 { --accent:#B7C5D9; --accent-rgb:183,197,217; }
    .lb-podium-card.rank-3 { --accent:#D58B55; --accent-rgb:213,139,85; }
    .lb-podium-rank { font-size: 18px; font-weight: 900; color: var(--accent); margin-bottom: 8px; }
    .lb-podium-name { font-size: 12px; font-weight: 800; color:#fff; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:8px; }
    .lb-podium-title { font-size: 10px; color: rgba(255,255,255,0.46); line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; }
    .lb-podium-score { color: var(--accent); font-size: 12px; font-weight: 800; margin-top: 6px; }
    .lb-row {
      --accent:#FFD700; --accent-rgb:255,215,0;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border-radius: 8px;
      background: linear-gradient(180deg, #171922, #11131a);
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 8px 20px rgba(0,0,0,0.14);
      font-size: 13px;
      position: relative; overflow: hidden;
    }
    .lb-row.current-player { border-color: rgba(255,215,0,0.30); background: linear-gradient(180deg, #1c1a18, #121218); }
    .lb-rank { min-width: 28px; font-weight: 800; font-size: 13px; text-align: center; color: rgba(255,255,255,0.38); }
    .lb-rank.medal { font-size: 20px; }
    .lb-info { flex: 1; overflow: hidden; display: flex; flex-direction: column; gap: 1px; }
    .lb-name { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: 13px; }
    .lb-xp { font-size: 11px; color: rgba(255,255,255,0.42); white-space: nowrap; }
    .lb-title-line { font-size: 10px; color: rgba(255,255,255,0.35); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .lb-level {
      color: #FFD700; font-weight: 800; font-size: 14px; white-space: nowrap;
      background: rgba(255,215,0,0.1); border: 1px solid rgba(255,215,0,0.2);
      border-radius: 8px; padding: 4px 10px; min-width: 36px; text-align: center;
    }
    .lb-current-label { padding:0 2px 7px; font-size:11px; color:rgba(255,255,255,0.35); text-transform:uppercase; letter-spacing:1.2px; }

    .avatar-frame {
      --frame-accent:#2d3341; --frame-accent-rgb:45,51,65;
      width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
      display:flex; align-items:center; justify-content:center; position:relative;
      isolation:isolate; overflow:hidden;
      background:#101117; border:1px solid rgba(255,255,255,0.10);
      box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
    }
    .avatar-frame::before {
      content:''; position:absolute; inset:4px; border-radius:50%; z-index:-1;
      background:radial-gradient(circle at 50% 38%, rgba(255,255,255,0.10), transparent 34%), #101117;
    }
    .avatar-frame::after {
      content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);
    }
    .avatar-frame .avatar-frame-emoji { font-size: 25px; line-height:1; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.45)); z-index:1; }
    .avatar-frame.sm { width: 34px; height: 34px; }
    .avatar-frame.sm .avatar-frame-emoji { font-size: 20px; }
    .avatar-frame.lg { width: 94px; height: 94px; }
    .avatar-frame.lg .avatar-frame-emoji { font-size: 58px; }
    .avatar-frame.preview { width: 58px; height: 58px; }
    .avatar-frame.preview .avatar-frame-emoji { font-size: 34px; }
    .avatar-frame-mark {
      position:absolute; left:50%; bottom:-1px; transform:translateX(-50%);
      min-width:16px; height:13px; padding:0 4px; border-radius:7px 7px 9px 9px;
      display:flex; align-items:center; justify-content:center; z-index:2;
      font-size:9px; line-height:1; font-weight:900; letter-spacing:0;
      color:#17100a; background:var(--frame-accent);
      box-shadow:0 2px 5px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.35);
    }
    .avatar-frame.preview .avatar-frame-mark { height:15px; min-width:19px; font-size:10px; bottom:-2px; }
    .avatar-frame.lg .avatar-frame-mark { height:20px; min-width:28px; border-radius:10px 10px 13px 13px; font-size:13px; bottom:-3px; }
    .avatar-frame.frame-plain { border-color:rgba(255,255,255,0.12); background:#101117; }
    .avatar-frame.frame-plain .avatar-frame-mark { display:none; }
    .avatar-frame.frame-bronze {
      border:0; background:
        linear-gradient(155deg, transparent 16%, rgba(255,241,214,0.28) 17% 20%, transparent 21%),
        conic-gradient(from 20deg, #4a2411, #b87333, #f0b16b, #7a3d18, #d88a42, #4a2411);
      box-shadow:0 0 18px rgba(184,115,51,0.24), 0 0 0 3px rgba(184,115,51,0.08);
    }
    .avatar-frame.frame-bronze .avatar-frame-mark { background:linear-gradient(180deg,#f0b16b,#9a5424); }
    .avatar-frame.frame-silver {
      border:0; background:
        linear-gradient(135deg, transparent 13%, rgba(255,255,255,0.46) 14% 17%, transparent 18% 46%, rgba(255,255,255,0.30) 47% 50%, transparent 51%),
        conic-gradient(from 30deg, #45515f, #e7edf5, #91a0af, #ffffff, #657384, #45515f);
      box-shadow:0 0 21px rgba(199,213,229,0.28), 0 0 0 3px rgba(199,213,229,0.09);
    }
    .avatar-frame.frame-silver .avatar-frame-mark { min-width:20px; background:linear-gradient(180deg,#ffffff,#9eacba); }
    .avatar-frame.frame-gold75 {
      border:0; background:
        radial-gradient(circle at 18% 82%, rgba(255,246,180,0.50) 0 5%, transparent 6%),
        radial-gradient(circle at 82% 82%, rgba(255,246,180,0.50) 0 5%, transparent 6%),
        conic-gradient(from 0deg, #805000, #f7b733, #fff2a8, #c97900, #ffd65a, #805000);
      box-shadow:0 0 24px rgba(255,202,64,0.30), 0 0 0 3px rgba(255,215,0,0.10);
    }
    .avatar-frame.frame-gold75::after {
      content:''; position:absolute; inset:4px; border-radius:50%; pointer-events:none;
      border-left:2px solid rgba(255,244,178,0.62); border-right:2px solid rgba(255,244,178,0.62);
      transform:rotate(18deg); box-shadow:none;
    }
    .avatar-frame.frame-gold75 .avatar-frame-mark { min-width:22px; background:linear-gradient(180deg,#fff1a5,#d99100); }
    .avatar-frame.frame-hundred {
      border:0; background:
        radial-gradient(circle at 22% 16%, #e11d48 0 6%, transparent 7%),
        radial-gradient(circle at 78% 16%, #e11d48 0 6%, transparent 7%),
        radial-gradient(circle at 50% 4%, #fb7185 0 5%, transparent 6%),
        conic-gradient(from 0deg, #6f4300, #ffd700, #fff4b0, #b76d00, #ffd700, #6f4300);
      box-shadow:0 0 28px rgba(255,215,0,0.34), 0 0 0 4px rgba(225,29,72,0.10);
    }
    .avatar-frame.frame-hundred::after {
      content:''; position:absolute; inset:2px; border-radius:50%; pointer-events:none;
      border:1px solid rgba(255,255,255,0.20);
      box-shadow:inset 0 0 0 3px rgba(255,215,0,0.16), inset 0 -8px 10px rgba(111,67,0,0.25);
    }
    .avatar-frame.frame-hundred .avatar-frame-mark {
      min-width:24px; color:#3a2100; background:linear-gradient(180deg,#fff6a8,#ffd700 45%,#c98900);
      text-shadow:0 1px 0 rgba(255,255,255,0.45);
    }
    .avatar-frame.frames-disabled {
      border-color: transparent;
      background: transparent;
      box-shadow: none;
      outline: none;
    }
    .avatar-frame.frames-disabled::before,
    .avatar-frame.frames-disabled::after,
    .avatar-frame.frames-disabled .avatar-frame-mark {
      display: none;
    }

    /* Equipped badge, shown after any rendered nickname (leaderboard, popups,
       clan list, PvP, admin, etc.) */
    .lb-badge, .user-badge { font-size: 14px; margin-left: -4px; vertical-align: -1px; }

    /* Profile overlay */
    #profile-overlay {
      display: none; position: fixed; inset: 0;
      background: #0b0c10; z-index: 5100;
      flex-direction: column; overflow: hidden;
    }
    #profile-overlay.open { display: flex; }
    .profile-topbar {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top, 0px));
      border-bottom: 1px solid #1a1d26; flex-shrink: 0; background: #101117;
    }
    .profile-topbar-title { font-size: 16px; font-weight: 800; color: #fff; text-align: center; }
    .profile-scroll {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: calc(40px + var(--ot-panel-body-pad-bottom));
    }
    .profile-topbar-spacer,
    .profile-topbar-action {
      width: var(--ot-panel-close-size);
      height: var(--ot-panel-close-size);
      min-width: var(--ot-panel-close-size);
      flex: 0 0 var(--ot-panel-close-size);
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .profile-topbar-action {
      border-radius: 50%;
      border: var(--tg-hairline);
      background: var(--tg-surface-2);
      color: #FFD700;
      font-size: 16px;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .btn-back { background: none; border: none; color: #888; font-size: 14px; cursor: pointer; padding: 4px 8px; }
    .profile-card {
      --accent:#2d3341; --accent-rgb:45,51,65;
      margin: 14px; border-radius: 8px; overflow: hidden; position: relative; min-height: 190px;
      background: linear-gradient(180deg, #171922, #11131a);
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 8px 20px rgba(0,0,0,0.14);
    }
    .profile-card::before {
      content:''; position:absolute; inset:0; pointer-events:none;
      background: radial-gradient(circle at 50% -40px, rgba(var(--accent-rgb),0.18), transparent 62%);
    }
    .profile-card-bg { position: absolute; inset: 0; opacity: 0.22; }
    .profile-card-content { position: relative; z-index: 1; padding: 20px 18px; text-align: center; }
    .profile-hero-avatar { display:flex; justify-content:center; margin-bottom: 10px; }
    .profile-username { font-size: 22px; font-weight: 900; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.8); line-height:1.15; }
    .profile-title-line { font-size: 12px; color: rgba(255,255,255,0.46); margin-top: 5px; font-weight: 700; }
    .profile-level-badge { display: inline-block; background: rgba(255,215,0,0.10); color: #FFD700; border:1px solid rgba(255,215,0,0.22); padding: 3px 12px; border-radius: 8px; font-size: 13px; font-weight:800; margin-top: 9px; }
    .profile-clan { font-size: 13px; color: rgba(255,255,255,0.62); margin-top: 7px; }
    .profile-active-badge { display: inline-block; margin-top: 10px; padding: 5px 12px; border-radius: 8px; border: 1px solid; font-size: 12px; font-weight: 800; color: #fff; background: rgba(0,0,0,0.24); }
    .profile-stats-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 14px 14px; }
    .profile-stat {
      padding: 12px 8px; text-align: center; border-radius:8px;
      background: linear-gradient(180deg, #171922, #11131a);
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .stat-value { font-size: 18px; font-weight: 700; color: #fff; }
    .stat-label { font-size: 11px; color: rgba(255,255,255,0.42); margin-top: 4px; line-height:1.2; }
    .profile-section {
      margin: 0 14px 14px; border-radius:8px; padding:14px;
      background: linear-gradient(180deg, #171922, #11131a);
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .profile-section-title { font-size: 11px; color: rgba(255,255,255,0.35); margin-bottom: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; }
    .profile-best-mine { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.035); border:1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 12px; }
    .best-mine-icon { font-size: 36px; }
    .best-mine-level { font-size: 16px; font-weight: 700; color: #fff; }
    .best-mine-income { font-size: 13px; color: #888; margin-top: 2px; }
    .profile-build { display: flex; flex-direction: column; gap: 8px; }
    .build-item { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.035); border-radius: 8px; padding: 10px 12px; border-left: 3px solid transparent; }
    .build-item.rarity-common    { border-color: #888; }
    .build-item.rarity-uncommon  { border-color: #2e7d32; }
    .build-item.rarity-rare      { border-color: #1565c0; }
    .build-item.rarity-epic      { border-color: #6a1b9a; }
    .build-item.rarity-mythic    { border-color: #ff3b8a; }
    .build-item.rarity-legendary { border-color: #f9a825; }
    .build-item-icon { font-size: 24px; }
    .build-item-name { font-size: 14px; font-weight: 600; color: #fff; }
    .build-item-rarity { font-size: 11px; color: #888; }
    .build-item-level { font-size: 11px; color: #FFD700; }
    .profile-badges-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .profile-badge-card { background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 12px 8px; text-align: center; cursor: pointer; transition: all 0.2s; position: relative; overflow:hidden; }
    .profile-badge-card.active { border-color: var(--badge-color); box-shadow: 0 0 12px var(--badge-color); background: rgba(255,215,0,0.05); }
    .badge-emoji { font-size: 28px; margin-bottom: 6px; }
    .badge-name { font-size: 11px; color: #aaa; line-height: 1.3; }
    .badge-active-label { position: absolute; top: -6px; right: -6px; background: #FFD700; color: #000; font-size: 9px; padding: 2px 5px; border-radius: 6px; font-weight: 700; }
    .badge-set-label { font-size: 10px; color: #555; margin-top: 4px; }
    .no-badges, .no-build { color: #444; text-align: center; padding: 20px; font-size: 13px; }

    /* Profile style editor */
    .style-tab-shell { display:flex; flex-direction:column; gap:14px; }
    .custom-preview-card {
      --accent:#2d3341; --accent-rgb:45,51,65;
      border-radius:8px; padding:18px 14px; text-align:center; position:relative; overflow:hidden;
      background:linear-gradient(180deg,#171922,#11131a);
      border:1px solid rgba(255,255,255,0.08);
      box-shadow:inset 0 1px 0 rgba(255,255,255,0.04),0 8px 20px rgba(0,0,0,0.14);
    }
    .custom-preview-card::before {
      content:''; position:absolute; inset:0; pointer-events:none;
      background:radial-gradient(circle at 50% -36px, rgba(var(--accent-rgb),0.18), transparent 62%);
    }
    .custom-preview-inner { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
    .custom-preview-name { margin-top:10px; color:#fff; font-size:20px; font-weight:900; line-height:1.15; }
    .custom-preview-title { margin-top:5px; color:rgba(255,255,255,0.46); font-size:12px; font-weight:700; }
    .custom-section { margin-top:0; }
    .custom-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-bottom:10px; }
    .custom-section-title { color:#fff; font-size:14px; font-weight:800; }
    .custom-section-subtitle { color:rgba(255,255,255,0.45); font-size:11px; margin-top:2px; line-height:1.3; }
    .custom-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .custom-action-btn {
      border-radius:8px; border:1px solid rgba(255,255,255,0.08); background:linear-gradient(180deg,#171922,#11131a);
      color:#fff; padding:12px; font-weight:800; font-size:13px; cursor:pointer; position:relative; overflow:hidden;
    }
    .custom-action-btn::before {
      content:''; position:absolute; inset:0; pointer-events:none;
      background:radial-gradient(circle at 50% -24px, rgba(255,215,0,0.12), transparent 58%);
    }
    .frame-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
    .frame-card {
      --accent:#2d3341; --accent-rgb:45,51,65;
      border-radius:8px; border:1px solid rgba(255,255,255,0.08); background:
        linear-gradient(180deg, rgba(var(--accent-rgb),0.10), rgba(0,0,0,0) 42%),
        linear-gradient(180deg,#171922,#11131a);
      padding:12px 10px; min-height:150px; box-sizing:border-box; text-align:center; position:relative; overflow:hidden;
      display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer;
      box-shadow:inset 0 1px 0 rgba(255,255,255,0.04),0 8px 20px rgba(0,0,0,0.14);
    }
    .frame-card::before {
      content:''; position:absolute; inset:0; pointer-events:none;
      background:radial-gradient(circle at 50% -26px, rgba(var(--accent-rgb),0.15), transparent 58%);
    }
    .frame-card.locked { opacity:0.42; cursor:default; filter:saturate(0.45); }
    .frame-card.equipped { border-color:rgba(255,215,0,0.45); box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px rgba(255,215,0,0.12), 0 12px 24px rgba(0,0,0,0.18); }
    .frame-card-name { color:#fff; font-size:12px; font-weight:800; line-height:1.2; position:relative; z-index:1; }
    .frame-card-desc { color:rgba(255,255,255,0.43); font-size:10px; line-height:1.25; min-height:24px; position:relative; z-index:1; }
    .frame-card-state { margin-top:auto; color:#FFD700; border:1px solid rgba(255,215,0,0.25); background:rgba(255,215,0,0.10); border-radius:8px; padding:6px 10px; font-size:11px; font-weight:800; width:100%; box-sizing:border-box; position:relative; z-index:1; }
    .style-badges-title-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
    .style-empty-note { color:rgba(255,255,255,0.38); font-size:12px; line-height:1.35; padding:14px; border-radius:8px; background:rgba(255,255,255,0.035); border:1px solid rgba(255,255,255,0.06); text-align:center; }
    /* Player popup card */
    #popup-card.popup-card-player { padding: 10px 14px 14px; }
    .player-popup { padding: 0; }
    .player-popup-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
    .player-popup-avatar { font-size: 32px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: #1a1a2e; border-radius: 10px; border: 2px solid #333; flex-shrink: 0; }
    .player-popup-name { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.2; }
    .player-popup-level { font-size: 11px; color: #888; margin-top: 1px; line-height: 1.2; }
    .player-popup-badge { font-size: 11px; margin-top: 2px; font-weight: 600; line-height: 1.2; }
    .player-popup-hp { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
    .player-popup-hp .pp-hp-label { font-size: 11px; color: #888; width: 20px; }
    .player-popup-hp .pp-hp-bar { flex: 1; height: 6px; background: #222; border-radius: 3px; overflow: hidden; }
    .player-popup-hp .pp-hp-fill { height: 100%; background: linear-gradient(90deg, #4caf50, #8bc34a); border-radius: 3px; transition: width 0.3s; }
    .player-popup-hp .pp-hp-text { font-size: 11px; color: #888; }
    .player-popup-clan { font-size: 12px; color: #aaa; margin-bottom: 8px; }
    .player-popup-btns { display: flex; flex-direction: column; gap: 6px; }
    .btn-profile { background: #1a1a2e; border: 1px solid #333; color: #fff; padding: 8px; border-radius: 10px; font-size: 13px; cursor: pointer; width: 100%; -webkit-tap-highlight-color: transparent; }
    .btn-profile:active { opacity: 0.7; }
    .btn-attack-disabled { text-align: center; color: #555; font-size: 13px; padding: 10px; background: #111; border-radius: 10px; }

    /* Mine marker ring for capturable */
    .marker-capturable::after {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: 50%;
      border: 2px solid #e06060;
      pointer-events: none;
    }

    /* HQ marker glow on emoji */
    .marker-hq-own > span {
      filter: drop-shadow(0 0 6px rgba(255,255,255,0.8))
              drop-shadow(0 0 14px rgba(255,255,255,0.35));
    }
    .marker-hq-other > span {
      filter: drop-shadow(0 0 4px rgba(255,255,255,0.3))
              drop-shadow(0 0 10px rgba(255,255,255,0.12));
    }

    .marker-wrap {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .leaflet-marker-icon.leaflet-interactive {
      cursor: pointer;
      pointer-events: auto;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      contain: layout style;
    }
    body.gw-map-interacting .leaflet-marker-icon.leaflet-interactive,
    body.gw-map-interacting .leaflet-marker-icon.leaflet-interactive > *,
    body.gw-map-interacting #gamestream-dom-markers .gw-dom-marker,
    body.gw-map-interacting #gamestream-dom-markers .gw-dom-marker > *,
    body.gw-map-interacting #gamestream-dom-markers-maplibre .gw-dom-marker {
      pointer-events: none;
    }
    body.gw-map-interacting #gamestream-dom-markers-maplibre .gw-dom-marker > * {
      pointer-events: none;
    }
    .leaflet-marker-icon.leaflet-interactive > * {
      pointer-events: auto;
    }
    .gw-dense-mine-dom-layer {
      position: absolute;
      left: 0;
      top: 0;
      width: 0;
      height: 0;
      pointer-events: none;
      z-index: 1000;
      contain: layout style;
    }
    .gw-dense-mine-dom-marker {
      pointer-events: none !important;
      touch-action: none;
      contain: layout style;
      will-change: transform;
    }
    .gw-dense-mine-dom-marker > * {
      pointer-events: none !important;
    }
    .player-marker-passthrough {
      pointer-events: none !important;
    }
    .other-player-icon {
      background: none !important;
      border: none !important;
    }
    .player-shield-dome {
      position:absolute; inset:-4px; border-radius:50%;
      background: radial-gradient(ellipse at 35% 30%, rgba(255,180,60,0.35), rgba(255,140,0,0.12) 60%, rgba(220,160,0,0.06));
      border: 1.5px solid rgba(255,180,60,0.5);
      box-shadow: 0 0 14px 4px rgba(255,160,0,0.3), inset 0 0 20px 2px rgba(255,200,60,0.12);
      pointer-events:none; animation: wave-dome-pulse 2s ease-in-out infinite;
    }

    /* Selected building highlight — handled via L.circle on map */

    /* Build menu cards */
    .build-card {
      background: var(--card-bg);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 12px;
      padding: 14px 14px 12px;
      margin-bottom: 8px;
    }

    .build-card-header {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .build-card-desc {
      font-size: 12px;
      color: #888;
      padding-left: 28px;
      margin-bottom: 2px;
    }

    .build-card-meta {
      font-size: 12px;
      color: #f5c518;
      padding-left: 28px;
      margin-bottom: 10px;
    }

    /* Level-up overlay */
    /* Level-up particle animation */
    @keyframes particleFloat {
      0%   { transform: translate(0,0) scale(1); opacity: 1; }
      100% { transform: translate(var(--px), -50px) scale(0); opacity: 0; }
    }

    /* Player level badge — clickable */
    #player-level-display { cursor: pointer; }
    #player-level-display:active { opacity: 0.7; }

    /* Maintenance screen */
    #maintenance-screen {
      display: none;
      position: fixed;
      inset: 0;
      background: #0d0d1a;
      z-index: 99999;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20px;
      text-align: center;
      padding: 32px;
      padding-top: calc(32px + env(safe-area-inset-top, 0px));
    }
    #maintenance-screen.open { display: flex; }

    #session-kicked-screen {
      display: none;
      position: fixed;
      inset: 0;
      background: #0d0d1a;
      z-index: 100000;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 32px;
      padding-top: calc(32px + env(safe-area-inset-top, 0px));
    }
    #session-kicked-screen.open { display: flex; }

    #maintenance-avatar {
      display: flex;
      align-items: center;
      justify-content: center;
      animation: bossPulse 2s ease-in-out infinite;
    }

    #maintenance-avatar-inner {
      font-size: 80px;
      line-height: 1;
    }

    #maintenance-title {
      font-size: 26px;
      font-weight: 900;
      color: #fff;
      letter-spacing: 1px;
    }

    #maintenance-sub {
      font-size: 16px;
      color: #FFD700;
      font-weight: 600;
    }

    #maintenance-hint {
      font-size: 13px;
      color: #555;
      margin-top: -8px;
    }

    /* Maintenance animation scene */
    #maintenance-scene {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      overflow: hidden;
      height: 80px;
      pointer-events: none;
    }

    #maintenance-ground {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      font-size: 14px;
      white-space: nowrap;
      color: #333;
      line-height: 1;
    }

    #maintenance-tram {
      position: absolute;
      bottom: 16px;
      font-size: 48px;
      line-height: 1;
      display: inline-block;
      animation: maintenanceTram 4s linear infinite;
    }

    #maintenance-runner {
      position: absolute;
      bottom: 16px;
      font-size: 36px;
      line-height: 1;
      display: inline-block;
      animation: maintenanceTram 4s linear infinite;
      animation-delay: 0.8s;
    }

    @keyframes maintenanceTram {
      0%   { transform: translateX(100vw); }
      100% { transform: translateX(-200px); }
    }

    /* Ban screen */
    #ban-screen {
      display: none;
      position: fixed;
      inset: 0;
      background: radial-gradient(circle at center, rgb(80,0,0), rgb(0,0,0));
      z-index: 99999;
      padding-top: env(safe-area-inset-top, 0px);
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      text-align: center;
      padding: 32px;
    }
    #ban-screen.open { display: flex; }

    #ban-grave-wrap {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 8px;
    }
    #ban-avatar-circle {
      width: 70px; height: 70px;
      border-radius: 50%;
      border: 3px solid #888;
      display: flex; align-items: center; justify-content: center;
      background: rgba(0,0,0,0.5);
      position: absolute;
      top: 20px;
      z-index: 2;
      box-shadow: 0 0 20px rgba(0,0,0,0.6);
    }
    #ban-avatar-emoji { font-size: 44px; line-height: 1; }
    #ban-gravestone {
      width: 120px;
      height: 140px;
      background: linear-gradient(180deg, #5a5a5a 0%, #3a3a3a 100%);
      border-radius: 60px 60px 4px 4px;
      margin-top: 0;
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 20px rgba(0,0,0,0.7);
      border: 2px solid #4a4a4a;
    }
    #ban-gravestone::after {
      content: 'R.I.P.';
      position: absolute;
      bottom: 18px;
      font-size: 18px;
      font-weight: 900;
      color: #777;
      letter-spacing: 2px;
      font-family: serif;
    }
    #ban-grave-base {
      width: 150px;
      height: 20px;
      background: linear-gradient(180deg, #3a2a1a, #2a1a0a);
      border-radius: 4px;
      margin-top: -4px;
      z-index: 1;
      box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    }
    #ban-grave-ground {
      width: 200px;
      height: 12px;
      background: radial-gradient(ellipse at center, #2a4a1a 0%, transparent 70%);
      margin-top: -2px;
    }

    #ban-title {
      font-size: 24px; font-weight: 900;
      color: #d50000; letter-spacing: 1px;
      margin-top: 8px;
    }

    #ban-reason-wrap { color: #aaa; font-size: 15px; margin-top: 4px; }
    #ban-reason-text { color: #fff; font-size: 16px; font-style: italic; margin-top: 4px; }

    #ban-until-text { color: #ff6666; font-size: 18px; font-weight: 700; margin-top: 4px; }

    /* Upgrade progress bar */
    .upgrade-progress-wrap {
      margin: 6px 0 2px;
      background: rgba(255,255,255,0.08);
      border-radius: 6px;
      height: 8px;
      overflow: hidden;
    }
    .upgrade-progress-bar {
      height: 100%;
      background: linear-gradient(90deg, #FFD700, #ff9900);
      border-radius: 6px;
      transition: width 1s linear;
    }

    /* Boss pulse animation */
    @keyframes bossPulse {
      0%, 100% { transform: scale(1); filter: drop-shadow(0 0 12px rgba(255,0,0,0.9)); }
      50%       { transform: scale(1.18); filter: drop-shadow(0 0 22px rgba(255,0,0,1)); }
    }
    .bot-boss-pulse { animation: bossPulse 0.85s ease-in-out infinite; }

    /* Attacking bot pulse */
    @keyframes attackPulse {
      0%   { transform: scale(1); }
      50%  { transform: scale(1.3); }
      100% { transform: scale(1); }
    }
    .bot-attacking { animation: attackPulse 0.5s infinite; }

    /* Mine under attack flash */
    @keyframes mineFlash {
      0%   { filter: drop-shadow(0 0 8px rgba(255,0,0,0.9)); }
      50%  { filter: drop-shadow(0 0 3px rgba(255,0,0,0.3)); }
      100% { filter: drop-shadow(0 0 8px rgba(255,0,0,0.9)); }
    }
    .mine-under-attack { animation: mineFlash 0.5s infinite; }

    /* Drain text float */
    @keyframes floatUp {
      0%   { opacity: 1; transform: translateY(0); }
      100% { opacity: 0; transform: translateY(-40px); }
    }

    .vase-marker { cursor: pointer; }
    .owner-badge { position:absolute;top:0px;right:-5px;font-size:8px;line-height:1;pointer-events:none; }

    /* Zoom-out scaling (far zoom starts at z<=14):
       — #map.zoom-med (z=14.5..15.5): icons at 85%, avatar badges still visible.
       — #map.zoom-far (z<=14, i.e. fully zoomed out): icons at 65%, badges hidden.
       We scale the direct children of .leaflet-marker-icon (our custom divIcon
       content) instead of the marker element itself, because Leaflet uses
       `transform: translate3d(...)` on .leaflet-marker-icon for positioning
       and a second transform on the same element would clobber that. */
    #map.zoom-med .leaflet-marker-icon > * { transform: scale(0.85); transform-origin: center center; }
    #map.zoom-far .leaflet-marker-icon > * { transform: scale(0.65); transform-origin: center center; }
    .zoom-far .owner-badge { display: none; }

    /* Vase shatter */
    @keyframes shatter {
      0%   { transform: scale(1)   rotate(0deg);   opacity: 1; }
      25%  { transform: scale(1.3) rotate(-10deg); opacity: 1; }
      50%  { transform: scale(0.8) rotate(10deg);  opacity: 0.7; }
      75%  { transform: scale(1.1) rotate(-5deg);  opacity: 0.4; }
      100% { transform: scale(0)   rotate(0deg);   opacity: 0; }
    }
    .vase-shattering { animation: shatter 0.35s ease-in forwards; }
    .xp-float-map {
      position: absolute;
      color: #B388FF;
      font-size: 22px;
      font-weight: 900;
      letter-spacing: 0.5px;
      pointer-events: none;
      z-index: 3000;
      text-shadow:
        0 0 10px rgba(179,136,255,0.95),
        0 0 18px rgba(124,77,255,0.7),
        0 2px 4px rgba(0,0,0,0.95);
      animation: xpFloatUp 2.2s ease-out forwards;
      white-space: nowrap;
      transform: translateX(-50%);
    }
    .coin-float-map {
      position: absolute;
      color: #FFD700;
      font-size: 13px;
      font-weight: 700;
      pointer-events: none;
      z-index: 3000;
      animation: coinFloatUp 1.0s ease-out forwards;
      white-space: nowrap;
      transform: translateX(-50%);
    }
    .coin-float-map .coin-emoji {
      font-size: 0.8em;
      margin-left: 2px;
      vertical-align: middle;
    }
    @keyframes coinFloatUp {
      0%   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.1); }
      20%  { opacity: 1; transform: translateX(-50%) translateY(-10px) scale(1); }
      100% { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(0.9); }
    }
    @keyframes xpFloatUp {
      0%   { opacity: 0; transform: translateX(-50%) translateY(0) scale(0.6); }
      15%  { opacity: 1; transform: translateX(-50%) translateY(-6px) scale(1.35); }
      35%  { opacity: 1; transform: translateX(-50%) translateY(-22px) scale(1.1); }
      100% { opacity: 0; transform: translateX(-50%) translateY(-70px) scale(0.95); }
    }

    /* Building balance label — floats above mine/collector markers at high zoom */
    .building-balance-label {
      position: absolute;
      left: 50%;
      bottom: 100%;
      transform: translateX(-50%);
      padding: 0;
      margin-bottom: 2px;
      border-radius: 0;
      background: transparent;
      color: #FFFFFF;
      font-size: 10px;
      font-weight: 700;
      line-height: 1;
      white-space: nowrap;
      pointer-events: none;
      -webkit-text-stroke: 0.35px #000000;
      paint-order: stroke fill;
      text-shadow: none;
      display: none;
    }
    #map.zoom-near .building-balance-label { display: block; }


	    /* Combat HP popup polish is loaded as an eager frontend style asset. */

    .hp-bar-container {
      background: #111;
      border-radius: 4px;
      height: 8px;
      overflow: hidden;
      margin: 4px 0;
    }
    .hp-bar-fill {
      height: 100%;
      border-radius: 4px;
      transition: width 0.3s ease;
    }
    .hp-bar-fill.bot    { background: linear-gradient(90deg, #e06060, #ff4444); }
    .hp-bar-fill.player { background: linear-gradient(90deg, #4caf50, #81c784); }
    .hp-label { font-size: 10px; color: #666; }

    /* Floating damage text */
    .float-dmg {
      position: fixed;
      font-size: 22px;
      font-weight: 900;
      pointer-events: none;
      z-index: 3000;
      text-shadow: 0 1px 4px rgba(0,0,0,0.9);
      transition: transform 1.1s ease-out, opacity 1.1s ease-out;
      opacity: 1;
      transform: translateY(0);
      white-space: nowrap;
    }

    /* Profile modal base CSS is lazy-loaded with profile-panels. */

    #referral-hub-overlay,
    #underground-season-overlay,
    #daily-missions-overlay {
      position:fixed; inset:0; z-index:9300; display:none; flex-direction:column;
      background:#0F1115; color:#F2F4F7;
    }
    #referral-hub-overlay.open,
    #underground-season-overlay.open,
    #daily-missions-overlay.open { display:flex; }
    .ref-overlay-header {
      height:52px; padding:0 14px; padding-top:env(safe-area-inset-top, 0);
      display:flex; align-items:center; gap:10px; flex-shrink:0;
      background:rgba(15,17,21,0.96); border-bottom:1px solid rgba(255,255,255,0.08);
    }
    .ref-overlay-close {
      width:36px; height:36px; border-radius:12px; border:1px solid rgba(255,255,255,0.10);
      background:rgba(255,255,255,0.05); color:#F2F4F7; font-size:18px; cursor:pointer;
    }
    .ref-overlay-title { font-size:16px; font-weight:850; line-height:1.1; }
    .ref-overlay-sub { font-size:11px; color:#8F98A6; margin-top:2px; }
    #referral-hub-body,
    #underground-season-body,
    #daily-missions-body { flex:1; min-height:0; overflow:auto; }
	    #underground-season-overlay {
	      background:
	        radial-gradient(circle at 50% 0%, rgba(255,214,90,0.08), transparent 30%),
	        #0F1115;
	    }
	    #underground-season-overlay:not(.open) {
	      pointer-events: none;
	    }
	    #underground-season-overlay .ref-overlay-header {
	      border-bottom-color: rgba(255,214,90,0.12);
	    }
    #underground-season-overlay .ref-panel,
    #underground-season-overlay .ref-list {
      border-color: rgba(255,214,90,0.12);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
    }
    #underground-season-overlay .ref-progress-fill,
    #underground-season-overlay .ref-mini-fill {
      background: linear-gradient(90deg,#FFD65A,#C98B24);
    }
    #underground-season-overlay .ref-step.current {
      background: rgba(255,214,90,0.10);
      border-color: rgba(255,214,90,0.36);
    }
    #underground-season-overlay .ref-step.current .ref-step-count,
    #underground-season-overlay .ref-ms-claim,
    #underground-season-overlay .underground-shop-btn {
      background: linear-gradient(180deg,#FFD65A,#C98B24);
      color: #171006;
      border: 0;
    }
    #underground-season-overlay .ref-ms-claim:disabled,
    #underground-season-overlay .underground-shop-btn:disabled {
      background: #252A33;
      color: #687281;
    }
    #daily-missions-overlay { background:#101217; }
    #daily-missions-overlay:not(.open) {
      pointer-events: none;
    }
    #daily-missions-overlay.open {
      animation: dailyMissionsPanelIn 220ms cubic-bezier(.2,.8,.2,1) both;
    }
    .daily-missions-header {
      height:52px; padding:0 14px; padding-top:env(safe-area-inset-top, 0);
      display:flex; align-items:center; gap:10px; flex-shrink:0;
      background:rgba(16,18,23,0.96); border-bottom:1px solid rgba(94,219,255,0.13);
    }
    .daily-missions-close {
      width:36px; height:36px; border-radius:8px; border:1px solid rgba(255,255,255,0.10);
      background:rgba(255,255,255,0.05); color:#F2F4F7; font-size:18px; cursor:pointer;
    }
    .daily-missions-title { font-size:16px; font-weight:850; line-height:1.1; }
    .daily-missions-sub { font-size:12px; color:#B8C2CF; font-weight:800; margin-top:2px; }
    .daily-missions-content {
      min-height:100%;
      padding:12px 12px calc(22px + env(safe-area-inset-bottom, 0));
      box-sizing:border-box;
    }
    .daily-missions-summary {
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:10px;
      margin-bottom:10px;
      color:#B8C2CF;
      font-size:12px;
      line-height:1.35;
    }
    .daily-missions-summary strong {
      color:#F2F4F7;
      font-size:14px;
      font-weight:850;
    }
    .daily-missions-reset {
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      justify-content:flex-end;
      min-width:106px;
      text-align:right;
      line-height:1;
    }
    .daily-missions-reset span {
      color:#7E8A98;
      font-size:10px;
      font-weight:850;
      line-height:1.1;
    }
    .daily-missions-reset b {
      color:#F2F4F7;
      font-size:22px;
      font-weight:950;
      line-height:1.05;
      margin-top:2px;
    }
    .daily-missions-reset em {
      color:#7E8A98;
      font-size:10px;
      font-style:normal;
      font-weight:850;
      line-height:1.1;
      margin-top:2px;
    }
    .daily-missions-reset em { display:none; }
    .daily-missions-list { background:transparent; }
    .daily-mission-group-label {
      display:flex;
      align-items:center;
      gap:8px;
      min-height:34px;
      padding:10px 2px 6px;
      color:#8B98A7;
      font-size:11px;
      font-weight:900;
      line-height:1;
      box-sizing:border-box;
    }
    .daily-mission-group-label::after {
      content:'';
      height:1px;
      flex:1;
      background:rgba(255,255,255,0.10);
    }
    .daily-mission-group-label em {
      color:#667281;
      font-size:10px;
      font-style:normal;
      font-weight:750;
    }
    .daily-mission-row {
      min-height:62px;
      display:grid;
      grid-template-columns:40px minmax(0,1fr) 28px auto;
      align-items:center;
      gap:9px;
      padding:8px 2px;
      border-bottom:1px solid rgba(255,255,255,0.08);
      background:transparent;
      box-sizing:border-box;
      animation: dailyMissionRowIn 220ms cubic-bezier(.2,.8,.2,1) both;
      animation-delay: calc(var(--mission-row-index, 0) * 22ms);
    }
    .daily-mission-row.ready {
      margin:0 -6px;
      padding-right:8px;
      padding-left:8px;
      border-bottom-color:transparent;
      border-radius:10px;
      background:#13242c;
    }
    .daily-mission-row.claimed { opacity:.58; }
    .daily-mission-icon {
      width:34px; height:34px; display:flex; align-items:center; justify-content:center;
      font-size:23px; line-height:1; border-radius:9px; background:#1D222A;
    }
    .daily-mission-main {
      min-width:0;
    }
    .daily-mission-title-text {
      color:#F7F8FA;
      font-size:14px;
      font-weight:800;
      line-height:1.2;
      overflow-wrap:anywhere;
    }
    .daily-mission-progress {
      margin-top:3px;
      color:#8D97A5;
      font-size:12px;
      font-weight:650;
      line-height:1.2;
    }
    .daily-mission-reward {
      min-width:42px;
      height:28px;
      padding:0 2px;
      display:flex;
      align-items:center;
      justify-content:center;
      white-space:nowrap;
      border:0;
      background:transparent;
      color:#BFC7D2;
      font-size:13px;
      font-weight:850;
    }
    .daily-mission-claim {
      min-width:90px;
      height:34px;
      padding:0 10px;
      border:0;
      border-radius:8px;
      background:#36B6E9;
      color:#061018;
      font-size:13px;
      font-weight:900;
      white-space:nowrap;
      cursor:pointer;
      box-shadow:0 4px 8px rgba(34,168,232,0.18);
      transition:transform 140ms cubic-bezier(.2,.8,.2,1), filter 140ms cubic-bezier(.2,.8,.2,1);
    }
    .daily-mission-claim:active { transform:scale(.96); filter:brightness(1.08); }
    .daily-mission-claim.claiming { animation: dailyMissionClaimPulse 170ms cubic-bezier(.2,.8,.2,1) both; }
    .daily-mission-claimed-pill {
      min-width:76px;
      height:28px;
      padding:0 2px;
      display:flex;
      align-items:center;
      justify-content:center;
      white-space:nowrap;
      background:transparent;
      color:#69D98D;
      font-size:12px;
      font-weight:850;
    }
    .daily-mission-info {
      width:28px; height:28px; border:0; border-radius:50%;
      background:transparent; color:#9FA8B6;
      font-size:14px; font-weight:900; cursor:pointer;
    }
    .daily-missions-empty,
    .daily-missions-error,
    .daily-missions-loading {
      min-height:180px;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      color:#AAB4C1;
      line-height:1.4;
      padding:20px;
      box-sizing:border-box;
    }
    @keyframes dailyMissionsPanelIn {
      from { opacity:0; transform:translateY(10px); }
      to { opacity:1; transform:translateY(0); }
    }
    @keyframes dailyMissionRowIn {
      from { opacity:0; transform:translateY(8px); }
      to { opacity:1; transform:translateY(0); }
    }
    @keyframes dailyMissionClaimPulse {
      0% { transform:scale(1); }
      55% { transform:scale(1.04); }
      100% { transform:scale(1); }
    }
    @media (max-width: 370px) {
      .daily-missions-summary strong { font-size:13px; }
      .daily-missions-reset { min-width:94px; }
      .daily-missions-reset b { font-size:20px; }
      .daily-mission-row {
        grid-template-columns:40px minmax(0,1fr) 28px auto;
        gap:8px;
        padding:8px 2px;
      }
      .daily-mission-icon { width:34px; height:34px; font-size:22px; }
      .daily-mission-title-text { font-size:14px; }
      .daily-mission-claim { min-width:78px; font-size:12px; padding:0 8px; }
      .daily-mission-reward { min-width:46px; padding:0 8px; }
    }
    @media (prefers-reduced-motion: reduce) {
      #daily-missions-overlay.open,
      .daily-mission-row,
      .daily-mission-claim.claiming {
        animation:none !important;
      }
      .daily-mission-claim {
        transition:none !important;
      }
    }
    .ref-hub {
      min-height:100%; padding:12px 12px 24px; background:#0F1115; box-sizing:border-box;
    }
    .ref-panel {
      background:#171A20; border:1px solid rgba(255,255,255,0.08); border-radius:8px; padding:12px; margin-bottom:10px;
    }
    .ref-top-row { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
    .ref-title { font-size:20px; line-height:1.12; font-weight:900; color:#F2F4F7; }
    .ref-sub { font-size:12px; color:#8F98A6; margin-top:4px; line-height:1.35; }
    .ref-count { min-width:64px; text-align:right; color:#34C759; font-weight:950; font-size:22px; white-space:nowrap; }
    .ref-count span { display:block; color:#8F98A6; font-size:10px; font-weight:800; text-transform:uppercase; margin-top:2px; }
    .ref-rule { margin-top:10px; padding:9px 10px; border-radius:8px; background:#20252E; color:#C7D0DD; font-size:12px; line-height:1.35; }
    .ref-actions { display:flex; gap:8px; margin-top:10px; }
    .ref-action-btn { flex:1; min-height:42px; border-radius:8px; border:1px solid rgba(255,255,255,0.10); background:#252A33; color:#F2F4F7; font-size:13px; font-weight:850; cursor:pointer; }
    .ref-action-btn.primary { background:#2AABEE; color:#061018; border-color:#2AABEE; }
    .ref-section-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
    .ref-section-title { color:#F2F4F7; font-size:14px; font-weight:900; }
    .ref-section-meta { color:#8F98A6; font-size:11px; font-weight:800; white-space:nowrap; }
    .ref-progress-track { height:8px; border-radius:999px; background:#252A33; overflow:hidden; }
    .ref-progress-fill { height:100%; border-radius:999px; background:#2AABEE; transition:width .28s ease; }
    .ref-reward-track { display:flex; gap:8px; overflow-x:auto; padding:10px 0 2px; scrollbar-width:none; }
    .ref-reward-track::-webkit-scrollbar { display:none; }
    .ref-step { flex:0 0 78px; min-height:84px; padding:7px; border-radius:8px; background:#1F232B; border:1px solid rgba(255,255,255,0.08); display:flex; flex-direction:column; gap:5px; }
    .ref-step.claimed { background:rgba(52,199,89,0.10); border-color:rgba(52,199,89,0.30); }
    .ref-step.current { background:rgba(42,171,238,0.12); border-color:rgba(42,171,238,0.42); }
    .ref-step-top { display:flex; justify-content:space-between; align-items:center; gap:6px; }
    .ref-step-count { width:24px; height:21px; border-radius:7px; background:#252A33; color:#F2F4F7; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:950; }
    .ref-step.current .ref-step-count { background:#2AABEE; color:#061018; }
    .ref-step.claimed .ref-step-count { background:#34C759; color:#07120B; }
    .ref-step-icon { color:#D7DEE8; font-size:15px; line-height:1; }
    .ref-step-name { color:#F2F4F7; font-size:10.5px; font-weight:900; line-height:1.15; min-height:24px; overflow:hidden; }
    .ref-step-need { color:#8F98A6; font-size:10px; line-height:1.2; min-height:12px; }
    .ref-ms-claim { margin-top:auto; min-height:24px; border-radius:7px; border:0; background:#2AABEE; color:#061018; font-size:10px; font-weight:900; cursor:pointer; }
    .ref-ms-claim:disabled { cursor:default; background:#252A33; color:#8F98A6; }
    .ref-ms-claim.claimed { background:rgba(52,199,89,0.18); color:#76E39A; }
    .ref-ms-claim.locked { background:#252A33; color:#687281; }
    .ref-ms-claim.placeholder { background:rgba(255,214,90,0.16); color:#FFD65A; }
    .ref-list { background:#171A20; border:1px solid rgba(255,255,255,0.08); border-radius:8px; overflow:hidden; }
    .ref-list-head { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px; border-bottom:1px solid rgba(255,255,255,0.07); }
    .ref-list-title { color:#F2F4F7; font-size:14px; font-weight:900; }
    .ref-list-meta { color:#8F98A6; font-size:11px; font-weight:800; white-space:nowrap; }
    .ref-row { display:grid; grid-template-columns:36px minmax(0,1fr) auto; gap:9px; align-items:center; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,0.055); }
    .ref-row:last-child { border-bottom:0; }
    .ref-row-avatar { width:34px; height:34px; display:flex; align-items:center; justify-content:center; font-size:22px; }
    .ref-row-main { min-width:0; }
    .ref-row-name { color:#F2F4F7; font-size:13px; font-weight:850; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .ref-row-goal { color:#8F98A6; font-size:11px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .ref-mini-track { height:5px; background:#252A33; border-radius:999px; overflow:hidden; margin-top:6px; }
    .ref-mini-fill { height:100%; border-radius:999px; background:#2AABEE; }
    .ref-status-pill { padding:5px 7px; border-radius:999px; background:#252A33; color:#AAB4C2; font-size:10px; font-weight:850; white-space:nowrap; }
    .ref-status-pill.active { background:rgba(52,199,89,0.14); color:#76E39A; }
    .ref-status-pill.reward_available, .ref-status-pill.reward_claimed { background:rgba(255,214,90,0.15); color:#FFD65A; }
    .ref-status-pill.in_progress { background:rgba(42,171,238,0.13); color:#8DDDFF; }
    .ref-empty { padding:20px 12px; color:#8F98A6; text-align:center; font-size:12px; line-height:1.35; }
    .ref-empty-title { color:#F2F4F7; font-size:16px; font-weight:900; margin-bottom:4px; }
    .underground-status-strip {
      display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin-top:10px;
      border-radius:8px; overflow:hidden; background:rgba(255,255,255,0.07);
    }
    .underground-status-strip > div {
      min-width:0; padding:8px 9px; background:#1F232B;
    }
    .underground-status-strip span,
    .underground-lift-rows span,
    .underground-lb-current span {
      display:block; color:#8F98A6; font-size:10px; line-height:1.15; font-weight:800;
    }
    .underground-status-strip strong,
    .underground-lift-rows strong {
      display:block; margin-top:3px; color:#F2F4F7; font-size:12px; line-height:1.15; font-weight:900;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .underground-season-note {
      display:flex; justify-content:space-between; gap:10px; margin-top:9px; color:#AAB4C2; font-size:11px; line-height:1.25;
    }
    .underground-season-note span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .underground-lift-section .underground-map-entry-btn { margin-top:10px; }
    .underground-lift-rows {
      display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin-top:9px;
      border-radius:8px; overflow:hidden; background:rgba(255,255,255,0.07);
    }
    .underground-lift-rows > div { min-width:0; padding:8px 9px; background:#1F232B; }
    .underground-empty { color:#8F98A6; font-size:12px; line-height:1.35; padding:8px 0 2px; }
    .underground-lb-list { display:flex; flex-direction:column; gap:7px; }
    .underground-lb-row {
      display:grid; grid-template-columns:38px 34px minmax(0,1fr) auto; gap:8px; align-items:center;
      min-height:48px; padding:8px 9px; border-radius:8px; background:#1F232B;
      border:1px solid rgba(255,255,255,0.07);
    }
    .underground-lb-rank {
      color:#F4D06F; font-size:12px; font-weight:950; text-align:center;
    }
    .underground-lb-avatar {
      width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:8px;
      background:#252A33; font-size:18px;
    }
    .underground-lb-main { min-width:0; }
    .underground-lb-name {
      color:#F2F4F7; font-size:12px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .underground-lb-sub {
      color:#8F98A6; font-size:10.5px; line-height:1.2; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .underground-lb-score {
      min-width:48px; color:#76E39A; font-size:13px; font-weight:950; text-align:right;
    }
    .underground-lb-current {
      display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px;
      padding:8px 10px; border-radius:8px; background:rgba(52,199,89,0.10); color:#76E39A;
    }
    .underground-lb-current strong { font-size:12px; line-height:1.15; font-weight:950; white-space:nowrap; }
    .underground-shop-grid { display:grid; grid-template-columns:1fr; gap:8px; }
    .underground-shop-card { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px; border-radius:8px; background:#1F232B; border:1px solid rgba(255,255,255,0.08); }
    .underground-shop-icon { width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:#252A33; font-size:21px; }
    .underground-shop-main { min-width:0; }
    .underground-shop-title { color:#F2F4F7; font-size:13px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .underground-shop-sub { color:#8F98A6; font-size:11px; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .underground-shop-btn { min-width:86px; min-height:34px; border-radius:8px; border:0; background:#2AABEE; color:#061018; font-size:11px; font-weight:900; cursor:pointer; }
    .underground-shop-btn:disabled { cursor:default; background:#252A33; color:#687281; }
    .underground-shop-btn.claimed { background:rgba(52,199,89,0.18); color:#76E39A; }
    @media (max-width: 420px) {
      .ref-hub { padding:10px 10px 22px; }
      .ref-title { font-size:18px; }
      .ref-actions { flex-direction:column; }
      .ref-step { flex-basis:76px; }
      .ref-row { grid-template-columns:32px minmax(0,1fr); }
      .ref-status-pill { grid-column:2; justify-self:start; margin-top:2px; }
      .ref-row-avatar { width:30px; height:30px; font-size:20px; }
      .underground-status-strip,
      .underground-lift-rows { grid-template-columns:1fr; }
      .underground-season-note { flex-direction:column; gap:4px; }
      .underground-lb-row { grid-template-columns:34px minmax(0,1fr) auto; }
      .underground-lb-avatar { display:none; }
      .underground-shop-card { grid-template-columns:36px minmax(0,1fr); }
      .underground-shop-btn { grid-column:2; justify-self:start; min-width:112px; }
    }
    .hq-btn:disabled { opacity:0.5; cursor:not-allowed; }
    /* Profile rewards/action base CSS is lazy-loaded with profile-panels. */

    .inventory-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }
    .cores-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
    .core-card { background:#1a1a2e; border-radius:12px; padding:12px 8px; text-align:center; cursor:pointer; border:1px solid #333; position:relative; }
    .core-card:active { transform:scale(0.95); }
    .core-card.selected { border-color:#FFD700; background:#2a2a10; }
    .core-card.selected::after { content:'✓'; position:absolute; top:2px; right:4px; font-size:10px; color:#FFD700; font-weight:900; }
    .core-group-header { grid-column:1/-1; font-size:12px; color:#888; padding:8px 4px 4px; border-top:1px solid #222; margin-top:4px; }
    .core-group-header:first-child { border-top:none; margin-top:0; }
    .core-mult { font-size:9px; color:#FFD700; }
    .core-emoji { font-size:28px; }
    .core-level { font-size:11px; color:#888; margin-top:4px; }
    .core-multiplier { font-size:10px; color:#FFD700; }
    .cores-empty { grid-column:1/-1; text-align:center; color:var(--tg-muted); padding:32px 18px; font-size:14px; border:var(--tg-hairline); border-radius:var(--tg-radius-lg); background:rgba(255,255,255,0.035); }
    .mine-cores-section { background:var(--card-bg); border-radius:var(--card-radius); padding:14px; margin-top:10px; }
    .mine-cores-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; font-size:14px; font-weight:600; color:var(--text-primary); }
    .cores-count { color:var(--text-secondary); font-weight:400; }
    .mine-cores-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
    .core-slot { aspect-ratio:1; border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; min-height:56px; }
    .core-slot.installed { background:#1e1e35; border:1px solid #444; }
    .core-slot.installed:active { transform:scale(0.93); }
    .core-slot.empty { background:#111; border:2px dashed #333; }
    .core-slot.empty:active { border-color:#555; background:#1a1a2e; }
    .slot-emoji { font-size:22px; line-height:1; }
    .slot-level { font-size:10px; color:var(--text-secondary); margin-top:2px; }
    .slot-mult { font-size:9px; color:var(--text-gold); }
    .slot-plus { font-size:24px; color:#333; line-height:1; }

    /* One-row summary button shown inline in the building popup — opens the
       cores sheet on tap. Replaces the inline 3-slot grid that used to
       occupy half the popup. */
    .building-cores-btn {
      display:flex; align-items:center; justify-content:space-between;
      width:100%; background:#252538; border:none; color:#fff;
      border-radius:10px; padding:10px 12px; margin-top:10px;
      font-size:13px; font-weight:500; cursor:pointer;
      -webkit-tap-highlight-color:transparent;
    }
    .building-cores-btn:active { background:#2c2c44; }
    .building-cores-btn .chev { color:#666; font-size:18px; line-height:1; }
    .cores-total-boost { margin-top:8px; font-size:12px; color:var(--text-secondary); text-align:center; }
    .inv-cell {
      width: 100%;
      aspect-ratio: 1;
      background: rgba(255,255,255,0.05);
      border-radius: 10px;
      border: 2px solid rgba(255,255,255,0.12);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      position: relative;
      transition: opacity 0.2s;
    }
    .inv-cell:active { opacity: 0.7; }
    .inv-cell .inv-lvl {
      position:absolute; top:2px; right:3px;
      font-size:9px; font-weight:700; color:#ce93d8;
      text-shadow:0 0 3px rgba(0,0,0,0.9);
      line-height:1;
    }
    .inv-cell .inv-plus {
      position:absolute; bottom:1px; right:2px;
      font-size:12px; font-weight:800; color:#FFD700;
      text-shadow:0 0 4px rgba(255,215,0,0.6), 0 0 2px rgba(0,0,0,0.9);
      line-height:1; background:rgba(0,0,0,0.5); padding:1px 3px; border-radius:3px;
    }
    .inv-cell.equipped::after {
      content: '✓';
      position: absolute;
      top: 2px;
      left: 4px;
      font-size: 10px;
      color: #00ff88;
      font-weight: 900;
    }

    /* Rarity border colors + backgrounds */
    .rarity-common    { border-color: #555 !important; }
    .rarity-uncommon  { border-color: #2e7d32 !important; background: #0a1a0a !important; }
    .rarity-rare      { border-color: #1565c0 !important; background: #0a0a2a !important; }
    .rarity-epic      { border-color: #6a1b9a !important; background: #1a0a2a !important; }
    .rarity-mythic    { border-color: #ff3b8a !important; background: #260018 !important; }
    .rarity-legendary { border-color: #f9a825 !important; background: #2a1a00 !important; animation: legendaryBorder 2s linear infinite; }

    @keyframes legendaryBorder {
      0%   { border-color: #FFD700; box-shadow: 0 0 6px #FFD70066; }
      50%  { border-color: #FF8C00; box-shadow: 0 0 12px #FF8C0099; }
      100% { border-color: #FFD700; box-shadow: 0 0 6px #FFD70066; }
    }

    @keyframes legendaryShimmer {
      0%   { background-position: 0% center; }
      100% { background-position: 200% center; }
    }
    .legendary-text {
      background: linear-gradient(90deg, #FFD700, #FF8C00, #FFD700);
      background-size: 200%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: legendaryShimmer 2s linear infinite;
    }

    /* Profile modal, item detail and craft CSS are lazy-loaded with profile-panels. */

    /* Joystick */
    #joystick-base {
      width: 120px; height: 120px; border-radius: 50%;
      background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.2);
      position: relative; display: flex; align-items: center; justify-content: center;
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); touch-action: none;
    }
    #joystick-stick {
      width: 44px; height: 44px; border-radius: 50%;
      background: rgba(255,255,255,0.9); position: absolute;
      cursor: grab; box-shadow: 0 2px 8px rgba(0,0,0,0.4); touch-action: none;
    }
    #joystick-speed { display: flex; gap: 6px; justify-content: center; margin-top: 8px; }
    .speed-dot {
      width: 18px; height: 18px; border-radius: 50%;
      background: rgba(255,255,255,0.3); cursor: pointer; transition: background 0.2s;
    }
    .speed-dot.active { background: #00e676; }

    /* Vase drop popup */
    #vase-drop-popup {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 5000;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }
    #vase-drop-popup.show { display: flex; }
    #vase-drop-card {
      background: #1a1a2e;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 20px;
      padding: 24px 28px;
      text-align: center;
      min-width: 220px;
      animation: popIn 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
    }
    #vase-drop-card.legendary-bg {
      border-color: #FFD700;
      box-shadow: 0 0 30px #FFD70066;
    }
    @keyframes popIn {
      0%   { transform: scale(0.6); opacity: 0; }
      100% { transform: scale(1);   opacity: 1; }
    }
    .vase-drop-title    { font-size: 14px; color: #aaa; margin-bottom: 8px; }
    .vase-drop-emoji    { font-size: 52px; line-height: 1; margin: 8px 0; }
    .vase-drop-name     { font-size: 16px; font-weight: 700; margin-top: 6px; }
    .vase-drop-rarity   { font-size: 12px; margin: 4px 0; }
    .vase-drop-stat     { font-size: 13px; color: #f5c518; margin-top: 4px; }
    .vase-drop-diamonds { font-size: 14px; color: #00cfff; margin-top: 10px; }

    /* ── Shop modal (fullscreen) ── */
    #shop-modal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 3500;
      background: #0b0c10;
      flex-direction: column;
      overflow: hidden;
    }
    #shop-modal.open { display: flex; }
    #shop-header {
      padding: 12px 16px;
      padding-top: calc(12px + env(safe-area-inset-top, 0px));
      background: #101117;
      border-bottom: 1px solid #1a1d26;
      flex-shrink: 0;
    }
    #shop-header-top { display: flex; align-items: center; gap: 10px; }
    #shop-header h2 { font-size: 16px; font-weight: 800; margin: 0; flex: 1; }
    #shop-header-balances { display: flex; gap: 14px; margin-top: 4px; font-size: 14px; }
    #shop-close {
      background: none; border: none; color: #888; font-size: 20px; cursor: pointer; padding: 4px;
      -webkit-tap-highlight-color: transparent;
    }
    #shop-tabs {
      display: flex;
      background: #101117;
      border-bottom: 1px solid #1a1d26;
      padding: 0 16px;
      flex-shrink: 0;
    }
    .shop-tab {
      flex: 1; background: none; border: none; border-bottom: 2px solid transparent;
      color: #666; font-size: 13px; font-weight: 600; padding: 10px 0; cursor: pointer;
      -webkit-tap-highlight-color: transparent; transition: color 0.15s, border-color 0.15s;
    }
    .shop-tab.active { color: #FFD700; border-bottom-color: #FFD700; }
    .shop-tab-content { display: none; }
    .shop-tab-content.active { display: block; }
    #shop-body { padding: 12px; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .shop-section-title {
      font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: rgba(255,255,255,0.35);
      text-transform: uppercase; margin-bottom: 12px;
    }
    .shop-boxes-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .shop-box-card {
      --accent:#7DF9FF;
      --accent-rgb:125,249,255;
      background: linear-gradient(180deg, #171922, #11131a) !important;
      border: 1px solid rgba(255,255,255,0.08) !important;
      border-radius: 8px !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 8px 20px rgba(0,0,0,0.14) !important;
      padding: 10px 9px 9px !important;
      text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px;
      min-height: 136px; box-sizing: border-box; position: relative; overflow: hidden;
    }
    .shop-box-card::before, .shop-star-card::before, .shop-daily-card::before,
    .shop-item::before, .shop-item-wide::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(circle at 50% -26px, rgba(var(--accent-rgb),0.16), transparent 58%);
    }
    .shop-box-card.rare-box { --accent:#42a5f5; --accent-rgb:66,165,245; }
    .shop-box-card.epic-box { --accent:#ce93d8; --accent-rgb:206,147,216; }
    .shop-box-card.mythic-box { --accent:#FF3B8A; --accent-rgb:255,59,138; }
    .shop-box-card.core-orb { --accent:#b388ff; --accent-rgb:179,136,255; }
    .shop-box-icon {
      width: 42px; height: 42px; border-radius: 8px; display:flex; align-items:center; justify-content:center;
      font-size: 25px; line-height: 1; background: rgba(var(--accent-rgb),0.11);
      border: 1px solid rgba(var(--accent-rgb),0.20); animation: none; position: relative;
    }
    @keyframes boxFloat {
      0%,100% { transform: translateY(0px) rotate(-3deg); }
      50%     { transform: translateY(-8px) rotate(3deg); }
    }
    .shop-box-name { font-size: 12px; font-weight: 800; color: #fff; line-height:1.2; }
    .shop-box-info-btn {
      position: absolute; top: 8px; right: 8px; width: 23px; height: 23px; z-index: 2;
      border-radius: 50%; background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.14);
      color: rgba(255,255,255,0.70); font-size: 12px; font-weight: 800; font-style: italic;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      -webkit-tap-highlight-color: transparent; transition: background 0.2s, color 0.2s, border-color 0.2s;
    }
    .shop-box-info-btn:active { background: rgba(var(--accent-rgb),0.18); border-color: rgba(var(--accent-rgb),0.30); color:#fff; }
    .shop-box-price { font-size: 13px; color: #fff; margin: auto 0 0; font-weight: 800; }
    .shop-box-open-btn {
      width: 100%; background: rgba(var(--accent-rgb),0.13) !important;
      border: 1px solid rgba(var(--accent-rgb),0.26) !important;
      color: #fff !important; border-radius: 8px; padding: 8px; font-weight: 800; font-size: 13px;
      cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.2s;
    }
    .shop-box-open-btn:active { background: rgba(255,215,0,0.25); }
    .shop-box-open-btn:disabled { opacity: 0.4; cursor: not-allowed; }
    /* Unified shop product shelf */
    .shop-store-section { margin-bottom: 16px; }
    .shop-store-section:last-child { margin-bottom: 0; }
    .shop-store-head {
      display: flex; align-items: flex-end; justify-content: space-between;
      gap: 10px; margin-bottom: 10px;
    }
    .shop-store-title { font-size: 14px; font-weight: 800; color: #fff; }
    .shop-store-subtitle { font-size: 11px; color: rgba(255,255,255,0.45); margin-top: 2px; line-height: 1.3; }
    .shop-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .shop-product-grid.single { grid-template-columns: 1fr; }
    .equipment-shop-btn:disabled { cursor:not-allowed; }
    .shop-item, .shop-item-wide {
      --accent: #FFD700;
      --accent-rgb: 255,215,0;
      background: linear-gradient(180deg, #171922, #11131a);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      cursor: pointer; -webkit-tap-highlight-color: transparent;
      transition: transform 0.12s, border-color 0.12s, background 0.12s;
      position: relative; overflow: hidden;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 8px 20px rgba(0,0,0,0.14);
    }
    .shop-item {
      min-height: 128px; padding: 10px 9px 9px; text-align: center;
      display: flex; flex-direction: column; align-items: center; gap: 6px;
    }
    .shop-item:active, .shop-item-wide:active { transform: scale(0.97); }
    .shop-item-glow {
      width: 42px; height: 42px; border-radius: 8px; display: flex;
      align-items: center; justify-content: center; font-size: 24px; line-height: 1;
      background: rgba(var(--accent-rgb),0.11);
      border: 1px solid rgba(var(--accent-rgb),0.20);
      flex-shrink: 0;
      position: relative;
    }
    .shop-item-glow::after { display: none; }
    .shop-item-name { font-size: 12px; font-weight: 800; color: #fff; line-height: 1.2; }
    .shop-item-sub { min-height: 24px; font-size: 10px; line-height: 1.2; color: rgba(255,255,255,0.46); font-weight: 600; }
    .shop-item-btn, .shop-item-wide-btn {
      background: rgba(var(--accent-rgb),0.13); color: #fff;
      border: 1px solid rgba(var(--accent-rgb),0.26);
      border-radius: 8px; font-size: 13px; font-weight: 800; cursor: pointer;
      -webkit-tap-highlight-color: transparent; transition: opacity 0.15s, background 0.15s;
    }
    .shop-item-btn { width: 100%; margin-top: auto; padding: 8px 0; }
    .shop-item-btn:active, .shop-item-wide-btn:active { opacity: 0.75; }
    .shop-item-wide {
      padding: 12px; display: flex; align-items: center; gap: 12px;
    }
    .shop-item-wide .shop-item-glow { width: 44px; height: 44px; font-size: 22px; }
    .shop-item-wide-info { flex: 1; text-align: left; min-width: 0; }
    .shop-title-line { display:flex; align-items:center; gap:7px; min-width:0; }
    .shop-item-wide-name { font-size: 14px; font-weight: 800; color: #fff; line-height: 1.2; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .shop-inline-info {
      width: 20px; height: 20px; border-radius: 50%; flex: 0 0 20px;
      display:flex; align-items:center; justify-content:center; cursor:pointer;
      background: rgba(255,255,255,0.055); border:1px solid rgba(255,255,255,0.12);
      color:rgba(255,255,255,0.62); font-size:11px; font-weight:800; font-style:italic;
      -webkit-tap-highlight-color: transparent;
    }
    .shop-inline-info:active { background:rgba(var(--accent-rgb),0.18); border-color:rgba(var(--accent-rgb),0.30); color:#fff; }
    .shop-item-wide-sub { font-size: 11px; color: rgba(255,255,255,0.46); font-weight: 600; margin-top: 3px; line-height: 1.25; }
    .shop-item-wide-btn { padding: 8px 16px; white-space: nowrap; flex-shrink: 0; }
    .shop-item.mythic, .shop-item-wide.mythic { --accent:#FF3B8A; --accent-rgb:255,59,138; }
    .shop-item.rune, .shop-item-wide.rune { --accent:#FFD45A; --accent-rgb:255,212,90; }
    .shop-item.core-pack, .shop-item-wide.core-pack { --accent:#7DF9FF; --accent-rgb:125,249,255; }
    .shop-item.rift, .shop-item-wide.rift { --accent:#58D6FF; --accent-rgb:88,214,255; }
    .shop-item.reforge, .shop-item-wide.reforge { --accent:#B388FF; --accent-rgb:179,136,255; }
    .shop-stars-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .shop-star-card {
      --accent:#64B5F6; --accent-rgb:100,181,246;
      background: linear-gradient(180deg, #171922, #11131a);
      border: 1px solid rgba(255,255,255,0.08) !important;
      border-radius: 8px; padding: 14px; text-align: center; position: relative; cursor: pointer; overflow:visible;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 8px 20px rgba(0,0,0,0.14);
      -webkit-tap-highlight-color: transparent; transition: all 0.2s;
    }
    .shop-star-card:active { transform: scale(0.97); }
    .shop-star-card .star-badge {
      position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
      font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; white-space: nowrap;
    }
    .shop-star-diamonds { font-size: 22px; font-weight: 800; color: #64B5F6; }
    .shop-star-price { font-size: 14px; color: #FFD700; margin-top: 4px; }
    .shop-star-buy-btn {
      margin-top: 8px; width: 100%; background: rgba(var(--accent-rgb),0.13);
      color: #fff; border: 1px solid rgba(var(--accent-rgb),0.26); border-radius: 8px; padding: 8px; font-size: 13px; font-weight: 800;
      cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
    /* core bundle cards use .shop-item-wide */
    .shop-daily-card {
      --accent:#00E676; --accent-rgb:0,230,118;
      background: linear-gradient(180deg, #171922, #11131a) !important;
      border: 1px solid rgba(255,255,255,0.08) !important;
      border-radius: 8px !important; padding: 16px; position:relative; overflow:hidden;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 8px 20px rgba(0,0,0,0.14);
    }
    .shop-daily-claim-btn {
      width: 100%; background: rgba(var(--accent-rgb),0.13); border: 1px solid rgba(var(--accent-rgb),0.26);
      color: #fff; border-radius: 8px; padding: 12px; font-size: 15px; font-weight: 800;
      cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.2s;
    }
    .shop-daily-claim-btn:active { background: rgba(0,230,118,0.25); }
    .shop-daily-claim-btn:disabled { opacity: 0.5; cursor: not-allowed; }

    /* Box open overlay */
    #box-open-overlay {
      display: none;
      position: fixed; inset: 0; z-index: 9999;
      background: rgba(0,0,0,0.95);
      align-items: center; justify-content: center;
      flex-direction: column;
    }
    #box-open-overlay.open { display: flex; }
    .box-anim-icon { font-size: 120px; line-height: 1; }
    @keyframes fadeIn {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    @keyframes bounceIn {
      0% { transform: scale(0); opacity: 0; }
      50% { transform: scale(1.15); }
      70% { transform: scale(0.95); }
      100% { transform: scale(1); opacity: 1; }
    }
    @keyframes boxShake {
      0%,100% { transform: scale(1.2) rotate(0deg); }
      20%     { transform: scale(1.3) rotate(-8deg); }
      40%     { transform: scale(1.2) rotate(8deg); }
      60%     { transform: scale(1.3) rotate(-5deg); }
      80%     { transform: scale(1.2) rotate(5deg); }
    }
    @keyframes flashBg {
      0%   { opacity: 0; }
      30%  { opacity: 1; }
      100% { opacity: 0; }
    }
    .box-flash {
      position: fixed; inset: 0; z-index: 10000; pointer-events: none;
      animation: flashBg 0.3s ease-out forwards;
    }
    .box-flash.route-egg-transition-flash {
      --route-egg-accent: #FFD65A;
      --route-egg-accent-rgb: 255,214,90;
      background:
        radial-gradient(circle at 50% 46%, rgba(255,255,255,0.96), rgba(255,255,255,0.82) 18%, rgba(var(--route-egg-accent-rgb),0.76) 42%, rgba(var(--route-egg-accent-rgb),0.20) 68%, transparent 100%);
      animation: routeEggTransitionFlash 0.62s cubic-bezier(.12,.76,.18,1) forwards;
      mix-blend-mode: screen;
    }
    .box-result {
      display: flex; flex-direction: column; align-items: center; gap: 8px;
      animation: popIn 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
    }
    .box-result-emoji { font-size: 96px; line-height: 1; }
    .box-result-name { font-size: 18px; font-weight: 700; }
    .box-result-rarity { font-size: 14px; }
    .box-result-stat { font-size: 15px; color: #f5c518; }
    .box-result-hint { font-size: 12px; color: rgba(255,255,255,0.35); margin-top: 24px; }
    #box-open-overlay.route-egg-open-overlay {
      --route-egg-accent: #FFD65A;
      --route-egg-accent-rgb: 255,214,90;
      overflow: hidden;
      padding: max(22px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
      background:
        radial-gradient(circle at 50% 28%, rgba(var(--route-egg-accent-rgb),0.24), transparent 33%),
        radial-gradient(circle at 50% 72%, rgba(255,255,255,0.08), transparent 38%),
        rgba(4,8,16,0.96) !important;
      color: #fff;
      text-align: center;
    }
    .route-egg-open-stage,
    .route-egg-reward-stage {
      width: min(560px, 100%);
      min-height: min(560px, calc(var(--ot-viewport-height, 100vh) - 72px));
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 18px;
      position: relative;
      z-index: 1;
      overflow: visible;
    }
    .route-egg-open-title {
      font-size: 15px;
      font-weight: 900;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: rgba(255,255,255,0.78);
    }
    .route-egg-fx-wrap {
      width: min(560px, calc(100vw + 160px));
      height: min(440px, calc(var(--ot-viewport-height, 100vh) * 0.48));
      display: grid;
      place-items: center;
      position: relative;
      isolation: isolate;
      overflow: visible;
    }
    .route-egg-fx-wrap::before {
      content: "";
      position: absolute;
      width: min(310px, 76vw);
      height: min(310px, 76vw);
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 999px;
      background: radial-gradient(circle, rgba(var(--route-egg-accent-rgb),0.32), transparent 68%);
      filter: blur(16px);
      animation: routeEggGlow 1.1s ease-in-out infinite;
    }
    .route-egg-fx-canvas {
      width: 100%;
      height: 100%;
      position: relative;
      z-index: 2;
      pointer-events: none;
    }
    .route-egg-fx-fallback {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      font-size: 118px;
      line-height: 1;
      opacity: 0;
      pointer-events: none;
      filter: drop-shadow(0 24px 34px rgba(0,0,0,0.52));
    }
    .route-egg-fx-no-canvas .route-egg-fx-canvas {
      opacity: 0;
    }
    .route-egg-fx-no-canvas .route-egg-fx-fallback {
      opacity: 1;
    }
    .route-egg-open-hint {
      max-width: 260px;
      color: rgba(255,255,255,0.62);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.35;
    }
    .route-egg-reward-stage {
      width: min(430px, 100%);
      min-height: calc(var(--ot-viewport-height, 100vh) - 72px);
      isolation: isolate;
    }
    .route-egg-reward-stage::before {
      content: "";
      position: fixed;
      inset: -18%;
      z-index: -1;
      background:
        radial-gradient(circle at 50% 42%, rgba(var(--route-egg-accent-rgb),0.54), transparent 28%),
        radial-gradient(circle at 50% 78%, rgba(255,255,255,0.12), transparent 30%),
        linear-gradient(180deg, rgba(var(--route-egg-accent-rgb),0.20), rgba(3,7,15,0.96) 58%, rgba(3,7,15,1));
      filter: saturate(1.14);
      animation: routeEggRewardGlow 2.2s ease-in-out infinite;
    }
    .route-egg-reward-center {
      min-height: min(530px, calc(var(--ot-viewport-height, 100vh) - 150px));
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      animation: routeEggRewardIn 0.28s cubic-bezier(.2,.9,.24,1.2);
    }
    .route-egg-reward-emoji {
      font-size: clamp(92px, 28vw, 138px);
      line-height: 1;
      filter: drop-shadow(0 18px 28px rgba(0,0,0,0.50)) drop-shadow(0 0 24px rgba(var(--route-egg-accent-rgb),0.46));
    }
    .route-egg-reward-stage.is-xp .route-egg-reward-emoji {
      color: #fff2a8;
      text-shadow: 0 0 22px rgba(255,214,90,0.72), 0 0 64px rgba(255,214,90,0.34);
    }
    .route-egg-reward-title {
      color: rgba(255,255,255,0.72);
      font-size: 15px;
      font-weight: 900;
      letter-spacing: 1px;
      text-transform: uppercase;
    }
    .route-egg-reward-amount {
      color: #fff;
      font-size: clamp(34px, 11vw, 54px);
      font-weight: 1000;
      line-height: 1.08;
      text-shadow: 0 0 20px rgba(var(--route-egg-accent-rgb),0.50), 0 4px 18px rgba(0,0,0,0.32);
      overflow-wrap: anywhere;
    }
    .route-egg-reward-sub {
      min-height: 20px;
      max-width: 280px;
      color: rgba(255,255,255,0.70);
      font-size: 13px;
      font-weight: 750;
      line-height: 1.35;
    }
    .route-egg-reward-progress {
      position: absolute;
      right: max(8px, env(safe-area-inset-right));
      bottom: max(8px, env(safe-area-inset-bottom));
      display: inline-flex;
      align-items: center;
      gap: 6px;
      max-width: min(360px, calc(100vw - 32px));
      padding: 7px 9px;
      border-radius: 999px;
      background: rgba(10,14,24,0.44);
      border: 1px solid rgba(255,255,255,0.10);
      box-shadow: 0 8px 24px rgba(0,0,0,0.24);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      color: rgba(255,255,255,0.72);
      font-size: 11px;
      font-weight: 850;
      -webkit-tap-highlight-color: transparent;
    }
    .route-egg-reward-count {
      min-width: 28px;
      height: 24px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 8px;
      background: rgba(255,255,255,0.14);
      color: #fff;
      font-size: 12px;
      font-weight: 1000;
    }
    .route-egg-reward-left {
      color: rgba(255,255,255,0.54);
      text-transform: lowercase;
    }
    .route-egg-reward-tap {
      color: rgba(255,255,255,0.42);
      font-weight: 750;
      white-space: nowrap;
    }
    @keyframes routeEggGlow {
      0%,100% { transform: scale(0.9); opacity: 0.65; }
      50% { transform: scale(1.1); opacity: 1; }
    }
    @keyframes routeEggRewardGlow {
      0%,100% { transform: scale(1); opacity: 0.92; }
      50% { transform: scale(1.04); opacity: 1; }
    }
    @keyframes routeEggTransitionFlash {
      0% { opacity: 0; transform: scale(0.86); filter: blur(12px); }
      18% { opacity: 1; transform: scale(1); filter: blur(3px); }
      58% { opacity: 0.92; transform: scale(1.08); filter: blur(8px); }
      100% { opacity: 0; transform: scale(1.2); filter: blur(18px); }
    }
    @keyframes routeEggRewardIn {
      0% { opacity: 0; transform: translateY(18px) scale(0.94); }
      78% { opacity: 1; transform: translateY(0) scale(1.025); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* Market modal/card base CSS is lazy-loaded with market-panels. */
    .item-perk-list { display:flex; flex-direction:column; gap:7px; margin-top:10px; }
    .item-perk-chip { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 9px; border-radius:10px; background:rgba(255,255,255,0.055); border:1px solid rgba(255,255,255,0.1); font-size:12px; line-height:1.2; }
    .item-perk-chip.locked {
      opacity:1;
      background:
        linear-gradient(90deg, rgba(255,214,90,0.18), rgba(255,255,255,0.05) 54%),
        rgba(255,255,255,0.05);
      box-shadow:0 0 0 1px rgba(255,214,90,0.20) inset;
    }
    .item-perk-chip.locked::before {
      content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
      background:#FFD65A; box-shadow:0 0 10px rgba(255,214,90,0.60);
    }
    .item-perk-chip.seasonal {
      border-color: rgba(74,144,255,0.72);
      background:
        linear-gradient(90deg, rgba(46,117,255,0.22), rgba(95,210,255,0.08) 58%),
        rgba(255,255,255,0.055);
      box-shadow:0 0 0 1px rgba(93,166,255,0.16) inset, 0 0 18px rgba(42,126,255,0.12);
    }
    .item-perk-chip.seasonal::before {
      content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
      background:#4DA3FF; box-shadow:0 0 12px rgba(77,163,255,0.74);
    }
    .item-perk-tier.seasonal-tier {
      color:#071322;
      background:linear-gradient(135deg,#c8f0ff,#4DA3FF,#4d65ff) !important;
      box-shadow:0 0 0 1px rgba(255,255,255,0.34) inset, 0 0 12px rgba(77,163,255,0.34);
    }
    .item-perk-left { display:flex; align-items:center; gap:7px; min-width:0; }
    .item-perk-tier { flex:0 0 auto; min-width:28px; height:28px; padding:0 7px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:950; font-size:13px; color:#070707; line-height:1; letter-spacing:0; }
    .item-perk-tier.perk-tier-v {
      color:#211300;
      width:28px;
      min-width:28px;
      padding:0;
      font-size:12px;
      font-variant-numeric:tabular-nums;
      text-shadow:0 1px 0 rgba(255,255,255,0.45);
      background:linear-gradient(135deg,#fff8c9 0%,#FFD65A 54%,#f4a40a 100%) !important;
      box-shadow:0 0 0 1px rgba(255,255,255,0.36) inset, 0 0 10px rgba(255,214,90,0.34);
    }
    .item-perk-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#f4f4f4; }
    .item-perk-value { flex:0 0 auto; font-weight:800; color:#fff; }
    .item-perk-lock { flex:0 0 auto; border:1px solid rgba(255,255,255,0.12); background:rgba(0,0,0,0.22); color:#ddd; border-radius:8px; height:28px; min-width:32px; padding:0 8px; cursor:pointer; font-weight:900; }
    .item-perk-lock[data-locked="1"] { color:#2a1600; background:#FFD65A; border-color:#FFD65A; box-shadow:0 0 14px rgba(255,214,90,0.30); }
    .item-perk-chip[data-perk-info] { cursor:pointer; -webkit-tap-highlight-color:transparent; }
    .item-perk-chip[data-perk-info]:active { transform:scale(0.99); background:rgba(255,255,255,0.085); }
    .item-perk-info-dot { flex:0 0 auto; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.2); background:rgba(255,255,255,0.08); color:#d9e5f5; font-size:11px; font-weight:900; }
    .perk-info-overlay { position:fixed; inset:0; z-index:100200; display:flex; align-items:flex-end; justify-content:center; padding:18px; background:rgba(0,0,0,0.5); animation:fadeIn 0.16s ease-out; }
    .perk-info-sheet { width:min(420px,100%); border-radius:16px; border:1px solid rgba(255,255,255,0.12); background:linear-gradient(180deg,#1e2835,#101722); box-shadow:0 -12px 35px rgba(0,0,0,0.45); padding:14px; animation:slideUp 0.18s ease-out; }
    .perk-info-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
    .perk-info-title { display:flex; align-items:center; gap:8px; min-width:0; color:#fff; font-size:16px; font-weight:900; }
    .perk-info-tier { min-width:28px; height:28px; padding:0 6px; border-radius:7px; display:flex; align-items:center; justify-content:center; color:#070707; font-size:12px; font-weight:900; }
    .perk-info-close { width:34px; height:34px; border:1px solid rgba(255,255,255,0.1); border-radius:10px; background:rgba(255,255,255,0.06); color:#d8e0ec; font-size:18px; font-weight:900; cursor:pointer; }
    .perk-info-value { display:inline-flex; align-items:center; gap:6px; margin-bottom:10px; padding:7px 10px; border-radius:10px; border:1px solid rgba(255,255,255,0.09); background:rgba(255,255,255,0.055); color:#fff; font-size:13px; font-weight:800; }
    .perk-info-desc { color:#c9d4e4; font-size:13px; line-height:1.45; }
    .perk-info-note { margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,0.08); color:#8291a6; font-size:12px; line-height:1.35; }
    .item-perk-empty { color:#777; font-size:12px; padding:8px 0; text-align:center; }
    .item-perk-summary { display:flex; justify-content:center; gap:3px; min-height:10px; margin-top:4px; }
    .item-perk-dot { width:7px; height:7px; border-radius:50%; box-shadow:0 0 6px var(--perk-color,currentColor); display:inline-flex; align-items:center; justify-content:center; font-size:0; font-weight:900; line-height:1; }
    .item-perk-dot.tier-4,
    .item-perk-dot.tier-5 { width:13px; height:9px; border-radius:999px; font-size:6px; color:#111; text-shadow:none; }
    .item-perk-dot.tier-5 { background:linear-gradient(135deg,#fff3a4,#FFD65A,#ff9500) !important; box-shadow:0 0 10px rgba(255,214,90,0.72); }
    .inv-cell .item-perk-summary,
    .craft-cell .item-perk-summary { position:absolute; left:0; right:0; bottom:5px; margin:0; pointer-events:none; }
    .craft-cell .item-perk-dot { width:6px; height:6px; }
    .inv-cell .item-perk-summary { display:none !important; }
    .item-perk-chip.is-revealing { opacity:0; transform:translateY(8px) scale(0.96); animation:itemPerkReveal .42s var(--tg-ease) forwards; animation-delay:var(--perk-delay,0ms); }
    .item-perk-chip.perk-tier-iv.is-revealing { animation-name:itemPerkRevealIv; }
    .item-perk-chip.perk-tier-v.is-revealing { animation-name:itemPerkRevealV; }
    .rift-seal-craft-overlay { position:fixed; inset:0; z-index:100250; pointer-events:none; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.18); }
    .rift-seal-craft-stage { position:relative; width:180px; height:180px; }
    .rift-seal-craft-shard { position:absolute; left:50%; top:50%; font-size:24px; line-height:1; transform:translate(-50%,-50%) rotate(var(--a)) translateX(76px); animation:riftShardIn 760ms cubic-bezier(.18,.82,.18,1) forwards; animation-delay:var(--d); filter:drop-shadow(0 0 8px rgba(72,169,255,0.42)); }
    .rift-seal-craft-seal { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.55); opacity:0; font-size:58px; line-height:1; animation:riftSealBorn 520ms cubic-bezier(.24,1.28,.34,1) 760ms forwards; filter:drop-shadow(0 0 18px rgba(73,151,255,0.58)); }
    @keyframes riftShardIn {
      0% { opacity:0; transform:translate(-50%,-50%) rotate(var(--a)) translateX(76px) scale(.85); }
      32% { opacity:1; }
      100% { opacity:0; transform:translate(-50%,-50%) rotate(var(--a)) translateX(0) scale(.35); }
    }
    @keyframes riftSealBorn {
      0% { opacity:0; transform:translate(-50%,-50%) scale(.55) rotate(-10deg); }
      58% { opacity:1; transform:translate(-50%,-50%) scale(1.12) rotate(3deg); }
      100% { opacity:1; transform:translate(-50%,-50%) scale(1) rotate(0deg); }
    }
    @keyframes itemPerkReveal { to { opacity:1; transform:translateY(0) scale(1); } }
    @keyframes itemPerkRevealIv {
      0% { opacity:0; transform:translateY(10px) scale(0.94); box-shadow:0 0 0 rgba(230,81,0,0); }
      70% { opacity:1; transform:translateY(0) scale(1.025); box-shadow:0 0 22px rgba(230,81,0,0.35); }
      100% { opacity:1; transform:translateY(0) scale(1); }
    }
    @keyframes itemPerkRevealV {
      0% { opacity:0; transform:translateY(10px) scale(0.96); filter:brightness(1); }
      65% { opacity:1; transform:translateY(0) scale(1.015); filter:brightness(1.12); box-shadow:0 0 18px rgba(255,214,90,0.30); }
      100% { opacity:1; transform:translateY(0) scale(1); filter:brightness(1); }
    }
    /* Market buy/private/list-item CSS is lazy-loaded with market-panels. */
    /* Courier markers */
    .courier-marker {
      position: relative; display: flex; align-items: center; justify-content: center;
    }
    .courier-hp-bar {
      position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
      width: 28px; height: 3px; background: #333; border-radius: 2px; overflow: hidden;
    }
    .courier-hp-fill {
      height: 100%; background: #00cc44; transition: width 0.3s;
    }

    /* Drop pulse (loot) */
    @keyframes dropPulse {
      0%,100% { opacity: 1; transform: scale(1); }
      50%     { opacity: 0.6; transform: scale(1.2); }
    }
    .drop-marker { }
    .monument-drop-marker { font-size: 18px; }

    /* Delivery box — subtle static glow, no animation */
    .delivery-marker { filter: drop-shadow(0 0 4px rgba(255,215,0,0.4)); }

    /* Report modal */
    #report-overlay {
      display: none;
      position: fixed; inset: 0; z-index: 9998;
      background: rgba(0,0,0,0.75);
      align-items: center; justify-content: center;
    }
    #report-overlay.open { display: flex; }
    #report-card {
      background: #1a1a2e;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 16px;
      padding: 20px;
      width: calc(100% - 48px);
      max-width: 340px;
      animation: popIn 0.2s ease-out;
    }
    #report-card h3 { font-size: 15px; font-weight: 700; margin: 0 0 14px; color: #fff; }
    .report-reasons { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
    .report-reason-btn {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 12px;
      background: #252538;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 10px;
      color: #ccc;
      font-size: 13px;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
    }
    .report-reason-btn:hover { background: #2a2a42; }
    .report-reason-btn.selected {
      background: rgba(244,67,54,0.15);
      border-color: #f44336;
      color: #fff;
    }
    .report-reason-btn .reason-icon { font-size: 16px; flex-shrink: 0; }
    #report-desc {
      width: 100%; box-sizing: border-box;
      background: #252538;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 10px;
      color: #fff;
      padding: 10px 12px;
      font-size: 13px;
      font-family: inherit;
      resize: vertical;
      min-height: 60px;
      max-height: 120px;
      margin-bottom: 14px;
    }
    #report-desc::placeholder { color: #666; }
    .report-btns { display: flex; gap: 8px; }
    .report-btns button {
      flex: 1; padding: 10px; border-radius: 10px;
      font-size: 13px; font-weight: 600; cursor: pointer; border: none;
    }
    .report-btn-cancel { background: #252538; color: #aaa; }
    .report-btn-send { background: linear-gradient(135deg, #f44336, #c62828); color: #fff; }
    .report-btn-send:disabled { opacity: 0.4; cursor: default; }
    .report-warn-btn {
      width: 28px; height: 28px;
      display: flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      color: #888;
      font-size: 14px;
      cursor: pointer;
      transition: background 0.15s;
    }
    .report-warn-btn:hover { background: rgba(244,67,54,0.2); color: #f44336; }

    /* Box odds popup */
    #box-odds-popup {
      display: none;
      position: fixed; inset: 0; z-index: 9998;
      background: rgba(0,0,0,0.7);
      align-items: center; justify-content: center;
    }
    #box-odds-popup.open { display: flex; }
    #box-odds-card {
      background: #1a1a2e;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 16px;
      padding: 20px;
      width: calc(100% - 48px);
      max-width: 320px;
      animation: popIn 0.2s ease-out;
    }
    #box-odds-card h3 { font-size: 15px; font-weight: 700; margin: 0 0 12px; }
    .odds-row {
      display: flex; align-items: center; gap: 8px;
      font-size: 13px; margin: 6px 0;
    }
    .odds-bar {
      width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0;
    }
    .odds-name { flex: 1; }
    .odds-pct { color: #aaa; }
    .odds-footer { font-size: 11px; color: #888; margin-top: 12px; line-height: 1.4; }
    #box-odds-close {
      margin-top: 12px; width: 100%; padding: 10px;
      background: rgba(255,255,255,0.08); border: none; color: #fff;
      border-radius: 10px; font-size: 13px; cursor: pointer;
    }
    /* Username setup screen */
    #username-setup-screen {
      display: none; position: fixed; inset: 0; z-index: 99999;
      height: var(--ot-viewport-height, 100dvh);
      min-height: var(--ot-viewport-height, 100dvh);
      box-sizing: border-box;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.022) 0 1px, transparent 1px 32px),
        linear-gradient(45deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 28px),
        linear-gradient(180deg, #162331 0%, #111a24 48%, #081018 100%);
      flex-direction: column; align-items: center; justify-content: flex-start;
      padding:
        calc(max(env(safe-area-inset-top, 0px), var(--ot-tg-content-safe-top), var(--ot-tg-safe-top)) + 20px)
        20px
        calc(max(env(safe-area-inset-bottom, 0px), var(--ot-tg-content-safe-bottom), var(--ot-tg-safe-bottom)) + 22px);
      overflow-y: auto; overscroll-behavior: contain;
      touch-action: pan-y;
      -webkit-overflow-scrolling: touch;
    }
    #username-setup-screen.open { display: flex; }
    html.tg-fullscreen #username-setup-screen {
      padding-top: calc(max(env(safe-area-inset-top, 0px), var(--ot-tg-content-safe-top), var(--ot-tg-safe-top), 82px) + 18px);
    }
    .setup-card {
      position: relative; overflow: hidden;
      background:
        linear-gradient(180deg, rgba(31,48,62,0.98), rgba(16,27,38,0.98));
      border: 1px solid rgba(118,173,202,0.22);
      border-radius: 24px; padding: 24px 20px 20px;
      max-width: 390px; width: 100%; box-sizing: border-box;
      box-shadow:
        0 22px 70px rgba(0,0,0,0.42),
        inset 0 1px 0 rgba(255,255,255,0.07);
    }
    .setup-card::before {
      content: ""; position: absolute; left: 18px; right: 18px; top: 0;
      height: 2px; border-radius: 999px;
      background: linear-gradient(90deg, transparent, rgba(100,210,255,0.55), transparent);
    }
    .setup-card .setup-title {
      font-size: 30px; line-height: 1.05; font-weight: 900; color: #FFD700;
      text-align: center; margin: 0 0 4px; white-space: nowrap;
      text-shadow: 0 2px 18px rgba(255,215,0,0.16);
    }
    .setup-card .setup-subtitle {
      color: rgba(255,255,255,0.52); font-size: 13px; line-height: 1.35;
      text-align: center; margin-bottom: 20px;
    }
    .setup-section-label {
      font-size: 12px; font-weight: 800; color: rgba(255,255,255,0.42);
      text-transform: uppercase; letter-spacing: 0; margin-bottom: 9px;
    }
    #setup-avatar-grid {
      display: flex; align-items: center; gap: 8px;
      margin: 0 -2px 16px; padding: 6px 2px 10px;
      overflow-x: auto; overflow-y: hidden;
      scroll-snap-type: x proximity;
      scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    #setup-avatar-grid::-webkit-scrollbar { display: none; }
    #setup-avatar-grid .avatar-cell {
      position: relative; flex: 0 0 50px;
      font-size: 26px; width: 50px; height: 50px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 15px; cursor: pointer;
      border: 1px solid rgba(255,255,255,0.06);
      background: rgba(33,39,57,0.86);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
      scroll-snap-align: center;
      transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    }
    #setup-avatar-grid .avatar-cell:active { transform: scale(0.95); }
    #setup-avatar-grid .avatar-cell.selected {
      border-color: rgba(118,214,255,0.48);
      background: linear-gradient(180deg, rgba(58,78,96,0.94), rgba(31,43,57,0.95));
      box-shadow:
        0 10px 24px rgba(0,0,0,0.24),
        0 0 0 1px rgba(118,214,255,0.12),
        inset 0 1px 0 rgba(255,255,255,0.08);
      transform: translateY(-1px);
    }
    #setup-avatar-grid .avatar-cell.selected::after {
      content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px;
      height: 3px; border-radius: 999px;
      background: rgba(118,214,255,0.82);
      box-shadow: 0 0 10px rgba(118,214,255,0.34);
    }
    #setup-avatar-preview {
      position: relative; width: 88px; height: 88px; margin: 0 auto 12px;
      display: flex; align-items: center; justify-content: center;
      font-size: 52px; border-radius: 24px;
      background:
        radial-gradient(circle at 50% 34%, rgba(255,255,255,0.12), transparent 42%),
        linear-gradient(180deg, rgba(42,56,74,0.92), rgba(25,33,47,0.98));
      border: 1px solid rgba(118,173,202,0.34);
      box-shadow:
        0 14px 32px rgba(0,0,0,0.32),
        inset 0 1px 0 rgba(255,255,255,0.08);
    }
    #setup-avatar-preview::after {
      content: ""; position: absolute; left: 24px; right: 24px; bottom: 8px;
      height: 3px; border-radius: 999px;
      background: rgba(118,214,255,0.62);
    }
    .setup-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 18px 0; }
    #setup-username-input {
      width: 100%; padding: 12px 14px;
      background: #111; border: 1px solid #333;
      border-radius: 10px; color: #fff; font-size: 16px; line-height: 1.25;
      box-sizing: border-box; outline: none; text-align: center;
    }
    #setup-username-input:focus { border-color: #FFD700; }
    #setup-username-hint { color: #555; font-size: 11px; margin-top: 6px; text-align: center; }
    #setup-username-error { color: #e06060; font-size: 12px; min-height: 18px; margin-top: 6px; text-align: center; }
    #btn-setup-start {
      width: 100%; margin-top: 14px; padding: 14px; font-size: 16px; font-weight: 700;
      border: none; border-radius: 12px; cursor: pointer;
      background: linear-gradient(135deg, #4caf50, #2e7d32); color: #fff;
      transition: opacity 0.2s;
    }
    #btn-setup-start:disabled { opacity: 0.3; cursor: default; }

    @media (max-height: 720px) {
      #username-setup-screen {
        padding:
          calc(max(env(safe-area-inset-top, 0px), var(--ot-tg-content-safe-top), var(--ot-tg-safe-top)) + 12px)
          16px
          calc(max(env(safe-area-inset-bottom, 0px), var(--ot-tg-content-safe-bottom), var(--ot-tg-safe-bottom)) + 14px);
      }
      html.tg-fullscreen #username-setup-screen {
        padding-top: calc(max(env(safe-area-inset-top, 0px), var(--ot-tg-content-safe-top), var(--ot-tg-safe-top), 82px) + 10px);
      }
      .setup-card {
        max-width: 370px;
        padding: 18px 16px 16px;
        border-radius: 20px;
      }
      .setup-card .setup-title { font-size: 26px; }
      .setup-card .setup-subtitle {
        font-size: 12px;
        margin-bottom: 12px;
      }
      .setup-section-label { margin-bottom: 7px; }
      #setup-avatar-preview {
        width: 64px;
        height: 64px;
        margin-bottom: 8px;
        font-size: 40px;
        border-radius: 18px;
      }
      #setup-avatar-grid {
        gap: 6px;
        margin-bottom: 8px;
        padding: 4px 2px 8px;
      }
      #setup-avatar-grid .avatar-cell {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
        border-radius: 13px;
        font-size: 23px;
      }
      .setup-divider { margin: 12px 0; }
      #setup-username-input { padding: 10px 12px; }
      #setup-username-error { min-height: 16px; }
      #btn-setup-start {
        margin-top: 10px;
        padding: 12px;
      }
    }

    /* Change username modal */
    #change-username-overlay {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,0.6); z-index: 8200;
      align-items: center; justify-content: center;
    }
    #change-username-overlay.open { display: flex; }
    #change-username-card {
      background: #1a1a2e; border-radius: 16px; padding: 24px;
      width: min(340px, 90vw); text-align: center;
    }
    #change-username-card h3 { margin: 0 0 12px; font-size: 16px; }
    #change-username-current { color: #888; font-size: 13px; margin-bottom: 12px; }
    #change-username-input {
      width: 100%; padding: 10px 12px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 8px; color: #fff; font-size: 14px;
      box-sizing: border-box; outline: none;
    }
    #change-username-input:focus { border-color: #FFD700; }
    #change-username-cost { color: #aaa; font-size: 12px; margin-top: 8px; }
    #change-username-error { color: #e06060; font-size: 12px; min-height: 16px; margin-top: 4px; }
    #change-username-buttons { display: flex; gap: 8px; margin-top: 14px; }
    #change-username-buttons button { flex: 1; padding: 10px; border-radius: 10px; border: none; font-size: 14px; font-weight: 600; cursor: pointer; }
    #btn-change-username-cancel { background: rgba(255,255,255,0.08); color: #aaa; }
    #btn-change-username-confirm { background: linear-gradient(135deg, #FFD700, #FFA000); color: #000; }
    #btn-change-username-confirm:disabled { opacity: 0.35; cursor: default; }

    /* ── Onboarding tutorial ── tactical-briefing aesthetic ── */
    #tutorial-overlay {
      display: none; position: fixed; inset: 0; z-index: 9500;
      pointer-events: none;
      font-family: inherit;
    }
    #tutorial-overlay.open { display: block; }

    .tutorial-card {
      position: absolute; left: 10px; right: 10px;
      top: calc(env(safe-area-inset-top, 0px) + 10px);
      background:
        linear-gradient(135deg, rgba(255,182,39,0.06) 0%, transparent 40%),
        linear-gradient(180deg, rgba(18,22,36,0.97) 0%, rgba(10,12,22,0.97) 100%);
      border: 1px solid rgba(255,182,39,0.38);
      border-radius: 14px;
      padding: 12px 14px 14px;
      box-shadow:
        0 20px 50px rgba(0,0,0,0.75),
        0 0 0 1px rgba(0,0,0,0.5) inset,
        0 1px 0 rgba(255,182,39,0.18) inset;
      color: #fff; pointer-events: auto;
      animation: tutorialCardIn 0.45s cubic-bezier(0.16,1,0.3,1);
      overflow: hidden;
    }
    /* Scanline + corner marker treatment */
    .tutorial-card::before {
      content: ''; position: absolute; inset: 0;
      background: repeating-linear-gradient(
        180deg,
        transparent 0, transparent 2px,
        rgba(255,255,255,0.012) 2px, rgba(255,255,255,0.012) 3px
      );
      pointer-events: none;
    }
    .tutorial-card::after {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,182,39,0.9), transparent);
      animation: tutorialScan 3.2s ease-in-out infinite;
    }
    @keyframes tutorialCardIn {
      from { opacity: 0; transform: translateY(-12px) scale(0.985); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes tutorialScan {
      0%,100% { opacity: 0.2; transform: translateX(-20%); }
      50%     { opacity: 1;   transform: translateX(20%); }
    }

    /* Header row: step glyph + "BRIEFING N/7" pill */
    .tutorial-card-head {
      display: flex; align-items: center; gap: 10px;
      margin-bottom: 10px;
    }
    .tutorial-card-glyph {
      flex: 0 0 36px; width: 36px; height: 36px;
      display: grid; place-items: center;
      font-size: 20px; line-height: 1;
      background: linear-gradient(135deg, rgba(255,182,39,0.22), rgba(255,182,39,0.06));
      border: 1px solid rgba(255,182,39,0.45);
      border-radius: 9px;
      box-shadow: 0 0 14px rgba(255,182,39,0.22) inset;
    }
    .tutorial-card-step {
      font-size: 10px; font-weight: 800;
      color: #FFB627;
      text-transform: uppercase; letter-spacing: 2px;
      padding: 4px 9px;
      border: 1px solid rgba(255,182,39,0.45);
      border-radius: 999px;
      background: rgba(255,182,39,0.08);
    }
    .tutorial-card-skip {
      margin-left: auto;
      font-size: 10px; color: rgba(255,255,255,0.35);
      letter-spacing: 1.2px; text-transform: uppercase;
    }

    /* Progress: 7 segments, filled → active → pending */
    .tutorial-progress {
      display: grid; grid-template-columns: repeat(7, 1fr);
      gap: 3px; margin-bottom: 11px;
    }
    .tutorial-progress-seg {
      height: 3px; border-radius: 2px;
      background: rgba(255,255,255,0.08);
      overflow: hidden; position: relative;
      transition: background 0.3s;
    }
    .tutorial-progress-seg.done {
      background: linear-gradient(90deg, #FFB627, #FF7A1A);
    }
    .tutorial-progress-seg.active {
      background: rgba(255,182,39,0.16);
    }
    .tutorial-progress-seg.active::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(90deg, transparent, #FFB627 70%, transparent);
      animation: tutorialProgressPulse 1.8s ease-in-out infinite;
    }
    @keyframes tutorialProgressPulse {
      0%   { transform: translateX(-100%); opacity: 0.6; }
      100% { transform: translateX(100%);  opacity: 0.6; }
    }

    .tutorial-card-title {
      font-size: 16px; font-weight: 800;
      color: #fff; line-height: 1.25;
      margin-bottom: 5px;
      letter-spacing: 0.2px;
      text-shadow: 0 1px 0 rgba(0,0,0,0.6);
    }
    .tutorial-card-body {
      font-size: 13px; line-height: 1.45;
      color: rgba(255,255,255,0.82);
    }
    .tutorial-card-body b { color: #FFB627; font-weight: 700; }

    /* Action strip below body: a hint + an optional inline CTA (e.g. "Open inventory") */
    .tutorial-card-action {
      margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
      padding-top: 9px; border-top: 1px dashed rgba(255,182,39,0.22);
    }
    .tutorial-card-action-hint {
      flex: 1; font-size: 11px; color: rgba(255,182,39,0.8);
      letter-spacing: 0.3px;
    }
    .tutorial-card-action-hint::before {
      content: '▸ '; color: #FFB627; font-weight: 900;
    }
    .tutorial-card-action-btn {
      padding: 7px 14px; font-size: 12px; font-weight: 800;
      color: #0a0c16; letter-spacing: 0.6px; text-transform: uppercase;
      background: linear-gradient(135deg, #FFD14A 0%, #FF8A1A 100%);
      border: none; border-radius: 7px; cursor: pointer;
      box-shadow: 0 3px 10px rgba(255,138,26,0.32);
    }
    .tutorial-card-action-btn:active { transform: translateY(1px); }
    .tutorial-card-controls {
      display: flex; align-items: center; justify-content: flex-end;
      gap: 6px; margin-left: auto; flex-wrap: wrap;
    }
    .tutorial-card-mini-btn {
      min-height: 28px; padding: 5px 8px;
      font-size: 10.5px; line-height: 1; font-weight: 850;
      letter-spacing: 0.2px; text-transform: uppercase;
      border-radius: 7px; cursor: pointer;
      white-space: nowrap;
      background: rgba(255,255,255,0.055);
      border: 1px solid rgba(255,255,255,0.16);
      color: rgba(255,255,255,0.76);
    }
    .tutorial-card-skip-btn {
      color: #b9e7ff;
      background: rgba(100,210,255,0.10);
      border-color: rgba(100,210,255,0.34);
    }
    .tutorial-card-reset-btn {
      color: #ffb7b7;
      background: rgba(255,77,77,0.10);
      border-color: rgba(255,77,77,0.34);
    }
    .tutorial-card-mini-btn:disabled {
      opacity: 0.55; cursor: wait;
    }
    .tutorial-card-mini-btn:active { transform: translateY(1px); }

    /* Extended "you've been stuck a while" hint — fades in after the player
       sits on the same step for ~25s without progress. */
    .tutorial-card-stuck-hint {
      margin-top: 9px; padding: 8px 10px;
      background: rgba(255,138,26,0.12);
      border: 1px solid rgba(255,138,26,0.35);
      border-radius: 8px;
      font-size: 11.5px; line-height: 1.45;
      color: #FFD7A0;
      animation: tutorialStuckIn 0.4s ease-out;
    }
    .tutorial-card-stuck-hint::before {
      content: '💡 '; margin-right: 2px;
    }
    @keyframes tutorialStuckIn {
      from { opacity: 0; transform: translateY(-3px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* Bobbing arrow under the card — points players to the map */
    .tutorial-card-arrow {
      position: absolute; left: 50%; bottom: -9px;
      transform: translateX(-50%);
      width: 0; height: 0;
      border-left: 10px solid transparent; border-right: 10px solid transparent;
      border-top: 10px solid #FFB627;
      filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6));
      animation: tutorialArrowBob 1.5s ease-in-out infinite;
    }
    @keyframes tutorialArrowBob {
      0%,100% { transform: translate(-50%, 0); }
      50%     { transform: translate(-50%, 6px); }
    }
    /* When the current step targets the bottom-panel (inventory), flip arrow up-and-over */
    .tutorial-card[data-target="inventory"] .tutorial-card-arrow {
      top: auto; bottom: auto; display: none;
    }

    /* Locked-HUD: dimmed until the tutorial releases specific buttons */
    .tutorial-locked #hud-right-panel,
    .tutorial-locked #hud-top-pill,
    .tutorial-locked #bottom-panel,
    .tutorial-locked .hud-shop,
    .tutorial-locked .hud-settings,
    .tutorial-locked .hud-profile,
    .tutorial-locked .hud-leaderboard,
    .tutorial-locked .hud-pin,
    .tutorial-locked .hud-market {
      pointer-events: none !important;
      opacity: 0.32 !important;
      filter: grayscale(0.5);
    }

    /* While the inventory (profile) modal is open the tutorial card would
       float on top of the equipment slots and the close button. Hide it for
       the duration — the modal itself is the interaction target at step 1. */
    body.profile-modal-open #tutorial-overlay { display: none !important; }

    /* Move toasts to the middle-low area while the tutorial is active so
       they stop stacking on top of the briefing card at the top. Above the
       bottom HUD panel so they don't cover the avatar either. */
    body.tutorial-locked #toast-container {
      top: auto !important;
      bottom: calc(env(safe-area-inset-bottom, 0px) + 140px);
      left: 50%;
      right: auto;
      width: min(340px, calc(100vw - 24px));
      max-width: calc(100vw - 24px);
      align-items: center;
    }
    /* Step 1 (equip): release the bottom-panel so they can tap their avatar
       to open the inventory. A subtle highlight ring draws attention. */
    .tutorial-locked[data-tutorial-step="1"] #bottom-panel {
      pointer-events: auto !important;
      opacity: 1 !important;
      filter: none !important;
    }
    .tutorial-locked[data-tutorial-step="1"] #bottom-panel {
      animation: tutorialSpot 1.7s ease-in-out infinite;
    }
    /* Release the entire bottom panel during tutorial so the avatar tap can
       recenter the camera on the player (newbies who panned the map off
       themselves had no way back). The inventory-open path is JS-gated below
       — see #btn-inventory and #player-level-display click handlers — so
       relaxing pointer-events here doesn't accidentally open the hub. */
    .tutorial-locked #bottom-panel {
      pointer-events: auto !important;
      opacity: 1 !important;
      filter: none !important;
    }
    @keyframes tutorialSpot {
      0%,100% { box-shadow: 0 -8px 30px -8px rgba(255,182,39,0.35); }
      50%     { box-shadow: 0 -8px 40px -4px rgba(255,182,39,0.7); }
    }

    /* ── Welcome splash ── */
    #tutorial-welcome-overlay {
      display: none; position: fixed; inset: 0; z-index: 9600;
      background:
        radial-gradient(ellipse at 50% 30%, rgba(255,182,39,0.14) 0%, transparent 48%),
        radial-gradient(ellipse at 50% 90%, rgba(42,20,90,0.4) 0%, transparent 55%),
        linear-gradient(180deg, #0a0c16 0%, #06070d 100%);
      flex-direction: column; align-items: center; justify-content: center;
      padding: 28px 24px; text-align: center;
      animation: fadeIn 0.55s ease;
      overflow: hidden;
    }
    /* Ambient grid behind everything — very subtle, not overpowering */
    #tutorial-welcome-overlay::before {
      content: ''; position: absolute; inset: -10% -10%;
      background-image:
        linear-gradient(0deg, rgba(255,182,39,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,182,39,0.04) 1px, transparent 1px);
      background-size: 32px 32px;
      mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
      -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
      animation: welcomeGridDrift 22s linear infinite;
      pointer-events: none;
    }
    @keyframes welcomeGridDrift {
      from { transform: translate(0, 0); }
      to   { transform: translate(32px, 32px); }
    }
    #tutorial-welcome-overlay.open { display: flex; }

    .tutorial-welcome-title {
      font-size: 28px; font-weight: 900; color: #fff;
      margin: 6px auto 12px; max-width: 340px; line-height: 1.1;
      letter-spacing: -0.3px;
      animation: welcomeFade 0.7s ease 0.2s both;
    }
    .tutorial-welcome-title b {
      background: linear-gradient(135deg, #FFE082 0%, #FFB627 50%, #FF7A1A 100%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
      font-weight: inherit;
    }
    .tutorial-welcome-body {
      font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.78);
      max-width: 320px; margin-bottom: 18px;
      animation: welcomeFade 0.7s ease 0.35s both;
    }
    .tutorial-welcome-sub {
      font-size: 12px; color: #7c84a0; max-width: 320px; margin-bottom: 22px;
      letter-spacing: 0.3px;
      animation: welcomeFade 0.7s ease 0.45s both;
    }

    .tutorial-welcome-btn {
      padding: 14px 42px; border: none; border-radius: 11px;
      background: linear-gradient(135deg, #FFD14A 0%, #FF7A1A 100%);
      color: #120a02; font-size: 15px; font-weight: 900; cursor: pointer;
      letter-spacing: 1.3px; text-transform: uppercase;
      box-shadow: 0 10px 28px rgba(255,122,26,0.38), 0 0 0 1px rgba(0,0,0,0.2) inset;
      animation: welcomeFade 0.7s ease 0.9s both;
      transition: transform 0.15s, box-shadow 0.2s;
    }
    .tutorial-welcome-btn:active {
      transform: translateY(2px);
      box-shadow: 0 4px 12px rgba(255,122,26,0.28);
    }
    @keyframes welcomeFade {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    /* GPS waiting overlay */
    #tutorial-gps-overlay {
      display: none; position: fixed; inset: 0; z-index: 9600;
      background: rgba(13,13,13,0.96);
      flex-direction: column; align-items: center; justify-content: center;
      padding: 24px; text-align: center;
    }
    #tutorial-gps-overlay.open { display: flex; }
    .tutorial-gps-icon { font-size: 72px; margin-bottom: 14px; animation: tutorialPulse 1.8s ease-in-out infinite; }
    @keyframes tutorialPulse { 0%,100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.1); opacity: 1; } }
    .tutorial-gps-text { font-size: 16px; font-weight: 700; color: #fff; max-width: 320px; margin-bottom: 18px; line-height: 1.4; }
    .tutorial-gps-btn {
      padding: 12px 24px; border: none; border-radius: 12px;
      background: linear-gradient(135deg, #FFD700, #FF8C00);
      color: #000; font-size: 15px; font-weight: 700; cursor: pointer;
    }
    /* ── Graduation splash — operative-debrief layout ── */
    #tutorial-done-overlay {
      display: none; position: fixed; inset: 0; z-index: 9600;
      background:
        radial-gradient(ellipse at 50% 30%, rgba(120,240,140,0.12) 0%, transparent 50%),
        linear-gradient(180deg, #0a0c16 0%, #06070d 100%);
      flex-direction: column; align-items: center; justify-content: center;
      padding: 28px 22px; text-align: center;
      animation: fadeIn 0.5s ease;
      overflow: hidden;
    }
    #tutorial-done-overlay::before {
      content: ''; position: absolute; inset: -10% -10%;
      background-image:
        linear-gradient(0deg, rgba(120,240,140,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120,240,140,0.04) 1px, transparent 1px);
      background-size: 32px 32px;
      mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
      -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
      pointer-events: none;
    }
    #tutorial-done-overlay.open { display: flex; }
    .tutorial-done-icon {
      font-size: 68px; line-height: 1; margin-bottom: 8px;
      text-shadow: 0 0 30px rgba(120,240,140,0.55);
      animation: bounceIn 0.7s ease;
    }
    .tutorial-done-eyebrow {
      font-size: 10px; font-weight: 800; letter-spacing: 4px;
      color: #8dff9a; text-transform: uppercase;
      padding: 5px 12px; border: 1px solid rgba(120,240,140,0.45); border-radius: 999px;
      margin-bottom: 10px;
      animation: welcomeFade 0.7s ease 0.2s both;
    }
    .tutorial-done-title {
      font-size: 24px; font-weight: 900; color: #fff;
      margin: 2px 0 10px; letter-spacing: -0.2px;
      animation: welcomeFade 0.7s ease 0.3s both;
    }
    .tutorial-done-body {
      font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.72);
      max-width: 320px; margin-bottom: 20px;
      animation: welcomeFade 0.7s ease 0.4s both;
    }
    /* Achievement checklist — ticks appear staggered */
    .tutorial-done-list {
      display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px;
      margin-bottom: 24px; max-width: 320px;
    }
    .tutorial-done-item {
      display: flex; align-items: center; gap: 8px;
      font-size: 11px; color: rgba(255,255,255,0.82);
      letter-spacing: 0.2px; text-align: left;
      padding: 6px 8px;
      background: rgba(120,240,140,0.05);
      border: 1px solid rgba(120,240,140,0.22);
      border-radius: 7px;
      opacity: 0;
      animation: doneCheckPop 0.4s ease both;
    }
    .tutorial-done-item:nth-child(1) { animation-delay: 0.55s; }
    .tutorial-done-item:nth-child(2) { animation-delay: 0.70s; }
    .tutorial-done-item:nth-child(3) { animation-delay: 0.85s; }
    .tutorial-done-item:nth-child(4) { animation-delay: 1.00s; }
    .tutorial-done-item:nth-child(5) { animation-delay: 1.15s; }
    .tutorial-done-item:nth-child(6) { animation-delay: 1.30s; }
    .tutorial-done-check {
      flex: 0 0 18px; height: 18px; border-radius: 4px;
      display: grid; place-items: center;
      font-size: 11px; font-weight: 900;
      color: #0a0c16;
      background: linear-gradient(135deg, #a8ffb4, #59e07e);
    }
    @keyframes doneCheckPop {
      from { opacity: 0; transform: translateX(-6px) scale(0.96); }
      to   { opacity: 1; transform: translateX(0) scale(1); }
    }

    .tutorial-done-btn {
      padding: 14px 40px; border: none; border-radius: 11px;
      background: linear-gradient(135deg, #a8ffb4 0%, #59e07e 100%);
      color: #04110a; font-size: 15px; font-weight: 900; cursor: pointer;
      letter-spacing: 1.3px; text-transform: uppercase;
      box-shadow: 0 10px 28px rgba(89,224,126,0.35), 0 0 0 1px rgba(0,0,0,0.2) inset;
      animation: welcomeFade 0.7s ease 1.5s both;
      transition: transform 0.15s, box-shadow 0.2s;
    }
    .tutorial-done-btn:active {
      transform: translateY(2px);
      box-shadow: 0 4px 12px rgba(89,224,126,0.28);
    }

    /* ── PvP Battle overlay ── */
    #pvp-overlay {
      display: none; position: fixed; inset: 0; z-index: 9999;
      background: #0a0a0f; flex-direction: column; align-items: center; justify-content: center;
    }
    #pvp-overlay.open { display: flex; }
    .pvp-vs-screen { text-align: center; width: 100%; padding: 20px; }
    .pvp-vs-row { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 16px 0; }
    .pvp-fighter { text-align: center; flex: 1; }
    .pvp-fighter-avatar { font-size: 56px; line-height: 1; margin-bottom: 6px; }
    .pvp-fighter-name { font-size: 14px; font-weight: 700; color: #fff; }
    .pvp-fighter-level { font-size: 11px; color: #888; }
    .pvp-fighter-weapon { font-size: 12px; color: #aaa; margin-top: 4px; }
    .pvp-vs-icon { font-size: 36px; color: #ff4444; font-weight: 900; text-shadow: 0 0 20px rgba(255,50,50,0.7); }
    .pvp-hp-bar { width: 100%; height: 8px; background: #333; border-radius: 4px; margin-top: 6px; overflow: hidden; }
    .pvp-hp-fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; }
    .pvp-hp-fill.attacker { background: #2979ff; }
    .pvp-hp-fill.defender { background: #ff4444; }
    .pvp-hp-label { font-size: 11px; color: #aaa; margin-top: 2px; }
    .pvp-round-label { font-size: 16px; font-weight: 700; color: #FFD700; margin: 20px 0 8px; letter-spacing: 2px; }
    .pvp-hit-line { font-size: 13px; color: #ccc; margin: 4px 0; }
    .pvp-hit-line .crit { color: #FFD700; font-weight: 700; }
    .pvp-result-banner {
      margin-top: 24px; padding: 16px; border-radius: 14px; text-align: center;
      font-size: 18px; font-weight: 800; letter-spacing: 1px;
    }
    .pvp-result-banner.win { background: rgba(0,230,118,0.15); color: #00E676; border: 1px solid rgba(0,230,118,0.3); }
    .pvp-result-banner.lose { background: rgba(255,23,68,0.15); color: #FF1744; border: 1px solid rgba(255,23,68,0.3); }
    .pvp-result-detail { font-size: 13px; color: #aaa; margin-top: 8px; }
    .pvp-close-hint { font-size: 12px; color: #555; margin-top: 20px; }

    /* ── Shield timer in bottom panel ── */
    #shield-timer-display {
      display: none; font-size: 11px; color: #2979ff; margin-top: 2px;
    }
    #shadow-timer-display {
      display: none; font-size: 11px; color: #b388ff; margin-top: 2px;
    }

    /* ── Mine attack animation overlay ── */
    #mine-attack-overlay {
      display: none; position: fixed; bottom: calc(80px + env(safe-area-inset-bottom));
      left: 50%; transform: translateX(-50%); z-index: 1500;
      background: rgba(0,0,0,0.85); backdrop-filter: blur(10px);
      border: 1px solid rgba(255,215,0,0.2); border-radius: 14px;
      padding: 12px 20px; text-align: center; min-width: 200px;
    }
    #mine-attack-overlay.open { display: block; }
    #mine-attack-timer { font-size: 22px; font-weight: 800; color: #FFD700; }
    #mine-attack-label { font-size: 12px; color: #aaa; margin-top: 4px; }
    .mine-status-burning .marker-wrap { position: relative; }
    .mine-status-burning .marker-wrap::after {
      content: '🔥'; position: absolute;
      top: 50%; left: 50%; transform: translate(-50%, -50%);
      font-size: 18px; pointer-events: none; z-index: 1;
    }
    .mine-status-webbed .marker-wrap {
      position: relative;
      isolation: isolate;
    }
    .mine-status-webbed .marker-wrap::after {
      content: ''; position: absolute;
      top: 50%; left: 50%; transform: translate(-50%, -53%);
      width: 40px; height: 40px; border-radius: 50%;
      pointer-events: none; z-index: 2; opacity: 0.68;
      background: radial-gradient(circle, rgba(10,12,15,0.42) 0%, rgba(20,22,26,0.28) 45%, transparent 72%);
      filter: blur(1.5px);
    }
    .mine-status-webbed .marker-wrap::before {
      content: '🕸️'; position: absolute;
      top: 50%; left: 50%; transform: translate(-50%, -55%) scale(1.18, 1.12);
      font-size: 30px; line-height: 1; pointer-events: none; z-index: 3;
      opacity: 0.94;
      filter: drop-shadow(0 2px 3px rgba(0,0,0,0.82))
              drop-shadow(0 0 5px rgba(245,247,250,0.34));
    }
    .mine-status-webbed .marker-wrap > span {
      filter: drop-shadow(0 0 5px rgba(210,215,220,0.18))
              drop-shadow(0 0 11px rgba(210,215,220,0.10));
    }
    .mine-status-attack::after {
      content: '⚔️'; position: absolute; top: -4px; right: -4px;
      font-size: 12px;
    }
    @keyframes fireFlicker { 0% { opacity: 0.7; transform: translate(-50%,-50%) scale(0.9); } 100% { opacity: 1; transform: translate(-50%,-50%) scale(1.1); } }

    /* Cheap warm glow for burning building markers — radial-gradient skips
       the filter/drop-shadow paint pipeline that was killing FPS in dense
       districts with multiple burning buildings on screen. */
    .bldg-burning-glow {
      background: radial-gradient(circle, rgba(255,90,20,0.55) 0%, rgba(255,140,40,0.25) 45%, transparent 70%);
      border-radius: 50%;
    }

    /* ── Projectile animation ── */
    .attack-projectile {
      position: fixed; z-index: 3000; font-size: 24px; pointer-events: none;
      transition: none; filter: none; border-radius: 50%;
    }
    @keyframes projectileSpinCCW { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } }
    .projectile-glow-common    { filter: drop-shadow(0 0 6px #888888) drop-shadow(0 0 12px #88888866); }
    .projectile-glow-uncommon  { filter: drop-shadow(0 0 6px #2e7d32) drop-shadow(0 0 12px #2e7d3288); }
    .projectile-glow-rare      { filter: drop-shadow(0 0 8px #1565c0) drop-shadow(0 0 16px #1565c088); }
    .projectile-glow-epic      { filter: drop-shadow(0 0 8px #6a1b9a) drop-shadow(0 0 16px #6a1b9a88); }
    .projectile-glow-mythic    { filter: drop-shadow(0 0 10px #ff3b8a) drop-shadow(0 0 20px #ff3b8a88); }
    .projectile-glow-legendary { filter: drop-shadow(0 0 10px #FFD700) drop-shadow(0 0 20px #FF8C00aa) drop-shadow(0 0 30px #FFD70066); }

    /* ── Combat projectile system ── */
    .combat-projectile {
      position: fixed;
      z-index: 3000;
      pointer-events: none;
      font-size: 20px;
      transform: translate(-50%, -50%);
    }
    .combat-hit-flash {
      position: fixed;
      z-index: 3000;
      pointer-events: none;
      font-size: 28px;
      transform: translate(-50%, -50%);
      animation: hitFlash 0.3s ease-out forwards;
    }
    @keyframes hitFlash {
      0% { transform: translate(-50%,-50%) scale(1); opacity:1; }
      50% { transform: translate(-50%,-50%) scale(2); opacity:0.8; }
      100% { transform: translate(-50%,-50%) scale(0); opacity:0; }
    }
    .floating-damage {
      position: fixed;
      z-index: 3000;
      pointer-events: none;
      font-weight: 900;
      font-size: 18px;
      text-shadow: 0 0 6px rgba(0,0,0,0.8);
      animation: combatFloatUp 1s ease-out forwards;
    }
    .floating-damage.crit {
      font-size: 24px;
      color: #FFD700 !important;
    }
    .floating-damage.incoming-laser {
      font-size: 22px;
      color: #ff3344 !important;
      text-shadow: 0 0 7px rgba(0,0,0,0.95), 0 0 12px rgba(255,31,45,0.85);
    }
    @keyframes combatFloatUp {
      0% { opacity:1; transform: translate(-50%,0); }
      100% { opacity:0; transform: translate(-50%,-60px); }
    }
    /* Mine HP bar overlay */
    .mine-hp-bar {
      position: absolute;
      bottom: -6px;
      left: 50%;
      transform: translateX(-50%);
      width: 30px;
      height: 4px;
      background: rgba(0,0,0,0.32);
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.12);
      box-sizing: border-box;
      overflow: hidden;
    }
    .mine-hp-fill,
    .mine-hp-bar-inner {
      height: 100%;
      border-radius: 999px;
      transition: width 90ms linear;
    }
    /* ── Ore node markers ── */
    .ore-marker {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: radial-gradient(circle, rgba(255,215,0,0.12), transparent 70%);
      border-radius: 50%;
      position: relative;
      filter: drop-shadow(0 0 4px rgba(255,215,0,0.3));
    }
    .ore-marker.free {
      background: radial-gradient(circle, rgba(0,255,136,0.12), transparent 70%);
      filter: drop-shadow(0 0 5px rgba(0,255,136,0.3));
    }
    .ore-marker.broken {
      background: radial-gradient(circle, rgba(255,60,60,0.15), transparent 70%);
      filter: drop-shadow(0 0 5px rgba(255,60,60,0.35));
    }
    .ore-marker.mine-owned {
      filter: drop-shadow(0 0 4px rgba(0,150,255,0.3));
    }
    .ore-marker.type-mountain { filter: drop-shadow(0 0 4px rgba(100,180,255,0.35)); }
    .ore-marker.type-peak { filter: drop-shadow(0 0 5px rgba(180,100,255,0.35)); }
    .ore-marker.type-volcano { filter: drop-shadow(0 0 6px rgba(255,80,20,0.4)); }
    .ore-level { font-size: 10px; color: #FFD700; font-weight: bold; text-shadow: 0 0 4px black; margin-top: -2px; }
    .ore-owner { font-size: 9px; color: #aaa; white-space: nowrap; text-shadow: 0 0 4px black; max-width: 60px; overflow: hidden; text-overflow: ellipsis; }
    .ore-hp-bar { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); width: 30px; height: 3px; background: rgba(255,255,255,0.16); border-radius: 999px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,0.22); }
    .ore-hp-fill { height: 100%; border-radius: 999px; transition: width 0.3s; }
    /* Player HP bar on map */
    .player-hp-overlay {
      position: absolute;
      bottom: -8px;
      left: 50%;
      transform: translateX(-50%);
      width: 36px;
      height: 4px;
      background: #333;
      border-radius: 2px;
      overflow: hidden;
    }
    .player-hp-fill {
      height: 100%;
      background: #4caf50;
      border-radius: 2px;
      transition: width 0.3s;
    }
    /* Attack CD button */
    .atk-btn-wrap {
      position: relative;
      display: inline-block;
    }
    .atk-cd-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.6);
      border-radius: 8px;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.15s;
    }
    .atk-cd-overlay.active { opacity: 1; }
    .atk-btn-pulse {
      animation: atkPulse 0.5s ease-in-out infinite;
    }
    @keyframes atkPulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(255,23,68,0.4); }
      50% { box-shadow: 0 0 0 8px rgba(255,23,68,0); }
    }

    /* ── Popup combat button ── */
    .btn-attack-universal {
      width: 100%;
      padding: 14px;
      border: none;
      border-radius: 12px;
      background: linear-gradient(135deg, #c62828, #e53935);
      color: #fff;
      font-size: 18px;
      font-weight: 700;
      cursor: pointer;
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent;
      position: relative;
      overflow: hidden;
      transition:
        transform 120ms var(--tg-ease),
        filter 120ms var(--tg-ease),
        opacity var(--tg-motion-fast) var(--tg-ease);
    }
    .btn-attack-universal * { user-select: none; -webkit-user-select: none; pointer-events: none; }
    /* HUD combat button shares the same no-select behaviour */
    #combat-atk-btn, #combat-atk-btn * {
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent;
    }
    .btn-attack-universal:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      background: #444;
      transform: none;
    }
    .btn-attack-universal:active:not(:disabled) {
      transform: scale(0.98);
      filter: brightness(1.06);
    }
    .btn-attack-universal.attacking {
      animation: attackPulse 0.4s ease-in-out infinite;
    }
    @keyframes attackPulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(229,57,53,0.5); }
      50% { box-shadow: 0 0 0 10px rgba(229,57,53,0); }
    }
    .btn-attack-universal .popup-atk-cd {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.5);
      border-radius: 12px;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.1s;
    }
    .btn-attack-universal .popup-atk-cd.active { opacity: 1; }
    #popup-overlay.combat-mode {
      pointer-events: none;
      background: transparent !important;
      transition: background 0.2s;
      inset: auto 0 0 0;
    }
    #popup-overlay.combat-mode #popup-card {
      pointer-events: auto;
      max-height: min(86dvh, calc(100vh - 20px));
      overflow-y: auto;
      padding: 14px;
      max-width: 480px;
    }
    #core-detail-overlay {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,0.5); z-index: 9500;
      align-items: center; justify-content: center;
    }
    #core-detail-overlay.open { display: flex; }
    #core-detail-card {
      background: #1a1a2e; border: 1px solid rgba(255,255,255,0.1);
      border-radius: 14px; padding: 18px; width: 90%; max-width: 320px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    }

    /* Unified diamond-spend confirmation modal */
    #diamond-confirm-overlay {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,0.6); z-index: 9300;
      align-items: center; justify-content: center;
      padding: 16px;
    }
    #diamond-confirm-overlay.open,
    #diamond-confirm-overlay.is-closing { display: flex; }
    #diamond-confirm-overlay.is-closing {
      pointer-events: none;
      opacity: 0;
      transition: opacity var(--tg-motion-popup-exit) linear;
    }
    #diamond-confirm-card {
      background: #1a1a2e; border: 1px solid rgba(255,255,255,0.1);
      border-radius: 16px; padding: 18px; width: 100%; max-width: 360px;
      box-shadow: 0 12px 40px rgba(0,0,0,0.7);
      transform: translate3d(0, 0, 0) scale(1);
      opacity: 1;
      animation: dcPopIn 0.18s var(--tg-ease);
    }
    #diamond-confirm-overlay.is-closing #diamond-confirm-card {
      animation: none !important;
      transform: translate3d(0, 8px, 0) scale(0.96);
      opacity: 0;
      transition:
        transform var(--tg-motion-popup-exit) var(--tg-ease),
        opacity var(--tg-motion-popup-exit) linear;
    }
    @keyframes dcPopIn {
      from { transform: translate3d(0, 8px, 0) scale(0.96); opacity: 0; }
      to   { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
    }
    #diamond-confirm-card .dc-header {
      display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;
    }
    #diamond-confirm-card .dc-title {
      font-size: 16px; font-weight: 600; color: #fff;
    }
    #diamond-confirm-card .dc-subtitle {
      font-size: 12px; color: #888; margin-bottom: 12px; min-height: 0;
    }
    #diamond-confirm-card .dc-subtitle:empty { display: none; }
    #diamond-confirm-card .dc-cost-card {
      background: #252538; border-radius: 10px; padding: 12px;
      display: flex; flex-direction: column; gap: 6px;
    }
    #diamond-confirm-card .dc-cost-row,
    #diamond-confirm-card .dc-balance-row {
      display: flex; justify-content: space-between; align-items: center;
    }
    #diamond-confirm-card .dc-cost-label,
    #diamond-confirm-card .dc-balance-label {
      color: #ccc; font-size: 13px;
    }
    #diamond-confirm-card .dc-cost-value {
      color: #FFD700; font-size: 15px; font-weight: 700;
    }
    #diamond-confirm-card .dc-balance-value {
      color: #aaa; font-size: 13px;
    }
    #diamond-confirm-card .dc-balance-value.dc-insufficient {
      color: #f44336; font-weight: 600;
    }
    #diamond-confirm-card .dc-error {
      color: #f44336; font-size: 12px; text-align: center;
      margin-top: 10px; min-height: 0;
    }
    #diamond-confirm-card .dc-error:empty { display: none; }
    #diamond-confirm-card .dc-actions {
      display: flex; gap: 8px; margin-top: 14px;
    }
    #diamond-confirm-card .dc-btn {
      flex: 1; border: none; border-radius: 12px; padding: 12px;
      font-size: 14px; font-weight: 600; cursor: pointer;
    }
    #diamond-confirm-card .dc-btn-confirm {
      background: linear-gradient(135deg,#4caf50,#2e7d32); color: #fff;
    }
    #diamond-confirm-card .dc-btn-confirm:disabled {
      background: #333; color: #888; cursor: not-allowed; opacity: 0.6;
    }
    #diamond-confirm-card .dc-btn-cancel {
      background: #333; color: #ccc;
    }
    .popup-hp-live {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .popup-hp-live .hp-bar-bg {
      flex: 1;
      background: #222;
      border-radius: 4px;
      height: 10px;
      overflow: hidden;
    }
    .popup-hp-live .hp-bar-fill {
      height: 100%;
      border-radius: 4px;
      transition: width 0.15s;
    }

    /* ── Death screen ── */
    #death-screen {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 20000;
      background: rgba(0,0,0,0.92);
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      color: #fff;
    }
    #death-screen.open { display: flex; }
    #death-screen .death-skull { font-size: 80px; animation: deathPulse 2s ease-in-out infinite; }
    #death-screen .death-text { font-size: 24px; font-weight: 900; color: #f44336; text-transform: uppercase; letter-spacing: 2px; }
    #death-screen .death-timer { font-size: 48px; font-weight: 900; color: #FFD700; font-variant-numeric: tabular-nums; }
    #death-screen .death-info { font-size: 14px; color: #888; }
    @keyframes waveFlash {
      0% { opacity: 1; }
      100% { opacity: 0; }
    }
    /* Kill animation on map marker */
    @keyframes killShrink {
      0% { transform: scale(1); opacity: 1; }
      30% { transform: scale(1.5); opacity: 1; }
      100% { transform: scale(0); opacity: 0; }
    }
    .marker-killed .marker-wrap {
      animation: killShrink 0.6s ease-in forwards !important;
    }

    @keyframes deathPulse {
      0%,100% { transform: scale(1); opacity: 0.8; }
      50% { transform: scale(1.15); opacity: 1; }
    }

    /* ── Mass selection mode ── */
    .inv-cell.selected { border-color: #FFD700 !important; background: #2a2a10 !important; }
    .inv-cell.selected::after { content:'✓'; position:absolute; top:4px; left:4px; right:auto; font-size:10px; color:#FFD700; font-weight:900; }
    #selection-bar, #core-selection-bar {
      display: none; position: fixed; bottom: calc(80px + env(safe-area-inset-bottom));
      left: 8px; right: 8px; z-index: 8100;
      background: rgba(0,0,0,0.9); backdrop-filter: blur(10px);
      border: 1px solid rgba(255,215,0,0.2); border-radius: 14px;
      padding: 10px 16px; align-items: center; justify-content: space-between;
    }
    #selection-bar.open, #core-selection-bar.open { display: flex; }
    #selection-bar-info, #core-selection-bar-info { font-size: 13px; color: #aaa; }
    #selection-bar-info strong, #core-selection-bar-info strong { color: #FFD700; }

    /* ── Clan system ── */
    .clan-hq-label {
      background: rgba(0,0,0,0.7);
      border-radius: 8px;
      font-size: 11px;
      padding: 2px 6px;
      color: #fff;
      white-space: nowrap;
      pointer-events: none;
      text-align: center;
    }
    /* Clan screen panel CSS is lazy-loaded with social-panels. */
    #contest-clan-overlay > div,
    #contest-stats-overlay > div {
      background:
        radial-gradient(circle at 50% -90px, rgba(var(--tg-blue-rgb),0.20), transparent 260px),
        var(--tg-surface) !important;
      border: var(--tg-hairline) !important;
      border-radius: 24px 24px 0 0 !important;
      box-shadow: 0 -18px 60px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.07);
    }
    #contest-clan-overlay button,
    #contest-stats-overlay button {
      border-radius: 14px !important;
      border: var(--tg-hairline) !important;
      background: var(--tg-surface-2) !important;
      color: var(--tg-text) !important;
      font-weight: 720;
    }
    #contest-clan-overlay .popup-close,
    #contest-stats-overlay .popup-close {
      width: 36px;
      height: 36px;
      border-radius: 50% !important;
      display: grid;
      place-items: center;
      padding: 0 !important;
    }
	    /* Admin monitor panel CSS is lazy-loaded with admin-panels. */

    /* ── Monument markers ── */
    .monument-marker { display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; }
    .monument-marker.open, .monument-marker.wave, .monument-marker.generators { animation: raid-pulse 0.5s infinite; }
    .monument-marker.defeated { filter: grayscale(1) opacity(0.5); }

    /* Dome shield — semi-transparent blue hemisphere */
    .monument-dome {
      position:absolute; inset:0; border-radius:50%;
      background: radial-gradient(ellipse at 35% 30%, rgba(120,180,255,0.35), rgba(60,120,255,0.12) 60%, rgba(40,80,220,0.06));
      border: 1.5px solid rgba(100,170,255,0.45);
      box-shadow: 0 0 14px 4px rgba(80,150,255,0.25), inset 0 0 20px 2px rgba(120,180,255,0.10);
      pointer-events:none;
      transition: opacity 0.4s, transform 0.4s;
    }
    /* Shimmer highlight on dome */
    .monument-dome::after {
      content:''; position:absolute; top:12%; left:18%; width:30%; height:22%;
      background: radial-gradient(ellipse, rgba(255,255,255,0.45), transparent 70%);
      border-radius:50%; pointer-events:none;
    }
    /* Shield break animation */
    .monument-dome.breaking {
      animation: dome-shatter 0.6s ease-out forwards;
    }
    @keyframes dome-shatter {
      0%   { opacity:1; transform:scale(1); border-color:rgba(100,170,255,0.45); }
      30%  { opacity:0.8; transform:scale(1.15); border-color:rgba(255,120,60,0.7); box-shadow:0 0 30px 8px rgba(255,100,40,0.4); }
      100% { opacity:0; transform:scale(1.5); border-color:transparent; box-shadow:none; }
    }

    /* Progress bars under emoji */
    .monument-bars { width:64%; display:flex; flex-direction:column; gap:2px; margin-top:1px; }
    .monument-bar-wrap { width:100%; height:3px; background:rgba(255,255,255,0.16); border-radius:999px; overflow:hidden; box-shadow:0 0 0 1px rgba(0,0,0,0.22); }
    .monument-bar-fill { height:100%; border-radius:999px; transition:width 0.3s; }
    .monument-bar-fill.bar-shield { background:#64D2FF; }
    .monument-bar-fill.bar-wave-shield { background:#FF9F0A; }
    .monument-bar-fill.bar-hp { background:#FF453A; }

    /* Wave dome — orange-gold shield during defender wave */
    .monument-dome-wave {
      position:absolute; inset:0; border-radius:50%;
      background: radial-gradient(ellipse at 35% 30%, rgba(255,180,60,0.35), rgba(255,140,0,0.12) 60%, rgba(220,160,0,0.06));
      border: 1.5px solid rgba(255,180,60,0.5);
      box-shadow: 0 0 14px 4px rgba(255,160,0,0.3), inset 0 0 20px 2px rgba(255,200,60,0.12);
      pointer-events:none; animation: wave-dome-pulse 2s ease-in-out infinite;
    }
    .monument-dome-wave::after {
      content:''; position:absolute; top:12%; left:18%; width:30%; height:22%;
      background: radial-gradient(ellipse, rgba(255,255,200,0.45), transparent 70%);
      border-radius:50%; pointer-events:none;
    }
    @keyframes wave-dome-pulse {
      0%,100% { box-shadow: 0 0 14px 4px rgba(255,160,0,0.3); }
      50% { box-shadow: 0 0 20px 6px rgba(255,180,0,0.45); }
    }

    .shield-dps-warning { background:#2a0a0a; border:1px solid #8b0000; border-radius:10px; padding:12px; text-align:center; color:#ff4444; margin-top:8px; }
    .shield-breaking { background:#0a1a2a; border:1px solid #0066cc; border-radius:10px; padding:12px; text-align:center; color:#4488ff; margin-top:8px; }

    .defender-marker { display:flex; flex-direction:column; align-items:center; }
    .defender-hp-bar { width:38px; height:4px; background:rgba(255,255,255,0.16); border-radius:999px; overflow:hidden; box-shadow:0 0 0 1px rgba(0,0,0,0.22); }
    .defender-hp-bar div { height:100%; background:#FF9F0A; border-radius:999px; transition:width 0.3s; }
    .generator-marker { --generator-color:#FFD166; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; cursor:pointer; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.72)); }
    .generator-marker.generator-marker-dying { pointer-events:none; animation:generator-marker-fade 0.7s cubic-bezier(.2,.8,.2,1) forwards; }
    .generator-marker .gen-core { width:40px; height:38px; display:flex; align-items:center; justify-content:center; font-size:31px; line-height:1; text-shadow:0 2px 4px rgba(0,0,0,0.82); }
    .generator-marker.generator-marker-dying .gen-core { animation:generator-core-collapse 0.7s cubic-bezier(.2,.8,.2,1) forwards; }
    .generator-hp-bar { width:36px; height:3px; margin-top:1px; background:rgba(8,14,20,0.78); border-radius:999px; overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,0.14), 0 0 6px rgba(0,0,0,0.42); }
    .generator-hp-bar div { height:100%; background:var(--generator-color); border-radius:999px; transition:width 0.3s; }
    .generator-marker.generator-marker-dying .generator-hp-bar { opacity:0; transform:scaleX(.35); transition:opacity .28s ease, transform .36s ease; }
    .generator-beam-layer {
      --beam-color:#9F7AEA;
      --beam-soft:rgba(159,122,234,.22);
      --beam-mid:rgba(159,122,234,.72);
      --beam-hot:rgba(231,220,255,.96);
      --beam-length:120px;
      position:absolute;
      height:30px;
      pointer-events:none;
      transform-origin:0 50%;
      mix-blend-mode:screen;
      will-change:transform, opacity;
      z-index:455;
    }
    .generator-beam-glow,
    .generator-beam-body,
    .generator-beam-core,
    .generator-beam-cap,
    .generator-beam-pulse {
      position:absolute;
      pointer-events:none;
    }
    .generator-beam-glow {
      left:-10px;
      right:-10px;
      top:6px;
      height:18px;
      border-radius:999px;
      background:linear-gradient(90deg, transparent 0%, var(--beam-soft) 12%, var(--beam-color) 50%, var(--beam-soft) 88%, transparent 100%);
      filter:blur(9px);
      opacity:.28;
      animation:generator-beam-breathe 3.4s ease-in-out infinite;
    }
    .generator-beam-body {
      left:0;
      right:0;
      top:11px;
      height:8px;
      border-radius:999px;
      background:linear-gradient(90deg, var(--beam-soft), var(--beam-mid) 18%, var(--beam-color) 50%, var(--beam-mid) 82%, var(--beam-soft));
      box-shadow:0 0 9px var(--beam-color), inset 0 0 8px rgba(255,255,255,.18);
      opacity:.74;
      animation:generator-beam-flicker 4.6s ease-in-out infinite;
    }
    .generator-beam-core {
      left:0;
      right:0;
      top:14px;
      height:2px;
      border-radius:999px;
      background:linear-gradient(90deg, rgba(255,255,255,.12), var(--beam-hot) 18%, var(--beam-color) 50%, var(--beam-hot) 82%, rgba(255,255,255,.12));
      box-shadow:0 0 5px rgba(255,255,255,.78), 0 0 12px var(--beam-color);
      opacity:.94;
      animation:generator-beam-core-flicker 4.6s ease-in-out infinite;
    }
    .generator-beam-cap {
      top:9px;
      width:12px;
      height:12px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(255,255,255,.95) 0%, var(--beam-color) 42%, transparent 72%);
      filter:blur(.4px) drop-shadow(0 0 8px var(--beam-color));
      opacity:.9;
    }
    .generator-beam-cap.start { left:-6px; }
    .generator-beam-cap.end { right:-6px; }
    .generator-beam-pulse {
      top:4px;
      left:0;
      width:72px;
      height:26px;
      border-radius:50%;
      background:
        radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.44) 0%, var(--beam-mid) 24%, var(--beam-soft) 46%, transparent 72%);
      filter:blur(9px) drop-shadow(0 0 12px var(--beam-color));
      opacity:0;
      animation:generator-beam-run 4.2s ease-in-out infinite;
    }
    .generator-beam-pulse.p2 { width:50px; height:20px; top:5px; animation-delay:2.6s; opacity:0; }
    .generator-beam-pulse.p3 { display:none; }
    .sniper-laser-bolt {
      z-index:720;
      opacity:0;
      filter:drop-shadow(0 0 12px rgba(255,31,45,.82)) drop-shadow(0 0 22px rgba(255,31,45,.32));
    }
    .sniper-laser-bolt .generator-beam-glow {
      opacity:.48;
      filter:blur(10px);
    }
    .sniper-laser-bolt .generator-beam-body {
      opacity:.92;
      height:9px;
      top:10px;
      box-shadow:0 0 12px var(--beam-color), inset 0 0 9px rgba(255,255,255,.26);
    }
    .sniper-laser-bolt .generator-beam-core {
      height:3px;
      top:13px;
      opacity:1;
      box-shadow:0 0 7px rgba(255,255,255,.9), 0 0 14px var(--beam-color);
    }
    .sniper-laser-bolt .generator-beam-cap { opacity:.96; }
    .sniper-laser-bolt .generator-beam-pulse { display:none; }
    path.leaflet-ant-path { stroke-linecap:round; stroke-linejoin:round; pointer-events:none; mix-blend-mode:screen; filter:drop-shadow(0 0 6px rgba(255,255,255,0.72)); }
    @keyframes generator-marker-fade { 0% { opacity:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.72)); } 38% { opacity:.9; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.72)); } 100% { opacity:0; filter:drop-shadow(0 0 0 rgba(0,0,0,0)); } }
    @keyframes generator-core-collapse { 0% { transform:translateY(0) scale(1) rotate(0deg); } 42% { transform:translateY(-5px) scale(1.24) rotate(-8deg); } 100% { transform:translateY(-22px) scale(.24) rotate(24deg); } }
    @keyframes generator-beam-breathe { 0%,100% { opacity:.2; transform:scaleY(.8); } 50% { opacity:.36; transform:scaleY(1.02); } }
    @keyframes generator-beam-flicker { 0%,100% { opacity:.64; } 12% { opacity:.78; } 19% { opacity:.58; } 46% { opacity:.76; } 53% { opacity:.68; } 79% { opacity:.82; } }
    @keyframes generator-beam-core-flicker { 0%,100% { opacity:.82; } 15% { opacity:.98; } 24% { opacity:.72; } 48% { opacity:.95; } 55% { opacity:.78; } 82% { opacity:1; } }
    @keyframes generator-beam-run {
      0% { transform:translateX(-64px) scaleX(.72); opacity:0; }
      18% { opacity:.42; }
      56% { opacity:.3; }
      100% { transform:translateX(calc(var(--beam-length) + 20px)) scaleX(1.08); opacity:0; }
    }
    .loot-box-marker { display:flex; flex-direction:column; align-items:center; cursor:pointer; }
    .loot-box-marker.mine { filter: drop-shadow(0 0 4px rgba(255,215,0,0.4)); }
    .loot-box-label { font-size:10px; color:white; text-shadow:0 0 4px black; white-space:nowrap; }
    .loot-box-sublabel { font-size:9px; color:#aaa; text-shadow:0 0 4px black; white-space:nowrap; }
    /* HQ & Collector popup cards */
    .hq-stat-card { display:flex; justify-content:space-between; align-items:center; background:#252538; border-radius:10px; padding:10px 12px; font-size:13px; color:#ccc; }
    .hq-collector-card { background:#252538; border-radius:10px; padding:10px 12px; }
    .hq-coll-btn { width:100%; margin-top:6px; padding:8px; border:none; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; }
    .hq-coll-btn.active { background:linear-gradient(135deg,#4caf50,#2e7d32); color:#fff; }
    .hq-coll-btn:disabled { background:#333; color:#666; cursor:not-allowed; }
    .hq-btn { width:100%; padding:14px; border:none; border-radius:12px; font-size:14px; font-weight:600; cursor:pointer; }
    .hq-btn.blue { background:#2196f3; color:#fff; }
    .hq-btn.blue:disabled { background:#333; color:#666; }
    .hq-btn.red { background:#f44336; color:#fff; font-size:13px; padding:10px; }
    .coll-progress { width:100%; height:6px; background:#222; border-radius:3px; overflow:hidden; margin-top:6px; }
    .coll-progress div { height:100%; border-radius:3px; transition:width 0.3s; }

    /* Collector markers */
    .collector-marker { display:flex; flex-direction:column; align-items:center; position:relative; }
    .collector-bar { width:80%; height:3px; background:rgba(255,255,255,0.1); border-radius:2px; overflow:hidden; margin-top:1px; }
    .collector-bar div { height:100%; border-radius:2px; transition:width 0.3s; }
    .collector-full { font-size:8px; color:#FFD700; font-weight:bold; animation: collector-blink 0.8s infinite; }
    @keyframes collector-blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

    @keyframes raid-pulse { 0%,100% { filter: drop-shadow(0 0 10px #ff4444); } 50% { filter: drop-shadow(0 0 20px #ff4444); } }
    @keyframes box-pulse { 0%,100% { filter: drop-shadow(0 0 12px gold); } 50% { filter: drop-shadow(0 0 24px gold); } }

    /* Zombie markers — simple, no animations */
    .zombie-marker { text-align: center; line-height: 1; pointer-events: auto !important; cursor: pointer; }
    .zombie-boss { filter: drop-shadow(0 0 8px rgba(0,255,0,0.8)); }
    .zombie-grave { filter: drop-shadow(0 0 7px rgba(180,190,210,0.75)); }
    .zombie-spit-burst-wrap, .zombie-grave-levelup-wrap { pointer-events: none; }
    .zombie-spit-burst {
      position: relative; width: 56px; height: 56px; opacity: 0;
      animation: zombieSpitBurst 0.9s ease-out forwards;
    }
    .zombie-spit-burst::before {
      content: ''; position: absolute; left: 15px; top: 22px; width: 26px; height: 12px; border-radius: 50%;
      background: radial-gradient(ellipse, rgba(95, 82, 64, 0.82) 0%, rgba(64, 92, 53, 0.5) 56%, rgba(64, 92, 53, 0) 76%);
      box-shadow: 0 0 10px rgba(84, 255, 126, 0.32);
      animation: zombieDirtPulse 0.9s ease-out forwards;
    }
    .zombie-spit-burst::after {
      content: ''; position: absolute; left: 18px; top: 25px; width: 20px; height: 8px; border-radius: 50%;
      border: 2px solid rgba(122, 255, 133, 0.35);
      animation: zombieEjectRing 0.9s ease-out forwards;
    }
    .zombie-spit-burst span {
      position: absolute; left: 25px; top: 25px; width: 7px; height: 7px; border-radius: 45% 55% 50% 50%;
      background: var(--chunk-color, #6b5a47);
      box-shadow: 0 0 4px rgba(94, 255, 111, 0.34);
      transform: rotate(var(--chunk-rot, 0deg));
      animation: zombieChunkFly 0.88s cubic-bezier(.13,.82,.28,1) forwards;
    }
    .zombie-spit-burst span:nth-child(1) { --tx: -25px; --ty: -20px; --chunk-color: #74604a; --chunk-rot: 18deg; }
    .zombie-spit-burst span:nth-child(2) { --tx: 24px; --ty: -18px; --chunk-color: #526b49; --chunk-rot: 73deg; animation-delay: 0.03s; }
    .zombie-spit-burst span:nth-child(3) { --tx: 30px; --ty: 5px; --chunk-color: #8a6d4d; --chunk-rot: 135deg; animation-delay: 0.05s; }
    .zombie-spit-burst span:nth-child(4) { --tx: -20px; --ty: 22px; --chunk-color: #516044; --chunk-rot: 214deg; animation-delay: 0.02s; }
    .zombie-spit-burst span:nth-child(5) { --tx: 4px; --ty: 32px; --chunk-color: #7a6047; --chunk-rot: 286deg; animation-delay: 0.06s; }
    .zombie-grave-levelup {
      position: relative; width: 72px; height: 92px; opacity: 0;
      animation: zombieLevelRoot 1.35s ease-out forwards;
    }
    .zombie-grave-levelup-skull {
      position: absolute; left: 14px; top: 42px; width: 44px; height: 44px; text-align: center; line-height: 44px;
      font-size: 42px; filter: drop-shadow(0 0 11px rgba(180,255,170,0.82));
      animation: zombieSkullRise 1.35s cubic-bezier(.17,.82,.28,1) forwards;
    }
    .zombie-grave-levelup-ring {
      position: absolute; left: 15px; top: 62px; width: 42px; height: 14px; border-radius: 50%;
      border: 2px solid rgba(152, 255, 154, 0.58);
      box-shadow: 0 0 12px rgba(152, 255, 154, 0.45);
      animation: zombieLevelRing 1.35s ease-out forwards;
    }
    @keyframes zombieSpitBurst {
      0% { opacity: 0; transform: scale(0.62); }
      10% { opacity: 1; transform: scale(1); }
      100% { opacity: 0; transform: scale(1.08); }
    }
    @keyframes zombieDirtPulse {
      0% { transform: scale(0.45); opacity: 0; }
      18% { transform: scale(1.12); opacity: 1; }
      100% { transform: scale(1.9); opacity: 0; }
    }
    @keyframes zombieEjectRing {
      0% { transform: scale(0.3); opacity: 0; }
      18% { transform: scale(0.9); opacity: 0.82; }
      100% { transform: scale(2.35); opacity: 0; }
    }
    @keyframes zombieChunkFly {
      0% { opacity: 0; transform: translate(0, 0) scale(0.4) rotate(var(--chunk-rot)); }
      12% { opacity: 1; }
      100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(1.22) rotate(calc(var(--chunk-rot) + 170deg)); }
    }
    @keyframes zombieLevelRoot {
      0% { opacity: 0; transform: scale(0.88); }
      10% { opacity: 1; }
      100% { opacity: 0; transform: scale(1); }
    }
    @keyframes zombieSkullRise {
      0% { transform: translateY(16px) scale(0.65) rotate(-10deg); opacity: 0; }
      16% { opacity: 1; }
      42% { transform: translateY(-13px) scale(1.18) rotate(5deg); opacity: 1; }
      100% { transform: translateY(-54px) scale(0.9) rotate(12deg); opacity: 0; }
    }
    @keyframes zombieLevelRing {
      0% { opacity: 0; transform: scale(0.45); }
      18% { opacity: 0.95; }
      100% { opacity: 0; transform: scale(2.25); }
    }
    @keyframes flashFade { 0% { opacity: 1; } 100% { opacity: 0; } }

    /* ── Monument World Map ── */
    #monument-worldmap-overlay {
      display: none; position: fixed; inset: 0;
      background: #0a0a14; z-index: 8500;
      flex-direction: column; overflow: hidden;
    }
    #monument-worldmap-overlay.open { display: flex; }

    #mwm-search-bar {
      display: flex; align-items: center; gap: 8px;
      padding: 10px 14px;
      padding-top: calc(10px + env(safe-area-inset-top, 0px));
      background: rgba(13,13,26,0.95);
      border-bottom: 1px solid rgba(255,255,255,0.08);
      flex-shrink: 0; z-index: 2; position: relative;
    }
    #mwm-close-btn {
      background: none; border: none; color: #888;
      font-size: 20px; cursor: pointer; padding: 4px 8px; flex-shrink: 0;
    }
    #mwm-search-wrap { flex: 1; position: relative; }
    #mwm-search-input {
      width: 100%; background: rgba(255,255,255,0.06);
      color: #fff; border: 1px solid rgba(255,255,255,0.12);
      border-radius: 10px; padding: 10px 14px; font-size: 14px;
      outline: none; box-sizing: border-box;
    }
    #mwm-search-input:focus { border-color: rgba(33,150,243,0.5); }
    #mwm-search-results {
      display: none; position: absolute; top: 100%; left: 0; right: 0;
      background: #1a1a2e; border: 1px solid rgba(255,255,255,0.1);
      border-radius: 0 0 10px 10px; max-height: 240px; overflow-y: auto;
      z-index: 3;
    }
    #mwm-search-results.visible { display: block; }
    .mwm-search-item {
      padding: 10px 14px; cursor: pointer; display: flex;
      align-items: center; gap: 10px;
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .mwm-search-item:active { background: rgba(255,255,255,0.06); }
    .mwm-search-item-emoji { font-size: 20px; flex-shrink: 0; }
    .mwm-search-item-info { flex: 1; min-width: 0; }
    .mwm-search-item-name { font-size: 14px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mwm-search-item-level { font-size: 11px; color: #888; }

    #mwm-globe { flex: 1; position: relative; }
    #mwm-globe .maplibregl-ctrl-bottom-left,
    #mwm-globe .maplibregl-ctrl-bottom-right { display: none; }

    #mwm-popup {
      display: none; position: absolute; bottom: 24px;
      left: 16px; right: 16px;
      background: #1a1a2e; border: 1px solid rgba(255,255,255,0.1);
      border-radius: 14px; padding: 16px; z-index: 2;
    }
    #mwm-popup.visible { display: block; }
    .mwm-popup-header { display: flex; align-items: center; gap: 12px; }
    .mwm-popup-emoji { font-size: 36px; flex-shrink: 0; }
    .mwm-popup-info { flex: 1; min-width: 0; }
    .mwm-popup-title { font-size: 16px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mwm-popup-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
    .mwm-popup-level { font-size: 12px; color: #aaa; }
    .mwm-popup-phase {
      font-size: 11px; padding: 2px 8px; border-radius: 6px;
      display: inline-block; font-weight: 600;
    }
    .mwm-popup-phase.shield { background: rgba(68,136,255,0.2); color: #4488ff; }
    .mwm-popup-phase.open { background: rgba(255,100,0,0.2); color: #ff6600; }
    .mwm-popup-phase.defeated { background: rgba(255,255,255,0.08); color: #666; }
    .mwm-popup-view-btn {
      width: 100%; margin-top: 12px; padding: 12px;
      background: rgba(33,150,243,0.15); border: 1px solid rgba(33,150,243,0.3);
      color: #2196F3; border-radius: 12px; font-size: 14px; font-weight: 600;
      cursor: pointer; text-align: center;
    }
    .mwm-popup-history-btn {
      width: 100%; margin-top: 8px; padding: 12px;
      background: rgba(255,193,7,0.12); border: 1px solid rgba(255,193,7,0.3);
      color: #FFC107; border-radius: 12px; font-size: 14px; font-weight: 600;
      cursor: pointer; text-align: center;
    }

    /* Monument raid history overlay (above world map, which is z-index 8500) */
    #monument-raids-overlay {
      display: none; position: fixed; inset: 0; z-index: 8600;
      background: rgba(0,0,0,0.78); backdrop-filter: blur(6px);
      flex-direction: column; align-items: center; justify-content: flex-end;
    }
    #monument-raids-overlay.open { display: flex; }
    #monument-raids-card {
      width: 100%; max-width: 480px; max-height: 75vh;
      background: #1a1a2e; border-top: 1px solid rgba(255,255,255,0.1);
      border-radius: 18px 18px 0 0; padding: 18px 16px 24px;
      display: flex; flex-direction: column; overflow: hidden;
    }
    .mr-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
    .mr-header h3 { flex: 1; font-size: 17px; color: #fff; margin: 0; font-weight: 700; }
    .mr-close { background: none; border: none; color: #888; font-size: 24px; cursor: pointer; padding: 4px 8px; }
    .mr-subtitle { font-size: 12px; color: #888; margin-bottom: 10px; }
    #monument-raids-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .mr-empty { text-align: center; color: var(--tg-muted); padding: 28px 18px; font-size: 13px; border: var(--tg-hairline); border-radius: var(--tg-radius-lg); background: rgba(255,255,255,0.035); }
    .mr-row {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 12px; margin-bottom: 6px;
      background: rgba(255,255,255,0.04); border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.05);
    }
    .mr-row-killer { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
    .mr-row-avatar { font-size: 22px; }
    .mr-row-name { font-size: 14px; color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mr-row-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
    .mr-row-level { font-size: 13px; color: #FFC107; font-weight: 700; }
    .mr-row-date { font-size: 11px; color: #888; }

    /* Telegram UI v1.1 - global migration layer
       Plan coverage: shell/HUD, auth/error, shop/market, leaderboard/profile,
       settings/admin, clan/social/chat, map/combat popups, craft/items/cores,
       tutorial/reward/confirm states, and shared motion/pressed states. */
    body {
      background: #0F1115;
      color: var(--tg-text);
      letter-spacing: 0;
    }
    button,
    input,
    textarea,
    select {
      font: inherit;
      letter-spacing: 0;
    }
    button,
    [onclick],
    .btn,
    .popupBtn,
    .market-card,
    .shop-item,
    .shop-item-wide,
    .shop-box-card,
    .shop-star-card {
      -webkit-tap-highlight-color: transparent;
    }
    :focus-visible {
      outline: 2px solid rgba(var(--tg-blue-rgb),0.72);
      outline-offset: 2px;
    }

    #hud-top-pill,
    .hud-right-btn,
    #btn-inventory,
    #btn-chat,
    #bottom-panel {
      background: rgba(23,26,32,0.90);
      border: var(--tg-hairline);
      box-shadow: 0 10px 28px rgba(0,0,0,0.22);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }
    #bottom-panel {
      background: #0F1115;
      border-top: var(--tg-hairline);
      padding-top: 10px;
    }
    #btn-inventory,
    .hud-right-btn,
    #btn-chat {
      border-radius: var(--tg-radius-md);
      transition:
        transform var(--tg-motion-fast) var(--tg-ease),
        background var(--tg-motion-fast) var(--tg-ease),
        border-color var(--tg-motion-fast) var(--tg-ease);
    }
    #btn-inventory:active,
    .hud-right-btn:active,
    #btn-chat:active {
      transform: scale(0.94);
      background: rgba(var(--tg-blue-rgb),0.12);
      border-color: rgba(var(--tg-blue-rgb),0.28);
    }

    #maintenance-screen,
    #ban-screen,
    #death-screen,
    #session-kicked-screen,
    #gps-denied-overlay,
    #settings-drawer,
    #leaderboard-overlay,
    #profile-overlay,
    #shop-modal,
    #market-modal,
    #market-list-overlay,
    #craft-overlay,
    #craft-pick-overlay,
    #clan-screen,
    #monument-worldmap-overlay {
      background:
        linear-gradient(180deg, rgba(var(--tg-blue-rgb),0.045), rgba(var(--tg-blue-rgb),0) 230px),
        var(--tg-bg) !important;
      color: var(--tg-text);
    }

    #settings-header,
    #leaderboard-header,
    .profile-topbar,
    #shop-header,
    #market-header,
    #market-list-header,
    #craft-header,
    #craft-pick-header,
    .cs-header,
    #mwm-search-bar {
      background: rgba(15,17,21,0.94) !important;
      border-bottom: var(--tg-hairline) !important;
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      color: var(--tg-text);
    }
    #leaderboard-current,
    #market-header-balances,
    #shop-header-balances {
      background: rgba(23,26,32,0.92) !important;
      border-color: var(--tg-border) !important;
    }
    #settings-body,
    #leaderboard-body,
    #profile-body,
    #shop-body,
    #market-body,
    #market-list-body,
    .cs-body,
    #craft-inv-grid,
    #craft-pick-grid {
      color: var(--tg-text);
      scrollbar-width: none;
    }
    #settings-body::-webkit-scrollbar,
    #leaderboard-body::-webkit-scrollbar,
    #profile-body::-webkit-scrollbar,
    #shop-body::-webkit-scrollbar,
    #market-body::-webkit-scrollbar,
    #market-list-body::-webkit-scrollbar,
    .cs-body::-webkit-scrollbar,
    #craft-inv-grid::-webkit-scrollbar,
    #craft-pick-grid::-webkit-scrollbar { width: 0; height: 0; }

    #popup-card,
    #avatar-sheet,
    #item-detail-card,
    .item-detail-card,
    #sell-confirm-card,
    #core-detail-card,
    #diamond-confirm-card,
    #chat-input-sheet,
    #chat-history-card,
    #market-buy-card,
    #market-private-card,
    #market-list-step1,
    #market-list-step2,
    #box-odds-popup,
    #box-open-overlay .box-result-card,
    #monument-raids-card,
    #mwm-popup {
      background: var(--tg-surface) !important;
      border: var(--tg-hairline) !important;
      color: var(--tg-text) !important;
      box-shadow: 0 18px 46px rgba(0,0,0,0.34);
    }
    #popup-card,
    #avatar-sheet,
    #monument-raids-card {
      border-radius: var(--tg-radius-xl) var(--tg-radius-xl) 0 0 !important;
    }
    #item-detail-card,
    .item-detail-card,
    #sell-confirm-card,
    #core-detail-card,
    #diamond-confirm-card,
    #chat-input-sheet,
    #chat-history-card,
    #market-buy-card,
    #market-private-card,
    #box-odds-popup,
    #mwm-popup {
      border-radius: var(--tg-radius-lg) !important;
    }

    #avatar-sheet-overlay,
    #item-detail-overlay,
    #sell-confirm-overlay,
    #core-detail-overlay,
    #diamond-confirm-overlay,
    #chat-history-overlay,
    #chat-input-backdrop,
    #market-buy-overlay,
    #market-private-overlay,
    #box-open-overlay,
    #monument-raids-overlay,
    #change-username-overlay,
    #report-overlay,
    #pvp-overlay,
    #mine-attack-overlay,
    #contest-picker-overlay,
    #contest-clan-overlay,
    #contest-stats-overlay {
      background: rgba(0,0,0,0.66) !important;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .btn,
    .popupBtn,
    .btn-profile,
    .btn-small,
    .btn-small-success,
    .btn-small-danger,
    .reward-claim-btn,
    .shop-box-open-btn,
    .shop-item-btn,
    .shop-item-wide-btn,
    .shop-star-buy-btn,
    .shop-daily-claim-btn,
    .market-card .market-buy-btn,
    #market-buy-btn,
    #market-list-submit,
    #market-load-more,
    .mwm-popup-view-btn,
    .mwm-popup-history-btn,
    .sp-invest-btn,
    #craft-btn {
      border-radius: var(--tg-radius-md) !important;
      border: 1px solid rgba(var(--tg-blue-rgb),0.28) !important;
      background: rgba(var(--tg-blue-rgb),0.14) !important;
      color: var(--tg-blue) !important;
      font-weight: 800;
      box-shadow: none !important;
      transition:
        transform var(--tg-motion-fast) var(--tg-ease),
        background var(--tg-motion-fast) var(--tg-ease),
        border-color var(--tg-motion-fast) var(--tg-ease),
        opacity var(--tg-motion-fast) var(--tg-ease);
    }
    .btn:active,
    .popupBtn:active,
    .btn-profile:active,
    .btn-small:active,
    .btn-small-success:active,
    .btn-small-danger:active,
    .reward-claim-btn:active,
    .shop-box-open-btn:active,
    .shop-item-btn:active,
    .shop-item-wide-btn:active,
    .shop-star-buy-btn:active,
    .shop-daily-claim-btn:active,
    .market-card .market-buy-btn:active,
    #market-buy-btn:active,
    #market-list-submit:active,
    #market-load-more:active,
    .mwm-popup-view-btn:active,
    .mwm-popup-history-btn:active,
    .sp-invest-btn:active,
    #craft-btn:active {
      transform: scale(0.97);
      background: rgba(var(--tg-blue-rgb),0.20) !important;
      opacity: 1 !important;
    }
    button:disabled,
    .btn:disabled,
    .popupBtn:disabled,
    #craft-btn:disabled {
      opacity: 0.42 !important;
      cursor: not-allowed !important;
      filter: saturate(0.55);
      transform: none !important;
    }
    button[aria-busy="true"],
    button[data-pending="true"],
    .btn.is-loading,
    .btn.pending {
      opacity: 0.68 !important;
      cursor: progress !important;
    }
    .btn-small-danger,
    .btn-reset,
    .btn-sell-item {
      border-color: rgba(255,69,58,0.30) !important;
      background: rgba(255,69,58,0.10) !important;
      color: var(--tg-danger) !important;
    }
    .btn-small-success,
    .shop-daily-claim-btn {
      border-color: rgba(52,199,89,0.30) !important;
      background: rgba(52,199,89,0.10) !important;
      color: var(--tg-success) !important;
    }

    #shop-tabs,
    #market-tabs,
    #market-subtabs,
    #settings-tabs,
    .cs-tabs,
    .idc-tabs {
      display: flex;
      gap: 4px;
      margin: 10px 16px 0;
      padding: 4px !important;
      background: var(--tg-surface-2) !important;
      border: var(--tg-hairline) !important;
      border-radius: var(--tg-radius-lg);
      border-bottom: var(--tg-hairline) !important;
    }
    .shop-tab,
    .market-tab,
    .market-subtab,
    .settings-tab,
    .cs-tabs button,
    .idc-tab,
    .market-sort-btn,
    .market-sort-btn-core {
      min-height: 36px;
      border: 0 !important;
      border-radius: 12px !important;
      background: transparent !important;
      color: var(--tg-muted) !important;
      font-size: 13px;
      font-weight: 760;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      transition:
        transform var(--tg-motion-fast) var(--tg-ease),
        background var(--tg-motion-fast) var(--tg-ease),
        color var(--tg-motion-fast) var(--tg-ease);
    }
    .shop-tab:active,
    .market-tab:active,
    .market-subtab:active,
    .settings-tab:active,
    .cs-tabs button:active,
    .idc-tab:active,
    .market-sort-btn:active,
    .market-sort-btn-core:active { transform: scale(0.97); }
    .shop-tab.active,
    .market-tab.active,
    .market-subtab.active,
    .settings-tab.active,
    .cs-tabs button.active,
    .idc-tab.active,
    .market-sort-btn.active,
    .market-sort-btn-core.active {
      color: #fff !important;
      background: var(--tg-blue) !important;
      box-shadow: 0 6px 16px rgba(var(--tg-blue-rgb),0.20);
    }

    .shop-box-card,
    .shop-item,
    .shop-item-wide,
    .shop-star-card,
    .shop-daily-card,
    .market-card,
    .market-inv-cell,
    .lb-row,
    .lb-podium-card,
    .profile-card,
    .profile-stat,
    .profile-section,
    .profile-badge-card,
    .build-item,
    .core-card,
    .core-slot,
    .reward-card,
    .cs-stat-card,
    .cs-section,
    .cs-member-row,
    .cs-request-row,
    .cs-clan-card,
    .chc-row,
    .popup-stat,
    .hq-stat-card,
    .sp-effect,
    .dc-cost-card,
    .mr-row,
    .mwm-search-item {
      background: var(--tg-surface-2) !important;
      border: var(--tg-hairline) !important;
      border-radius: var(--tg-radius-md) !important;
      box-shadow: none !important;
    }
    .shop-box-card,
    .shop-item,
    .shop-item-wide,
    .shop-star-card,
    .market-card,
    .lb-podium-card,
    .profile-card {
      border-radius: var(--tg-radius-lg) !important;
    }
    .shop-box-card::before,
    .shop-star-card::before,
    .shop-daily-card::before,
    .shop-item::before,
    .shop-item-wide::before,
    .profile-card::before,
    .custom-preview-card::before,
    .tutorial-card::before,
    .tutorial-card::after {
      opacity: 0.32;
    }
    .shop-box-card:active,
    .shop-item:active,
    .shop-item-wide:active,
    .shop-star-card:active,
    .market-card:active,
    .lb-row:active,
    .profile-badge-card:active,
    .build-item:active {
      transform: scale(0.985);
    }

    input,
    textarea,
    select,
    #chat-input-sheet input,
    #market-private-input,
    #market-list-price-input,
    #mwm-search-input,
    #cs-clan-name-input {
      background: var(--tg-surface-2) !important;
      border: var(--tg-hairline) !important;
      border-radius: var(--tg-radius-md) !important;
      color: var(--tg-text) !important;
      outline: none;
    }
    input:focus,
    textarea:focus,
    select:focus,
    #chat-input-sheet input:focus,
    #market-private-input:focus,
    #market-list-price-input:focus,
    #mwm-search-input:focus,
    #cs-clan-name-input:focus {
      border-color: rgba(var(--tg-blue-rgb),0.50) !important;
      box-shadow: 0 0 0 3px rgba(var(--tg-blue-rgb),0.10);
    }

    #mwm-search-results {
      background: var(--tg-surface) !important;
      border: var(--tg-hairline) !important;
      border-radius: 0 0 var(--tg-radius-md) var(--tg-radius-md) !important;
    }
    .mine-pop-bar {
      background: rgba(255,255,255,0.24);
      border-radius: 999px;
    }
    .mine-pop-hint,
    .stat-label,
    .profile-title-line,
    .profile-clan,
    .profile-section-title,
    .shop-store-subtitle,
    .shop-item-sub,
    .shop-item-wide-sub,
    .market-card-stat,
    .market-card-seller,
    .market-card-time,
    .lb-title-line,
    .lb-xp,
    .cs-stat-label,
    .mr-subtitle,
    .mwm-popup-level,
    .dc-subtitle,
    .idc-stat-label,
    .chc-row .chc-time {
      color: var(--tg-muted) !important;
    }
    .stat-value,
    .profile-username,
    .profile-topbar-title,
    .shop-store-title,
    .shop-item-name,
    .shop-item-wide-name,
    .shop-box-name,
    .market-card-name,
    .lb-name,
    .cs-stat-val,
    .mwm-popup-title,
    .dc-title,
    .idc-name,
    .chc-row .chc-text {
      color: var(--tg-text) !important;
    }

    .shop-box-price,
    .shop-star-diamonds,
    .market-card-price,
    .reward-level,
    .lb-level,
    .mwm-popup-phase.shield,
    .chc-row .chc-name {
      color: var(--tg-blue) !important;
    }
    .shop-star-price,
    .profile-level-badge,
    .mr-row-level {
      color: var(--tg-gold) !important;
    }

    .chat-bubble,
    #toast-container > div {
      background: rgba(23,26,32,0.94) !important;
      border: var(--tg-hairline) !important;
      border-radius: var(--tg-radius-lg) !important;
      color: var(--tg-text) !important;
      box-shadow: 0 12px 28px rgba(0,0,0,0.28) !important;
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .chc-empty,
    .cores-empty,
    .arm-empty,
    #market-empty,
    .mr-empty,
    .cs-empty,
    .inv-cell.inv-cell-empty,
    .map-quick-empty {
      border: var(--tg-hairline) !important;
      border-radius: var(--tg-radius-lg) !important;
      background: rgba(255,255,255,0.035) !important;
      color: var(--tg-muted) !important;
      box-shadow: none !important;
    }

    .tutorial-card,
    .tutorial-stuck-card,
    .tutorial-done-card,
    .setup-card,
    .maintenance-card,
    .ban-card,
    .death-card {
      background: var(--tg-surface) !important;
      border: var(--tg-hairline) !important;
      border-radius: var(--tg-radius-lg) !important;
      color: var(--tg-text) !important;
      box-shadow: 0 18px 46px rgba(0,0,0,0.34) !important;
    }
    .tutorial-progress-fill,
    .char-xp-fill,
    .hp-bar-fill.player,
    .pp-hp-fill {
      background: linear-gradient(90deg, var(--tg-blue), #78D5FF) !important;
    }
    .hp-bar-container,
    .pp-hp-bar,
    .idc-upgrade-bar,
    .char-xp-bg {
      background: var(--tg-surface-3) !important;
    }

    @media (max-width: 430px) {
      #shop-body,
      #market-body,
      #leaderboard-body,
      #settings-body,
      .cs-body {
        padding-left: 12px !important;
        padding-right: 12px !important;
      }
      #shop-tabs,
      #market-tabs,
      #market-subtabs,
      #settings-tabs,
      .cs-tabs {
        margin-left: 12px;
        margin-right: 12px;
      }
      .shop-boxes-row,
      .shop-product-grid,
      .market-grid,
      #market-grid {
        gap: 10px !important;
      }
    }

    /* Telegram UI v1.2 - tighter Telegram fit
       This layer removes map blur from building popups and makes the rest of
       the app feel closer to Telegram dark theme: flatter lists, compact
       controls, clearer dividers, softer buttons, and less decorative glow. */
    :root {
      --tg-bg: #0E1621;
      --tg-surface: #17212B;
      --tg-surface-2: #1E2C3A;
      --tg-surface-3: #263545;
      --tg-border: rgba(255,255,255,0.075);
      --tg-border-strong: rgba(255,255,255,0.12);
      --tg-text: #F5F7FA;
      --tg-muted: #7D8B9A;
      --tg-muted-2: #5D6B7B;
      --tg-radius-sm: 7px;
      --tg-radius-md: 10px;
      --tg-radius-lg: 14px;
      --tg-radius-xl: 18px;
    }

    #popup-overlay {
      background: transparent !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      pointer-events: none;
    }
    #popup-overlay.combat-mode {
      background: transparent !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      pointer-events: auto;
    }
    #popup-card {
      background: var(--tg-surface) !important;
      border-top: 1px solid var(--tg-border-strong) !important;
      box-shadow: 0 -12px 34px rgba(0,0,0,0.30) !important;
    }

    #shop-header,
    #market-header,
    #leaderboard-header,
    #settings-header,
    .profile-topbar,
    .cs-header,
    #craft-header,
    #market-list-header {
      min-height: 56px;
      padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important;
      padding-bottom: 8px !important;
    }
    #shop-close,
    #market-close,
    #market-list-close,
    #btn-close-settings,
    .lb-close,
    .lb-refresh,
    .btn-back,
    .cs-close,
    #craft-close,
    #craft-pick-close,
    #mwm-close-btn,
    .popup-close,
    .idc-close,
    .mr-close,
    .cis-close,
    .chc-close {
      width: 34px !important;
      height: 34px !important;
      padding: 0 !important;
      border-radius: 50% !important;
      background: var(--tg-surface-2) !important;
      border: var(--tg-hairline) !important;
      color: var(--tg-muted) !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      line-height: 1 !important;
      font-size: 16px !important;
      transition:
        transform var(--tg-motion-fast) var(--tg-ease),
        background var(--tg-motion-fast) var(--tg-ease),
        color var(--tg-motion-fast) var(--tg-ease);
    }
    #shop-close:active,
    #market-close:active,
    #market-list-close:active,
    #btn-close-settings:active,
    .lb-close:active,
    .lb-refresh:active,
    .btn-back:active,
    .cs-close:active,
    #craft-close:active,
    #craft-pick-close:active,
    #mwm-close-btn:active,
    .popup-close:active,
    .idc-close:active,
    .mr-close:active,
    .cis-close:active,
    .chc-close:active {
      transform: scale(0.92);
      background: var(--tg-surface-3) !important;
      color: var(--tg-text) !important;
    }

    #shop-header h2,
    #market-header h2,
    #leaderboard-header h3,
    #settings-header h3,
    .cs-header .cs-clan-name,
    #craft-header h2,
    #market-list-header h3 {
      font-size: 17px !important;
      font-weight: 740 !important;
      letter-spacing: 0 !important;
    }
    #shop-header-balances,
    #market-header-balances {
      gap: 8px !important;
      margin-top: 8px !important;
      flex-wrap: wrap;
    }
    #shop-header-balances span,
    #market-header-balances span,
    #leaderboard-current .lb-current-label {
      min-height: 28px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 9px;
      border-radius: 999px;
      background: rgba(255,255,255,0.045);
      border: var(--tg-hairline);
      color: var(--tg-muted);
      font-size: 12px;
      font-weight: 720;
    }

    #shop-tabs,
    #market-tabs,
    #market-subtabs,
    #settings-tabs,
    .cs-tabs {
      margin-top: 8px !important;
      background: #111B26 !important;
      border-color: rgba(255,255,255,0.055) !important;
      box-shadow: none !important;
    }
    .shop-tab,
    .market-tab,
    .market-subtab,
    .settings-tab,
    .cs-tabs button {
      min-height: 34px !important;
      font-size: 12px !important;
      font-weight: 730 !important;
    }
    .shop-tab.active,
    .market-tab.active,
    .market-subtab.active,
    .settings-tab.active,
    .cs-tabs button.active {
      background: var(--tg-blue) !important;
      box-shadow: none !important;
    }

    #shop-body,
    #market-body,
    #leaderboard-body,
    #settings-body,
    .cs-body,
    #market-list-body {
      padding-top: 12px !important;
      background: transparent !important;
    }
    .shop-store-section,
    .settings-section,
    .cs-section {
      margin-bottom: 12px !important;
    }
    .shop-store-head,
    .profile-section-title,
    .shop-section-title,
    .cs-section-title,
    .settings-section-title {
      padding: 0 2px;
    }
    .shop-store-title,
    .shop-section-title,
    .cs-section-title,
    .settings-section-title {
      color: var(--tg-muted) !important;
      font-size: 12px !important;
      font-weight: 760 !important;
      text-transform: none !important;
      letter-spacing: 0 !important;
    }

    .shop-box-card,
    .shop-item,
    .shop-item-wide,
    .shop-star-card,
    .shop-daily-card,
    .market-card,
    .lb-row,
    .profile-card,
    .profile-stat,
    .profile-section,
    .profile-badge-card,
    .build-item,
    .cs-stat-card,
    .cs-section,
    .cs-member-row,
    .cs-request-row,
    .cs-clan-card,
    .chc-row,
    .popup-stat,
    .hq-stat-card,
    .sp-effect,
    .dc-cost-card,
    .mr-row {
      background: var(--tg-surface) !important;
      border-color: var(--tg-border) !important;
      border-radius: var(--tg-radius-md) !important;
      box-shadow: none !important;
    }
    .shop-box-card::before,
    .shop-item::before,
    .shop-item-wide::before,
    .shop-star-card::before,
    .shop-daily-card::before,
    .lb-podium-card::before,
    .profile-card::before {
      opacity: 0.12 !important;
    }

    .shop-boxes-row,
    .shop-product-grid,
    .shop-stars-grid {
      gap: 8px !important;
    }
    .shop-box-card,
    .shop-item,
    .shop-star-card {
      min-height: 132px !important;
      padding: 11px 9px !important;
    }
    .shop-box-icon,
    .shop-item-glow {
      width: 42px !important;
      height: 42px !important;
      border-radius: 12px !important;
      background: rgba(var(--accent-rgb),0.10) !important;
      border: 1px solid rgba(var(--accent-rgb),0.18) !important;
    }
    .shop-box-name,
    .shop-item-name,
    .market-card-name {
      font-size: 12px !important;
      font-weight: 720 !important;
    }
    .shop-item-sub,
    .shop-item-wide-sub,
    .shop-store-subtitle {
      font-size: 11px !important;
      font-weight: 500 !important;
    }
    .shop-box-open-btn,
    .shop-item-btn,
    .shop-item-wide-btn,
    .shop-star-buy-btn {
      min-height: 34px;
      border-radius: 999px !important;
      background: rgba(var(--tg-blue-rgb),0.13) !important;
      border-color: rgba(var(--tg-blue-rgb),0.24) !important;
      color: var(--tg-blue) !important;
    }
    .shop-box-info-btn,
    .shop-inline-info {
      background: rgba(255,255,255,0.045) !important;
      border-color: var(--tg-border) !important;
      color: var(--tg-muted) !important;
      font-style: normal !important;
    }

    #market-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 10px !important;
    }
    .market-card {
      min-height: 174px !important;
      padding: 11px 9px !important;
    }
    .market-card-emoji {
      width: 42px;
      height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      background: rgba(var(--tg-blue-rgb),0.08);
      border: var(--tg-hairline);
      font-size: 26px !important;
      margin: 0 !important;
    }
    .market-card .market-buy-btn,
    #market-buy-btn,
    #market-list-submit {
      border-radius: 999px !important;
      min-height: 34px;
    }
    #market-sort-row,
    #market-sort-row-cores {
      padding: 8px 16px !important;
      gap: 6px !important;
    }
    .market-sort-btn,
    .market-sort-btn-core {
      min-height: 32px !important;
      border: var(--tg-hairline) !important;
      background: var(--tg-surface) !important;
    }

    .lb-row,
    .cs-member-row,
    .cs-request-row,
    .mwm-search-item,
    .chc-row,
    .mr-row {
      min-height: 54px;
      margin-bottom: 0 !important;
      border-radius: 0 !important;
      border-left: 0 !important;
      border-right: 0 !important;
      border-top: 0 !important;
      background: var(--tg-surface) !important;
    }
    #leaderboard-list,
    #chat-history-list,
    #monument-raids-list {
      gap: 0 !important;
      overflow: hidden;
      border: var(--tg-hairline);
      border-radius: var(--tg-radius-lg);
      background: var(--tg-surface);
    }
    .lb-row:first-child,
    .cs-member-row:first-child,
    .cs-request-row:first-child,
    .chc-row:first-child,
    .mr-row:first-child { border-radius: var(--tg-radius-lg) var(--tg-radius-lg) 0 0 !important; }
    .lb-row:last-child,
    .cs-member-row:last-child,
    .cs-request-row:last-child,
    .chc-row:last-child,
    .mr-row:last-child { border-radius: 0 0 var(--tg-radius-lg) var(--tg-radius-lg) !important; border-bottom: 0 !important; }
    .lb-podium {
      gap: 8px !important;
      margin-bottom: 12px !important;
    }
    .lb-podium-card {
      background: var(--tg-surface) !important;
      border: var(--tg-hairline) !important;
      box-shadow: none !important;
    }
    .lb-podium {
      grid-template-columns: 0.96fr 1.08fr 0.96fr !important;
      align-items: end !important;
    }
    .lb-podium-card {
      display: flex !important;
      flex-direction: column !important;
      justify-content: flex-end !important;
      padding-bottom: 0 !important;
      overflow: hidden !important;
    }
    .lb-podium-card.rank-1 { min-height: 190px !important; }
    .lb-podium-card.rank-2 { min-height: 162px !important; }
    .lb-podium-card.rank-3 { min-height: 144px !important; }
    .lb-podium-score {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      gap: 5px;
      flex-wrap: wrap;
    }
    .lb-podium-level {
      color: rgba(255,255,255,0.88);
      background: rgba(255,255,255,0.075);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 999px;
      padding: 2px 6px;
      font-size: 10px;
      font-weight: 850;
      line-height: 1.1;
    }
    .lb-podium-stand {
      width: calc(100% + 16px);
      height: 20px;
      margin: 10px -8px 0;
      border-top: 1px solid rgba(var(--accent-rgb),0.42);
      background:
        linear-gradient(180deg, rgba(var(--accent-rgb),0.28), rgba(var(--accent-rgb),0.085)),
        rgba(255,255,255,0.030);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.075);
    }
    .lb-podium-card.rank-1 .lb-podium-stand { height: 42px; }
    .lb-podium-card.rank-2 .lb-podium-stand { height: 28px; }
    .lb-podium-card.rank-3 .lb-podium-stand { height: 18px; }

    .settings-row,
    .settings-item,
    .list_item,
    .row {
      background: var(--tg-surface) !important;
      border-color: var(--tg-border) !important;
      color: var(--tg-text) !important;
    }
    input,
    textarea,
    select {
      min-height: 42px;
      background: #111B26 !important;
      border-color: rgba(255,255,255,0.06) !important;
    }

    #chat-input-sheet,
    #chat-history-card,
    #diamond-confirm-card,
    #market-buy-card,
    #market-private-card,
    .item-detail-card,
    #core-detail-card {
      background: var(--tg-surface) !important;
      box-shadow: 0 18px 40px rgba(0,0,0,0.28) !important;
    }
    #chat-input-sheet .cis-send,
    .reward-claim-btn,
    .mwm-popup-view-btn {
      border-radius: 999px !important;
      background: var(--tg-blue) !important;
      border-color: var(--tg-blue) !important;
      color: #fff !important;
    }
    .mwm-popup-history-btn {
      border-radius: 999px !important;
      background: rgba(var(--tg-blue-rgb),0.10) !important;
      border-color: rgba(var(--tg-blue-rgb),0.24) !important;
      color: var(--tg-blue) !important;
    }

    /* Chat modal polish CSS is lazy-loaded with social-panels. */
    #map-quick-popover {
      background: rgba(23,26,32,0.96) !important;
      border-color: rgba(255,255,255,0.10) !important;
    }
    #popup-card .btn-attack-universal {
      width: 100%;
      min-height: 48px !important;
      border-radius: 16px !important;
      background: var(--tg-danger) !important;
      border-color: rgba(255,255,255,0.12) !important;
      color: #fff !important;
      box-shadow: 0 10px 24px rgba(255,69,58,0.24) !important;
    }
    #popup-card .btn-attack-universal .attack-btn-label {
      color: #fff !important;
      font-weight: 860 !important;
      letter-spacing: 0 !important;
    }
    #popup-card .btn-attack-universal:disabled {
      background: rgba(255,255,255,0.055) !important;
      border-color: rgba(255,255,255,0.075) !important;
      color: var(--tg-muted) !important;
      box-shadow: none !important;
    }
    #popup-card .btn-attack-universal:disabled .attack-btn-label {
      color: var(--tg-muted) !important;
    }

    /* Telegram UI v1.3 - Block 1: Map interaction and building popups
       Scope: mine/HQ/clan HQ/collectors/ore/monuments/defenders/vases/drops/
       zombies/bots and shared map object states. */
    #popup-card {
      --popup-accent: var(--tg-blue);
      --popup-accent-rgb: var(--tg-blue-rgb);
      width: min(100%, 480px);
      max-height: min(86dvh, calc(100dvh - 8px), 720px);
      padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
      overflow-y: auto;
      overscroll-behavior: contain;
      color: var(--tg-text) !important;
      background:
        radial-gradient(circle at 50% -18px, rgba(var(--popup-accent-rgb),0.20), transparent 56%),
        linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0) 120px),
        var(--tg-surface) !important;
      border: 1px solid var(--tg-border-strong) !important;
      border-bottom: 0 !important;
      border-radius: 22px 22px 0 0 !important;
      box-shadow: 0 -18px 48px rgba(0,0,0,0.36) !important;
      scrollbar-width: none;
      animation: tgObjectSheetIn var(--tg-motion-base) var(--tg-ease);
    }
    #popup-card::-webkit-scrollbar { width: 0; height: 0; }
    @keyframes tgObjectSheetIn {
      from { transform: translate3d(0, 18px, 0); opacity: 0.68; }
      to { transform: translate3d(0, 0, 0); opacity: 1; }
    }
    #popup-overlay.is-closing #popup-card {
      pointer-events: none;
      animation: none !important;
      transform: translate3d(0, 18px, 0);
      opacity: 0;
      transition:
        transform var(--tg-motion-popup-exit) var(--tg-ease),
        opacity var(--tg-motion-popup-exit) linear;
    }
    #popup-card:not(.popup-card-mine):not(.popup-card-factory):not(.popup-card-build-menu)::before {
      content: '';
      display: block;
      width: 38px;
      height: 4px;
      margin: -4px auto 12px;
      border-radius: 999px;
      background: rgba(255,255,255,0.22);
    }
    #popup-card.popup-card-mine,
    #core-detail-card.equipment-picker-detail-card {
      /* A picker is a continuation of the mine sheet, not a generic detail
         dialog. Keep the same warm surface so switching screens never flashes
         the default blue-violet core-detail theme. */
      --mine-sheet-accent-rgb: 255,214,90;
      --mine-sheet-surface:
        radial-gradient(circle at 50% -18px, rgba(var(--mine-sheet-accent-rgb),0.20), transparent 56%),
        linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0) 120px),
        var(--tg-surface);
    }
    #popup-card.popup-card-mine {
      --popup-accent: var(--tg-gold);
      --popup-accent-rgb: 255,214,90;
    }
    #popup-card.popup-card-build-menu {
      --popup-accent: rgba(255,255,255,0.74);
      --popup-accent-rgb: 142,162,178;
      max-height: min(25dvh, 248px);
      padding: 6px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
      overflow: hidden;
      overscroll-behavior: none;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.042), rgba(255,255,255,0) 126px),
        var(--tg-surface) !important;
    }
    #popup-card.popup-card-build-menu.popup-card-build-menu-monument {
      max-height: min(66dvh, 520px);
      overflow-y: auto;
      padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    }
    #popup-card.popup-card-build-menu::before {
      content: '';
      display: block;
      width: 42px;
      height: 4px;
      margin: 0 auto 8px;
      border-radius: 999px;
      background: rgba(255,255,255,0.20);
    }
    #popup-card.popup-card-build-menu .build-menu-head {
      min-height: 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 7px;
      padding-bottom: 0 !important;
      border-bottom: 0 !important;
    }
    #popup-card.popup-card-build-menu .build-menu-title {
      min-width: 0;
      color: var(--tg-text);
      font-size: 16px;
      line-height: 1.15;
      font-weight: 820;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #popup-card.popup-card-build-menu .popup-close {
      width: 32px !important;
      height: 32px !important;
      border-radius: 50% !important;
      flex: 0 0 auto;
      color: var(--tg-muted) !important;
    }
    #popup-card.popup-card-build-menu .build-menu-tabs {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
      margin-bottom: 7px;
    }
    #popup-card.popup-card-build-menu .build-menu-tabs.build-menu-tabs-three {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    #popup-card.popup-card-build-menu button.build-menu-tab {
      min-height: 33px !important;
      padding: 6px 10px !important;
      border-radius: 12px !important;
      border: 1px solid rgba(255,255,255,0.070) !important;
      background: rgba(255,255,255,0.034) !important;
      color: rgba(255,255,255,0.52) !important;
      font-size: 13px !important;
      font-weight: 780 !important;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      white-space: nowrap;
    }
    #popup-card.popup-card-build-menu button.build-menu-tab.is-active {
      color: var(--tg-text) !important;
      border-color: rgba(255,255,255,0.14) !important;
      background: rgba(255,255,255,0.070) !important;
    }
    #popup-card.popup-card-build-menu .build-menu-tab-badge {
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: rgba(255,255,255,0.70);
      background: rgba(255,255,255,0.055);
      border: 1px solid rgba(255,255,255,0.080);
      font-size: 11px;
      font-weight: 850;
      line-height: 1;
    }
    #popup-card.popup-card-build-menu .build-menu-body {
      display: grid;
      gap: 6px;
    }
    #popup-card.popup-card-build-menu .build-menu-carousel {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding: 0 0 2px;
    }
    #popup-card.popup-card-build-menu .build-menu-carousel::-webkit-scrollbar {
      display: none;
    }
    #popup-card.popup-card-build-menu .build-menu-carousel > .build-option-row {
      flex: 0 0 100%;
      scroll-snap-align: start;
    }
    #popup-card.popup-card-build-menu .build-menu-swipe-hint {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 16px;
      color: rgba(255,255,255,0.40);
      font-size: 10.5px;
      font-weight: 760;
      line-height: 1;
      pointer-events: none;
    }
    #popup-card.popup-card-build-menu .build-menu-swipe-hint::before,
    #popup-card.popup-card-build-menu .build-menu-swipe-hint::after {
      content: '';
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: rgba(255,255,255,0.22);
    }
    #popup-card.popup-card-build-menu button.build-primary-tile,
    #popup-card.popup-card-build-menu button.build-option-row,
    #popup-card.popup-card-build-menu button.build-monument-submit {
      width: 100%;
      min-height: 58px !important;
      padding: 10px 12px !important;
      border-radius: 16px !important;
      border: 1px solid rgba(255,255,255,0.085) !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.058), rgba(255,255,255,0.030)),
        rgba(255,255,255,0.032) !important;
      color: var(--tg-text) !important;
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr);
      align-items: center;
      gap: 10px;
      text-align: left;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.045) !important;
      cursor: pointer;
    }
    #popup-card.popup-card-build-menu button.build-primary-tile {
      min-height: 96px !important;
      border-color: rgba(255,255,255,0.13) !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.072), rgba(255,255,255,0.034)),
        rgba(255,255,255,0.038) !important;
    }
    #popup-card.popup-card-build-menu button.build-option-row:not(:disabled):active,
    #popup-card.popup-card-build-menu button.build-primary-tile:active,
    #popup-card.popup-card-build-menu button.build-monument-submit:not(:disabled):active {
      transform: scale(0.985);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.088), rgba(255,255,255,0.042)),
        rgba(255,255,255,0.050) !important;
    }
    #popup-card.popup-card-build-menu .build-icon {
      width: 44px;
      height: 44px;
      border-radius: 15px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 25px;
      background: rgba(255,255,255,0.040);
      border: 1px solid rgba(255,255,255,0.065);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
      filter: saturate(0.78) contrast(0.96);
    }
    #popup-card.popup-card-build-menu .build-copy {
      min-width: 0;
      display: grid;
      gap: 5px;
    }
    #popup-card.popup-card-build-menu .build-name {
      color: var(--tg-text);
      font-size: 17px;
      line-height: 1.08;
      font-weight: 860;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #popup-card.popup-card-build-menu .build-sub {
      color: rgba(255,255,255,0.52);
      font-size: 12.5px;
      line-height: 1.1;
      font-weight: 730;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #popup-card.popup-card-build-menu .build-price {
      color: rgba(255,255,255,0.66);
      font-size: 12.5px;
      line-height: 1.1;
      font-weight: 760;
      white-space: nowrap;
    }
    #popup-card.popup-card-build-menu button.build-option-row:disabled {
      cursor: not-allowed;
      opacity: 1 !important;
      border-color: rgba(255,255,255,0.070) !important;
      background: rgba(255,255,255,0.036) !important;
    }
    #popup-card.popup-card-build-menu button.build-option-row:disabled .build-icon,
    #popup-card.popup-card-build-menu button.build-option-row:disabled .build-name,
    #popup-card.popup-card-build-menu button.build-option-row:disabled .build-sub {
      opacity: 0.54;
    }
    #popup-card.popup-card-build-menu button.build-option-row:disabled .build-price {
      color: rgba(255,255,255,0.44);
    }
    #popup-card.popup-card-build-menu .build-admin-monument {
      display: grid;
      gap: 9px;
    }
    #popup-card.popup-card-build-menu .build-admin-fields {
      display: grid;
      grid-template-columns: 74px minmax(0, 1fr);
      gap: 8px;
    }
    #popup-card.popup-card-build-menu .build-admin-field {
      min-width: 0;
      display: grid;
      gap: 5px;
      color: rgba(255,255,255,0.54);
      font-size: 10.5px;
      line-height: 1;
      font-weight: 850;
      text-transform: uppercase;
    }
    #popup-card.popup-card-build-menu .build-admin-field input {
      width: 100%;
      height: 42px;
      border-radius: 13px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.050);
      color: var(--tg-text);
      font-size: 15px;
      font-weight: 760;
      outline: none;
      padding: 0 11px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
    }
    #popup-card.popup-card-build-menu .build-admin-field-icon input {
      text-align: center;
      font-size: 22px;
      padding: 0 6px;
    }
    #popup-card.popup-card-build-menu .build-admin-field input:focus {
      border-color: rgba(255,255,255,0.24);
      background: rgba(255,255,255,0.072);
    }
    #popup-card.popup-card-build-menu .build-monument-level-row {
      display: flex;
      gap: 6px;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 1px;
    }
    #popup-card.popup-card-build-menu .build-monument-level-row::-webkit-scrollbar {
      display: none;
    }
    #popup-card.popup-card-build-menu button.build-monument-level {
      flex: 0 0 auto;
      width: 39px;
      height: 36px;
      padding: 0 !important;
      border-radius: 12px !important;
      border: 1px solid rgba(255,255,255,0.085) !important;
      background: rgba(255,255,255,0.044) !important;
      color: rgba(255,255,255,0.72) !important;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 860 !important;
    }
    #popup-card.popup-card-build-menu button.build-monument-level {
      font-size: 13px !important;
    }
    #popup-card.popup-card-build-menu button.build-monument-level.is-active {
      color: #080812 !important;
      border-color: rgba(255,220,110,0.95) !important;
      background:
        linear-gradient(180deg, #ffe78d, #ffbd3d) !important;
      box-shadow:
        0 0 0 2px rgba(255,213,90,0.18),
        0 0 18px rgba(255,190,60,0.30) !important;
      transform: translateY(-1px);
    }
    #popup-card.popup-card-build-menu .build-monument-level-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: rgba(255,255,255,0.58);
      font-size: 11px;
      line-height: 1;
      font-weight: 850;
      text-transform: uppercase;
    }
    #popup-card.popup-card-build-menu .build-monument-level-head b {
      color: #ffcf55;
      font-size: 14px;
      letter-spacing: 0;
      text-shadow: 0 0 12px rgba(255,207,85,0.34);
    }
    #popup-card.popup-card-build-menu button.build-monument-submit {
      min-height: 62px !important;
      border-color: rgba(255,255,255,0.15) !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.086), rgba(255,255,255,0.040)),
        rgba(255,255,255,0.048) !important;
    }
    #popup-card.popup-card-build-menu button.build-monument-submit:disabled {
      opacity: 0.64;
      cursor: wait;
    }
    .clan-sheet-overlay {
      position: fixed;
      inset: 0;
      z-index: 9200;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding: 12px;
      padding-bottom: calc(12px + env(safe-area-inset-bottom));
      background: rgba(0,0,0,0.54);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      animation: fadeIn .18s ease-out;
    }
    .clan-sheet {
      width: min(100%, 440px);
      max-height: min(86vh, 720px);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      border-radius: 24px;
      background:
        radial-gradient(circle at 50% -80px, rgba(var(--clan-rgb, 36,129,204),0.25), transparent 230px),
        linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.035)),
        var(--tg-surface);
      border: 1px solid rgba(var(--clan-rgb, 36,129,204),0.24);
      box-shadow: 0 26px 70px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.09);
      color: var(--tg-text);
      animation: tgSheetIn .24s var(--tg-ease);
    }
    .clan-sheet-head {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px 16px 12px;
      border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .clan-sheet-icon {
      width: 54px;
      height: 54px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      font-size: 30px;
      background: rgba(var(--clan-rgb, 36,129,204),0.16);
      border: 1px solid rgba(var(--clan-rgb, 36,129,204),0.28);
    }
    .clan-sheet-title {
      min-width: 0;
      color: var(--tg-text);
      font-size: 18px;
      font-weight: 820;
      line-height: 1.15;
      overflow-wrap: anywhere;
    }
    .clan-sheet-sub {
      margin-top: 4px;
      color: var(--tg-text-muted);
      font-size: 12px;
      line-height: 1.35;
    }
    .clan-sheet-close {
      width: 36px;
      height: 36px;
      border: 0;
      border-radius: 50%;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      background: var(--tg-surface-2);
      color: var(--tg-text);
      font-size: 18px;
    }
    .clan-sheet-body {
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 12px 16px 0;
    }
    .clan-sheet-actions {
      display: grid;
      gap: 8px;
      padding: 12px 16px 16px;
      border-top: 1px solid rgba(255,255,255,0.07);
      background: rgba(10,14,19,0.34);
    }
    .clan-sheet-actions .btn {
      width: 100%;
      min-height: 44px;
      border-radius: 14px;
      font-size: 14px;
      font-weight: 760;
    }
    .clan-sheet-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 48px;
      padding: 10px 0;
      border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .clan-sheet-row:last-child { border-bottom: 0; }
    .clan-sheet-row span:first-child {
      color: var(--tg-text-muted);
      font-size: 12px;
    }
    .clan-sheet-row b {
      color: var(--tg-text);
      font-size: 14px;
      text-align: right;
    }
    .clan-link-target-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 46px;
      gap: 8px;
      align-items: stretch;
      padding: 5px 0;
    }
    .clan-link-target-btn,
    .clan-link-camera-btn {
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.055);
      color: var(--tg-text);
      min-height: 48px;
      border-radius: 14px;
      font-weight: 760;
    }
    .clan-link-target-btn {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      padding: 9px 12px;
      text-align: left;
    }
    .clan-link-target-name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .clan-link-target-dist {
      color: var(--tg-text-muted);
      font-size: 12px;
      white-space: nowrap;
    }
    .clan-link-camera-btn {
      display: grid;
      place-items: center;
      padding: 0;
      font-size: 18px;
    }
    @keyframes tgSheetIn {
      0% { opacity: 0; transform: translateY(24px) scale(.98); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }
    #popup-card.combat-object,
    #popup-overlay.combat-mode #popup-card {
      --popup-accent: var(--tg-danger);
      --popup-accent-rgb: 255,69,58;
    }

    #popup-card > div:first-child {
      min-height: 48px;
      margin-bottom: 12px !important;
      padding-bottom: 10px;
      border-bottom: var(--tg-hairline);
      position: relative;
      z-index: 1;
    }
    #popup-card > div:first-child > div:first-child {
      min-width: 0;
    }
    #popup-card > div:first-child > div:first-child > div:first-child,
    #popup-card #popup-title,
    #popup-card h2 {
      color: var(--tg-text) !important;
      font-size: 17px !important;
      font-weight: 780 !important;
      line-height: 1.18 !important;
      letter-spacing: 0 !important;
      max-width: calc(100vw - 92px);
      overflow-wrap: anywhere;
    }
    #popup-card > div:first-child > div:first-child > div:nth-child(2),
    #popup-card #popup-subtitle,
    #popup-card .subtitle {
      color: var(--tg-muted) !important;
      font-size: 12px !important;
      font-weight: 560 !important;
      line-height: 1.3 !important;
      margin-top: 4px !important;
    }
    #popup-card .popup-close {
      flex: 0 0 auto;
      background: rgba(255,255,255,0.045) !important;
      border: var(--tg-hairline) !important;
    }

    #popup-card #popup-stats {
      gap: 8px !important;
      margin-top: 0 !important;
    }
    #popup-card .hq-stat-card,
    #popup-card .popup-stat {
      min-height: 46px;
      padding: 10px 12px !important;
      background: rgba(255,255,255,0.040) !important;
      border: 1px solid rgba(255,255,255,0.060) !important;
      border-radius: 14px !important;
      color: var(--tg-text) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.035) !important;
      gap: 10px;
    }
    #popup-card .hq-stat-card > span:first-child,
    #popup-card .popup-stat > span:first-child,
    #popup-card .popup-stat label {
      color: var(--tg-muted) !important;
      font-size: 12px !important;
      font-weight: 650 !important;
      line-height: 1.25;
    }
    #popup-card .hq-stat-card .val,
    #popup-card .popup-stat .val,
    #popup-card .hq-stat-card > span:last-child,
    #popup-card .popup-stat > span:last-child {
      color: var(--tg-text) !important;
      font-size: 13px !important;
      font-weight: 780 !important;
      text-align: right;
    }
    #popup-card .hq-stat-card .val [style*="FFD700"],
    #popup-card [style*="FFD700"] {
      color: var(--tg-gold) !important;
    }
    #popup-card .hq-stat-card [style*="D500F9"],
    #popup-card [style*="D500F9"] {
      color: #B58CFF !important;
    }

    #popup-card [style*="background:#252538"],
    #popup-card [style*="background: #252538"] {
      background: rgba(255,255,255,0.040) !important;
      border: 1px solid rgba(255,255,255,0.060) !important;
      border-radius: 14px !important;
    }
    #popup-card [style*="background:#222"],
    #popup-card [style*="background: #222"],
    #popup-card .hp-bar-container,
    #popup-card .hp-bar-bg,
    #popup-card .pp-hp-bar {
      background: rgba(255,255,255,0.085) !important;
      border-radius: 999px !important;
      overflow: hidden;
    }
    #popup-card .hp-bar-fill,
    #popup-card .pp-hp-fill {
      border-radius: 999px !important;
    }
    #popup-card .popup-hp-live {
      background: rgba(255,255,255,0.040);
      border: 1px solid rgba(255,255,255,0.060);
      border-radius: 14px;
      padding: 10px 12px;
    }
    #popup-card .building-hpbar {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      min-width: 132px;
    }
    #popup-card .building-hp-track,
    #popup-card .popup-hp-live .hp-bar-bg {
      flex: 1;
      height: 9px !important;
      min-width: 44px;
      border-radius: 999px !important;
      background: rgba(255,255,255,0.085) !important;
      overflow: hidden;
    }
    #popup-card .building-hp-fill,
    #popup-card .popup-hp-live .hp-bar-fill {
      height: 100%;
      border-radius: 999px !important;
      transition: width .22s var(--tg-ease);
      box-shadow: 0 0 14px color-mix(in srgb, currentColor 32%, transparent);
    }
    #popup-card .building-hp-text,
    #popup-card .popup-hp-live #popup-target-hp-text {
      min-width: 62px;
      color: var(--tg-text) !important;
      font-size: 12px !important;
      font-weight: 780;
      text-align: right;
      font-variant-numeric: tabular-nums;
    }
    #popup-card .hq-stat-card:has(.building-hpbar) {
      align-items: stretch !important;
      flex-direction: column;
      gap: 7px;
    }
    #popup-card .hq-stat-card:has(.building-hpbar) > span:last-child,
    #popup-card .hq-stat-card:has(.building-hpbar) .val {
      width: 100%;
      text-align: left !important;
    }
    #popup-card .hq-stat-card:has(.building-hpbar) .building-hpbar {
      min-width: 0;
    }

    #popup-card [data-popup-btn],
    #popup-card .hq-btn,
    #popup-card .hq-coll-btn,
    #popup-card .popup-btn,
    #popup-card .btn,
    #popup-card button:not(.popup-close):not(.item-sheet-tab) {
      min-height: 42px !important;
      border-radius: 14px !important;
      border: 1px solid rgba(var(--popup-accent-rgb),0.30) !important;
      background: rgba(var(--popup-accent-rgb),0.14) !important;
      color: var(--popup-accent) !important;
      font-size: 14px !important;
      font-weight: 780 !important;
      box-shadow: none !important;
      transition:
        transform var(--tg-motion-fast) var(--tg-ease),
        background var(--tg-motion-fast) var(--tg-ease),
        border-color var(--tg-motion-fast) var(--tg-ease),
        opacity var(--tg-motion-fast) var(--tg-ease);
    }
    #popup-card [data-popup-btn]:active,
    #popup-card .hq-btn:active,
    #popup-card .hq-coll-btn:active,
    #popup-card .popup-btn:active,
    #popup-card .btn:active,
    #popup-card button:not(.popup-close):not(.item-sheet-tab):active {
      transform: scale(0.975);
      background: rgba(var(--popup-accent-rgb),0.20) !important;
      opacity: 1 !important;
    }
    #popup-card [data-popup-btn][disabled],
    #popup-card .hq-btn:disabled,
    #popup-card .hq-coll-btn:disabled,
    #popup-card button:disabled {
      opacity: 0.42 !important;
      color: var(--tg-muted) !important;
      border-color: rgba(255,255,255,0.07) !important;
      background: rgba(255,255,255,0.035) !important;
      transform: none !important;
    }
    #popup-card [style*="#f44336"],
    #popup-card [style*="f44336"],
    #popup-card .hq-btn.red,
    #popup-card .danger {
      --popup-accent: var(--tg-danger);
      --popup-accent-rgb: 255,69,58;
      color: var(--tg-danger) !important;
      border-color: rgba(255,69,58,0.32) !important;
      background: rgba(255,69,58,0.12) !important;
    }
    #popup-card [style*="#2196f3"],
    #popup-card [style*="2196f3"],
    #popup-card .hq-btn.blue,
    #popup-card .primary,
    #popup-card .yellow {
      color: var(--tg-blue) !important;
      border-color: rgba(var(--tg-blue-rgb),0.32) !important;
      background: rgba(var(--tg-blue-rgb),0.13) !important;
    }
    #popup-card.popup-card-item .item-level-btn,
    #popup-card.popup-card-item .item-reroll-btn,
    #popup-card.popup-card-item .item-ascend-btn {
      color: var(--tg-text) !important;
      border-color: rgba(255,255,255,0.12) !important;
      background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.045)) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.055) !important;
    }
    #popup-card.popup-card-item .item-level-btn.can-afford,
    #popup-card.popup-card-item .item-reroll-btn.can-afford,
    #popup-card.popup-card-item .item-ascend-btn.can-afford {
      color: #fff !important;
      border-color: rgba(255,255,255,0.19) !important;
      background: linear-gradient(180deg, rgba(255,255,255,0.105), rgba(255,255,255,0.062)) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 18px rgba(0,0,0,0.14) !important;
    }
    #popup-card.popup-card-item .item-level-btn.disassemble {
      color: var(--tg-text) !important;
      border-color: rgba(255,255,255,0.12) !important;
      background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.045)) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.055) !important;
    }
    #popup-card.popup-card-item .item-level-btn.disassemble:not(:disabled) {
      color: #fff !important;
      border-color: rgba(255,255,255,0.19) !important;
      background: linear-gradient(180deg, rgba(255,255,255,0.105), rgba(255,255,255,0.062)) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 18px rgba(0,0,0,0.14) !important;
    }

    #popup-card.popup-card-mine .mine-pop-handle {
      margin: -2px -12px 2px !important;
      min-height: 0 !important;
      padding: 0 0 2px !important;
      gap: 0;
      border-bottom: 0 !important;
    }
    #popup-card.popup-card-mine .mine-pop-bar {
      width: 42px;
      height: 4px;
      border-radius: 999px;
      background: rgba(255,255,255,0.24);
    }
    #popup-card.popup-card-mine .mine-pop-hint {
      display: none;
      color: rgba(255,255,255,0.34) !important;
      font-size: 8px !important;
      font-weight: 780;
      letter-spacing: 0;
      text-transform: none;
    }
    #popup-card.popup-card-mine > div:nth-child(2) {
      min-height: 28px;
      padding-bottom: 2px;
      border-bottom: 0;
    }
    #popup-card.popup-card-mine > div:nth-child(2) > div:first-child {
      padding: 0;
      color: var(--tg-text) !important;
      font-size: 16px !important;
      font-weight: 780 !important;
      line-height: 1.2;
    }
    #popup-card.popup-card-mine .mine-pop-summary {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 4px;
      margin-top: 4px;
    }
    #popup-card.popup-card-mine #popup-stats.mine-pop-summary {
      gap: 4px !important;
      margin-top: 4px !important;
    }
    #popup-card.popup-card-mine .mine-pop-line {
      min-height: 34px;
      padding: 5px 8px;
      border-radius: 12px;
      background: rgba(255,255,255,0.042);
      border: 1px solid rgba(255,255,255,0.060);
      display: grid;
      grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
      gap: 8px;
      align-items: center;
      min-width: 0;
    }
    #popup-card.popup-card-mine .mine-pop-status-line {
      grid-template-columns: minmax(0, 1fr);
      color: rgba(255,255,255,0.72);
      font-size: 11px;
      font-weight: 760;
    }
    #popup-card.popup-card-mine .mine-pop-metric {
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
    }
    #popup-card.popup-card-mine .mine-pop-metric + .mine-pop-metric {
      padding-left: 8px;
      border-left: 1px solid rgba(255,255,255,0.055);
    }
    #popup-card.popup-card-mine .mine-pop-metric-label {
      color: rgba(255,255,255,0.46);
      font-size: 9.5px;
      font-weight: 760;
      line-height: 1.2;
      white-space: nowrap;
      flex: 0 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #popup-card.popup-card-mine .mine-pop-metric-value {
      color: var(--tg-text);
      font-size: 12.5px;
      font-weight: 850;
      line-height: 1.2;
      white-space: nowrap;
      text-align: right;
      overflow: hidden;
      text-overflow: ellipsis;
      font-variant-numeric: tabular-nums;
    }
    #popup-card.popup-card-mine .mine-clan-bonus-card {
      border-radius: 14px;
      border: 1px solid rgba(213,0,249,0.24);
      background: rgba(213,0,249,0.08);
      padding: 9px 10px;
      display: grid;
      gap: 7px;
    }
    #popup-card.popup-card-mine .mine-clan-bonus-title {
      color: #fff;
      font-size: 12px;
      font-weight: 850;
      line-height: 1.25;
    }
    #popup-card.popup-card-mine .mine-clan-bonus-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      color: rgba(255,255,255,0.72);
      font-size: 12px;
      font-weight: 760;
      line-height: 1.25;
    }
    #popup-card.popup-card-mine .mine-clan-bonus-row b {
      color: #F0A6FF;
      font-size: 13px;
      font-weight: 900;
      white-space: nowrap;
    }
    #popup-card.popup-card-mine .mine-pop-chip {
      min-height: 42px;
      padding: 7px 8px;
      border-radius: 13px;
      background: rgba(255,255,255,0.045);
      border: 1px solid rgba(255,255,255,0.065);
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 2px;
      min-width: 0;
    }
    #popup-card.popup-card-mine .mine-pop-chip-label {
      color: rgba(255,255,255,0.42);
      font-size: 10px;
      font-weight: 720;
      line-height: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #popup-card.popup-card-mine .mine-pop-chip-value {
      color: var(--tg-text);
      font-size: 13px;
      font-weight: 820;
      line-height: 1.12;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #popup-card.popup-card-mine .mine-pop-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-top: 6px;
    }
    #popup-card.popup-card-mine .mine-pop-actions button {
      min-height: 36px !important;
      padding: 7px 10px !important;
      border-radius: 13px !important;
      font-size: 13px !important;
      line-height: 1.1;
      white-space: nowrap;
    }
    #popup-card.popup-card-mine .mine-pop-actions button:first-child {
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #popup-card.popup-card-mine .mine-pop-extra {
      margin-top: 6px;
    }
    #popup-card.popup-card-mine .mine-pop-extra .mine-pop-heat-wrap {
      margin-bottom: 8px;
    }
    #popup-card.popup-card-mine .mine-pop-extra-inner > .mine-pop-heat-wrap {
      background: transparent !important;
      border: 0 !important;
      border-radius: 0 !important;
    }
    #popup-card.popup-card-mine .mine-pop-extra-inner > div {
      background: rgba(255,255,255,0.040) !important;
      border: 1px solid rgba(255,255,255,0.060);
      border-radius: 16px !important;
    }
    #popup-card.popup-card-mine .mine-cores-grid {
      gap: 8px !important;
    }
    #popup-card.popup-card-mine .core-slot {
      border-radius: 12px !important;
      background: rgba(255,255,255,0.045) !important;
      border: 1px solid rgba(255,255,255,0.065) !important;
    }
    #popup-card.popup-card-mine .core-slot.empty {
      border-style: dashed !important;
      color: rgba(255,255,255,0.25);
    }
    #popup-card.popup-card-mine .core-slot.installed {
      border-color: rgba(var(--popup-accent-rgb),0.28) !important;
      background: rgba(var(--popup-accent-rgb),0.09) !important;
    }

    #popup-card .building-cores-btn,
    #popup-card .hq-collector-card,
    #popup-card .hq-boost-card,
    #popup-card .hq-roadmap-card {
      background: rgba(255,255,255,0.040) !important;
      border: 1px solid rgba(255,255,255,0.060) !important;
      border-radius: 16px !important;
      box-shadow: none !important;
    }
    #popup-card .hq-collector-card {
      padding: 12px !important;
    }
    #popup-card .hq-coll-btn.active {
      color: var(--tg-success) !important;
      border-color: rgba(52,199,89,0.32) !important;
      background: rgba(52,199,89,0.12) !important;
    }

    /* Telegram UI v1.5 - non-mine building sheets
       HQ / collector / fire truck share one system; mine drawer stays isolated. */
    #popup-card.popup-card-building:not(.popup-card-mine) {
      max-height: min(82dvh, calc(100dvh - 8px), 720px);
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 12px 14px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
      background:
        radial-gradient(circle at 18% 0%, rgba(var(--popup-accent-rgb),0.22), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0) 150px),
        var(--tg-surface) !important;
    }
    #popup-card.popup-card-building:not(.popup-card-mine)::before {
      margin: -1px auto 10px;
      width: 42px;
      height: 4px;
      background: rgba(255,255,255,0.20);
    }
    #popup-card.popup-card-building:not(.popup-card-mine) > div:first-child {
      min-height: 62px;
      margin: 0 0 10px !important;
      padding: 12px 12px !important;
      border: 1px solid rgba(var(--popup-accent-rgb),0.16) !important;
      border-radius: 18px !important;
      background:
        linear-gradient(135deg, rgba(var(--popup-accent-rgb),0.15), rgba(255,255,255,0.035)),
        rgba(255,255,255,0.035) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    }
    #popup-card.popup-card-building:not(.popup-card-mine) > div:first-child > div:first-child > span:first-child {
      width: 42px;
      height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 14px;
      background: rgba(var(--popup-accent-rgb),0.12);
      border: 1px solid rgba(var(--popup-accent-rgb),0.20);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    }
    #popup-card.popup-card-building:not(.popup-card-mine) .popup-close {
      width: 34px !important;
      height: 34px !important;
      border-radius: 50% !important;
      color: var(--tg-muted) !important;
    }
    #popup-card.popup-card-building:not(.popup-card-mine) #popup-stats,
    #popup-card.popup-card-building:not(.popup-card-mine) > div[style*="flex-direction:column"] {
      gap: 8px !important;
    }
    #popup-card.popup-card-building:not(.popup-card-mine) .hq-stat-card,
    #popup-card.popup-card-building:not(.popup-card-mine) .popup-stat {
      min-height: 48px;
      border-radius: 16px !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.050), rgba(255,255,255,0.025)),
        var(--tg-surface-2) !important;
      border-color: rgba(255,255,255,0.070) !important;
    }
    #popup-card.popup-card-building:not(.popup-card-mine) .building-cores-btn,
    #popup-card.popup-card-building:not(.popup-card-mine) .hq-collector-card,
    #popup-card.popup-card-building:not(.popup-card-mine) .hq-boost-card,
    #popup-card.popup-card-building:not(.popup-card-mine) .hq-roadmap-card {
      margin-top: 10px !important;
      border-radius: 18px !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.026)),
        var(--tg-surface-2) !important;
      border-color: rgba(255,255,255,0.075) !important;
    }
    #popup-card.popup-card-building:not(.popup-card-mine) [style*="border:2px dashed #333"] {
      border-radius: 16px !important;
      background: rgba(255,255,255,0.045) !important;
      border-color: rgba(255,255,255,0.075) !important;
    }
    #popup-card.popup-card-building:not(.popup-card-mine) .coll-progress {
      height: 8px !important;
      border-radius: 999px !important;
      background: rgba(255,255,255,0.075) !important;
    }
    #popup-card.popup-card-building:not(.popup-card-mine)[data-building-kind="hq"] {
      --popup-accent: var(--tg-blue);
      --popup-accent-rgb: var(--tg-blue-rgb);
    }
    #popup-card.popup-card-building:not(.popup-card-mine)[data-building-kind="collector"] {
      --popup-accent: #34C759;
      --popup-accent-rgb: 52,199,89;
    }
    #popup-card.popup-card-building:not(.popup-card-mine)[data-building-kind="firetruck"] {
      --popup-accent: #FF453A;
      --popup-accent-rgb: 255,69,58;
    }
    #popup-card.popup-card-building:not(.popup-card-mine)[data-building-kind="clan_hq"] {
      --popup-accent: var(--tg-blue);
      --popup-accent-rgb: var(--tg-blue-rgb);
    }
    #popup-card.popup-card-mine.popup-card-clan-hq {
      --popup-accent: var(--tg-blue);
      --popup-accent-rgb: var(--tg-blue-rgb);
    }
    #popup-card.popup-card-mine.popup-card-clan-hq .clan-hq-mine-title {
      color: var(--tg-text);
      font-size: 16px;
      font-weight: 820;
      line-height: 1.16;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #popup-card.popup-card-mine.popup-card-clan-hq .clan-hq-mine-subtitle {
      color: rgba(255,255,255,0.44);
      font-size: 10.5px;
      font-weight: 720;
      line-height: 1.15;
      margin-top: 1px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #popup-card.popup-card-mine.popup-card-clan-hq .clan-hq-influence-card {
      border-color: rgba(var(--tg-blue-rgb),0.24);
      background: rgba(var(--tg-blue-rgb),0.08);
    }
    #popup-card.popup-card-mine.popup-card-clan-hq .clan-hq-influence-raw {
      display: grid;
      gap: 6px;
      color: rgba(255,255,255,0.72);
      font-size: 12px;
      font-weight: 730;
      line-height: 1.25;
    }
    #popup-card.popup-card-mine.popup-card-clan-hq .clan-hq-influence-raw * {
      max-width: 100%;
    }
    #popup-card.popup-card-mine.popup-card-clan-hq .clan-hq-equipment-card {
      border-color: rgba(var(--tg-blue-rgb),0.11) !important;
    }
    #popup-card.popup-card-mine.popup-card-clan-hq .clan-hq-equipment-open {
      width: 100%;
      min-height: 38px !important;
      padding: 8px 10px !important;
      border-radius: 13px !important;
      font-size: 13px !important;
      line-height: 1.1;
      white-space: nowrap;
    }
    #popup-card.popup-card-mine.popup-card-clan-hq .mine-pop-actions .mine-pop-action-full {
      grid-column: 1 / -1;
      width: 100%;
    }
    #popup-card.popup-card-building:not(.popup-card-mine)[data-building-state="burning"] {
      --popup-accent: #FF9F0A;
      --popup-accent-rgb: 255,159,10;
    }

    /* Telegram UI v1.7 - shared world entity sheets */
    #popup-card.popup-card-entity,
    #popup-card.popup-card-monument {
      max-height: min(78vh, 620px);
      padding: 12px 14px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
      background:
        radial-gradient(circle at 18% 0%, rgba(var(--popup-accent-rgb),0.20), transparent 38%),
        linear-gradient(180deg, rgba(255,255,255,0.044), rgba(255,255,255,0) 150px),
        var(--tg-surface) !important;
    }
    #popup-card.popup-card-entity::before,
    #popup-card.popup-card-monument::before {
      content: '';
      display: block;
      width: 42px;
      height: 4px;
      border-radius: 999px;
      background: rgba(255,255,255,0.20);
      margin: -1px auto 10px;
    }
    #popup-card.popup-card-entity > div:first-child,
    #popup-card.popup-card-monument > div:first-child {
      min-height: 58px;
      margin: 0 0 10px !important;
      padding: 11px 12px !important;
      border: 1px solid rgba(var(--popup-accent-rgb),0.16) !important;
      border-radius: 18px !important;
      background:
        linear-gradient(135deg, rgba(var(--popup-accent-rgb),0.14), rgba(255,255,255,0.035)),
        rgba(255,255,255,0.032) !important;
    }
    #popup-card.popup-card-entity #popup-stats,
    #popup-card.popup-card-monument #popup-stats,
    #popup-card.popup-card-entity > div[style*="flex-direction:column"],
    #popup-card.popup-card-monument > div[style*="flex-direction:column"] {
      gap: 8px !important;
    }
    #popup-card.popup-card-entity .hq-stat-card,
    #popup-card.popup-card-monument .hq-stat-card {
      min-height: 48px;
      border-radius: 16px !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.050), rgba(255,255,255,0.024)),
        var(--tg-surface-2) !important;
      border-color: rgba(255,255,255,0.070) !important;
    }
    #popup-card .entity-hpbar .building-hp-track {
      height: 8px !important;
      background: rgba(255,255,255,0.080) !important;
    }
    #popup-card.popup-card-monument .monument-objective,
    #popup-card.popup-card-entity .monument-objective {
      display: grid;
      grid-template-columns: 48px 1fr;
      gap: 10px;
      align-items: center;
      color: var(--tg-text);
    }
    #popup-card.popup-card-monument .monument-objective-icon,
    #popup-card.popup-card-entity .monument-objective-icon {
      width: 48px;
      height: 48px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(var(--popup-accent-rgb),0.13);
      border: 1px solid rgba(var(--popup-accent-rgb),0.22);
      font-size: 26px;
    }
    #popup-card.popup-card-monument .monument-objective-copy,
    #popup-card.popup-card-entity .monument-objective-copy {
      min-width: 0;
      color: var(--tg-muted);
      font-size: 12px;
      line-height: 1.35;
    }
    #popup-card.popup-card-ground-loot-compact {
      width: 100vw !important;
      max-width: none !important;
      max-height: min(30vh, 220px) !important;
      padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
      border: 1px solid var(--tg-border-strong) !important;
      border-left: 0 !important;
      border-right: 0 !important;
      border-bottom: 0 !important;
      border-radius: 18px 18px 0 0 !important;
      overflow: hidden !important;
    }
    #popup-card.popup-card-ground-loot-compact::before {
      width: 32px;
      height: 3px;
      margin-bottom: 7px;
    }
    #popup-card.popup-card-ground-loot-compact #popup-stats {
      gap: 0 !important;
    }
    #popup-card.popup-card-ground-loot-compact .monument-loot-compact-view {
      min-height: 54px;
      padding: 7px 12px;
      border-radius: 12px !important;
      background: rgba(255,255,255,0.045);
      border: 1px solid rgba(255,255,255,0.075);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #popup-card.popup-card-ground-loot-compact .monument-loot-compact-main {
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }
    #popup-card.popup-card-ground-loot-compact .monument-loot-compact-icon {
      width: 34px;
      height: 34px;
      flex: 0 0 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      line-height: 1;
    }
    #popup-card.popup-card-ground-loot-compact .monument-loot-compact-copy {
      min-width: 0;
    }
    #popup-card.popup-card-ground-loot-compact .monument-loot-compact-name {
      color: #fff;
      font-size: 17px;
      font-weight: 850;
      line-height: 1.1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #popup-card.popup-card-ground-loot-compact .monument-loot-compact-rarity {
      color: #FFD60A;
      font-size: 12px;
      font-weight: 720;
      line-height: 1.1;
      margin-top: 3px;
    }
    #popup-card.popup-card-ground-loot-compact > div[style*="flex-direction:column"] {
      gap: 0 !important;
      margin-top: 8px !important;
    }
    #popup-card.popup-card-ground-loot-compact [data-popup-btn] {
      min-height: 42px !important;
      padding: 8px 10px !important;
      border-radius: 13px !important;
      border: 1px solid rgba(255,214,10,0.42) !important;
      background: rgba(255,214,10,0.12) !important;
      color: #FFD60A !important;
      font-size: 15px !important;
      font-weight: 850 !important;
    }
    #popup-card.popup-card-ground-loot-compact .popup-btn-icon-only {
      flex: 0 0 44px !important;
      width: 44px !important;
      max-width: 44px !important;
      border-color: rgba(255,255,255,0.16) !important;
      background: rgba(255,255,255,0.075) !important;
      color: rgba(255,255,255,0.72) !important;
      font-size: 24px !important;
      line-height: 1 !important;
    }

    #popup-card .player-popup {
      padding: 2px 0 0;
    }
    #popup-card .player-popup-avatar {
      width: 48px !important;
      height: 48px !important;
      border-radius: 16px !important;
      background: rgba(var(--tg-blue-rgb),0.10) !important;
      border: 1px solid rgba(var(--tg-blue-rgb),0.22) !important;
    }
    #popup-card .player-popup-name {
      font-size: 16px !important;
      font-weight: 780 !important;
    }
    #popup-card .player-popup-btns {
      gap: 8px !important;
      margin-top: 12px;
    }

    /* Telegram UI v1.6 - fixed combat sheets and expandable player target */
    #popup-card.popup-card-combat {
      --popup-accent: var(--tg-danger);
      --popup-accent-rgb: 255,69,58;
      --combat-sheet-h: 130px;
      --combat-head-h: 28px;
      --combat-meta-h: 16px;
      --combat-action-h: 58px;
      height: calc(var(--combat-sheet-h) + env(safe-area-inset-bottom,0px));
      max-height: calc(var(--combat-sheet-h) + env(safe-area-inset-bottom,0px));
      padding: 7px 12px calc(10px + env(safe-area-inset-bottom,0px)) !important;
      display: grid;
      grid-template-rows: var(--combat-head-h) var(--combat-meta-h) var(--combat-action-h);
      gap: 4px;
      overflow: hidden;
    }
    #popup-card.popup-card-combat.popup-card-combat-no-meta {
      --combat-sheet-h: 112px;
      grid-template-rows: var(--combat-head-h) var(--combat-action-h);
    }
    #popup-overlay.combat-mode {
      pointer-events: none !important;
    }
    #popup-overlay.combat-mode #popup-card.popup-card-combat {
      box-sizing: border-box;
      width: min(calc(100vw - 16px), 480px) !important;
      height: calc(var(--combat-sheet-h) + env(safe-area-inset-bottom,0px)) !important;
      min-height: calc(var(--combat-sheet-h) + env(safe-area-inset-bottom,0px)) !important;
      max-height: calc(var(--combat-sheet-h) + env(safe-area-inset-bottom,0px)) !important;
      max-width: 480px !important;
      overflow: hidden !important;
      padding: 7px 12px calc(10px + env(safe-area-inset-bottom,0px)) !important;
      transition: transform var(--tg-motion-base) var(--tg-ease), opacity var(--tg-motion-fast) var(--tg-ease) !important;
    }
    #popup-card.popup-card-combat::before,
    #popup-card.popup-card-player::before {
      content: '';
      display: block;
      width: 42px;
      height: 4px;
      border-radius: 999px;
      background: rgba(255,255,255,0.20);
      margin: -3px auto 0;
      grid-row: 1;
      position: absolute;
      top: 5px;
      left: 50%;
      transform: translateX(-50%);
    }
    .combat-popup-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-height: var(--combat-head-h, 30px);
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      grid-row: 1;
    }
    #popup-card.popup-card-combat > .combat-popup-head {
      min-height: var(--combat-head-h) !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
    }
    .combat-popup-title {
      min-width: 0;
      color: var(--tg-text);
      font-size: 16px;
      font-weight: 820;
      line-height: 1.16;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .combat-popup-mid {
      min-height: 0;
      height: var(--combat-meta-h);
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      grid-row: 2;
    }
    #popup-card.popup-card-combat.popup-card-combat-no-meta .combat-popup-mid-empty {
      display: none;
    }
    #popup-card.popup-card-combat .combat-popup-mid:empty::before {
      content: '';
      display: block;
      height: 1px;
    }
    #popup-card.popup-card-combat .popup-hp-live {
      height: var(--combat-meta-h);
      padding: 0 2px !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      gap: 6px !important;
    }
    #popup-card.popup-card-combat .popup-hp-live > span:first-child {
      min-width: 18px !important;
      color: rgba(255,255,255,0.48) !important;
      font-size: 10px !important;
      font-weight: 800;
    }
    #popup-card.popup-card-combat .popup-hp-live .hp-bar-bg {
      height: 7px !important;
      min-width: 52px;
    }
    #popup-card.popup-card-combat .popup-hp-live #popup-target-hp-text {
      min-width: 54px !important;
      font-size: 11px !important;
      font-weight: 780;
    }
    .combat-popup-extra {
      max-height: 18px;
      overflow: hidden;
      color: var(--tg-muted);
      font-size: 11px;
      line-height: 1.25;
    }
    .combat-popup-action,
    .player-popup-action {
      height: var(--combat-action-h, 58px);
      min-height: var(--combat-action-h, 58px);
      display: flex;
      align-items: stretch;
      grid-row: 3;
    }
    #popup-card.popup-card-combat.popup-card-combat-no-meta .combat-popup-action {
      grid-row: 2;
    }
    #popup-card .combat-popup-action .btn-attack-universal,
    #popup-card .player-popup-action .btn-attack-universal {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      height: var(--combat-action-h, 58px) !important;
      min-height: var(--combat-action-h, 58px) !important;
      border-radius: 14px !important;
      font-size: 16px !important;
      font-weight: 900 !important;
      color: #fff !important;
      background: linear-gradient(135deg, #FF5A52, #D9231F) !important;
      box-shadow: 0 10px 22px rgba(255,69,58,0.24), inset 0 1px 0 rgba(255,255,255,0.22) !important;
      text-shadow: 0 1px 2px rgba(0,0,0,0.45);
      letter-spacing: 0 !important;
    }
    #popup-card .btn-attack-universal .attack-btn-label {
      position: relative;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 0;
    }
    #popup-card .combat-popup-action .btn-attack-universal:disabled,
    #popup-card .player-popup-action .btn-attack-universal:disabled {
      background: rgba(255,255,255,0.055) !important;
      color: rgba(255,255,255,0.68) !important;
      border: 1px solid rgba(255,255,255,0.070) !important;
      box-shadow: none !important;
      opacity: 1 !important;
      text-shadow: none;
    }
    #popup-card .combat-popup-action .btn-attack-universal .popup-atk-cd,
    #popup-card .player-popup-action .btn-attack-universal .popup-atk-cd {
      z-index: 1;
      background: rgba(0,0,0,0.34) !important;
    }
    #popup-card.popup-card-player {
      height: 146px;
      max-height: 146px;
      padding: 10px 12px calc(12px + env(safe-area-inset-bottom,0px)) !important;
      overflow: hidden;
      transition:
        height var(--tg-motion-base) var(--tg-ease),
        max-height var(--tg-motion-base) var(--tg-ease);
    }
    #popup-card.popup-card-player.popup-card-player-expanded {
      height: min(72vh, 520px);
      max-height: min(72vh, 520px);
      overflow-y: auto;
    }
    .player-target-drawer {
      display: grid;
      grid-template-rows: 28px 32px 48px;
      gap: 6px;
      height: 100%;
      min-height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
    }
    #popup-card.popup-card-player-expanded .player-target-drawer {
      grid-template-rows: 28px 32px 48px 1fr;
    }
    .player-drawer-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-height: 28px;
    }
    .player-drawer-main {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    .player-drawer-summary {
      min-height: 32px;
      display: grid;
      grid-template-columns: 32px 1fr;
      align-items: center;
      gap: 10px;
      min-width: 0;
      overflow: hidden;
    }
    .player-drawer-meta {
      min-width: 0;
    }
    #popup-card .player-drawer-head .player-popup-name,
    #popup-card .player-drawer-summary .player-popup-level {
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #popup-card .player-drawer-summary .player-popup-avatar {
      width: 32px !important;
      height: 32px !important;
      border-radius: 12px !important;
      font-size: 22px !important;
    }
    #popup-card .player-drawer-summary .player-popup-hp {
      margin: 4px 0 0 !important;
      gap: 6px !important;
    }
    .player-drawer-extra {
      min-height: 0;
      display: none;
      overflow: hidden;
      opacity: 0;
      transition: opacity var(--tg-motion-fast) var(--tg-ease);
    }
    #popup-card.popup-card-player-expanded .player-drawer-extra {
      display: block;
      opacity: 1;
      overflow: visible;
    }
    .player-drawer-card {
      margin-top: 8px;
      padding: 10px 12px;
      border-radius: 16px;
      background: rgba(255,255,255,0.045);
      border: 1px solid rgba(255,255,255,0.070);
    }
    .player-drawer-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 8px;
    }
    .player-drawer-actions .btn-profile,
    .player-drawer-actions .report-warn-btn {
      min-height: 42px !important;
      border-radius: 14px !important;
      background: rgba(var(--tg-blue-rgb),0.12) !important;
      border: 1px solid rgba(var(--tg-blue-rgb),0.22) !important;
      color: var(--tg-blue) !important;
      font-size: 13px !important;
      font-weight: 780 !important;
    }

    /* Market Telegram UI polish CSS is lazy-loaded with market-panels. */

    /* Telegram UI v1.7 - item system pass
       Shared item cells for inventory, market listing, craft inventory, and item sheets. */
    .inv-cell {
      --item-accent: #8E8E93;
      --item-accent-rgb: 142,142,147;
      border-radius: 15px !important;
      border: 1px solid rgba(var(--item-accent-rgb),0.34) !important;
      background:
        radial-gradient(circle at 50% -24%, rgba(var(--item-accent-rgb),0.20), transparent 54%),
        linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)),
        var(--tg-surface-2) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.055),
        0 1px 0 rgba(0,0,0,0.18);
      overflow: hidden;
      isolation: isolate;
      transform-origin: center;
      transition:
        transform var(--tg-motion-fast) var(--tg-ease),
        border-color var(--tg-motion-fast) var(--tg-ease),
        background var(--tg-motion-fast) var(--tg-ease),
        opacity var(--tg-motion-fast) var(--tg-ease);
    }
    .inv-cell.rarity-common { --item-accent:#8E8E93; --item-accent-rgb:142,142,147; }
    .inv-cell.rarity-uncommon { --item-accent:#34C759; --item-accent-rgb:52,199,89; }
    .inv-cell.rarity-rare { --item-accent:var(--tg-blue); --item-accent-rgb:var(--tg-blue-rgb); }
    .inv-cell.rarity-epic { --item-accent:#AF72FF; --item-accent-rgb:175,114,255; }
    .inv-cell.rarity-mythic { --item-accent:#FF3B8A; --item-accent-rgb:255,59,138; }
    .inv-cell.rarity-legendary { --item-accent:#FFD65A; --item-accent-rgb:255,214,90; animation:none !important; }
    .inv-cell:active { transform: scale(0.965); opacity: 1 !important; }
    .inv-cell.dimmed { opacity: 0.28 !important; filter: saturate(0.55); }
    .inv-cell.used { opacity: 0.22 !important; transform: scale(0.96); filter: grayscale(0.4); }
    .inv-cell.inv-cell-empty {
      opacity: 0.34;
      border-style: dashed !important;
      background: rgba(255,255,255,0.025) !important;
      box-shadow: none;
    }
    .inv-cell.selected {
      border-color: rgba(255,214,90,0.86) !important;
      background:
        radial-gradient(circle at 50% -20%, rgba(255,214,90,0.24), transparent 58%),
        rgba(255,214,90,0.10) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 0 0 2px rgba(255,214,90,0.22);
    }
    .inv-cell.selected::after,
    #profile-modal .inv-cell.selected::after {
      content: '✓';
      top: 6px;
      left: 6px;
      right: auto;
      bottom: auto;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #FFD65A;
      background: rgba(15,17,21,0.82);
      border: 1px solid rgba(255,214,90,0.72);
      font-size: 11px;
      font-weight: 900;
      box-shadow:
        0 0 0 2px rgba(15,17,21,0.72),
        0 0 12px rgba(255,214,90,0.22);
    }
    .inv-cell.equipped:not(.selected)::after,
    #profile-modal .inv-cell.equipped:not(.selected)::after {
      content: '';
      top: 7px;
      left: 7px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--tg-success);
      box-shadow: 0 0 0 3px rgba(52,199,89,0.16);
    }
    .inv-icon-shell {
      width: 62%;
      aspect-ratio: 1;
      border-radius: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: 0;
      box-shadow: none;
      z-index: 1;
    }
    .inv-emoji {
      font-size: 28px;
      line-height: 1;
      filter: drop-shadow(0 3px 8px rgba(0,0,0,0.42));
    }
    .inv-rarity-strip {
      display: none;
    }
    .inv-cell .inv-lvl,
    .craft-cell .craft-lv-badge {
      top: 5px !important;
      right: 5px !important;
      bottom: auto !important;
      min-width: 0;
      height: auto;
      padding: 0;
      border-radius: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: rgba(255,255,255,0.58) !important;
      background: transparent;
      border: 0;
      font-size: 8px !important;
      font-weight: 760 !important;
      line-height: 1 !important;
      text-shadow: 0 1px 2px rgba(0,0,0,0.58) !important;
      box-shadow: none;
      z-index: 2;
    }
    .inv-cell .special-qty {
      position:absolute;
      right:5px;
      top:5px;
      z-index:2;
      color:rgba(255,255,255,0.72);
      font-size:9px;
      font-weight:900;
      line-height:1;
      text-shadow:0 1px 3px rgba(0,0,0,0.70);
    }
    .special-empty {
      grid-column:1/-1;
      width:100%;
    }
    .char-equip-slot .inv-lvl {
      position: absolute !important;
      top: 5px !important;
      right: 6px !important;
      bottom: auto !important;
      color: rgba(255,255,255,0.60) !important;
      font-size: 8px !important;
      font-weight: 760 !important;
      line-height: 1 !important;
      text-shadow: 0 1px 2px rgba(0,0,0,0.55) !important;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      padding: 0 !important;
      min-width: 0 !important;
      height: auto !important;
      z-index: 2;
    }
    .inv-cell .inv-plus,
    .craft-cell .craft-plus-badge {
      left: 0 !important;
      right: 0 !important;
      top: auto !important;
      bottom: 5px !important;
      min-width: 0;
      height: auto;
      padding: 0 !important;
      border-radius: 0 !important;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      color: #FFD65A !important;
      background: transparent !important;
      font-size: 9px !important;
      font-weight: 900 !important;
      letter-spacing: 0 !important;
      line-height: 1 !important;
      text-shadow: 0 1px 3px rgba(0,0,0,0.65) !important;
      box-shadow: none !important;
      z-index: 2;
    }
    .char-equip-slot .inv-plus {
      position: absolute !important;
      left: 0 !important;
      right: 0 !important;
      top: auto !important;
      bottom: 4px !important;
      display: inline-flex;
      justify-content: center;
      color: #FFD65A !important;
      font-size: 9px !important;
      font-weight: 900 !important;
      line-height: 1 !important;
      text-shadow: 0 1px 3px rgba(0,0,0,0.70) !important;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      padding: 0 !important;
      min-width: 0 !important;
      height: auto !important;
      z-index: 2;
    }
    .char-equip-slot .equip-slot-icon {
      font-size: 32px;
      line-height: 1;
      filter: drop-shadow(0 4px 10px rgba(0,0,0,0.46));
      transform: translateY(-1px);
    }
    .char-equip-slot.filled {
      border-width: 1px !important;
      border-radius: 16px !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    }

    #popup-card.popup-card-item {
      --popup-accent: var(--tg-blue);
      --popup-accent-rgb: var(--tg-blue-rgb);
      padding-top: 14px !important;
      background:
        radial-gradient(circle at 50% -110px, rgba(var(--popup-accent-rgb),0.18), transparent 260px),
        var(--tg-surface) !important;
    }
    #popup-card.popup-card-item > div:first-child {
      min-height: 42px;
      margin-bottom: 8px !important;
      padding-bottom: 8px;
    }
    #popup-card.popup-card-item > div:first-child > div > div:first-child {
      font-size: 15px !important;
      max-width: min(68vw, 300px);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .item-sheet-hero {
      display: grid;
      grid-template-columns: 76px minmax(0, 1fr);
      align-items: center;
      gap: 12px;
      padding: 14px;
      margin: 0 0 8px;
      border-radius: 18px;
      border: 1px solid rgba(var(--popup-accent-rgb),0.22);
      background:
        radial-gradient(circle at 18% 0%, rgba(var(--popup-accent-rgb),0.34), transparent 42%),
        linear-gradient(135deg, rgba(var(--popup-accent-rgb),0.10), rgba(255,255,255,0.03) 56%),
        rgba(255,255,255,0.038);
    }
    .item-sheet-icon {
      width: 72px;
      height: 72px;
      border-radius: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      background:
        radial-gradient(circle at 50% 20%, rgba(var(--popup-accent-rgb),0.26), transparent 62%),
        rgba(0,0,0,0.20);
      border: 1px solid rgba(var(--popup-accent-rgb),0.25);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 24px rgba(0,0,0,0.24);
    }
    .item-sheet-icon span {
      font-size: 42px;
      filter: drop-shadow(0 6px 12px rgba(0,0,0,0.44));
    }
    .item-sheet-main { min-width:0; display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
    .item-sheet-topline { width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
    .item-sheet-name {
      color: var(--tg-text);
      font-size: 20px;
      font-weight: 900;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 1.08;
    }
    .item-sheet-plus {
      flex:0 0 auto;
      color: #FFD65A;
      background: rgba(255,214,90,0.11);
      border: 1px solid rgba(255,214,90,0.30);
      border-radius: 999px;
      padding: 3px 8px;
      font-size: 12px;
      font-weight: 950;
      line-height: 1;
      text-shadow: 0 1px 3px rgba(0,0,0,0.62);
      box-shadow: 0 0 14px rgba(255,214,90,0.14);
    }
    .item-sheet-meta {
      color: var(--tg-muted);
      font-size: 12px;
      font-weight: 720;
    }
    .item-sheet-chips { display:flex; flex-wrap:wrap; gap:5px; margin-top:2px; }
    .item-sheet-chip,
    .item-sheet-stat {
      margin-top: 2px;
      color: var(--tg-blue);
      font-size: 12px;
      font-weight: 760;
      padding: 5px 9px;
      border-radius: 999px;
      background: rgba(var(--tg-blue-rgb),0.10);
      border: 1px solid rgba(var(--tg-blue-rgb),0.18);
    }
    .item-sheet-chip.level { color:#FFD65A; background:rgba(255,214,90,0.10); border-color:rgba(255,214,90,0.24); }
    #popup-card.popup-card-item .hq-stat-card {
      min-height: 38px;
      border-radius: 14px;
      background: rgba(255,255,255,0.038);
    }
    #popup-card.popup-card-item [data-popup-btn] {
      min-height: 46px !important;
      border-radius: 15px !important;
      width: 100% !important;
      border-color: rgba(255,255,255,0.12) !important;
      background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.045)) !important;
      color: var(--tg-text) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.055) !important;
    }
    #popup-card.popup-card-item [data-popup-btn]:active {
      background: linear-gradient(180deg, rgba(255,255,255,0.115), rgba(255,255,255,0.070)) !important;
      border-color: rgba(255,255,255,0.18) !important;
      opacity: 1 !important;
    }
    #popup-card.popup-card-item [data-popup-btn][disabled] {
      color: var(--tg-muted) !important;
      border-color: rgba(255,255,255,0.07) !important;
      background: rgba(255,255,255,0.035) !important;
      box-shadow: none !important;
    }

    #craft-overlay {
      background:
        linear-gradient(180deg, rgba(var(--tg-blue-rgb),0.07), rgba(var(--tg-blue-rgb),0) 240px),
        var(--tg-bg) !important;
      color: var(--tg-text);
    }
    #craft-header {
      min-height: 58px;
      padding: calc(10px + env(safe-area-inset-top,0px)) 16px 12px !important;
      border-bottom: var(--tg-hairline) !important;
      background: rgba(15,17,21,0.94);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }
    #craft-header h2 {
      font-size: 18px !important;
      letter-spacing: 0 !important;
      color: var(--tg-text);
    }
    #craft-close {
      position: static !important;
      top: auto !important;
      right: auto !important;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: var(--tg-surface-2) !important;
      border: var(--tg-hairline) !important;
      color: var(--tg-muted) !important;
      font-size: 17px !important;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 !important;
    }
    .craft-forge {
      padding: 12px 14px 10px !important;
      background:
        radial-gradient(circle at 50% -70px, rgba(var(--tg-blue-rgb),0.18), transparent 220px),
        transparent !important;
      border-bottom: var(--tg-hairline);
    }
    .craft-forge-panel {
      position: relative;
      overflow: hidden;
      border-radius: 22px;
      padding: 13px;
      background:
        radial-gradient(circle at 50% 8px, rgba(var(--tg-blue-rgb),0.10), transparent 155px),
        linear-gradient(180deg, rgba(255,255,255,0.064), rgba(255,255,255,0.026)),
        var(--tg-surface);
      border: 1px solid rgba(255,255,255,0.085);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 10px 28px rgba(0,0,0,0.24);
    }
    .craft-forge-panel::before { display: none; }
    .craft-forge-panel.ready {
      border-color: rgba(var(--tg-blue-rgb),0.26);
      background:
        radial-gradient(circle at 50% -40px, rgba(var(--tg-blue-rgb),0.18), transparent 190px),
        linear-gradient(180deg, rgba(255,255,255,0.070), rgba(255,255,255,0.028)),
        var(--tg-surface);
    }
    .craft-forge-panel.picked {
      animation: craftPickedPulse .34s var(--tg-ease);
    }
    @keyframes craftPickedPulse {
      0% { transform: scale(1); box-shadow: 0 18px 48px rgba(0,0,0,0.34); }
      45% { transform: scale(1.012); box-shadow: 0 0 0 2px rgba(255,214,90,0.22), 0 22px 56px rgba(0,0,0,0.38); }
      100% { transform: scale(1); box-shadow: 0 18px 48px rgba(0,0,0,0.34); }
    }
    .craft-forge-top {
      display: grid;
      grid-template-columns: 66px minmax(0,1fr) 66px;
      align-items: center;
      gap: 10px;
      position: relative;
      z-index: 1;
    }
    .craft-stage-steps {
      display: flex;
      justify-content: center;
      gap: 8px;
      position: relative;
      z-index: 1;
      margin-bottom: 12px;
    }
    .craft-stage-step {
      min-width: 0;
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.060);
      background: rgba(255,255,255,0.035);
      color: var(--tg-muted);
      font-size: 12px;
      font-weight: 900;
      line-height: 1;
    }
    .craft-stage-step.active {
      color: #fff;
      border-color: rgba(var(--tg-blue-rgb),0.28);
      background: rgba(var(--tg-blue-rgb),0.14);
    }
    .craft-stage-step.done {
      color: var(--tg-blue);
      border-color: rgba(var(--tg-blue-rgb),0.20);
      background: rgba(var(--tg-blue-rgb),0.08);
    }
    .craft-forge-node {
      min-width: 0;
      display: grid;
      justify-items: center;
      gap: 6px;
    }
    .craft-node-label {
      max-width: 100%;
      color: var(--tg-muted);
      font-size: 10px;
      font-weight: 820;
      line-height: 1;
      text-transform: uppercase;
      letter-spacing: .02em;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .craft-forge-core {
      min-width: 0;
      display: grid;
      justify-items: center;
      gap: 6px;
      color: var(--tg-text);
      text-align: center;
    }
    .craft-core-orb {
      width: 46px;
      height: 46px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--tg-blue);
      font-size: 20px;
      position: relative;
      background:
        radial-gradient(circle at 50% 45%, rgba(255,255,255,0.12), rgba(var(--tg-blue-rgb),0.14) 48%, rgba(var(--tg-blue-rgb),0.04) 68%),
        rgba(255,255,255,0.035);
      border: 1px solid rgba(var(--tg-blue-rgb),0.22);
      box-shadow: 0 0 0 6px rgba(var(--tg-blue-rgb),0.045), 0 0 24px rgba(var(--tg-blue-rgb),0.12);
    }
    .craft-forge-panel.ready .craft-core-orb {
      color: #7DF9FF;
      border-color: rgba(125,249,255,0.38);
      box-shadow: 0 0 0 6px rgba(var(--tg-blue-rgb),0.055), 0 0 30px rgba(125,249,255,0.18);
    }
    .craft-core-orb::before {
      content: "";
      position: absolute;
      inset: -5px;
      border-radius: inherit;
      border: 1px solid rgba(var(--tg-blue-rgb),0.16);
      border-top-color: rgba(125,249,255,0.44);
      animation: craftForgeSpin 2.6s linear infinite;
    }
    @keyframes craftForgeSpin {
      to { transform: rotate(360deg); }
    }
    .craft-core-title {
      font-size: 12px;
      font-weight: 850;
      line-height: 1.15;
    }
    .craft-core-sub {
      color: var(--tg-muted);
      font-size: 11px;
      font-weight: 700;
      line-height: 1.1;
    }
    .craft-forge-progress {
      width: min(100%, 116px);
      height: 5px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(255,255,255,0.060);
      border: 1px solid rgba(255,255,255,0.050);
    }
    .craft-forge-progress span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--tg-blue), #7DF9FF);
      transition: width var(--tg-motion) var(--tg-ease);
    }
    .craft-recipe-card {
      position: relative;
      z-index: 1;
      margin-top: 12px;
      display: grid;
      grid-template-columns: minmax(0,1fr) auto;
      align-items: center;
      gap: 10px;
      padding: 10px;
      border-radius: 16px;
      background: rgba(255,255,255,0.040);
      border: 1px solid rgba(255,255,255,0.065);
    }
    .craft-recipe-title {
      color: var(--tg-text);
      font-size: 12px;
      font-weight: 850;
      line-height: 1.2;
    }
    .craft-recipe-sub {
      color: var(--tg-muted);
      font-size: 11px;
      font-weight: 700;
      line-height: 1.25;
      margin-top: 3px;
    }
    .craft-recipe-count {
      min-width: 52px;
      min-height: 34px;
      padding: 0 9px;
      border-radius: 13px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--tg-blue);
      background: rgba(var(--tg-blue-rgb),0.10);
      border: 1px solid rgba(var(--tg-blue-rgb),0.20);
      font-size: 13px;
      font-weight: 900;
      font-variant-numeric: tabular-nums;
    }
    .craft-forge-slots {
      display: flex !important;
      min-height: 78px;
      justify-content: flex-start !important;
      align-items: center !important;
      gap: 9px !important;
      overflow-x: auto;
      padding-bottom: 2px;
      -webkit-overflow-scrolling: touch;
    }
    .craft-cell,
    .craft-result-cell {
      --craft-accent: var(--tg-blue);
      --craft-accent-rgb: var(--tg-blue-rgb);
      width: 56px !important;
      height: 56px !important;
      min-width: 56px !important;
      min-height: 56px !important;
      flex: 0 0 56px !important;
      border-radius: 16px !important;
      border: 1px dashed rgba(255,255,255,0.14) !important;
      background: var(--tg-surface-2) !important;
      color: var(--tg-muted) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .craft-cell.target {
      width: 64px !important;
      height: 64px !important;
      min-width: 64px !important;
      min-height: 64px !important;
      flex-basis: 64px !important;
      border-radius: 18px !important;
    }
    .craft-cell.filled {
      border-style: solid !important;
      color: var(--tg-text) !important;
      background:
        radial-gradient(circle at 50% -24%, rgba(var(--craft-accent-rgb),0.20), transparent 58%),
        linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)),
        var(--tg-surface-2) !important;
      border-color: rgba(var(--craft-accent-rgb),0.42) !important;
    }
    .craft-cell.filled span:first-child,
    .craft-result-icon {
      font-size: 30px !important;
      filter: drop-shadow(0 4px 10px rgba(0,0,0,0.44));
    }
    .craft-arrow {
      color: var(--tg-muted) !important;
      font-size: 16px !important;
    }
    .craft-result-cell {
      border-style: solid !important;
      border-color: rgba(var(--craft-accent-rgb),0.34) !important;
      color: var(--craft-accent) !important;
      position: relative;
    }
    .craft-result-cell .craft-plus-badge {
      position: absolute !important;
      left: 0 !important;
      right: 0 !important;
      top: auto !important;
      bottom: 5px !important;
      min-width: 0 !important;
      height: auto !important;
      padding: 0 !important;
      border-radius: 0 !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      color: #FFD65A !important;
      background: transparent !important;
      font-size: 9px !important;
      font-weight: 900 !important;
      letter-spacing: 0 !important;
      line-height: 1 !important;
      text-shadow: 0 1px 3px rgba(0,0,0,0.70) !important;
      box-shadow: none !important;
      z-index: 2;
    }
    .craft-cell.material-mini {
      width: 38px !important;
      height: 38px !important;
      min-width: 38px !important;
      min-height: 38px !important;
      flex-basis: 38px !important;
      border-radius: 12px !important;
      font-size: 19px !important;
    }
    .craft-cell.material-mini.filled span:first-child {
      font-size: 20px !important;
    }
    .craft-material-rail {
      margin-top: 12px;
      padding-top: 10px;
      border-top: 1px solid rgba(255,255,255,0.065);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .craft-material-rail::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
    .craft-flow-notice {
      margin-top: 10px;
      padding: 9px 10px;
      border-radius: 13px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.045);
      color: var(--tg-text);
      font-size: 12px;
      font-weight: 780;
      line-height: 1.35;
      text-align: center;
    }
    .craft-flow-notice.ready {
      border-color: rgba(255,214,90,0.34);
      background: rgba(255,214,90,0.10);
      color: #fff;
    }
    .craft-inv-label .craft-label-title {
      display:block;
      color:#fff;
      font-size:13px;
      font-weight:900;
      line-height:1.25;
    }
    .craft-inv-label .craft-label-sub {
      display:block;
      margin-top:2px;
      color:var(--tg-muted);
      font-size:12px;
      font-weight:720;
      line-height:1.3;
    }
    .craft-forge-hint,
    .craft-refund-line {
      margin-top: 10px;
      color: var(--tg-muted);
      font-size: 12px;
      font-weight: 700;
      text-align: center;
    }
    .craft-refund-line {
      color: #AF72FF;
    }
    .craft-inv-label {
      padding: 12px 16px 6px !important;
      border-top: 0 !important;
      color: var(--tg-muted) !important;
      letter-spacing: 0 !important;
      text-transform: none !important;
      font-size: 13px !important;
    }
    .craft-inv-grid {
      --craft-card-size: clamp(70px, calc((100vw - 56px) / 4), 86px);
      display: grid !important;
      grid-template-columns: repeat(4, 1fr) !important;
      grid-auto-rows: var(--craft-card-size) !important;
      align-items: stretch !important;
      justify-items: stretch !important;
      gap: 8px !important;
      padding: 8px 16px calc(92px + env(safe-area-inset-bottom,0px)) !important;
      overflow-y: auto !important;
      position: relative !important;
      align-content: start !important;
    }
    .craft-inv-grid > .inv-cell {
      position: relative !important;
      width: 100% !important;
      min-width: 0 !important;
      height: var(--craft-card-size) !important;
      min-height: var(--craft-card-size) !important;
      aspect-ratio: auto !important;
      display: flex !important;
      align-self: stretch !important;
      justify-self: stretch !important;
    }
    .craft-inv-grid .inv-cell.dimmed {
      opacity: 0.28 !important;
      filter: saturate(0.45) !important;
    }
    .craft-inv-grid .inv-cell.craft-selectable {
      cursor: pointer;
      transition: transform .14s var(--tg-ease), box-shadow .14s var(--tg-ease), border-color .14s var(--tg-ease);
    }
    .craft-inv-grid .inv-cell.craft-selectable:active {
      transform: scale(0.965);
    }
    .craft-inv-grid .inv-cell.craft-selected {
      border-color:#FFD65A !important;
      box-shadow:
        0 0 0 2px rgba(255,214,90,0.24),
        0 0 22px rgba(255,214,90,0.25),
        inset 0 1px 0 rgba(255,255,255,0.10) !important;
    }
    .craft-card-role,
    .craft-card-check {
      position:absolute;
      z-index:8;
      pointer-events:none;
    }
    .craft-card-role {
      left:5px; top:5px; max-width:calc(100% - 10px); padding:2px 5px; border-radius:999px;
      background:rgba(0,0,0,0.50); color:#fff; font-size:8px; font-weight:900; line-height:1.2;
      text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
      border:1px solid rgba(255,255,255,0.12);
    }
    .craft-card-check {
      right:5px; top:5px; width:19px; height:19px; border-radius:999px;
      display:flex; align-items:center; justify-content:center;
      background:#FFD65A; color:#111; font-size:12px; font-weight:950;
      box-shadow:0 4px 10px rgba(0,0,0,0.38);
    }
    /* Telegram UI v1.7.2 - one item grid contract for inventory, craft and market listing. */
    #profile-modal .inventory-grid,
    #inventory-grid.inventory-grid,
    .craft-inv-grid,
    #market-list-inv-grid {
      --item-grid-cell: clamp(64px, calc((100vw - 100px) / 4), 76px);
      grid-template-columns: repeat(4, var(--item-grid-cell)) !important;
      grid-auto-rows: var(--item-grid-cell) !important;
      justify-content: center !important;
      align-content: start !important;
      align-items: stretch !important;
      gap: 10px !important;
    }
    #market-list-inv-grid {
      padding: 8px 0 18px !important;
    }
    .craft-inv-grid {
      padding: 8px 0 calc(92px + env(safe-area-inset-bottom,0px)) !important;
    }
    #profile-modal .inventory-grid > .inv-cell,
    #inventory-grid.inventory-grid > .inv-cell,
    .craft-inv-grid > .inv-cell,
    #market-list-overlay #market-list-inv-grid > .inv-cell,
    #market-list-overlay #market-list-inv-grid > .core-card {
      width: var(--item-grid-cell) !important;
      height: var(--item-grid-cell) !important;
      min-width: var(--item-grid-cell) !important;
      min-height: var(--item-grid-cell) !important;
      aspect-ratio: auto !important;
      align-self: stretch !important;
      justify-self: stretch !important;
    }
    #profile-modal .inventory-grid .inv-cell,
    #inventory-grid.inventory-grid .inv-cell,
    .craft-inv-grid .inv-cell,
    #market-list-overlay .inv-cell {
      border-color: rgba(var(--item-accent-rgb),0.62) !important;
      background:
        radial-gradient(circle at 50% -22%, rgba(var(--item-accent-rgb),0.42), transparent 58%),
        linear-gradient(180deg, rgba(var(--item-accent-rgb),0.115), rgba(255,255,255,0.020) 66%),
        var(--tg-surface-2) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.070),
        0 0 0 1px rgba(var(--item-accent-rgb),0.12),
        0 8px 18px rgba(var(--item-accent-rgb),0.070) !important;
    }
    #profile-modal .inventory-grid .inv-cell.rarity-common,
    #inventory-grid.inventory-grid .inv-cell.rarity-common,
    .craft-inv-grid .inv-cell.rarity-common,
    #market-list-overlay .inv-cell.rarity-common {
      border-color: rgba(174,179,188,0.44) !important;
      background:
        radial-gradient(circle at 50% -22%, rgba(174,179,188,0.24), transparent 58%),
        linear-gradient(180deg, rgba(255,255,255,0.060), rgba(255,255,255,0.018) 66%),
        var(--tg-surface-2) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.055) !important;
    }
    #profile-modal .inventory-grid .inv-cell.rarity-mythic,
    #inventory-grid.inventory-grid .inv-cell.rarity-mythic,
    .craft-inv-grid .inv-cell.rarity-mythic,
    #market-list-overlay .inv-cell.rarity-mythic {
      --item-accent:#FF2D95;
      --item-accent-rgb:255,45,149;
      background:
        radial-gradient(circle at 50% -22%, rgba(255,45,149,0.52), transparent 58%),
        linear-gradient(180deg, rgba(255,45,149,0.155), rgba(255,255,255,0.020) 68%),
        var(--tg-surface-2) !important;
    }
    #profile-modal .inventory-grid .inv-cell.rarity-legendary,
    #inventory-grid.inventory-grid .inv-cell.rarity-legendary,
    .craft-inv-grid .inv-cell.rarity-legendary,
    #market-list-overlay .inv-cell.rarity-legendary {
      --item-accent:#FFC233;
      --item-accent-rgb:255,194,51;
      background:
        radial-gradient(circle at 50% -22%, rgba(255,194,51,0.56), transparent 58%),
        linear-gradient(180deg, rgba(255,194,51,0.160), rgba(255,255,255,0.020) 68%),
        var(--tg-surface-2) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.080),
        0 0 0 1px rgba(255,194,51,0.18),
        0 10px 22px rgba(255,194,51,0.090) !important;
    }
    /* Market compact v2 CSS is lazy-loaded with market-panels. */
    #craft-btn {
      left: 16px !important;
      right: 16px !important;
      bottom: calc(14px + env(safe-area-inset-bottom,0px)) !important;
      width: auto;
      min-height: 52px;
      border-radius: 16px;
      background: var(--tg-blue) !important;
      color: #fff !important;
      box-shadow: 0 12px 26px rgba(var(--tg-blue-rgb),0.28);
      letter-spacing: 0 !important;
    }
    #craft-btn:disabled {
      opacity: 0.46 !important;
      box-shadow: none;
      background: rgba(255,255,255,0.075) !important;
      color: var(--tg-muted) !important;
    }
    #selection-bar {
      left: 14px !important;
      right: 14px !important;
      bottom: calc(12px + env(safe-area-inset-bottom,0px)) !important;
      border-radius: 18px !important;
      border: var(--tg-hairline) !important;
      background: rgba(23,26,32,0.94) !important;
      box-shadow: 0 12px 34px rgba(0,0,0,0.32);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      gap: 12px;
      padding: 10px 12px !important;
    }
    #selection-bar-info {
      min-width: 0;
      color: var(--tg-muted) !important;
      line-height: 1.2;
    }
    #selection-bar-info strong { color: var(--tg-text) !important; }
    #selection-bar > div:last-child {
      flex-shrink: 0;
    }
    #selection-bar .btn {
      min-height: 38px;
      border-radius: 13px;
      border: var(--tg-hairline);
      background: var(--tg-surface-2);
      color: var(--tg-text);
    }
    #selection-bar .btn.danger {
      background: rgba(255,69,58,0.14);
      border-color: rgba(255,69,58,0.26);
      color: var(--tg-danger);
    }

    /* Telegram UI v1.8 - daily rewards and reward feedback. */
    .shop-daily-card {
      border-radius: 18px !important;
      padding: 14px !important;
      background:
        linear-gradient(135deg, rgba(var(--accent-rgb),0.13), rgba(255,255,255,0.030)),
        var(--tg-surface-2) !important;
      border: 1px solid rgba(var(--accent-rgb),0.20) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.045) !important;
    }
    .shop-daily-card::before {
      opacity: 0.16 !important;
    }
    .shop-daily-claim-btn {
      min-height: 44px;
      border-radius: 15px !important;
      background: rgba(var(--accent-rgb),0.13) !important;
      border-color: rgba(var(--accent-rgb),0.26) !important;
      color: #fff !important;
    }
    .shop-daily-claim-btn:disabled {
      color: var(--tg-muted) !important;
      background: rgba(255,255,255,0.055) !important;
      border-color: rgba(255,255,255,0.075) !important;
      opacity: 1 !important;
    }
    #daily-timer {
      color: var(--tg-muted) !important;
      font-weight: 700;
    }
    .reward-card {
      min-height: 54px;
      gap: 10px;
      padding: 10px 11px !important;
      border-left: 0 !important;
      border-radius: 16px !important;
      background: rgba(255,255,255,0.035) !important;
      border: 1px solid rgba(255,255,255,0.060) !important;
    }
    .reward-card.unclaimed {
      background:
        linear-gradient(135deg, rgba(var(--tg-blue-rgb),0.12), rgba(255,255,255,0.025)),
        var(--tg-surface-2) !important;
      border-color: rgba(var(--tg-blue-rgb),0.22) !important;
    }
    .reward-card.claimed {
      opacity: 1 !important;
      background: rgba(52,199,89,0.060) !important;
      border-color: rgba(52,199,89,0.16) !important;
    }
    .reward-card.locked {
      opacity: 0.72 !important;
      background: rgba(255,255,255,0.025) !important;
    }
    .reward-level {
      min-width: 34px !important;
      height: 34px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(var(--tg-blue-rgb),0.12);
      color: var(--tg-blue) !important;
      font-size: 13px !important;
      font-weight: 850 !important;
    }
    .reward-card.claimed .reward-level {
      color: var(--tg-success) !important;
      background: rgba(52,199,89,0.10);
    }
    .reward-icons {
      gap: 5px !important;
    }
    .reward-icon-tag {
      border-radius: 999px !important;
      background: rgba(255,255,255,0.055) !important;
      border: 1px solid rgba(255,255,255,0.060);
      color: var(--tg-text) !important;
      padding: 3px 7px !important;
      font-weight: 720;
    }
    .reward-claim-btn {
      min-height: 34px !important;
      padding: 7px 10px !important;
      border-radius: 12px !important;
      background: var(--tg-blue) !important;
      border-color: var(--tg-blue) !important;
      color: #fff !important;
      white-space: nowrap;
    }
    .reward-claimed-label {
      color: var(--tg-success) !important;
      font-size: 13px !important;
      font-weight: 820;
    }
    .tg-reward-overlay {
      background: rgba(0,0,0,0.62) !important;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .tg-reward-overlay > div[style*="text-align:center"],
    .tg-reward-overlay > div[style*="position:relative"] {
      width: min(90vw, 360px) !important;
      padding: 18px !important;
      border-radius: 24px !important;
      background:
        radial-gradient(circle at 50% -36px, rgba(var(--tg-blue-rgb),0.24), transparent 58%),
        var(--tg-surface) !important;
      border: 1px solid rgba(255,255,255,0.10) !important;
      box-shadow: 0 20px 54px rgba(0,0,0,0.42);
    }
    .tg-reward-overlay button:not(#reward-close-x) {
      min-height: 48px !important;
      border-radius: 16px !important;
      background: var(--tg-blue) !important;
      color: #fff !important;
      letter-spacing: 0 !important;
      box-shadow: 0 12px 26px rgba(var(--tg-blue-rgb),0.25) !important;
    }
    .tg-reward-overlay #reward-close-x {
      width: 34px !important;
      height: 34px !important;
      min-height: 34px !important;
      border-radius: 50% !important;
      background: rgba(255,255,255,0.055) !important;
      border: var(--tg-hairline) !important;
      color: var(--tg-muted) !important;
      box-shadow: none !important;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .tg-reward-overlay.reward-reveal-overlay {
      background: rgba(0,0,0,0.58) !important;
      backdrop-filter: blur(10px) !important;
      -webkit-backdrop-filter: blur(10px) !important;
    }
    .reward-reveal-card {
      width: min(92vw, 374px);
      padding: 16px;
      border-radius: 26px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.062), rgba(255,255,255,0.026)),
        var(--tg-surface);
      border: 1px solid rgba(255,255,255,0.10);
      box-shadow: 0 18px 42px rgba(0,0,0,0.42);
      text-align: left;
      position: relative;
      overflow: visible;
    }
    .reward-reveal-top {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
    }
    .reward-reveal-icon {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent !important;
      border: 0 !important;
      font-size: 28px;
      flex: 0 0 52px;
      position: relative;
      isolation: isolate;
      overflow: visible;
    }
    .reward-reveal-icon::before {
      content: "";
      position: absolute;
      width: 94px;
      height: 94px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 999px;
      background: radial-gradient(circle, rgba(var(--tg-blue-rgb),0.18) 0%, rgba(var(--tg-blue-rgb),0.10) 34%, rgba(var(--tg-blue-rgb),0.035) 56%, rgba(var(--tg-blue-rgb),0) 78%);
      z-index: -1;
      pointer-events: none;
    }
    .reward-reveal-title {
      color: var(--tg-text);
      font-size: 18px;
      font-weight: 880;
      line-height: 1.16;
      letter-spacing: 0;
    }
    .reward-reveal-sub {
      color: var(--tg-muted);
      font-size: 12px;
      font-weight: 650;
      line-height: 1.35;
      margin-top: 4px;
    }
    .reward-reveal-list {
      display: grid;
      gap: 7px;
      margin: 0 0 14px;
    }
    .reward-reveal-row {
      min-height: 42px;
      display: grid;
      grid-template-columns: 32px minmax(0,1fr) auto;
      align-items: center;
      gap: 9px;
      padding: 8px 10px;
      border-radius: 15px;
      background: rgba(255,255,255,0.044);
      border: 1px solid rgba(255,255,255,0.064);
    }
    .reward-reveal-row-emoji {
      width: 32px;
      height: 32px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,0.052);
      font-size: 18px;
    }
    .reward-reveal-row-label {
      color: var(--tg-text);
      font-size: 13px;
      font-weight: 790;
      min-width: 0;
      overflow-wrap: anywhere;
    }
    .reward-reveal-row-value {
      color: var(--tg-blue);
      font-size: 14px;
      font-weight: 880;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
    .tg-reward-overlay .reward-reveal-btn {
      width: 100%;
      min-height: 44px !important;
      border-radius: 15px !important;
      border: 1px solid rgba(var(--tg-blue-rgb),0.30) !important;
      background: rgba(var(--tg-blue-rgb),0.15) !important;
      color: var(--tg-blue) !important;
      font-size: 14px !important;
      font-weight: 850 !important;
      box-shadow: none !important;
    }
    .reward-reveal-card .reward-reveal-btn:active {
      transform: scale(0.98);
      background: rgba(var(--tg-blue-rgb),0.22) !important;
    }
    .reward-prize-overlay {
      background: rgba(0,0,0,0.62) !important;
      backdrop-filter: blur(10px) !important;
      -webkit-backdrop-filter: blur(10px) !important;
    }
    .reward-prize-card {
      width: min(92vw, 348px);
      padding: 14px;
      border-radius: 22px;
      background:
        radial-gradient(circle at 26px 14px, rgba(var(--reveal-rgb, var(--tg-blue-rgb)),0.20), rgba(var(--reveal-rgb, var(--tg-blue-rgb)),0) 132px),
        linear-gradient(180deg, rgba(255,255,255,0.068), rgba(255,255,255,0.026)),
        var(--tg-surface);
      border: 1px solid rgba(255,255,255,0.10);
      box-shadow: 0 18px 42px rgba(0,0,0,0.42);
      text-align: center;
      overflow: visible;
      position: relative;
    }
    .reward-prize-card::before {
      content: "";
      position: absolute;
      left: 18px;
      right: 18px;
      top: 0;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent, rgba(var(--reveal-rgb, var(--tg-blue-rgb)),0.70), transparent);
    }
    .reward-prize-card::after {
      content: "";
      position: absolute;
      width: 62px;
      height: 62px;
      right: 18px;
      top: 16px;
      border-radius: 999px;
      background:
        radial-gradient(circle at 50% 50%, rgba(var(--reveal-rgb, var(--tg-blue-rgb)),0.22), rgba(var(--reveal-rgb, var(--tg-blue-rgb)),0) 66%);
      pointer-events: none;
    }
    .reward-prize-hero {
      display: grid;
      grid-template-columns: 92px minmax(0,1fr);
      align-items: center;
      gap: 12px;
      position: relative;
      z-index: 1;
      text-align: left;
    }
    .reward-prize-copy {
      min-width: 0;
    }
    .reward-prize-kicker {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
      min-height: 22px;
      margin-bottom: 7px;
      padding: 3px 9px;
      border-radius: 999px;
      background: rgba(255,255,255,0.050);
      border: 1px solid rgba(255,255,255,0.070);
      color: var(--tg-muted);
      font-size: 10px;
      font-weight: 820;
      letter-spacing: .02em;
      text-transform: uppercase;
    }
    .reward-prize-icon-wrap {
      width: 92px;
      height: 92px;
      margin: 0;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      isolation: isolate;
    }
    .reward-prize-icon-wrap::before {
      content: "";
      position: absolute;
      width: 112px;
      height: 112px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 999px;
      background: radial-gradient(circle, rgba(var(--reveal-rgb, var(--tg-blue-rgb)),0.22) 0%, rgba(var(--reveal-rgb, var(--tg-blue-rgb)),0.10) 42%, rgba(var(--reveal-rgb, var(--tg-blue-rgb)),0) 76%);
      z-index: -1;
    }
    .reward-prize-icon-wrap::after {
      content: "";
      position: absolute;
      width: 70px;
      height: 70px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 999px;
      background: rgba(255,255,255,0.042);
      border: 1px solid rgba(var(--reveal-rgb, var(--tg-blue-rgb)),0.18);
      z-index: -1;
    }
    .reward-prize-emoji {
      font-size: 62px;
      line-height: 1;
      animation: bounceIn 0.42s ease;
      position: relative;
      z-index: 1;
    }
    .reward-prize-spark {
      position: absolute;
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: var(--reveal-color, var(--tg-blue));
      box-shadow: 0 0 18px rgba(var(--reveal-rgb, var(--tg-blue-rgb)),0.70);
      opacity: .92;
      animation: prizeSpark 1.65s ease-in-out infinite;
    }
    .reward-prize-spark:nth-child(1) {
      left: 16px;
      top: 28px;
    }
    .reward-prize-spark:nth-child(2) {
      right: 14px;
      top: 48px;
      width: 5px;
      height: 5px;
      animation-delay: .22s;
    }
    .reward-prize-spark:nth-child(3) {
      left: 36px;
      bottom: 18px;
      width: 4px;
      height: 4px;
      animation-delay: .44s;
    }
    @keyframes prizeSpark {
      0%, 100% { transform: translateY(0) scale(.82); opacity: .45; }
      50% { transform: translateY(-5px) scale(1.16); opacity: 1; }
    }
    .reward-prize-name {
      color: var(--tg-text);
      position: relative;
      z-index: 1;
      font-size: 18px;
      font-weight: 880;
      line-height: 1.22;
      margin-top: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .reward-prize-stars {
      color: #ffd65a;
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 2px;
      width: fit-content;
      max-width: 100%;
      padding: 3px 7px;
      border-radius: 999px;
      background: rgba(255,214,90,0.10);
      border: 1px solid rgba(255,214,90,0.18);
      font-family: Arial, sans-serif;
      font-size: 11px;
      font-weight: 900;
      line-height: 1;
      margin-top: 6px;
      letter-spacing: 1px;
      overflow: hidden;
    }
    .reward-prize-rarity {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
      min-height: 28px;
      margin-top: 8px;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(var(--reveal-rgb, var(--tg-blue-rgb)),0.15);
      border: 1px solid rgba(var(--reveal-rgb, var(--tg-blue-rgb)),0.32);
      color: var(--reveal-color, var(--tg-blue));
      font-size: 12px;
      font-weight: 820;
    }
    .reward-prize-stats {
      display: grid;
      position: relative;
      z-index: 1;
      gap: 6px;
      margin-top: 12px;
      text-align: left;
    }
    .reward-prize-stat {
      min-height: 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 6px 10px;
      border-radius: 13px;
      background: rgba(255,255,255,0.044);
      border: 1px solid rgba(255,255,255,0.064);
      color: var(--tg-text);
      font-size: 12px;
      font-weight: 760;
    }
    .reward-prize-stat span:first-child {
      color: var(--tg-muted);
      font-weight: 680;
    }
    .reward-prize-stat span:last-child {
      color: var(--reveal-color, var(--tg-blue));
      font-weight: 850;
      font-variant-numeric: tabular-nums;
    }
    .reward-prize-bonus {
      margin-top: 8px;
      position: relative;
      z-index: 1;
      padding: 9px 10px;
      border-radius: 15px;
      background: rgba(var(--reveal-rgb, var(--tg-blue-rgb)),0.10);
      border: 1px solid rgba(var(--reveal-rgb, var(--tg-blue-rgb)),0.24);
      text-align: left;
    }
    .reward-prize-bonus-title {
      color: var(--reveal-color, var(--tg-blue));
      font-size: 12px;
      font-weight: 850;
      margin-bottom: 4px;
    }
    .reward-prize-bonus-text {
      color: var(--tg-muted);
      font-size: 12px;
      font-weight: 650;
      line-height: 1.35;
    }
    .tg-reward-overlay .reward-prize-btn {
      width: 100%;
      position: relative;
      z-index: 1;
      max-width: none;
      min-height: 44px !important;
      margin-top: 14px;
      border-radius: 15px !important;
      border: 1px solid rgba(var(--reveal-rgb, var(--tg-blue-rgb)),0.34) !important;
      background: rgba(var(--reveal-rgb, var(--tg-blue-rgb)),0.16) !important;
      color: var(--reveal-color, var(--tg-blue)) !important;
      font-size: 14px !important;
      font-weight: 850 !important;
      box-shadow: none !important;
    }
    .reward-preview-icon {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      animation: bounceIn 0.42s ease;
    }

    /* Telegram UI v1.9 - complete shop pass: catalog, packs, currencies and odds. */
    #shop-modal {
      background:
        radial-gradient(circle at 16% -90px, rgba(var(--tg-blue-rgb),0.18), transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,0.020), rgba(255,255,255,0) 220px),
        var(--tg-bg) !important;
    }
    #shop-header {
      min-height: 84px;
      padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 10px !important;
      background: rgba(15,17,21,0.94) !important;
      border-bottom: 0 !important;
      box-shadow: none !important;
    }
    #shop-header-top {
      gap: 12px !important;
      min-height: 36px;
    }
    #shop-close {
      width: 34px;
      height: 34px;
      padding: 0 !important;
      border-radius: 50% !important;
      background: rgba(255,255,255,0.045) !important;
      border: var(--tg-hairline) !important;
      color: var(--tg-muted) !important;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 17px !important;
    }
    #shop-header h2 {
      color: var(--tg-text) !important;
      font-size: 20px !important;
      font-weight: 860 !important;
      line-height: 1.1;
      text-transform: none !important;
    }
    #shop-header-balances {
      margin: 10px 0 0 46px !important;
      display: flex !important;
      gap: 8px !important;
      flex-wrap: wrap;
      font-size: 13px !important;
    }
    #shop-header-balances span {
      min-height: 30px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,0.045);
      border: 1px solid rgba(255,255,255,0.065);
      color: var(--tg-text);
      font-weight: 760;
    }
    #shop-tabs {
      position: sticky;
      top: 0;
      z-index: 3;
      margin: 0 14px !important;
      padding: 4px !important;
      background: rgba(255,255,255,0.045) !important;
      border: 1px solid rgba(255,255,255,0.065) !important;
      border-radius: 17px !important;
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }
    .shop-tab {
      min-height: 38px !important;
      padding: 0 8px !important;
      border-radius: 13px !important;
      border: 0 !important;
      color: var(--tg-muted) !important;
      font-size: 13px !important;
      font-weight: 800 !important;
      white-space: nowrap;
    }
    .shop-tab.active {
      color: #fff !important;
      background: var(--tg-blue) !important;
      box-shadow: 0 8px 18px rgba(var(--tg-blue-rgb),0.22) !important;
    }
    #shop-body {
      padding: 14px 14px calc(22px + env(safe-area-inset-bottom, 0px)) !important;
      scrollbar-width: none;
    }
    #shop-body::-webkit-scrollbar { width: 0; height: 0; }
    .shop-store-section {
      margin: 0 0 18px !important;
    }
    .shop-store-head {
      margin: 0 2px 10px !important;
      align-items: flex-start !important;
    }
    .shop-store-title {
      color: var(--tg-text) !important;
      font-size: 16px !important;
      font-weight: 850 !important;
      line-height: 1.15;
      letter-spacing: 0 !important;
      text-transform: none !important;
    }
    .shop-store-subtitle {
      color: var(--tg-muted) !important;
      font-size: 12px !important;
      font-weight: 620;
      line-height: 1.35 !important;
      margin-top: 4px !important;
    }
    .shop-boxes-row,
    .shop-product-grid,
    .shop-stars-grid {
      gap: 10px !important;
    }
    .shop-boxes-row {
      grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }
    .shop-product-grid {
      grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }
    .shop-product-grid.single {
      grid-template-columns: 1fr !important;
    }
    .shop-stars-grid {
      grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }
    .shop-box-card,
    .shop-item,
    .shop-item-wide,
    .shop-star-card,
    .shop-daily-card {
      border-radius: 18px !important;
      background:
        radial-gradient(circle at 50% -28px, rgba(var(--accent-rgb),0.20), transparent 56%),
        linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.022)),
        var(--tg-surface-2) !important;
      border: 1px solid rgba(var(--accent-rgb),0.20) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.045) !important;
      overflow: hidden !important;
      transition:
        transform var(--tg-motion-fast) var(--tg-ease),
        border-color var(--tg-motion-fast) var(--tg-ease),
        background var(--tg-motion-fast) var(--tg-ease);
    }
    .shop-box-card::before,
    .shop-item::before,
    .shop-item-wide::before,
    .shop-star-card::before,
    .shop-daily-card::before {
      opacity: 0.12 !important;
    }
    .shop-box-card:active,
    .shop-item:active,
    .shop-item-wide:active,
    .shop-star-card:active,
    .shop-daily-card:active {
      transform: scale(0.982) !important;
      border-color: rgba(var(--accent-rgb),0.34) !important;
    }
    .shop-box-card {
      min-height: 156px !important;
      padding: 13px 10px 10px !important;
      gap: 7px !important;
    }
    .shop-box-card.core-orb {
      grid-column: 1 / -1;
      min-height: 118px !important;
    }
    .shop-box-icon,
    .shop-item-glow {
      width: 50px !important;
      height: 50px !important;
      border-radius: 16px !important;
      background: rgba(var(--accent-rgb),0.12) !important;
      border: 1px solid rgba(var(--accent-rgb),0.24) !important;
      font-size: 27px !important;
      filter: drop-shadow(0 5px 12px rgba(0,0,0,0.30));
    }
    .shop-box-name,
    .shop-item-name,
    .shop-item-wide-name {
      color: var(--tg-text) !important;
      font-weight: 840 !important;
      letter-spacing: 0 !important;
      overflow-wrap: anywhere;
    }
    .shop-box-name,
    .shop-item-name {
      font-size: 13px !important;
      min-height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .shop-box-price,
    .shop-star-price {
      color: var(--tg-blue) !important;
      font-size: 13px !important;
      font-weight: 820 !important;
    }
    .shop-box-open-btn,
    .shop-item-btn,
    .shop-item-wide-btn,
    .shop-star-buy-btn,
    .shop-daily-claim-btn {
      min-height: 38px !important;
      border-radius: 13px !important;
      background: rgba(var(--accent-rgb),0.13) !important;
      border: 1px solid rgba(var(--accent-rgb),0.28) !important;
      color: #fff !important;
      font-size: 13px !important;
      font-weight: 850 !important;
    }
    .shop-box-open-btn:disabled,
    .shop-item-btn:disabled,
    .shop-item-wide-btn:disabled,
    .shop-star-buy-btn:disabled,
    .shop-daily-claim-btn:disabled {
      background: rgba(255,255,255,0.055) !important;
      border-color: rgba(255,255,255,0.075) !important;
      color: var(--tg-muted) !important;
      opacity: 1 !important;
    }
    .shop-box-info-btn,
    .shop-inline-info {
      width: 26px !important;
      height: 26px !important;
      border-radius: 50% !important;
      background: rgba(255,255,255,0.055) !important;
      border: 1px solid rgba(255,255,255,0.080) !important;
      color: var(--tg-muted) !important;
      font-size: 12px !important;
      font-weight: 850 !important;
      font-style: normal !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
    .shop-item {
      min-height: 158px !important;
      padding: 13px 10px 10px !important;
      gap: 7px !important;
    }
    .shop-item-sub {
      min-height: 32px !important;
      color: var(--tg-muted) !important;
      font-size: 11px !important;
      line-height: 1.25 !important;
      font-weight: 650 !important;
    }
    .shop-item-wide {
      min-height: 74px;
      padding: 11px !important;
      gap: 11px !important;
    }
    .shop-item-wide .shop-item-glow {
      width: 48px !important;
      height: 48px !important;
      font-size: 24px !important;
      flex: 0 0 48px;
    }
    .shop-item-wide-info {
      min-width: 0;
    }
    .shop-title-line {
      gap: 6px !important;
    }
    .shop-item-wide-name {
      font-size: 14px !important;
      white-space: normal !important;
      line-height: 1.18 !important;
    }
    .shop-item-wide-sub {
      color: var(--tg-muted) !important;
      font-size: 12px !important;
      line-height: 1.28 !important;
      font-weight: 650 !important;
    }
    .shop-item-wide-btn {
      flex: 0 0 auto;
      padding: 8px 12px !important;
      white-space: nowrap;
    }
    .shop-daily-card {
      padding: 14px !important;
      margin-bottom: 12px !important;
    }
    #shop-tab-diamonds .shop-daily-card > div[style*="display:flex"] {
      gap: 12px !important;
    }
    #shop-tab-diamonds .shop-daily-card [style*="font-size:52px"],
    #shop-tab-diamonds .shop-daily-card [style*="font-size:40px"] {
      filter: drop-shadow(0 6px 14px rgba(0,0,0,0.28)) !important;
    }
    #daily-timer {
      min-height: 17px;
    }
    .shop-star-card {
      min-height: 126px;
      padding: 16px 12px 12px !important;
      overflow: visible !important;
    }
    .shop-star-card .star-badge {
      top: -7px !important;
      border-radius: 999px !important;
      padding: 3px 8px !important;
      box-shadow: 0 7px 16px rgba(0,0,0,0.22);
    }
    .shop-star-diamonds {
      color: var(--tg-text) !important;
      font-size: 20px !important;
      font-weight: 880 !important;
      line-height: 1.15;
    }
    .shop-star-buy-btn {
      margin-top: 10px !important;
      width: 100%;
    }
    .shop-guide-card {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
      padding: 13px;
      background: linear-gradient(180deg, #171922, #11131a);
      border: 1px solid rgba(100,181,246,0.22);
      border-radius: 8px;
      color: #fff;
      text-decoration: none;
      -webkit-tap-highlight-color: transparent;
    }
    .shop-guide-icon {
      width: 42px;
      height: 42px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 42px;
      background: rgba(100,181,246,0.13);
      border: 1px solid rgba(100,181,246,0.24);
      font-size: 22px;
    }
    .shop-guide-copy { flex: 1; min-width: 0; }
    .shop-guide-title { font-size: 14px; font-weight: 800; color: #fff; line-height: 1.2; }
    .shop-guide-sub { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 3px; line-height: 1.3; }
    .shop-guide-arrow { color: rgba(255,255,255,0.55); font-size: 18px; font-weight: 800; }
    #box-odds-popup {
      --box-info-accent: var(--tg-blue);
      --box-info-accent-rgb: var(--tg-blue-rgb);
      padding: 0 !important;
      background: rgba(0,0,0,0.54) !important;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 0 !important;
      box-shadow: none !important;
      border-radius: 0 !important;
      align-items: flex-end !important;
      justify-content: center !important;
    }
    #box-odds-card {
      width: min(100vw, 430px) !important;
      max-width: 430px !important;
      padding: 10px 16px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
      border-radius: 28px 28px 0 0 !important;
      background:
        radial-gradient(circle at 18% -46px, rgba(var(--box-info-accent-rgb),0.22), transparent 58%),
        linear-gradient(180deg, rgba(255,255,255,0.040), rgba(255,255,255,0) 160px),
        var(--tg-surface) !important;
      border: 1px solid rgba(255,255,255,0.11) !important;
      border-bottom: 0 !important;
      box-shadow: 0 -18px 52px rgba(0,0,0,0.46) !important;
      animation: slideUp 0.18s ease-out;
    }
    .box-info-handle {
      width: 54px;
      height: 5px;
      border-radius: 999px;
      background: rgba(255,255,255,0.22);
      margin: 0 auto 14px;
    }
    .box-info-head {
      display: grid;
      grid-template-columns: 52px minmax(0,1fr) 34px;
      gap: 11px;
      align-items: center;
      margin-bottom: 12px;
    }
    .box-info-icon {
      width: 52px;
      height: 52px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(var(--box-info-accent-rgb),0.12);
      border: 1px solid rgba(var(--box-info-accent-rgb),0.23);
      font-size: 27px;
      line-height: 1;
    }
    .box-info-title-block {
      min-width: 0;
    }
    .box-info-title {
      color: var(--tg-text) !important;
      font-size: 22px;
      font-weight: 900;
      line-height: 1.05;
      overflow-wrap: anywhere;
    }
    .box-info-subtitle {
      margin-top: 5px;
      color: var(--tg-muted);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.2;
    }
    .box-info-close {
      width: 34px;
      height: 34px;
      padding: 0 !important;
      border-radius: 50% !important;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,0.055) !important;
      border: 1px solid rgba(255,255,255,0.09) !important;
      color: var(--tg-muted) !important;
      font-size: 20px !important;
      font-weight: 800 !important;
      line-height: 1 !important;
    }
    .box-info-body {
      display: grid;
      gap: 10px;
    }
    .box-info-line,
    .box-info-fact-row {
      min-height: 42px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 9px 0;
      border-top: 1px solid rgba(255,255,255,0.075);
    }
    .box-info-line:first-child,
    .box-info-fact-row:first-child {
      border-top: 0;
    }
    .box-info-label,
    .box-info-fact-row > span {
      color: var(--tg-muted);
      font-size: 14px;
      font-weight: 780;
      white-space: nowrap;
    }
    .box-info-fact-row > strong {
      color: var(--tg-text);
      font-size: 15px;
      font-weight: 880;
      text-align: right;
      overflow-wrap: anywhere;
    }
    .box-info-items {
      display: flex;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 7px;
      min-width: 0;
    }
    .box-info-item-icon {
      width: 29px;
      height: 29px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      background: rgba(255,255,255,0.055);
      border: 1px solid rgba(255,255,255,0.080);
      font-size: 17px;
      line-height: 1;
      flex: 0 0 auto;
    }
    .box-info-section-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-top: 1px;
      color: var(--tg-text);
      font-size: 15px;
      font-weight: 900;
    }
    .box-info-section-title span:last-child {
      color: var(--tg-muted);
      font-size: 14px;
    }
    .box-info-odds-list {
      display: grid;
      gap: 9px;
    }
    .box-info-odds-row {
      display: grid;
      grid-template-columns: 106px minmax(0,1fr) 42px;
      align-items: center;
      gap: 9px;
      min-height: 30px;
      color: var(--tg-text);
      font-size: 13px;
      font-weight: 850;
    }
    .box-info-odds-name {
      color: var(--rarity-color);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .box-info-meter {
      height: 6px;
      border-radius: 999px;
      background: rgba(255,255,255,0.075);
      overflow: hidden;
    }
    .box-info-meter > span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: var(--rarity-color);
    }
    .box-info-odds-pct {
      color: var(--tg-text);
      text-align: right;
      font-size: 14px;
      font-weight: 900;
    }
    .box-info-note {
      color: var(--tg-muted) !important;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.35;
      margin-top: 2px;
    }
    .box-info-ok {
      width: 100%;
      min-height: 48px !important;
      margin-top: 16px !important;
      border-radius: 16px !important;
      background: rgba(var(--tg-blue-rgb),0.15) !important;
      border: 1px solid rgba(var(--tg-blue-rgb),0.32) !important;
      color: #f5fbff !important;
      font-size: 16px !important;
      font-weight: 900 !important;
    }
    #box-open-overlay {
      background: rgba(0,0,0,0.66) !important;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }
    #box-open-overlay .box-anim-icon {
      width: 132px;
      height: 132px;
      border-radius: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background:
        radial-gradient(circle at 50% -20px, rgba(var(--tg-blue-rgb),0.26), transparent 64%),
        var(--tg-surface);
      border: 1px solid rgba(255,255,255,0.10);
      box-shadow: 0 18px 48px rgba(0,0,0,0.42);
      font-size: 70px !important;
    }

    /* Telegram UI v1.9.1 - tighter shop rhythm and purchase feedback. */
    #shop-header {
      min-height: 66px !important;
      padding: calc(9px + env(safe-area-inset-top, 0px)) 14px 8px !important;
      background: rgba(15,17,21,0.98) !important;
      border-bottom: 1px solid rgba(255,255,255,0.045) !important;
    }
    #shop-header-top {
      min-height: 30px !important;
      gap: 9px !important;
    }
    #shop-close {
      width: 30px !important;
      height: 30px !important;
      font-size: 15px !important;
      background: rgba(255,255,255,0.050) !important;
    }
    #shop-header h2 {
      font-size: 18px !important;
      line-height: 1.05 !important;
    }
    #shop-header-balances {
      margin: 5px 0 0 39px !important;
      gap: 6px !important;
      font-size: 12px !important;
      padding: 0 !important;
      background: transparent !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
    }
    #shop-header-balances > span {
      min-height: 24px !important;
      padding: 3px 8px !important;
      gap: 4px !important;
      background: rgba(255,255,255,0.052) !important;
      border: 1px solid rgba(255,255,255,0.070) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
    }
    #shop-header-balances > span > span {
      min-height: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      font-variant-numeric: tabular-nums;
    }
    #shop-tabs {
      margin: 0 12px !important;
      padding: 3px !important;
      background: rgba(20,23,29,0.96) !important;
      border-color: rgba(255,255,255,0.080) !important;
      border-radius: 16px !important;
      box-shadow: 0 12px 22px rgba(3,5,9,0.30) !important;
    }
    #shop-tabs::after {
      content: "";
      position: absolute;
      left: -13px;
      right: -13px;
      bottom: -18px;
      height: 18px;
      pointer-events: none;
      background: linear-gradient(180deg, rgba(10,12,16,0.88), rgba(10,12,16,0));
    }
    .shop-tab {
      min-height: 34px !important;
      font-size: 12px !important;
      border-radius: 12px !important;
    }
    #shop-body {
      padding: 12px 12px calc(22px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .shop-store-section {
      margin-bottom: 14px !important;
    }
    .shop-boxes-row,
    .shop-product-grid,
    .shop-stars-grid {
      gap: 8px !important;
    }
    .shop-box-card,
    .shop-item,
    .shop-star-card {
      border-radius: 16px !important;
    }
    .shop-box-card {
      min-height: 132px !important;
      padding: 10px 8px 9px !important;
      gap: 5px !important;
    }
    .shop-box-card.core-orb {
      min-height: 98px !important;
    }
    .shop-item {
      min-height: 134px !important;
      padding: 10px 8px 9px !important;
      gap: 5px !important;
    }
    .shop-box-icon,
    .shop-item-glow {
      width: 42px !important;
      height: 42px !important;
      border-radius: 14px !important;
      font-size: 23px !important;
      filter: none !important;
    }
    .shop-box-name,
    .shop-item-name {
      min-height: 24px !important;
      font-size: 12px !important;
      line-height: 1.15 !important;
    }
    .shop-item-sub {
      min-height: 26px !important;
      font-size: 10.5px !important;
    }
    .shop-box-open-btn,
    .shop-item-btn,
    .shop-star-buy-btn,
    .shop-daily-claim-btn {
      min-height: 34px !important;
      border-radius: 12px !important;
      font-size: 12px !important;
    }
    .shop-item-wide {
      min-height: 64px !important;
      padding: 9px !important;
      gap: 9px !important;
      border-radius: 16px !important;
    }
    .shop-item-wide .shop-item-glow {
      width: 40px !important;
      height: 40px !important;
      flex-basis: 40px !important;
      font-size: 21px !important;
    }
    .shop-item-wide-name {
      font-size: 13px !important;
    }
    .shop-item-wide-sub {
      font-size: 11px !important;
    }
    .shop-item-wide-btn {
      min-height: 34px !important;
      padding: 7px 10px !important;
      border-radius: 12px !important;
      font-size: 12px !important;
    }
    .shop-star-card {
      min-height: 104px !important;
      padding: 13px 10px 10px !important;
    }
    .shop-star-diamonds {
      font-size: 18px !important;
    }
    .shop-box-info-btn,
    .shop-inline-info {
      width: 22px !important;
      height: 22px !important;
      min-width: 22px !important;
      min-height: 22px !important;
      padding: 0 !important;
      flex: 0 0 22px !important;
      line-height: 1 !important;
      font-family: Arial, sans-serif !important;
      font-size: 11px !important;
      font-weight: 800 !important;
      filter: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      box-shadow: none !important;
    }
    .shop-box-info-btn {
      top: 6px !important;
      right: 6px !important;
    }
    #box-open-overlay .box-anim-icon {
      width: auto !important;
      height: auto !important;
      border-radius: 0 !important;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      font-size: 118px !important;
      filter: drop-shadow(0 18px 34px rgba(0,0,0,0.48));
    }
    .shop-pack-reward-card {
      width: min(92vw, 380px);
      border-radius: 26px;
      padding: 18px;
      background:
        radial-gradient(circle at 50% -42px, rgba(var(--tg-blue-rgb),0.26), transparent 58%),
        var(--tg-surface);
      border: 1px solid rgba(255,255,255,0.10);
      box-shadow: 0 22px 58px rgba(0,0,0,0.48);
      text-align: center;
    }
    .shop-pack-reward-icon {
      font-size: 58px;
      line-height: 1;
      margin-bottom: 10px;
      filter: drop-shadow(0 12px 22px rgba(0,0,0,0.36));
    }
    .shop-pack-reward-title {
      color: var(--tg-text);
      font-size: 18px;
      font-weight: 880;
      line-height: 1.2;
      margin-bottom: 4px;
    }
    .shop-pack-reward-sub {
      color: var(--tg-muted);
      font-size: 12px;
      font-weight: 650;
      line-height: 1.35;
      margin-bottom: 12px;
    }
    .shop-pack-reward-list {
      display: grid;
      gap: 7px;
      margin-bottom: 14px;
    }
    .shop-pack-reward-row {
      min-height: 40px;
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 8px 10px;
      border-radius: 14px;
      background: rgba(255,255,255,0.045);
      border: 1px solid rgba(255,255,255,0.065);
      color: var(--tg-text);
      font-size: 13px;
      font-weight: 760;
      text-align: left;
    }
    .shop-pack-reward-row span:first-child {
      width: 26px;
      text-align: center;
      font-size: 19px;
    }
    .shop-pack-reward-btn {
      width: 100%;
      min-height: 42px;
      border-radius: 14px;
      border: 1px solid rgba(var(--tg-blue-rgb),0.28);
      background: rgba(var(--tg-blue-rgb),0.14);
      color: var(--tg-blue);
      font-size: 14px;
      font-weight: 850;
    }

    /* Telegram UI v1.10 - service overlays: confirms, reports and utility sheets. */
    #diamond-confirm-overlay,
    #sell-confirm-overlay,
    #report-overlay {
      background: rgba(0,0,0,0.66) !important;
      backdrop-filter: blur(14px) !important;
      -webkit-backdrop-filter: blur(14px) !important;
      padding: 16px !important;
    }
    #diamond-confirm-card,
    #sell-confirm-card,
    #report-card {
      width: min(100%, 372px) !important;
      max-width: 372px !important;
      border-radius: 24px !important;
      padding: 16px !important;
      background:
        radial-gradient(circle at 50% -46px, rgba(var(--tg-blue-rgb),0.22), transparent 58%),
        var(--tg-surface) !important;
      border: 1px solid rgba(255,255,255,0.10) !important;
      box-shadow: 0 22px 58px rgba(0,0,0,0.46) !important;
      transform: translate3d(0, 0, 0) scale(1);
      opacity: 1;
      animation: dcPopIn 0.20s var(--tg-ease) !important;
    }
    #diamond-confirm-overlay.is-closing #diamond-confirm-card {
      animation: none !important;
      transform: translate3d(0, 8px, 0) scale(0.96);
      opacity: 0;
      transition:
        transform var(--tg-motion-popup-exit) var(--tg-ease),
        opacity var(--tg-motion-popup-exit) linear;
    }
    #diamond-confirm-card .dc-header {
      min-height: 34px;
      margin-bottom: 8px !important;
      gap: 10px;
    }
    #diamond-confirm-card .dc-title,
    #report-card h3,
    #sell-confirm-card > div:first-child {
      color: var(--tg-text) !important;
      font-size: 17px !important;
      font-weight: 850 !important;
      line-height: 1.2 !important;
      margin-bottom: 10px !important;
    }
    #diamond-confirm-card .dc-subtitle {
      color: var(--tg-muted) !important;
      font-size: 12px !important;
      font-weight: 650 !important;
      line-height: 1.35 !important;
      margin-bottom: 12px !important;
    }
    #diamond-confirm-card .popup-close {
      width: 32px !important;
      height: 32px !important;
      min-height: 32px !important;
      border-radius: 50% !important;
      background: rgba(255,255,255,0.055) !important;
      border: 1px solid rgba(255,255,255,0.075) !important;
      color: var(--tg-muted) !important;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 32px;
    }
    #diamond-confirm-card .dc-cost-card {
      padding: 10px !important;
      gap: 7px !important;
      border-radius: 16px !important;
      background: rgba(255,255,255,0.045) !important;
      border: 1px solid rgba(255,255,255,0.065) !important;
    }
    #diamond-confirm-card .dc-cost-row,
    #diamond-confirm-card .dc-balance-row {
      min-height: 30px;
      gap: 12px;
    }
    #diamond-confirm-card .dc-cost-label,
    #diamond-confirm-card .dc-balance-label {
      color: var(--tg-muted) !important;
      font-size: 12px !important;
      font-weight: 650 !important;
    }
    #diamond-confirm-card .dc-cost-value {
      color: var(--tg-blue) !important;
      font-size: 15px !important;
      font-weight: 850 !important;
      font-variant-numeric: tabular-nums;
    }
    #diamond-confirm-card .dc-balance-value {
      color: var(--tg-text) !important;
      font-size: 13px !important;
      font-weight: 780 !important;
      font-variant-numeric: tabular-nums;
    }
    #diamond-confirm-card .dc-balance-value.dc-insufficient,
    #diamond-confirm-card .dc-error {
      color: var(--tg-danger) !important;
    }
    #diamond-confirm-card .dc-error {
      margin-top: 9px !important;
      font-size: 12px !important;
      font-weight: 700 !important;
    }
    #diamond-confirm-card .dc-actions,
    #sell-confirm-card > div[style*="display:flex"],
    .report-btns {
      display: grid !important;
      grid-template-columns: 1fr 1fr;
      gap: 8px !important;
      margin-top: 14px !important;
    }
    #diamond-confirm-card .dc-btn,
    #sell-confirm-card .btn,
    .report-btns button {
      min-height: 42px !important;
      padding: 10px 12px !important;
      border-radius: 14px !important;
      border: 1px solid rgba(255,255,255,0.075) !important;
      background: rgba(255,255,255,0.055) !important;
      color: var(--tg-text) !important;
      font-size: 13px !important;
      font-weight: 820 !important;
      box-shadow: none !important;
    }
    #diamond-confirm-card .dc-btn-confirm,
    .report-btn-send {
      border-color: rgba(var(--tg-blue-rgb),0.30) !important;
      background: rgba(var(--tg-blue-rgb),0.16) !important;
      color: var(--tg-blue) !important;
    }
    #diamond-confirm-card .dc-btn-confirm:disabled,
    .report-btn-send:disabled {
      background: rgba(255,255,255,0.050) !important;
      border-color: rgba(255,255,255,0.060) !important;
      color: var(--tg-muted) !important;
      opacity: 0.52 !important;
    }
    #sell-confirm-btn,
    .report-btn-cancel {
      border-color: rgba(255,69,58,0.24) !important;
      color: var(--tg-danger) !important;
    }
    .report-btn-send {
      border-color: rgba(255,69,58,0.30) !important;
      background: rgba(255,69,58,0.12) !important;
      color: var(--tg-danger) !important;
    }
    .report-btn-cancel {
      border-color: rgba(255,255,255,0.075) !important;
      color: var(--tg-text) !important;
    }
    #sell-confirm-emoji {
      font-size: 54px !important;
      line-height: 1 !important;
      margin: 2px 0 8px !important;
      filter: drop-shadow(0 10px 22px rgba(0,0,0,0.34));
    }
    #sell-confirm-name {
      color: var(--tg-text) !important;
      font-size: 15px !important;
      font-weight: 850 !important;
      line-height: 1.25 !important;
      margin: 8px 0 4px !important;
    }
    #sell-confirm-price {
      color: var(--tg-blue) !important;
      font-size: 13px !important;
      font-weight: 820 !important;
    }
    #report-card h3 {
      margin: 0 0 12px !important;
    }
    .report-reasons {
      gap: 7px !important;
      margin-bottom: 12px !important;
    }
    .report-reason-btn {
      min-height: 42px !important;
      padding: 9px 11px !important;
      border-radius: 14px !important;
      background: rgba(255,255,255,0.045) !important;
      border: 1px solid rgba(255,255,255,0.065) !important;
      color: var(--tg-text) !important;
      font-size: 13px !important;
      font-weight: 760 !important;
      line-height: 1.2 !important;
    }
    .report-reason-btn:hover,
    .report-reason-btn:active {
      background: rgba(255,255,255,0.070) !important;
    }
    .report-reason-btn.selected {
      background: rgba(255,69,58,0.12) !important;
      border-color: rgba(255,69,58,0.34) !important;
      color: #fff !important;
    }
    .report-reason-btn .reason-icon {
      width: 24px;
      height: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      background: rgba(255,255,255,0.055);
      font-size: 14px !important;
    }
    #report-desc {
      min-height: 82px !important;
      max-height: 140px !important;
      margin-bottom: 0 !important;
      padding: 11px 12px !important;
      border-radius: 16px !important;
      background: rgba(255,255,255,0.045) !important;
      border: 1px solid rgba(255,255,255,0.070) !important;
      color: var(--tg-text) !important;
      font-size: 13px !important;
      line-height: 1.35 !important;
      outline: none !important;
    }
    #report-desc:focus {
      border-color: rgba(var(--tg-blue-rgb),0.34) !important;
      background: rgba(255,255,255,0.060) !important;
    }
    #report-desc::placeholder {
      color: var(--tg-muted) !important;
    }
    @media (prefers-reduced-motion: reduce) {
      #popup-card,
      #diamond-confirm-card {
        animation: none !important;
      }
      #popup-overlay.is-closing #popup-card,
      #diamond-confirm-overlay.is-closing #diamond-confirm-card {
        transform: translate3d(0, 0, 0) scale(1);
        transition: opacity var(--tg-motion-popup-reduced) linear;
      }
      #diamond-confirm-overlay.is-closing {
        transition: opacity var(--tg-motion-popup-reduced) linear;
      }
      .settings-tab:active,
      .cs-tabs button:active {
        transform: none !important;
      }
    }
    @media (max-width: 380px) {
      #shop-header {
        min-height: 62px !important;
      }
      #shop-header-balances {
        margin-left: 0 !important;
      }
      .shop-tab {
        font-size: 12px !important;
        padding: 0 5px !important;
      }
      .shop-boxes-row,
      .shop-product-grid,
      .shop-stars-grid {
        gap: 8px !important;
      }
      .shop-box-name,
      .shop-item-name {
        font-size: 12px !important;
      }
      .shop-item-wide {
        align-items: flex-start !important;
      }
      .shop-item-wide-btn {
        padding-left: 9px !important;
        padding-right: 9px !important;
      }
    }
    @media (max-width: 380px) {
      #market-list-body {
        padding-left: 14px !important;
        padding-right: 14px !important;
      }
      #market-list-inv-grid {
        gap: 8px !important;
      }
      .market-sort-btn,
      .market-sort-btn-core {
        font-size: 10px !important;
        padding: 0 4px !important;
      }
    }

    /* Visual pass for equipment/factory/mine heat */
    .shop-item-wide.equipment-drive { --accent:#64D2FF; --accent-rgb:100,210,255; }
    .shop-item-wide.equipment-accumulator { --accent:#64D2FF; --accent-rgb:100,210,255; }
    .shop-item-wide.equipment-stabilizer { --accent:#7DF9FF; --accent-rgb:125,249,255; }
    .shop-item-wide.equipment-protector { --accent:#64D2FF; --accent-rgb:100,210,255; }
    .gw-factory-marker-icon,
    .gw-factory-marker-icon:focus,
    .gw-factory-marker-icon:focus-visible {
      outline: none !important;
      background: transparent !important;
      border: 0 !important;
    }
    .gw-factory-marker {
      pointer-events: auto;
      font-size: 32px;
      line-height: 1;
      filter: drop-shadow(0 0 10px rgba(0,0,0,0.86)) drop-shadow(0 3px 7px rgba(0,0,0,0.62));
    }
    .gw-factory-marker.own {
      filter: drop-shadow(0 0 8px rgba(125,249,255,0.26)) drop-shadow(0 3px 7px rgba(0,0,0,0.62));
    }

    #popup-card.popup-card-mine .mine-pop-heat-wrap {
      grid-column: 1 / -1;
      min-width: 0;
    }
    .mine-heat-card {
      --heat-color: #34C759;
      --heat-rgb: 52,199,89;
      position: relative;
      display: grid;
      grid-template-columns: auto minmax(70px, 1fr) auto 22px;
      align-items: center;
      gap: 7px;
      min-height: 30px;
      padding: 4px 6px 4px 8px;
      border-radius: 11px;
      background:
        linear-gradient(180deg, rgba(var(--heat-rgb),0.095), rgba(255,255,255,0.030)),
        rgba(255,255,255,0.038);
      border: 1px solid rgba(var(--heat-rgb),0.22);
      overflow: hidden;
    }
    .mine-heat-card.warm {
      --heat-color: #FF9F0A;
      --heat-rgb: 255,159,10;
    }
    .mine-heat-card.redline {
      --heat-color: #FF453A;
      --heat-rgb: 255,69,58;
    }
    .mine-heat-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 4px;
    }
    .mine-heat-title {
      display: flex;
      align-items: center;
      gap: 4px;
      color: var(--tg-text);
      font-size: 11px;
      font-weight: 820;
      line-height: 1;
      min-width: 0;
    }
    .mine-heat-title span:first-child {
      font-size: 12px;
      line-height: 1;
    }
    .mine-heat-status {
      color: rgba(255,255,255,0.58);
      font-size: 11px;
      font-weight: 720;
      white-space: nowrap;
    }
    #popup-card.popup-card-mine button.mine-heat-info-btn,
    #popup-card button.mine-heat-info-btn,
    .mine-heat-info-btn {
      width: 22px !important;
      min-width: 22px !important;
      max-width: 22px !important;
      min-height: 22px !important;
      height: 22px !important;
      max-height: 22px !important;
      border-radius: 50% !important;
      padding: 0 !important;
      margin: 0 !important;
      flex: 0 0 22px;
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      color: rgba(255,255,255,0.86) !important;
      background: rgba(255,255,255,0.060) !important;
      border: 1px solid rgba(var(--heat-rgb),0.30) !important;
      font-size: 12px !important;
      font-weight: 900 !important;
      line-height: 1 !important;
      box-shadow: none !important;
    }
    .mine-heat-track {
      position: relative;
      height: 5px;
      border-radius: 999px;
      background: rgba(255,255,255,0.085);
      overflow: hidden;
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.28);
    }
    .mine-heat-redzone {
      position: absolute;
      top: 0;
      right: 0;
      width: 20%;
      height: 100%;
      background: repeating-linear-gradient(
        -45deg,
        rgba(255,69,58,0.20) 0,
        rgba(255,69,58,0.20) 5px,
        rgba(255,69,58,0.08) 5px,
        rgba(255,69,58,0.08) 10px
      );
      border-left: 1px solid rgba(255,69,58,0.30);
    }
    .mine-heat-fill {
      position: relative;
      height: 100%;
      width: 0%;
      border-radius: inherit;
      background: linear-gradient(90deg, rgba(var(--heat-rgb),0.70), var(--heat-color));
      box-shadow: 0 0 16px rgba(var(--heat-rgb),0.34);
      transition: width .28s var(--tg-ease);
      z-index: 1;
    }
    .mine-heat-card.redline .mine-heat-fill {
      animation: mineHeatPulse 1.15s ease-in-out infinite;
    }
    @keyframes mineHeatPulse {
      0%, 100% { filter: brightness(1); }
      50% { filter: brightness(1.28); }
    }
    .mine-heat-foot {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      margin-top: 4px;
      color: rgba(255,255,255,0.48);
      font-size: 9px;
      font-weight: 720;
      line-height: 1.2;
    }
    .mine-heat-value {
      color: rgba(255,255,255,0.84);
      font-size: 10.5px;
      font-weight: 850;
      line-height: 1;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
      text-align: right;
    }
    .mine-heat-help {
      color: rgba(255,255,255,0.74);
      font-size: 12px;
      line-height: 1.42;
    }
    .mine-heat-help b {
      color: var(--tg-text);
      font-weight: 860;
    }

    #popup-card.popup-card-mine .mine-equipment-card {
      margin-top: 8px;
      padding: 0;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none;
    }
    .mine-equipment-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 9px;
    }
    .mine-equipment-head-actions {
      display: flex;
      flex: 0 0 auto;
      align-items: center;
      gap: 5px;
    }
    .mine-equipment-edit-btn {
      min-height: 26px;
      padding: 4px 7px;
      border: 1px solid rgba(125,249,255,0.20);
      border-radius: 9px;
      color: rgba(255,255,255,0.72);
      background: rgba(125,249,255,0.06);
      font: inherit;
      font-size: 9.5px;
      font-weight: 800;
      line-height: 1;
    }
    .mine-equipment-edit-btn.active {
      color: #FF9F0A;
      border-color: rgba(255,159,10,0.35);
      background: rgba(255,159,10,0.12);
    }
    .mine-equipment-title {
      color: var(--tg-text);
      font-size: 13px;
      font-weight: 850;
      line-height: 1.2;
    }
    .mine-equipment-subtitle {
      color: var(--tg-muted);
      font-size: 10.5px;
      font-weight: 650;
      line-height: 1.25;
      margin-top: 2px;
    }
    .mine-equipment-count {
      flex: 0 0 auto;
      padding: 4px 7px;
      border-radius: 999px;
      color: #FFD65A;
      background: rgba(255,214,90,0.10);
      border: 1px solid rgba(255,214,90,0.24);
      font-size: 10px;
      font-weight: 860;
      line-height: 1;
    }
    .mine-equipment-rack {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 6px;
      padding: 0;
      border-radius: 0;
      background: transparent;
      border: 0;
      max-height: min(420px, 56vh);
      overflow: auto;
      overscroll-behavior: contain;
      touch-action: pan-y;
      -webkit-overflow-scrolling: touch;
    }
    .mine-equipment-rack::before {
      content: '';
      display: none;
      position: absolute;
      left: 14px;
      right: 14px;
      top: 50%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(125,249,255,0.22), transparent);
      pointer-events: none;
    }
    .equipment-socket {
      --equipment-accent: #7DF9FF;
      --equipment-accent-rgb: 125,249,255;
      position: relative;
      z-index: 1;
      width: 100%;
      min-height: 70px;
      display: grid;
      grid-template-rows: 9px 30px 13px 14px;
      align-items: center;
      justify-items: center;
      padding: 6px 4px 5px;
      border-radius: 12px;
      color: var(--tg-text);
      background:
        radial-gradient(circle at 50% 20%, rgba(var(--equipment-accent-rgb),0.12), transparent 58%),
        linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.020)),
        rgba(255,255,255,0.032);
      border: 1px solid rgba(255,255,255,0.075);
      cursor: pointer;
      overflow: hidden;
      transition: transform .12s var(--tg-ease), border-color .12s var(--tg-ease), background .12s var(--tg-ease);
    }
    .equipment-socket-remove {
      position: absolute;
      top: 3px;
      right: 4px;
      width: 17px;
      height: 17px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: #fff;
      background: #FF453A;
      box-shadow: 0 2px 7px rgba(0,0,0,0.35);
      font-size: 15px;
      font-weight: 900;
      line-height: 1;
    }
    .mine-equipment-rack.is-editing .equipment-socket.installed {
      border-color: rgba(255,69,58,0.55);
    }
    .equipment-socket:active {
      transform: scale(0.965);
    }
    .equipment-socket.installed {
      border-color: rgba(var(--equipment-accent-rgb),0.34);
      background:
        radial-gradient(circle at 50% 18%, rgba(var(--equipment-accent-rgb),0.20), transparent 60%),
        linear-gradient(180deg, rgba(var(--equipment-accent-rgb),0.105), rgba(255,255,255,0.026)),
        rgba(255,255,255,0.035);
    }
    .equipment-socket.empty {
      border-style: dashed;
      border-color: rgba(125,249,255,0.16);
      color: rgba(255,255,255,0.45);
    }
    .equipment-socket.empty {
      grid-template-rows: 1fr;
      padding: 5px;
    }
    .equipment-socket.empty .equipment-socket-index {
      position: absolute;
      top: 6px;
      left: 7px;
    }
    .equipment-socket-index {
      display: flex;
      justify-self: start;
      align-self: start;
      color: rgba(255,255,255,0.34);
      font-size: 8px;
      font-weight: 850;
      line-height: 1;
      letter-spacing: 0;
      font-variant-numeric: tabular-nums;
    }
    .equipment-socket-icon {
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      background: rgba(var(--equipment-accent-rgb),0.12);
      border: 1px solid rgba(var(--equipment-accent-rgb),0.22);
      font-size: 18px;
      line-height: 1;
      filter: drop-shadow(0 5px 9px rgba(0,0,0,0.30));
    }
    .equipment-socket.empty .equipment-socket-icon {
      width: auto;
      height: auto;
      color: #FFD65A;
      background: transparent;
      border: 0;
      font-size: 25px;
      font-weight: 760;
      filter: none;
    }
    .equipment-socket-level,
    .equipment-socket-effect {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 1;
      letter-spacing: 0;
      font-variant-numeric: tabular-nums;
    }
    .equipment-socket-level {
      color: rgba(255,255,255,0.66);
      font-size: 9px;
      font-weight: 780;
    }
    .equipment-socket-effect {
      color: rgba(255,255,255,0.90);
      font-size: 9.5px;
      font-weight: 880;
    }
    .equipment-lock-strip {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 5px;
      margin-top: 7px;
    }
    .equipment-lock-chip {
      min-height: 20px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 7px;
      border-radius: 999px;
      color: rgba(255,255,255,0.42);
      background: rgba(255,255,255,0.030);
      border: 1px solid rgba(255,255,255,0.055);
      font-size: 9.5px;
      font-weight: 760;
      line-height: 1;
    }
    .mine-equipment-summary {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 5px;
      margin-top: 9px;
    }
    .mine-equipment-pill {
      max-width: 100%;
      padding: 5px 8px;
      border-radius: 999px;
      background: rgba(255,255,255,0.048);
      border: 1px solid rgba(255,255,255,0.070);
      color: rgba(255,255,255,0.76);
      font-size: 10.5px;
      font-weight: 800;
      line-height: 1.15;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }

    .equipment-inv-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 10px;
    }
    .equipment-bolt-chip {
      min-height: 30px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 9px;
      border-radius: 999px;
      color: var(--tg-text);
      background: rgba(125,249,255,0.075);
      border: 1px solid rgba(125,249,255,0.18);
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
    }
    .equipment-inv-cell {
      --equipment-accent: #7DF9FF;
      --equipment-accent-rgb: 125,249,255;
      border-color: rgba(var(--equipment-accent-rgb),0.24) !important;
      background:
        radial-gradient(circle at 50% -12px, rgba(var(--equipment-accent-rgb),0.18), transparent 58%),
        linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.020)) !important;
    }
    .equipment-inv-cell .inv-icon-shell {
      border-color: transparent !important;
      background: transparent !important;
      box-shadow: none !important;
    }
    .equipment-inv-grade {
      position: absolute;
      top: 5px;
      left: 5px;
      right: 5px;
      overflow: hidden;
      color: rgba(255,255,255,0.82);
      font-size: 8px;
      font-weight: 800;
      line-height: 1.1;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .equipment-plus-badge {
      position: absolute;
      top: 5px;
      right: 6px;
      min-width: 20px;
      padding: 2px 5px;
      border-radius: 999px;
      color: #fff;
      background: rgba(0,0,0,0.34);
      border: 1px solid rgba(255,255,255,0.14);
      font-size: 9px;
      font-weight: 900;
      line-height: 1;
      text-align: center;
    }
    #special-equipment-section {
      margin-bottom: 14px;
    }
    .equipment-special-title {
      margin: 0 0 8px !important;
    }
    .equipment-inv-effect {
      position: absolute;
      left: 5px;
      right: 5px;
      bottom: 5px;
      color: rgba(255,255,255,0.92);
      font-size: 9px;
      font-weight: 850;
      line-height: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
      font-variant-numeric: tabular-nums;
    }

    #popup-card.popup-card-factory {
      --popup-accent: #64D2FF;
      --popup-accent-rgb: 100,210,255;
      --factory-pop-drag-y: 0px;
      padding-top: 6px !important;
      padding-left: 12px !important;
      padding-right: 12px !important;
      padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
      max-height: min(25dvh, 248px);
      overflow: hidden;
      transform: translateY(var(--factory-pop-drag-y));
      transition: max-height .24s var(--tg-ease), transform .22s var(--tg-ease), opacity .18s ease;
      will-change: max-height, transform;
      background:
        radial-gradient(circle at 50% -18px, rgba(100,210,255,0.12), transparent 48%),
        linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0) 118px),
        var(--tg-surface) !important;
    }
    #popup-card.popup-card-factory.factory-pop-dragging {
      transition: none !important;
    }
    #popup-card.popup-card-factory.factory-pop-closing {
      --factory-pop-drag-y: calc(100% + 28px);
      opacity: 0.86;
    }
    #popup-card.popup-card-factory.popup-card-factory-expanded {
      max-height: min(86vh, 760px);
      overflow-y: auto;
    }
    .factory-panel {
      display: grid;
      gap: 6px;
      color: var(--tg-text);
    }
    #popup-card.popup-card-factory > .factory-panel {
      min-height: 0;
      margin: 0 !important;
      padding-bottom: 0;
      border-bottom: 0;
    }
    #popup-card.popup-card-factory .factory-pop-handle {
      margin: -2px -12px 2px !important;
      min-height: 0 !important;
      padding: 0 0 2px !important;
      border-bottom: 0 !important;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
    }
    #popup-card.popup-card-factory .factory-pop-bar {
      width: 42px;
      height: 4px;
      border-radius: 999px;
      background: rgba(255,255,255,0.24);
    }
    #popup-card.popup-card-factory .factory-pop-hint {
      display: none;
      color: rgba(255,255,255,0.34) !important;
      font-size: 8px !important;
      font-weight: 780;
      letter-spacing: 0;
    }
    #popup-card.popup-card-factory-expanded .factory-pop-hint::before { content: attr(data-collapse); }
    #popup-card.popup-card-factory:not(.popup-card-factory-expanded) .factory-pop-hint::before { content: attr(data-expand); }
    .factory-pop-header {
      min-height: 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 2px;
    }
    .factory-pop-title {
      min-width: 0;
      color: #F4F8FF;
      font-size: 16px;
      font-weight: 780;
      line-height: 1.2;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    #popup-card.popup-card-factory .factory-pop-close {
      appearance: none;
      -webkit-appearance: none;
      width: 34px !important;
      min-width: 34px !important;
      height: 34px !important;
      min-height: 34px !important;
      margin: 0 !important;
      padding: 0 !important;
      border-radius: 50% !important;
      background: rgba(255,255,255,0.045) !important;
      border: 1px solid rgba(255,255,255,0.070) !important;
      color: var(--tg-muted) !important;
      font-size: 18px !important;
      font-weight: 700 !important;
    }
    .factory-conveyor-card {
      position: relative;
      display: grid;
      gap: 7px;
      margin-top: 4px;
      padding: 8px;
      border-radius: 15px;
      background:
        radial-gradient(circle at 50% 0%, rgba(125,249,255,0.085), transparent 56%),
        linear-gradient(180deg, rgba(255,255,255,0.040), rgba(255,255,255,0.018)),
        rgba(0,0,0,0.13);
      border: 1px solid rgba(255,255,255,0.065);
      overflow: hidden;
    }
    .factory-conveyor-card::before {
      content: '';
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: 24px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent, rgba(125,249,255,0.24), transparent);
      pointer-events: none;
    }
    .factory-conveyor-head {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-width: 0;
    }
    .factory-conveyor-title {
      min-width: 0;
      color: var(--tg-text);
      font-size: 11px;
      font-weight: 820;
      line-height: 1;
      white-space: nowrap;
    }
    .factory-conveyor-state {
      min-width: 0;
      color: rgba(255,255,255,0.48);
      font-size: 10px;
      font-weight: 760;
      line-height: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: right;
      font-variant-numeric: tabular-nums;
    }
    .factory-conveyor-track {
      position: relative;
      z-index: 1;
    }
    .factory-queue-strip {
      display: flex;
      gap: 8px;
      max-width: 100%;
      overflow-x: auto;
      scrollbar-width: none;
      padding-bottom: 1px;
    }
    .factory-queue-strip::-webkit-scrollbar {
      display: none;
    }
    .factory-switch-row {
      display: flex;
      gap: 6px;
      overflow-x: auto;
      padding-bottom: 1px;
      scrollbar-width: none;
    }
    .factory-switch-row::-webkit-scrollbar {
      display: none;
    }
    #popup-card.popup-card-factory button.factory-switch-btn,
    #popup-card.popup-card-factory button.factory-tier-chip {
      appearance: none;
      -webkit-appearance: none;
      flex: 0 0 auto;
      min-height: 32px !important;
      margin: 0 !important;
      padding: 0 10px !important;
      border-radius: 999px !important;
      border: 1px solid rgba(255,255,255,0.09) !important;
      background: rgba(255,255,255,0.045) !important;
      color: rgba(255,255,255,0.72) !important;
      font-size: 11.5px !important;
      font-weight: 820 !important;
      white-space: nowrap;
    }
    #popup-card.popup-card-factory button.factory-switch-btn.active,
    #popup-card.popup-card-factory button.factory-tier-chip.active {
      border-color: rgba(100,210,255,0.36) !important;
      background: rgba(100,210,255,0.16) !important;
      color: #EAF9FF !important;
    }
    #popup-card.popup-card-factory button.factory-switch-btn.locked,
    #popup-card.popup-card-factory button.factory-tier-chip.locked {
      opacity: 0.50;
    }
    .factory-pop-extra {
      display: grid;
      grid-template-rows: 0fr;
      opacity: 0;
      margin-top: 6px;
      transition:
        grid-template-rows 0.26s cubic-bezier(0.34, 1.4, 0.64, 1),
        opacity 0.18s ease;
      will-change: grid-template-rows, opacity;
    }
    #popup-card.popup-card-factory.popup-card-factory-expanded .factory-pop-extra {
      grid-template-rows: 1fr;
      opacity: 1;
    }
    .factory-pop-extra-inner {
      min-height: 0;
      overflow: hidden;
      display: grid;
      gap: 8px;
    }
    .factory-progress-card,
    .factory-recipe-card,
    .factory-extractor-panel {
      border-radius: 16px;
      background: rgba(255,255,255,0.040);
      border: 1px solid rgba(255,255,255,0.060);
    }
    .factory-progress-card {
      padding: 9px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
    }
    .factory-progress-copy {
      min-width: 0;
    }
    .factory-progress-title {
      color: var(--tg-text);
      font-size: 12.5px;
      font-weight: 820;
      line-height: 1.1;
    }
    .factory-progress-sub {
      margin-top: 4px;
      color: rgba(255,255,255,0.48);
      font-size: 10.5px;
      font-weight: 720;
      line-height: 1.15;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    #popup-card.popup-card-factory button.factory-upgrade-btn {
      appearance: none;
      -webkit-appearance: none;
      min-width: 88px !important;
      min-height: 36px !important;
      margin: 0 !important;
      padding: 0 10px !important;
      border-radius: 12px !important;
      border: 1px solid rgba(255,214,90,0.28) !important;
      background: rgba(255,214,90,0.13) !important;
      color: #FFE28A !important;
      font-size: 11.5px !important;
      font-weight: 840 !important;
      line-height: 1.15 !important;
      white-space: nowrap;
    }
    #popup-card.popup-card-factory button.factory-upgrade-btn:disabled {
      color: #7E8A99 !important;
      border-color: rgba(255,255,255,0.07) !important;
      background: rgba(255,255,255,0.035) !important;
    }
    #popup-card.popup-card-factory button.factory-danger-btn {
      appearance: none;
      -webkit-appearance: none;
      width: 100% !important;
      min-height: 42px !important;
      margin: 0 !important;
      padding: 0 12px !important;
      border-radius: 8px !important;
      border: 1px solid rgba(255,82,82,0.45) !important;
      background: rgba(255,82,82,0.13) !important;
      color: #ff8a8a !important;
      font-size: 13px !important;
      font-weight: 780 !important;
      line-height: 1.15 !important;
      cursor: pointer;
    }
    #popup-card.popup-card-factory button.factory-danger-btn:active {
      transform: translateY(1px);
    }
    .factory-progress {
      height: 6px;
      border-radius: 999px;
      background: rgba(255,255,255,0.085);
      overflow: hidden;
      margin-top: 7px;
    }
    .factory-progress-fill {
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #64D2FF, #7DF9FF);
      box-shadow: 0 0 14px rgba(125,249,255,0.28);
      transition: width .28s var(--tg-ease);
    }
    .factory-section-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      margin: 2px 2px -3px;
    }
    .factory-section-title {
      color: rgba(255,255,255,0.52);
      font-size: 10.5px;
      font-weight: 820;
      letter-spacing: 0;
      line-height: 1.1;
      text-transform: uppercase;
    }
    #popup-card.popup-card-factory .factory-slot,
    #popup-card.popup-card-factory button.factory-slot {
      appearance: none;
      -webkit-appearance: none;
      position: relative;
      z-index: 1;
      flex: 0 0 58px;
      width: 58px !important;
      min-width: 58px !important;
      height: 64px !important;
      min-height: 64px !important;
      margin: 0 !important;
      padding: 6px 4px 5px !important;
      border-radius: 12px !important;
      border: 1px solid rgba(255,255,255,0.075) !important;
      background:
        radial-gradient(circle at 50% 20%, rgba(125,249,255,0.12), transparent 58%),
        linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.020)),
        rgba(255,255,255,0.032) !important;
      color: var(--tg-text) !important;
      display: grid !important;
      grid-template-rows: 30px 14px 13px;
      align-items: center;
      justify-items: center;
      gap: 0;
      text-align: center !important;
      overflow: hidden;
      transition: transform .12s var(--tg-ease), border-color .12s var(--tg-ease), background .12s var(--tg-ease);
    }
    #popup-card.popup-card-factory button.factory-slot:active {
      transform: scale(0.965);
    }
    #popup-card.popup-card-factory .factory-slot.working {
      border-color: rgba(125,249,255,0.34) !important;
      background:
        radial-gradient(circle at 50% 18%, rgba(125,249,255,0.20), transparent 60%),
        linear-gradient(180deg, rgba(125,249,255,0.105), rgba(255,255,255,0.026)),
        rgba(255,255,255,0.035) !important;
    }
    #popup-card.popup-card-factory .factory-slot.queued {
      border-color: rgba(255,214,90,0.22) !important;
      background:
        radial-gradient(circle at 50% 18%, rgba(255,214,90,0.14), transparent 60%),
        linear-gradient(180deg, rgba(255,214,90,0.07), rgba(255,255,255,0.024)),
        rgba(255,255,255,0.032) !important;
    }
    #popup-card.popup-card-factory .factory-slot.ready {
      border-color: rgba(52,199,89,0.34) !important;
      background:
        linear-gradient(180deg, rgba(52,199,89,0.15), rgba(255,255,255,0.035)),
        rgba(255,255,255,0.045) !important;
      box-shadow: 0 0 16px rgba(52,199,89,0.13);
    }
    #popup-card.popup-card-factory .factory-slot.empty {
      color: rgba(255,255,255,0.34) !important;
      border-style: dashed !important;
      border-color: rgba(125,249,255,0.16) !important;
    }
    .factory-slot-icon {
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      background: rgba(125,249,255,0.12);
      border: 1px solid rgba(125,249,255,0.22);
      font-size: 18px;
      line-height: 1;
      filter: drop-shadow(0 5px 9px rgba(0,0,0,0.30));
    }
    .factory-slot.empty .factory-slot-icon {
      color: #7DF9FF;
      background: rgba(125,249,255,0.060);
      border-color: rgba(125,249,255,0.14);
      font-size: 19px;
      font-weight: 760;
      filter: none;
    }
    .factory-slot-label {
      max-width: 100%;
      color: rgba(255,255,255,0.66);
      font-size: 9px;
      font-weight: 780;
      line-height: 1.05;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .factory-slot.ready .factory-slot-label {
      color: #34C759;
    }
    .factory-slot-time {
      max-width: 100%;
      color: #7DF9FF;
      font-size: 8.5px;
      font-weight: 860;
      line-height: 1.05;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .factory-slot-progress {
      width: calc(100% - 8px);
      height: 3px;
      border-radius: 999px;
      background: rgba(255,255,255,0.095);
      overflow: hidden;
      position: absolute;
      left: 8px;
      right: 8px;
      bottom: 5px;
      width: auto;
      margin: 0;
    }
    .factory-slot-progress-fill {
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #64D2FF, #7DF9FF);
      transition: width .25s var(--tg-ease);
    }
    .factory-recipe-card {
      min-height: 58px;
      padding: 8px;
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
    }
    .factory-recipe-icon {
      width: 38px;
      height: 38px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(100,210,255,0.080);
      border: 1px solid rgba(100,210,255,0.14);
      font-size: 20px;
    }
    .factory-recipe-copy {
      min-width: 0;
    }
    .factory-recipe-title {
      color: #F4F8FF;
      font-size: 13px;
      font-weight: 820;
      line-height: 1.16;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .factory-recipe-sub,
    .factory-extractor-cost {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 3px 5px;
      margin-top: 5px;
      color: rgba(255,255,255,0.50);
      font-size: 10px;
      font-weight: 760;
      line-height: 1.15;
    }
    .factory-cost-pill {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      max-width: 100%;
      min-height: 18px;
      border-radius: 999px;
      padding: 0 6px;
      background: rgba(255,255,255,0.050);
      color: #AEB8C5;
      white-space: nowrap;
    }
    #popup-card.popup-card-factory button.factory-recipe-start {
      appearance: none;
      -webkit-appearance: none;
      min-width: 66px !important;
      min-height: 34px !important;
      margin: 0 !important;
      padding: 0 9px !important;
      border-radius: 12px !important;
      border: 1px solid rgba(125,249,255,0.28) !important;
      background: rgba(125,249,255,0.12) !important;
      color: #7DF9FF !important;
      font-size: 11.5px !important;
      font-weight: 840 !important;
      white-space: nowrap;
    }
    #popup-card.popup-card-factory button.factory-recipe-start:disabled {
      color: #7E8A99 !important;
      border-color: rgba(255,255,255,0.07) !important;
      background: rgba(255,255,255,0.035) !important;
    }
    .factory-extractor-panel {
      padding: 8px;
      display: grid;
      gap: 8px;
    }
    .factory-tier-row {
      display: flex;
      gap: 5px;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .factory-tier-row::-webkit-scrollbar {
      display: none;
    }
    .factory-extractor-detail {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
      min-width: 0;
    }
    .factory-ready {
      color: #34C759;
      font-weight: 900;
    }
    @media (max-width: 370px) {
      #popup-card.popup-card-factory .factory-slot,
      #popup-card.popup-card-factory button.factory-slot {
        flex-basis: 54px;
        width: 54px !important;
        min-width: 54px !important;
      }
      .factory-recipe-card {
        grid-template-columns: 36px minmax(0, 1fr);
      }
      .factory-recipe-card .factory-recipe-start {
        grid-column: 1 / -1;
      }
    }
    .ore-vein-panel {
      display: grid;
      gap: 8px;
    }
    .ore-vein-strip {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .ore-vein-pill {
      min-width: 0;
      flex: 1 1 auto;
      min-height: 30px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      border-radius: 999px;
      padding: 6px 9px;
      background: rgba(255,255,255,0.032);
      border: 1px solid rgba(255,255,255,0.065);
      color: rgba(255,255,255,0.76);
      font-size: 11px;
      font-weight: 820;
      line-height: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }
    .ore-vein-pill.primary {
      color: var(--ore-accent, #64D2FF);
      background: rgba(var(--popup-accent-rgb),0.070);
      border-color: rgba(var(--popup-accent-rgb),0.15);
    }
    .ore-pool-card {
      border-radius: 15px;
      padding: 10px;
      background:
        linear-gradient(180deg, rgba(100,210,255,0.090), rgba(255,255,255,0.026)),
        rgba(255,255,255,0.034);
      border: 1px solid rgba(100,210,255,0.160);
    }
    .ore-pool-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: var(--tg-text);
      font-size: 12px;
      font-weight: 850;
      margin-bottom: 7px;
    }
    .ore-pool-head small {
      color: var(--tg-muted);
      font-size: 10px;
      font-weight: 760;
      white-space: nowrap;
    }
    .ore-pool-track {
      height: 7px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(255,255,255,0.095);
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.25);
    }
    .ore-pool-fill {
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #64D2FF, #7DF9FF);
      transition: width .25s var(--tg-ease);
    }
    .ore-extractor-orbit {
      --ore-accent: #64D2FF;
      --ore-accent-rgb: 100,210,255;
      position: relative;
      min-height: 232px;
      border-radius: 20px;
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 50%, rgba(var(--ore-accent-rgb),0.140), transparent 28%),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.035), transparent 52%),
        linear-gradient(180deg, rgba(255,255,255,0.034), rgba(255,255,255,0.014));
      border: 1px solid rgba(255,255,255,0.075);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), 0 10px 22px rgba(0,0,0,0.16);
    }
    .ore-extractor-orbit.resource-ether {
      --ore-accent: #FFD166;
      --ore-accent-rgb: 255,209,102;
    }
    .ore-extractor-orbit.resource-shards {
      --ore-accent: #64D2FF;
      --ore-accent-rgb: 100,210,255;
    }
    .ore-extractor-orbit.resource-both {
      --ore-accent: #B58CFF;
      --ore-accent-rgb: 181,140,255;
    }
    .ore-extractor-orbit::before,
    .ore-extractor-orbit::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 176px;
      height: 176px;
      border-radius: 50%;
      pointer-events: none;
      transform: translate(-50%,-50%);
    }
    .ore-extractor-orbit::before {
      border: 1px solid rgba(var(--ore-accent-rgb),0.18);
      box-shadow: 0 0 18px rgba(var(--ore-accent-rgb),0.09);
    }
    .ore-extractor-orbit::after {
      width: 116px;
      height: 116px;
      border: 1px dashed rgba(255,255,255,0.075);
    }
    .ore-orbit-lanes {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 1;
    }
    .ore-orbit-lane {
      position: absolute;
      left: 50%;
      top: 50%;
      width: var(--lane-len, 50px);
      height: 1px;
      border-radius: 999px;
      transform: translateY(-50%) rotate(var(--lane-angle, 0deg));
      transform-origin: left center;
      background: linear-gradient(90deg, rgba(var(--ore-accent-rgb),0.00), rgba(var(--ore-accent-rgb),0.36), rgba(255,255,255,0.06));
      opacity: 0.11;
    }
    .ore-orbit-lane.occupied {
      opacity: 0.72;
    }
    .ore-orbit-lane.mine {
      background: linear-gradient(90deg, rgba(52,199,89,0.00), rgba(52,199,89,0.58), rgba(var(--ore-accent-rgb),0.34));
      opacity: 0.9;
    }
    .ore-orbit-lane.occupied::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 8px;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--ore-accent);
      box-shadow: 0 0 8px rgba(var(--ore-accent-rgb),0.86);
      transform: translate(-50%,-50%);
      animation: oreLanePulse 1.85s ease-in-out infinite;
      animation-delay: calc(var(--slot-i, 0) * -0.17s);
    }
    .ore-orbit-center {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 88px;
      height: 88px;
      transform: translate(-50%,-50%);
      border-radius: 50%;
      display: grid;
      place-items: center;
      z-index: 2;
    }
    .ore-core-progress {
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: conic-gradient(var(--ore-accent) var(--pool-pct, 0%), rgba(255,255,255,0.080) 0);
      filter: drop-shadow(0 0 13px rgba(var(--ore-accent-rgb),0.16));
    }
    .ore-core-progress::after {
      content: "";
      position: absolute;
      inset: 5px;
      border-radius: inherit;
      background:
        radial-gradient(circle at 50% 32%, rgba(255,255,255,0.11), transparent 48%),
        rgba(19,25,29,0.96);
      border: 1px solid rgba(255,255,255,0.080);
    }
    .ore-core-body {
      position: relative;
      z-index: 1;
      width: 70px;
      height: 70px;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      text-align: center;
      color: var(--tg-text);
    }
    .ore-core-emoji {
      font-size: 27px;
      line-height: 1;
      filter: drop-shadow(0 8px 13px rgba(0,0,0,0.42));
    }
    .ore-core-pool {
      max-width: 68px;
      color: var(--tg-text);
      font-size: 9px;
      font-weight: 860;
      line-height: 1.1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }
    .ore-core-timer {
      color: rgba(255,255,255,0.52);
      font-size: 8px;
      font-weight: 760;
      line-height: 1;
      white-space: nowrap;
    }
    .ore-orbit-caption {
      position: absolute;
      left: 14px;
      top: 9px;
      right: 14px;
      z-index: 3;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: rgba(255,255,255,0.58);
      font-size: 10px;
      font-weight: 820;
      pointer-events: none;
    }
    .ore-orbit-caption b {
      color: var(--ore-accent);
      font-size: 10.5px;
      font-weight: 900;
      font-variant-numeric: tabular-nums;
    }
    .ore-orbit-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 7px;
    }
    .ore-orbit-metric {
      min-width: 0;
      border-radius: 13px;
      padding: 8px 8px;
      background: rgba(255,255,255,0.038);
      border: 1px solid rgba(255,255,255,0.070);
    }
    .ore-orbit-metric span {
      display: block;
      color: var(--tg-muted);
      font-size: 9px;
      font-weight: 760;
      line-height: 1;
      margin-bottom: 4px;
      white-space: nowrap;
    }
    .ore-orbit-metric b {
      display: block;
      color: var(--tg-text);
      font-size: 12px;
      font-weight: 880;
      line-height: 1.1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }
    .ore-extractor-slots {
      position: absolute;
      inset: 0;
      z-index: 4;
    }
    #popup-card button.ore-extractor-slot,
    #popup-card button.ore-extractor-slot:disabled {
      appearance: none;
      -webkit-appearance: none;
      position: absolute !important;
      left: var(--slot-x, 50%) !important;
      top: var(--slot-y, 50%) !important;
      width: 56px !important;
      height: 58px !important;
      min-width: 0 !important;
      min-height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      border-radius: 20px !important;
      border: 0 !important;
      background: transparent !important;
      color: inherit !important;
      font-size: inherit !important;
      font-weight: inherit !important;
      display: flex !important;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 1px;
      text-align: center !important;
      overflow: visible;
      transform: translate(-50%,-50%) !important;
      box-shadow: none !important;
      opacity: 1 !important;
      transition: opacity .12s var(--tg-ease), filter .12s var(--tg-ease) !important;
    }
    #popup-card button.ore-extractor-slot:active {
      transform: translate(-50%,-50%) scale(0.94) !important;
      background: transparent !important;
      border-color: transparent !important;
    }
    #popup-card button.ore-extractor-slot.occupied {
      color: var(--tg-text) !important;
      background: transparent !important;
    }
    #popup-card button.ore-extractor-slot.mine {
      background: transparent !important;
      box-shadow: none !important;
    }
    #popup-card .ore-extractor-slot.occupied .ore-slot-icon {
      animation: oreDrillBreathe 1.35s ease-in-out infinite;
      animation-delay: calc(var(--slot-i, 0) * -0.09s);
    }
    #popup-card .ore-extractor-slot.occupied::after {
      content: "";
      position: absolute;
      width: 4px;
      height: 4px;
      right: 11px;
      top: 2px;
      border-radius: 50%;
      background: var(--ore-accent, #64D2FF);
      box-shadow: 0 0 8px rgba(var(--ore-accent-rgb),0.78);
      animation: oreSlotSpark 1.7s ease-out infinite;
      animation-delay: calc(var(--slot-i, 0) * -0.13s);
    }
    .ore-slot-icon {
      width: 38px;
      height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 28%, rgba(255,255,255,0.18), transparent 48%),
        rgba(9,13,18,0.80);
      border: 1px solid rgba(var(--ore-accent-rgb),0.22);
      box-shadow: 0 8px 14px rgba(0,0,0,0.22), 0 0 0 1px rgba(255,255,255,0.026) inset;
      font-size: 18px;
      line-height: 1;
    }
    #popup-card button.ore-extractor-slot:not(.occupied) .ore-slot-icon {
      color: rgba(100,210,255,0.72);
      background:
        radial-gradient(circle at 50% 30%, rgba(100,210,255,0.16), transparent 54%),
        rgba(8,12,17,0.58);
      border-color: rgba(100,210,255,0.18);
      box-shadow: 0 8px 13px rgba(0,0,0,0.18);
    }
    #popup-card button.ore-extractor-slot:disabled:not(.occupied) .ore-slot-icon {
      opacity: 0.38;
      filter: grayscale(0.35);
    }
    #popup-card .ore-extractor-slot.mine .ore-slot-icon {
      border-color: rgba(52,199,89,0.48);
      box-shadow: 0 8px 15px rgba(0,0,0,0.24), 0 0 12px rgba(52,199,89,0.14);
    }
    .ore-slot-meta,
    .ore-slot-owner,
    .ore-slot-empty {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 1.05;
      font-variant-numeric: tabular-nums;
    }
    .ore-slot-meta {
      color: rgba(255,255,255,0.72);
      font-size: 8.5px;
      font-weight: 850;
    }
    .ore-slot-owner {
      max-width: 58px;
      color: rgba(255,255,255,0.46);
      font-size: 7.8px;
      font-weight: 760;
      letter-spacing: 0;
    }
    #popup-card .ore-extractor-slot.mine .ore-slot-owner {
      color: rgba(52,199,89,0.78);
    }
    .ore-slot-empty {
      display: none;
    }
    @keyframes oreLanePulse {
      0% { left: 10px; opacity: 0; transform: translate(-50%,-50%) scale(0.6); }
      22% { opacity: 1; }
      100% { left: calc(100% - 8px); opacity: 0; transform: translate(-50%,-50%) scale(1.15); }
    }
    @keyframes oreDrillBreathe {
      0%, 100% { transform: translateY(0) rotate(-2deg); }
      50% { transform: translateY(1px) rotate(2deg); }
    }
    @keyframes oreSlotSpark {
      0% { opacity: 0; transform: translate(0,0) scale(0.6); }
      35% { opacity: 1; }
      100% { opacity: 0; transform: translate(8px,-10px) scale(1.4); }
    }
    @media (prefers-reduced-motion: reduce) {
      .ore-orbit-lane.occupied::after,
      #popup-card .ore-extractor-slot.occupied .ore-slot-icon,
      #popup-card .ore-extractor-slot.occupied::after {
        animation: none !important;
      }
    }
    .ore-extractor-picker-empty {
      color: var(--tg-muted);
      text-align: center;
      font-size: 12px;
      line-height: 1.35;
      padding: 18px 10px;
      border-radius: 14px;
      background: rgba(255,255,255,0.035);
      border: 1px solid rgba(255,255,255,0.065);
    }
    #popup-card.popup-card-ore {
      --popup-accent: #64D2FF;
      --popup-accent-rgb: 100,210,255;
      max-height: min(82dvh, calc(100dvh - 8px), 720px);
      padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
      background:
        radial-gradient(circle at 50% -18px, rgba(var(--popup-accent-rgb),0.18), transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012) 175px),
        #101A22 !important;
      border-color: rgba(var(--popup-accent-rgb),0.18) !important;
    }
    #popup-card.popup-card-ore::before {
      content: '';
      display: block;
      width: 42px;
      height: 4px;
      margin: -1px auto 10px;
      border-radius: 999px;
      background: rgba(255,255,255,0.20);
    }
    #popup-card.popup-card-ore > div:first-child {
      min-height: 50px;
      margin: 0 0 8px !important;
      padding: 10px 10px !important;
      border: 1px solid rgba(var(--popup-accent-rgb),0.15) !important;
      border-radius: 18px !important;
      background:
        radial-gradient(circle at 24px 0, rgba(255,255,255,0.10), transparent 58px),
        linear-gradient(135deg, rgba(var(--popup-accent-rgb),0.125), rgba(255,255,255,0.030)),
        rgba(255,255,255,0.030) !important;
    }
    #popup-card.popup-card-ore > div:first-child > div:first-child > div:first-child {
      font-size: 18px !important;
      font-weight: 820 !important;
    }
    #popup-card.popup-card-ore .popup-close {
      width: 34px !important;
      height: 34px !important;
      border-radius: 50% !important;
      color: rgba(255,255,255,0.62) !important;
      background: rgba(255,255,255,0.045) !important;
    }
    #popup-card.popup-card-ore #popup-stats {
      gap: 0 !important;
    }
    .ore-redesign {
      display: grid;
      gap: 8px;
    }
    .ore-signal-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .ore-signal-chip {
      min-width: 0;
      min-height: 48px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 8px 10px;
      border-radius: 16px;
      color: rgba(255,255,255,0.80);
      background: rgba(255,255,255,0.036);
      border: 1px solid rgba(255,255,255,0.062);
      text-align: center;
      line-height: 1.1;
      overflow: hidden;
      font-variant-numeric: tabular-nums;
    }
    .ore-signal-chip.primary {
      color: var(--ore-accent, #64D2FF);
      background: rgba(var(--ore-accent-rgb,100,210,255),0.10);
      border-color: rgba(var(--ore-accent-rgb,100,210,255),0.22);
    }
    .ore-signal-chip strong {
      color: var(--tg-text);
      font-weight: 880;
    }
    .ore-signal-chip span {
      max-width: 100%;
      color: rgba(255,255,255,0.50);
      font-size: 9.5px;
      font-weight: 780;
      line-height: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ore-signal-chip b {
      max-width: 100%;
      color: var(--tg-text);
      font-size: 14px;
      font-weight: 920;
      line-height: 1.05;
      white-space: normal;
      overflow-wrap: anywhere;
    }
    .ore-signal-chip.primary b {
      color: #fff;
    }
    .ore-scanner-card {
      --ore-accent: #64D2FF;
      --ore-accent-rgb: 100,210,255;
      position: relative;
      height: 278px;
      border-radius: 24px;
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 52%, rgba(var(--ore-accent-rgb),0.12), transparent 35%),
        linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.014)),
        rgba(255,255,255,0.020);
      border: 1px solid rgba(255,255,255,0.070);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.040);
      isolation: isolate;
    }
    .ore-scanner-card.resource-ether {
      --ore-accent: #FFD166;
      --ore-accent-rgb: 255,209,102;
    }
    .ore-scanner-card.resource-shards {
      --ore-accent: #64D2FF;
      --ore-accent-rgb: 100,210,255;
    }
    .ore-scanner-card.resource-both {
      --ore-accent: #B58CFF;
      --ore-accent-rgb: 181,140,255;
    }
    .ore-scanner-stage {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
    }
    .ore-scanner-stage canvas {
      display: block !important;
    }
    .ore-scanner-counts {
      position: absolute;
      top: 12px;
      left: 14px;
      right: 14px;
      z-index: 4;
      display: flex;
      align-items: center;
      justify-content: space-between;
      pointer-events: none;
      font-size: 11px;
      font-weight: 880;
      color: rgba(255,255,255,0.64);
      font-variant-numeric: tabular-nums;
    }
    .ore-scanner-counts b {
      color: var(--ore-accent);
      font-size: 12px;
      font-weight: 900;
    }
    .ore-scanner-core {
      position: absolute;
      left: 50%;
      top: 52%;
      z-index: 3;
      width: 100px;
      height: 100px;
      transform: translate(-50%,-50%);
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      text-align: center;
      pointer-events: none;
      background:
        radial-gradient(circle at 50% 28%, rgba(255,255,255,0.13), transparent 52%),
        rgba(12,18,23,0.92);
      border: 1px solid rgba(255,255,255,0.080);
      box-shadow: 0 14px 28px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.045);
    }
    .ore-scanner-core-emoji {
      font-size: 30px;
      line-height: 1;
      filter: drop-shadow(0 8px 12px rgba(0,0,0,0.44));
    }
    .ore-scanner-core-pool {
      max-width: 86px;
      color: var(--tg-text);
      font-size: 10px;
      line-height: 1.05;
      font-weight: 900;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }
    .ore-scanner-core-time {
      color: rgba(255,255,255,0.48);
      font-size: 9px;
      line-height: 1;
      font-weight: 760;
      white-space: nowrap;
    }
    .ore-scanner-nodes {
      position: absolute;
      inset: 0;
      z-index: 5;
    }
    #popup-card.popup-card-ore button.ore-scanner-node,
    #popup-card.popup-card-ore button.ore-scanner-node:disabled {
      appearance: none;
      -webkit-appearance: none;
      position: absolute !important;
      left: var(--node-x, 50%) !important;
      top: var(--node-y, 50%) !important;
      width: 58px !important;
      height: 62px !important;
      min-width: 0 !important;
      min-height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 18px !important;
      background: transparent !important;
      color: inherit !important;
      display: flex !important;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      overflow: visible;
      opacity: 1 !important;
      transform: translate(-50%,-50%) !important;
      box-shadow: none !important;
      text-align: center !important;
      transition: filter .14s var(--tg-ease), opacity .14s var(--tg-ease), transform .14s var(--tg-ease) !important;
    }
    #popup-card.popup-card-ore button.ore-scanner-node:active {
      transform: translate(-50%,-50%) scale(0.94) !important;
      background: transparent !important;
    }
    #popup-card.popup-card-ore button.ore-scanner-node:disabled {
      pointer-events: none;
    }
    #popup-card.popup-card-ore button.ore-scanner-node.attackable {
      cursor: pointer;
      pointer-events: auto;
    }
    #popup-card.popup-card-ore button.ore-scanner-node.inspectable {
      cursor: pointer;
      pointer-events: auto;
    }
    #popup-card.popup-card-ore button.ore-scanner-node.empty:disabled {
      opacity: 0.50 !important;
      filter: grayscale(0.18);
    }
    #popup-card.popup-card-ore button.ore-scanner-node.slot-locked {
      opacity: 0.72 !important;
      filter: saturate(0.72);
    }
    .ore-scanner-dot {
      position: relative;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: rgba(100,210,255,0.82);
      background:
        radial-gradient(circle at 50% 30%, rgba(255,255,255,0.14), transparent 48%),
        rgba(8,12,17,0.78);
      border: 1px solid rgba(var(--ore-accent-rgb,100,210,255),0.22);
      box-shadow: 0 9px 18px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.045);
      font-size: 22px;
      line-height: 1;
    }
    .ore-scanner-node.occupied .ore-scanner-dot {
      color: #fff;
      border-color: rgba(var(--ore-accent-rgb,100,210,255),0.48);
      box-shadow:
        0 10px 22px rgba(0,0,0,0.30),
        0 0 16px rgba(var(--ore-accent-rgb,100,210,255),0.18),
        inset 0 1px 0 rgba(255,255,255,0.060);
      animation: oreScannerDrill 1.45s ease-in-out infinite;
      animation-delay: calc(var(--slot-i, 0) * -0.09s);
    }
    .ore-scanner-node.mine .ore-scanner-dot {
      border-color: rgba(52,199,89,0.62);
      box-shadow:
        0 10px 22px rgba(0,0,0,0.30),
        0 0 18px rgba(52,199,89,0.20),
        inset 0 1px 0 rgba(255,255,255,0.060);
    }
    .ore-scanner-node.hostile .ore-scanner-dot {
      border-color: rgba(255,92,92,0.58);
      box-shadow:
        0 10px 22px rgba(0,0,0,0.30),
        0 0 18px rgba(255,92,92,0.18),
        inset 0 1px 0 rgba(255,255,255,0.060);
    }
    .ore-scanner-node.slot-locked .ore-scanner-dot {
      color: rgba(255,209,102,0.90);
      border-color: rgba(255,209,102,0.34);
      animation: none !important;
    }
    .ore-scanner-node.occupied .ore-scanner-dot::after {
      content: "";
      position: absolute;
      right: 2px;
      top: 0;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--ore-accent, #64D2FF);
      box-shadow: 0 0 8px rgba(var(--ore-accent-rgb,100,210,255),0.82);
      animation: oreScannerSpark 1.7s ease-out infinite;
      animation-delay: calc(var(--slot-i, 0) * -0.13s);
    }
    .ore-scanner-tier,
    .ore-scanner-owner {
      max-width: 58px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 1;
      font-variant-numeric: tabular-nums;
      text-shadow: 0 1px 4px rgba(0,0,0,0.45);
    }
    .ore-scanner-tier {
      color: rgba(255,255,255,0.76);
      font-size: 10px;
      font-weight: 880;
    }
    .ore-scanner-owner {
      color: rgba(255,255,255,0.50);
      font-size: 8.5px;
      font-weight: 780;
    }
    .ore-scanner-node.mine .ore-scanner-owner {
      color: rgba(52,199,89,0.88);
    }
    .ore-vein-meter {
      border-radius: 17px;
      padding: 10px;
      background:
        linear-gradient(180deg, rgba(var(--ore-accent-rgb,100,210,255),0.085), rgba(255,255,255,0.026)),
        rgba(255,255,255,0.025);
      border: 1px solid rgba(var(--ore-accent-rgb,100,210,255),0.16);
    }
    .ore-vein-meter-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 8px;
      color: var(--tg-text);
      font-size: 12px;
      font-weight: 880;
      font-variant-numeric: tabular-nums;
    }
    .ore-vein-meter-head b {
      color: rgba(255,255,255,0.56);
      font-size: 11px;
      font-weight: 820;
    }
    .ore-vein-track {
      height: 7px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(255,255,255,0.090);
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.24);
    }
    .ore-vein-fill {
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--ore-accent, #64D2FF), #7DF9FF);
      box-shadow: 0 0 14px rgba(var(--ore-accent-rgb,100,210,255),0.20);
      transition: width .24s var(--tg-ease);
    }
    .ore-metrics-line {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: stretch;
      gap: 8px;
    }
    .ore-metrics-line span {
      min-width: 0;
      min-height: 64px;
      border-radius: 17px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      background: rgba(255,255,255,0.034);
      border: 1px solid rgba(255,255,255,0.060);
      color: var(--tg-muted);
      font-size: 10px;
      font-weight: 780;
      line-height: 1;
      overflow: hidden;
    }
    .ore-metrics-line b {
      color: var(--tg-text);
      font-size: 17px;
      font-weight: 920;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }
    .ore-metrics-line em {
      color: rgba(255,255,255,0.50);
      font-size: 9.5px;
      font-style: normal;
      font-weight: 760;
      line-height: 1.12;
      white-space: normal;
      overflow-wrap: anywhere;
    }
    .ore-range-note {
      color: var(--tg-muted);
      text-align: center;
      font-size: 12px;
      line-height: 1.32;
      padding: 9px 8px;
      border-radius: 15px;
      background: rgba(255,255,255,0.030);
      border: 1px solid rgba(255,255,255,0.055);
    }
    @keyframes oreScannerDrill {
      0%, 100% { transform: translateY(0) rotate(-2deg); }
      50% { transform: translateY(1px) rotate(2deg); }
    }
    @keyframes oreScannerSpark {
      0% { opacity: 0; transform: translate(0,0) scale(0.5); }
      35% { opacity: 1; }
      100% { opacity: 0; transform: translate(7px,-10px) scale(1.45); }
    }
    @media (max-width: 360px) {
      .ore-scanner-card { height: 258px; }
      #popup-card.popup-card-ore button.ore-scanner-node,
      #popup-card.popup-card-ore button.ore-scanner-node:disabled {
        width: 54px !important;
        height: 58px !important;
      }
      .ore-scanner-dot {
        width: 38px;
        height: 38px;
      }
      .ore-scanner-core {
        width: 92px;
        height: 92px;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .ore-scanner-node.occupied .ore-scanner-dot,
      .ore-scanner-node.occupied .ore-scanner-dot::after {
        animation: none !important;
      }
    }

    #core-detail-card.equipment-detail-card {
      --equipment-accent:#7DF9FF;
      --equipment-accent-rgb:125,249,255;
      width: min(92vw, 356px) !important;
      max-width: 356px !important;
      padding: 16px !important;
      background:
        radial-gradient(circle at 50% -36px, rgba(var(--equipment-accent-rgb),0.22), transparent 58%),
        var(--tg-surface) !important;
    }
    #core-detail-card.equipment-detail-card .equipment-detail-hero {
      display: grid;
      grid-template-columns: 52px minmax(0, 1fr);
      gap: 11px;
      align-items: center;
      padding: 11px;
      border-radius: 18px;
      background: rgba(var(--equipment-accent-rgb),0.090);
      border: 1px solid rgba(var(--equipment-accent-rgb),0.22);
      margin-bottom: 8px;
    }
    .equipment-detail-icon {
      width: 52px;
      height: 52px;
      border-radius: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(var(--equipment-accent-rgb),0.12);
      border: 1px solid rgba(var(--equipment-accent-rgb),0.26);
      font-size: 28px;
      filter: drop-shadow(0 7px 15px rgba(0,0,0,0.30));
    }
    .equipment-detail-name {
      color: var(--tg-text);
      font-size: 16px;
      font-weight: 880;
      line-height: 1.14;
      overflow-wrap: anywhere;
    }
    .equipment-detail-role {
      color: var(--tg-muted);
      font-size: 11px;
      font-weight: 680;
      line-height: 1.28;
      margin-top: 3px;
    }
    #core-detail-card.equipment-detail-card .hq-stat-card {
      min-height: 44px;
      border-radius: 15px !important;
      background: rgba(255,255,255,0.040) !important;
      border: 1px solid rgba(255,255,255,0.065) !important;
      color: var(--tg-text) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.035) !important;
    }
    #core-detail-card.equipment-detail-card .hq-stat-card > span:first-child {
      color: var(--tg-muted) !important;
      font-size: 12px !important;
      font-weight: 680 !important;
    }
    #core-detail-card.equipment-detail-card .hq-stat-card .val,
    #core-detail-card.equipment-detail-card .hq-stat-card > span:last-child {
      color: var(--tg-text) !important;
      font-size: 13px !important;
      font-weight: 820 !important;
      text-align: right;
    }
    #core-detail-card.equipment-detail-card [data-core-detail-btn] {
      min-height: 44px !important;
      border-radius: 15px !important;
      border: 1px solid rgba(var(--equipment-accent-rgb),0.26) !important;
      background: rgba(var(--equipment-accent-rgb),0.13) !important;
      color: var(--equipment-accent) !important;
      font-size: 14px !important;
      font-weight: 820 !important;
    }
    #core-detail-card.equipment-detail-card [data-core-detail-btn][style*="f44336"] {
      border-color: rgba(255,69,58,0.26) !important;
      background: rgba(255,69,58,0.12) !important;
      color: #FF453A !important;
    }
    .daily-gift-slots {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
      margin: 10px 0 14px;
    }
    .shop-drive-forge-promo {
      --forge-accent: #B889FF;
      --forge-accent-rgb: 184,137,255;
      --drive-promo-display-font: ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
      --drive-promo-body-font: "Segoe UI", system-ui, sans-serif;
      position: relative; display: flex; flex-direction: column; gap: 8px;
      margin: 10px 0 12px; padding: 16px; overflow: hidden; isolation: isolate;
      border: 1px solid rgba(var(--forge-accent-rgb), 0.44); border-radius: 22px;
      background: radial-gradient(circle at 92% 0%, rgba(113, 190, 255, 0.16), transparent 32%), radial-gradient(circle at 0% 100%, rgba(var(--forge-accent-rgb), 0.22), transparent 55%), linear-gradient(142deg, #201735 0%, #15192a 62%, #111b29 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), inset 0 0 34px rgba(var(--forge-accent-rgb),0.08), 0 14px 30px rgba(0,0,0,0.26);
    }
    .shop-drive-forge-promo[hidden] { display: none; }
    .drive-forge-promo-glow { position: absolute; z-index: -1; top: -48px; right: -24px; width: 178px; height: 178px; border-radius: 50%; background: radial-gradient(circle, rgba(134,203,255,0.20), rgba(var(--forge-accent-rgb),0.11) 42%, transparent 68%); filter: blur(4px); pointer-events: none; }
    .drive-forge-promo-main, .drive-forge-promo-buy { position: relative; z-index: 1; }
    .drive-forge-promo-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title reference" "sub timer"; column-gap: 10px; row-gap: 5px; align-items: start; }
    .drive-forge-promo-copy, .drive-forge-promo-meta { display: contents; }
    .drive-forge-promo-title { grid-area: title; min-width: 0; color: #fff; font-family: var(--drive-promo-display-font); font-size: 20px; line-height: 1.2; font-weight: 800; letter-spacing: -0.012em; white-space: nowrap; text-shadow: 0 2px 5px rgba(0,0,0,0.38); }
    .drive-forge-promo-sub { grid-area: sub; min-width: 0; color: rgba(255,255,255,0.76); font-family: var(--drive-promo-body-font); font-size: 12px; line-height: 1.25; font-weight: 700; }
    .drive-forge-promo-reference { grid-area: reference; justify-self: end; padding: 7px 9px; border: 1px solid rgba(255,255,255,0.11); border-radius: 10px; color: rgba(255,255,255,0.56); background: rgba(4,7,17,0.18); font-family: var(--drive-promo-body-font); font-size: 12px; line-height: 1; font-weight: 700; white-space: nowrap; text-decoration-thickness: 1.5px; text-decoration-color: rgba(238,179,255,0.92); }
    .drive-forge-promo-timer { grid-area: timer; justify-self: end; color: rgba(255,255,255,0.66); font-family: var(--drive-promo-body-font); font-size: 12px; line-height: 1.25; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .drive-forge-promo-bundle { position: relative; z-index: 1; padding: 7px; border: 1px solid rgba(194,157,255,0.18); border-radius: 16px; background: linear-gradient(150deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); }
    .drive-forge-promo-modules { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
    .drive-forge-promo-modules span { aspect-ratio: 1; min-width: 0; display: grid; place-items: center; border: 1px solid rgba(var(--forge-accent-rgb),0.38); min-height: 39px; border-radius: 11px; color: #E4C8FF; background: radial-gradient(circle at 50% 40%, rgba(203,177,255,0.20), transparent 53%), linear-gradient(145deg, rgba(var(--forge-accent-rgb),0.24), rgba(12,14,29,0.18)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -9px 18px rgba(6,8,22,0.14), 0 4px 12px rgba(0,0,0,0.18); font-size: clamp(17px, 5vw, 23px); filter: drop-shadow(0 2px 2px rgba(0,0,0,0.28)); }
    .drive-forge-promo-buy { min-height: 48px; display: grid; grid-template-columns: auto auto; align-items: center; justify-content: center; column-gap: 12px; padding: 0 18px; border: 1px solid rgba(255,239,183,0.48); border-radius: 14px; background: linear-gradient(135deg, #8963EE 0%, #A678F5 48%, #6AB8FF 100%); box-shadow: 0 9px 21px rgba(91,78,212,0.32), inset 0 1px 0 rgba(255,255,255,0.42); }
    .drive-forge-promo-buy-label { min-width: 0; padding-right: 12px; border-right: 1px solid rgba(255,255,255,0.34); color: #fff; font-family: var(--drive-promo-display-font); font-size: 16px; line-height: 1; font-weight: 800; letter-spacing: -0.01em; text-align: right; text-shadow: 0 2px 5px rgba(0,0,0,0.32); }
    .drive-forge-promo-buy-price { color: #fff; font-family: var(--drive-promo-body-font); font-size: 16px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; text-shadow: 0 2px 5px rgba(0,0,0,0.30); }
    .drive-forge-promo-buy:active { transform: translateY(1px) scale(0.992); box-shadow: 0 3px 10px rgba(130,77,220,0.28), inset 0 1px 0 rgba(255,255,255,0.34); }
    .drive-forge-promo-buy:disabled { color: rgba(255,255,255,0.52); background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.10); box-shadow: none; }
    @media (max-width: 360px) { .shop-drive-forge-promo { padding: 14px; border-radius: 19px; } .drive-forge-promo-title { font-size: 19px; } .drive-forge-promo-sub, .drive-forge-promo-timer { font-size: 11px; } .drive-forge-promo-buy { padding: 0 14px; } .drive-forge-promo-buy-label, .drive-forge-promo-buy-price { font-size: 15px; } .drive-forge-promo-modules span { min-height: 38px; border-radius: 10px; } }
    .daily-gift-slots.premium-ready {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .daily-gift-card {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 16px;
      min-height: 156px;
      overflow: hidden;
      border: 1px solid rgba(var(--accent-rgb, 255,213,74), 0.36);
      background:
        radial-gradient(circle at 18% 18%, rgba(var(--accent-rgb, 255,213,74), 0.22), transparent 42%),
        linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 12px 28px rgba(0,0,0,0.22);
    }
    .daily-gift-card::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.12) 48%, transparent 58%);
      transform: translateX(-120%);
      animation: dailyGiftSweep 4.8s ease-in-out infinite;
    }
    @keyframes dailyGiftSweep {
      0%, 62% { transform: translateX(-120%); opacity: 0; }
      72% { opacity: 1; }
      100% { transform: translateX(120%); opacity: 0; }
    }
    .daily-gift-topline,
    .daily-gift-main,
    .daily-gift-timer,
    .daily-gift-claim-btn {
      position: relative;
      z-index: 1;
    }
    .daily-gift-topline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      min-height: 22px;
    }
    .daily-gift-kicker {
      color: rgba(255,255,255,0.62);
      font-size: 11px;
      line-height: 1.2;
      font-weight: 900;
      letter-spacing: 0;
      text-transform: uppercase;
    }
    .daily-gift-badge {
      flex: 0 0 auto;
      padding: 4px 8px;
      border-radius: 999px;
      color: #111;
      background: linear-gradient(135deg, #FFE875, #FF9F43);
      font-size: 10px;
      line-height: 1;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0;
    }
    .daily-gift-main {
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
    }
    .daily-gift-icon {
      width: 58px;
      height: 58px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      font-size: 34px;
      background: rgba(var(--accent-rgb, 255,213,74), 0.18);
      box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb, 255,213,74), 0.28), 0 0 22px rgba(var(--accent-rgb, 255,213,74), 0.18);
    }
    .daily-gift-copy {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .daily-gift-name {
      color: #fff;
      font-size: 18px;
      line-height: 1.15;
      font-weight: 900;
      overflow-wrap: anywhere;
    }
    .daily-gift-sub {
      color: rgba(255,255,255,0.56);
      font-size: 12px;
      line-height: 1.25;
      font-weight: 700;
    }
    .daily-gift-amount {
      padding: 8px 10px;
      min-width: 56px;
      border-radius: 12px;
      color: var(--accent, #FFD54A);
      background: rgba(var(--accent-rgb, 255,213,74), 0.14);
      border: 1px solid rgba(var(--accent-rgb, 255,213,74), 0.28);
      font-size: 16px;
      line-height: 1;
      font-weight: 900;
      text-align: center;
      white-space: nowrap;
    }
    .daily-gift-timer {
      min-height: 16px;
      color: rgba(255,255,255,0.48);
      font-size: 12px;
      line-height: 16px;
      text-align: center;
    }
    .daily-gift-claim-btn {
      margin-top: 0;
      min-height: 44px;
      color: #10131A;
      background: linear-gradient(135deg, var(--accent, #FFD54A), rgba(var(--accent-rgb, 255,213,74), 0.76));
      border: 0;
      box-shadow: 0 8px 18px rgba(var(--accent-rgb, 255,213,74), 0.18);
    }
    .daily-gift-claim-btn:disabled {
      color: rgba(255,255,255,0.56);
      background: rgba(255,255,255,0.08);
      box-shadow: none;
    }
    .daily-gift-claimed {
      filter: saturate(0.84);
    }
    .daily-gift-diamonds { --accent:#5EDBFF; --accent-rgb:94,219,255; }
    .daily-gift-crystals { --accent:#6EE7F9; --accent-rgb:110,231,249; }
    .daily-gift-ether { --accent:#7C8CFF; --accent-rgb:124,140,255; }
    .daily-gift-magnetic_disk { --accent:#7CA7FF; --accent-rgb:124,167,255; }
    .daily-gift-reforge_die { --accent:#B983FF; --accent-rgb:185,131,255; }
    .daily-gift-extractor { --accent:#F2A65A; --accent-rgb:242,166,90; }
    .daily-gift-equipment { --accent:#FF6B5C; --accent-rgb:255,107,92; }
    .daily-gift-box { --accent:#4F8CFF; --accent-rgb:79,140,255; }
    .daily-gift-box-epic { --accent:#D06BFF; --accent-rgb:208,107,255; }

    /* Shop boxes: compact row layout selected from the UX reference pass. */
    #shop-tab-boxes .shop-boxes-row {
      display: flex !important;
      flex-direction: column !important;
      grid-template-columns: none !important;
      gap: 10px !important;
    }
    #shop-tab-boxes .shop-box-card {
      min-height: 76px !important;
      padding: 10px 12px !important;
      display: grid !important;
      grid-template-columns: 50px minmax(0, 1fr) minmax(104px, auto) !important;
      align-items: center !important;
      gap: 10px !important;
      text-align: left !important;
      position: relative !important;
      isolation: isolate;
      border-radius: 18px !important;
      background:
        radial-gradient(circle at 30px 50%, rgba(var(--accent-rgb), 0.15), transparent 82px),
        linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.020)),
        var(--tg-surface, #151A22) !important;
      border: 1px solid rgba(255,255,255,0.085) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.045) !important;
      overflow: hidden !important;
    }
    #shop-tab-boxes .shop-box-card::before {
      content: none !important;
    }
    #shop-tab-boxes .shop-box-card.rare-box { --accent:#4F8CFF; --accent-rgb:79,140,255; }
    #shop-tab-boxes .shop-box-card.epic-box { --accent:#B889FF; --accent-rgb:184,137,255; }
    #shop-tab-boxes .shop-box-card.mythic-box { --accent:#FF3B8A; --accent-rgb:255,59,138; }
    #shop-tab-boxes .shop-box-icon {
      width: 50px !important;
      height: 50px !important;
      border-radius: 15px !important;
      display: grid !important;
      place-items: center !important;
      font-size: 28px !important;
      line-height: 1 !important;
      background: rgba(var(--accent-rgb), 0.12) !important;
      border: 1px solid rgba(var(--accent-rgb), 0.24) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.055) !important;
      filter: none !important;
    }
    #shop-tab-boxes .shop-box-copy {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    #shop-tab-boxes .shop-box-name {
      min-height: 0 !important;
      display: block !important;
      color: var(--tg-text) !important;
      font-size: 15px !important;
      line-height: 1.15 !important;
      font-weight: 880 !important;
      text-align: left !important;
      overflow-wrap: anywhere;
    }
    #shop-tab-boxes .shop-box-price {
      margin: 0 !important;
      color: var(--tg-blue) !important;
      font-size: 14px !important;
      line-height: 1 !important;
      font-weight: 900 !important;
      white-space: nowrap;
    }
    #shop-tab-boxes .shop-box-actions {
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
    }
    #shop-tab-boxes .shop-box-info-btn {
      position: static !important;
      width: 32px !important;
      height: 32px !important;
      min-width: 32px !important;
      min-height: 32px !important;
      flex: 0 0 32px !important;
      padding: 0 !important;
      color: rgba(255,255,255,0.58) !important;
      background: rgba(255,255,255,0.052) !important;
      border: 1px solid rgba(255,255,255,0.10) !important;
      border-radius: 50% !important;
      font-size: 13px !important;
      font-weight: 850 !important;
      font-style: normal !important;
      line-height: 1 !important;
      box-shadow: none !important;
    }
    #shop-tab-boxes .shop-box-info-btn:active {
      color: #fff !important;
      background: rgba(var(--accent-rgb), 0.16) !important;
      border-color: rgba(var(--accent-rgb), 0.28) !important;
    }
    #shop-tab-boxes .shop-box-open-btn {
      width: auto !important;
      min-width: 92px !important;
      min-height: 38px !important;
      padding: 0 14px !important;
      margin: 0 !important;
      border-radius: 13px !important;
      color: #fff !important;
      background: rgba(var(--accent-rgb), 0.14) !important;
      border: 1px solid rgba(var(--accent-rgb), 0.28) !important;
      font-size: 13px !important;
      font-weight: 860 !important;
      line-height: 1 !important;
      white-space: nowrap;
    }
    #shop-tab-boxes .shop-box-open-btn:active {
      background: rgba(var(--accent-rgb), 0.22) !important;
    }
    #shop-tab-boxes .shop-box-open-btn:disabled {
      color: rgba(255,255,255,0.44) !important;
      background: rgba(255,255,255,0.055) !important;
      border-color: rgba(255,255,255,0.075) !important;
      opacity: 1 !important;
    }
    @media (max-width: 380px) {
      #shop-tab-boxes .shop-box-card {
        grid-template-columns: 46px minmax(0, 1fr) minmax(90px, auto) !important;
        gap: 8px !important;
        min-height: 72px !important;
        padding: 9px !important;
      }
      #shop-tab-boxes .shop-box-icon {
        width: 46px !important;
        height: 46px !important;
        border-radius: 14px !important;
        font-size: 25px !important;
      }
      #shop-tab-boxes .shop-box-name {
        font-size: 14px !important;
      }
      #shop-tab-boxes .shop-box-actions {
        gap: 6px;
      }
      #shop-tab-boxes .shop-box-info-btn {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        flex-basis: 28px !important;
      }
      #shop-tab-boxes .shop-box-open-btn {
        min-width: 82px !important;
        min-height: 36px !important;
        padding: 0 10px !important;
      }
    }

    /* Onboarding v2: compact coachmark over the real build/collect/upgrade UI. */
    #tutorial-overlay.open {
      display: block;
    }
    .tutorial-card {
      left: 12px !important;
      right: 12px !important;
      top: max(92px, calc(env(safe-area-inset-top, 0px) + 76px)) !important;
      bottom: auto !important;
      max-width: 430px;
      margin: 0 auto;
      max-height: min(30dvh, 164px);
      padding: 11px 12px 12px !important;
      border-radius: 8px !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012)),
        #101821 !important;
      border: 1px solid rgba(94,219,255,0.34) !important;
      box-shadow:
        0 8px 14px rgba(0,0,0,0.42) !important,
        0 0 0 1px rgba(255,255,255,0.05) inset !important;
      animation: tutorialCardIn 200ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
      contain: layout paint;
    }
    body.tutorial-popup-open .tutorial-card {
      top: max(78px, calc(env(safe-area-inset-top, 0px) + 64px)) !important;
      max-height: min(24dvh, 138px);
    }
    .tutorial-card::before {
      inset: 0 0 auto !important;
      height: 2px;
      background: linear-gradient(90deg, rgba(94,219,255,0), rgba(94,219,255,0.72), rgba(89,224,126,0.48), rgba(94,219,255,0)) !important;
      bottom: auto;
      opacity: 1 !important;
    }
    .tutorial-card::after {
      display: none !important;
      animation: none !important;
    }
    .tutorial-card-head {
      margin-bottom: 8px !important;
    }
    .tutorial-card-glyph {
      width: 34px !important;
      height: 34px !important;
      flex-basis: 34px !important;
      border-radius: 8px !important;
      background: rgba(94,219,255,0.11) !important;
      border-color: rgba(94,219,255,0.34) !important;
      box-shadow: none !important;
    }
    .tutorial-card-step {
      border-radius: 7px !important;
      letter-spacing: 0 !important;
      font-size: 11px !important;
      color: #BDEFFF !important;
      background: rgba(94,219,255,0.10) !important;
      border-color: rgba(94,219,255,0.24) !important;
    }
    .tutorial-progress {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 5px !important;
      margin-bottom: 10px !important;
    }
    .tutorial-progress-seg {
      height: 4px !important;
      border-radius: 999px !important;
      background: rgba(255,255,255,0.10) !important;
    }
    .tutorial-progress-seg.done {
      background: linear-gradient(90deg, #59E07E, #5EDBFF) !important;
    }
    .tutorial-progress-seg.active {
      background: rgba(94,219,255,0.22) !important;
    }
    .tutorial-progress-seg.active::after {
      background: linear-gradient(90deg, transparent, #5EDBFF, transparent) !important;
      animation-duration: 1.25s !important;
    }
    .tutorial-card-title {
      font-size: 17px !important;
      line-height: 1.18 !important;
      letter-spacing: 0 !important;
      margin-bottom: 4px !important;
    }
    .tutorial-card-body {
      font-size: 12.5px !important;
      line-height: 1.34 !important;
      color: rgba(255,255,255,0.78) !important;
    }
    .tutorial-card-action {
      border-top: 1px solid rgba(255,255,255,0.10) !important;
      margin-top: 8px !important;
      padding-top: 8px !important;
    }
    .tutorial-card-action-hint {
      min-width: 150px;
      color: #BDEFFF !important;
      letter-spacing: 0 !important;
      font-size: 12px !important;
      line-height: 1.25 !important;
      font-weight: 760;
    }
    .tutorial-card-action-hint::before {
      content: '›';
      display: inline-block;
      margin-right: 7px;
      color: #5EDBFF;
      font-weight: 900;
    }
    .tutorial-card-controls {
      gap: 7px !important;
    }
    .tutorial-card-mini-btn {
      min-height: 30px !important;
      border-radius: 7px !important;
      letter-spacing: 0 !important;
      text-transform: none !important;
      font-size: 11px !important;
      font-weight: 780 !important;
      transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1), background 140ms ease, border-color 140ms ease !important;
    }
    .tutorial-card-skip-btn {
      color: #BDEFFF !important;
      background: rgba(94,219,255,0.10) !important;
      border-color: rgba(94,219,255,0.28) !important;
    }
    .tutorial-card-reset-btn {
      color: #FFD0CA !important;
      background: rgba(255,107,92,0.10) !important;
      border-color: rgba(255,107,92,0.28) !important;
    }
    .tutorial-card-mini-btn:active {
      transform: scale(0.97) !important;
    }
    .tutorial-card.is-paused {
      border-color: rgba(89,224,126,0.55) !important;
      box-shadow:
        0 8px 14px rgba(0,0,0,0.42) !important,
        0 0 14px rgba(89,224,126,0.14) !important;
    }
    .tutorial-card.is-paused .tutorial-card-glyph {
      animation: tutorialGlyphPop 680ms cubic-bezier(0.23, 1, 0.32, 1) both;
    }
    @keyframes tutorialGlyphPop {
      0% { transform: scale(0.86); }
      46% { transform: scale(1.12); }
      100% { transform: scale(1); }
    }
    .tutorial-locked #bottom-panel,
    .tutorial-locked[data-tutorial-step="1"] #bottom-panel {
      pointer-events: none !important;
      opacity: 0.32 !important;
      filter: grayscale(0.45) !important;
      animation: none !important;
    }
    .tutorial-card-arrow {
      display: none !important;
      animation: none !important;
    }

    .tutorial-target-element {
      position: relative;
      z-index: 2;
      filter: drop-shadow(0 0 10px rgba(94,219,255,0.62));
    }
    .tutorial-target-element::after,
    body.tutorial-target-build-tile #popup-card.popup-card-build-menu .build-primary-tile::after,
    body.tutorial-target-upgrade-button #popup-card.popup-card-mine .mine-pop-actions button:first-child::after {
      content: '';
      position: absolute;
      inset: -5px;
      border-radius: inherit;
      border: 1px solid rgba(94,219,255,0.78);
      pointer-events: none;
      animation: tutorialTargetPulse 1350ms cubic-bezier(0.22, 1, 0.36, 1) infinite;
    }
    body.tutorial-target-build-tile #popup-card.popup-card-build-menu .build-primary-tile,
    body.tutorial-target-upgrade-button #popup-card.popup-card-mine .mine-pop-actions button:first-child {
      position: relative;
      border-color: rgba(94,219,255,0.64) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 0 12px rgba(94,219,255,0.24) !important;
    }
    @keyframes tutorialTargetPulse {
      0%, 100% { opacity: 0.42; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.025); }
    }

    .tutorial-burst {
      position: fixed;
      left: 50%;
      top: 32%;
      z-index: 9700;
      width: 1px;
      height: 1px;
      pointer-events: none;
      transform: translate(-50%, -50%);
    }
    .tutorial-burst-ring {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 92px;
      height: 92px;
      margin: -46px 0 0 -46px;
      border-radius: 50%;
      border: 2px solid rgba(255,213,74,0.72);
      animation: tutorialBurstRing 620ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    .tutorial-burst-chip {
      position: absolute;
      left: 50%;
      top: 50%;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 136px;
      justify-content: center;
      padding: 10px 14px;
      border-radius: 8px;
      transform: translate(-50%, -50%);
      color: #10131A;
      background: linear-gradient(135deg, #FFD54A, #59E07E);
      box-shadow: 0 12px 30px rgba(0,0,0,0.36), 0 0 24px rgba(255,213,74,0.26);
      font-size: 13px;
      line-height: 1;
      font-weight: 900;
      animation: tutorialBurstChip 820ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    .tutorial-burst-icon {
      font-size: 19px;
      line-height: 1;
    }
    .tutorial-burst-particle {
      position: absolute;
      left: 0;
      top: 0;
      color: #FFD54A;
      font-size: 16px;
      font-weight: 900;
      text-shadow: 0 0 14px rgba(255,213,74,0.72);
      animation: tutorialBurstParticle 760ms cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms) forwards;
    }
    .tutorial-burst-collect .tutorial-burst-ring {
      border-color: rgba(94,219,255,0.72);
    }
    .tutorial-burst-collect .tutorial-burst-chip {
      background: linear-gradient(135deg, #5EDBFF, #FFD54A);
    }
    .tutorial-burst-upgrade .tutorial-burst-ring {
      border-color: rgba(89,224,126,0.78);
    }
    .tutorial-burst-upgrade .tutorial-burst-chip {
      background: linear-gradient(135deg, #59E07E, #FFE7A3);
    }
    @keyframes tutorialBurstRing {
      0% { opacity: 0; transform: scale(0.35); }
      35% { opacity: 1; }
      100% { opacity: 0; transform: scale(1.35); }
    }
    @keyframes tutorialBurstChip {
      0% { opacity: 0; transform: translate(-50%, -50%) scale(0.72); }
      18% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
      70% { opacity: 1; transform: translate(-50%, -58%) scale(1); }
      100% { opacity: 0; transform: translate(-50%, -72%) scale(0.98); }
    }
    @keyframes tutorialBurstParticle {
      0% { opacity: 0; transform: translate(0,0) scale(0.5); }
      18% { opacity: 1; }
      100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.05); }
    }

    #tutorial-done-overlay {
      background:
        radial-gradient(ellipse at 50% 24%, rgba(89,224,126,0.16) 0%, transparent 48%),
        radial-gradient(ellipse at 18% 78%, rgba(94,219,255,0.10) 0%, transparent 42%),
        linear-gradient(180deg, #0B0E13 0%, #05070A 100%) !important;
    }
    .tutorial-done-list {
      grid-template-columns: 1fr !important;
      max-width: 300px !important;
      gap: 7px !important;
    }
    .tutorial-done-item {
      border-radius: 8px !important;
      font-size: 12px !important;
    }
    .tutorial-done-item:nth-child(4),
    .tutorial-done-item:nth-child(5),
    .tutorial-done-item:nth-child(6) {
      display: none !important;
    }
    .tutorial-done-item:nth-child(1) { animation-delay: 0.35s !important; }
    .tutorial-done-item:nth-child(2) { animation-delay: 0.48s !important; }
    .tutorial-done-item:nth-child(3) { animation-delay: 0.61s !important; }
    .tutorial-done-btn {
      border-radius: 8px !important;
    }

    @media (prefers-reduced-motion: reduce) {
      .tutorial-card,
      .tutorial-card::after,
      .tutorial-progress-seg.active::after,
      .tutorial-card-arrow,
      .tutorial-target-element,
      .tutorial-target-element::after,
      body.tutorial-target-build-tile #popup-card.popup-card-build-menu .build-primary-tile::after,
      body.tutorial-target-upgrade-button #popup-card.popup-card-mine .mine-pop-actions button:first-child::after,
      .tutorial-card.is-paused .tutorial-card-glyph,
      #tutorial-welcome-overlay::before,
      .tutorial-gps-icon,
      .tutorial-done-icon,
      .tutorial-done-item,
      .tutorial-done-btn,
      .tutorial-burst,
      .tutorial-burst * {
        animation: none !important;
        transition: none !important;
      }
      .tutorial-burst {
        display: none !important;
      }
    }

/* Equipment UI v2.1 — one rarity-led tile contract across every surface. */
:root {
  --equipment-grid-cell: clamp(64px, calc((100vw - 100px) / 4), 76px);
}

.equipment-inv-cell,
.equipment-socket.installed {
  --equipment-rarity-rgb: 174,179,188;
}
.equipment-inv-cell.rarity-uncommon,
.equipment-socket.installed.rarity-uncommon { --equipment-rarity-rgb: 52,199,89; }
.equipment-inv-cell.rarity-rare,
.equipment-socket.installed.rarity-rare { --equipment-rarity-rgb: 100,210,255; }
.equipment-inv-cell.rarity-epic,
.equipment-socket.installed.rarity-epic { --equipment-rarity-rgb: 175,114,255; }
.equipment-inv-cell.rarity-mythic,
.equipment-socket.installed.rarity-mythic { --equipment-rarity-rgb: 255,45,149; }
.equipment-inv-cell.rarity-legendary,
.equipment-socket.installed.rarity-legendary { --equipment-rarity-rgb: 255,194,51; }

.mine-equipment-rack {
  grid-template-columns: repeat(4, var(--equipment-grid-cell)) !important;
  grid-auto-rows: var(--equipment-grid-cell) !important;
  justify-content: center !important;
  align-content: start !important;
  align-items: stretch !important;
  gap: 10px !important;
}

#profile-modal #cores-inv-grid > .equipment-inv-cell,
.craft-inv-grid > .equipment-inv-cell,
.mine-equipment-rack > .equipment-socket {
  box-sizing: border-box !important;
  width: var(--equipment-grid-cell) !important;
  height: var(--equipment-grid-cell) !important;
  min-width: var(--equipment-grid-cell) !important;
  min-height: var(--equipment-grid-cell) !important;
  aspect-ratio: 1 !important;
}

.equipment-inv-cell,
#profile-modal .equipment-inv-cell,
.craft-inv-grid > .equipment-inv-cell {
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  padding: 5px 5px 18px !important;
  overflow: hidden !important;
  border: 1.5px solid rgba(var(--equipment-rarity-rgb),0.64) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 50% -22%, rgba(var(--equipment-rarity-rgb),0.42), transparent 58%),
    linear-gradient(180deg, rgba(var(--equipment-rarity-rgb),0.115), rgba(255,255,255,0.020) 66%),
    var(--tg-surface-2) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 0 0 1px rgba(var(--equipment-rarity-rgb),0.08) !important;
  text-align: initial;
}

/* Equipment type is expressed by its object emoji, never by the tile colour. */
.equipment-inv-cell.equipment-drive,
.equipment-inv-cell.equipment-accumulator,
.equipment-inv-cell.equipment-protector,
.equipment-inv-cell.equipment-extinguisher {
  --equipment-accent: rgb(var(--equipment-rarity-rgb)) !important;
  --equipment-accent-rgb: var(--equipment-rarity-rgb) !important;
}

.equipment-inv-cell .inv-icon-shell {
  position: absolute !important;
  inset: 5px 5px 16px !important;
  width: auto !important;
  height: auto !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.equipment-inv-cell .inv-emoji {
  font-size: clamp(28px, 8vw, 34px) !important;
  line-height: 1.08 !important;
  filter: drop-shadow(0 5px 9px rgba(0,0,0,0.32));
}
.equipment-inv-effect,
.equipment-socket-effect {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-variant-numeric: tabular-nums;
}
.equipment-inv-effect {
  left: 4px !important;
  right: 4px !important;
  bottom: 5px !important;
  min-height: 13px;
  color: rgba(255,255,255,0.94) !important;
  font-size: 9px !important;
  font-weight: 880 !important;
  line-height: 1.2 !important;
}
.equipment-stat-value { line-height: 1 !important; }
.equipment-stat-emoji {
  display: inline-flex;
  align-items: center;
  line-height: 1.2 !important;
  font-size: 1.05em;
}
.equipment-plus-badge,
.equipment-socket-level {
  position: absolute !important;
  top: 5px !important;
  right: 5px !important;
  z-index: 2;
  min-width: 18px;
  padding: 2px 5px !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: rgba(8,10,14,0.68) !important;
  font-size: 8.5px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-align: center;
}

.mine-equipment-rack {
  max-height: min(420px, 56vh);
  padding: 1px 0 calc(12px + env(safe-area-inset-bottom,0px)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
.mine-equipment-rack > .equipment-socket {
  position: relative;
  display: grid !important;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr) !important;
  place-items: center !important;
  padding: 5px 5px 18px !important;
  overflow: hidden;
  border-radius: 16px !important;
}
.equipment-socket.installed {
  border: 1.5px solid rgba(var(--equipment-rarity-rgb),0.64) !important;
  background:
    radial-gradient(circle at 50% -22%, rgba(var(--equipment-rarity-rgb),0.42), transparent 58%),
    linear-gradient(180deg, rgba(var(--equipment-rarity-rgb),0.115), rgba(255,255,255,0.020) 66%),
    var(--tg-surface-2) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07) !important;
}
.equipment-socket.empty {
  padding: 5px !important;
  border: 1px solid rgba(174,179,188,0.24) !important;
  background: rgba(174,179,188,0.045) !important;
  color: rgba(255,255,255,0.52) !important;
}
.equipment-socket-icon {
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  background: transparent !important;
  font-size: clamp(28px, 8vw, 34px) !important;
  line-height: 1.08 !important;
  filter: drop-shadow(0 5px 9px rgba(0,0,0,0.32)) !important;
}
.equipment-socket.empty .equipment-socket-icon {
  color: rgba(255,255,255,0.46) !important;
  font-size: 27px !important;
  filter: none !important;
}
.equipment-socket-effect {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 5px;
  min-height: 13px;
  color: rgba(255,255,255,0.94) !important;
  font-size: 9px !important;
  font-weight: 880 !important;
  line-height: 1.2 !important;
}
.equipment-socket-index { display: none !important; }

/* Installation is a true secondary surface: the mine sheet stays mounted
   underneath, including its detent and native scroll position. */
#core-detail-overlay.equipment-picker-overlay {
  align-items: flex-end;
  justify-content: center;
  padding: 0 8px;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#core-detail-card.equipment-picker-detail-card {
  width: 100% !important;
  max-width: 480px !important;
  height: min(86dvh, calc(100dvh - 8px), 760px) !important;
  max-height: min(86dvh, calc(100dvh - 8px), 760px) !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 6px 12px 0 !important;
  border: 1px solid var(--tg-border-strong) !important;
  border-bottom: 0 !important;
  border-radius: 22px 22px 0 0 !important;
  background: var(--mine-sheet-surface) !important;
  box-shadow: 0 -18px 48px rgba(0,0,0,0.36) !important;
  overflow: hidden !important;
}
#core-detail-card.equipment-picker-detail-card .core-detail-heading,
#core-detail-card.equipment-picker-detail-card .core-detail-picker-actions {
  flex: 0 0 auto;
}
#core-detail-card.equipment-picker-detail-card .core-detail-picker-body {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  box-sizing: border-box;
  margin-top: 8px;
  padding: 6px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.060);
  border-radius: 16px;
  background: rgba(255,255,255,0.040);
}
#core-detail-card.equipment-picker-detail-card .core-detail-picker-body::after {
  content: '';
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  height: calc(72px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0), var(--tg-surface) 88%);
}
#core-detail-card.equipment-picker-detail-card .equipment-picker-scroll-region {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
#core-detail-card.equipment-picker-detail-card .equipment-picker-grid.equipment-picker-grid-virtual {
  position: relative !important;
  display: block !important;
  padding: 2px 0 calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  overflow: clip !important;
}
#core-detail-card.equipment-picker-detail-card .equipment-picker-grid-spacer { width: 1px; pointer-events: none; }
#core-detail-card.equipment-picker-detail-card .equipment-picker-grid-layer {
  position: absolute;
  inset: 2px 0 calc(76px + env(safe-area-inset-bottom, 0px));
  display: grid;
  grid-template-columns: repeat(4, var(--equipment-grid-cell));
  gap: 10px;
  justify-content: center;
  align-content: start;
}
#core-detail-card.equipment-picker-detail-card .equipment-picker-virtual-cell {
  width: var(--equipment-grid-cell);
  height: var(--equipment-grid-cell);
  min-width: 0;
  min-height: 0;
}
#core-detail-card.equipment-picker-detail-card .equipment-picker-virtual-cell > .equipment-inv-cell {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

/* The mine popup also styles every button gold. Keep sockets neutral when
   empty and rarity-led when occupied, and reset the retired multi-row layout. */
#popup-card.popup-card-mine .mine-equipment-rack > .equipment-socket {
  grid-template: minmax(0, 1fr) / minmax(0, 1fr) !important;
}
#popup-card.popup-card-mine .mine-equipment-rack > .equipment-socket.installed {
  border: 1.5px solid rgba(var(--equipment-rarity-rgb),0.64) !important;
  background:
    radial-gradient(circle at 50% -22%, rgba(var(--equipment-rarity-rgb),0.42), transparent 58%),
    linear-gradient(180deg, rgba(var(--equipment-rarity-rgb),0.115), rgba(255,255,255,0.020) 66%),
    var(--tg-surface-2) !important;
  color: var(--tg-text) !important;
}
#popup-card.popup-card-mine .mine-equipment-rack > .equipment-socket.empty {
  border: 1px solid rgba(174,179,188,0.24) !important;
  background: rgba(174,179,188,0.045) !important;
  color: rgba(255,255,255,0.46) !important;
  box-shadow: none !important;
}

#core-detail-overlay.open {
  pointer-events: auto;
}

/* Auto-craft preview owns the body scroll; its bottom action remains visible. */
#craft-overlay:has(.equipment-auto-preview) .craft-forge {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding-bottom: calc(88px + env(safe-area-inset-bottom,0px)) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#craft-overlay:has(.equipment-auto-preview) .craft-inv-label,
#craft-overlay:has(.equipment-auto-preview) .craft-inv-grid {
  display: none !important;
}
.equipment-auto-chip-summary { color: rgba(255,255,255,0.72) !important; }

/* Base, materials and result are peers in the same craft equation. */
.item-craft-panel .equipment-craft-flow .craft-cell,
.item-craft-panel .equipment-craft-flow .craft-cell.target,
.item-craft-panel .equipment-craft-flow .equipment-craft-cell,
.equipment-craft-panel .equipment-craft-flow .craft-cell,
.equipment-craft-panel .equipment-craft-flow .equipment-craft-cell {
  box-sizing: border-box !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  flex: 0 0 52px !important;
  border-radius: 14px !important;
  font-size: 24px !important;
}

/* Mine sheet v3 -----------------------------------------------------------
   The card has one physical height and one transform owner.  Do not add
   max-height/grid-template transitions here: they force layout of the rack on
   every animation frame and visibly step on mobile GPUs. */
#popup-card.popup-card-mine.popup-card-own-mine {
  height: min(86dvh, calc(100dvh - 8px), 760px) !important;
  max-height: min(86dvh, calc(100dvh - 8px), 760px) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 6px 12px 0 !important;
  overflow: hidden !important;
  animation: none !important;
  transition: none !important;
  will-change: transform;
  contain: paint;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
#popup-card.popup-card-mine.popup-card-own-mine.mine-sheet-pending {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
#popup-card.popup-card-mine.popup-card-own-mine.mine-sheet-ready { visibility: visible; }
#popup-card.popup-card-mine.popup-card-own-mine.mine-pop-dragging { transition: none !important; }
/* The own-mine controller owns dismissal. Never let the shared popup close
   rule replace its inline transform with a full-height generic card frame. */
#popup-overlay.is-closing #popup-card.popup-card-mine.popup-card-own-mine {
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}
#popup-card.popup-card-mine.popup-card-own-mine .mine-pop-extra {
  display: block !important;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 8px !important;
  padding: 0 2px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  overflow-y: auto !important;
  overflow-x: clip !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  border-radius: 16px 16px 0 0;
  opacity: 0;
  pointer-events: none;
  transition: none !important;
  scrollbar-width: none;
}
#popup-card.popup-card-mine.popup-card-own-mine .mine-pop-extra::-webkit-scrollbar { display: none; }
#popup-card.popup-card-mine.popup-card-own-mine.mine-sheet-details-visible .mine-pop-extra {
  opacity: 1;
  pointer-events: auto;
}
#popup-card.popup-card-mine.popup-card-own-mine .mine-pop-extra > .mine-pop-extra-inner {
  min-height: 100%;
  overflow: visible !important;
  padding: 1px 0 0;
}
#popup-card.popup-card-mine.popup-card-own-mine .mine-pop-actions { margin-bottom: 0; }

/* The rack deliberately uses the same direct grid contract as inventory.
   Mine level is capped at 200, so native scrolling is faster and safer than
   recycling DOM cells under a gesture. */
#popup-card.popup-card-mine.popup-card-own-mine .mine-equipment-rack {
  position: static !important;
  display: grid !important;
  grid-template-columns: repeat(4, var(--equipment-grid-cell)) !important;
  grid-auto-rows: var(--equipment-grid-cell) !important;
  justify-content: center !important;
  align-content: start !important;
  gap: 10px !important;
  max-height: none !important;
  min-height: 0;
  margin-top: 8px;
  padding: 6px !important;
  overflow: visible !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,0.040) !important;
  border: 1px solid rgba(255,255,255,0.060) !important;
  touch-action: pan-y;
}