* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
      -webkit-text-size-adjust: 100%;
      -moz-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: #0a0a0a !important;
      background-image: none !important;
      background-size: auto !important;
      color: #e0e0e0;
      overflow: hidden;
      height: 100vh;
      height: 100svh; /* stable viewport height — doesn't shift when mobile browser chrome hides */
      width: 100vw;
    }

    /* App Container */
    #app {
      display: none;
      flex-direction: column;
      height: 100vh;
      height: 100svh;
      width: 100vw;
    }

    /* Content Area */
    #content {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 16px;
      padding-bottom: 80px;
    }

    /* Account System Styles */
    .account-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(10, 10, 10, 0.98);
      z-index: 10001;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: account-fade-in 0.3s ease-out;
    }

    @keyframes account-fade-in {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .account-container {
      background: #1a1a1a;
      border: 1px solid #2a2a2a;
      border-radius: 4px;
      padding: 32px 24px;
      max-width: 400px;
      width: 90%;
      max-height: 90vh;
      overflow-y: auto;
    }

    .account-header {
      text-align: center;
      margin-bottom: 24px;
    }

    .account-icon {
      font-size: 48px;
      margin-bottom: 12px;
    }

    .account-title {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 8px;
    }

    .account-subtitle {
      font-size: 13px;
      opacity: 0.7;
      line-height: 1.5;
    }

    .account-form {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .account-input-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .account-label {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 1px;
      opacity: 0.8;
    }

    .account-input {
      padding: 12px;
      background: #0a0a0a;
      border: 1px solid #2a2a2a;
      border-radius: 4px;
      color: #e0e0e0;
      font-size: 14px;
      font-family: inherit;
      transition: border-color 0.2s;
    }

    .account-input:focus {
      outline: none;
      border-color: #8ab4f8;
    }

    .account-input.error {
      border-color: #f28b82;
    }

    .account-error {
      font-size: 12px;
      color: #f28b82;
      display: none;
    }

    .account-error.visible {
      display: block;
    }

    .account-hint {
      font-size: 11px;
      opacity: 0.6;
      line-height: 1.4;
    }

    .account-btn {
      padding: 14px 20px;
      background: #2a2a2a;
      border: 1px solid #4a4a4a;
      border-radius: 4px;
      color: #e0e0e0;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .account-btn:hover {
      background: #3a3a3a;
      border-color: #5a5a5a;
    }

    .account-btn:active {
      transform: scale(0.98);
    }

    .account-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    .account-btn-primary {
      background: #8ab4f8;
      border-color: #8ab4f8;
      color: #0a0a0a;
    }

    .account-btn-primary:hover {
      background: #9ac4ff;
      border-color: #9ac4ff;
    }

    .account-divider {
      text-align: center;
      margin: 20px 0;
      position: relative;
    }

    .account-divider::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 1px;
      background: #2a2a2a;
    }

    .account-divider-text {
      position: relative;
      display: inline-block;
      padding: 0 12px;
      background: #1a1a1a;
      font-size: 12px;
      opacity: 0.6;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .account-info-box {
      padding: 12px;
      background: rgba(138, 180, 248, 0.1);
      border-left: 3px solid #8ab4f8;
      border-radius: 4px;
      font-size: 12px;
      line-height: 1.5;
      margin-bottom: 16px;
    }

    .account-warning-box {
      padding: 12px;
      background: rgba(253, 214, 99, 0.1);
      border-left: 3px solid #fdd663;
      border-radius: 4px;
      font-size: 12px;
      line-height: 1.5;
      margin-bottom: 16px;
    }

    .account-success-message {
      text-align: center;
      padding: 40px 20px;
    }

    .account-success-icon {
      font-size: 64px;
      margin-bottom: 16px;
    }

    .account-success-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 8px;
      color: #81c995;
    }

    .account-success-text {
      font-size: 13px;
      opacity: 0.8;
      line-height: 1.5;
      margin-bottom: 24px;
    }

    /* Responsive adjustments */
    @media (max-width: 480px) {
      .account-container {
        padding: 24px 16px;
      }
      
      .account-title {
        font-size: 18px;
      }
    }

    /* Tab Bar */
    #tab-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 64px;
      background: #1a1a1a;
      border-top: 1px solid #2a2a2a;
      display: flex;
      justify-content: space-around;
      align-items: center;
      z-index: 1000;
    }

    .tab {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      min-height: 44px;
      cursor: pointer;
      transition: opacity 0.2s;
      padding: 8px;
    }

    .tab-icon {
      font-size: 24px;
      opacity: 0.5;
      transition: opacity 0.2s;
    }

    .tab-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      opacity: 0.5;
      transition: opacity 0.2s;
    }

    .tab.active .tab-icon,
    .tab.active .tab-label {
      opacity: 1;
    }

    .tab:active {
      opacity: 0.7;
    }

    /* Tab Content Styles */
    .tab-content {
      display: none;
    }

    .tab-content.active {
      display: block;
    }

    /* Profile Tab - Clean Background (No Grid) */
    #profile-tab {
      position: relative;
      background: #0a0a0a;
    }

    #profile-tab::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 0.15;
      pointer-events: auto;
      z-index: 0;
      /* Grid pattern completely removed for clean look */
      background: transparent;
    }

    /* Ensure all Profile content appears above the map */
    #profile-tab > * {
      position: relative;
      z-index: 1;
    }

    /* Stats Card Styling */
    .crime-card.card-stats {
      background: linear-gradient(135deg, #1a1a2a 0%, #0f0f1a 100%);
      cursor: pointer;
    }

    .crime-card.card-stats .crime-card-icon {
      filter: drop-shadow(0 2px 4px rgba(138, 180, 248, 0.4));
    }

    .crime-card.card-stats:hover {
      border-color: #8ab4f8;
      box-shadow: 
        0 8px 16px rgba(0, 0, 0, 0.6),
        0 0 0 2px rgba(138, 180, 248, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    /* Heat Log Card Styling */
    .crime-card.card-heat-log {
      background: linear-gradient(135deg, #2a1a1a 0%, #1a0a0a 100%);
      cursor: pointer;
    }

    .crime-card.card-heat-log .crime-card-icon {
      filter: drop-shadow(0 2px 4px rgba(242, 139, 130, 0.4));
    }

    .crime-card.card-heat-log .crime-card-value {
      color: #f28b82;
      font-size: 14px;
      font-weight: 500;
    }

    .crime-card.card-heat-log:hover {
      border-color: #f28b82;
      box-shadow: 
        0 8px 16px rgba(0, 0, 0, 0.6),
        0 0 0 2px rgba(242, 139, 130, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    /* Expense Log Card Styling */
    .crime-card.card-expense-log {
      background: linear-gradient(135deg, #1a1a0f 0%, #0f0f0a 100%);
      cursor: pointer;
    }

    .crime-card.card-expense-log .crime-card-icon {
      filter: drop-shadow(0 2px 4px rgba(129, 201, 149, 0.4));
    }

    .crime-card.card-expense-log .crime-card-value {
      color: #fdd663;
      font-size: 14px;
      font-weight: 500;
    }

    .crime-card.card-expense-log:hover {
      border-color: #fdd663;
      box-shadow: 
        0 8px 16px rgba(0, 0, 0, 0.6),
        0 0 0 2px rgba(253, 214, 99, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    /* Players Online Card Styling */
    .crime-card.card-players-online {
      background: linear-gradient(135deg, #1a2a1a 0%, #0f1a0f 100%);
      cursor: pointer;
    }

    .crime-card.card-players-online .crime-card-value {
      display: flex;
      align-items: center;
      gap: 6px;
      color: #81c995;
      font-size: 14px;
      font-weight: 500;
    }

    .online-indicator {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #81c995;
      box-shadow: 0 0 8px rgba(129, 201, 149, 0.6);
      animation: pulse-green 2s ease-in-out infinite;
    }

    @keyframes pulse-green {
      0%, 100% { 
        opacity: 1;
        transform: scale(1);
      }
      50% { 
        opacity: 0.6;
        transform: scale(1.2);
      }
    }

    .crime-card.card-players-online:hover {
      border-color: #81c995;
      box-shadow: 
        0 8px 16px rgba(0, 0, 0, 0.6),
        0 0 0 2px rgba(129, 201, 149, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    /* Leaderboard Card Styling */
    .crime-card.card-leaderboard {
      background: linear-gradient(135deg, #2a2a1a 0%, #1a1a0f 100%);
      cursor: pointer;
      border-color: rgba(253, 214, 99, 0.2);
    }

    .crime-card.card-leaderboard .crime-card-icon {
      animation: trophy-shine 2s ease-in-out infinite;
      font-size: 36px;
      filter: drop-shadow(0 0 8px rgba(253, 214, 99, 0.6)) 
              drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    }

    @keyframes trophy-shine {
      0%, 100% { 
        filter: drop-shadow(0 0 6px rgba(253, 214, 99, 0.5)) 
                drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
        transform: scale(1);
      }
      50% { 
        filter: drop-shadow(0 0 12px rgba(253, 214, 99, 0.8)) 
                drop-shadow(0 2px 8px rgba(253, 214, 99, 0.4));
        transform: scale(1.05);
      }
    }

    .crime-card.card-leaderboard .crime-card-value {
      color: #fdd663;
      font-size: 14px;
      font-weight: 500;
    }

    .crime-card.card-leaderboard:hover {
      border-color: #fdd663;
      box-shadow: 
        0 8px 16px rgba(0, 0, 0, 0.6),
        0 0 0 2px rgba(253, 214, 99, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    
    /* Chat System Styles */
    .chat-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(10, 10, 10, 0.95);
      z-index: 1000;
      display: flex;
      flex-direction: column;
      animation: chat-fade-in 0.3s ease-out;
    }

    @keyframes chat-fade-in {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .chat-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px;
      background: #1a1a1a;
      border-bottom: 1px solid #2a2a2a;
    }

    .chat-title {
      font-size: 18px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .chat-close-btn {
      background: transparent;
      border: 1px solid #2a2a2a;
      color: #e0e0e0;
      font-size: 18px;
      padding: 8px 12px;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.2s;
      min-width: 44px;
      min-height: 44px;
    }

    .chat-close-btn:hover {
      background: #2a2a2a;
      border-color: #4a4a4a;
    }

    .chat-messages-container {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .chat-message {
      display: flex;
      flex-direction: column;
      gap: 4px;
      max-width: 80%;
      animation: message-slide-in 0.2s ease-out;
    }

    @keyframes message-slide-in {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes floatUp {
      0% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
      50% {
        opacity: 1;
        transform: translateY(-30px) scale(1.2);
      }
      100% {
        opacity: 0;
        transform: translateY(-60px) scale(0.8);
      }
    }

    .chat-message.own {
      align-self: flex-end;
    }

    .chat-message.other {
      align-self: flex-start;
    }

    .chat-message-header {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      opacity: 0.7;
    }

    .chat-message.own .chat-message-header {
      flex-direction: row-reverse;
    }

    .chat-message-username {
      font-weight: 600;
    }

    .chat-message-time {
      font-size: 10px;
    }

    .chat-message-bubble {
      padding: 10px 14px;
      border-radius: 12px;
      word-wrap: break-word;
      line-height: 1.4;
      font-size: 14px;
    }

    .chat-message.own .chat-message-bubble {
      background: #8ab4f8;
      color: #0a0a0a;
      border-bottom-right-radius: 4px;
    }

    .chat-message.other .chat-message-bubble {
      background: #2a2a2a;
      color: #e0e0e0;
      border-bottom-left-radius: 4px;
    }

    .chat-input-container {
      padding: 16px;
      background: #1a1a1a;
      border-top: 1px solid #2a2a2a;
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .chat-input {
      flex: 1;
      padding: 12px;
      background: #0a0a0a;
      border: 1px solid #2a2a2a;
      border-radius: 4px;
      color: #e0e0e0;
      font-size: 14px;
      font-family: inherit;
      resize: none;
      max-height: 100px;
      min-height: 44px;
    }

    .chat-input:focus {
      outline: none;
      border-color: #8ab4f8;
    }

    .chat-send-btn {
      background: #8ab4f8;
      border: 1px solid #8ab4f8;
      color: #0a0a0a;
      font-size: 20px;
      padding: 12px 16px;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.2s;
      min-width: 44px;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .chat-send-btn:hover {
      background: #9ac4ff;
      border-color: #9ac4ff;
    }

    .chat-send-btn:active {
      transform: scale(0.95);
    }

    .chat-send-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    .chat-empty {
      text-align: center;
      padding: 60px 20px;
      opacity: 0.5;
    }

    .chat-empty-icon {
      font-size: 48px;
      margin-bottom: 12px;
    }

    .chat-empty-text {
      font-size: 14px;
    }

    /* Player Profile Modal */
    .player-profile-modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(10, 10, 10, 0.95);
      z-index: 1100;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      animation: modal-fade-in 0.3s ease-out;
    }

    .player-profile-content {
      background: #1a1a1a;
      border: 1px solid #2a2a2a;
      border-radius: 4px;
      padding: 24px;
      max-width: 400px;
      width: 100%;
      max-height: 90vh;
      overflow-y: auto;
    }

    .player-profile-header {
      text-align: center;
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 1px solid #2a2a2a;
    }

    .player-profile-avatar {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: linear-gradient(135deg, #8ab4f8 0%, #5a84c8 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      font-weight: 700;
      color: #0a0a0a;
      margin: 0 auto 12px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    }

    .player-profile-username {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .player-profile-status {
      font-size: 12px;
      opacity: 0.7;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    .player-profile-stats {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin-bottom: 20px;
    }

    .player-profile-stat {
      background: #0a0a0a;
      padding: 12px;
      border-radius: 4px;
      border: 1px solid #2a2a2a;
      text-align: center;
    }

    .player-profile-stat-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 1px;
      opacity: 0.6;
      margin-bottom: 4px;
    }

    .player-profile-stat-value {
      font-size: 16px;
      font-weight: 600;
    }

    .player-profile-actions {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .player-action-btn {
      padding: 14px 20px;
      background: #2a2a2a;
      border: 1px solid #4a4a4a;
      border-radius: 4px;
      color: #e0e0e0;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .player-action-btn:hover {
      background: #3a3a3a;
      border-color: #5a5a5a;
    }

    .player-action-btn:active {
      transform: scale(0.98);
    }

    .player-action-btn.primary {
      background: #8ab4f8;
      border-color: #8ab4f8;
      color: #0a0a0a;
    }

    .player-action-btn.primary:hover {
      background: #9ac4ff;
      border-color: #9ac4ff;
    }

    /* Leaderboard Styles */
    .leaderboard-container {
      margin: 20px 0;
      padding: 16px;
      background: #0a0a0a;
      border: 1px solid #2a2a2a;
      border-radius: 4px;
    }
    
    .leaderboard-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-height: 400px;
      overflow-y: auto;
      padding-right: 4px;
    }
    
    .leaderboard-entry {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px;
      background: #1a1a1a;
      border: 1px solid #2a2a2a;
      border-radius: 4px;
      transition: all 0.2s ease;
    }
    
    .leaderboard-entry:hover {
      background: #222222;
      border-color: #3a3a3a;
    }
    
    .leaderboard-current-player {
      background: rgba(138, 180, 248, 0.1);
      border: 2px solid #8ab4f8;
      box-shadow: 0 0 12px rgba(138, 180, 248, 0.3);
      animation: leaderboard-pulse 2s ease-in-out infinite;
    }
    
    @keyframes leaderboard-pulse {
      0%, 100% {
        box-shadow: 0 0 12px rgba(138, 180, 248, 0.3);
      }
      50% {
        box-shadow: 0 0 16px rgba(138, 180, 248, 0.5);
      }
    }
    
    .leaderboard-rank {
      font-size: 24px;
      min-width: 40px;
      text-align: center;
      flex-shrink: 0;
    }
    
    .leaderboard-player-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    
    .leaderboard-username {
      font-size: 14px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .player-badge {
      font-size: 9px;
      padding: 2px 6px;
      background: #8ab4f8;
      color: #0a0a0a;
      border-radius: 3px;
      font-weight: 700;
      letter-spacing: 0.5px;
    }
    
    .leaderboard-stats {
      display: flex;
      gap: 12px;
      font-size: 11px;
    }
    
    .leaderboard-stat {
      display: flex;
      align-items: center;
      gap: 4px;
      opacity: 0.8;
    }
    
    .leaderboard-stat-icon {
      font-size: 12px;
    }
    
    .leaderboard-empty {
      text-align: center;
      padding: 40px 20px;
    }
    
    .leaderboard-empty-icon {
      font-size: 64px;
      margin-bottom: 16px;
      opacity: 0.5;
    }
    
    .leaderboard-empty-text {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 8px;
      opacity: 0.8;
    }
    
    .leaderboard-empty-subtext {
      font-size: 13px;
      opacity: 0.6;
    }

    /* Main Profile Card on Crime Board */
    .crime-card.card-profile {
      grid-column: span 2;
      min-height: 140px;
      background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .crime-card.card-profile:hover {
      transform: scale(1.03) rotate(0deg) translateY(-2px);
      box-shadow: 
        0 8px 16px rgba(0, 0, 0, 0.6),
        0 0 0 2px rgba(138, 180, 248, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .crime-card.card-profile:active {
      transform: scale(0.98) rotate(0deg);
    }

    .profile-card-avatar {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: linear-gradient(135deg, #8ab4f8 0%, #5a84c8 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      font-weight: 700;
      color: #0a0a0a;
      flex-shrink: 0;
      box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.4),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2);
    }

    .profile-card-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .profile-card-name {
      font-size: 18px;
      font-weight: 700;
      color: #e0e0e0;
      margin-bottom: 4px;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }

    .profile-card-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      padding: 4px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .profile-card-row:last-child {
      border-bottom: none;
    }

    .profile-card-label {
      opacity: 0.7;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .profile-card-value {
      font-weight: 600;
      color: #8ab4f8;
    }

    @media (max-width: 480px) {
      .crime-card.card-profile {
        grid-column: span 2;
      }
      
      .profile-card-avatar {
        width: 56px;
        height: 56px;
        font-size: 28px;
      }
      
      .profile-card-name {
        font-size: 16px;
      }
    }

    /* Crime Board Card System */
    .crime-board {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 16px;
      margin-top: 20px;
      padding: 0 4px;
    }

    .crime-card {
      background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
      border: 1px solid #2a2a2a;
      border-radius: 6px;
      padding: 16px 12px;
      min-height: 120px;
      position: relative;
      cursor: pointer;
      user-select: none;
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
      transform-origin: center;
      -webkit-tap-highlight-color: transparent;
    }

    /* Pinned card variations with slight rotation */
    .crime-card:nth-child(1) {
      transform: rotate(-1deg);
    }

    .crime-card:nth-child(2) {
      transform: rotate(0.5deg);
    }

    .crime-card:nth-child(3) {
      transform: rotate(-0.5deg);
    }

    .crime-card:nth-child(4) {
      transform: rotate(1deg);
    }

    .crime-card:nth-child(5) {
      transform: rotate(-0.8deg);
    }

    .crime-card:nth-child(6) {
      transform: rotate(0.3deg);
    }

    /* Hover/tap states */
    .crime-card:hover {
      transform: scale(1.02) rotate(0deg) translateY(-2px);
      box-shadow: 
        0 8px 16px rgba(0, 0, 0, 0.6),
        0 0 0 2px rgba(138, 180, 248, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
      border-color: #3a3a3a;
      z-index: 10;
    }

    .crime-card:active {
      transform: scale(0.98) rotate(0deg);
      box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.4),
        0 0 0 3px rgba(138, 180, 248, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
      transition: all 0.1s ease;
    }

    /* Card header with icon */
    .crime-card-icon {
      font-size: 32px;
      margin-bottom: 8px;
      display: block;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    }

    .crime-card-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1px;
      opacity: 0.6;
      margin-bottom: 4px;
    }

    .crime-card-value {
      font-size: 20px;
      font-weight: 600;
      line-height: 1.2;
      color: #e0e0e0;
    }

    /* Specialty card colors */
    .crime-card.card-cash .crime-card-value {
      color: #81c995;
    }

    .crime-card.card-heat .crime-card-value {
      color: #f28b82;
    }

    .crime-card.card-xp .crime-card-value {
      color: #8ab4f8;
    }

    .crime-card.card-rep .crime-card-value {
      color: #fdd663;
    }

    /* Tape effect for pinned look */
    .crime-card::before {
      content: '';
      position: absolute;
      top: -6px;
      right: 20%;
      width: 40px;
      height: 12px;
      background: rgba(253, 214, 99, 0.15);
      border: 1px solid rgba(253, 214, 99, 0.1);
      transform: rotate(-5deg);
      border-radius: 1px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }

    /* Stats card with sub-items */
    .crime-card-stats {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: 4px;
    }

    .crime-card-stat-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      padding: 4px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .crime-card-stat-row:last-child {
      border-bottom: none;
    }

    .crime-card-stat-label {
      opacity: 0.7;
      font-size: 11px;
    }

    .crime-card-stat-value {
      font-weight: 600;
      color: #8ab4f8;
    }

    /* Mobile optimizations */
    @media (max-width: 480px) {
      .crime-board {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
      }

      .crime-card {
        min-height: 110px;
        padding: 14px 10px;
      }

      .crime-card-icon {
        font-size: 28px;
      }

      .crime-card-value {
        font-size: 18px;
      }
    }

    /* Profile Tab */
    .stat-grid {
      display: grid;
      gap: 12px;
      margin-top: 16px;
    }

    .stat-card {
      background: #1a1a1a;
      border: 1px solid #2a2a2a;
      padding: 16px;
      border-radius: 4px;
    }

    .stat-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1px;
      opacity: 0.6;
      margin-bottom: 8px;
    }

    .stat-value {
      font-size: 24px;
      font-weight: 600;
    }

    .stat-row {
      display: flex;
      justify-content: space-between;
      padding: 12px 0;
      border-bottom: 1px solid #2a2a2a;
    }

    .stat-row:last-child {
      border-bottom: none;
    }

    /* Placeholder */
    .placeholder {
      text-align: center;
      padding: 40px 20px;
      opacity: 0.5;
    }

    .placeholder-icon {
      font-size: 48px;
      margin-bottom: 16px;
    }

    .placeholder-text {
      font-size: 14px;
    }

    /* Header */
    .page-header {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 20px;
      padding-bottom: 12px;
      border-bottom: 1px solid #2a2a2a;
    }

    /* City Map - Clean Background (No Grid) */
    #city-map {
      position: relative;
      z-index: 1;
      width: 100%;
      aspect-ratio: 9 / 16;
      max-height: calc(100vh - 140px);
      max-height: calc(100svh - 140px); /* stable viewport height — doesn't change when browser chrome hides */
      /* background-image removed: managed by DayNightCycle on #map-background */
      background-color: #1a1a2e;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      border: 1px solid #2a2a2a;
      border-radius: 4px;
      overflow: hidden;
      margin: 0 auto;
      touch-action: manipulation; /* Enable taps without 300ms delay */
    }
    
    
    /* Turf Map Viewport + World (Clash-of-Clans style pan/zoom) */
    #map-viewport {
      position: absolute;
      inset: 0;
      overflow: hidden;
      touch-action: manipulation; /* Enable taps without 300ms delay; JS handles pan/zoom */
      -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }
    #map-world{
      will-change: transform;
    }
    #map-viewport.is-panning{
      cursor: grabbing;
    }


    #map-world {
      position: absolute;
      top: 0;
      left: 0;
      /* Size is set in JS to match the map image's natural pixel size */
      transform-origin: 0 0;
      will-change: transform;
    }
/* Remove any grid patterns from Turf tab */
    #turf-tab {
      background: transparent;
      position: relative;
    }
    
    #turf-tab::before,
    #turf-tab::after {
      display: none;
    }
    
    /* Reduce empty space on turf tab */
    #turf-tab .page-header {
      margin-bottom: 2px;
      padding-top: 6px;
      padding-bottom: 2px;
      border-bottom: none;
    }

    #turf-tab .new-heat-bar-wrapper {
      margin: 2px 8px 2px;
    }

    #turf-tab .test-controls {
      margin-top: 2px;
      margin-bottom: 2px;
    }

    #turf-tab #area-weather-info {
      margin-top: 2px;
      margin-bottom: 2px;
    }

    #turf-tab .turf-action-bar {
      margin: 2px 16px;
    }
    
    /* CRITICAL: Keep icons within map bounds */
    #map-icons {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      pointer-events: none;
    }
    
    #map-icons > * {
      pointer-events: auto;
    }
    
    /* DIAGNOSTIC: Remove any potential grid-creating styles */
    #tile-layer,
    #tile-layer *,
    #city-map,
    #city-map * {
      border: none !important;
      outline: none !important;
      box-shadow: none !important;
    }
    
    /* Force SVG paths to have no stroke */
    svg path,
    svg rect {
      stroke: none !important;
      stroke-width: 0 !important;
    }

    #map-canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      touch-action: manipulation;
    }

    #map-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
      background-repeat: no-repeat;
      background-position: 0 0;
      background-size: 100% 100%;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: crisp-edges;
    }

    .map-icon {
      position: absolute;
      font-size: 40px;
      transform: translate(-50%, -50%);
      transition: all 0.3s ease;
      pointer-events: auto;
      cursor: pointer;
      user-select: none;
      filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.8));
      /* Minimum touch target for mobile */
      min-width: 48px;
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .map-icon:hover {
      z-index: 9999;
    }

    .map-icon.dormant {
      opacity: 1;
      filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.8)) brightness(0.9);
    }

    .map-icon.active {
      opacity: 1;
      filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.8)) brightness(1.1);
      animation: icon-pulse 3s ease-in-out infinite;
    }

    @keyframes icon-pulse {
      0%, 100% {
        transform: translate(-50%, -50%) scale(1);
      }
      50% {
        transform: translate(-50%, -50%) scale(1.05);
      }
    }

    /* Icon label tooltip */
    /* --bld-scale is set by BuildingScaleSystem; counter-scale keeps text readable */
    .map-icon::after {
      content: attr(data-label);
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%) scale(calc(1 / var(--bld-scale, 1)));
      padding: 4px 8px;
      background: rgba(26, 26, 26, 0.95);
      border: 1px solid #2a2a2a;
      border-radius: 3px;
      font-size: 10px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s;
      margin-top: 4px;
      z-index: 10000;
    }

    .map-icon:hover::after {
      opacity: 1;
    }

    /* Safe house icon never dims */
    /* Safe house uses a PNG sprite instead of emoji text, so font-size: 0 hides any residual text */
    .map-icon[data-type="safeHouse"] {
      opacity: 1;
      filter: none;
      animation: none;
      font-size: 0;
    }

    /* Safe House PNG sprite on turf map */
    .safehouse-map-sprite {
      width: 60px;
      height: auto;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: crisp-edges;
      pointer-events: none;
    }

    /* Safehouse Upgrades Tab */
    .safehouse-upgrades-header {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 16px;
      background: rgba(255, 255, 255, 0.04);
      border-radius: 10px;
      margin-bottom: 16px;
    }

    .safehouse-current-preview {
      width: 72px;
      height: auto;
      border-radius: 8px;
      border: 2px solid #3a3a3a;
      background: #1a1a1a;
    }

    .safehouse-upgrade-cards-grid {
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding-bottom: 24px;
    }

    .safehouse-upgrade-card {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      border: 2px solid #3a3a3a;
      transition: transform 0.2s ease, border-color 0.2s ease;
    }

    .safehouse-upgrade-card.upgrade-owned {
      border-color: #2d7a2d;
    }

    .safehouse-upgrade-card.upgrade-available {
      border-color: #ffd700;
    }

    .safehouse-upgrade-card.upgrade-cant-afford {
      border-color: #555;
      opacity: 0.7;
    }

    .safehouse-upgrade-card.upgrade-locked {
      border-color: #333;
      opacity: 0.5;
    }

    .upgrade-card-img {
      width: 100%;
      height: auto;
      display: block;
    }

    .upgrade-card-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 10px;
      background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
      display: flex;
      justify-content: center;
      align-items: flex-end;
    }

    .upgrade-card-badge {
      font-size: 13px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 6px;
      text-align: center;
    }

    .upgrade-card-badge.owned-badge {
      background: rgba(45, 122, 45, 0.8);
      color: #7fff7f;
    }

    .upgrade-card-badge.locked-badge {
      background: rgba(0, 0, 0, 0.6);
      color: #aaa;
    }

    .upgrade-buy-btn {
      background: linear-gradient(135deg, #ffd700, #f0a500);
      color: #1a1a1a;
      border: none;
      padding: 10px 20px;
      border-radius: 8px;
      font-weight: 700;
      font-size: 14px;
      cursor: pointer;
      transition: transform 0.15s ease;
    }

    .upgrade-buy-btn:active {
      transform: scale(0.95);
    }

    /* Property Building Icons - Player-owned real estate */
    .property-building {
      position: absolute;
      font-size: 32px;
      transform: translate(-50%, -50%);
      transition: all 0.3s ease;
      pointer-events: auto;
      cursor: pointer;
      user-select: none;
      filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6));
      z-index: 100;
      /* Minimum touch target for mobile (44x44 CSS px before map scale) */
      min-width: 48px;
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .property-building:hover {
      transform: translate(-50%, -50%) scale(1.1);
      filter: drop-shadow(0 4px 8px rgba(255, 215, 0, 0.4));
      z-index: 9999;
    }

    .property-building.owned {
      filter: drop-shadow(0 3px 6px rgba(0, 255, 0, 0.5));
    }

    .property-building.owned:hover {
      filter: drop-shadow(0 4px 8px rgba(0, 255, 0, 0.7));
      z-index: 9999;
    }

    /* Property building label tooltip */
    /* --bld-scale is set by BuildingScaleSystem; counter-scale keeps text readable */
    .property-building::after {
      content: attr(data-label);
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%) scale(calc(1 / var(--bld-scale, 1)));
      padding: 6px 10px;
      background: rgba(26, 26, 26, 0.98);
      border: 1px solid #3a3a3a;
      border-radius: 4px;
      font-size: 11px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s;
      margin-top: 6px;
      color: #ffd700;
      font-weight: 600;
      z-index: 10000;
    }

    .property-building:hover::after {
      opacity: 1;
    }

    .property-building.owned::after {
      color: #00ff00;
    }

    /* Property ownership indicator */
    .property-building::before {
      content: '●';
      position: absolute;
      top: -8px;
      right: -8px;
      font-size: 12px;
      color: #888;
    }

    .property-building.owned::before {
      color: #00ff00;
      animation: pulse-green 2s ease-in-out infinite;
    }

    @keyframes pulse-green {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }

    /* ========================================
       PROPERTY MODAL BUTTONS
       ======================================== */
    .prop-btn {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 12px 16px;
      border: 1px solid #333;
      border-radius: 8px;
      color: #e0e0e0;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      margin-bottom: 8px;
      min-height: 48px;
      pointer-events: auto;
      touch-action: manipulation;
      position: relative;
      z-index: 15002;
      user-select: none;
      -webkit-user-select: none;
    }
    .prop-btn:active { transform: scale(0.97); }
    .prop-btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
      filter: grayscale(0.5);
    }
    .prop-btn-icon { font-size: 20px; flex-shrink: 0; }
    .prop-btn-label { flex: 1; text-align: left; }
    .prop-btn-cost {
      font-size: 12px;
      opacity: 0.8;
      white-space: nowrap;
    }

    /* Collect Income — green */
    .prop-btn-collect {
      background: linear-gradient(135deg, #1a3a1a 0%, #0d260d 100%);
      border-color: #2d6b2d;
    }
    .prop-btn-collect:hover:not(:disabled) {
      background: linear-gradient(135deg, #245524 0%, #153a15 100%);
      border-color: #3d8b3d;
      box-shadow: 0 0 12px rgba(0, 255, 0, 0.15);
    }

    /* Upgrade — gold/amber */
    .prop-btn-upgrade {
      background: linear-gradient(135deg, #3a2e0a 0%, #261f06 100%);
      border-color: #6b5a1a;
    }
    .prop-btn-upgrade:hover:not(:disabled) {
      background: linear-gradient(135deg, #4a3d10 0%, #362c08 100%);
      border-color: #8b7520;
      box-shadow: 0 0 12px rgba(255, 215, 0, 0.2);
    }

    /* Max Level — star gold */
    .prop-btn-maxed {
      background: linear-gradient(135deg, #2a2210 0%, #1a1508 100%);
      border-color: #554a20;
      color: #ffd700;
    }

    /* Purchase — blue */
    .prop-btn-purchase {
      background: linear-gradient(135deg, #0a1a3a 0%, #061026 100%);
      border-color: #1a4a8b;
    }
    .prop-btn-purchase:hover:not(:disabled) {
      background: linear-gradient(135deg, #102855 0%, #0a1a3a 100%);
      border-color: #2a6abb;
      box-shadow: 0 0 12px rgba(74, 144, 226, 0.2);
    }

    /* Close — neutral dark */
    .prop-btn-close {
      background: #1a1a1a;
      border-color: #333;
      justify-content: center;
      font-weight: 400;
      color: #999;
      min-height: 40px;
      margin-bottom: 0;
    }
    .prop-btn-close:hover { background: #252525; border-color: #444; color: #ccc; }

    /* ========================================
       PROPERTY POPUP (in-game alert replacement)
       ======================================== */
    .property-popup-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.75);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 16000;
      animation: property-popup-fade-in 0.25s ease-out;
      padding: 16px;
    }

    @keyframes property-popup-fade-in {
      from { opacity: 0; transform: scale(0.95); }
      to { opacity: 1; transform: scale(1); }
    }

    .property-popup {
      background: linear-gradient(145deg, #1e1e1e 0%, #141414 100%);
      border: 1px solid #333;
      border-radius: 12px;
      padding: 28px 24px 20px;
      max-width: 320px;
      width: 100%;
      text-align: center;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
      animation: property-popup-slide-in 0.3s ease-out;
    }

    @keyframes property-popup-slide-in {
      from { transform: translateY(20px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }

    .property-popup-icon {
      font-size: 48px;
      margin-bottom: 12px;
    }

    .property-popup-title {
      font-size: 18px;
      font-weight: 700;
      color: #e0e0e0;
      margin-bottom: 8px;
    }

    .property-popup-message {
      font-size: 14px;
      color: #999;
      line-height: 1.6;
      margin-bottom: 20px;
    }

    .property-popup-btn {
      display: inline-block;
      padding: 10px 40px;
      background: linear-gradient(135deg, #1a3a1a 0%, #0d260d 100%);
      border: 1px solid #2d6b2d;
      border-radius: 8px;
      color: #e0e0e0;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      touch-action: manipulation;
      user-select: none;
      -webkit-user-select: none;
    }

    .property-popup-btn:hover {
      background: linear-gradient(135deg, #245524 0%, #153a15 100%);
      border-color: #3d8b3d;
      box-shadow: 0 0 12px rgba(0, 255, 0, 0.15);
    }

    .property-popup-btn:active {
      transform: scale(0.97);
    }

    /* ========================================
       UPGRADE PARTICLE EFFECT
       ======================================== */
    .upgrade-particle-burst {
      position: absolute;
      transform: translate(-50%, -50%);
      width: 0;
      height: 0;
      z-index: 99;
      pointer-events: none;
    }

    .upgrade-particle {
      position: absolute;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: radial-gradient(circle, #ffd700, #ff8c00);
      box-shadow: 0 0 6px 2px rgba(255, 215, 0, 0.6);
      animation: upgrade-particle-fly 0.9s ease-out forwards;
    }

    @keyframes upgrade-particle-fly {
      0% {
        transform: rotate(var(--angle)) translateY(0) scale(1);
        opacity: 1;
      }
      70% {
        opacity: 0.8;
      }
      100% {
        transform: rotate(var(--angle)) translateY(calc(var(--dist) * -1)) scale(0);
        opacity: 0;
      }
    }

    .upgrade-ring {
      position: absolute;
      left: -30px;
      top: -30px;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      border: 2px solid rgba(255, 215, 0, 0.8);
      box-shadow: 0 0 15px rgba(255, 215, 0, 0.4), inset 0 0 15px rgba(255, 215, 0, 0.1);
      animation: upgrade-ring-expand 0.8s ease-out forwards;
    }

    @keyframes upgrade-ring-expand {
      0% {
        transform: scale(0.3);
        opacity: 1;
      }
      100% {
        transform: scale(2.2);
        opacity: 0;
      }
    }

    /* Cop Car on Map (2D marker only — 3D overlay renders the vehicle) */
    .cop-car {
      position: absolute;
      width: 32px;
      height: 32px;
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 3;

      /* Hide the legacy emoji; keep a stable box for getBoundingClientRect() */
      font-size: 0px;
      line-height: 0px;
      color: transparent;
      text-shadow: none;

      /* Disable marker smoothing; 3D module handles realistic motion */
      transition: none !important;
      filter: none !important;
      opacity: 0; /* invisible position marker */
    }

    /* Disable legacy heat-based pulsing on the hidden marker */
    .cop-car.medium-heat,
    .cop-car.high-heat {
      animation: none !important;
    }

    /* 3D overlay canvas (added by CopCar3D) */
    /* Layer lives inside #map-world (z-index: 1) so buildings in
       #map-entities (z-index: 2) always render on top of the cop car. */
    #cop-car-3d-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }

/* Police lights animations */
    .cop-car.no-heat {
      /* No lights */
    }

    .cop-car.medium-heat {
      animation: amber-pulse 1s ease-in-out infinite;
    }

    @keyframes amber-pulse {
      0%, 100% { filter: drop-shadow(0 3px 6px rgba(255, 165, 0, 0.8)); }
      50% { filter: drop-shadow(0 3px 10px rgba(255, 165, 0, 0.3)); }
    }

    .cop-car.high-heat {
      animation: red-blue-pulse 0.5s ease-in-out infinite;
    }

    @keyframes red-blue-pulse {
      0%, 100% { filter: drop-shadow(0 3px 10px rgba(255, 0, 0, 1)); }
      50% { filter: drop-shadow(0 3px 10px rgba(0, 0, 255, 1)); }
    }

    /* Interactive Building Icons - Mobile Optimized */
    .building-icon {
      cursor: pointer;
      z-index: 5;
      transition: transform 0.12s ease, filter 0.12s ease;
      /* Touch-friendly tap area */
      min-width: 44px;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .building-icon:hover {
      z-index: 100;
    }

    .building-icon:active {
      transform: translate(-50%, -70%) scale(1.05) !important;
    }

    /* 2.5D Building Styles */
    .building-3d {
      pointer-events: auto;
    }
    
    .building-3d svg {
      display: block;
      overflow: visible;
    }
    
    /* Building type specific glow on hover/touch */
    .building-3d[data-type="gun_shop"]:hover,
    .building-3d[data-type="gun_shop"]:active {
      filter: brightness(1.2) drop-shadow(0 0 6px rgba(242, 139, 130, 0.6));
    }

    .building-3d[data-type="chop_shop"]:hover,
    .building-3d[data-type="chop_shop"]:active {
      filter: brightness(1.2) drop-shadow(0 0 6px rgba(138, 180, 248, 0.6));
    }

    .building-3d[data-type="casino"]:hover,
    .building-3d[data-type="casino"]:active {
      filter: brightness(1.2) drop-shadow(0 0 8px rgba(253, 214, 99, 0.7));
    }

    .building-3d[data-type="nightclub"]:hover,
    .building-3d[data-type="nightclub"]:active {
      filter: brightness(1.2) drop-shadow(0 0 6px rgba(186, 130, 245, 0.6));
    }

    .building-3d[data-type="safehouse"]:hover,
    .building-3d[data-type="safehouse"]:active {
      filter: brightness(1.2) drop-shadow(0 0 6px rgba(129, 201, 149, 0.6));
    }

    /* Character Sprite */
    .character-icon {
      position: absolute;
      font-size: 28px;
      transform: translate(-50%, -50%);
      z-index: 10;
      animation: idle-sway 3s ease-in-out infinite;
    }

    @keyframes idle-sway {
      0%, 100% {
        transform: translate(-50%, -50%) rotate(-2deg);
      }
      50% {
        transform: translate(-50%, -50%) rotate(2deg);
      }
    }

    .character-silhouette {
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    }

    /* Status Indicator */
    .status-indicator {
      position: absolute;
      top: -18px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 20px;
      z-index: 11;
      pointer-events: none;
      transition: opacity 0.3s;
    }

    .status-indicator.laying_low {
      opacity: 0.6;
      filter: grayscale(50%);
    }

    .status-indicator.active {
      opacity: 1;
      animation: status-pulse 2s ease-in-out infinite;
    }

    @keyframes status-pulse {
      0%, 100% {
        opacity: 1;
      }
      50% {
        opacity: 0.7;
      }
    }

    /* Status Controls */
    .status-controls {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
      padding: 8px;
      background: #1a1a1a;
      border: 1px solid #2a2a2a;
      border-radius: 4px;
    }

    .status-btn {
      flex: 1;
      padding: 12px;
      background: #0a0a0a;
      border: 1px solid #2a2a2a;
      border-radius: 4px;
      color: #e0e0e0;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 44px;
    }

    .status-btn:active {
      transform: scale(0.98);
    }

    .status-btn.selected {
      background: #2a2a2a;
      border-color: #4a4a4a;
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .status-btn.laying_low.selected {
      color: #8ab4f8;
    }

    .status-btn.active-status.selected {
      color: #f28b82;
    }

    /* Free Roam Controls */
    .roam-controls {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      padding: 8px;
      background: #1a1a1a;
      border: 1px solid #2a2a2a;
      border-radius: 4px;
      position: relative;
    }

    .roam-btn {
      flex: 1;
      padding: 10px;
      background: #0a0a0a;
      border: 1px solid #2a2a2a;
      border-radius: 4px;
      color: #e0e0e0;
      font-size: 13px;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 44px;
    }

    .roam-btn:active {
      transform: scale(0.98);
    }

    .roam-btn.active {
      background: #2a2a2a;
      border-color: #4a4a4a;
      color: #8ab4f8;
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    /* ========================================
       TURF ACTION BAR - Sprite Buttons
       ======================================== */
    .turf-action-bar {
      display: flex;
      gap: 8px;
      margin: 8px 16px;
      align-items: flex-start;
      position: relative;
      z-index: 5; /* Above #city-map (z-index: 1) so buttons stay visible even when translated past the map */
    }

    .turf-action-btn-wrapper {
      position: relative;
      flex: 1;
      max-width: 120px;
      z-index: 10; /* Always above #city-map (z-index: 1) so buttons are clickable and draggable */
    }

    .turf-sprite-btn {
      display: block;
      width: 100%;
      padding: 0;
      border: none;
      background: none;
      cursor: pointer;
      transition: transform 0.15s ease, filter 0.15s ease;
      -webkit-tap-highlight-color: transparent;
    }

    .turf-sprite-btn img {
      width: 100%;
      height: auto;
      display: block;
      pointer-events: none;
    }

    .turf-sprite-btn:active {
      transform: scale(0.95);
      filter: brightness(0.85);
    }

    /* Turf Defense small square button */
    .turf-defense-btn-small {
      display: inline-block;
      width: 36px;
      height: 36px;
      margin: 4px 16px 0;
      padding: 0;
      border: 2px solid rgba(255, 152, 0, 0.7);
      border-radius: 6px;
      background: linear-gradient(135deg, rgba(40, 40, 40, 0.95), rgba(60, 30, 10, 0.95));
      color: #FFD700;
      font-size: 16px;
      line-height: 32px;
      text-align: center;
      cursor: pointer;
      z-index: 10;
      box-shadow: 0 0 6px rgba(255, 152, 0, 0.4);
      transition: transform 0.15s ease, box-shadow 0.15s ease;
      -webkit-tap-highlight-color: transparent;
    }

    .turf-defense-btn-small:active {
      transform: scale(0.92);
      box-shadow: 0 0 10px rgba(255, 152, 0, 0.7);
    }

    /* Popover Menu - positioned via JS relative to turf tab */
    .turf-popover-menu {
      position: absolute;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
      z-index: 100;
      width: 200px;
    }

    .turf-popover-menu.open {
      opacity: 1;
      pointer-events: auto;
    }

    .turf-popover-inner {
      position: relative;
      width: 100%;
    }

    .turf-popover-bg {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 8px;
    }

    /* Invisible hit areas overlaying the PNG button regions */
    .turf-popover-hitareas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .turf-popover-hit {
      position: absolute;
      left: 4.6%;
      width: 91.6%;
      border: none;
      background: transparent;
      cursor: pointer;
      border-radius: 4px;
      transition: transform 0.1s ease, box-shadow 0.15s ease, filter 0.1s ease;
      -webkit-tap-highlight-color: transparent;
      outline: none;
      padding: 0;
      color: transparent;
      font-size: 0;
    }

    /* Each button precisely positioned over its PNG region (matches cropped image) */
    .turf-popover-hit[data-action="laylow"] {
      top: 10.5%;
      height: 21.7%;
    }

    .turf-popover-hit[data-action="active"] {
      top: 36.2%;
      height: 23.4%;
    }

    .turf-popover-hit[data-action="freeroam"] {
      top: 63.5%;
      height: 24.2%;
    }

    /* Press-inward effect on click */
    .turf-popover-hit:active {
      transform: scale(0.94);
      box-shadow: inset 0 3px 10px rgba(0,0,0,0.6);
      filter: brightness(0.85);
    }

    /* Selected state - subtle glow highlight */
    .turf-popover-hit.selected {
      box-shadow: inset 0 0 0 2px rgba(138,180,248,0.5), 0 0 10px rgba(138,180,248,0.25);
    }

    /* Combined selected + active press */
    .turf-popover-hit.selected:active {
      transform: scale(0.94);
      box-shadow: inset 0 3px 10px rgba(0,0,0,0.6), inset 0 0 0 2px rgba(138,180,248,0.5);
      filter: brightness(0.85);
    }

    /* Inventory Slots Panel - positioned via JS relative to turf tab */
    .inventory-slots-panel {
      position: absolute;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
      z-index: 100;
      width: 220px;
    }

    .inventory-slots-panel.open {
      opacity: 1;
      pointer-events: auto;
    }

    .inventory-slots-panel img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 8px;
    }

    /* Turf Modal Backdrop - blur, dimmer, vignette effect */
    .turf-modal-backdrop {
      position: absolute;
      inset: 0;
      z-index: 90;
      pointer-events: none;
      opacity: 0;
      background: radial-gradient(ellipse at center, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.85) 100%);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      transition: opacity 0.35s ease;
    }

    .turf-modal-backdrop.active {
      opacity: 1;
      pointer-events: auto;
    }


    .map-refresh-btn {
      position: absolute;
      top: 50%;
      right: 8px;
      transform: translateY(-50%);
      width: 36px;
      height: 36px;
      padding: 0;
      background: #0a0a0a;
      border: 1px solid #2a2a2a;
      border-radius: 4px;
      color: #8ab4f8;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .map-refresh-btn:hover {
      background: #1a1a1a;
      border-color: #4a4a4a;
    }
    
    .map-refresh-btn:active {
      transform: translateY(-50%) scale(0.95);
    }
    
    .map-refresh-btn.spinning {
      animation: spin 0.5s ease-in-out;
    }
    
    @keyframes spin {
      from { transform: translateY(-50%) rotate(0deg); }
      to { transform: translateY(-50%) rotate(360deg); }
    }

    /* Zoom Controls */
    .zoom-controls {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      padding: 8px 12px;
      background: #1a1a1a;
      border: 1px solid #2a2a2a;
      border-radius: 4px;
      justify-content: center;
    }

    .zoom-btn {
      width: 40px;
      height: 40px;
      padding: 0;
      background: #0a0a0a;
      border: 1px solid #2a2a2a;
      border-radius: 4px;
      color: #e0e0e0;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      -webkit-tap-highlight-color: transparent;
    }

    .zoom-btn:active {
      transform: scale(0.95);
      background: #2a2a2a;
    }

    .zoom-btn:hover {
      background: #1a1a1a;
      border-color: #4a4a4a;
    }

    .zoom-level {
      min-width: 60px;
      text-align: center;
      font-size: 13px;
      font-weight: 600;
      color: #8ab4f8;
    }

    /* Map Zoom Wrapper */
    .map-zoomable {
      position: relative;
      overflow: hidden;
      touch-action: pan-y; /* Disable default touch actions for custom pinch zoom */
    }

    .map-zoom-wrapper {
      width: 100%;
      height: 100%;
      transform-origin: center center;
      transition: transform 0.2s ease-out;
      will-change: transform;
      position: relative;
    }

    /* Event Notification */
    .event-notification {
      position: absolute;
      top: 12px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(26, 26, 26, 0.95);
      border: 1px solid #2a2a2a;
      padding: 12px 16px;
      border-radius: 4px;
      font-size: 13px;
      z-index: 100;
      max-width: 80%;
      text-align: center;
      animation: event-fade-in 0.3s ease-out;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    }

    @keyframes event-fade-in {
      from {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
      }
    }

    /* Floating Pickups */
    .floating-pickup {
      position: absolute;
      font-size: 20px;
      pointer-events: none;
      animation: pickup-float 2s ease-out forwards;
      z-index: 50;
    }

    @keyframes pickup-float {
      0% {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0);
      }
      100% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(-40px);
      }
    }

    /* Death Overlay */
    .death-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 64px;
      background: rgba(10, 10, 10, 0.95);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 200;
      animation: death-fade-in 0.5s ease-out;
    }

    @keyframes death-fade-in {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .death-icon {
      font-size: 72px;
      margin-bottom: 20px;
      animation: death-pulse 1.5s ease-in-out infinite;
    }

    @keyframes death-pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.1); }
    }

    .death-message {
      font-size: 18px;
      margin-bottom: 24px;
      opacity: 0.9;
    }

    .respawn-btn {
      padding: 14px 28px;
      background: #2a2a2a;
      border: 1px solid #4a4a4a;
      border-radius: 4px;
      color: #e0e0e0;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s;
      min-height: 44px;
    }

    .respawn-btn:hover {
      background: #3a3a3a;
      border-color: #5a5a5a;
    }

    .respawn-btn:active {
      transform: scale(0.98);
    }

    /* Event Modal */
    .event-modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 64px;
      background: rgba(10, 10, 10, 0.95);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 15000;
      animation: modal-fade-in 0.3s ease-out;
      padding: 16px;
      pointer-events: auto;
    }

    @keyframes modal-fade-in {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    .event-modal-content {
      background: #1a1a1a;
      border: 1px solid #2a2a2a;
      border-radius: 4px;
      padding: 24px;
      max-width: 400px;
      width: 100%;
      max-height: 80vh;
      overflow-y: auto;
      pointer-events: auto !important;
      z-index: 15001;
      position: relative;
    }

    .event-modal-icon {
      font-size: 56px;
      text-align: center;
      margin-bottom: 16px;
    }

    .event-modal-title {
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      margin-bottom: 12px;
    }

    .event-modal-description {
      font-size: 14px;
      opacity: 0.8;
      text-align: center;
      margin-bottom: 24px;
      line-height: 1.5;
    }

    .event-choices {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .choice-btn {
      padding: 14px 16px;
      background: #0a0a0a;
      border: 1px solid #2a2a2a;
      border-radius: 4px;
      color: #e0e0e0;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s;
      text-align: left;
      min-height: 44px;
      display: flex;
      align-items: center;
      gap: 10px;
      pointer-events: auto !important;
      touch-action: manipulation;
      -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
      position: relative;
      z-index: 15002;
      user-select: none;
      -webkit-user-select: none;
    }

    .choice-btn:hover {
      background: #1a1a1a;
      border-color: #3a3a3a;
    }

    .choice-btn:active {
      transform: scale(0.98);
      background: #2a2a2a !important;
      border-color: #4a4a4a !important;
    }

    .choice-icon {
      font-size: 20px;
      flex-shrink: 0;
    }

    .choice-text {
      flex: 1;
    }

    /* Outcome Display */
    .outcome-display {
      text-align: center;
      padding: 20px;
    }

    .outcome-icon {
      font-size: 48px;
      margin-bottom: 12px;
    }

    .outcome-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 8px;
    }

    .outcome-description {
      font-size: 13px;
      opacity: 0.8;
      margin-bottom: 20px;
      line-height: 1.4;
    }

    .outcome-btn {
      padding: 12px 24px;
      background: #2a2a2a;
      border: 1px solid #4a4a4a;
      border-radius: 4px;
      color: #e0e0e0;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s;
      min-height: 44px;
      pointer-events: auto !important;
      touch-action: manipulation;
      -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
      position: relative;
      z-index: 15002;
      user-select: none;
      -webkit-user-select: none;
    }

    .outcome-btn:hover {
      background: #3a3a3a;
      border-color: #5a5a5a;
    }

    .outcome-btn:active {
      transform: scale(0.98);
    }

    .outcome-success {
      color: #81c995;
    }

    .outcome-danger {
      color: #f28b82;
    }

    .outcome-warning {
      color: #fdd663;
    }

    /* Heat Indicator */
    .heat-indicator {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      background: #1a1a1a;
      border: 1px solid #2a2a2a;
      border-radius: 4px;
      margin-bottom: 12px;
    }

    .heat-icon {
      font-size: 20px;
    }

    .heat-bar-container {
      flex: 1;
      height: 8px;
      background: #0a0a0a;
      border-radius: 4px;
      overflow: hidden;
      border: 1px solid #2a2a2a;
    }

    .heat-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, #fdd663 0%, #f28b82 100%);
      transition: width 0.3s ease;
      border-radius: 4px;
    }

    .heat-value {
      font-size: 12px;
      opacity: 0.8;
      min-width: 40px;
      text-align: right;
    }

    /* New Sprite-Based Heat Bar */
    .new-heat-bar-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 4px 8px 8px;
      position: relative;
      z-index: 10;
    }

    .new-heat-bar-main {
      position: relative;
      width: 100%;
      max-width: 420px;
      z-index: 10;
    }

    .new-heat-bar-main .heat-bar-frame {
      width: 100%;
      height: auto;
      display: block;
      position: relative;
      z-index: 1;
      pointer-events: none;
    }

    .heat-bar-glow-track {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      overflow: hidden;
      pointer-events: none;
    }

    .heat-bar-glow {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: fill;
      clip-path: inset(0 100% 0 0);
      transition: clip-path 0.8s ease-in-out;
    }

    .heat-bar-value-label {
      position: absolute;
      top: 84%;
      right: 8%;
      transform: translateY(-50%);
      z-index: 3;
      font-size: 11px;
      font-weight: 700;
      color: #fff;
      text-shadow: 0 0 4px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.7);
      pointer-events: none;
    }

    .new-heat-bar-interface {
      position: relative;
      width: 60%;
      max-width: 260px;
      margin-top: -2px;
      z-index: 10;
    }

    .new-heat-bar-interface .heat-bar-interface-base {
      width: 100%;
      height: auto;
      display: block;
      pointer-events: none;
    }

    .heat-bar-icons-container {
      position: absolute;
      top: 5%;
      left: 8%;
      right: 8%;
      bottom: 5%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2px;
      z-index: 2;
    }

    .heat-bar-stars,
    .heat-bar-fires {
      display: flex;
      align-items: center;
      gap: 2px;
    }

    .heat-bar-stars {
      justify-content: flex-start;
    }

    .heat-bar-fires {
      justify-content: flex-end;
    }

    .heat-bar-star-icon,
    .heat-bar-fire-icon {
      width: 24px;
      height: 24px;
      object-fit: contain;
      animation: heatIconPopIn 0.35s ease-out both;
    }

    @keyframes heatIconPopIn {
      0% {
        opacity: 0;
        transform: scale(0.2);
      }
      60% {
        opacity: 1;
        transform: scale(1.15);
      }
      100% {
        opacity: 1;
        transform: scale(1);
      }
    }

    /* Jail Overlay */
    .jail-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 64px;
      background: rgba(10, 10, 10, 0.98);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 200;
      animation: jail-fade-in 0.5s ease-out;
      padding: 20px;
    }

    @keyframes jail-fade-in {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .jail-icon {
      font-size: 72px;
      margin-bottom: 20px;
      animation: jail-shake 2s ease-in-out infinite;
    }

    @keyframes jail-shake {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-3px); }
      75% { transform: translateX(3px); }
    }

    .jail-title {
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 12px;
      color: #f28b82;
    }

    .jail-message {
      font-size: 14px;
      opacity: 0.8;
      margin-bottom: 20px;
      text-align: center;
      max-width: 300px;
      line-height: 1.5;
    }

    .jail-timer {
      font-size: 32px;
      font-weight: 600;
      margin-bottom: 8px;
      color: #8ab4f8;
      font-family: 'Courier New', monospace;
      /* Removed problematic mobile Chrome properties:
         - will-change
         - transform: translateZ(0)
         - backface-visibility
         These cause rendering issues on mobile Chrome */
    }
    
    /* Removed timer-pulse animation - causes mobile Chrome issues */

    
    /* === Jail Breakout Mini-game (Mobile-first) === */
    .jail-stage {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      width: 100%;
      max-width: 560px;
      margin: 0 auto;
      padding: 18px 14px;
      box-sizing: border-box;
    }
    .jail-stage-intro .jail-icon { font-size: 72px; margin-bottom: 8px; }
    .jail-door-frame {
      width: min(360px, 92vw);
      height: 170px;
      border-radius: 14px;
      border: 2px solid rgba(255,255,255,0.12);
      background: rgba(0,0,0,0.35);
      box-shadow: inset 0 0 24px rgba(0,0,0,0.8);
      overflow: hidden;
      position: relative;
    }
    .jail-door {
      position: absolute;
      top: 0; left: -110%;
      width: 110%;
      height: 100%;
      background: linear-gradient(180deg, rgba(25,25,25,0.95), rgba(8,8,8,0.95));
      border-right: 2px solid rgba(255,255,255,0.08);
      box-shadow: 0 0 25px rgba(0,0,0,0.9);
      transform: translateX(0);
    }
    .jail-door.closed {
      animation: jailDoorSlam 520ms cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
    }
    @keyframes jailDoorSlam {
      from { left: -110%; }
      to { left: 0%; }
    }
    .jail-bars {
      position: absolute;
      inset: 0;
      display: flex;
      justify-content: space-evenly;
      align-items: stretch;
      padding: 18px 20px;
      box-sizing: border-box;
      opacity: 0.85;
    }
    .jail-bars span{
      width: 10px;
      border-radius: 6px;
      background: linear-gradient(180deg, rgba(220,220,220,0.25), rgba(70,70,70,0.35));
      box-shadow: inset 0 0 10px rgba(0,0,0,0.7);
    }
    .jail-intro-text { text-align: center; max-width: 520px; }
    .jail-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: min(520px, 92vw);
      transition: opacity 220ms ease, transform 220ms ease;
    }
    .jail-btn { padding: 12px 12px; border-radius: 12px; font-weight: 700; }
    .jail-btn-breakout { background: linear-gradient(180deg, #8a1a1a, #4b0e0e); border: 1px solid rgba(255,255,255,0.14); color: #fff; }
    .jail-btn-serve { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.92); }
    .jail-btn-choice { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.95); }
    .jail-breakout-header { text-align:center; }
    .jail-sub { opacity: 0.85; }
    .jail-sub.small { font-size: 12px; opacity: 0.8; }
    .jail-sub.tiny { font-size: 11px; opacity: 0.75; }

    .jail-breakout-choose {
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: min(520px, 92vw);
      align-items: stretch;
    }
    .jail-breakout-game {
      width: min(560px, 96vw);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }
    .jail-breakout-top { width: 100%; display:flex; flex-direction: column; gap: 10px; align-items: center; }
    .jail-guard-timer {
      font-size: 28px;
      letter-spacing: 4px;
      color: #9fd0ff;
      text-shadow: 0 0 18px rgba(120,180,255,0.35);
    }
    .jail-progress {
      width: 100%;
      height: 10px;
      border-radius: 999px;
      background: rgba(255,255,255,0.10);
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.10);
    }
    .jail-progress-bar {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, rgba(230,190,90,0.9), rgba(255,210,120,0.95));
      box-shadow: 0 0 18px rgba(240,200,100,0.25);
      transition: width 80ms linear;
    }
    .jail-wall-wrap {
      position: relative;
      width: min(420px, 92vw);
      height: 240px;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .jail-wall {
      width: 100%;
      height: 100%;
      border-radius: 16px;
      border: 2px solid rgba(255,215,120,0.45);
      background: repeating-linear-gradient(45deg, rgba(60,60,60,0.75), rgba(60,60,60,0.75) 12px, rgba(40,40,40,0.75) 12px, rgba(40,40,40,0.75) 24px);
      box-shadow: inset 0 0 30px rgba(0,0,0,0.85);
      position: relative;
      touch-action: manipulation;
    }
    .jail-cracks {
      position:absolute;
      inset: 0;
      border-radius: 16px;
      pointer-events:none;
      opacity: 0;
      transition: opacity 120ms ease;
      background: radial-gradient(circle at 50% 55%, rgba(255,255,255,0.22), rgba(255,255,255,0.0) 60%);
    }
    .jail-cracks.c1{ opacity:0.25; }
    .jail-cracks.c2{ opacity:0.40; }
    .jail-cracks.c3{ opacity:0.55; }
    .jail-cracks.c4{ opacity:0.72; }
    .jail-cracks.c5{ opacity:0.92; }
    .jail-pickaxe {
      position:absolute;
      top: -10px;
      right: 10px;
      font-size: 36px;
      transform-origin: 80% 80%;
      filter: drop-shadow(0 6px 12px rgba(0,0,0,0.6));
      opacity: 0.95;
      pointer-events:none;
    }
    .jail-pickaxe.swing {
      animation: pickSwing 140ms ease-in-out;
    }
    @keyframes pickSwing {
      0% { transform: rotate(0deg) translateY(0px); }
      50% { transform: rotate(-22deg) translateY(2px); }
      100% { transform: rotate(0deg) translateY(0px); }
    }

    .jail-serve-footer{
      width: min(520px, 92vw);
      display:flex;
      justify-content:center;
      margin-top: 6px;
    }

    @media (max-width: 420px){
      .jail-door-frame{ height: 150px; }
      .jail-wall-wrap{ height: 220px; }
    }
.jail-timer-label {
      font-size: 12px;
      opacity: 0.6;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    /* XP Notification */
    .xp-notification {
      position: fixed;
      top: 80px;
      right: 20px;
      background: rgba(26, 26, 26, 0.95);
      border: 1px solid #2a2a2a;
      padding: 8px 12px;
      border-radius: 4px;
      font-size: 13px;
      z-index: 100;
      animation: xp-slide-in 0.3s ease-out;
      pointer-events: none;
    }

    @keyframes xp-slide-in {
      from {
        opacity: 0;
        transform: translateX(20px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .xp-positive {
      color: #81c995;
    }

    .xp-negative {
      color: #f28b82;
    }

    /* Level Up Notification */
    .level-up-notification {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: linear-gradient(135deg, #fdd663 0%, #ff9966 100%);
      border: 3px solid #fff;
      border-radius: 12px;
      padding: 32px 48px;
      z-index: 10000;
      animation: level-up-appear 0.5s ease-out;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
      pointer-events: none;
      transition: opacity 0.5s ease-out;
    }

    @keyframes level-up-appear {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
      }
      50% {
        transform: translate(-50%, -50%) scale(1.1);
      }
      100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }
    }

    .level-up-content {
      text-align: center;
      color: #0a0a0a;
    }

    .level-up-icon {
      font-size: 64px;
      margin-bottom: 12px;
      animation: level-up-star 1s ease-in-out infinite;
    }

    @keyframes level-up-star {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.2); }
    }

    .level-up-title {
      font-size: 32px;
      font-weight: 900;
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 2px;
    }

    .level-up-level {
      font-size: 48px;
      font-weight: 900;
      margin-bottom: 12px;
    }

    .level-up-stats {
      font-size: 16px;
      font-weight: 600;
      opacity: 0.9;
    }

    /* Gang Tab */
    .gang-container {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .gang-header {
      background: #1a1a1a;
      border: 1px solid #2a2a2a;
      border-radius: 4px;
      padding: 20px;
      text-align: center;
    }

    .gang-flag {
      font-size: 48px;
      margin-bottom: 12px;
    }

    .gang-name {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 8px;
    }

    .gang-role {
      font-size: 12px;
      opacity: 0.7;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .gang-stats-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }

    .gang-stat-card {
      background: #1a1a1a;
      border: 1px solid #2a2a2a;
      border-radius: 4px;
      padding: 16px;
      text-align: center;
    }

    .gang-stat-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1px;
      opacity: 0.6;
      margin-bottom: 8px;
    }

    .gang-stat-value {
      font-size: 20px;
      font-weight: 600;
    }

    .gang-section {
      background: #1a1a1a;
      border: 1px solid #2a2a2a;
      border-radius: 4px;
      padding: 16px;
    }

    .gang-section-title {
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 1px;
      opacity: 0.8;
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid #2a2a2a;
    }

    .gang-member-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .gang-member {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      background: #0a0a0a;
      border: 1px solid #2a2a2a;
      border-radius: 4px;
    }

    .gang-member-name {
      font-size: 14px;
    }

    .gang-member-role {
      font-size: 11px;
      opacity: 0.6;
      padding: 3px 8px;
      background: #2a2a2a;
      border-radius: 3px;
    }

    .gang-property-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .gang-property {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px;
      background: #0a0a0a;
      border: 1px solid #2a2a2a;
      border-radius: 4px;
    }

    .property-info {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .property-name {
      font-size: 14px;
    }

    .property-income {
      font-size: 11px;
      opacity: 0.6;
      color: #81c995;
    }

    .property-icon {
      font-size: 24px;
    }

    /* Gang Creation */
    .no-gang-message {
      text-align: center;
      padding: 40px 20px;
      opacity: 0.7;
    }

    .no-gang-icon {
      font-size: 64px;
      margin-bottom: 16px;
    }

    .no-gang-text {
      font-size: 14px;
      margin-bottom: 24px;
      line-height: 1.5;
    }

    .gang-action-buttons {
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-width: 300px;
      margin: 0 auto;
    }

    .gang-action-btn {
      padding: 14px 20px;
      background: #2a2a2a;
      border: 1px solid #4a4a4a;
      border-radius: 4px;
      color: #e0e0e0;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .gang-action-btn:hover {
      background: #3a3a3a;
      border-color: #5a5a5a;
    }

    .gang-action-btn:active {
      transform: scale(0.98);
    }

    /* Gang Creation Modal */
    .gang-creation-form {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .form-label {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 1px;
      opacity: 0.8;
    }

    .form-input {
      padding: 12px;
      background: #0a0a0a;
      border: 1px solid #2a2a2a;
      border-radius: 4px;
      color: #e0e0e0;
      font-size: 14px;
      font-family: inherit;
    }

    .form-input:focus {
      outline: none;
      border-color: #4a4a4a;
    }

    .flag-selector {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
    }

    .flag-option {
      padding: 12px;
      background: #0a0a0a;
      border: 1px solid #2a2a2a;
      border-radius: 4px;
      font-size: 24px;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s;
    }

    .flag-option:hover {
      background: #1a1a1a;
    }

    .flag-option.selected {
      background: #2a2a2a;
      border-color: #4a4a4a;
      box-shadow: 0 0 8px rgba(138, 180, 248, 0.3);
    }

    .color-selector {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }

    .color-option {
      padding: 16px;
      border: 2px solid #2a2a2a;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .color-option.selected {
      border-color: #4a4a4a;
      box-shadow: 0 0 8px rgba(138, 180, 248, 0.3);
    }

    .form-cost {
      font-size: 12px;
      opacity: 0.7;
      color: #f28b82;
    }

    .gang-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-height: 300px;
      overflow-y: auto;
    }

    .gang-list-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px;
      background: #0a0a0a;
      border: 1px solid #2a2a2a;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .gang-list-item:hover {
      background: #1a1a1a;
      border-color: #3a3a3a;
    }

    .gang-list-info {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .gang-list-flag {
      font-size: 24px;
    }

    .gang-list-details {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .gang-list-name {
      font-size: 14px;
      font-weight: 500;
    }

    .gang-list-members {
      font-size: 11px;
      opacity: 0.6;
    }

    /* Gang Relations */
    .relations-section {
      background: #1a1a1a;
      border: 1px solid #2a2a2a;
      border-radius: 4px;
      padding: 16px;
      margin-top: 16px;
    }

    .relation-card {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 12px;
      background: #0a0a0a;
      border: 1px solid #2a2a2a;
      border-radius: 4px;
      margin-bottom: 12px;
    }

    .relation-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .relation-gang-info {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .relation-flag {
      font-size: 24px;
    }

    .relation-name {
      font-size: 14px;
      font-weight: 500;
    }

    .relation-status {
      padding: 4px 10px;
      border-radius: 3px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .relation-status.neutral {
      background: #2a2a2a;
      color: #e0e0e0;
    }

    .relation-status.war {
      background: #5a1a1a;
      color: #f28b82;
      animation: war-pulse 2s ease-in-out infinite;
    }

    @keyframes war-pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.7; }
    }

    .relation-heat-bar {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .heat-bar-small {
      flex: 1;
      height: 6px;
      background: #0a0a0a;
      border-radius: 3px;
      overflow: hidden;
      border: 1px solid #2a2a2a;
    }

    .heat-bar-small-fill {
      height: 100%;
      background: linear-gradient(90deg, #fdd663 0%, #f28b82 100%);
      transition: width 0.3s ease;
    }

    .heat-value-small {
      font-size: 11px;
      opacity: 0.7;
      min-width: 35px;
      text-align: right;
    }

    .relation-actions {
      display: flex;
      gap: 8px;
    }

    .raid-btn {
      flex: 1;
      padding: 10px;
      background: #2a2a2a;
      border: 1px solid #4a4a4a;
      border-radius: 4px;
      color: #e0e0e0;
      font-size: 13px;
      cursor: pointer;
      transition: all 0.2s;
      min-height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    .raid-btn:hover {
      background: #3a3a3a;
      border-color: #5a5a5a;
    }

    .raid-btn:active {
      transform: scale(0.98);
    }

    .raid-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    /* War Log */
    .war-log-section {
      background: #1a1a1a;
      border: 1px solid #2a2a2a;
      border-radius: 4px;
      padding: 16px;
      margin-top: 16px;
    }

    .war-log-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-height: 300px;
      overflow-y: auto;
    }

    .war-log-entry {
      padding: 10px;
      background: #0a0a0a;
      border: 1px solid #2a2a2a;
      border-radius: 4px;
      font-size: 12px;
      line-height: 1.4;
    }

    .war-log-timestamp {
      font-size: 10px;
      opacity: 0.5;
      margin-top: 4px;
    }

    .war-log-empty {
      text-align: center;
      opacity: 0.5;
      padding: 20px;
      font-size: 13px;
    }

    /* Raid Result Modal */
    .raid-result {
      text-align: center;
      padding: 20px;
    }

    .raid-result-icon {
      font-size: 56px;
      margin-bottom: 16px;
    }

    .raid-result-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 12px;
    }

    .raid-result-description {
      font-size: 13px;
      opacity: 0.8;
      margin-bottom: 16px;
      line-height: 1.5;
    }

    .raid-result-rewards {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 20px;
      padding: 12px;
      background: #0a0a0a;
      border: 1px solid #2a2a2a;
      border-radius: 4px;
    }

    .reward-item {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
    }

    .reward-label {
      opacity: 0.7;
    }

    .reward-value {
      font-weight: 600;
    }

    .reward-positive {
      color: #81c995;
    }

    .reward-negative {
      color: #f28b82;
    }

    /* Global Heat Indicator */
    .global-heat-display {
      position: fixed;
      top: 16px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(26, 26, 26, 0.95);
      border: 1px solid #2a2a2a;
      padding: 10px 16px;
      border-radius: 4px;
      z-index: 120;
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 200px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    }

    .global-heat-icon {
      font-size: 20px;
    }

    .global-heat-bar-container {
      flex: 1;
      height: 8px;
      background: #0a0a0a;
      border-radius: 4px;
      overflow: hidden;
      border: 1px solid #2a2a2a;
    }

    .global-heat-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, #81c995 0%, #fdd663 50%, #f28b82 100%);
      transition: width 0.5s ease;
    }

    .global-heat-value {
      font-size: 12px;
      font-weight: 600;
      min-width: 35px;
      text-align: right;
    }

    .heat-state-label {
      position: absolute;
      top: -8px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 1px;
      opacity: 0.7;
      white-space: nowrap;
    }

    /* Lockdown Overlay */
    .lockdown-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 64px;
      background: rgba(138, 26, 26, 0.15);
      pointer-events: none;
      z-index: 5;
      animation: lockdown-pulse 3s ease-in-out infinite;
    }

    @keyframes lockdown-pulse {
      0%, 100% { opacity: 0.3; }
      50% { opacity: 0.6; }
    }

    .lockdown-banner {
      position: fixed;
      top: 60px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(138, 26, 26, 0.95);
      border: 2px solid #f28b82;
      padding: 12px 20px;
      border-radius: 4px;
      z-index: 130;
      font-size: 13px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      box-shadow: 0 4px 16px rgba(242, 139, 130, 0.4);
      animation: banner-flash 1.5s ease-in-out infinite;
    }

    
    .lockdown-banner.fade-out {
      opacity: 0 !important;
      transform: translateX(-50%) translateY(-8px);
      transition: opacity 0.4s ease, transform 0.4s ease;
    }
@keyframes banner-flash {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.7; }
    }

    /* Manhunt Warning */
    .manhunt-warning {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(10, 10, 10, 0.98);
      border: 2px solid #f28b82;
      padding: 24px;
      border-radius: 4px;
      z-index: 200;
      max-width: 400px;
      width: 90%;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8);
      animation: manhunt-shake 0.5s ease-in-out;
    }

    @keyframes manhunt-shake {
      0%, 100% { transform: translate(-50%, -50%); }
      25% { transform: translate(-52%, -50%); }
      75% { transform: translate(-48%, -50%); }
    }

    .manhunt-header {
      text-align: center;
      margin-bottom: 20px;
    }

    .manhunt-icon {
      font-size: 56px;
      margin-bottom: 12px;
    }

    .manhunt-title {
      font-size: 20px;
      font-weight: 600;
      color: #f28b82;
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .manhunt-description {
      font-size: 13px;
      opacity: 0.9;
      line-height: 1.5;
      margin-bottom: 20px;
      text-align: center;
    }

    .manhunt-choices {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .manhunt-choice-btn {
      padding: 12px 16px;
      background: #2a2a2a;
      border: 1px solid #4a4a4a;
      border-radius: 4px;
      color: #e0e0e0;
      font-size: 13px;
      cursor: pointer;
      transition: all 0.2s;
      min-height: 44px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .manhunt-choice-btn:hover {
      background: #3a3a3a;
      border-color: #5a5a5a;
    }

    .manhunt-choice-btn:active {
      transform: scale(0.98);
    }

    .manhunt-choice-icon {
      font-size: 18px;
    }

    /* Heat Log */
    .heat-log-section {
      background: #1a1a1a;
      border: 1px solid #2a2a2a;
      border-radius: 4px;
      padding: 16px;
      margin-top: 16px;
    }

    .heat-log-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-height: 250px;
      overflow-y: auto;
    }

    .heat-log-entry {
      padding: 10px;
      background: #0a0a0a;
      border: 1px solid #2a2a2a;
      border-radius: 4px;
      font-size: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .heat-log-message {
      flex: 1;
      line-height: 1.4;
    }

    .heat-log-value {
      font-size: 11px;
      font-weight: 600;
      padding: 3px 8px;
      background: #2a2a2a;
      border-radius: 3px;
      color: #f28b82;
    }

    .heat-log-timestamp {
      font-size: 10px;
      opacity: 0.5;
      margin-top: 4px;
    }

    /* Transition Indicator */
    .transition-indicator {
      position: fixed;
      top: 100px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(26, 26, 26, 0.95);
      border: 1px solid #2a2a2a;
      padding: 10px 20px;
      border-radius: 4px;
      z-index: 110;
      font-size: 12px;
      opacity: 0.9;
      animation: transition-fade 0.3s ease-in;
      pointer-events: none;
      max-width: 80%;
      text-align: center;
    }

    @keyframes transition-fade {
      from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
      to { opacity: 0.9; transform: translateX(-50%) translateY(0); }
    }

    .status-btn.transitioning {
      opacity: 0.6;
      cursor: not-allowed;
      pointer-events: none;
    }

    /* Suspicion Eye Indicator */
    .suspicion-eye {
      position: absolute;
      top: -25px;
      right: -15px;
      font-size: 18px;
      z-index: 12;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.5s ease;
      animation: eye-watch 3s ease-in-out infinite;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
    }

    .suspicion-eye.visible {
      opacity: 0.7;
    }

    @keyframes eye-watch {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.1); }
    }

    /* Detection Flash */
    .detection-flash {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 255, 255, 0.8);
      z-index: 250;
      animation: flash-effect 0.5s ease-out;
      pointer-events: none;
    }

    @keyframes flash-effect {
      0% { opacity: 1; }
      100% { opacity: 0; }
    }

    /* Risk-based icon brightness */
    .map-icon[data-type="police"],
    .map-icon[data-type="dealer"],
    .map-icon[data-type="gang"] {
      transition: filter 2s ease, transform 0.3s ease;
    }

    .map-icon.risk-low {
      filter: brightness(0.7) grayscale(40%);
    }

    .map-icon.risk-medium {
      filter: brightness(1) grayscale(20%);
    }

    .map-icon.risk-high {
      filter: brightness(1.2) grayscale(0%);
      animation: icon-alert 2s ease-in-out infinite;
    }

    .map-icon.risk-extreme {
      filter: brightness(1.4) grayscale(0%) drop-shadow(0 0 4px rgba(242, 139, 130, 0.6));
      animation: icon-alert 1s ease-in-out infinite;
    }

    @keyframes icon-alert {
      0%, 100% { transform: translate(-50%, -50%) scale(1); }
      50% { transform: translate(-50%, -50%) scale(1.05); }
    }

    /* Safe House Tab */
    .character-creator {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .creator-section {
      background: #1a1a1a;
      border: 1px solid #2a2a2a;
      border-radius: 4px;
      padding: 16px;
    }

    .section-title {
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 1px;
      opacity: 0.8;
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid #2a2a2a;
    }

    .option-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
      gap: 8px;
      margin-top: 12px;
    }

    .option-btn {
      padding: 12px 8px;
      background: #0a0a0a;
      border: 1px solid #2a2a2a;
      border-radius: 4px;
      color: #e0e0e0;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.2s;
      text-align: center;
      min-height: 44px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }

    .option-btn:active {
      transform: scale(0.98);
    }

    .option-btn.selected {
      background: #2a2a2a;
      border-color: #4a4a4a;
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    /* Wardrobe Items */
    .wardrobe-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
      gap: 8px;
      margin-top: 12px;
    }

    .wardrobe-item {
      padding: 12px;
      background: #0a0a0a;
      border: 1px solid #2a2a2a;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.2s;
      text-align: center;
      min-height: 80px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      position: relative;
    }

    .wardrobe-item.locked {
      opacity: 0.4;
      cursor: not-allowed;
    }

    .wardrobe-item.equipped {
      background: #2a2a2a;
      border-color: #4a4a4a;
      box-shadow: 0 0 8px rgba(138, 180, 248, 0.3);
    }

    .wardrobe-item:not(.locked):active {
      transform: scale(0.98);
    }

    .item-icon {
      font-size: 32px;
    }

    .item-name {
      font-size: 11px;
      opacity: 0.9;
    }

    .item-cost {
      font-size: 10px;
      opacity: 0.6;
      color: #8ab4f8;
    }

    .item-locked-badge {
      position: absolute;
      top: 4px;
      right: 4px;
      font-size: 14px;
    }

    /* Character Preview */
    .character-preview {
      background: transparent;
      border: none;
      border-radius: 4px;
      padding: 24px;
      text-align: center;
      margin-bottom: 16px;
    }

    .preview-sprite {
      font-size: 64px;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }

    .preview-details {
      font-size: 12px;
      opacity: 0.7;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
    }

    .preview-tag {
      background: #1a1a1a;
      padding: 4px 8px;
      border-radius: 3px;
    }

    /* Safehouse Sub-Tab System */
    .safehouse-container {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .safehouse-sub-tabs {
      display: flex;
      gap: 4px;
      margin-bottom: 16px;
      padding: 4px;
      background: #0a0a0a;
      border-radius: 6px;
      border: 1px solid #2a2a2a;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    .safehouse-sub-tab {
      flex: 1;
      min-width: 60px;
      padding: 8px 10px;
      background: transparent;
      border: none;
      border-radius: 4px;
      color: #808080;
      font-size: 11px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      min-height: 50px;
      white-space: nowrap;
    }

    .safehouse-sub-tab:hover {
      background: #1a1a1a;
      color: #b0b0b0;
    }

    .safehouse-sub-tab.active {
      background: #1a1a1a;
      color: #e0e0e0;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .safehouse-sub-tab-icon {
      font-size: 18px;
    }

    .safehouse-sub-content {
      display: none;
      flex: 1;
      overflow-y: auto;
    }

    .safehouse-sub-content.active {
      display: block;
    }

    /* 2D Character Sprite System */
    .character-preview {
      background: transparent;
      border: none;
      border-radius: 8px;
      padding: 20px;
      text-align: center;
      margin-bottom: 16px;
      position: relative;
    }

    /* Sprite container removed - no longer displaying animated character */

    .angle-controls {
      display: flex;
      justify-content: center;
      gap: 4px;
      margin-bottom: 12px;
      flex-wrap: wrap;
    }

    .angle-btn {
      padding: 6px 10px;
      background: #1a1a1a;
      border: 1px solid #2a2a2a;
      border-radius: 4px;
      color: #808080;
      font-size: 11px;
      cursor: pointer;
      transition: all 0.2s;
      min-width: 50px;
    }

    .angle-btn:hover {
      background: #252525;
      color: #b0b0b0;
    }

    .angle-btn.active {
      background: #2a2a2a;
      border-color: #4a4a4a;
      color: #e0e0e0;
    }

    .pose-indicator {
      font-size: 11px;
      color: #606060;
      margin-top: 8px;
    }

    .pose-indicator span {
      color: #8ab4f8;
    }

    /* ========================================
       WEAPONS TAB STYLING
       ======================================== */
    
    .weapons-section {
      margin-bottom: 24px;
    }

    .section-title {
      font-size: 14px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 16px;
      padding-bottom: 8px;
      border-bottom: 1px solid #2a2a2a;
      color: #8ab4f8;
    }

    .equipped-weapon-display {
      background: linear-gradient(135deg, rgba(138, 180, 248, 0.15) 0%, rgba(138, 180, 248, 0.05) 100%);
      border: 2px solid rgba(138, 180, 248, 0.4);
      border-radius: 12px;
      padding: 24px;
      text-align: center;
    }

    .weapon-display-icon {
      font-size: 80px;
      margin-bottom: 16px;
      text-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }

    .weapon-display-info {
      margin-bottom: 20px;
    }

    .weapon-display-name {
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 8px;
      color: #e0e0e0;
    }

    .weapon-display-desc {
      font-size: 14px;
      opacity: 0.8;
      line-height: 1.5;
    }

    .weapon-stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
      gap: 12px;
      margin-bottom: 24px;
    }

    .weapon-stat-item {
      background: rgba(0, 0, 0, 0.4);
      padding: 16px 12px;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      border: 1px solid rgba(255, 255, 255, 0.05);
      transition: all 0.2s;
    }

    .weapon-stat-item:hover {
      background: rgba(0, 0, 0, 0.5);
      border-color: rgba(255, 255, 255, 0.1);
      transform: translateY(-2px);
    }

    .weapon-stat-icon {
      font-size: 24px;
    }

    .weapon-stat-label {
      font-size: 10px;
      opacity: 0.7;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .weapon-stat-value {
      font-size: 18px;
      font-weight: 700;
    }

    .weapon-stat-value.positive {
      color: #81c995;
    }

    .weapon-stat-value.negative {
      color: #f28b82;
    }

    .weapon-stat-value.neutral {
      color: #fdd663;
    }

    .unequip-btn {
      background: linear-gradient(135deg, #f28b82 0%, #e07a72 100%);
      border: none;
      color: #0a0a0a;
      padding: 14px 32px;
      border-radius: 8px;
      font-weight: 700;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s;
      text-transform: uppercase;
      letter-spacing: 1px;
      box-shadow: 0 4px 12px rgba(242, 139, 130, 0.3);
    }

    .unequip-btn:hover {
      background: linear-gradient(135deg, #ff9b92 0%, #f28b82 100%);
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(242, 139, 130, 0.4);
    }

    .unequip-btn:active {
      transform: translateY(0);
    }

    .no-weapon-equipped {
      text-align: center;
      padding: 60px 20px;
      opacity: 0.6;
    }

    .no-weapon-icon {
      font-size: 72px;
      margin-bottom: 16px;
      opacity: 0.5;
    }

    .no-weapon-text {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 8px;
    }

    .no-weapon-subtext {
      font-size: 14px;
      opacity: 0.7;
    }

    .weapons-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      gap: 16px;
    }

    .weapon-card {
      background: linear-gradient(135deg, #1a1a1a 0%, #252525 100%);
      border: 2px solid #2a2a2a;
      border-radius: 12px;
      padding: 20px 16px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s;
      position: relative;
      overflow: hidden;
    }

    .weapon-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(138, 180, 248, 0.1) 0%, transparent 100%);
      opacity: 0;
      transition: opacity 0.3s;
    }

    .weapon-card:hover {
      border-color: #8ab4f8;
      transform: translateY(-4px);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    }

    .weapon-card:hover::before {
      opacity: 1;
    }

    .weapon-card.equipped {
      border-color: #81c995;
      background: linear-gradient(135deg, rgba(129, 201, 149, 0.2) 0%, rgba(129, 201, 149, 0.05) 100%);
    }

    .weapon-card.equipped::before {
      background: linear-gradient(135deg, rgba(129, 201, 149, 0.2) 0%, transparent 100%);
      opacity: 1;
    }

    .weapon-card-icon {
      font-size: 56px;
      margin-bottom: 12px;
      position: relative;
      z-index: 1;
    }

    .weapon-card-name {
      font-size: 13px;
      font-weight: 600;
      position: relative;
      z-index: 1;
    }

    .weapon-card-badge {
      position: absolute;
      top: 8px;
      right: 8px;
      background: #81c995;
      color: #0a0a0a;
      padding: 4px 10px;
      border-radius: 12px;
      font-size: 10px;
      font-weight: 700;
      z-index: 2;
      box-shadow: 0 2px 8px rgba(129, 201, 149, 0.4);
    }

    .weapons-shop-list {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .weapon-shop-item {
      background: linear-gradient(135deg, #1a1a1a 0%, #252525 100%);
      border: 2px solid #2a2a2a;
      border-radius: 12px;
      padding: 20px;
      display: flex;
      align-items: center;
      gap: 20px;
      transition: all 0.3s;
    }

    .weapon-shop-item:not(.locked):hover {
      border-color: #8ab4f8;
      transform: translateX(4px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .weapon-shop-item.locked {
      opacity: 0.5;
      filter: grayscale(0.5);
    }

    .weapon-shop-icon {
      font-size: 48px;
      min-width: 48px;
      text-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }

    .weapon-shop-info {
      flex: 1;
    }

    .weapon-shop-name {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .weapon-level-badge {
      font-size: 11px;
      color: #f28b82;
      font-weight: 700;
      background: rgba(242, 139, 130, 0.2);
      padding: 2px 8px;
      border-radius: 8px;
    }

    .weapon-shop-desc {
      font-size: 13px;
      opacity: 0.8;
      margin-bottom: 10px;
      line-height: 1.4;
    }

    .weapon-shop-price {
      font-size: 16px;
      color: #81c995;
      font-weight: 700;
    }

    .weapon-buy-btn {
      background: linear-gradient(135deg, #8ab4f8 0%, #7aa4e8 100%);
      border: none;
      color: #0a0a0a;
      padding: 12px 24px;
      border-radius: 8px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s;
      white-space: nowrap;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      font-size: 13px;
      box-shadow: 0 4px 12px rgba(138, 180, 248, 0.3);
    }

    .weapon-buy-btn:hover:not(.disabled) {
      background: linear-gradient(135deg, #9ac4ff 0%, #8ab4f8 100%);
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(138, 180, 248, 0.4);
    }

    .weapon-buy-btn:active:not(.disabled) {
      transform: translateY(0);
    }

    .weapon-buy-btn.disabled {
      background: #3a3a3a;
      color: #808080;
      cursor: not-allowed;
      box-shadow: none;
    }

    .weapons-complete-banner {
      text-align: center;
      padding: 60px 20px;
      background: linear-gradient(135deg, rgba(129, 201, 149, 0.15) 0%, rgba(129, 201, 149, 0.05) 100%);
      border: 2px solid rgba(129, 201, 149, 0.4);
      border-radius: 12px;
    }

    .weapons-complete-icon {
      font-size: 80px;
      margin-bottom: 16px;
    }

    .weapons-complete-text {
      font-size: 24px;
      font-weight: 700;
      color: #81c995;
      margin-bottom: 8px;
    }

    .weapons-complete-subtext {
      font-size: 14px;
      opacity: 0.8;
    }

    .weapons-info-box {
      background: rgba(138, 180, 248, 0.1);
      border-left: 4px solid #8ab4f8;
      border-radius: 8px;
      padding: 20px;
      font-size: 13px;
      line-height: 1.8;
    }

    .weapons-info-box strong {
      display: block;
      margin-bottom: 12px;
      font-size: 14px;
      color: #8ab4f8;
    }

    /* Responsive adjustments for weapons */
    @media (max-width: 480px) {
      .weapons-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 12px;
      }

      .weapon-card {
        padding: 16px 12px;
      }

      .weapon-card-icon {
        font-size: 40px;
      }

      .weapon-shop-item {
        flex-direction: column;
        text-align: center;
      }

      .weapon-stats-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .weapon-display-icon {
        font-size: 60px;
      }

      .weapon-display-name {
        font-size: 20px;
      }
    }
    /* === MAP ZOOM FIX LAYER === */
    #map-background {
      position: absolute;
      inset: 0;
      transform-origin: center center;
      z-index: 1;
    }

    #map-entities {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
    }

    #map-entities > * {
      pointer-events: auto;
    }
  
    /* =========================
       SKILL TREE (Diablo-style)
       ========================= */
    .stat-card-clickable { cursor: pointer; }
    .stat-card-clickable:focus { outline: 2px solid rgba(255,255,255,0.25); outline-offset: 2px; }
    .stat-subvalue { font-size: 12px; opacity: 0.75; margin-top: 6px; }

    .skill-modal.is-hidden { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }
    .skill-modal { position: fixed; inset: 0; z-index: 9999; }
    .skill-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.72); backdrop-filter: blur(2px); }
    .skill-modal-panel {
      position: relative;
      width: min(1100px, 92vw);
      height: min(720px, 86vh);
      margin: 5vh auto 0 auto;
      border-radius: 12px;
      overflow: hidden;
      background: radial-gradient(circle at 30% 20%, rgba(60,60,60,0.65), rgba(10,10,10,0.98)),
                  linear-gradient(180deg, rgba(30,30,30,0.9), rgba(5,5,5,0.95));
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 20px 60px rgba(0,0,0,0.65);
    }

    .skill-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      background: linear-gradient(180deg, rgba(0,0,0,0.65), rgba(0,0,0,0.25));
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .skill-modal-title { font-size: 18px; letter-spacing: 0.6px; font-weight: 700; }
    .skill-modal-close {
      width: 36px; height: 36px; border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.9);
      cursor: pointer;
    }
    .skill-modal-close:hover { background: rgba(255,255,255,0.10); }

    .skill-modal-body { height: calc(100% - 60px); display: flex; flex-direction: column; }
    .skill-trees {
      flex: 1;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 14px;
      padding: 14px;
    }

    .skill-tree-col {
      position: relative;
      border-radius: 10px;
      background: radial-gradient(circle at 50% 20%, rgba(90,90,90,0.35), rgba(8,8,8,0.96));
      border: 1px solid rgba(255,255,255,0.08);
      overflow: hidden;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35);
    }

    .skill-tree-col-title {
      padding: 10px 12px;
      font-weight: 800;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      font-size: 12px;
      color: rgba(255,255,255,0.9);
      background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.15));
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .skill-tree-canvas {
      position: relative;
      height: calc(100% - 40px);
      border: 2px solid rgba(255,255,255,0.14);
      border-top-color: rgba(255,255,255,0.22);
      border-left-color: rgba(255,255,255,0.18);
      background:
        radial-gradient(circle at 25% 15%, rgba(255,255,255,0.10), rgba(0,0,0,0) 42%),
        radial-gradient(circle at 70% 75%, rgba(255,255,255,0.06), rgba(0,0,0,0) 55%),
        linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.25)),
        repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 3px, rgba(0,0,0,0.0) 3px 9px),
        linear-gradient(135deg, rgba(40,40,40,0.85), rgba(10,10,10,0.95));
      box-shadow:
        inset 0 0 0 2px rgba(0,0,0,0.45),
        inset 0 18px 40px rgba(0,0,0,0.35);
      overflow: hidden;
    }
    .skill-tree-canvas::after{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(circle at 12% 28%, rgba(255,255,255,0.05), rgba(0,0,0,0) 38%),
        radial-gradient(circle at 84% 22%, rgba(0,0,0,0.35), rgba(0,0,0,0) 46%),
        radial-gradient(circle at 55% 80%, rgba(0,0,0,0.30), rgba(0,0,0,0) 48%);
      opacity: .55;
      pointer-events:none;
      mix-blend-mode: overlay;
    }

    .skill-lines {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .skill-node {
      position: absolute;
      width: 54px;
      height: 54px;
      border-radius: 10px;
      transform: translate(-50%, -50%);
      background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.16), rgba(0,0,0,0.55)),
                  linear-gradient(180deg, rgba(60,35,20,0.95), rgba(25,12,8,0.95));
      border: 2px solid rgba(180,120,60,0.9);
      box-shadow: 0 6px 14px rgba(0,0,0,0.55), inset 0 0 0 2px rgba(0,0,0,0.35);
      display: grid;
      place-items: center;
      cursor: pointer;
      user-select: none;
    }

    .skill-node .glyph {
      width: 30px;
      height: 30px;
      filter: drop-shadow(0 2px 2px rgba(0,0,0,0.6));
      opacity: 0.95;
    }

    .skill-node.is-locked {
      opacity: 0.55;
      border-color: rgba(120,120,120,0.7);
      background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.10), rgba(0,0,0,0.65)),
                  linear-gradient(180deg, rgba(35,35,35,0.95), rgba(12,12,12,0.95));
    }
    .skill-node.is-locked .glyph { opacity: 0.65; }
    .skill-node.is-available { opacity: 0.9; }
    .skill-node.is-unlocked {
      opacity: 1;
      border-color: rgba(240,210,110,0.95);
      box-shadow: 0 10px 24px rgba(0,0,0,0.65), 0 0 18px rgba(240,210,110,0.25), inset 0 0 0 2px rgba(0,0,0,0.35);
    }

    .skill-tooltip {
      position: fixed;
      z-index: 10000;
      padding: 10px 12px;
      max-width: 260px;
      border-radius: 10px;
      background: rgba(10,10,10,0.95);
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: 0 16px 40px rgba(0,0,0,0.55);
      pointer-events: none;
      transform: translate(10px, 10px);
    }
    .skill-tooltip .t-title { font-weight: 800; margin-bottom: 6px; }
    .skill-tooltip .t-desc { font-size: 12px; opacity: 0.85; line-height: 1.3; }
    .skill-tooltip .t-req { margin-top: 8px; font-size: 11px; opacity: 0.7; }

    .skill-tree-footer {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 14px;
      padding: 12px 14px 14px 14px;
      border-top: 1px solid rgba(255,255,255,0.08);
      background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.55));
    }
    .skill-footer-title { font-weight: 900; letter-spacing: 0.4px; margin-bottom: 6px; }
    .skill-footer-text { font-size: 12px; opacity: 0.85; line-height: 1.35; }


/* === Jail Wall Break Transition (Original, Mobile-safe) === */
.jail-wallbreak-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  opacity:0;
  transition: opacity 160ms ease;
}
.jail-wallbreak-overlay.active{ opacity:1; }

.jail-wallbreak-wall{
  width: min(420px, 92vw);
  height: 220px;
  border-radius: 16px;
  border: 2px solid rgba(255,214,122,0.22);
  box-shadow: inset 0 0 18px rgba(0,0,0,0.65), 0 10px 25px rgba(0,0,0,0.55);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.06), rgba(0,0,0,0.12)),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 12px, rgba(0,0,0,0.08) 12px 24px);
  position: relative;
  overflow: hidden;
}

.jail-wallbreak-cracks{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0.95;
}
.jail-wallbreak-cracks path{
  fill:none;
  stroke: rgba(210,210,210,0.92);
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.7));
}
.jail-wallbreak-overlay.active .jail-wallbreak-cracks path{
  animation: jailCrackDraw 520ms ease forwards;
}
.jail-wallbreak-overlay.active .jail-wallbreak-cracks path:nth-child(2){ animation-delay: 70ms; }
.jail-wallbreak-overlay.active .jail-wallbreak-cracks path:nth-child(3){ animation-delay: 120ms; }
.jail-wallbreak-overlay.active .jail-wallbreak-cracks path:nth-child(4){ animation-delay: 160ms; }
.jail-wallbreak-overlay.active .jail-wallbreak-cracks path:nth-child(5){ animation-delay: 210ms; }

@keyframes jailCrackDraw{
  to { stroke-dashoffset: 0; }
}

.jail-wallbreak-chunk{
  position:absolute;
  width: 34px; height: 26px;
  border-radius: 6px;
  background: rgba(210,210,210,0.14);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 0 10px rgba(0,0,0,0.45);
  opacity: 0;
  transform: translate3d(0,0,0) scale(0.9);
}
.jail-wallbreak-chunk.c1{ left: 34%; top: 44%; }
.jail-wallbreak-chunk.c2{ left: 50%; top: 36%; width: 28px; height: 22px; }
.jail-wallbreak-chunk.c3{ left: 60%; top: 52%; width: 30px; height: 24px; }
.jail-wallbreak-chunk.c4{ left: 44%; top: 58%; width: 26px; height: 20px; }

.jail-wallbreak-overlay.burst .jail-wallbreak-chunk{
  animation: jailChunkPop 520ms ease forwards;
}
.jail-wallbreak-overlay.burst .jail-wallbreak-chunk.c1{ animation-delay: 0ms; }
.jail-wallbreak-overlay.burst .jail-wallbreak-chunk.c2{ animation-delay: 40ms; }
.jail-wallbreak-overlay.burst .jail-wallbreak-chunk.c3{ animation-delay: 70ms; }
.jail-wallbreak-overlay.burst .jail-wallbreak-chunk.c4{ animation-delay: 110ms; }

@keyframes jailChunkPop{
  0%{ opacity:0; transform: translate3d(0,0,0) scale(0.8); }
  12%{ opacity:1; }
  100%{ opacity:0; transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0) rotate(var(--dr, 0deg)) scale(1.12); }
}

.jail-wallbreak-dust{
  position:absolute;
  left:50%; top:50%;
  width: 10px; height: 10px;
  transform: translate(-50%,-50%);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(220,220,220,0.42), rgba(220,220,220,0.05) 55%, rgba(220,220,220,0) 75%);
  opacity:0;
  pointer-events:none;
  filter: blur(0.2px);
}
.jail-wallbreak-overlay.burst .jail-wallbreak-dust{
  animation: jailDustPuff 700ms ease forwards;
}
@keyframes jailDustPuff{
  0%{ opacity:0; transform: translate(-50%,-50%) scale(0.6); }
  40%{ opacity:0.7; transform: translate(-50%,-50%) scale(1.05); }
  100%{ opacity:0; transform: translate(-50%,-50%) scale(1.55); }
}

/* === Free Roam Player Sprite (Top_Down_Survivor) === */
    #freeRoamPlayer {
      position: absolute;
      /* Single source of truth for sprite size */
      --fr-size: 32px;
      width: var(--fr-size);
      height: var(--fr-size);
      pointer-events: none;
      z-index: 6; /* above buildings */
      will-change: left, top;
      --fr-rot: 0deg; /* 8-way facing rotation */
      /* CRITICAL FIX: Hide any stray child elements that aren't part of the sprite structure */
      overflow: hidden;
    }
    
    /* CRITICAL FIX: Ensure only recognized sprite layers are visible */
    #freeRoamPlayer > *:not(.fr-rotator) {
      display: none !important;
    }

    /* CRITICAL FIX: Hide any standalone weapon sprites that shouldn't be visible on map */
    #map-entities > .weapon-sprite,
    #map-icons > .weapon-sprite,
    .weapon-sprite:not(g) {
      display: none !important;
    }

    /* Mobile: make the character roughly "cop car" sized */
    @media (max-width: 700px) {
      #freeRoamPlayer { --fr-size: 22px; }
    }

    /* Rotator owns facing direction (rotate), bob owns movement bounce. */
    #freeRoamPlayer .fr-rotator {
      position: absolute;
      left: 50%;
      top: 50%;
      width: var(--fr-size);
      height: var(--fr-size);
      transform: translate(-50%, -50%) rotate(var(--fr-rot));
      transform-origin: 50% 50%;
      transition: transform 140ms ease-out;
    }
    #freeRoamPlayer .fr-bob {
      position: absolute;
      left: 0;
      top: 0;
      width: var(--fr-size);
      height: var(--fr-size);
      transform-origin: 50% 50%;
      will-change: transform;
    }

    #freeRoamPlayer .fr-layer {
      position: absolute;
      left: 50%;
      top: 50%;
      width: var(--fr-size);
      height: var(--fr-size);
      transform: translate(-50%, -50%);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      image-rendering: pixelated;
      /* REMOVED: drop-shadow was creating unwanted shadow box with visible triangle */
      /* filter: drop-shadow(0 6px 6px rgba(0,0,0,0.38)); */
    }
    #freeRoamPlayer .fr-feet { opacity: 0.95; transform: translate(-50%, -50%) scale(0.75); }
    #freeRoamPlayer .fr-body { opacity: 1; transform: translate(-50%, -50%) translateY(-10%); }

    /* Slight bob when moving (only affects bob wrapper, so rotate stays smooth) */
    #freeRoamPlayer.moving .fr-bob { animation: fr-bob 280ms ease-in-out infinite alternate; }
    @keyframes fr-bob {
      from { transform: translateY(0); }
      to   { transform: translateY(1.2px); }
    }

    /* Respect reduce-motion */
    @media (prefers-reduced-motion: reduce) {
      #freeRoamPlayer.moving .fr-bob { animation: none; }
      #freeRoamPlayer .fr-rotator { transition: none; }
    }

/* === Skill Tree Card Tribal Styling (Card Only) === */
.crime-card.card-skill-tree,
.crime-card.skill-tree-card {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 140% at 50% 0%, rgba(120, 0, 0, 0.45) 0%, rgba(18, 10, 10, 0.95) 55%, rgba(8, 6, 6, 0.98) 100%);
  border: 1px solid rgba(150, 40, 40, 0.55);
  box-shadow:
    inset 0 0 18px rgba(140, 0, 0, 0.35),
    inset 0 0 2px rgba(255, 255, 255, 0.06),
    0 10px 22px rgba(0, 0, 0, 0.45);
  /* Flexible height - remove fixed aspect ratio */
  aspect-ratio: unset !important;
  height: auto !important;
  min-height: clamp(140px, 22vh, 180px);
  max-height: none !important;
  /* Responsive padding for all display sizes */
  padding: clamp(14px, 4vw, 18px) clamp(12px, 3.6vw, 16px);
  padding-bottom: clamp(16px, 4.5vw, 20px); /* Extra bottom padding to prevent text clipping */
}

/* subtle etched noise */
.crime-card.card-skill-tree::after,
.crime-card.skill-tree-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,0.05), transparent 35%),
    radial-gradient(circle at 75% 35%, rgba(255,255,255,0.04), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 30%, rgba(0,0,0,0.12));
  opacity: .55;
  pointer-events:none;
}

/* tribal sigil icon */
.crime-card.card-skill-tree .crime-card-icon,
.crime-card.skill-tree-card .crime-card-icon{
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(150, 40, 40, 0.35);
  box-shadow: inset 0 0 10px rgba(180, 30, 30, 0.25);
  position: relative;
  display: grid;
  place-items: center;
  color: transparent; /* hides emoji if any sneaks in */
}

.crime-card.card-skill-tree .crime-card-icon::before,
.crime-card.skill-tree-card .crime-card-icon::before{
  content:"";
  width: 34px;
  height: 34px;
  display:block;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 12 L122 58 L170 78 L126 100 L148 152 L100 126 L52 152 L74 100 L30 78 L78 58 Z" fill="none" stroke="%23d04646" stroke-width="6" stroke-linejoin="round"/><path d="M100 34 L110 74 L146 88 L112 102 L122 138 L100 118 L78 138 L88 102 L54 88 L90 74 Z" fill="none" stroke="%23b33a3a" stroke-width="5" stroke-linejoin="round" opacity="0.95"/><circle cx="100" cy="100" r="10" fill="%23d04646"/></svg>') center/contain no-repeat;
  filter: drop-shadow(0 0 4px rgba(210,70,70,0.35));
  opacity: 0.95;
}

/* text styling */
.crime-card.card-skill-tree .crime-card-label,
.crime-card.skill-tree-card .crime-card-label{
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  /* Responsive font sizing */
  font-size: clamp(9px, 2.8vw, 11px);
  line-height: 1.3;
  /* Allow wrapping */
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.crime-card.card-skill-tree .crime-card-value,
.crime-card.skill-tree-card .crime-card-value{
  font-family: "Cinzel", "Trajan Pro", serif;
  color: #d14a4a;
  letter-spacing: 0.04em;
  text-transform: none;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(0,0,0,0.5), 0 0 10px rgba(180, 40, 40, 0.25);
  /* Responsive font sizing and line-height */
  font-size: clamp(15px, 4.5vw, 19px);
  line-height: 1.35;
  margin-bottom: clamp(3px, 1vw, 5px); /* Responsive spacing before subvalue */
  /* Allow wrapping */
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.crime-card.card-skill-tree .crime-card-subvalue,
.crime-card.skill-tree-card .crime-card-subvalue{
  font-family: "Cinzel", serif;
  color: rgba(255,255,255,0.78);
  opacity: 0.95;
  /* Responsive font sizing and line-height */
  font-size: clamp(9px, 2.5vw, 11px);
  line-height: 1.5;
  /* Allow wrapping */
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* hover glow */
.crime-card.card-skill-tree:hover,
.crime-card.skill-tree-card:hover{
  border-color: rgba(210, 70, 70, 0.75);
  box-shadow:
    inset 0 0 20px rgba(180, 40, 40, 0.35),
    inset 0 0 2px rgba(255, 255, 255, 0.06),
    0 14px 28px rgba(0, 0, 0, 0.55);
}
/* === Mobile optimization pass (skills UI) === */
@media (max-width: 520px){
  /* Make modal truly mobile-friendly */
  #skill-tree-modal .modal-content,
  .skill-modal-content,
  .skill-tree-modal-content {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  }

  .skill-modal-panel {
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .skill-modal-body {
    height: calc(100vh - 60px) !important;
  }

  /* Stack trees vertically with proper spacing */
  .skill-trees {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    padding: 16px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .skill-tree-col {
    min-height: 500px !important;
    height: auto !important;
  }

  .skill-tree-col-title {
    padding: 12px 16px !important;
    font-size: 14px !important;
  }

  .skill-tree-canvas {
    height: 480px !important;
    min-height: 480px !important;
  }

  /* Bigger tap targets for nodes */
  .skill-node {
    width: 64px !important;
    height: 64px !important;
  }

  .skill-node .glyph {
    width: 36px !important;
    height: 36px !important;
  }

  /* Tooltip readability */
  .skill-tooltip {
    font-size: 14px !important;
    line-height: 1.4 !important;
    max-width: min(90vw, 320px) !important;
    padding: 12px 14px !important;
  }

  .skill-tooltip-title {
    font-size: 15px !important;
    margin-bottom: 6px !important;
  }

  .skill-tooltip-desc {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* Header adjustments */
  .skill-modal-header {
    padding: 14px 16px !important;
  }

  .skill-modal-title {
    font-size: 20px !important;
  }

  .skill-modal-close {
    width: 40px !important;
    height: 40px !important;
  }

  /* Legends section at bottom */
  .skill-legends {
    padding: 14px !important;
    font-size: 13px !important;
  }

  .legend-item {
    font-size: 13px !important;
  }
}
/* === GRITTY CRIME RPG BATTLE SYSTEM - EXACT REFERENCE MATCH === */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@400;600;700&display=swap');

#battle-app {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #1a1510;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Battle scene background - urban street */
.battle-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Main battle frame - metallic border */
.battle-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 12px solid #3d3428;
  box-shadow:
    inset 0 0 0 4px #2a231c,
    inset 0 0 0 8px #1a1510,
    0 0 40px rgba(0,0,0,0.8);
  z-index: 1;
  pointer-events: none;
}

/* Corner rivets */
.battle-frame::before,
.battle-frame::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle at 30% 30%, #5a4a38, #3d3428 50%, #2a231c);
  border-radius: 50%;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.2),
    inset 0 -2px 4px rgba(0,0,0,0.5),
    0 2px 4px rgba(0,0,0,0.6);
}

.battle-frame::before {
  top: 15px;
  left: 15px;
}

.battle-frame::after {
  top: 15px;
  right: 15px;
}

/* Street Battle Title - Centered at top */
#battle-app .title {
  position: absolute;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  color: #c9b896;
  font-family: "Bebas Neue", "Oswald", sans-serif;
  font-size: 38px;
  letter-spacing: 6px;
  text-transform: uppercase;
  text-shadow:
    2px 2px 0 #1a1510,
    4px 4px 8px rgba(0, 0, 0, 0.8);
  z-index: 100;
  margin: 0;
  padding: 0;
}

/* Money Display - Top Right with coin badge */
.money-display {
  position: absolute;
  top: 20px;
  right: 25px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(145deg, #2d2620, #1a1510);
  border: 3px solid #4a3d2e;
  border-radius: 8px;
  padding: 8px 16px;
  z-index: 100;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 4px 12px rgba(0,0,0,0.6);
}

.coin-icon {
  width: 28px;
  height: 28px;
  background: radial-gradient(circle at 35% 35%, #ffd700, #b8860b 60%, #8b6914);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4a3500;
  font-size: 16px;
  font-weight: bold;
  font-family: "Oswald", sans-serif;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.4),
    inset 0 -2px 4px rgba(0,0,0,0.3),
    0 2px 4px rgba(0,0,0,0.5);
}

.money-amount {
  color: #c9b896;
  font-size: 22px;
  font-weight: 600;
  font-family: "Oswald", sans-serif;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

/* Battlefield Area - Main arena */
.battle-scene {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: hidden;
}

/* Urban background image container */
.battle-arena {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 180px);
  background:
    /* Dark vignette overlay */
    radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.7) 100%),
    /* The urban street scene - gritty alley with buildings */
    linear-gradient(to bottom, rgba(15,12,10,0.4), rgba(20,18,15,0.3));
  background-size: cover;
  background-position: center;
}

/* Enemy Info Panel - Top Left with skull icon */
.box-top-left {
  position: absolute;
  top: 80px;
  left: 25px;
  min-width: 220px;
  background: linear-gradient(165deg, rgba(35,30,25,0.95), rgba(20,18,15,0.98));
  border: 3px solid #4a3d2e;
  border-radius: 8px;
  padding: 12px 16px;
  z-index: 50;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -2px 0 rgba(0,0,0,0.4),
    0 6px 16px rgba(0,0,0,0.7);
}

.enemy-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.enemy-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(145deg, #2d2620, #1a1510);
  border: 2px solid #5a4a38;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.enemy-name {
  color: #c9b896;
  font-size: 18px;
  font-weight: 700;
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
  margin: 0;
}

.enemy-level {
  color: #a09080;
  font-size: 14px;
  font-family: "Oswald", sans-serif;
  margin-left: auto;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

/* HP Bars - Orange/Yellow gradient on dark */
.hp-bar-container {
  width: 100%;
  height: 14px;
  background: #1a1510;
  border: 2px solid #3d3428;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.6);
}

.hp-bar-top,
.hp-bar-bottom {
  width: 100%;
  height: 14px;
  background: #1a1510;
  border: 2px solid #3d3428;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.6);
}

.hp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #8b6b00 0%, #c9a000 30%, #e6b800 60%, #f0c800 100%);
  transition: width 0.4s ease-out;
  box-shadow: 0 0 8px rgba(230,184,0,0.4);
}

/* Player sprite - LEFT side (opponent on right in reference is actually enemy) */
.player-sprite-container {
  position: absolute;
  left: 8%;
  bottom: 220px;
  z-index: 20;
}

.player-sprite-container img,
.pokemon-bottom {
  max-width: 280px;
  max-height: 280px;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.6));
  image-rendering: pixelated;
}

/* Enemy sprite - RIGHT side */
.enemy-sprite-container {
  position: absolute;
  right: 8%;
  top: 120px;
  z-index: 20;
}

.enemy-sprite-container img,
.pokemon-top {
  max-width: 260px;
  max-height: 260px;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.6));
  image-rendering: pixelated;
}

/* ====== BATTLE SPRITE STYLES ====== */

/* ====== BATTLE ARENA BOX - Mobile-first sprite containment ====== */
/* Arena excludes: top HUD (title ~70px) + enemy HP (~80px) = ~150px top
   Bottom UI area (bottom-menu = 180px) + player nameplate margin = ~200px bottom
   This creates a safe "arena box" for sprites to live in */

/* Debug arena outline - toggle via JS: document.body.classList.add('battle-debug') */
.battle-debug .battle-player-sprite-container,
.battle-debug .battle-enemy-sprite-container {
  outline: 2px dashed rgba(0, 255, 0, 0.7);
  outline-offset: -2px;
}
.battle-debug .battle-player-sprite-container::after,
.battle-debug .battle-enemy-sprite-container::after {
  content: attr(data-debug-label);
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: #0f0;
  background: rgba(0,0,0,0.8);
  padding: 2px 4px;
  white-space: nowrap;
}

/* ====== BATTLE PLAYER SPRITE ANIMATIONS ====== */
/* Idle breathing/bob animation - subtle and continuous */
/* Note: scaleX(-1) must be in keyframes since animations override base transform */
@keyframes battle-idle-bob {
  0%, 100% { transform: scaleX(-1) translateY(0); }
  50% { transform: scaleX(-1) translateY(-3px); }
}

/* Attack recoil animation - quick kickback then settle */
/* Note: translateX values are inverted because of scaleX(-1) */
@keyframes battle-attack-recoil {
  0% { transform: scaleX(-1) translateX(0) translateY(0); }
  15% { transform: scaleX(-1) translateX(-12px) translateY(-2px); }
  40% { transform: scaleX(-1) translateX(4px) translateY(1px); }
  100% { transform: scaleX(-1) translateX(0) translateY(0); }
}

/* Hit reaction animation - shake + knockback + flash */
@keyframes battle-hit-shake {
  0% { transform: scaleX(-1) translateX(0); filter: drop-shadow(0 8px 16px rgba(0,0,0,0.6)) brightness(1); }
  10% { transform: scaleX(-1) translateX(-8px); filter: drop-shadow(0 8px 16px rgba(0,0,0,0.6)) brightness(2); }
  20% { transform: scaleX(-1) translateX(6px); filter: drop-shadow(0 8px 16px rgba(0,0,0,0.6)) brightness(1.5); }
  30% { transform: scaleX(-1) translateX(-5px); filter: drop-shadow(0 8px 16px rgba(0,0,0,0.6)) brightness(1.2); }
  50% { transform: scaleX(-1) translateX(3px); filter: drop-shadow(0 8px 16px rgba(0,0,0,0.6)) brightness(1); }
  70% { transform: scaleX(-1) translateX(-2px); filter: drop-shadow(0 8px 16px rgba(0,0,0,0.6)) brightness(1); }
  100% { transform: scaleX(-1) translateX(0); filter: drop-shadow(0 8px 16px rgba(0,0,0,0.6)) brightness(1); }
}

/* Aim posture micro-lean (optional subtle effect) */
@keyframes battle-aim-lean {
  0%, 100% { transform: scaleX(-1) translateX(0) rotate(0deg); }
  50% { transform: scaleX(-1) translateX(-2px) rotate(-1deg); }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .battle-player-portrait img,
  .battle-player-portrait img.battle-anim-idle,
  .battle-player-portrait img.battle-anim-attack,
  .battle-player-portrait img.battle-anim-hit {
    animation: none !important;
    transform: scaleX(-1) !important; /* Preserve flip even without animation */
  }
}

/* Battle player sprite container - RIGHT side, faces RIGHT toward enemy on LEFT */
/* INCREASED SIZE: ~1.8x-2.5x for better visibility, uniform scaling */
.battle-player-sprite-container {
  position: absolute;
  /* Arena-relative positioning: right side with safe padding */
  right: 6%;
  /* Position ABOVE player nameplate (nameplate bottom ~200px, add 20px clearance) */
  /* Ensures sprite bottom edge sits above nameplate top edge */
  bottom: clamp(220px, calc(200px + 5vh), 280px);
  z-index: 25; /* Above background, below UI panels (z-index: 50) */
  /* Responsive sizing: MUCH LARGER (1.8x-2.5x) - uniform scale with arena height */
  /* Arena ~= 100vh - 150px top - 200px bottom = ~450px on mobile */
  width: clamp(220px, 45vw, 420px);
  height: clamp(300px, 55vh, 520px);
  pointer-events: none;
  /* Allow sprite shadows to render outside bounds */
  overflow: visible;
}

/* Battle player sprite - uses free-roam sprite style (fallback) */
.battle-player-sprite {
  position: relative;
  width: 100%;
  height: 100%;
  /* Face LEFT toward enemy (player on right side, enemy on left) */
  /* Sprite natively faces LEFT - explicit scaleX(1) ensures no flip is applied */
  /* Keep this explicit to prevent future overrides from accidentally flipping */
  transform: scaleX(1);
  /* Prevent fallback top-down sprites from extending outside container bounds */
  overflow: hidden;
}

/* Battle player portrait - NEW side-view sprite for battle-only */
.battle-player-portrait {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end; /* Anchor sprite to bottom of container */
  justify-content: center;
  /* Allow portrait shadows to extend outside bounds */
  overflow: visible;
}

.battle-player-portrait img {
  /* Uniform scaling: use max-height and let width auto-scale */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Face LEFT toward enemy - sprite natively faces LEFT, no flip needed */
  /* Player is on right, enemy is on left - explicit scaleX(1) prevents accidental flips */
  transform: scaleX(1);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.6));
  image-rendering: auto; /* Better quality for portrait art */
  /* Smooth transitions between animation states */
  transition: filter 0.1s ease;
}

/* Animation state classes - applied via JavaScript */
/* Idle animation class starts the subtle bob */
.battle-player-portrait img.battle-anim-idle {
  animation: battle-idle-bob 2.5s ease-in-out infinite;
}

.battle-player-portrait img.battle-anim-attack {
  animation: battle-attack-recoil 0.35s ease-out forwards;
}

.battle-player-portrait img.battle-anim-hit {
  animation: battle-hit-shake 0.4s ease-out forwards;
}

.battle-player-portrait img.battle-anim-aim {
  animation: battle-aim-lean 1.5s ease-in-out infinite;
}

.battle-sprite-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  image-rendering: pixelated;
}

.battle-sprite-feet {
  opacity: 0.95;
  transform: translate(-50%, -50%) scale(0.75);
}

.battle-sprite-body {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(-10%);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.6));
}

/* Battle enemy sprite - LEFT side, faces RIGHT toward player */
/* Positioned in upper-left "white box" area of arena for depth effect */
.battle-enemy-sprite-container {
  position: absolute;
  /* Arena-relative positioning: upper-left quadrant */
  /* ~10-14% from left edge for safe padding */
  left: 10%;
  /* Position from top: below HUD (top ~150px), ~15% into arena height */
  /* Arena starts at ~150px (title + enemy HP bar) */
  top: clamp(160px, calc(150px + 12vh), 220px);
  z-index: 25; /* Above background, below UI panels */
  /* Overflow visible allows enemy sprites to display drop shadows without clipping */
  overflow: visible;
  /* Transform origin for proper scaling from upper-left */
  transform-origin: left top;
}

.battle-enemy-sprite {
  /* Smaller size for depth effect (enemy appears farther away) */
  /* Target ~40-50% of arena height for "distant" feel */
  max-width: clamp(100px, 22vw, 180px);
  max-height: clamp(120px, 28vh, 200px);
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.5));
  image-rendering: auto; /* Better quality for gritty enemy art */
  /* Face RIGHT toward player (enemy on left side) - sprites face right by default */
  transform: scaleX(1);
}

/* 3D Enemy GLB model container */
.enemy-3d-container {
  width: clamp(100px, 22vw, 180px);
  height: clamp(120px, 28vh, 200px);
  position: relative;
}

.enemy-3d-container .enemy-3d-canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.5));
}

/* ====== MOBILE RESPONSIVE BATTLE SPRITES ====== */
/* Mobile-first: smaller screens get proportional sizing */
/* Player sprite is larger (~1.8x-2.5x base), enemy matches proportionally */
@media (max-width: 600px) {
  .battle-player-sprite-container {
    /* Larger size for mobile - maintain visibility, uniform scaling */
    width: clamp(180px, 42vw, 300px);
    height: clamp(260px, 50vh, 400px);
    right: 4%;
    /* Higher bottom to stay above nameplate */
    bottom: clamp(215px, calc(195px + 5vh), 270px);
  }
  
  .battle-enemy-sprite {
    /* Slightly smaller on mobile for depth, but still visible */
    max-width: clamp(90px, 25vw, 150px);
    max-height: clamp(110px, 30vh, 180px);
  }

  .enemy-3d-container {
    width: clamp(90px, 25vw, 150px);
    height: clamp(110px, 30vh, 180px);
  }
  
  .battle-enemy-sprite-container {
    /* Upper-left positioning: slightly closer to left edge on mobile */
    left: 6%;
    /* Position from top: adjust for mobile HUD size */
    top: clamp(150px, calc(140px + 10vh), 200px);
  }
}

/* Extra small screens (narrow phones like 360px width) */
@media (max-width: 400px) {
  .battle-player-sprite-container {
    /* Still bigger than before but scaled for narrow screens */
    width: clamp(150px, 38vw, 240px);
    height: clamp(220px, 45vh, 340px);
    right: 2%;
    /* Higher bottom to stay above nameplate */
    bottom: clamp(210px, calc(190px + 5vh), 260px);
  }
  
  .battle-enemy-sprite {
    /* Smaller on narrow phones for depth */
    max-width: clamp(80px, 22vw, 120px);
    max-height: clamp(100px, 26vh, 150px);
  }

  .enemy-3d-container {
    width: clamp(80px, 22vw, 120px);
    height: clamp(100px, 26vh, 150px);
  }
  
  .battle-enemy-sprite-container {
    /* Upper-left positioning: safe padding on narrow phones */
    left: 4%;
    /* Position from top: adjust for narrow screen HUD */
    top: clamp(145px, calc(135px + 10vh), 190px);
  }
}

/* Tall aspect ratios (20:9 phones) - ensure sprites stay in arena */
@media (max-aspect-ratio: 9/16) {
  .battle-player-sprite-container {
    /* Player sprite raised higher to clear nameplate on tall screens */
    /* Nameplate is larger relative to screen, needs more clearance */
    bottom: clamp(225px, calc(200px + 6vh), 300px);
  }
  
  .battle-enemy-sprite-container {
    /* Upper-left positioning: adjust for tall aspect ratio */
    top: clamp(170px, calc(155px + 10vh), 230px);
  }
}

/* Short/wide aspect ratios - prevent sprites from being too large */
@media (min-aspect-ratio: 16/10) {
  .battle-player-sprite-container {
    width: clamp(180px, 25vw, 320px);
    height: clamp(260px, 40vh, 400px);
  }
  
  .battle-enemy-sprite {
    max-width: clamp(140px, 22vw, 220px);
    max-height: clamp(180px, 30vh, 250px);
  }
}

/* ====== END BATTLE SPRITE STYLES ====== */

/* Player Info Panel - Bottom Right */
.box-top-right {
  position: absolute;
  right: 25px;
  bottom: 200px;
  min-width: 200px;
  background: linear-gradient(165deg, rgba(35,30,25,0.95), rgba(20,18,15,0.98));
  border: 3px solid #4a3d2e;
  border-radius: 8px;
  padding: 12px 16px;
  z-index: 50;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -2px 0 rgba(0,0,0,0.4),
    0 6px 16px rgba(0,0,0,0.7);
}

.player-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.player-name {
  color: #c9b896;
  font-size: 16px;
  font-weight: 700;
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
  margin: 0;
}

.player-level {
  color: #a09080;
  font-size: 14px;
  font-family: "Oswald", sans-serif;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

/* BOTTOM COMMAND PANEL - Industrial metal design */
.bottom-menu {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 180px;
  background: linear-gradient(180deg, #2d2620 0%, #1a1510 100%);
  border-top: 4px solid #4a3d2e;
  z-index: 30;
  display: flex;
  flex-direction: column;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.05),
    0 -4px 20px rgba(0,0,0,0.5);
}

/* Metal texture overlay */
.bottom-menu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 2px,
      rgba(0,0,0,0.1) 2px,
      rgba(0,0,0,0.1) 4px
    );
  pointer-events: none;
  opacity: 0.5;
}

/* Text box for battle messages */
.text-box-left {
  padding: 16px 24px;
  border-bottom: 2px solid #3d3428;
  background: rgba(0,0,0,0.2);
}

.battle-text {
  color: #c9b896;
  font-size: 18px;
  line-height: 1.4;
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

/* Command Options Area - Horizontal row */
.text-box-right {
  flex: 1;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Battle Options - 4 buttons in horizontal row */
#battleOptions,
#fightOptions,
#endOptions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 100%;
}

/* Action Button Base Style - Industrial metal */
.battle-text-top-left,
.battle-text-top-right,
.battle-text-bottom-left,
.battle-text-bottom-right {
  flex: 1;
  max-width: 140px;
  height: 80px;
  background: linear-gradient(165deg, #3d3428 0%, #2d2620 50%, #1a1510 100%);
  border: 3px solid #5a4a38;
  border-radius: 8px;
  color: #c9b896;
  font-size: 12px;
  font-weight: 700;
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    inset 0 -2px 0 rgba(0,0,0,0.4),
    0 4px 8px rgba(0,0,0,0.5);
  position: relative;
  margin: 0;
  padding: 8px;
}

/* Button icons container */
.battle-text-top-left .btn-icon,
.battle-text-top-right .btn-icon,
.battle-text-bottom-left .btn-icon,
.battle-text-bottom-right .btn-icon {
  font-size: 28px;
  line-height: 1;
}

/* Hover state for active buttons */
.battle-text-top-left:hover,
.battle-text-top-right:hover,
.battle-text-bottom-right:hover {
  background: linear-gradient(165deg, #4a3d2e 0%, #3d3428 50%, #2d2620 100%);
  border-color: #6b5a42;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -2px 0 rgba(0,0,0,0.5),
    0 6px 12px rgba(0,0,0,0.6);
}

.battle-text-top-left:active,
.battle-text-top-right:active,
.battle-text-bottom-right:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.5),
    0 2px 4px rgba(0,0,0,0.4);
}

/* Locked button style (ITEM) */
.battle-text-bottom-left.locked {
  background: linear-gradient(165deg, #252220 0%, #1a1815 50%, #121110 100%);
  border-color: #3d3428;
  color: #5a5048;
  cursor: not-allowed;
  opacity: 0.7;
}

.battle-text-bottom-left.locked:hover {
  transform: none;
  background: linear-gradient(165deg, #252220 0%, #1a1815 50%, #121110 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -2px 0 rgba(0,0,0,0.4),
    0 4px 8px rgba(0,0,0,0.5);
}

/* Locked badge */
.locked-badge {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: #1a1510;
  border: 1px solid #3d3428;
  padding: 2px 8px;
  font-size: 9px;
  letter-spacing: 1px;
  color: #6b5a42;
  border-radius: 2px;
}

/* Settings Gear - Top Left */
.settings-gear-button {
  position: absolute;
  top: 20px;
  left: 25px;
  width: 44px;
  height: 44px;
  background: linear-gradient(145deg, #3d3428, #2d2620);
  border: 2px solid #5a4a38;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  z-index: 100;
  transition: all 0.2s ease;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    inset 0 -1px 0 rgba(0,0,0,0.3),
    0 3px 8px rgba(0,0,0,0.5);
}

.settings-gear-button:hover {
  transform: rotate(30deg);
  background: linear-gradient(145deg, #4a3d2e, #3d3428);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    0 4px 12px rgba(0,0,0,0.6);
}

/* Box containers for sprites */
.box-bottom-left {
  position: absolute;
  left: 5%;
  bottom: 200px;
  z-index: 20;
}

.box-bottom-right {
  display: none;
}

/* Ground/shadow under sprites */
.sprite-shadow {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 20px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.4) 0%, transparent 70%);
}

/* Pokemon name and level text styling */
.battle-scene .pokemon {
  color: #c9b896;
  font-size: 18px;
  font-weight: 700;
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
  margin: 0;
}

.battle-scene .level {
  color: #a09080;
  font-size: 14px;
  font-family: "Oswald", sans-serif;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.battle-scene .hp {
  color: #a09080;
  font-size: 13px;
  font-family: "Oswald", sans-serif;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
  margin-top: 6px;
  text-align: right;
}

/* Mobile Responsive */
@media all and (max-width: 768px) {
  #battle-app .title {
    font-size: 28px;
    letter-spacing: 4px;
    top: 20px;
  }

  .box-top-left {
    top: 65px;
    left: 15px;
    min-width: 180px;
    padding: 10px 12px;
  }

  .enemy-icon {
    width: 32px;
    height: 32px;
    font-size: 18px;
  }

  .enemy-name {
    font-size: 14px;
  }

  /* Player info box - positioned above the player sprite */
  .box-top-right {
    bottom: 195px !important;
    right: 15px !important;
    min-width: 160px;
    padding: 10px 12px;
  }

  .player-name {
    font-size: 14px;
  }

  /* Legacy pokemon-bottom class (enemy sprite on LEFT) - sizing now handled by .battle-enemy-sprite */
  .player-sprite-container img,
  .pokemon-bottom {
    /* Sizing handled by .battle-enemy-sprite via clamp() in main styles */
  }

  /* Legacy pokemon-top class (player sprite on RIGHT) - sizing now handled by .battle-player-sprite-container */
  .enemy-sprite-container img,
  .pokemon-top {
    /* Sizing handled by .battle-player-sprite-container via clamp() in main styles */
  }

  /* Enemy sprite container (on left side) - positioning now handled by main styles */
  .box-bottom-left.battle-enemy-sprite-container {
    /* Positioning handled via clamp() in main styles - removed !important overrides */
  }

  .bottom-menu {
    height: 170px;
  }

  .text-box-left {
    padding: 12px 16px;
  }

  .battle-text {
    font-size: 15px;
  }

  .text-box-right {
    padding: 8px 12px;
  }

  #battleOptions,
  #fightOptions,
  #endOptions {
    gap: 8px;
  }

  .battle-text-top-left,
  .battle-text-top-right,
  .battle-text-bottom-left,
  .battle-text-bottom-right {
    max-width: 100px;
    height: 65px;
    font-size: 10px;
    padding: 6px;
    gap: 4px;
    border-width: 2px;
  }

  .battle-text-top-left .btn-icon,
  .battle-text-top-right .btn-icon,
  .battle-text-bottom-left .btn-icon,
  .battle-text-bottom-right .btn-icon,
  .battle-text-top-left span[style*="font-size: 28px"],
  .battle-text-top-right span[style*="font-size: 28px"],
  .battle-text-bottom-left span[style*="font-size: 28px"],
  .battle-text-bottom-right span[style*="font-size: 28px"] {
    font-size: 20px !important;
  }

  .money-display {
    padding: 6px 12px;
    top: 18px;
    right: 15px;
  }

  .money-amount {
    font-size: 18px;
  }

  .coin-icon {
    width: 24px;
    height: 24px;
    font-size: 14px;
  }

  .settings-gear-button {
    width: 36px;
    height: 36px;
    font-size: 14px;
    top: 18px;
    left: 15px;
  }

  .hp-bar-top,
  .hp-bar-bottom {
    height: 12px;
  }

  .locked-badge {
    font-size: 8px;
    padding: 1px 5px;
    top: -6px;
  }
}

@media all and (max-width: 480px) {
  #battle-app .title {
    font-size: 22px;
    letter-spacing: 3px;
  }

  .box-top-left {
    min-width: 150px;
    top: 60px;
  }

  .box-top-right {
    min-width: 140px;
    bottom: 185px !important;
  }

  /* Enemy sprite - let main clamp() styles handle positioning */
  .box-bottom-left.battle-enemy-sprite-container {
    /* Removed !important - using clamp() in main styles */
  }

  .player-sprite-container img,
  .pokemon-bottom {
    /* Let .battle-enemy-sprite handle sizing via clamp() */
  }

  .enemy-sprite-container img,
  .pokemon-top {
    /* Let .battle-player-sprite-container handle sizing via clamp() */
  }

  .battle-text-top-left,
  .battle-text-top-right,
  .battle-text-bottom-left,
  .battle-text-bottom-right {
    max-width: 75px;
    height: 55px;
    font-size: 9px;
  }
}
  #spriteDebugPanel{
  display:none;
    position: fixed; left: 10px; bottom: 10px;
    z-index: 100000;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 8px 10px;
    font: 12px/1.25 system-ui, -apple-system, Segoe UI, Roboto, Arial;
    border-radius: 10px;
    max-width: 92vw; min-width: 220px;
    pointer-events: none;
  }
  #spriteDebugPanel b{ font-weight: 700; }


/* =====================================================
   PROFILE TAB UI UPGRADE V2 - Using ChatGPT Assets
   ===================================================== */

/* Global Background for ALL tabs */
body {
  background: url('../sprites/ui-new/PlayerProfile/background.png') no-repeat center center !important;
  background-size: cover !important;
  background-attachment: scroll !important;
}

/* Dynamic background-effects canvas (stars, smoke, fog, rain, embers) */
#bg-effects-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

#app {
  background: transparent;
  position: relative;
  z-index: 1;
}

#content {
  background: transparent;
}

/* All tab backgrounds use the same image */
.tab-content {
  background: transparent !important;
  position: relative;
  padding-bottom: 90px !important; /* Space for fixed tab bar */
  min-height: calc(100vh - 80px);
}

#profile-tab,
#turf-tab,
#crimes-tab,
#safehouse-tab,
#gang-tab {
  background: transparent !important;
  padding-bottom: 100px !important;
}

/* Page Header */
.page-header {
  font-family: 'Cinzel', serif;
  font-size: 26px;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.9);
  padding: 16px 20px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 10;
}

/* Fullscreen toggle button */
.fullscreen-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;
  padding: 0;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: #b0b0b0;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
}

.fullscreen-toggle-btn .fullscreen-btn-label {
  display: none;
}

.fullscreen-toggle-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.fullscreen-toggle-btn:hover {
  background: linear-gradient(135deg, #1f1f3a 0%, #1b2a4a 50%, #145090 100%);
  border-color: rgba(255,255,255,0.22);
  color: #e0e0e0;
  transform: scale(1.04);
  box-shadow: 0 4px 14px rgba(15,52,96,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
}

.fullscreen-toggle-btn:active {
  transform: scale(0.97);
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* Header buttons container */
.profile-header-buttons {
  display: flex;
  gap: 12px;
}

.profile-header-btn {
  width: 50px;
  height: 50px;
  border: none !important;
  background: transparent !important;
  cursor: pointer;
  padding: 0;
  transition: transform 0.2s, filter 0.2s;
  outline: none;
}

.profile-header-btn:hover {
  transform: scale(1.1);
  filter: brightness(1.2);
}

.profile-header-btn:active {
  transform: scale(0.95);
}

.profile-header-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Force header button images to show */
#global-chat-btn,
#logout-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Crime Board Grid */
.crime-board {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Align items to stretch so card pairs have equal heights */
  align-items: stretch;
  /* Tighter spacing so the Profile grid fits comfortably on mobile */
  gap: 12px;
  padding: 6px 8px 18px;
  position: relative;
  z-index: 5;
}

/* =====================================================
   MAIN PROFILE CARD (Full width, player info)
   ===================================================== */
.crime-card.card-profile {
  grid-column: 1 / -1;
  background: url('../sprites/ui-new/PlayerProfile/PlayerOnlyUiSquare.png') no-repeat center center;
  background-size: 100% 100%;
  border: none;
  border-radius: 0;
  /* Responsive sizing: keeps the main card from eating the whole screen on phones */
  min-height: clamp(230px, 34vh, 270px);
  padding: clamp(16px, 4.2vw, 24px) clamp(16px, 5vw, 28px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  cursor: pointer;
  transition: transform 0.2s, filter 0.2s;
  box-shadow: none;
  overflow: hidden; /* Prevent text/shadows from leaking outside the frame */
}

.crime-card.card-profile:hover {
  transform: scale(1.02);
  filter: brightness(1.1);
}

.crime-card.card-profile::before,
.crime-card.card-profile::after {
  display: none;
}

/* Player Avatar Circle */
.profile-card-avatar {
  width: clamp(62px, 18vw, 80px);
  height: clamp(62px, 18vw, 80px);
  background: url('../sprites/ui-new/PlayerProfile/nameplateforplayer.png') no-repeat center center;
  background-size: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(24px, 7vw, 32px);
  font-weight: 700;
  color: #1a3a5c;
  text-shadow: none;
  flex-shrink: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.profile-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  align-items: center;
}

.profile-card-name {
  font-family: 'Cinzel', serif;
  font-size: clamp(18px, 5.5vw, 22px);
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
  text-align: center;
  max-width: 92%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  width: 100%;
  gap: 10px;
  min-width: 0;
  max-width: min(300px, 92%);
}

.profile-card-row .profile-card-label {
  font-size: 12px;
  color: rgba(200, 200, 200, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-card-row .profile-card-value {
  font-size: 14px;
  font-weight: 600;
  color: #7ec8ff;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 52%;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Small icons in profile card rows */
.profile-row-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* XP Progress Bar */
.profile-xp-bar {
  width: 100%;
  max-width: 280px;
  height: 10px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  overflow: hidden;
  margin-top: 4px;
}

.profile-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #4a90d9 0%, #7ec8ff 100%);
  border-radius: 5px;
  transition: width 0.3s ease;
}

/* =====================================================
   STANDARD CRIME CARDS (Grid squares)
   ===================================================== */
.crime-card {
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  border: none !important;
  border-radius: 0 !important;
  /* Responsive sizing: smaller on phones, roomy on tablets/desktop */
  /* Fallback min-height for browsers without clamp() support */
  min-height: 130px;
  min-height: clamp(128px, 20vh, 160px);
  aspect-ratio: 1.5 / 1;
  /* Fallback padding for browsers without clamp() support */
  padding: 12px;
  padding: clamp(12px, 3.6vw, 16px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  cursor: pointer;
  transition: transform 0.2s, filter 0.2s;
  box-shadow: none !important;
  position: relative;
  overflow: hidden; /* Stop label/value shadows from leaking out of the frame */
  min-width: 0;
}

.crime-card::before,
.crime-card::after {
  display: none !important;
}

.crime-card:hover {
  transform: scale(1.03);
  filter: brightness(1.1);
}

.crime-card:active {
  transform: scale(0.98);
}

/* Card backgrounds by type */
.crime-card.card-cash {
  background-image: url('../sprites/ui-new/PlayerProfile/CashUiSquare.png');
}

.crime-card.card-xp {
  background-image: url('../sprites/ui-new/PlayerProfile/LevelUiSquare.png');
}

.crime-card.card-rep {
  background-image: url('../sprites/ui-new/PlayerProfile/ReputationUiSquare.png');
}

.crime-card.card-heat {
  background-image: url('../sprites/ui-new/PlayerProfile/HeatUiSquare.png');
}

.crime-card.card-global-heat {
  background-image: url('../sprites/ui-new/PlayerProfile/GlobalHeatUiSquare.png');
}

.crime-card.card-leaderboard {
  background-image: url('../sprites/ui-new/PlayerProfile/LeaderboardsUiSquare.png');
  /* Force card to match other cards - use !important to override any conflicts */
  width: 100% !important;
  max-width: 100% !important;
  height: 160px !important;
  min-height: 160px !important;
  max-height: 160px !important;
}

.crime-card.card-players-online {
  background-image: url('../sprites/ui-new/PlayerProfile/PlayersOnlineSquare.png');
  /* Let the grid column width drive sizing so it can't overflow/overlap */
  width: 100%;
  max-width: 100%;
  /* Fallback min-height for browsers without aspect-ratio support */
  min-height: 170px;
  aspect-ratio: 1 / 1.1;
}

.crime-card.card-stats {
  background-image: url('../sprites/ui-new/PlayerProfile/StatsSquare.png');
  /* Let the grid column width drive sizing so it can't overflow/overlap */
  width: 100%;
  max-width: 100%;
  /* Fallback min-height for browsers without aspect-ratio support */
  min-height: 170px;
  aspect-ratio: 1 / 1.1;
}

.crime-card.card-skill-tree {
  background-image: url('../sprites/ui-new/PlayerProfile/SkillTreeSquare.png');
}

.crime-card.card-heat-log {
  background-image: url('../sprites/ui-new/PlayerProfile/HeatlogSquare.png');
}

.crime-card.card-expense-log {
  background-image: url('../sprites/ui-new/PlayerProfile/ExpenseLogSquare.png');
}

/* Card Icon - positioned at top left */
.crime-card-icon {
  position: absolute;
  top: clamp(8px, 2vw, 10px);
  left: clamp(8px, 2vw, 10px);
  width: clamp(32px, 9vw, 40px);
  height: clamp(32px, 9vw, 40px);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Icon images by card type */
.crime-card.card-cash .crime-card-icon {
  background-image: url('../sprites/ui-new/PlayerProfile/playercashProfile.png');
  /* Center the money icon and make it larger */
  width: 70px;
  height: 70px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.crime-card.card-xp .crime-card-icon {
  background-image: url('../sprites/ui-new/PlayerProfile/playerLevelEmblemProfile.png');
  /* Center the level emblem and make it larger - same as cash icon */
  width: 70px;
  height: 70px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.crime-card.card-rep .crime-card-icon {
  background-image: url('../sprites/ui-new/PlayerProfile/leaderboardsCrownProfile.png');
  /* Center the crown - slightly larger to visually match level emblem */
  width: 85px;
  height: 85px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.crime-card.card-heat .crime-card-icon {
  background-image: url('../sprites/ui-new/PlayerProfile/playerHeatProfile.png');
  /* Center the heat icon and make it larger - same as cash icon */
  width: 70px;
  height: 70px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Heat card text positioning adjustments */
.crime-card.card-heat .crime-card-label {
  position: relative;
  top: -2px;
  left: 3px;
}

.crime-card.card-heat .crime-card-value {
  position: relative;
  top: -2px;
  left: 2px;
}

.crime-card.card-global-heat .crime-card-icon {
  background-image: url('../sprites/ui-new/PlayerProfile/GlobalHeatSiren.png');
  /* Center the siren and make it larger - same as cash icon */
  width: 70px;
  height: 70px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.crime-card.card-leaderboard .crime-card-icon {
  background-image: url('../sprites/ui-new/PlayerProfile/PlayerTrophyIconProfile.png');
  /* Center the trophy - moved up 9px to make room for text */
  width: 85px;
  height: 85px;
  top: calc(50% - 51.5px);
  left: calc(50% - 42.5px);
  transform: none;
  animation: none;
}

/* Leaderboard card text positioning - neat spacing below trophy */
.crime-card.card-leaderboard .crime-card-label {
  position: relative;
  top: -14px;
}

.crime-card.card-leaderboard .crime-card-value {
  position: relative;
  top: -14px;
}

.crime-card.card-players-online .crime-card-icon {
  background-image: url('../sprites/ui-new/PlayerProfile/PlayersOnlineIconProfile.png');
  /* Center the icon and make it same size as cash icon */
  width: 70px;
  height: 70px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.crime-card.card-skill-tree .crime-card-icon {
  background-image: url('../sprites/ui-new/PlayerProfile/SkillTreeIcon.png');
  width: 50px;
  height: 50px;
}

.crime-card.card-heat-log .crime-card-icon {
  background-image: url('../sprites/ui-new/PlayerProfile/HeatLogClipboardIcon.png');
  /* Center the clipboard icon and make it same size as Cash icon */
  width: 70px;
  height: 70px;
  top: calc(50% - 6px);
  left: 50%;
  transform: translate(-50%, -50%);
}

.crime-card.card-heat-log .crime-card-label {
  position: relative;
  top: -10px;
  left: 3px;
  color: #888888;
}

.crime-card.card-heat-log .crime-card-value {
  position: relative;
  top: -10px;
  left: 3px;
}

.crime-card.card-expense-log .crime-card-icon {
  background-image: url('../sprites/ui-new/PlayerProfile/ExpensesIcon.png');
  width: 45px;
  height: 45px;
}

/* Card Label */
.crime-card-label {
  font-size: clamp(9px, 2.8vw, 11px);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(220, 200, 180, 0.9);
  margin-bottom: 2px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Card Value */
.crime-card-value {
  font-family: 'Cinzel', serif;
  font-size: clamp(14px, 4.8vw, 18px);
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
  max-width: 100%;
  /* Keep long strings (like XP) from spilling out on small phones */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.15;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Colored values */
.crime-card.card-cash .crime-card-value {
  color: #4ade80;
}

.crime-card.card-xp .crime-card-value {
  color: #7ec8ff;
}

.crime-card.card-rep .crime-card-value {
  color: #fbbf24;
}

.crime-card.card-heat .crime-card-value,
.crime-card.card-global-heat .crime-card-value {
  color: #f87171;
}

.crime-card.card-leaderboard .crime-card-value {
  color: #fbbf24;
}

/* Players Online card: nudge text inward so it sits comfortably inside the frame */
.crime-card.card-players-online {
  padding-left: clamp(16px, 4.4vw, 20px);
  padding-bottom: clamp(16px, 4.4vw, 22px);
}

.crime-card.card-players-online .crime-card-label {
  margin-bottom: 6px;
}

.crime-card.card-players-online .crime-card-value {
  color: #4ade80;
  display: flex;
  align-items: center;
  gap: 6px;
  /* Override the generic 2-line clamp so the dot + text don't get weird */
  -webkit-line-clamp: initial;
  -webkit-box-orient: initial;
}

/* Online indicator */
.online-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #4ade80;
  border-radius: 50%;
  margin-right: 6px;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.8);
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(74, 222, 128, 0.8); }
  50% { opacity: 0.7; box-shadow: 0 0 4px rgba(74, 222, 128, 0.4); }
}

/* =====================================================
   STATS CARD - Special layout with stat icons
   ===================================================== */
.crime-card.card-stats {
  justify-content: flex-start;
  padding-top: 14px;
}

.crime-card.card-stats .crime-card-icon {
  display: none;
}

.crime-card.card-stats .crime-card-label {
  margin-bottom: 8px;
}

.crime-card-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.crime-card-stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}

.stat-icon {
  width: 24px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.stat-icon.strength {
  background-image: url('../sprites/ui-new/PlayerProfile/StrengthStatIconProfile.png');
}

.stat-icon.intelligence {
  background-image: url('../sprites/ui-new/PlayerProfile/IntellectStatIcon.png');
}

.stat-icon.charisma {
  background-image: url('../sprites/ui-new/PlayerProfile/CharismaStatIcon.png');
}

.stat-icon.stealth {
  background-image: url('../sprites/ui-new/PlayerProfile/StealthStatIcon.png');
}

.crime-card-stat-label {
  font-size: 10px;
  color: rgba(200, 180, 160, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.crime-card-stat-value {
  font-size: 14px;
  font-weight: 600;
  color: #7ec8ff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* =====================================================
   SKILL TREE CARD - Special layout
   ===================================================== */
.crime-card.card-skill-tree .crime-card-subvalue {
  /* Responsive font sizing - matches the main rule above */
  font-size: clamp(9px, 2.5vw, 11px);
  color: rgba(200, 180, 160, 0.8);
  margin-top: clamp(2px, 0.8vw, 3px);
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  /* Allow wrapping - prevent text clipping */
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* =====================================================
   TAB BAR - Bottom Navigation
   ===================================================== */
#tab-bar {
  background: linear-gradient(180deg, 
    rgba(15, 12, 10, 0.98) 0%, 
    rgba(10, 8, 6, 0.99) 100%);
  border-top: 1px solid rgba(180, 130, 80, 0.3);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.6);
  height: 72px;
  padding-bottom: env(safe-area-inset-bottom, 0);
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.tab-icon {
  width: 36px;
  height: 36px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.5;
  transition: all 0.2s ease;
  font-size: 0 !important; /* Hide emoji */
  color: transparent !important;
}

/* Tab icons using new assets */
.tab[data-tab="profile"] .tab-icon {
  background-image: url('../sprites/ui-new/BottomScreenMainTabIcons/profileTabButton.png');
}

.tab[data-tab="turf"] .tab-icon {
  background-image: url('../sprites/ui-new/BottomScreenMainTabIcons/TurfTabTurfIcon.png');
}

.tab[data-tab="crimes"] .tab-icon {
  background-image: url('../sprites/ui-new/BottomScreenMainTabIcons/CrimesTabIcon.png');
}

.tab[data-tab="safehouse"] .tab-icon {
  background-image: url('../sprites/ui-new/BottomScreenMainTabIcons/SafehouseTabIcon.png');
}

.tab[data-tab="gang"] .tab-icon {
  background-image: url('../sprites/ui-new/BottomScreenMainTabIcons/PlayerGangTab.png');
}

.tab-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(200, 180, 160, 0.5);
  transition: all 0.2s ease;
}

.tab.active .tab-icon {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(100, 180, 255, 0.6));
}

.tab.active .tab-label {
  color: #7ec8ff;
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #7ec8ff, transparent);
  border-radius: 1px;
}

.tab:active {
  transform: scale(0.92);
}

/* =====================================================
   FALLBACK FOR BROWSERS WITHOUT aspect-ratio SUPPORT
   (Fixes jumbled profile UI on older Android browsers)
   ===================================================== */
@supports not (aspect-ratio: 1 / 1) {
  /* Ensure all standard cards in a row have matching heights */
  .crime-card {
    min-height: 130px;
  }

  .crime-card.card-profile {
    min-height: 230px;
  }

  .crime-card.card-players-online,
  .crime-card.card-stats {
    /* These taller cards need more space for their content */
    min-height: 180px;
  }

  /* Ensure grid rows have consistent baseline heights */
  .crime-board {
    grid-auto-rows: minmax(130px, auto);
  }
}

/* =====================================================
   RESPONSIVE ADJUSTMENTS
   ===================================================== */

/* Mobile devices - match screenshot sizing with taller, uniform cards */
@media (max-width: 600px) {
  .crime-board {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 8px 12px 20px;
  }

  /* ALL stat cards same fixed height - taller, more square */
  .crime-card {
    height: 160px;
    min-height: 160px;
    max-height: 160px;
    padding: 14px;
    aspect-ratio: unset;
  }

  /* Players and Leaderboard cards - SAME height as other cards for uniform grid */
  .crime-card.card-players-online,
  .crime-card.card-leaderboard {
    height: 160px;
    min-height: 160px;
    max-height: 160px;
    aspect-ratio: unset;
  }

  /* Stats card - auto-sizing to prevent clipping of additional stats */
  .crime-card.card-stats {
    height: auto;
    min-height: 160px;
    max-height: none;
    aspect-ratio: unset;
  }

  .crime-card.card-heat-log {
    height: auto;
    min-height: 160px;
    max-height: none;
  }

  /* Skill tree card - flexible height to prevent text clipping */
  .crime-card.card-skill-tree,
  .crime-card.skill-tree-card {
    height: auto !important;
    min-height: 160px;
    max-height: none !important;
    aspect-ratio: unset !important;
  }

  /* Profile card spans full width, taller and prominent */
  .crime-card.card-profile {
    height: auto;
    min-height: 240px;
    max-height: none;
    padding: 20px 24px;
    aspect-ratio: unset;
  }

  .crime-card-icon {
    width: 36px;
    height: 36px;
  }

  .crime-card-value {
    font-size: 18px;
    font-weight: 600;
  }

  .crime-card-label {
    font-size: 11px;
    letter-spacing: 1.5px;
  }

  .profile-card-avatar {
    width: 70px;
    height: 70px;
    font-size: 28px;
  }

  .profile-card-name {
    font-size: 22px;
  }

  /* Stats card rows - compact to fit uniform height */
  .crime-card-stats {
    gap: 2px;
  }

  .crime-card-stat-row {
    padding: 4px 0;
  }

  .crime-card-stat-value {
    font-size: 16px;
  }
}

/* Very small screens */
@media (max-width: 380px) {
  .crime-board {
    gap: 10px;
    padding: 6px 8px 16px;
  }

  .crime-card {
    height: 140px;
    min-height: 140px;
    max-height: 140px;
    padding: 12px;
  }

  .crime-card.card-players-online,
  .crime-card.card-leaderboard {
    height: 140px;
    min-height: 140px;
    max-height: 140px;
  }

  /* Stats card - auto-sizing to prevent clipping of additional stats */
  .crime-card.card-stats {
    height: auto;
    min-height: 140px;
    max-height: none;
  }

  .crime-card.card-heat-log {
    height: auto;
    min-height: 140px;
    max-height: none;
  }

  /* Skill tree card - flexible height to prevent text clipping */
  .crime-card.card-skill-tree,
  .crime-card.skill-tree-card {
    height: auto !important;
    min-height: 140px;
    max-height: none !important;
    aspect-ratio: unset !important;
  }

  .crime-card.card-profile {
    min-height: 200px;
    padding: 16px 18px;
  }

  .crime-card-icon {
    width: 30px;
    height: 30px;
  }

  .crime-card-value {
    font-size: 16px;
  }

  .crime-card-label {
    font-size: 10px;
  }

  .profile-card-avatar {
    width: 60px;
    height: 60px;
    font-size: 24px;
  }

  .profile-card-name {
    font-size: 18px;
  }

  .tab-icon {
    width: 28px;
    height: 28px;
  }
}

@media (min-width: 601px) {
  .crime-board {
    max-width: 560px;
    margin: 0 auto;
  }
}

/* Hide old stat-grid */
.stat-grid {
  display: none !important;
}

/* ====================================================
   GARAGE UI — Heatline: Underworld
   All classes prefixed with "gu-" to avoid conflicts
   ==================================================== */

.gu-garage {
  position: relative;
  padding: 12px 0;
  overflow: hidden;
}

/* Subtle animated grid overlay */
.gu-garage-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 400px at 10% 90%, rgba(57,255,20,.05), transparent 60%),
    radial-gradient(800px 500px at 90% 10%, rgba(0,245,255,.05), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.gu-garage-bg::after {
  content: "";
  position: absolute;
  inset: -40px;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 1px, transparent 1px 9px);
  opacity: .07;
  animation: gu-rain 10s linear infinite;
}
@keyframes gu-rain {
  0%   { transform: translateY(-30px); }
  100% { transform: translateY(30px);  }
}

/* ---- Topbar ---- */
.gu-garage-topbar {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(18,22,34,.72);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  margin-bottom: 12px;
  z-index: 1;
}
.gu-garage-topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(0,245,255,.18), rgba(57,255,20,.10), rgba(255,42,42,.12));
  opacity: .12;
  filter: blur(10px);
  pointer-events: none;
}
.gu-topbar-left { display: flex; align-items: center; gap: 12px; z-index: 1; }
.gu-icon-pill {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(0,245,255,.10);
  border: 1px solid rgba(0,245,255,.22);
  box-shadow: 0 0 22px rgba(0,245,255,.12);
  font-size: 20px;
  flex-shrink: 0;
}
.gu-title    { font-weight: 800; font-size: 17px; letter-spacing: .2px; color: #e9ecf3; }
.gu-subtitle { margin-top: 2px; font-size: 11px; color: rgba(233,236,243,.4); }

.gu-topbar-right { display: flex; gap: 10px; z-index: 1; }
.gu-metric {
  padding: 9px 12px;
  border-radius: 14px;
  background: rgba(10,12,18,.4);
  border: 1px solid rgba(255,255,255,.08);
  min-width: 90px;
}
.gu-metric-label { font-size: 10px; color: rgba(233,236,243,.45); letter-spacing: .4px; text-transform: uppercase; }
.gu-metric-value { margin-top: 4px; font-size: 17px; font-weight: 800; color: #e9ecf3; }
.gu-value-soft   { color: rgba(233,236,243,.45); margin-left: 2px; }
.gu-money        { color: #39ff14; text-shadow: 0 0 18px rgba(57,255,20,.2); }

/* ---- Content shell ---- */
.gu-garage-content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1;
}
.gu-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 2px;
}
.gu-section-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .2px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #e9ecf3;
}
.gu-section-icon { opacity: .95; }
.gu-count        { color: rgba(233,236,243,.45); font-weight: 700; }

/* ---- Vehicle Card ---- */
.gu-vehicle-card {
  position: relative;
  padding: 15px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(21,24,36,.85), rgba(13,16,26,.75));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  transition: border-color .2s;
}
.gu-vehicle-card:hover { border-color: rgba(0,245,255,.22); }

.gu-card-glow {
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(500px 180px at 10% 0%,  rgba(0,245,255,.20), transparent 55%),
    radial-gradient(400px 200px at 90% 30%,  rgba(57,255,20,.08),  transparent 60%),
    radial-gradient(400px 200px at 70% 110%, rgba(255,42,42,.08),  transparent 55%);
  opacity: .35;
  filter: blur(16px);
  pointer-events: none;
}

/* Card top row */
.gu-vehicle-top {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  z-index: 1;
}
.gu-vehicle-id { display: flex; gap: 11px; align-items: center; }

.gu-veh-thumb {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  display: grid;
  place-items: center;
  box-shadow: 0 0 22px rgba(0,0,0,.35);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.gu-veh-thumb-shine {
  position: absolute;
  inset: -30px;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.18), transparent 60%);
  transform: rotate(18deg) translateX(-30px);
  animation: gu-shine 4.5s ease-in-out infinite;
  opacity: .35;
}
@keyframes gu-shine {
  0%, 100% { transform: rotate(18deg) translateX(-60px); }
  50%       { transform: rotate(18deg) translateX(60px);  }
}
.gu-veh-thumb-icon { font-size: 22px; opacity: .95; }

.gu-veh-name { font-size: 16px; font-weight: 900; letter-spacing: .2px; color: #e9ecf3; }
.gu-veh-meta { margin-top: 2px; font-size: 11px; color: rgba(233,236,243,.65); }

.gu-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  margin: 0 2px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  font-weight: 900;
  font-size: 11px;
}
.gu-tag-tier { box-shadow: 0 0 12px rgba(0,245,255,.10); }
.gu-tag-heat { border-color: rgba(255,42,42,.25); background: rgba(255,42,42,.07); }

.gu-vehicle-price { text-align: right; flex-shrink: 0; }
.gu-price     { font-weight: 900; font-size: 20px; }
.gu-price-sub { margin-top: 2px; font-size: 11px; color: rgba(233,236,243,.45); }

/* ---- Chips ---- */
.gu-vehicle-tags {
  position: relative;
  z-index: 1;
  margin-top: 11px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.gu-chip {
  padding: 8px 11px;
  border-radius: 14px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(233,236,243,.65);
  font-size: 12px;
  display: flex;
  gap: 7px;
  align-items: center;
}
.gu-chip b         { color: #e9ecf3; }
.gu-chip-ic        { opacity: .9; }
.gu-chip.gu-warn        { border-color: rgba(255,179,71,.25); background: rgba(255,179,71,.07); }
.gu-chip.gu-ok          { border-color: rgba(57,255,20,.18);  background: rgba(57,255,20,.05);  }
.gu-chip.gu-danger-chip { border-color: rgba(255,42,42,.30);  background: rgba(255,42,42,.07);  }

/* ---- Stats ---- */
.gu-vehicle-stats {
  position: relative;
  z-index: 1;
  margin-top: 11px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
.gu-stat {
  padding: 11px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
}
.gu-stat-label { font-size: 10px; color: rgba(233,236,243,.45); text-transform: uppercase; letter-spacing: .4px; }
.gu-stat-value { margin-top: 5px; font-size: 15px; font-weight: 900; color: #e9ecf3; }
.gu-stat-value span { color: rgba(233,236,243,.45); font-weight: 800; font-size: 11px; }
.gu-stat-bar {
  margin-top: 9px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.05);
}
.gu-stat-bar .gu-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0,245,255,.85), rgba(57,255,20,.65));
  box-shadow: 0 0 16px rgba(0,245,255,.18);
}

/* ---- Cooldown ---- */
.gu-cooldown {
  position: relative;
  z-index: 1;
  margin-top: 11px;
  padding: 11px;
  border-radius: 16px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.07);
}
.gu-cooldown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: rgba(233,236,243,.65);
}
.gu-cooldown-label { }
.gu-cooldown-time  { color: #ffb347; font-weight: 900; }
.gu-cooldown-track {
  margin-top: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
  position: relative;
}
.gu-cooldown-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,179,71,.95), rgba(255,42,42,.70));
  box-shadow: 0 0 20px rgba(255,179,71,.14);
}
.gu-cooldown-glint {
  position: absolute;
  inset: -20px;
  background: linear-gradient(120deg, transparent 45%, rgba(255,255,255,.18), transparent 55%);
  animation: gu-glint 3.2s ease-in-out infinite;
  opacity: .35;
}
@keyframes gu-glint {
  0%, 100% { transform: translateX(-120px); }
  50%       { transform: translateX(120px);  }
}

/* ---- Action buttons ---- */
.gu-vehicle-actions {
  position: relative;
  z-index: 1;
  margin-top: 11px;
  display: flex;
  gap: 9px;
}
.gu-btn {
  padding: 11px 13px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.05);
  color: #e9ecf3;
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
  flex: 1;
  transition: transform .1s;
}
.gu-btn:active                    { transform: translateY(1px); }
.gu-btn:disabled                  { opacity: .45; cursor: not-allowed; transform: none; }
.gu-btn.gu-primary {
  border-color: rgba(0,245,255,.28);
  background: rgba(0,245,255,.10);
  box-shadow: 0 0 20px rgba(0,245,255,.10);
}
.gu-btn.gu-danger {
  border-color: rgba(255,42,42,.30);
  background: rgba(255,42,42,.08);
}

/* ---- Empty slot ---- */
.gu-empty-slot {
  padding: 22px;
  border-radius: 20px;
  background: rgba(255,255,255,.03);
  border: 1px dashed rgba(255,255,255,.18);
  text-align: center;
}
.gu-empty-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 10px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: rgba(0,245,255,.08);
  border: 1px solid rgba(0,245,255,.22);
  box-shadow: 0 0 22px rgba(0,245,255,.10);
  font-size: 26px;
}
.gu-empty-title { font-size: 16px; font-weight: 950; color: #e9ecf3; }
.gu-empty-sub   { margin-top: 6px; font-size: 12px; color: rgba(233,236,243,.55); line-height: 1.5; }

/* ---- Responsive ---- */
@media (max-width: 480px) {
  .gu-vehicle-stats    { grid-template-columns: 1fr; }
  .gu-topbar-right     { gap: 8px; }
  .gu-metric           { min-width: 82px; }
}

/* =============================================
   Settings Gear Button
   ============================================= */
#settings-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

#settings-btn .settings-gear-icon {
  width: 38px;
  height: 38px;
  stroke: #a0a8bc;
  stroke-width: 1.8;
  fill: none;
  overflow: visible;
  transition: stroke 0.2s ease, transform 0.35s ease;
  display: block;
}

#settings-btn:hover .settings-gear-icon {
  stroke: #00f5ff;
  filter: drop-shadow(0 0 4px rgba(0, 245, 255, 0.5));
  transform: rotate(60deg);
}

#settings-btn:active .settings-gear-icon {
  transform: rotate(90deg) scale(0.9);
}

/* =============================================
   Sound Settings Panel
   ============================================= */
.settings-panel {
  /* position / top / right are set inline via JS (fixed, viewport-relative)
     so the panel always renders above every stacking context */
  width: 252px;
  background: rgba(8, 10, 18, 0.97);
  border: 1px solid rgba(0, 245, 255, 0.22);
  border-radius: 14px;
  padding: 16px 18px;
  z-index: 999999;
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.7),
    0 0 20px rgba(0, 245, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: settings-panel-in 0.18s ease;
}

@keyframes settings-panel-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

.settings-panel-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(0, 245, 255, 0.65);
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(0, 245, 255, 0.1);
}

.settings-section {
  margin-bottom: 12px;
}

.settings-section:last-child {
  margin-bottom: 0;
}

.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}

.settings-label {
  font-size: 13px;
  font-weight: 600;
  color: #c4c9d8;
  letter-spacing: 0.01em;
}

/* Toggle Switch */
.settings-toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}

.settings-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.settings-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.22s, border-color 0.22s;
}

.settings-toggle-slider::before {
  content: '';
  position: absolute;
  width: 17px;
  height: 17px;
  left: 3px;
  top: 3px;
  background: #6a7080;
  border-radius: 50%;
  transition: transform 0.22s, background 0.22s, box-shadow 0.22s;
}

.settings-toggle-switch input:checked + .settings-toggle-slider {
  background: rgba(0, 245, 255, 0.2);
  border-color: rgba(0, 245, 255, 0.45);
}

.settings-toggle-switch input:checked + .settings-toggle-slider::before {
  transform: translateX(20px);
  background: #00f5ff;
  box-shadow: 0 0 8px rgba(0, 245, 255, 0.55);
}

/* Volume Slider Row */
.settings-volume-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-volume-icon {
  font-size: 13px;
  opacity: 0.55;
  flex-shrink: 0;
  line-height: 1;
}

.settings-volume-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.14);
  outline: none;
  cursor: pointer;
}

.settings-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #00f5ff;
  box-shadow: 0 0 5px rgba(0, 245, 255, 0.5);
  cursor: pointer;
  transition: transform 0.15s;
}

.settings-volume-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.settings-volume-slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #00f5ff;
  box-shadow: 0 0 5px rgba(0, 245, 255, 0.5);
  border: none;
  cursor: pointer;
}

.settings-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
  margin: 12px 0;
}

/* ================================================
   SAFEHOUSE INTERIOR OVERLAY
   ================================================ */
.safehouse-interior-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #0a0a0a;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  animation: shi-fade-in 0.4s ease-out;
}

@keyframes shi-fade-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.shi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #111;
  border-bottom: 1px solid #222;
  height: 44px;
  flex-shrink: 0;
}

.shi-title {
  font-size: 16px;
  font-weight: 700;
  color: #e0e0e0;
  letter-spacing: 0.5px;
}

.shi-exit-btn {
  padding: 6px 16px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  color: #e0e0e0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.shi-exit-btn:hover {
  background: #2a2a2a;
  border-color: #444;
}

.shi-exit-btn:active {
  transform: scale(0.96);
}

.shi-canvas-wrapper {
  position: relative;
  margin: 8px auto 0;
  max-width: 500px;
  width: calc(100% - 16px);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #1a1a1a;
}

.shi-canvas {
  display: block;
  width: 100%;
}

/* Player sprite overlay inside safehouse interior */
.shi-player-sprite {
  position: absolute;
  width: 48px;
  height: 48px;
  pointer-events: none;
  z-index: 10;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}

.shi-player-sprite .fr-rotator {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%) rotate(90deg);
}

.shi-player-sprite .fr-bob {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.shi-player-sprite.moving .fr-bob {
  animation: shi-sprite-bob 0.35s ease-in-out infinite;
}

@keyframes shi-sprite-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.shi-player-sprite .fr-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.shi-player-sprite .fr-feet {
  z-index: 1;
}

.shi-player-sprite .fr-body {
  z-index: 2;
}

.shi-hint {
  text-align: center;
  padding: 8px;
  font-size: 12px;
  color: #666;
  font-family: monospace;
}

/* Safehouse Interior Joystick */
.shi-joystick {
  position: fixed;
  bottom: 90px;
  left: 30px;
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  z-index: 9010;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shi-joystick-knob {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  transition: transform 0.05s ease-out;
  pointer-events: none;
}

/* ================================================
   COMMAND CENTER MODAL
   ================================================ */
.command-center-modal {
  position: fixed;
  inset: 0;
  z-index: 15000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  animation: cc-fade-in 0.3s ease-out;
}

@keyframes cc-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.cc-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(3px);
}

.cc-modal-panel {
  position: relative;
  width: min(480px, 95vw);
  max-height: 85vh;
  background: #0d0d0d;
  border: 1px solid #1a1a1a;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

.cc-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(26, 58, 26, 0.5), rgba(0, 0, 0, 0.3));
  border-bottom: 1px solid #1a3a1a;
}

.cc-modal-title {
  font-size: 17px;
  font-weight: 700;
  color: #4ade80;
  letter-spacing: 0.5px;
}

.cc-modal-close {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cc-modal-close:hover {
  background: rgba(255, 255, 255, 0.10);
}

.cc-modal-tabs {
  display: flex;
  border-bottom: 1px solid #1a1a1a;
}

.cc-tab {
  flex: 1;
  padding: 10px 8px;
  background: transparent;
  border: none;
  color: #666;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border-bottom: 2px solid transparent;
}

.cc-tab:hover {
  color: #999;
}

.cc-tab.active {
  color: #4ade80;
  border-bottom-color: #4ade80;
}

.cc-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  max-height: 60vh;
}

.cc-section-title {
  font-size: 13px;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
  margin-top: 4px;
}

.cc-empty {
  text-align: center;
  padding: 30px 16px;
  color: #555;
  font-size: 14px;
  line-height: 1.6;
}

/* Active missions */
.cc-mission-active {
  background: #111;
  border: 1px solid #1a1a1a;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
}

.cc-mission-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
  color: #e0e0e0;
}

.cc-gangster-name {
  color: #888;
  font-size: 12px;
}

.cc-progress-bar {
  height: 6px;
  background: #1a1a1a;
  border-radius: 3px;
  overflow: hidden;
}

.cc-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4ade80, #22c55e);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.cc-progress-label {
  font-size: 11px;
  color: #666;
  margin-top: 4px;
}

/* Mission assignment */
.cc-assign-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.cc-label {
  font-size: 13px;
  color: #888;
  white-space: nowrap;
}

.cc-select {
  flex: 1;
  padding: 8px 10px;
  background: #111;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  color: #e0e0e0;
  font-size: 13px;
}

.cc-mission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.cc-mission-card {
  background: #111;
  border: 1px solid #1a1a1a;
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  transition: all 0.2s;
}

.cc-mission-card:hover {
  border-color: #2a3a2a;
}

.cc-mission-icon {
  font-size: 28px;
  margin-bottom: 6px;
}

.cc-mission-name {
  font-size: 13px;
  font-weight: 600;
  color: #e0e0e0;
  margin-bottom: 4px;
}

.cc-mission-desc {
  font-size: 11px;
  color: #666;
  margin-bottom: 6px;
  line-height: 1.3;
}

.cc-mission-info {
  display: flex;
  justify-content: center;
  gap: 10px;
  font-size: 11px;
  color: #888;
  margin-bottom: 4px;
}

.cc-mission-risk {
  font-size: 11px;
  color: #ef4444;
  margin-bottom: 8px;
}

.cc-deploy-btn {
  width: 100%;
  padding: 8px;
  background: linear-gradient(135deg, #1a3a1a, #0d260d);
  border: 1px solid #2d6b2d;
  border-radius: 6px;
  color: #e0e0e0;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.cc-deploy-btn:hover {
  background: linear-gradient(135deg, #245524, #153a15);
  border-color: #3d8b3d;
}

.cc-deploy-btn:active {
  transform: scale(0.96);
}

/* Crew cards */
.cc-crew-card {
  background: #111;
  border: 1px solid #1a1a1a;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
}

.cc-crew-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.cc-crew-name {
  font-size: 14px;
  font-weight: 600;
  color: #e0e0e0;
}

.cc-crew-status {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 10px;
  font-weight: 600;
}

.cc-status-idle {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
}

.cc-status-busy {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

.cc-crew-stats {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #888;
  margin-bottom: 6px;
}

.cc-loyalty-bar {
  height: 4px;
  background: #1a1a1a;
  border-radius: 2px;
  overflow: hidden;
}

.cc-loyalty-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* Result cards */
.cc-result-card {
  background: #111;
  border: 1px solid #1a1a1a;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
}

.cc-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
  color: #e0e0e0;
}

.cc-result-name {
  color: #888;
  font-size: 12px;
}

.cc-result-rewards {
  display: flex;
  gap: 12px;
  font-size: 13px;
  color: #4ade80;
  margin: 8px 0;
}

.cc-result-status {
  font-size: 13px;
  margin: 8px 0;
  line-height: 1.4;
}

.cc-outcome-success { border-color: #1a3a1a; }
.cc-outcome-success .cc-progress-fill { background: #4ade80; }

.cc-outcome-kia { border-color: #3a1a1a; }
.cc-outcome-kia .cc-progress-fill { background: #ef4444; }
.cc-outcome-kia .cc-result-status { color: #ef4444; }

.cc-outcome-fled { border-color: #3a3a1a; }
.cc-outcome-fled .cc-progress-fill { background: #fbbf24; }
.cc-outcome-fled .cc-result-status { color: #fbbf24; }

.cc-outcome-snitched { border-color: #3a2a1a; }
.cc-outcome-snitched .cc-progress-fill { background: #f97316; }
.cc-outcome-snitched .cc-result-status { color: #f97316; }

.cc-collect-btn {
  width: 100%;
  padding: 10px;
  background: linear-gradient(135deg, #1a3a1a, #0d260d);
  border: 1px solid #2d6b2d;
  border-radius: 6px;
  color: #e0e0e0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.cc-collect-btn:hover {
  background: linear-gradient(135deg, #245524, #153a15);
}

.cc-collect-btn:active {
  transform: scale(0.96);
}

.cc-dismiss-btn {
  background: linear-gradient(135deg, #2a1a1a, #1a0d0d);
  border-color: #4a2a2a;
}

.cc-dismiss-btn:hover {
  background: linear-gradient(135deg, #3a2020, #2a1515);
}

/* ================================================
   GANGSTER SHOP (Safehouse Gangsters Tab)
   ================================================ */
.gangster-shop-header {
  background: #111;
  border: 1px solid #1a1a1a;
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 14px;
}

.gangster-shop-title {
  font-size: 16px;
  font-weight: 700;
  color: #e0e0e0;
  margin-bottom: 8px;
}

.gangster-shop-stats {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #888;
  margin-bottom: 6px;
}

.gangster-loyalty-factors {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #666;
}

.gangster-shop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.gangster-shop-card {
  background: #111;
  border: 1px solid #1a1a1a;
  border-radius: 8px;
  padding: 14px;
  text-align: center;
  transition: all 0.2s;
}

.gangster-shop-card.cant-afford {
  opacity: 0.5;
}

.gangster-shop-portrait {
  font-size: 36px;
  margin-bottom: 6px;
}

.gangster-shop-name {
  font-size: 14px;
  font-weight: 600;
  color: #e0e0e0;
  margin-bottom: 4px;
}

.gangster-shop-skill {
  font-size: 12px;
  color: #888;
  margin-bottom: 6px;
}

.gangster-shop-loyalty {
  display: flex;
  align-items: center;
  font-size: 11px;
  color: #888;
  margin-bottom: 8px;
}

.gangster-buy-btn {
  width: 100%;
  padding: 10px;
  background: linear-gradient(135deg, #1a3a1a, #0d260d);
  border: 1px solid #2d6b2d;
  border-radius: 6px;
  color: #e0e0e0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.gangster-buy-btn:hover {
  background: linear-gradient(135deg, #245524, #153a15);
  border-color: #3d8b3d;
}

.gangster-buy-btn:active {
  transform: scale(0.96);
}

.gangster-buy-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.gangster-refresh-btn {
  display: block;
  width: 100%;
  padding: 10px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  color: #888;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.gangster-refresh-btn:hover {
  background: #222;
  color: #bbb;
}

.gangster-refresh-btn:active {
  transform: scale(0.96);
}

/* ================================================
   FREE ROAM TOUCH CONTROLLER
   ================================================ */
.fr-touch-zone {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 500;
  touch-action: none;
  /* Invisible - no visual indicator */
  background: transparent;
  pointer-events: auto;
}

/* Enter Building Button */
.fr-enter-btn {
  position: absolute;
  right: 10px;
  bottom: 80px;
  z-index: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: rgba(26, 58, 26, 0.85);
  border: 1px solid rgba(74, 222, 128, 0.4);
  border-radius: 8px;
  color: #4ade80;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: all 0.2s;
  animation: fr-enter-pulse 1.5s ease-in-out infinite;
}

.fr-enter-btn:active {
  transform: scale(0.92);
}

@keyframes fr-enter-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(74, 222, 128, 0.2); }
  50% { box-shadow: 0 0 16px rgba(74, 222, 128, 0.4); }
}

.fr-enter-icon {
  font-size: 16px;
}

.fr-enter-text {
  white-space: nowrap;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ================================================
   BUILDING TAKEOVER OVERLAY
   ================================================ */
.building-takeover-overlay {
  position: fixed;
  inset: 0;
  background: #0a0a0a;
  z-index: 9500;
  display: flex;
  flex-direction: column;
  animation: bt-fade-in 0.4s ease-out;
}

@keyframes bt-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.bt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #111;
  border-bottom: 1px solid #222;
  flex-shrink: 0;
}

.bt-title {
  font-size: 15px;
  font-weight: 700;
  color: #e0e0e0;
}

.bt-floor-indicator {
  display: flex;
  gap: 6px;
}

.bt-floor-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #1a1a1a;
  border: 2px solid #333;
  color: #555;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.bt-floor-dot.cleared {
  background: #1a3a1a;
  border-color: #4ade80;
  color: #4ade80;
}

.bt-floor-dot.current {
  border-color: #fbbf24;
  color: #fbbf24;
  animation: bt-dot-pulse 1s ease-in-out infinite;
}

@keyframes bt-dot-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

.bt-exit-btn {
  padding: 6px 14px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  color: #e0e0e0;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.bt-exit-btn:active {
  transform: scale(0.96);
}

.bt-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

/* Dialog Scene */
.bt-dialog-scene {
  max-width: 400px;
  width: 100%;
  text-align: center;
}

.bt-floor-label {
  font-size: 14px;
  font-weight: 700;
  color: #fbbf24;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.bt-enemy-portrait {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 20px;
}

.bt-enemy-icon {
  font-size: 48px;
}

.bt-enemy-name {
  font-size: 16px;
  font-weight: 700;
  color: #e0e0e0;
}

.bt-enemy-level {
  font-size: 12px;
  color: #888;
}

.bt-dialog-box {
  background: #111;
  border: 1px solid #222;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 20px;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bt-dialog-text {
  font-size: 14px;
  color: #ccc;
  line-height: 1.6;
  font-family: monospace;
  white-space: pre-wrap;
  text-align: left;
}

.bt-dialog-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.bt-action-btn {
  padding: 12px 28px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid;
}

.bt-action-btn:active {
  transform: scale(0.95);
}

.bt-fight-btn {
  background: linear-gradient(135deg, #3a1a1a, #260d0d);
  border-color: #6b2d2d;
  color: #ef4444;
}

.bt-fight-btn:hover {
  background: linear-gradient(135deg, #4a2020, #351515);
}

.bt-retreat-btn {
  background: #1a1a1a;
  border-color: #333;
  color: #888;
}

.bt-retreat-btn:hover {
  background: #222;
}

/* Building name / owned badge */
.bt-building-name {
  font-size: 20px;
  font-weight: 700;
  color: #e0e0e0;
  margin-bottom: 10px;
}

.bt-owned-badge {
  display: inline-block;
  padding: 4px 16px;
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.4);
  border-radius: 20px;
  color: #4ade80;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 14px;
  letter-spacing: 2px;
}

/* Victory / Defeat */
.bt-victory {
  animation: bt-victory-glow 1s ease-out;
}

@keyframes bt-victory-glow {
  from { text-shadow: 0 0 40px rgba(255, 215, 0, 0.8); }
  to { text-shadow: none; }
}

.bt-victory-icon {
  font-size: 64px;
  margin-bottom: 12px;
}

.bt-victory-title {
  font-size: 24px;
  font-weight: 800;
  color: #ffd700;
  margin-bottom: 8px;
  letter-spacing: 2px;
}

.bt-victory-text {
  font-size: 15px;
  color: #ccc;
  margin-bottom: 6px;
}

.bt-victory-btn {
  background: linear-gradient(135deg, #1a3a1a, #0d260d) !important;
  border-color: #2d6b2d !important;
  color: #4ade80 !important;
  margin-top: 16px;
}

.bt-defeat-icon {
  font-size: 64px;
  margin-bottom: 12px;
}

.bt-defeat-title {
  font-size: 24px;
  font-weight: 800;
  color: #ef4444;
  margin-bottom: 8px;
  letter-spacing: 2px;
}

.bt-defeat-text {
  font-size: 15px;
  color: #ccc;
  margin-bottom: 6px;
}

.bt-defeat-btn {
  background: #1a1a1a !important;
  border-color: #333 !important;
  color: #888 !important;
  margin-top: 16px;
}

/* ========================================================
   DESKTOP / TABLET PHONE FRAME
   Displays the game in a centered mobile-sized container
   with an atmospheric background on wider screens.
   Mobile (<768px) is completely unaffected.
   ======================================================== */

@media (min-width: 768px) {
  html {
    height: 100%;
  }

  body {
    background: #030305 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100vh !important;
    width: 100vw !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* Atmospheric background behind the phone frame */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
      /* Dark urban vignette */
      radial-gradient(ellipse at 50% 0%, rgba(60, 30, 10, 0.15) 0%, transparent 50%),
      radial-gradient(ellipse at 50% 100%, rgba(60, 30, 10, 0.15) 0%, transparent 50%),
      /* Center glow behind phone */
      radial-gradient(ellipse at 50% 50%, rgba(20, 15, 10, 0.4) 0%, transparent 40%),
      /* Base dark texture */
      repeating-linear-gradient(
        0deg,
        rgba(255,255,255,0.01) 0px,
        transparent 1px,
        transparent 3px
      ),
      repeating-linear-gradient(
        90deg,
        rgba(255,255,255,0.01) 0px,
        transparent 1px,
        transparent 3px
      ),
      /* Deep dark base */
      linear-gradient(180deg, #0a0808 0%, #050305 50%, #080608 100%);
    pointer-events: none;
  }

  /* Game title branding in background */
  body::after {
    content: 'HEATLINE: UNDERWORLD';
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Cinzel', serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 6px;
    color: rgba(200, 160, 80, 0.12);
    text-transform: uppercase;
    pointer-events: none;
    z-index: 0;
    white-space: nowrap;
  }

  /* Phone frame container */
  #app {
    max-width: 430px !important;
    width: 430px !important;
    height: 100vh !important;
    max-height: 932px !important;
    margin: 0 auto !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.8),
      0 8px 40px rgba(0, 0, 0, 0.7),
      0 0 120px rgba(0, 0, 0, 0.5),
      inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    /* KEY: transform creates a containing block for position:fixed children */
    transform: translateZ(0);
    z-index: 1;
  }

  /* Ensure content scrolls within the frame */
  #content {
    max-height: calc(100% - 72px);
  }

  /* Tab bar sticks to bottom of frame (not viewport) */
  #tab-bar {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: 0 0 24px 24px !important;
  }

  /* ---- Body-level overlays: contain within phone frame ---- */

  /* Battle screen */
  #battle-app {
    position: fixed !important;
    width: 430px !important;
    max-height: 932px !important;
    height: 100vh !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  /* Skill tree modal */
  #skill-tree-modal {
    width: 430px !important;
    max-height: 932px !important;
    height: 100vh !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  /* Account/login overlay - centered phone frame on desktop */
  .account-overlay {
    width: 430px !important;
    max-height: 932px !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.8),
      0 8px 40px rgba(0, 0, 0, 0.7),
      0 0 120px rgba(0, 0, 0, 0.5) !important;
  }

  /* Loading screen overlay - match phone frame */
  #loading-screen,
  [style*="z-index: 99999"],
  [style*="z-index:99999"] {
    width: 430px !important;
    max-height: 932px !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  /* ---- Desktop phone frame: match mobile layout within 430px ---- */

  /* Remove #content padding so game fills the phone frame edge-to-edge */
  #content {
    padding: 0 !important;
    padding-bottom: 0 !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  #content::-webkit-scrollbar {
    display: none;
  }

  /* Tab content: don't use viewport-based min-height within the frame */
  .tab-content {
    min-height: auto !important;
    padding-bottom: 16px !important;
  }

  #profile-tab,
  #turf-tab,
  #crimes-tab,
  #safehouse-tab,
  #gang-tab,
  #market-tab {
    padding-bottom: 16px !important;
  }

  /* Crime board grid - tight spacing for 430px frame */
  .crime-board {
    gap: 8px !important;
    padding: 4px 6px 14px !important;
    max-width: 100% !important;
  }

  /* Crime cards - compact fixed height (proportional to ~200px width) */
  .crime-card {
    height: 130px !important;
    min-height: 130px !important;
    max-height: 130px !important;
    padding: 12px !important;
    aspect-ratio: unset !important;
  }

  /* Profile card - flexible height, prominent */
  .crime-card.card-profile {
    height: auto !important;
    min-height: 190px !important;
    max-height: 230px !important;
    padding: 16px 20px !important;
    aspect-ratio: unset !important;
  }

  /* Leaderboard card - match standard card height */
  .crime-card.card-leaderboard {
    height: 130px !important;
    min-height: 130px !important;
    max-height: 130px !important;
    aspect-ratio: unset !important;
  }

  /* Stats & Players cards - need extra height for content */
  .crime-card.card-stats,
  .crime-card.card-players-online {
    height: auto !important;
    min-height: 145px !important;
    max-height: none !important;
    aspect-ratio: unset !important;
  }

  /* Log cards - fixed height matching standard */
  .crime-card.card-heat-log,
  .crime-card.card-expense-log {
    height: 130px !important;
    min-height: 130px !important;
    max-height: 130px !important;
  }

  /* Skill tree card - flexible */
  .crime-card.card-skill-tree,
  .crime-card.skill-tree-card {
    height: auto !important;
    min-height: 130px !important;
    max-height: none !important;
    aspect-ratio: unset !important;
  }

  /* Card text sizing - use fixed sizes not vw within phone frame */
  .crime-card-value {
    font-size: 17px !important;
  }

  .crime-card-label {
    font-size: 10px !important;
    letter-spacing: 1.2px !important;
  }

  .crime-card-icon {
    width: 34px !important;
    height: 34px !important;
  }

  /* Override centered large icons to stay proportional in the frame */
  .crime-card.card-cash .crime-card-icon,
  .crime-card.card-xp .crime-card-icon,
  .crime-card.card-heat .crime-card-icon,
  .crime-card.card-global-heat .crime-card-icon,
  .crime-card.card-players-online .crime-card-icon {
    width: 60px !important;
    height: 60px !important;
  }

  .crime-card.card-rep .crime-card-icon,
  .crime-card.card-leaderboard .crime-card-icon {
    width: 70px !important;
    height: 70px !important;
  }

  /* Profile card avatar and name sizing */
  .profile-card-avatar {
    width: 68px !important;
    height: 68px !important;
    font-size: 26px !important;
  }

  .profile-card-name {
    font-size: 20px !important;
  }

  /* Fullscreen button: smaller on desktop */
  .fullscreen-toggle-btn {
    width: 32px !important;
    height: 32px !important;
    margin-bottom: 6px !important;
  }
  .fullscreen-toggle-btn svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* Turf tab - full-width, no side padding so map fills frame */
  #turf-tab {
    padding: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Hide redundant Turf page header (heat bar serves as header) */
  #turf-tab .page-header {
    display: none !important;
  }

  /* City map - fill the phone frame width, sane max-height */
  #city-map {
    width: 100% !important;
    max-height: 780px !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* Heat bar - fit within frame width */
  .new-heat-bar-main {
    max-width: 100% !important;
  }

  .new-heat-bar-wrapper {
    margin-left: 4px !important;
    margin-right: 4px !important;
  }

  /* Other tabs need horizontal padding since #content padding was removed */
  #crimes-tab,
  #safehouse-tab,
  #gang-tab,
  #market-tab,
  #inventory-tab {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Placeholder content spacing */
  .placeholder {
    padding: 30px 16px !important;
  }

  /* --- Tab Bar: ensure all 6 tabs fit cleanly in 430px --- */
  .tab {
    padding: 6px 2px !important;
  }

  .tab-icon {
    width: 28px !important;
    height: 28px !important;
  }

  .tab-label {
    font-size: 8px !important;
    letter-spacing: 0.3px !important;
  }

  /* Market tab: no custom icon sprite, show emoji fallback */
  .tab[data-tab="market"] .tab-icon {
    font-size: 18px !important;
    color: inherit !important;
    line-height: 28px;
    text-align: center;
  }
}

/* Larger desktop screens - bigger frame and visible branding */
@media (min-width: 1200px) {
  body::after {
    font-size: 18px;
    letter-spacing: 10px;
    color: rgba(200, 160, 80, 0.08);
  }
}