:root {
      /* ===========================================
         KUSHVILLE THEME - True Miami Deco
         Warm coral, teal accents, Art Deco inspired
         Note: Also update THEME object in game.js for canvas colors
         =========================================== */
      /* Primary accent (buttons, highlights) */
      --primary: #E07B67;           /* Soft coral/terracotta */
      --primary-glow: #F09080;      /* Lighter coral for glows */
      /* Secondary accent (softer elements) */
      --secondary: #5B9A8B;         /* Teal/seafoam */
      /* Accent colors */
      --accent-cyan: #5B9A8B;       /* Teal */
      --accent-lavender: #D4A574;   /* Warm gold */
      --accent-pink: #E8967A;       /* Muted peach */
      /* Backgrounds */
      --bg-dark: #1E2D3D;           /* Dark teal-gray */
      --bg-darker: #141E28;         /* Deep night */
      --bg-soft: #F5E6D3;           /* Warm cream */
      /* Legacy aliases (for backwards compatibility) */
      --coral: var(--primary);
      --peach: var(--secondary);
      --turquoise: var(--accent-cyan);
      --lavender: var(--accent-lavender);
      --sunset-orange: var(--accent-pink);
      --deep-purple: var(--bg-dark);
      --warm-black: var(--bg-darker);
      --soft-pink: var(--bg-soft);
      /* Game-specific */
      --kush-green: #5B9A8B;
      --gold: #D4A574;
      /* UI utility colors */
      --kush: #4ade80;
      --light: #ffffff;
      --soft-white: rgba(255, 255, 255, 0.8);
      --dark-purple: #1a0a2e;
      --dark-card: #1e1e2e;
      --purple: #7c3aed;
    }

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

    /* Screen reader only - visually hidden but accessible */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    body {
      background: var(--warm-black);
      min-height: 100vh;
      font-family: 'Outfit', sans-serif;
      overflow: hidden;
      color: #fff;
      /* Prevent pull-to-refresh and overscroll on mobile */
      overscroll-behavior: none;
      -webkit-overflow-scrolling: touch;
    }

    html {
      /* Prevent iOS rubber-banding */
      overscroll-behavior: none;
      position: fixed;
      width: 100%;
      height: 100%;
    }

    #game-container {
      position: relative;
      width: 100vw;
      height: 100vh;
    }

    /* Auth Modal - Miami Deco Sunset */
    #auth-modal {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      /* Miami Deco sunset - teal to coral gradient */
      background: linear-gradient(180deg,
        #141E28 0%,
        #1E2D3D 25%,
        #2A3F4F 45%,
        #4A5A65 65%,
        #8A7068 82%,
        #C49080 100%);
      display: flex;
      align-items: center;
      justify-content: flex-end;
      z-index: 2000;
      padding: 40px;
      overflow: hidden;
    }

    /* Hotel background image */
    .auth-hotel-bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 70%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      overflow: visible;
    }

    .auth-hotel-bg img {
      max-width: none;
      max-height: 100%;
      width: auto;
      height: 95vh;
      object-fit: contain;
      image-rendering: pixelated;
      image-rendering: crisp-edges;
      filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.4));
    }

    /* Logo overlay on hotel side */
    .auth-logo-overlay {
      position: absolute;
      top: 30px;
      left: 30px;
      z-index: 1;
    }

    .auth-logo-overlay h1 {
      font-family: 'Righteous', cursive;
      font-size: 48px;
      color: var(--coral);
      text-shadow:
        3px 3px 0 #141E28,
        -1px -1px 0 #141E28,
        0 0 20px rgba(224, 123, 103, 0.5);
      margin: 0;
    }

    .auth-logo-overlay span {
      display: block;
      font-size: 12px;
      color: var(--peach);
      letter-spacing: 4px;
      text-transform: uppercase;
      margin-top: 4px;
    }

    #auth-modal.hidden { display: none; }

    .auth-box {
      background: rgba(30, 45, 61, 0.95);
      border: 2px solid rgba(91, 154, 139, 0.4);
      border-radius: 12px;
      padding: 32px;
      width: 100%;
      max-width: 340px;
      text-align: center;
      position: relative;
      z-index: 2;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
                  0 0 80px rgba(224, 123, 103, 0.1);
      margin-right: 5%;
    }

    .auth-box h2 {
      font-size: 36px;
      margin-bottom: 8px;
      letter-spacing: 3px;
      font-weight: 700;
      background: linear-gradient(135deg, var(--coral) 0%, var(--peach) 50%, var(--primary) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .auth-box p {
      color: var(--lavender);
      font-size: 12px;
      margin-bottom: 30px;
      letter-spacing: 3px;
      text-transform: uppercase;
      font-weight: 300;
    }


    .form-group {
      margin-bottom: 16px;
    }

    .form-group input {
      width: 100%;
      padding: 14px 18px;
      background: rgba(30, 45, 61, 0.9);
      border: 1px solid rgba(212, 165, 116, 0.2);
      border-radius: 6px;
      color: #fff;
      font-family: 'Outfit', sans-serif;
      font-size: 16px;
      outline: none;
      transition: all 0.2s;
    }

    .form-group input:focus {
      border-color: var(--peach);
      box-shadow: 0 0 20px rgba(212, 165, 116, 0.25);
    }

    .form-group input::placeholder { color: var(--lavender); opacity: 0.5; }

    .auth-submit {
      width: 100%;
      padding: 14px;
      background: linear-gradient(135deg, var(--coral) 0%, var(--sunset-orange) 100%);
      border: none;
      border-radius: 6px;
      color: #fff;
      font-family: 'Outfit', sans-serif;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.2s;
      margin-top: 8px;
      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    }

    .auth-submit:hover {
      box-shadow: 0 8px 30px rgba(224, 123, 103, 0.4);
      transform: translateY(-2px);
    }

    .auth-submit:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      background: rgba(100, 100, 100, 0.5);
      box-shadow: none;
      transform: none;
    }

    .auth-error {
      color: var(--coral);
      font-size: 12px;
      margin-top: 12px;
      min-height: 18px;
    }

    /* ===========================================
       BLOCK SELECTOR - Server/Realm Selection
       =========================================== */
    #block-selector {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1000;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 20px 0;
    }

    .block-selector-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      overflow: hidden;
    }

    .block-selector-bg img {
      max-width: 100%;
      max-height: 90%;
      object-fit: contain;
      opacity: 0.4;
      filter: blur(2px);
    }

    .block-selector-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(180deg,
        rgba(20, 30, 40, 0.95) 0%,
        rgba(20, 30, 40, 0.85) 50%,
        rgba(20, 30, 40, 0.95) 100%);
    }

    .block-selector-content {
      position: relative;
      z-index: 10;
      max-width: 500px;
      width: 92%;
      padding: 20px 0;
      overflow-x: hidden;
      box-sizing: border-box;
    }

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

    .block-selector-header h1 {
      font-family: 'Righteous', cursive;
      font-size: 36px;
      color: var(--primary);
      text-shadow: 0 0 30px rgba(224, 123, 103, 0.5);
      margin-bottom: 4px;
      letter-spacing: 3px;
    }

    .block-selector-header h2 {
      font-family: 'Outfit', sans-serif;
      font-size: 18px;
      color: #fff;
      font-weight: 300;
      margin-bottom: 6px;
    }

    .block-selector-header p {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.5);
    }

    .block-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .block-card {
      background: rgba(30, 45, 61, 0.9);
      border: 1px solid rgba(91, 154, 139, 0.3);
      border-radius: 10px;
      padding: 14px 16px;
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
      overflow: hidden;
    }

    .block-card:hover:not(.block-card-locked) {
      border-color: var(--primary);
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(224, 123, 103, 0.2);
    }

    .block-card:active:not(.block-card-locked) {
      transform: translateY(0);
      box-shadow: 0 2px 10px rgba(224, 123, 103, 0.15);
    }

    .block-card-locked {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .block-card-locked::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(0, 0, 0, 0.1) 10px,
        rgba(0, 0, 0, 0.1) 20px
      );
    }

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

    .block-card-title {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .block-card-icon {
      font-size: 20px;
    }

    .block-card-name {
      font-family: 'Outfit', sans-serif;
      font-size: 17px;
      font-weight: 600;
      color: #fff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 200px;
    }

    .block-card-type {
      padding: 3px 8px;
      border-radius: 12px;
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .block-card-type.normal {
      background: rgba(91, 154, 139, 0.2);
      color: var(--secondary);
      border: 1px solid rgba(91, 154, 139, 0.4);
    }

    .block-card-type.rp {
      background: rgba(212, 165, 116, 0.2);
      color: var(--gold);
      border: 1px solid rgba(212, 165, 116, 0.4);
    }

    .block-card-desc {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.5);
      margin-bottom: 10px;
    }

    .block-card-stats {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .block-card-population {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      color: rgba(255, 255, 255, 0.5);
    }

    .population-dots {
      display: flex;
      gap: 2px;
    }

    .population-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.2);
    }

    .population-dot.filled {
      background: var(--secondary);
    }

    .population-dot.filled.high {
      background: var(--primary);
    }

    .block-card-enter {
      padding: 8px 16px;
      background: linear-gradient(135deg, var(--primary), var(--primary-glow));
      border: none;
      border-radius: 6px;
      color: #fff;
      font-family: 'Outfit', sans-serif;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
    }

    .block-card-enter:hover:not(:disabled) {
      transform: scale(1.05);
      box-shadow: 0 4px 20px rgba(224, 123, 103, 0.4);
    }

    /* Full block state */
    .block-card.block-card-full {
      opacity: 0.7;
    }

    .block-card.block-card-full::after {
      content: '';
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 10px,
        rgba(255, 0, 0, 0.05) 10px,
        rgba(255, 0, 0, 0.05) 20px
      );
      pointer-events: none;
      border-radius: 16px;
    }

    .block-card-enter:disabled,
    .block-card-enter.block-card-full {
      background: linear-gradient(135deg, #666, #555);
      cursor: not-allowed;
      opacity: 0.7;
    }

    .block-card-enter:disabled:hover,
    .block-card-enter.block-card-full:hover {
      transform: none;
      box-shadow: none;
    }

    .block-card-locked-text {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.4);
      font-style: italic;
    }

    .block-card-preview {
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      font-size: 11px;
      color: rgba(255, 255, 255, 0.4);
    }

    .block-card-preview span {
      color: var(--secondary);
      font-weight: 600;
    }

    .block-card-preview.new-character {
      display: none; /* Hide the confusing "fresh start" message */
    }

    .block-selector-footer {
      margin-top: 16px;
      text-align: center;
    }

    .block-back-btn {
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: rgba(255, 255, 255, 0.5);
      padding: 8px 16px;
      border-radius: 6px;
      font-family: 'Outfit', sans-serif;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .block-back-btn:hover {
      border-color: rgba(255, 255, 255, 0.4);
      color: rgba(255, 255, 255, 0.8);
    }

    /* Game Mode Teaser Banner */
    .gamemode-teaser {
      position: relative;
      width: 100%;
      height: 100px;
      border-radius: 10px;
      overflow: hidden;
      cursor: default;
    }

    .gamemode-teaser-image {
      position: absolute;
      inset: 0;
      background-image: url('/assets/the-streets-banner.webp');
      background-size: cover;
      background-position: center 40%;
      filter: saturate(1.1);
    }

    .gamemode-teaser-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        135deg,
        rgba(15, 20, 30, 0.85) 0%,
        rgba(30, 20, 40, 0.7) 50%,
        rgba(60, 30, 30, 0.6) 100%
      );
    }

    .gamemode-teaser-content {
      position: relative;
      z-index: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 12px 16px;
    }

    .gamemode-teaser-badges {
      display: flex;
      gap: 6px;
      margin-bottom: 6px;
    }

    .gamemode-badge {
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .gamemode-badge.mode {
      background: rgba(224, 123, 103, 0.3);
      color: var(--primary);
      border: 1px solid rgba(224, 123, 103, 0.5);
    }

    .gamemode-badge.coming {
      background: rgba(91, 154, 139, 0.2);
      color: var(--secondary);
      border: 1px solid rgba(91, 154, 139, 0.4);
      animation: pulse-badge 2s ease-in-out infinite;
    }

    @keyframes pulse-badge {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.6; }
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.85); }
    }

    .gamemode-teaser-title {
      font-family: 'Outfit', sans-serif;
      font-size: 20px;
      font-weight: 800;
      color: #fff;
      text-transform: uppercase;
      letter-spacing: 2px;
      text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.8);
    }

    .gamemode-teaser-desc {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.5);
      margin-top: 2px;
    }

    /* Mobile block selector */
    @media (max-width: 600px) {
      .block-selector-content {
        padding: 16px 0;
      }

      .block-selector-header h1 {
        font-size: 28px;
      }

      .block-selector-header h2 {
        font-size: 15px;
      }

      .block-card {
        padding: 12px 14px;
      }

      .block-card-name {
        font-size: 15px;
      }

      .block-card-stats {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
      }

      .block-card-enter {
        width: 100%;
      }

      /* Mobile game mode teaser */
      .gamemode-teaser {
        height: 85px;
      }

      .gamemode-teaser-content {
        padding: 10px 14px;
      }

      .gamemode-teaser-title {
        font-size: 16px;
        letter-spacing: 1px;
      }

      .gamemode-teaser-desc {
        font-size: 10px;
      }

      .gamemode-badge {
        font-size: 8px;
        padding: 2px 6px;
      }
    }

    /* User Bar - integrated into topbar */
    #user-bar {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    #user-bar.in-room {
      display: none;
    }

    #user-info {
      display: flex;
      align-items: center;
      gap: 10px;
      background: rgba(0, 0, 0, 0.6);
      padding: 8px 16px;
      border-radius: 8px;
      border: 1px solid rgba(212, 165, 116, 0.4);
    }

    #user-name {
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.3px;
    }

    .user-bucks-separator {
      color: rgba(255, 255, 255, 0.3);
      font-size: 14px;
    }

    #user-credits {
      color: #D4A574;
      font-size: 14px;
      font-weight: 600;
    }

    #logout-btn {
      background: rgba(0, 0, 0, 0.5);
      border: 1px solid rgba(224, 123, 103, 0.3);
      color: var(--coral);
      padding: 8px 14px;
      border-radius: 6px;
      font-family: 'Outfit', sans-serif;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
    }

    #logout-btn:hover {
      background: rgba(224, 123, 103, 0.15);
      border-color: var(--coral);
    }

    /* Hotel View - Retro Dashboard Lobby */
    #hotel-view {
      display: flex;
      flex-direction: column;
      height: 100vh;
      position: relative;
      overflow: hidden;
      background: #0a0812;
    }

    /* Clean dark background - Miami Deco night */
    #lobby-bg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      overflow: hidden;
      background: linear-gradient(180deg, #141E28 0%, #1E2D3D 50%, #2A3F4F 100%);
    }

    /* Warm sunset glow - top right */
    #lobby-bg::before {
      content: '';
      position: absolute;
      top: -30%;
      right: -20%;
      width: 80%;
      height: 80%;
      background: radial-gradient(ellipse at center, rgba(224, 123, 103, 0.12) 0%, rgba(232, 150, 122, 0.06) 40%, transparent 70%);
      filter: blur(60px);
    }

    /* Teal ambient glow - bottom left */
    #lobby-bg::after {
      content: '';
      position: absolute;
      bottom: -30%;
      left: -20%;
      width: 70%;
      height: 70%;
      background: radial-gradient(ellipse at center, rgba(91, 154, 139, 0.1) 0%, rgba(91, 154, 139, 0.04) 40%, transparent 70%);
      filter: blur(80px);
    }

    /* Subtle accent line */
    #lobby-grid {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      z-index: 1;
      background: linear-gradient(90deg, transparent 0%, rgba(91, 154, 139, 0.4) 20%, rgba(224, 123, 103, 0.6) 50%, rgba(91, 154, 139, 0.4) 80%, transparent 100%);
      box-shadow: 0 0 15px rgba(224, 123, 103, 0.3), 0 0 30px rgba(91, 154, 139, 0.15);
    }

    /* Subtle floating particles */
    .lobby-particle {
      position: fixed;
      width: 2px;
      height: 2px;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      animation: particle-float 20s linear infinite;
      z-index: 0;
    }

    @keyframes particle-float {
      0% { transform: translateY(100vh) translateX(0); opacity: 0; }
      10% { opacity: 0.6; }
      90% { opacity: 0.6; }
      100% { transform: translateY(-100px) translateX(30px); opacity: 0; }
    }

    /* Top Bar */
    #lobby-topbar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 8px 16px;
      background: linear-gradient(180deg, rgba(20, 30, 40, 0.95) 0%, rgba(30, 45, 61, 0.9) 100%);
      border-bottom: 2px solid rgba(224, 123, 103, 0.4);
      position: relative;
      z-index: 10;
      box-shadow: 0 2px 20px rgba(224, 123, 103, 0.15);
    }

    .topbar-left {
      display: flex;
      align-items: baseline;
      gap: 8px;
    }

    .topbar-logo {
      font-family: 'Righteous', sans-serif;
      font-size: 24px;
      color: var(--primary);
      text-shadow: 0 0 10px rgba(224, 123, 103, 0.6);
      letter-spacing: 2px;
    }

    .change-block-btn {
      position: absolute;
      left: 16px;
      background: rgba(45, 55, 72, 0.8);
      border: 1px solid rgba(91, 154, 139, 0.3);
      color: rgba(255, 255, 255, 0.6);
      padding: 6px 10px;
      border-radius: 6px;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s ease;
      font-family: inherit;
      line-height: 1;
    }

    .change-block-btn:hover {
      background: rgba(45, 55, 72, 1);
      color: #fff;
      border-color: var(--primary);
    }

    .topbar-tagline {
      font-size: 10px;
      color: var(--lavender);
      letter-spacing: 2px;
      opacity: 0.7;
    }

    .topbar-help {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.7);
      text-decoration: none;
      background: rgba(0, 0, 0, 0.4);
      border: 1px solid rgba(212, 165, 116, 0.3);
      border-radius: 50%;
      transition: all 0.2s;
      font-weight: 700;
    }

    .topbar-help:hover {
      background: rgba(212, 165, 116, 0.3);
      color: #fff;
      border-color: rgba(212, 165, 116, 0.5);
    }

    .topbar-right {
      position: absolute;
      right: 16px;
      display: flex;
      align-items: center;
      gap: 16px;
    }

    #online-badge {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      background: rgba(0, 0, 0, 0.5);
      border: 1px solid rgba(74, 222, 128, 0.5);
      border-radius: 4px;
      color: #4ade80;
      font-size: 11px;
      font-weight: 600;
    }

    #online-badge::before {
      content: '';
      width: 6px;
      height: 6px;
      background: #4ade80;
      border-radius: 50%;
      box-shadow: 0 0 8px #4ade80;
      animation: pulse 2s infinite;
    }

    #volume-control {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .volume-icon {
      font-size: 14px;
      cursor: pointer;
    }

    #volume-slider {
      width: 60px;
      height: 4px;
      -webkit-appearance: none;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 2px;
      cursor: pointer;
    }

    #volume-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 12px;
      height: 12px;
      background: var(--coral);
      border-radius: 50%;
      cursor: pointer;
    }

    /* Main Dashboard Grid */
    #lobby-dashboard {
      display: grid;
      grid-template-columns: 320px 1fr 280px;
      gap: 16px;
      padding: 16px;
      flex: 1;
      position: relative;
      z-index: 5;
      overflow: hidden;
    }

    /* Larger screens - wider room panel */
    @media (min-width: 1400px) {
      #lobby-dashboard {
        grid-template-columns: 420px 1fr 300px;
        gap: 20px;
        padding: 20px;
      }
    }

    @media (min-width: 1800px) {
      #lobby-dashboard {
        grid-template-columns: 520px 1fr 320px;
      }
    }

    #lobby-left, #lobby-center, #lobby-right {
      display: flex;
      flex-direction: column;
      gap: 12px;
      overflow-y: auto;
      max-height: calc(100vh - 120px);
    }

    /* Panel Styles - Miami Deco Look */
    .panel {
      background: linear-gradient(180deg, rgba(30, 45, 61, 0.95) 0%, rgba(20, 30, 40, 0.98) 100%);
      border: 2px solid rgba(91, 154, 139, 0.35);
      border-radius: 6px;
      box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
      overflow: hidden;
    }

    .panel-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 14px;
      background: linear-gradient(90deg, rgba(224, 123, 103, 0.15) 0%, transparent 100%);
      border-bottom: 1px solid rgba(91, 154, 139, 0.3);
      font-size: 13px;
      font-weight: 600;
      color: var(--primary);
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }

    /* Rooms Panel */
    .rooms-panel {
      flex: 1;
      display: flex;
      flex-direction: column;
      max-height: calc(100vh - 250px);
    }

    #rooms-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 6px;
      padding: 8px;
      overflow-y: auto;
      flex: 1;
    }

    /* 2 columns on wider panels */
    @media (min-width: 1400px) {
      #rooms-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
      }
    }

    /* Custom Scrollbar */
    ::-webkit-scrollbar {
      width: 6px;
    }

    ::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.3);
      border-radius: 3px;
    }

    ::-webkit-scrollbar-thumb {
      background: rgba(224, 123, 103, 0.5);
      border-radius: 3px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: rgba(224, 123, 103, 0.7);
    }

    /* Welcome Panel */
    .welcome-panel {
      background: linear-gradient(180deg, rgba(30, 45, 61, 0.9) 0%, rgba(20, 30, 40, 0.95) 100%);
    }

    .welcome-content {
      padding: 30px 20px;
      text-align: center;
    }

    .neon-title {
      font-family: 'Righteous', sans-serif;
      font-size: 48px;
      color: var(--primary);
      letter-spacing: 8px;
      margin-bottom: 8px;
      text-shadow:
        0 0 10px rgba(224, 123, 103, 0.7),
        0 0 20px rgba(224, 123, 103, 0.5),
        0 0 40px rgba(224, 123, 103, 0.3);
      animation: neon-flicker 3s infinite alternate;
    }

    @keyframes neon-flicker {
      0%, 100% { opacity: 1; }
      92% { opacity: 1; }
      93% { opacity: 0.8; }
      94% { opacity: 1; }
      95% { opacity: 0.9; }
      96% { opacity: 1; }
    }

    .welcome-tagline {
      color: var(--lavender);
      font-size: 13px;
      letter-spacing: 4px;
      font-style: italic;
      margin-bottom: 16px;
    }

    .welcome-user {
      color: var(--peach);
      font-size: 14px;
    }

    .welcome-user span {
      color: #fff;
      font-weight: 600;
    }

    /* Oh Shit Pack Banners */
    .oh-shit-banner {
      background: linear-gradient(180deg, rgba(60, 20, 20, 0.95) 0%, rgba(40, 15, 15, 0.98) 100%);
      border: 1px solid rgba(239, 68, 68, 0.4);
    }

    .oh-shit-banner-content {
      padding: 14px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .oh-shit-banner-title {
      color: #ef4444;
      font-weight: 700;
      font-size: 14px;
      white-space: nowrap;
    }

    .oh-shit-banner-desc {
      color: rgba(255, 255, 255, 0.7);
      font-size: 12px;
      flex: 1;
      min-width: 120px;
    }

    .oh-shit-banner-btn {
      background: #ef4444;
      color: #fff;
      border: none;
      padding: 6px 14px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.2s;
    }

    .oh-shit-banner-btn:hover {
      background: #dc2626;
    }

    .oh-shit-room-btn {
      background: #ef4444;
      color: #fff;
      border: none;
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      margin-left: 8px;
      transition: background 0.2s;
    }

    .oh-shit-room-btn:hover {
      background: #dc2626;
    }

    .oh-shit-banner-btn:disabled,
    .oh-shit-room-btn:disabled,
    #oh-shit-buy-btn:disabled {
      background: #7f1d1d;
      cursor: wait;
      opacity: 0.8;
    }

    /* Activity Panel */
    .activity-panel {
      flex: 1;
      min-height: 200px;
    }

    #activity-feed {
      padding: 8px;
      max-height: 300px;
      overflow-y: auto;
    }

    .activity-item {
      display: flex;
      gap: 8px;
      padding: 8px 10px;
      font-size: 13px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .activity-item:last-child {
      border-bottom: none;
    }

    .activity-time {
      color: rgba(255, 255, 255, 0.3);
      font-size: 10px;
      min-width: 40px;
    }

    .activity-text {
      color: var(--lavender);
    }

    .activity-item.join .activity-text { color: #4ade80; }
    .activity-item.leave .activity-text { color: #f87171; }
    .activity-item.chat .activity-text { color: var(--peach); }

    /* Stats Panel */
    .stats-panel {
      display: flex;
      flex-direction: column;
      max-height: 180px;
    }

    .stats-panel .stats-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      padding: 12px;
      overflow-y: auto;
      flex: 1;
    }

    .stat-item {
      text-align: center;
      padding: 12px 8px;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 4px;
      border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .stat-value {
      display: block;
      font-size: 24px;
      font-weight: 700;
      color: var(--coral);
      text-shadow: 0 0 10px rgba(224, 123, 103, 0.5);
    }

    .stat-label {
      font-size: 9px;
      color: var(--lavender);
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    /* Links Panel */
    .links-panel {
      display: flex;
      flex-direction: column;
      max-height: 200px;
    }

    .quick-links {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      padding: 10px;
      overflow-y: auto;
      flex: 1;
    }

    .quick-link {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 10px 8px;
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 4px;
      color: var(--lavender);
      text-decoration: none;
      font-size: 11px;
      transition: all 0.15s;
    }

    .quick-link:hover {
      background: rgba(224, 123, 103, 0.15);
      border-color: rgba(224, 123, 103, 0.5);
      color: #fff;
    }

    /* News Panel */
    .news-panel {
      display: flex;
      flex-direction: column;
      max-height: 300px;
    }

    .news-list {
      padding: 10px;
      overflow-y: auto;
      flex: 1;
    }

    .news-item {
      padding: 10px;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 4px;
      margin-bottom: 8px;
      border-left: 3px solid var(--coral);
    }

    .news-item:last-child {
      margin-bottom: 0;
    }

    .news-date {
      font-size: 11px;
      color: var(--coral);
      letter-spacing: 1px;
      font-weight: 600;
    }

    .news-title {
      display: block;
      font-size: 14px;
      color: #fff;
      font-weight: 600;
      margin: 4px 0;
    }

    .news-preview {
      font-size: 12px;
      color: var(--lavender);
      opacity: 0.9;
      line-height: 1.4;
    }

    /* Bottom Status Bar */
    #lobby-statusbar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 6px 16px;
      background: rgba(0, 0, 0, 0.9);
      border-top: 1px solid rgba(224, 123, 103, 0.3);
      position: relative;
      z-index: 10;
    }

    .status-item {
      font-size: 10px;
      color: var(--lavender);
      opacity: 0.7;
    }

    .status-divider {
      color: rgba(255, 255, 255, 0.2);
    }

    .status-version {
      color: var(--secondary);
      opacity: 0.6;
      font-family: monospace;
    }

    .block-indicator {
      font-size: 10px;
      color: var(--turquoise);
      background: rgba(91, 154, 139, 0.15);
      border: 1px solid rgba(91, 154, 139, 0.3);
      padding: 2px 8px;
      border-radius: 10px;
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-left: auto;
    }

    /* Room Card - Compact for Sidebar */
    .room-card {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid transparent;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.15s ease;
      position: relative;
      overflow: hidden;
    }

    .room-thumb {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      opacity: 0.15;
      transition: opacity 0.2s ease;
      image-rendering: pixelated;
      image-rendering: crisp-edges;
    }

    .room-card:hover .room-thumb {
      opacity: 0.3;
    }

    .room-card:hover {
      background: rgba(224, 123, 103, 0.15);
      border-color: rgba(224, 123, 103, 0.5);
      box-shadow: 0 0 10px rgba(224, 123, 103, 0.2);
      transform: translateX(2px);
    }

    .room-card:hover .room-name {
      color: #FF6B6B;
      text-shadow: 0 0 8px rgba(224, 123, 103, 0.5);
    }

    .room-card.my-room {
      background: linear-gradient(135deg, rgba(74, 222, 128, 0.1) 0%, rgba(34, 197, 94, 0.05) 100%);
      border: 1px solid rgba(74, 222, 128, 0.3);
    }
    .room-card.my-room:hover {
      background: linear-gradient(135deg, rgba(74, 222, 128, 0.2) 0%, rgba(34, 197, 94, 0.1) 100%);
      border-color: rgba(74, 222, 128, 0.6);
      box-shadow: 0 0 15px rgba(74, 222, 128, 0.3);
    }
    .room-card.my-room:hover .room-name {
      color: #4ade80;
      text-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
    }

    .room-card.locked {
      background: rgba(107, 114, 128, 0.1);
      border: 1px dashed rgba(107, 114, 128, 0.3);
      opacity: 0.7;
    }
    .room-card.locked:hover {
      background: rgba(107, 114, 128, 0.15);
      border-color: rgba(107, 114, 128, 0.5);
      opacity: 1;
    }

    /* Room Icon */
    .room-icon {
      font-size: 20px;
      width: 28px;
      text-align: center;
      position: relative;
      z-index: 1;
    }

    /* Room Info */
    .room-info {
      flex: 1;
      min-width: 0;
      position: relative;
      z-index: 1;
    }

    .room-name {
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      transition: all 0.15s;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .room-desc {
      color: rgba(255, 255, 255, 0.7);
      font-size: 12px;
      margin-top: 3px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Room Count - Right side */
    .room-count {
      display: flex;
      align-items: center;
      gap: 4px;
      color: #4ade80;
      font-size: 11px;
      font-weight: 600;
      position: relative;
      z-index: 1;
      min-width: 36px;
      justify-content: flex-end;
      background: rgba(0, 0, 0, 0.5);
      padding: 2px 6px;
      border-radius: 3px;
    }

    .room-count-dot {
      width: 5px;
      height: 5px;
      background: #4ade80;
      border-radius: 50%;
      box-shadow: 0 0 6px #4ade80;
      animation: pulse 2s infinite;
    }

    .room-count.empty { color: rgba(255, 255, 255, 0.5); }
    .room-count.empty .room-count-dot {
      background: rgba(255, 255, 255, 0.4);
      box-shadow: none;
      animation: none;
    }

    /* Room capacity display */
    .room-count-cap {
      color: rgba(255, 255, 255, 0.7);
      font-size: 11px;
      margin-left: 2px;
    }

    /* Full room styles */
    .room-count.full {
      color: #FF6B6B;
    }
    .room-count.full .room-count-dot {
      background: #FF6B6B;
      box-shadow: 0 0 6px rgba(224, 123, 103, 0.6);
      animation: none;
    }

    .room-card.full {
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    }
    .room-card.full::after {
      content: 'FULL';
      position: absolute;
      right: 80px;
      font-size: 10px;
      font-weight: 600;
      color: #FF6B6B;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    /* Responsive */
    @media (max-width: 700px) {
      #rooms-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 0 10px;
      }
      #hotel-header h1 {
        font-size: 32px;
        letter-spacing: 4px;
      }
    }

    @media (min-width: 1100px) {
      #rooms-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 1000px;
      }
    }

    /* Room view responsive */
    @media (max-width: 600px) {
      /* Room top bar - wrap to two rows on mobile */
      #room-ui {
        padding: 8px;
        flex-wrap: wrap;
        gap: 6px;
      }
      #back-btn {
        padding: 8px 12px;
        font-size: 10px;
        order: 1;
      }
      #room-bucks {
        padding: 6px 10px;
        font-size: 10px;
        order: 2;
      }
      .oh-shit-room-btn {
        order: 2;
        font-size: 9px;
        padding: 4px 8px;
      }
      #room-info {
        order: 3;
        gap: 6px;
        flex: 1;
        justify-content: flex-end;
      }
      #room-name-display {
        padding: 6px 10px;
        font-size: 10px;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      #user-count {
        padding: 6px 10px;
        font-size: 10px;
      }
      /* Move zoom to second row on very small screens */
      #zoom-controls {
        padding: 4px 6px;
        order: 3;
        flex-basis: 100%;
        justify-content: center;
        background: rgba(42, 27, 61, 0.7);
      }
      #zoom-controls button { width: 28px; height: 28px; font-size: 14px; }
      #zoom-level { font-size: 11px; min-width: 40px; }

      #chat-log { width: 300px; }
      #chat-input-wrapper { width: 300px; }
      #chat-input { padding: 10px 36px 10px 14px; font-size: 13px; }
      #chat-send-btn { width: 26px; height: 26px; font-size: 13px; }
      #furniture-panel { right: 8px; top: 65px; padding: 10px; }
      .furni-btn { width: 40px; height: 40px; font-size: 18px; }
    }

    /* Auth modal mobile - needs higher breakpoint */
    @media (max-width: 768px) {
      #auth-modal {
        padding: 20px;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
        overflow-y: auto;
        padding-top: 60px;
      }
      .auth-box {
        padding: 24px;
        margin: 0 auto;
        width: 90%;
        max-width: 340px;
      }
      .auth-hotel-bg { display: none; }
      .auth-logo-overlay {
        position: static;
        text-align: center;
        margin: 0 auto 20px;
        width: 100%;
      }
      .auth-logo-overlay h1 { font-size: 36px; }
      .auth-logo-overlay span { font-size: 11px; letter-spacing: 3px; }
    }

    /* Room View */
    #room-view {
      display: none;
      position: relative;
      width: 100%; height: 100%;
    }

    #room-ui {
      position: absolute;
      top: 0; left: 0; right: 0;
      padding: 16px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 100;
      background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 100%);
    }

    #back-btn {
      background: rgba(42, 27, 61, 0.85);
      border: 1px solid rgba(212, 165, 116, 0.3);
      color: var(--turquoise);
      padding: 10px 22px;
      border-radius: 3px;
      cursor: pointer;
      font-family: 'Outfit', sans-serif;
      font-weight: 500;
      font-size: 12px;
      transition: all 0.2s;
      letter-spacing: 1px;
      text-transform: uppercase;
    }
    #back-btn:hover {
      background: var(--turquoise);
      color: var(--warm-black);
      border-color: var(--turquoise);
      box-shadow: 0 0 20px rgba(212, 165, 116, 0.4);
    }

    #room-bucks {
      background: rgba(42, 27, 61, 0.85);
      color: var(--gold);
      padding: 10px 18px;
      border-radius: 3px;
      font-weight: 600;
      font-size: 12px;
      border: 1px solid rgba(212, 165, 116, 0.3);
      letter-spacing: 0.5px;
      white-space: nowrap;
    }

    #room-info { display: flex; align-items: center; gap: 12px; }

    #room-name-display {
      background: rgba(42, 27, 61, 0.85);
      color: #fff;
      padding: 10px 20px;
      border-radius: 3px;
      font-weight: 600;
      font-size: 12px;
      border: 1px solid rgba(255,255,255,0.1);
      letter-spacing: 1px;
    }

    #user-count {
      background: rgba(42, 27, 61, 0.85);
      color: var(--turquoise);
      padding: 10px 18px;
      border-radius: 3px;
      font-weight: 500;
      font-size: 12px;
      border: 1px solid rgba(212, 165, 116, 0.2);
    }

    #zoom-controls {
      display: flex;
      align-items: center;
      gap: 4px;
      background: rgba(42, 27, 61, 0.85);
      padding: 6px 10px;
      border-radius: 3px;
      border: 1px solid rgba(212, 165, 116, 0.2);
    }

    #zoom-controls button {
      background: rgba(212, 165, 116, 0.2);
      border: none;
      color: var(--turquoise);
      width: 26px;
      height: 26px;
      border-radius: 3px;
      cursor: pointer;
      font-size: 14px;
      font-weight: bold;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #zoom-controls button:hover {
      background: var(--turquoise);
      color: var(--warm-black);
    }

    #zoom-level {
      color: #fff;
      font-size: 11px;
      min-width: 40px;
      text-align: center;
      font-weight: 500;
    }

    #zoom-reset {
      margin-left: 4px;
      font-size: 12px !important;
    }

    /* Unified bottom game bar */
    #game-bottom-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding: 0 20px 12px;
      gap: 12px;
      z-index: 200;
      pointer-events: none;
    }

    #game-bottom-bar > * {
      pointer-events: auto;
    }

    #chat-container {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
      max-width: 320px;
    }

    #chat-log-wrapper {
      position: relative;
      display: none;
    }

    #chat-log-wrapper.has-messages {
      display: block;
    }

    #chat-log-wrapper.collapsed #chat-log {
      display: none !important;
    }

    #chat-log-wrapper.expanded #chat-log {
      max-height: 300px;
    }

    #chat-log {
      width: 320px;
      max-height: 100px;
      overflow-y: auto;
      overflow-x: hidden;
      background: rgba(30, 45, 61, 0.95);
      border: 1px solid rgba(212, 165, 116, 0.2);
      border-radius: 6px;
      padding: 8px 12px;
    }

    .chat-collapse-btn {
      position: absolute;
      top: -20px;
      right: 0;
      background: rgba(30, 45, 61, 0.95);
      border: 1px solid rgba(212, 165, 116, 0.2);
      border-bottom: none;
      border-radius: 4px 4px 0 0;
      color: var(--soft-white);
      font-size: 9px;
      padding: 2px 8px;
      cursor: pointer;
      display: none;
    }

    #chat-log-wrapper.has-messages .chat-collapse-btn {
      display: block;
    }

    #chat-log-wrapper.collapsed .chat-collapse-btn#chat-expand-btn {
      display: none;
    }

    .chat-collapse-btn:hover {
      background: rgba(212, 165, 116, 0.2);
    }

    .chat-message {
      padding: 5px 0;
      font-size: 14px;
      border-bottom: 1px solid rgba(255,255,255,0.05);
      line-height: 1.3;
      word-break: break-word;
    }

    .chat-message:last-child { border-bottom: none; }

    .chat-message .chat-name {
      font-weight: 600;
      margin-right: 10px;
    }

    .chat-message .chat-text {
      color: rgba(255,255,255,0.9);
    }

    .chat-message .chat-time {
      color: rgba(255,255,255,0.3);
      font-size: 10px;
      margin-right: 8px;
      font-family: monospace;
    }

    /* Chat animation */
    .chat-animate {
      animation: chatSlide 0.2s ease-out;
    }

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

    #chat-input {
      width: 320px;
      padding: 12px 16px;
      border: 1px solid rgba(212, 165, 116, 0.25);
      border-radius: 6px;
      background: rgba(30, 45, 61, 0.95);
      color: #fff;
      font-size: 14px;
      font-family: 'Outfit', sans-serif;
      outline: none;
      transition: all 0.2s;
      box-sizing: border-box;
    }
    #chat-input:focus {
      border-color: var(--turquoise);
      box-shadow: 0 0 15px rgba(212, 165, 116, 0.15);
    }
    #chat-input::placeholder { color: rgba(255,255,255,0.4); }

    #chat-input-wrapper {
      position: relative;
      width: 320px;
    }
    #chat-input-wrapper #chat-input {
      width: 100%;
      padding-right: 36px; /* Make room for send button */
    }
    #chat-send-btn {
      position: absolute;
      right: 4px;
      top: 50%;
      transform: translateY(-50%);
      width: 28px;
      height: 28px;
      padding: 0;
      border: none;
      border-radius: 4px;
      background: transparent;
      color: rgba(212, 165, 116, 0.6);
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #chat-send-btn:hover {
      background: rgba(212, 165, 116, 0.15);
      color: var(--gold);
    }
    #chat-send-btn:active {
      transform: translateY(-50%) scale(0.9);
    }

    /* Furniture Panel Modal */
    #furniture-panel {
      min-width: 200px;
    }

    #furni-limit {
      color: var(--lavender);
      font-size: 11px;
      text-align: center;
      margin-bottom: 12px;
      padding: 6px 12px;
      background: rgba(42, 27, 61, 0.5);
      border-radius: 4px;
    }

    .furni-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    .furni-btn {
      width: 52px; height: 52px;
      border: 1px solid rgba(212, 165, 116, 0.15);
      border-radius: 6px;
      background: rgba(42, 27, 61, 0.6);
      cursor: pointer;
      font-size: 24px;
      transition: all 0.15s;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .furni-btn:hover {
      border-color: rgba(212, 165, 116, 0.5);
      transform: scale(1.08);
      background: rgba(212, 165, 116, 0.15);
    }
    .furni-btn.selected {
      border-color: var(--turquoise);
      background: rgba(212, 165, 116, 0.2);
      box-shadow: 0 0 15px rgba(212, 165, 116, 0.3);
    }
    .furni-btn.disabled {
      opacity: 0.3;
      cursor: not-allowed;
    }
    .furni-sprite {
      width: 36px;
      height: 36px;
      object-fit: contain;
      image-rendering: pixelated;
      image-rendering: crisp-edges;
    }
    .furni-emoji {
      font-size: 24px;
    }
    .furni-count {
      position: absolute;
      bottom: 2px;
      right: 4px;
      font-size: 9px;
      color: rgba(255,255,255,0.6);
      font-weight: 600;
    }

    /* Users List Panel Modal */
    #users-panel {
      min-width: 220px;
    }

    #users-panel .panel-body {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .user-list-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 0;
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }

    .user-list-item:last-child { border-bottom: none; }

    .user-list-avatar {
      width: 20px;
      height: 20px;
      border-radius: 3px;
    }

    .user-list-name {
      font-size: 11px;
      color: rgba(255,255,255,0.7);
    }

    .user-list-name.is-you {
      color: var(--turquoise);
    }

    .user-list-item.sitting .user-list-name::after {
      content: ' (sitting)';
      color: rgba(255,255,255,0.3);
      font-size: 9px;
    }

    /* Bottom Toolbar - Habbo style */
    #bottom-toolbar {
      display: flex;
      gap: 4px;
      padding: 8px 10px;
      background: rgba(30, 45, 61, 0.95);
      border-radius: 6px;
      border: 1px solid rgba(212, 165, 116, 0.2);
    }

    .toolbar-btn {
      width: 44px;
      height: 44px;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 6px;
      background: rgba(42, 27, 61, 0.8);
      cursor: pointer;
      font-size: 20px;
      transition: all 0.15s;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .toolbar-icon {
      width: 28px;
      height: 28px;
      object-fit: contain;
      image-rendering: pixelated;
    }
    .toolbar-emoji {
      font-size: 20px;
    }

    .toolbar-btn:hover {
      background: rgba(212, 165, 116, 0.2);
      border-color: rgba(212, 165, 116, 0.4);
      transform: translateY(-2px);
    }

    .toolbar-btn.active {
      background: rgba(212, 165, 116, 0.3);
      border-color: var(--turquoise);
      box-shadow: 0 0 12px rgba(212, 165, 116, 0.3);
    }

    #btn-edit-furni.active {
      background: rgba(74, 222, 128, 0.4);
      border-color: var(--kush);
      box-shadow: 0 0 15px rgba(74, 222, 128, 0.5);
      animation: edit-pulse 1.5s ease-in-out infinite;
    }

    @keyframes edit-pulse {
      0%, 100% { box-shadow: 0 0 15px rgba(74, 222, 128, 0.5); }
      50% { box-shadow: 0 0 25px rgba(74, 222, 128, 0.8); }
    }

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

    .toolbar-btn.disabled:hover {
      transform: none;
      background: rgba(42, 27, 61, 0.8);
      border-color: rgba(255,255,255,0.1);
    }

    .toolbar-btn .badge {
      position: absolute;
      top: -4px;
      right: -4px;
      background: var(--coral);
      color: #fff;
      font-size: 10px;
      padding: 2px 5px;
      border-radius: 8px;
      font-weight: 600;
    }

    /* Panel Modal Base - positioned RIGHT to avoid chat overlap */
    .panel-modal {
      position: fixed;
      top: 80px;
      right: 20px;
      transform: scale(0.9) translateY(-10px);
      background: rgba(30, 45, 61, 0.98);
      border-radius: 8px;
      border: 1px solid rgba(212, 165, 116, 0.25);
      z-index: 300;
      display: none;
      flex-direction: column;
      box-shadow: 0 10px 40px rgba(0,0,0,0.5);
      opacity: 0;
      transition: all 0.2s ease;
      max-height: calc(100vh - 200px);
      min-width: 200px;
    }

    .panel-modal.visible {
      display: flex;
      opacity: 1;
      transform: scale(1) translateY(0);
    }

    .panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      border-bottom: 1px solid rgba(212, 165, 116, 0.15);
      background: rgba(42, 27, 61, 0.5);
      border-radius: 8px 8px 0 0;
    }

    .panel-header h3 {
      color: var(--peach);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-weight: 500;
      margin: 0;
    }

    .panel-close {
      width: 24px;
      height: 24px;
      border: none;
      border-radius: 4px;
      background: rgba(255,255,255,0.1);
      color: #fff;
      cursor: pointer;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;
    }

    .panel-close:hover {
      background: rgba(224, 123, 103, 0.4);
    }

    .panel-body {
      padding: 16px;
      max-height: 400px;
      overflow-y: auto;
    }

    /* Inventory Panel Modal */
    #inventory-panel {
      min-width: 280px;
    }

    #inventory-panel .panel-body {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
    }

    .inventory-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      background: rgba(42, 27, 61, 0.6);
      border-radius: 6px;
      border: 1px solid rgba(255,255,255,0.05);
      transition: all 0.15s;
      cursor: pointer;
    }

    .inventory-item:hover {
      background: rgba(212, 165, 116, 0.15);
      border-color: rgba(212, 165, 116, 0.3);
    }

    .inventory-item span:first-child {
      font-size: 24px;
    }

    /* Emote Panel Modal */
    #emote-panel {
      min-width: 240px;
    }

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

    .emote-btn {
      width: 48px;
      height: 48px;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 8px;
      background: rgba(42, 27, 61, 0.6);
      font-size: 24px;
      cursor: pointer;
      transition: all 0.15s;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .emote-btn:hover {
      background: rgba(224, 123, 103, 0.25);
      border-color: rgba(224, 123, 103, 0.4);
      transform: scale(1.1);
    }

    /* Customize Panel */
    #customize-panel {
      min-width: 260px;
    }

    #customize-panel .panel-body {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .customize-section {
      background: rgba(0, 0, 0, 0.2);
      border-radius: 8px;
      padding: 12px;
    }

    .customize-section h5 {
      color: var(--lavender);
      font-size: 10px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin: 0 0 10px 0;
    }

    .customize-opts {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .customize-opt {
      padding: 8px 12px;
      background: rgba(42, 27, 61, 0.6);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 6px;
      color: var(--lavender);
      font-size: 11px;
      cursor: pointer;
      transition: all 0.15s;
    }

    .customize-opt:hover {
      background: rgba(212, 165, 116, 0.2);
      border-color: rgba(212, 165, 116, 0.4);
    }

    .customize-opt.selected {
      background: rgba(224, 123, 103, 0.3);
      border-color: var(--coral);
      color: #fff;
    }

    /* Skin color swatches */
    .skin-colors {
      gap: 8px;
    }
    .skin-swatch {
      width: 32px;
      height: 32px;
      padding: 0;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,0.2);
    }
    .skin-swatch:hover {
      transform: scale(1.1);
      border-color: rgba(255,255,255,0.5);
    }
    .skin-swatch.selected {
      border-color: var(--coral);
      box-shadow: 0 0 8px rgba(224, 123, 103, 0.5);
    }

    /* Clothing color swatches */
    .color-swatches {
      gap: 8px;
    }
    .color-swatch {
      width: 28px;
      height: 28px;
      padding: 0;
      border-radius: 6px;
      border: 2px solid rgba(255,255,255,0.2);
    }
    .color-swatch:hover {
      transform: scale(1.1);
      border-color: rgba(255,255,255,0.5);
    }
    .color-swatch.selected {
      border-color: #fff;
      box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
    }

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

    .inventory-item .item-name {
      color: #fff;
      font-size: 12px;
      flex: 1;
    }

    .inventory-item .item-qty {
      color: var(--turquoise);
      font-size: 11px;
      font-weight: 600;
    }

    .inventory-item .inv-sprite {
      width: 32px;
      height: 32px;
      object-fit: contain;
      image-rendering: pixelated;
    }

    .inventory-item .inv-emoji {
      font-size: 24px;
      width: 32px;
      text-align: center;
    }

    #online-total {
      position: absolute;
      bottom: 20px;
      right: 20px;
      color: var(--turquoise);
      font-size: 11px;
      background: rgba(42, 27, 61, 0.85);
      padding: 8px 16px;
      border-radius: 3px;
      border: 1px solid rgba(212, 165, 116, 0.2);
      z-index: 1;
      letter-spacing: 1px;
    }

    #status-toast {
      position: fixed;
      bottom: 90px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(10, 10, 15, 0.95);
      color: #f87171;
      padding: 12px 24px;
      border-radius: 25px;
      font-size: 13px;
      z-index: 9999;
      display: none;
      border: 1px solid rgba(248, 113, 113, 0.3);
      backdrop-filter: blur(10px);
    }

    #status-toast.success {
      color: #4ade80;
      border-color: rgba(74, 222, 128, 0.3);
    }

    /* Interaction Hint - positioned top-left of game area */
    #interaction-hint {
      position: fixed;
      top: 90px;
      left: 20px;
      transform: none;
      background: rgba(30, 45, 61, 0.9);
      color: var(--peach);
      padding: 10px 16px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 500;
      z-index: 99;
      display: none;
      border: 1px solid rgba(212, 165, 116, 0.4);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      max-width: 200px;
    }

    #interaction-hint::before {
      content: '💡';
      margin-right: 8px;
    }

    #interaction-hint.visible {
      display: block;
      animation: hint-slide-in 0.2s ease-out;
    }

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

    @keyframes modal-pop-in {
      from { opacity: 0; transform: scale(0.95); }
      to { opacity: 1; transform: scale(1); }
    }

    /* Furniture Placement Mode Bar */
    #furni-mode-bar {
      position: fixed;
      top: 80px;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(135deg, rgba(74, 222, 128, 0.2), rgba(20, 184, 166, 0.2));
      border: 2px solid var(--kush);
      border-radius: 12px;
      padding: 12px 20px;
      display: flex;
      align-items: center;
      gap: 16px;
      z-index: 1500;
      backdrop-filter: blur(15px);
      box-shadow: 0 4px 20px rgba(74, 222, 128, 0.3);
      animation: furni-mode-in 0.3s ease-out;
    }

    #furni-mode-bar.hidden { display: none; }

    @keyframes furni-mode-in {
      from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
      to { opacity: 1; transform: translateX(-50%) translateY(0); }
    }

    .furni-mode-content {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .furni-mode-icon {
      font-size: 24px;
      background: rgba(0, 0, 0, 0.3);
      padding: 8px;
      border-radius: 8px;
    }

    .furni-mode-text {
      color: var(--light);
      font-size: 14px;
    }

    .furni-mode-text strong {
      color: var(--kush);
      text-transform: capitalize;
    }

    .furni-mode-hint {
      color: var(--lavender);
      font-size: 11px;
      opacity: 0.8;
    }

    .furni-mode-cancel {
      background: rgba(239, 68, 68, 0.2);
      border: 1px solid rgba(239, 68, 68, 0.5);
      color: #ef4444;
      padding: 8px 16px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      transition: all 0.2s;
    }

    .furni-mode-cancel:hover {
      background: rgba(239, 68, 68, 0.4);
      transform: scale(1.05);
    }

    /* Furniture Context Menu */
    #furni-context-menu {
      position: fixed;
      background: linear-gradient(135deg, var(--dark-purple), var(--dark-card));
      border: 2px solid var(--purple);
      border-radius: 12px;
      padding: 12px;
      z-index: 2000;
      min-width: 140px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(15px);
      animation: context-pop 0.2s ease-out;
    }

    #furni-context-menu.hidden { display: none; }

    @keyframes context-pop {
      from { opacity: 0; transform: scale(0.9); }
      to { opacity: 1; transform: scale(1); }
    }

    .furni-context-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding-bottom: 10px;
      margin-bottom: 10px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .furni-context-icon { font-size: 20px; }

    #furni-context-name {
      color: var(--light);
      font-weight: 600;
      text-transform: capitalize;
    }

    .furni-context-btn {
      display: block;
      width: 100%;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: var(--light);
      padding: 10px 12px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 13px;
      text-align: left;
      margin-bottom: 6px;
      transition: all 0.2s;
    }

    .furni-context-btn:last-child { margin-bottom: 0; }

    .furni-context-btn:hover {
      background: rgba(74, 222, 128, 0.2);
      border-color: var(--kush);
      transform: translateX(4px);
    }

    .furni-context-btn.cancel:hover {
      background: rgba(239, 68, 68, 0.2);
      border-color: #ef4444;
    }

    /* Plant Context Menu (Grow Slots) */
    #plant-context-menu {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background: linear-gradient(135deg, #1a2e1a, #0d1f0d);
      border: 2px solid #5B9A8B;
      border-radius: 12px;
      padding: 12px;
      z-index: 2000;
      min-width: 180px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(15px);
      animation: plant-menu-pop 0.2s ease-out;
    }

    @keyframes plant-menu-pop {
      from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
      to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }

    #plant-context-menu.hidden { display: none; }

    .plant-context-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding-bottom: 10px;
      margin-bottom: 10px;
      border-bottom: 1px solid rgba(91, 154, 139, 0.3);
    }

    .plant-strain-name {
      color: #5B9A8B;
      font-weight: 600;
      font-size: 14px;
    }

    .plant-tier-badge {
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 4px;
      text-transform: uppercase;
      font-weight: 600;
    }

    .plant-tier-badge.street { background: #6b7280; color: #fff; }
    .plant-tier-badge.dispensary { background: #10b981; color: #fff; }
    .plant-tier-badge.top_shelf { background: #8b5cf6; color: #fff; }

    .plant-context-stats {
      margin-bottom: 12px;
      font-size: 12px;
    }

    .plant-stat-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 6px;
      color: rgba(255, 255, 255, 0.7);
    }

    .plant-stat-bar {
      flex: 1;
      height: 6px;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 3px;
      margin: 0 8px;
      overflow: hidden;
    }

    .plant-stat-fill {
      height: 100%;
      background: linear-gradient(90deg, #5B9A8B, #4ade80);
      border-radius: 3px;
      transition: width 0.3s ease;
    }

    /* Care Timers - Water & Light cooldown indicators */
    .plant-care-timers {
      margin: 12px 0;
      padding: 10px;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .care-timer {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .care-timer-header {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
    }

    .care-timer-icon {
      font-size: 12px;
      width: 16px;
      text-align: center;
    }

    .care-timer-label {
      color: rgba(255, 255, 255, 0.6);
      font-weight: 500;
      min-width: 36px;
    }

    .care-timer-status {
      margin-left: auto;
      font-weight: 600;
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 4px;
    }

    .care-timer.water .care-timer-status.ready {
      background: rgba(59, 130, 246, 0.3);
      color: #60a5fa;
    }

    .care-timer.water .care-timer-status.waiting {
      background: rgba(59, 130, 246, 0.15);
      color: rgba(147, 197, 253, 0.8);
    }

    .care-timer.light .care-timer-status.ready {
      background: rgba(251, 191, 36, 0.3);
      color: #fbbf24;
    }

    .care-timer.light .care-timer-status.waiting {
      background: rgba(251, 191, 36, 0.15);
      color: rgba(253, 224, 71, 0.8);
    }

    .care-timer-bar {
      height: 6px;
      background: rgba(0, 0, 0, 0.4);
      border-radius: 3px;
      overflow: hidden;
      position: relative;
    }

    .care-timer-fill {
      height: 100%;
      border-radius: 3px;
      transition: width 0.4s ease;
      position: relative;
    }

    .care-timer-fill.water {
      background: linear-gradient(90deg, #1e40af, #3b82f6, #60a5fa);
    }

    .care-timer-fill.water.ready {
      background: linear-gradient(90deg, #2563eb, #3b82f6);
      animation: water-pulse 1.5s ease-in-out infinite;
    }

    .care-timer-fill.light {
      background: linear-gradient(90deg, #92400e, #d97706, #fbbf24);
    }

    .care-timer-fill.light.ready {
      background: linear-gradient(90deg, #f59e0b, #fbbf24);
      animation: light-pulse 1.5s ease-in-out infinite;
    }

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

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

    /* Hide care timers when plant is ready to harvest */
    .plant-care-timers.hidden {
      display: none;
    }

    .plant-context-actions {
      display: flex;
      gap: 6px;
      margin-bottom: 8px;
    }

    .plant-action-btn {
      flex: 1;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: var(--light);
      padding: 8px 6px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 11px;
      text-align: center;
      transition: all 0.2s;
    }

    .plant-action-btn:hover {
      transform: translateY(-2px);
    }

    .plant-action-btn.water:hover {
      background: rgba(59, 130, 246, 0.3);
      border-color: #3b82f6;
    }

    .plant-action-btn.light:hover {
      background: rgba(251, 191, 36, 0.3);
      border-color: #fbbf24;
    }

    .plant-action-btn.harvest:hover {
      background: rgba(74, 222, 128, 0.3);
      border-color: #4ade80;
    }

    .plant-action-btn.cancel {
      flex: none;
      width: 100%;
    }

    .plant-action-btn.cancel:hover {
      background: rgba(239, 68, 68, 0.2);
      border-color: #ef4444;
    }

    .plant-action-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
      transform: none !important;
    }

    /* Seed Selection Modal (when clicking empty grow slot) */
    #seed-select-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.85);
      z-index: 2500;
      display: none;
      align-items: center;
      justify-content: center;
    }
    #seed-select-modal.visible { display: flex; }

    .seed-select-box {
      background: linear-gradient(135deg, #1a2e1a, #0d1f0d);
      border: 2px solid #5B9A8B;
      border-radius: 12px;
      padding: 20px;
      min-width: 280px;
      max-width: 350px;
      max-height: 80vh;
      overflow-y: auto;
    }

    .seed-select-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(91, 154, 139, 0.3);
    }

    .seed-select-header h3 {
      color: #5B9A8B;
      font-size: 16px;
      margin: 0;
    }

    .seed-select-close {
      background: none;
      border: none;
      color: #888;
      font-size: 20px;
      cursor: pointer;
      padding: 0;
      line-height: 1;
    }

    .seed-select-close:hover { color: #fff; }

    .seed-select-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .seed-select-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      padding: 12px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .seed-select-item:hover {
      background: rgba(91, 154, 139, 0.2);
      border-color: #5B9A8B;
      transform: translateX(4px);
    }

    .seed-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .seed-name {
      color: #fff;
      font-weight: 500;
      font-size: 13px;
    }

    .seed-tier {
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 4px;
      text-transform: uppercase;
      font-weight: 600;
      display: inline-block;
      width: fit-content;
    }

    .seed-tier.street { background: #6b7280; color: #fff; }
    .seed-tier.dispensary { background: #10b981; color: #fff; }
    .seed-tier.top_shelf { background: #8b5cf6; color: #fff; }

    .seed-plant-btn {
      background: linear-gradient(135deg, #5B9A8B, #4ade80);
      border: none;
      color: #fff;
      padding: 8px 14px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
    }

    .seed-plant-btn:hover {
      transform: scale(1.05);
      box-shadow: 0 0 15px rgba(74, 222, 128, 0.4);
    }

    .seed-select-empty {
      text-align: center;
      color: #888;
      padding: 20px;
      font-size: 13px;
    }

    .seed-select-empty a {
      color: #5B9A8B;
      cursor: pointer;
      text-decoration: underline;
    }

    /* Crib Purchase Modal */
    #crib-purchase-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.85);
      z-index: 2500;
      display: none;
      align-items: center;
      justify-content: center;
    }
    #crib-purchase-modal.visible { display: flex; }

    /* RV Purchase Modal (reuses crib-purchase-box styles) */
    #rv-purchase-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.85);
      z-index: 2500;
      display: none;
      align-items: center;
      justify-content: center;
    }
    #rv-purchase-modal.visible { display: flex; }

    .crib-purchase-box {
      background: linear-gradient(135deg, #1E2D3D 0%, #141E28 100%);
      border: 2px solid #D4A574;
      border-radius: 12px;
      padding: 24px;
      min-width: 300px;
      max-width: 350px;
      text-align: center;
      box-shadow: 0 0 40px rgba(212, 165, 116, 0.3);
    }

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

    .crib-purchase-title {
      color: #D4A574;
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 8px;
    }

    .crib-purchase-price {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(212, 165, 116, 0.2);
      padding: 8px 16px;
      border-radius: 20px;
      margin-bottom: 16px;
      font-size: 18px;
      font-weight: bold;
      color: #f0b429;
    }

    .crib-purchase-features {
      text-align: left;
      margin-bottom: 20px;
      padding: 12px;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 8px;
    }

    .crib-purchase-features li {
      color: #c9d1d9;
      font-size: 13px;
      margin-bottom: 8px;
      list-style: none;
      padding-left: 20px;
      position: relative;
    }

    .crib-purchase-features li:before {
      content: '✓';
      position: absolute;
      left: 0;
      color: #4ade80;
    }

    .crib-purchase-features li:last-child {
      margin-bottom: 0;
    }

    .crib-purchase-buttons {
      display: flex;
      gap: 10px;
    }

    .crib-purchase-btn {
      flex: 1;
      padding: 12px 16px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.2s;
      border: 2px solid transparent;
    }

    .crib-purchase-btn.buy {
      background: linear-gradient(135deg, #4ade80, #22c55e);
      color: #000;
      border-color: #4ade80;
    }

    .crib-purchase-btn.buy:hover {
      transform: scale(1.05);
      box-shadow: 0 0 20px rgba(74, 222, 128, 0.4);
    }

    .crib-purchase-btn.cancel {
      background: rgba(255, 255, 255, 0.1);
      color: #888;
      border-color: rgba(255, 255, 255, 0.2);
    }

    .crib-purchase-btn.cancel:hover {
      background: rgba(239, 68, 68, 0.2);
      border-color: #ef4444;
      color: #ef4444;
    }

    /* Forgot Password Modal */

    /* Slot Machine Modal */
    #slot-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.85);
      z-index: 2500;
      display: none;
      align-items: center;
      justify-content: center;
    }
    #slot-modal.visible { display: flex; }

    .slot-machine {
      background: linear-gradient(180deg, #1E2D3D 0%, #141E28 100%);
      border: 3px solid #D4A574;
      border-radius: 12px;
      padding: 24px;
      text-align: center;
      min-width: 300px;
      box-shadow: 0 0 40px rgba(212, 165, 116, 0.3);
      pointer-events: auto;
      position: relative;
      z-index: 1;
    }

    .slot-title {
      font-family: 'Press Start 2P', monospace;
      font-size: 16px;
      color: #D4A574;
      margin-bottom: 16px;
      text-shadow: 0 0 10px rgba(212, 165, 116, 0.5);
    }

    .slot-credits {
      font-size: 14px;
      color: #4ade80;
      margin-bottom: 16px;
    }

    .slot-reels {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-bottom: 20px;
    }

    .slot-reel {
      width: 60px;
      height: 70px;
      background: #0a0a0f;
      border: 2px solid #3d2550;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36px;
      overflow: hidden;
    }

    .slot-reel.spinning {
      animation: slot-spin 0.1s linear infinite;
    }

    @keyframes slot-spin {
      0% { transform: translateY(-5px); }
      50% { transform: translateY(5px); }
      100% { transform: translateY(-5px); }
    }

    .slot-result {
      font-size: 14px;
      color: #ccc;
      min-height: 20px;
      margin-bottom: 16px;
    }

    .slot-result.win { color: #4ade80; font-weight: bold; }
    .slot-result.lose { color: #f87171; }

    /* Shared bet selector */
    .bet-selector {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-bottom: 16px;
    }

    .bet-btn {
      width: 36px;
      height: 36px;
      border: 2px solid #D4A574;
      border-radius: 50%;
      background: rgba(212, 165, 116, 0.1);
      color: #D4A574;
      font-size: 18px;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .bet-btn:hover {
      background: rgba(212, 165, 116, 0.3);
      transform: scale(1.1);
    }

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

    .bet-label {
      font-family: 'Press Start 2P', monospace;
      font-size: 12px;
      color: #4ade80;
      min-width: 100px;
      text-align: center;
    }

    .bet-amount-display {
      color: #ffd700;
    }

    .slot-buttons {
      display: flex;
      gap: 10px;
      justify-content: center;
    }

    .slot-btn {
      padding: 10px 20px;
      border: none;
      border-radius: 6px;
      font-family: 'Nunito', Arial, sans-serif;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      pointer-events: auto;
      position: relative;
      z-index: 10;
    }

    .slot-btn.spin {
      background: linear-gradient(135deg, #D4A574, #e76f51);
      color: white;
    }

    .slot-btn.spin:hover { transform: scale(1.05); }
    .slot-btn.spin:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

    .slot-btn.close {
      background: rgba(255, 255, 255, 0.1);
      color: #aaa;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .slot-btn.close:hover { background: rgba(255, 255, 255, 0.2); }

    .slot-payouts {
      margin-top: 16px;
      padding-top: 12px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      font-size: 11px;
      color: rgba(255, 255, 255, 0.6);
    }

    .payout-title {
      font-weight: 600;
      color: rgba(255, 255, 255, 0.8);
      margin-bottom: 6px;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .payout-row {
      padding: 2px 0;
    }

    /* Dice Game Modal */
    #dice-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.85);
      z-index: 2500;
      display: none;
      align-items: center;
      justify-content: center;
    }
    #dice-modal.visible { display: flex; }

    .dice-game {
      background: linear-gradient(180deg, #1E2D3D 0%, #141E28 100%);
      border: 3px solid #5B9A8B;
      border-radius: 12px;
      padding: 24px;
      text-align: center;
      min-width: 300px;
      box-shadow: 0 0 40px rgba(91, 154, 139, 0.3);
    }

    .dice-title {
      font-family: 'Press Start 2P', monospace;
      font-size: 16px;
      color: #5B9A8B;
      margin-bottom: 16px;
      text-shadow: 0 0 10px rgba(91, 154, 139, 0.5);
    }

    .dice-credits {
      font-size: 14px;
      color: #5B9A8B;
      margin-bottom: 16px;
    }

    .dice-display {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-bottom: 16px;
    }

    .dice {
      width: 70px;
      height: 70px;
      background: #0a0a0f;
      border: 2px solid #3d2550;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 48px;
    }

    .dice.rolling {
      animation: dice-roll 0.1s linear infinite;
    }

    @keyframes dice-roll {
      0% { transform: rotate(-10deg) scale(1.05); }
      50% { transform: rotate(10deg) scale(0.95); }
      100% { transform: rotate(-10deg) scale(1.05); }
    }

    .dice-info {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.6);
      margin-bottom: 12px;
    }

    .dice-result {
      font-size: 14px;
      color: #ccc;
      min-height: 20px;
      margin-bottom: 16px;
    }

    .dice-result.win { color: #4ade80; font-weight: bold; }

    .dice-buttons {
      display: flex;
      gap: 10px;
      justify-content: center;
      margin-bottom: 10px;
    }

    .dice-btn {
      padding: 10px 20px;
      border: none;
      border-radius: 6px;
      font-family: 'Nunito', Arial, sans-serif;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
    }

    .dice-btn.low {
      background: linear-gradient(135deg, #5B9A8B, #4A8A7A);
      color: white;
    }

    .dice-btn.high {
      background: linear-gradient(135deg, #E07B67, #C96B57);
      color: white;
    }

    .dice-btn.low:hover, .dice-btn.high:hover { transform: scale(1.05); }
    .dice-btn.low:disabled, .dice-btn.high:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

    .dice-btn.close {
      background: rgba(255, 255, 255, 0.1);
      color: #aaa;
      border: 1px solid rgba(255, 255, 255, 0.2);
      margin-top: 8px;
    }

    .dice-btn.close:hover { background: rgba(255, 255, 255, 0.2); }

    .dice-payouts {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      font-size: 11px;
      color: rgba(255, 255, 255, 0.6);
    }

    /* Roulette Game Modal */
    #roulette-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.85);
      z-index: 2500;
      display: none;
      align-items: center;
      justify-content: center;
    }
    #roulette-modal.visible { display: flex; }

    .roulette-game {
      background: linear-gradient(180deg, #1a3d2a 0%, #0d1f15 100%);
      border: 3px solid #ffd700;
      border-radius: 12px;
      padding: 24px;
      text-align: center;
      min-width: 320px;
      box-shadow: 0 0 40px rgba(255, 215, 0, 0.3);
    }

    .roulette-title {
      font-family: 'Press Start 2P', monospace;
      font-size: 16px;
      color: #ffd700;
      margin-bottom: 12px;
      text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    }

    .roulette-credits {
      font-size: 14px;
      color: #4ade80;
      margin-bottom: 16px;
    }

    .roulette-wheel-container {
      position: relative;
      width: 120px;
      height: 120px;
      margin: 0 auto 16px;
    }

    .roulette-wheel {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: conic-gradient(
        #dc2626 0deg 9.47deg, #1f2937 9.47deg 18.94deg,
        #dc2626 18.94deg 28.42deg, #1f2937 28.42deg 37.89deg,
        #dc2626 37.89deg 47.36deg, #1f2937 47.36deg 56.84deg,
        #dc2626 56.84deg 66.31deg, #1f2937 66.31deg 75.78deg,
        #dc2626 75.78deg 85.26deg, #1f2937 85.26deg 94.73deg,
        #dc2626 94.73deg 104.2deg, #1f2937 104.2deg 113.68deg,
        #dc2626 113.68deg 123.15deg, #1f2937 123.15deg 132.63deg,
        #dc2626 132.63deg 142.1deg, #1f2937 142.1deg 151.57deg,
        #dc2626 151.57deg 161.05deg, #1f2937 161.05deg 170.52deg,
        #16a34a 170.52deg 180deg,
        #1f2937 180deg 189.47deg, #dc2626 189.47deg 198.94deg,
        #1f2937 198.94deg 208.42deg, #dc2626 208.42deg 217.89deg,
        #1f2937 217.89deg 227.36deg, #dc2626 227.36deg 236.84deg,
        #1f2937 236.84deg 246.31deg, #dc2626 246.31deg 255.78deg,
        #1f2937 255.78deg 265.26deg, #dc2626 265.26deg 274.73deg,
        #1f2937 274.73deg 284.2deg, #dc2626 284.2deg 293.68deg,
        #1f2937 293.68deg 303.15deg, #dc2626 303.15deg 312.63deg,
        #1f2937 312.63deg 322.1deg, #dc2626 322.1deg 331.57deg,
        #1f2937 331.57deg 341.05deg, #dc2626 341.05deg 350.52deg,
        #16a34a 350.52deg 360deg
      );
      border: 4px solid #ffd700;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), inset 0 0 30px rgba(0, 0, 0, 0.3);
    }

    .wheel-inner {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 40px;
      height: 40px;
      background: radial-gradient(circle, #3d3d3d 0%, #1a1a1a 100%);
      border-radius: 50%;
      border: 2px solid #ffd700;
    }

    .roulette-wheel.spinning {
      animation: wheel-spin 2s cubic-bezier(0.17, 0.67, 0.12, 0.99) forwards;
    }

    @keyframes wheel-spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(var(--wheel-rotation, 1800deg)); }
    }

    .roulette-ball {
      position: absolute;
      top: 8px;
      left: 50%;
      transform: translateX(-50%);
      width: 10px;
      height: 10px;
      background: radial-gradient(circle at 30% 30%, #fff, #ccc);
      border-radius: 50%;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }

    .roulette-ball.spinning {
      animation: ball-spin 2s cubic-bezier(0.17, 0.67, 0.12, 0.99) forwards;
    }

    @keyframes ball-spin {
      0% { transform: translateX(-50%) rotate(0deg) translateY(0); }
      50% { transform: translateX(-50%) rotate(calc(var(--ball-rotation, -1440deg) / 2)) translateY(5px); }
      100% { transform: translateX(-50%) rotate(var(--ball-rotation, -1440deg)) translateY(0); }
    }

    .roulette-result-display {
      font-size: 32px;
      font-weight: bold;
      color: #fff;
      margin-bottom: 8px;
      padding: 8px 16px;
      border-radius: 8px;
      background: #1a1a1a;
      display: inline-block;
    }

    .roulette-result-display.red { background: #dc2626; }
    .roulette-result-display.black { background: #1f2937; }
    .roulette-result-display.green { background: #16a34a; }

    .roulette-result {
      font-size: 14px;
      color: #ccc;
      min-height: 20px;
      margin-bottom: 16px;
    }

    .roulette-result.win { color: #4ade80; font-weight: bold; }

    .roulette-buttons {
      display: flex;
      gap: 8px;
      justify-content: center;
      margin-bottom: 8px;
    }

    .roulette-btn {
      padding: 10px 16px;
      border: none;
      border-radius: 6px;
      font-family: 'Nunito', Arial, sans-serif;
      font-weight: 600;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .roulette-btn.red {
      background: #dc2626;
      color: white;
    }

    .roulette-btn.black {
      background: #1f2937;
      color: white;
      border: 1px solid #4b5563;
    }

    .roulette-btn.green {
      background: #16a34a;
      color: white;
    }

    .roulette-btn:hover { transform: scale(1.05); }
    .roulette-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

    .roulette-btn.close {
      background: rgba(255, 255, 255, 0.1);
      color: #aaa;
      border: 1px solid rgba(255, 255, 255, 0.2);
      margin-top: 8px;
    }

    .roulette-info {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.5);
      margin-bottom: 8px;
    }

    /* Blackjack Game Modal */
    #blackjack-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.85);
      z-index: 2500;
      display: none;
      align-items: center;
      justify-content: center;
    }
    #blackjack-modal.visible { display: flex; }

    .blackjack-game {
      background: linear-gradient(180deg, #0f4a2e 0%, #0a2e1c 100%);
      border: 3px solid #ffd700;
      border-radius: 12px;
      padding: 20px;
      text-align: center;
      min-width: 360px;
      box-shadow: 0 0 40px rgba(255, 215, 0, 0.3);
    }

    .blackjack-title {
      font-family: 'Press Start 2P', monospace;
      font-size: 16px;
      color: #ffd700;
      margin-bottom: 10px;
      text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    }

    .blackjack-credits {
      font-size: 14px;
      color: #4ade80;
      margin-bottom: 16px;
    }

    .blackjack-table {
      background: #1a5b38;
      border-radius: 100px 100px 8px 8px;
      padding: 20px;
      margin-bottom: 12px;
      border: 3px solid #2d7a4d;
    }

    .hand-area {
      margin-bottom: 16px;
    }

    .hand-label {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.7);
      margin-bottom: 8px;
      font-weight: 600;
    }

    .cards-container {
      display: flex;
      justify-content: center;
      gap: 8px;
      min-height: 70px;
      flex-wrap: wrap;
    }

    .playing-card {
      width: 45px;
      height: 65px;
      background: linear-gradient(180deg, #fff 0%, #f0f0f0 100%);
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
      position: relative;
    }

    .playing-card.red { color: #dc2626; }
    .playing-card.black { color: #1f2937; }

    .playing-card.hidden-card {
      background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 50%, #1e40af 100%);
      color: #fff;
      font-size: 24px;
    }

    .card-value {
      font-size: 16px;
      line-height: 1;
    }

    .card-suit {
      font-size: 20px;
      line-height: 1;
    }

    .blackjack-result {
      font-size: 16px;
      color: #ccc;
      min-height: 24px;
      margin-bottom: 12px;
      font-weight: 600;
    }

    .blackjack-result.win { color: #4ade80; }
    .blackjack-result.lose { color: #f87171; }

    .blackjack-buttons {
      display: flex;
      gap: 8px;
      justify-content: center;
      margin-bottom: 10px;
    }

    .blackjack-btn {
      padding: 10px 18px;
      border: none;
      border-radius: 6px;
      font-family: 'Nunito', Arial, sans-serif;
      font-weight: 600;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .blackjack-btn.deal {
      background: linear-gradient(135deg, #ffd700, #f59e0b);
      color: #1a1a1a;
    }

    .blackjack-btn.hit {
      background: linear-gradient(135deg, #22c55e, #16a34a);
      color: white;
    }

    .blackjack-btn.stand {
      background: linear-gradient(135deg, #ef4444, #dc2626);
      color: white;
    }

    .blackjack-btn:hover { transform: scale(1.05); }
    .blackjack-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

    .blackjack-btn.close {
      background: rgba(255, 255, 255, 0.1);
      color: #aaa;
      border: 1px solid rgba(255, 255, 255, 0.2);
      margin-top: 8px;
    }

    .blackjack-payouts {
      font-size: 10px;
      color: rgba(255, 255, 255, 0.5);
      margin-bottom: 8px;
    }

    /* ============================================ */
    /* KUSHVILLE GROW SYSTEM STYLES */
    /* ============================================ */

    /* Grow Modal */
    #grow-modal {
      display: none;
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0, 0, 0, 0.8);
      z-index: 3000;
      justify-content: center;
      align-items: center;
    }
    #grow-modal.visible { display: flex; }

    .grow-panel {
      background: linear-gradient(135deg, #1E2D3D 0%, #141E28 100%);
      border: 2px solid #5B9A8B;
      border-radius: 16px;
      width: 400px;
      max-width: 95vw;
      max-height: 80vh;
      overflow: hidden;
      box-shadow: 0 0 40px rgba(91, 154, 139, 0.3);
      animation: modal-pop-in 0.15s ease-out;
    }

    .grow-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
      background: rgba(91, 154, 139, 0.1);
      border-bottom: 1px solid rgba(91, 154, 139, 0.3);
    }

    .grow-title {
      font-size: 18px;
      font-weight: bold;
      color: #5B9A8B;
    }

    .grow-close {
      background: none;
      border: none;
      color: #888;
      font-size: 24px;
      cursor: pointer;
    }
    .grow-close:hover { color: #fff; }

    .grow-tabs {
      display: flex;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .grow-tab {
      flex: 1;
      padding: 12px;
      background: none;
      border: none;
      color: #888;
      cursor: pointer;
      transition: all 0.2s;
    }
    .grow-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
    .grow-tab.active {
      color: #5B9A8B;
      background: rgba(91, 154, 139, 0.1);
      border-bottom: 2px solid #5B9A8B;
    }

    .grow-content {
      padding: 16px;
      max-height: 400px;
      overflow-y: auto;
    }

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

    .plants-info {
      display: flex;
      justify-content: space-between;
      margin-bottom: 12px;
      font-size: 12px;
      color: #888;
    }

    .plants-grid {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .plant-card {
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(74, 222, 128, 0.3);
      border-radius: 8px;
      padding: 12px;
    }

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

    .plant-name {
      font-weight: bold;
      color: #4ade80;
    }

    .plant-tier {
      font-size: 11px;
      padding: 2px 8px;
      border-radius: 4px;
      background: rgba(74, 222, 128, 0.2);
      color: #4ade80;
    }
    .plant-tier.dispensary { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }
    .plant-tier.top_shelf { background: rgba(168, 85, 247, 0.2); color: #a855f7; }

    .plant-progress {
      height: 8px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 4px;
      overflow: hidden;
      margin-bottom: 8px;
    }

    .plant-progress-bar {
      height: 100%;
      background: linear-gradient(90deg, #4ade80, #22c55e);
      transition: width 0.3s;
    }

    .plant-stats {
      display: flex;
      gap: 16px;
      font-size: 11px;
      color: #888;
      margin-bottom: 8px;
    }

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

    .plant-btn {
      flex: 1;
      padding: 8px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 12px;
      transition: all 0.2s;
    }

    .plant-btn.water {
      background: #3b82f6;
      color: white;
    }
    .plant-btn.water:hover { background: #2563eb; }
    .plant-btn.water:disabled { background: #1e40af; opacity: 0.5; cursor: not-allowed; }

    .plant-btn.light {
      background: #eab308;
      color: #1a1425;
    }
    .plant-btn.light:hover { background: #ca8a04; }
    .plant-btn.light:disabled { background: #854d0e; opacity: 0.5; cursor: not-allowed; }

    .plant-btn.harvest {
      background: #4ade80;
      color: #1a1425;
    }
    .plant-btn.harvest:hover { background: #22c55e; }

    .plant-empty, .seeds-empty, .harvests-empty {
      text-align: center;
      color: #666;
      padding: 40px;
    }

    /* Seeds List */
    .seeds-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .seed-card {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(74, 222, 128, 0.2);
      border-radius: 8px;
      padding: 12px;
    }

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

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

    .seed-name { font-weight: bold; color: #fff; }

    .seed-tier {
      font-size: 10px;
      color: #888;
    }

    .seed-plant-btn {
      padding: 8px 16px;
      background: #4ade80;
      color: #1a1425;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-weight: bold;
    }
    .seed-plant-btn:hover { background: #22c55e; }

    /* Harvests List */
    .harvests-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 12px;
    }

    .harvest-card {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(234, 179, 8, 0.3);
      border-radius: 8px;
      padding: 12px;
    }

    .harvest-info { flex: 1; }
    .harvest-name { font-weight: bold; color: #fff; }
    .harvest-details { font-size: 11px; color: #888; }
    .harvest-value { color: #eab308; font-weight: bold; }

    .sell-all-btn {
      width: 100%;
      padding: 12px;
      background: linear-gradient(135deg, #eab308, #ca8a04);
      color: #1a1425;
      border: none;
      border-radius: 8px;
      font-weight: bold;
      cursor: pointer;
    }
    .sell-all-btn:hover { filter: brightness(1.1); }

    /* Shop Modal */
    #shop-modal {
      display: none;
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0, 0, 0, 0.8);
      z-index: 3000;
      justify-content: center;
      align-items: center;
    }
    #shop-modal.visible { display: flex; }

    .shop-panel {
      background: linear-gradient(135deg, #1a1425 0%, #2d1f3d 100%);
      border: 2px solid #f472b6;
      border-radius: 16px;
      width: 420px;
      max-width: 95vw;
      max-height: 80vh;
      overflow: hidden;
      box-shadow: 0 0 40px rgba(244, 114, 182, 0.3);
      animation: modal-pop-in 0.15s ease-out;
    }

    .shop-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
      background: rgba(244, 114, 182, 0.1);
      border-bottom: 1px solid rgba(244, 114, 182, 0.3);
    }

    .shop-title {
      font-size: 18px;
      font-weight: bold;
      color: #f472b6;
    }

    .shop-bucks {
      color: #eab308;
      font-weight: bold;
    }

    .shop-close {
      background: none;
      border: none;
      color: #888;
      font-size: 24px;
      cursor: pointer;
    }
    .shop-close:hover { color: #fff; }

    .shop-items {
      padding: 16px;
      max-height: 450px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .shop-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      padding: 12px;
      transition: all 0.2s;
    }
    .shop-item:hover { border-color: rgba(244, 114, 182, 0.5); }
    .shop-item.mystery { border-color: rgba(168, 85, 247, 0.5); background: rgba(168, 85, 247, 0.1); }

    .shop-item-info { flex: 1; }
    .shop-item-name { font-weight: bold; color: #fff; }
    .shop-item-desc { font-size: 11px; color: #888; margin-top: 2px; }

    .shop-item-buy {
      padding: 8px 16px;
      background: #f472b6;
      color: #1a1425;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-weight: bold;
    }
    .shop-item-buy:hover { background: #ec4899; }

    /* Streak Modal */
    #streak-modal {
      display: none;
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0, 0, 0, 0.8);
      z-index: 3000;
      justify-content: center;
      align-items: center;
    }
    #streak-modal.visible { display: flex; }

    .streak-panel {
      background: linear-gradient(135deg, #1a1425 0%, #2d1f3d 100%);
      border: 2px solid #f97316;
      border-radius: 16px;
      width: 340px;
      max-width: 95vw;
      overflow: hidden;
      box-shadow: 0 0 40px rgba(249, 115, 22, 0.3);
      animation: modal-pop-in 0.15s ease-out;
    }

    .streak-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
      background: rgba(249, 115, 22, 0.1);
      border-bottom: 1px solid rgba(249, 115, 22, 0.3);
    }

    .streak-title {
      font-size: 18px;
      font-weight: bold;
      color: #f97316;
    }

    .streak-close {
      background: none;
      border: none;
      color: #888;
      font-size: 24px;
      cursor: pointer;
    }
    .streak-close:hover { color: #fff; }

    .streak-content {
      padding: 20px;
      text-align: center;
    }

    .streak-count {
      font-size: 32px;
      font-weight: bold;
      color: #f97316;
      margin-bottom: 8px;
    }

    .streak-reward {
      color: #eab308;
      margin-bottom: 16px;
    }

    .streak-days {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-bottom: 20px;
    }

    .streak-day {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      color: #666;
      font-size: 12px;
    }
    .streak-day.completed {
      background: #4ade80;
      color: #1a1425;
    }
    .streak-day.current {
      background: #f97316;
      color: #fff;
      box-shadow: 0 0 10px rgba(249, 115, 22, 0.5);
    }

    .streak-claim-btn {
      width: 100%;
      padding: 14px;
      background: linear-gradient(135deg, #f97316, #ea580c);
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
    }
    .streak-claim-btn:hover { filter: brightness(1.1); }
    .streak-claim-btn:disabled {
      background: #444;
      cursor: not-allowed;
    }

    /* Connection Status */
    #connection-status {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(42, 27, 61, 0.95);
      padding: 40px 60px;
      border-radius: 12px;
      border: 1px solid rgba(212, 165, 116, 0.2);
      text-align: center;
      z-index: 3000;
      display: none;
      max-width: 90vw;
      box-sizing: border-box;
    }

    #connection-status.visible { display: block; }

    #connection-status h3 {
      color: var(--turquoise);
      font-size: 18px;
      margin-bottom: 12px;
      font-weight: 600;
    }

    #connection-status p {
      color: rgba(255,255,255,0.6);
      font-size: 13px;
      line-height: 1.4;
    }

    /* Error state - hide spinner, show error styling */
    #connection-status.error .spinner { display: none; }
    #connection-status.error h3 { color: #f87171; }
    #connection-status.error { border-color: rgba(248, 113, 113, 0.3); }
    #connection-status.error::before {
      content: '⚠️';
      display: block;
      font-size: 32px;
      margin-bottom: 16px;
    }

    /* Mobile responsive */
    @media (max-width: 480px) {
      #connection-status {
        padding: 28px 24px;
        width: calc(100vw - 40px);
        max-width: 320px;
      }
      #connection-status h3 { font-size: 16px; }
      #connection-status p { font-size: 12px; }
      #connection-status.error::before { font-size: 28px; margin-bottom: 12px; }
    }

    .spinner {
      width: 40px;
      height: 40px;
      border: 3px solid rgba(212, 165, 116, 0.2);
      border-top-color: var(--turquoise);
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin: 0 auto 20px;
    }

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

    /* ========================================= */
    /* RESPONSIVE STYLES                          */
    /* ========================================= */

    /* Tablet / Narrow Desktop */
    @media (max-width: 1200px) {
      #lobby-dashboard {
        grid-template-columns: 260px 1fr 240px;
      }
    }

    @media (max-width: 1024px) {
      #lobby-dashboard {
        grid-template-columns: 240px 1fr 220px;
      }
      #emote-panel {
        padding: 10px 14px;
        gap: 8px;
      }
      .emote-btn {
        width: 42px;
        height: 42px;
      }
    }

    /* Small Tablet */
    @media (max-width: 900px) {
      #lobby-dashboard {
        grid-template-columns: 1fr 1fr;
      }
      #lobby-right {
        grid-column: span 2;
        display: flex;
        gap: 8px;
      }
      #lobby-right > .panel {
        flex: 1;
        min-width: 0;
      }
      #lobby-center { grid-column: span 1; }
    }

    /* Mobile */
    @media (max-width: 768px) {
      /* Prevent touch zoom */
      html { touch-action: manipulation; }

      /* Allow lobby to scroll on mobile - use dvh for iOS Safari compatibility */
      #hotel-view {
        height: 100vh; /* Fallback */
        height: 100dvh; /* Dynamic viewport height - accounts for iOS browser chrome */
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
      }

      /* Auth modal mobile - handled in separate media query above */
      .auth-container { width: 90%; max-width: 320px; padding: 20px; }
      .auth-title { font-size: 20px; }
      .auth-input { padding: 12px; font-size: 16px; } /* Prevent iOS zoom */

      /* Lobby topbar mobile - TWO ROW layout for breathing room */
      #lobby-topbar {
        flex-wrap: wrap;
        justify-content: center;
        padding: 6px 10px;
        gap: 0;
        flex-shrink: 0;
      }
      /* Row 1: back arrow + logo + help */
      .change-block-btn {
        position: static;
        padding: 5px 10px;
        font-size: 12px;
        order: 1;
      }
      .topbar-left {
        flex: 1;
        min-width: 0;
        gap: 6px;
        justify-content: center;
        order: 2;
      }
      .topbar-logo { font-size: 17px; letter-spacing: 3px; }
      .topbar-help {
        width: 24px;
        height: 24px;
        font-size: 12px;
        order: 3;
      }
      /* Row 2: user info + volume + logout — wraps to second line */
      .topbar-right {
        position: static;
        width: 100%;
        justify-content: center;
        gap: 10px;
        order: 4;
        padding-top: 6px;
        margin-top: 6px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        flex-wrap: nowrap;
      }
      /* Compact volume control on mobile */
      #volume-control {
        display: flex;
        gap: 4px;
      }
      #volume-slider {
        width: 44px;
      }
      .volume-icon {
        font-size: 13px;
      }
      /* User bar mobile - compact but readable */
      #user-bar {
        gap: 6px;
      }
      #user-info {
        padding: 5px 10px;
        gap: 6px;
      }
      #user-name {
        font-size: 12px;
      }
      .user-bucks-separator {
        font-size: 11px;
      }
      #user-credits {
        font-size: 12px;
      }
      #logout-btn {
        padding: 5px 10px;
        font-size: 11px;
      }

      #lobby-dashboard {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 8px;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        flex: 1;
        min-height: 0; /* Allow flex item to shrink below content */
      }

      /* Reset max-height constraints on mobile for proper scrolling */
      #lobby-left, #lobby-center, #lobby-right {
        max-height: none;
        overflow: visible;
        flex-shrink: 0;
      }

      #lobby-left { order: 1; } /* Rooms first on mobile */
      #lobby-center { order: 2; }
      #lobby-right {
        order: 3;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      /* Rooms panel scrollable on mobile */
      .rooms-panel {
        max-height: none;
      }
      #rooms-grid {
        max-height: 45vh;
        overflow-y: auto;
      }

      /* Show activity feed on mobile but compact */
      .activity-panel { max-height: 150px; overflow: hidden; }
      #activity-feed { max-height: 100px; overflow-y: auto; }
      .news-panel { max-height: 200px; overflow-y: auto; }

      .panel-header { padding: 10px 12px; font-size: 12px; }
      .room-card { padding: 8px 10px; }
      .room-icon { font-size: 18px; width: 24px; }
      .room-name { font-size: 13px; }
      .room-desc { font-size: 11px; }
      .neon-title { font-size: 28px; letter-spacing: 4px; }
      .welcome-content { padding: 15px; }

      /* Status bar on mobile - static, flows at bottom of content (not sticky) */
      #lobby-statusbar {
        position: relative;
        padding: 6px 10px;
        padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
        font-size: 9px;
        flex-shrink: 0;
        background: rgba(0, 0, 0, 0.95);
        z-index: 10;
      }

      /* Room UI mobile */
      #game-bottom-bar {
        flex-direction: column;
        gap: 8px;
        padding: 0 10px 10px;
      }
      #bottom-toolbar {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        padding: 8px 12px;
      }
      #bottom-toolbar .toolbar-btn {
        width: 40px;
        height: 40px;
      }
      #chat-container {
        max-width: 100%;
        width: 100%;
      }
      #chat-input {
        width: 100%;
        font-size: 16px;
        padding: 12px;
      }
      #chat-log {
        width: 100%;
      }
      #chat-input-wrapper {
        width: 100%;
      }

      /* Emote panel - position at TOP so character is visible while emoting */
      #emote-panel {
        bottom: auto;
        top: 50px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        padding: 8px 10px;
        gap: 4px;
        min-width: auto;
        max-width: 90vw;
        background: rgba(20, 30, 40, 0.95);
      }
      #emote-panel .panel-header {
        padding: 4px 8px;
        margin-bottom: 6px;
      }
      #emote-panel .panel-header h3 {
        font-size: 11px;
      }
      .emote-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
      }
      .emote-btn {
        width: 36px;
        height: 36px;
        font-size: 18px;
      }

      /* Furniture panel mobile */
      #furniture-panel {
        right: 8px;
        top: auto;
        bottom: 150px;
        padding: 8px;
      }
      .furni-btn { width: 36px; height: 36px; font-size: 16px; }

      /* Users panel mobile */
      #users-panel {
        left: 8px;
        right: auto;
        max-width: 140px;
        max-height: 25vh;
        font-size: 11px;
      }
      #users-panel h4 { font-size: 10px; }

      /* Plant context menu mobile */
      #plant-context-menu {
        left: 10px !important;
        right: 10px !important;
        top: auto !important;
        bottom: 120px !important;
        transform: none !important;
        max-width: calc(100vw - 20px);
        min-width: auto;
      }
      .plant-context-actions {
        flex-wrap: wrap;
      }
      .plant-action-btn {
        min-width: 60px;
        padding: 10px 8px;
        font-size: 12px;
      }

      /* Seed selection modal mobile */
      .seed-select-box {
        margin: 10px;
        max-width: calc(100vw - 20px);
        max-height: 70vh;
      }
      .seed-select-item {
        padding: 10px;
      }
      .seed-name {
        font-size: 12px;
      }

      /* Slot machine mobile */
      .slot-machine { padding: 16px; min-width: 280px; }
      .slot-reel { width: 50px; height: 60px; font-size: 28px; }

      /* ProfileCard mobile - position at bottom instead of side */
      #profile-card {
        right: 10px !important;
        left: 10px !important;
        top: auto !important;
        bottom: 120px !important;
        transform: none !important;
        width: auto !important;
        max-width: calc(100vw - 20px);
      }
      #profile-card .pc-btn {
        min-height: 40px;
        font-size: 12px;
      }

      /* Report modal mobile - full width */
      #report-modal {
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-width: calc(100vw - 20px);
        transform: translate(0, -50%) !important;
      }
      #report-modal textarea {
        font-size: 16px; /* Prevent iOS zoom */
      }
      #report-modal .rm-btn {
        min-height: 44px;
        font-size: 14px;
      }
    }

    @media (max-width: 480px) {
      .hotel-title { font-size: 22px; }
      .rooms-panel { max-height: 50vh; }
      .room-card { padding: 8px; }
      .room-name { font-size: 13px; }

      /* Topbar ultra-compact: tighter second row */
      .topbar-logo { font-size: 15px; letter-spacing: 2px; }
      .topbar-right { gap: 6px; }
      #volume-slider { width: 36px; }
      #user-info { padding: 4px 8px; gap: 4px; }
      #user-name { font-size: 11px; }
      #user-credits { font-size: 11px; }
      .user-bucks-separator { font-size: 10px; }
      #logout-btn { padding: 4px 8px; font-size: 10px; }

      /* Auth modal - even smaller screens */
      #auth-modal { padding: 15px; padding-top: 40px; }
      .auth-box { padding: 20px 16px; }
      .auth-box h2 { font-size: 28px; }
      .auth-logo-overlay h1 { font-size: 28px; }

      /* Room top bar - compact mode for tiny screens */
      #room-ui { padding: 6px; gap: 4px; }
      #back-btn { padding: 6px 10px; font-size: 9px; }
      #room-name-display {
        padding: 6px 8px;
        font-size: 9px;
        max-width: 90px;
      }
      #room-bucks { padding: 6px 8px; font-size: 9px; }
      #user-count { padding: 6px 8px; font-size: 9px; }
      #zoom-controls { display: none; } /* Hide zoom on tiny screens - use pinch */

      /* Even smaller emotes on tiny screens - keep at top */
      .emote-btn {
        width: 32px;
        height: 32px;
        font-size: 16px;
      }
      #emote-panel {
        gap: 3px;
        padding: 6px 8px;
        top: 45px;
      }
      #emote-panel .panel-header {
        padding: 3px 6px;
        margin-bottom: 4px;
      }

      /* Toolbar compact */
      .toolbar-btn {
        min-width: 40px;
        min-height: 40px;
      }
      .toolbar-icon { width: 20px; height: 20px; }
    }

    /* Touch-friendly tap targets */
    @media (pointer: coarse) {
      .room-card, #room-controls button, .furni-item, .slot-btn {
        min-height: 44px;
      }

      /* Larger touch targets for game UI */
      .toolbar-btn, .emote-btn, .furni-btn {
        min-width: 44px;
        min-height: 44px;
      }

      /* Visual touch feedback */
      .room-card:active,
      .toolbar-btn:active,
      .emote-btn:active,
      .furni-btn:active,
      .auth-btn:active {
        transform: scale(0.95);
        opacity: 0.8;
      }

      /* Prevent text selection on touch */
      .toolbar-btn, .emote-btn, .furni-btn, .room-card {
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
      }

      /* Larger furniture context menu buttons for touch */
      .furni-context-btn {
        min-height: 48px;
        font-size: 16px;
        padding: 12px 16px;
      }

      #furni-context-menu {
        min-width: 180px;
      }

      /* Larger zoom controls for touch */
      #room-controls button {
        min-width: 44px;
        min-height: 44px;
        font-size: 20px;
      }

      /* Edit button more visible on touch devices when available */
      #btn-edit-furni[style*="inline"], #btn-edit-furni:not([style*="none"]) {
        background: var(--purple);
        border: 2px solid var(--neon-pink);
      }
    }

    /* Prevent iOS rubber-banding on game view */
    #room-view {
      overscroll-behavior: none;
      -webkit-overflow-scrolling: auto;
    }

    /* Ensure canvas is touch-responsive */
    #room-view canvas {
      touch-action: none;
    }
/* Additional styles (modals, components) */

    /* Confirm Dialog */
    .confirm-dialog-overlay {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0, 0, 0, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 6000;
    }
    .confirm-dialog-overlay.hidden { display: none; }
    .confirm-dialog-box {
      background: rgba(30, 45, 61, 0.98);
      border: 2px solid rgba(91, 154, 139, 0.5);
      border-radius: 12px;
      padding: 24px;
      min-width: 280px;
      max-width: 360px;
      text-align: center;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    }
    .confirm-dialog-box h3 {
      margin: 0 0 12px 0;
      font-size: 18px;
      color: var(--coral, #E07B67);
    }
    .confirm-dialog-box p {
      margin: 0 0 20px 0;
      color: #ccc;
      font-size: 14px;
      line-height: 1.5;
    }
    .confirm-buttons {
      display: flex;
      gap: 12px;
      justify-content: center;
    }
    .confirm-btn {
      padding: 10px 20px;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
    }
    .confirm-btn-primary {
      background: var(--coral, #E07B67);
      color: #fff;
    }
    .confirm-btn-primary:hover {
      background: #F09080;
      transform: translateY(-1px);
    }
    .confirm-btn-secondary {
      background: rgba(255, 255, 255, 0.1);
      color: #aaa;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .confirm-btn-secondary:hover {
      background: rgba(255, 255, 255, 0.15);
      color: #fff;
    }

    /* Mod Context Menu */
    .mod-context-menu {
      display: none;
      position: fixed;
      background: rgba(30, 45, 61, 0.98);
      border: 1px solid rgba(224, 123, 103, 0.5);
      border-radius: 8px;
      min-width: 160px;
      z-index: 5000;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
      overflow: hidden;
    }
    .mod-context-menu.active { display: block; }
    .mod-menu-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 12px;
      background: rgba(224, 123, 103, 0.2);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .mod-menu-name {
      font-weight: 600;
      color: #FF6B6B;
      font-size: 13px;
    }
    .mod-menu-close {
      cursor: pointer;
      color: #888;
      font-size: 18px;
      line-height: 1;
    }
    .mod-menu-close:hover { color: #fff; }
    .mod-menu-item {
      display: block;
      width: 100%;
      padding: 10px 12px;
      background: none;
      border: none;
      color: #fff;
      font-size: 13px;
      text-align: left;
      cursor: pointer;
      transition: background 0.15s;
    }
    .mod-menu-item:hover { background: rgba(255, 255, 255, 0.1); }
    .mod-menu-item.mod-danger { color: #ef4444; }
    .mod-menu-item.mod-danger:hover { background: rgba(239, 68, 68, 0.2); }

    /* Admin Link - subtle text style in statusbar */
    .admin-link {
      color: rgba(255, 107, 107, 0.7);
      text-decoration: none;
      font-size: 11px;
      font-weight: 500;
      transition: color 0.2s;
    }
    .admin-link:hover {
      color: #FF6B6B;
    }

    /* ========================================= */
    /* FURNITURE CATALOG MODAL                  */
    /* ========================================= */
    #catalog-modal {
      display: none;
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0, 0, 0, 0.85);
      z-index: 3000;
      justify-content: center;
      align-items: center;
    }
    #catalog-modal.visible { display: flex; }

    .catalog-container {
      background: linear-gradient(135deg, #1a1425 0%, #2d1f3d 100%);
      border: 2px solid var(--peach);
      border-radius: 16px;
      width: 700px;
      max-width: 95vw;
      max-height: 85vh;
      overflow: hidden;
      box-shadow: 0 0 60px rgba(212, 165, 116, 0.2),
                  0 0 100px rgba(224, 123, 103, 0.1);
      display: flex;
      flex-direction: column;
      animation: modal-pop-in 0.15s ease-out;
    }

    .catalog-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
      background: linear-gradient(90deg, rgba(212, 165, 116, 0.15) 0%, rgba(224, 123, 103, 0.15) 100%);
      border-bottom: 1px solid rgba(212, 165, 116, 0.3);
    }

    .catalog-title {
      font-family: 'Righteous', cursive;
      font-size: 20px;
      color: var(--peach);
      margin: 0;
      text-shadow: 0 0 10px rgba(212, 165, 116, 0.5);
    }

    .catalog-close {
      background: none;
      border: none;
      color: #888;
      font-size: 28px;
      cursor: pointer;
      line-height: 1;
      padding: 0;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      transition: all 0.2s;
    }
    .catalog-close:hover {
      color: #fff;
      background: rgba(255, 255, 255, 0.1);
    }

    .catalog-tabs {
      display: flex;
      background: rgba(0, 0, 0, 0.3);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    .catalog-tab {
      flex: 1;
      min-width: 100px;
      padding: 12px 16px;
      background: none;
      border: none;
      color: #888;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      border-bottom: 2px solid transparent;
    }
    .catalog-tab:hover {
      color: #fff;
      background: rgba(255, 255, 255, 0.05);
    }
    .catalog-tab.active {
      color: var(--peach);
      background: rgba(212, 165, 116, 0.1);
      border-bottom-color: var(--peach);
    }
    .catalog-tab .tab-icon {
      font-size: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 32px;
    }
    .catalog-tab .tab-sprite {
      width: 32px;
      height: 32px;
      object-fit: contain;
      image-rendering: pixelated;
    }
    .catalog-tab .tab-emoji {
      font-size: 20px;
    }
    .catalog-tab .tab-name {
      font-size: 11px;
      white-space: nowrap;
    }

    .catalog-body {
      display: flex;
      flex: 1;
      overflow: hidden;
    }

    .catalog-items {
      flex: 1;
      padding: 16px;
      overflow-y: auto;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
      gap: 12px;
      align-content: start;
    }

    .catalog-item {
      background: rgba(0, 0, 0, 0.4);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      padding: 10px;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
    .catalog-item:hover {
      background: rgba(212, 165, 116, 0.1);
      border-color: rgba(212, 165, 116, 0.3);
      transform: translateY(-2px);
    }
    .catalog-item.selected {
      background: rgba(212, 165, 116, 0.2);
      border-color: var(--peach);
      box-shadow: 0 0 15px rgba(212, 165, 116, 0.3);
    }

    .catalog-item-sprite {
      width: 64px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .catalog-item-sprite img {
      max-width: 100%;
      max-height: 100%;
      image-rendering: pixelated;
      image-rendering: crisp-edges;
    }

    .catalog-item-name {
      font-size: 11px;
      color: #ccc;
      text-align: center;
      line-height: 1.2;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .catalog-item.selected .catalog-item-name {
      color: var(--peach);
    }

    .catalog-empty {
      grid-column: 1 / -1;
      text-align: center;
      color: #666;
      padding: 40px;
    }

    .catalog-preview {
      width: 220px;
      background: rgba(0, 0, 0, 0.3);
      border-left: 1px solid rgba(255, 255, 255, 0.1);
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .preview-sprite {
      width: 100%;
      aspect-ratio: 1;
      background: rgba(0, 0, 0, 0.4);
      border: 1px solid rgba(212, 165, 116, 0.2);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .preview-sprite img {
      max-width: 90%;
      max-height: 90%;
      image-rendering: pixelated;
      image-rendering: crisp-edges;
    }

    .preview-placeholder {
      color: #555;
      font-size: 14px;
    }

    .preview-details {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .preview-details h3 {
      font-size: 16px;
      color: var(--peach);
      margin: 0;
      font-weight: 600;
    }

    .preview-details p {
      font-size: 13px;
      color: #aaa;
      line-height: 1.4;
      margin: 0;
    }

    #preview-props {
      margin-top: auto;
      padding-top: 12px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .prop-row {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
    }
    .prop-label {
      color: #888;
    }
    .prop-value {
      color: #fff;
    }

    /* Responsive: Stack layout on mobile */
    @media (max-width: 600px) {
      .catalog-container {
        max-height: 90vh;
      }

      .catalog-body {
        flex-direction: column;
      }

      .catalog-items {
        max-height: 300px;
        grid-template-columns: repeat(3, 1fr);
      }

      .catalog-preview {
        width: 100%;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        flex-direction: row;
        gap: 16px;
        padding: 16px;
      }

      .preview-sprite {
        width: 100px;
        height: 100px;
        aspect-ratio: unset;
        flex-shrink: 0;
      }

      .preview-details {
        flex: 1;
        min-width: 0;
      }

      #preview-props {
        margin-top: 8px;
        padding-top: 8px;
      }
    }

    @media (max-width: 400px) {
      .catalog-items {
        grid-template-columns: repeat(2, 1fr);
      }

      .catalog-tab {
        min-width: 70px;
        padding: 10px 8px;
      }
      .catalog-tab .tab-icon {
        font-size: 18px;
        height: 28px;
      }
      .catalog-tab .tab-sprite {
        width: 28px;
        height: 28px;
      }
      .catalog-tab .tab-name {
        font-size: 10px;
      }
    }

/* ===========================================
   WELCOME MODAL (First-time users)
   =========================================== */

.welcome-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.welcome-modal-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.welcome-modal-box {
  background: linear-gradient(145deg, #1a2a1a 0%, #0d1810 100%);
  border: 1px solid var(--kush-green);
  border-radius: 0;
  max-width: 480px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.welcome-modal-overlay.visible .welcome-modal-box {
  transform: scale(1);
}

.welcome-header {
  background: var(--kush-green);
  padding: 16px 24px;
  text-align: center;
  position: relative;
}

.welcome-header h2 {
  margin: 0;
  font-family: 'Righteous', cursive;
  font-size: 24px;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.welcome-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
}

.welcome-close:hover {
  color: #fff;
}

.welcome-content {
  padding: 24px;
}

.welcome-intro {
  text-align: center;
  font-size: 18px;
  color: #fff;
  margin: 0 0 24px 0;
}

.welcome-intro strong {
  color: var(--gold);
  font-size: 22px;
}

.welcome-path {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.welcome-option {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  padding: 20px;
  transition: all 0.2s ease;
}

.welcome-option.recommended {
  background: rgba(91, 154, 139, 0.1);
  border-color: var(--kush-green);
  position: relative;
}

.welcome-option.recommended::before {
  content: 'RECOMMENDED';
  position: absolute;
  top: 0;
  right: 0;
  background: var(--kush-green);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 4px 10px;
  letter-spacing: 1px;
}

.welcome-option-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.welcome-option-title {
  font-family: 'Righteous', cursive;
  font-size: 18px;
  color: var(--kush-green);
  margin-bottom: 8px;
}

.welcome-option-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
  margin-bottom: 8px;
}

.welcome-option-desc strong {
  color: var(--gold);
}

.welcome-option-note {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

.welcome-divider {
  text-align: center;
  color: rgba(255, 255, 255, 0.3);
  font-size: 12px;
  padding: 4px 0;
}

.welcome-tip {
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin: 20px 0 0 0;
  padding: 12px;
  background: rgba(255, 215, 0, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(255, 215, 0, 0.2);
}

.welcome-footer {
  padding: 16px 24px 24px;
  text-align: center;
}

.welcome-btn {
  background: var(--kush-green);
  color: #fff;
  border: none;
  padding: 14px 48px;
  font-family: 'Righteous', cursive;
  font-size: 16px;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.welcome-btn:hover {
  background: #6aad9b;
}

.welcome-btn:active {
  background: #4a8a7a;
}

@media (max-width: 500px) {
  .welcome-modal-box {
    width: 95%;
    margin: 10px;
  }

  .welcome-header h2 {
    font-size: 20px;
  }

  .welcome-content {
    padding: 16px;
  }

  .welcome-intro {
    font-size: 16px;
  }

  .welcome-intro strong {
    font-size: 20px;
  }
}

/* ===========================================
   LEADERBOARD MODAL
   =========================================== */

.leaderboard-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding: 20px;
  box-sizing: border-box;
}

.leaderboard-modal-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.leaderboard-modal-box {
  background: linear-gradient(145deg, #1a1a2e 0%, #0f0f1a 100%);
  border: 2px solid var(--gold);
  border-radius: 16px;
  max-width: 600px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 215, 0, 0.15);
  transform: scale(0.9);
  transition: transform 0.3s ease;
  overflow: hidden;
}

.leaderboard-modal-overlay.visible .leaderboard-modal-box {
  transform: scale(1);
}

.leaderboard-header {
  background: linear-gradient(135deg, #2a2a4a 0%, #1a1a2e 100%);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 215, 0, 0.3);
  flex-shrink: 0;
}

.leaderboard-header h2 {
  margin: 0;
  font-family: 'Righteous', cursive;
  font-size: 22px;
  color: var(--gold);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.leaderboard-close {
  background: none;
  border: none;
  color: #888;
  font-size: 28px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.2s ease;
}

.leaderboard-close:hover {
  color: #fff;
}

.leaderboard-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.leaderboard-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 215, 0, 0.2);
  overflow-x: auto;
  flex-shrink: 0;
  -webkit-overflow-scrolling: touch;
}

.leaderboard-tab {
  background: rgba(50, 50, 70, 0.9);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 13px;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.leaderboard-tab:hover {
  background: rgba(70, 70, 100, 1);
  border-color: var(--gold);
  color: #fff;
  transform: translateY(-1px);
}

.leaderboard-tab.active {
  background: rgba(255, 215, 0, 0.25);
  border-color: var(--gold);
  border-width: 2px;
  color: var(--gold);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}

.leaderboard-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}

.leaderboard-loading {
  text-align: center;
  color: #888;
  padding: 40px 20px;
  font-size: 14px;
}

.leaderboard-title {
  text-align: center;
  margin: 0 0 16px 0;
  font-size: 18px;
  color: #fff;
}


.leaderboard-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  margin-bottom: 8px;
  transition: background 0.2s ease;
}

.leaderboard-entry:hover {
  background: rgba(255, 255, 255, 0.08);
}

.leaderboard-entry.top-1 {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 215, 0, 0.05) 100%);
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.leaderboard-entry.top-2 {
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.15) 0%, rgba(192, 192, 192, 0.05) 100%);
  border: 1px solid rgba(192, 192, 192, 0.2);
}

.leaderboard-entry.top-3 {
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.15) 0%, rgba(205, 127, 50, 0.05) 100%);
  border: 1px solid rgba(205, 127, 50, 0.2);
}

.leaderboard-rank {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  flex-shrink: 0;
}

.leaderboard-entry.top-1 .leaderboard-rank {
  background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
  color: #000;
  font-size: 16px;
}

.leaderboard-entry.top-2 .leaderboard-rank {
  background: linear-gradient(135deg, #c0c0c0 0%, #a0a0a0 100%);
  color: #000;
}

.leaderboard-entry.top-3 .leaderboard-rank {
  background: linear-gradient(135deg, #cd7f32 0%, #a05a20 100%);
  color: #fff;
}

.leaderboard-user {
  flex: 1;
  min-width: 0;
}

.leaderboard-username {
  font-weight: 600;
  color: #fff;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leaderboard-entry.top-1 .leaderboard-username {
  color: var(--gold);
}

.leaderboard-member-since {
  font-size: 11px;
  color: #666;
  margin-top: 2px;
}

.leaderboard-value {
  text-align: right;
  flex-shrink: 0;
}

.leaderboard-value-num {
  font-weight: 700;
  font-size: 16px;
  color: var(--kush-green);
}

.leaderboard-entry.top-1 .leaderboard-value-num {
  color: var(--gold);
}

.leaderboard-value-suffix {
  font-size: 11px;
  color: #666;
}

.leaderboard-empty {
  text-align: center;
  color: #666;
  padding: 40px 20px;
  font-style: italic;
}

/* Highlight current user in leaderboard */
.leaderboard-entry-me {
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.25) 0%, rgba(74, 222, 128, 0.1) 100%) !important;
  border: 2px solid #4ade80 !important;
  box-shadow: 0 0 20px rgba(74, 222, 128, 0.3), inset 0 0 20px rgba(74, 222, 128, 0.05);
  position: relative;
  animation: leaderboard-me-pulse 2s ease-in-out infinite;
}

@keyframes leaderboard-me-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(74, 222, 128, 0.3), inset 0 0 20px rgba(74, 222, 128, 0.05); }
  50% { box-shadow: 0 0 30px rgba(74, 222, 128, 0.5), inset 0 0 25px rgba(74, 222, 128, 0.1); }
}

.leaderboard-entry-me .leaderboard-username {
  color: #4ade80 !important;
  font-weight: 600;
}

.leaderboard-entry-me .leaderboard-rank {
  background: #4ade80 !important;
  color: #0a0a0a !important;
}

.leaderboard-you {
  display: inline-block;
  background: rgba(74, 222, 128, 0.2);
  color: #4ade80;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Mobile responsiveness */
@media (max-width: 600px) {
  .leaderboard-modal-overlay {
    padding: 10px;
  }

  .leaderboard-modal-box {
    max-height: 90vh;
    border-radius: 12px;
  }

  .leaderboard-header {
    padding: 12px 16px;
  }

  .leaderboard-header h2 {
    font-size: 18px;
  }

  .leaderboard-tabs {
    padding: 10px 12px;
    gap: 4px;
  }

  .leaderboard-tab {
    padding: 5px 10px;
    font-size: 11px;
  }

  .leaderboard-list {
    padding: 12px;
  }

  .leaderboard-entry {
    padding: 10px 12px;
    gap: 10px;
  }

  .leaderboard-rank {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .leaderboard-username {
    font-size: 13px;
  }

  .leaderboard-value-num {
    font-size: 14px;
  }

  .leaderboard-title {
    font-size: 16px;
  }
}

@media (max-width: 400px) {
  .leaderboard-tabs {
    justify-content: flex-start;
  }

  .leaderboard-tab {
    font-size: 10px;
    padding: 4px 8px;
  }

  .leaderboard-entry {
    padding: 8px 10px;
  }

  .leaderboard-rank {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }

  .leaderboard-member-since {
    display: none;
  }
}

/* ===========================================
   LEADERBOARD SIDEBAR PANEL
   =========================================== */
.leaderboard-panel {
  margin-top: 12px;
}

.leaderboard-preview {
  padding: 8px 12px;
  min-height: 80px;
}

.leaderboard-preview-loading {
  text-align: center;
  color: #888;
  padding: 20px;
  font-size: 13px;
}

.leaderboard-preview-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  margin-bottom: 4px;
  background: rgba(255, 255, 255, 0.03);
}

.leaderboard-preview-entry:hover {
  background: rgba(255, 255, 255, 0.06);
}

.leaderboard-preview-entry.rank-1 {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 215, 0, 0.05) 100%);
}

.leaderboard-preview-entry.rank-2 {
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.1) 0%, rgba(192, 192, 192, 0.03) 100%);
}

.leaderboard-preview-entry.rank-3 {
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.1) 0%, rgba(205, 127, 50, 0.03) 100%);
}

.leaderboard-preview-rank {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  flex-shrink: 0;
}

.leaderboard-preview-entry.rank-1 .leaderboard-preview-rank {
  background: rgba(255, 215, 0, 0.2);
  color: var(--gold);
}

.leaderboard-preview-entry.rank-2 .leaderboard-preview-rank {
  background: rgba(192, 192, 192, 0.2);
  color: #c0c0c0;
}

.leaderboard-preview-entry.rank-3 .leaderboard-preview-rank {
  background: rgba(205, 127, 50, 0.2);
  color: #cd7f32;
}

.leaderboard-preview-name {
  flex: 1;
  font-size: 12px;
  color: #ddd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leaderboard-preview-value {
  font-size: 11px;
  color: var(--gold);
  font-weight: 600;
}

/* Highlight current user in sidebar preview */
.leaderboard-preview-me {
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.25) 0%, rgba(74, 222, 128, 0.1) 100%) !important;
  border: 1px solid #4ade80;
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.2);
}

.leaderboard-preview-me .leaderboard-preview-name {
  color: #4ade80 !important;
  font-weight: 600;
}

.leaderboard-preview-me .leaderboard-preview-rank {
  background: #4ade80 !important;
  color: #0a0a0a !important;
}

.leaderboard-you-mini {
  font-size: 9px;
  color: #4ade80;
  font-weight: 600;
  opacity: 0.9;
}

.leaderboard-expand-btn {
  display: block;
  width: calc(100% - 16px);
  margin: 8px;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 215, 0, 0.1) 100%);
  border: 1px solid rgba(255, 215, 0, 0.4);
  border-radius: 8px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.leaderboard-expand-btn:hover {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.3) 0%, rgba(255, 215, 0, 0.15) 100%);
  border-color: var(--gold);
  transform: translateY(-1px);
}

.leaderboard-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 8px;
}

.leaderboard-preview-title {
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.leaderboard-preview-category {
  font-size: 12px;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Sidebar panel mobile */
@media (max-width: 600px) {
  .leaderboard-panel {
    margin-top: 8px;
  }

  .leaderboard-preview {
    padding: 6px 10px;
  }

  .leaderboard-preview-entry {
    padding: 5px 6px;
    gap: 8px;
  }

  .leaderboard-preview-rank {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }

  .leaderboard-preview-name {
    font-size: 11px;
  }

  .leaderboard-preview-value {
    font-size: 10px;
  }

  .leaderboard-expand-btn {
    padding: 8px 12px;
    font-size: 12px;
  }
}

/* ===========================================
   PAYMENT MODAL
   =========================================== */
#payment-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(20, 30, 40, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5000;
  padding: 20px;
}

.payment-content {
  position: relative;
  background: rgba(30, 45, 61, 0.98);
  border: 2px solid rgba(91, 154, 139, 0.4);
  border-radius: 16px;
  padding: 40px 36px;
  width: 100%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
              0 0 80px rgba(224, 123, 103, 0.1);
}

.payment-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  color: rgba(212, 165, 116, 0.5);
  font-size: 28px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.payment-close:hover {
  color: #E07B67;
}

.payment-content h2 {
  font-family: 'Righteous', cursive;
  font-size: 32px;
  color: #E07B67;
  margin: 0 0 8px 0;
  text-shadow: 0 0 20px rgba(224, 123, 103, 0.3);
}

.payment-subtitle {
  color: rgba(212, 165, 116, 0.7);
  font-size: 14px;
  margin: 0 0 28px 0;
}

.payment-subtitle strong {
  color: #5B9A8B;
}

.payment-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.payment-btn {
  padding: 16px 24px;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Outfit', sans-serif;
}

.payment-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

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

.payment-btn.loading {
  opacity: 0.7;
  pointer-events: none;
}

.payment-btn-card {
  background: linear-gradient(135deg, #5B9A8B, #7BB5A5);
  color: #fff;
  box-shadow: 0 4px 15px rgba(91, 154, 139, 0.3);
}

.payment-btn-crypto {
  background: linear-gradient(135deg, #E07B67, #F09080);
  color: #fff;
  box-shadow: 0 4px 15px rgba(224, 123, 103, 0.3);
}

.payment-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(212, 165, 116, 0.4);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.payment-divider::before,
.payment-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(91, 154, 139, 0.2);
}

.crypto-status {
  color: #5B9A8B;
  font-size: 13px;
  padding: 8px 0;
  display: none;
}

.crypto-status.visible {
  display: block;
}

.payment-error {
  color: #f87171;
  font-size: 13px;
  padding: 8px 12px;
  background: rgba(248, 113, 113, 0.1);
  border-radius: 8px;
  margin-top: 8px;
}

.payment-info {
  color: rgba(212, 165, 116, 0.65);
  font-size: 13px;
  margin-top: 16px;
  letter-spacing: 0.3px;
}

.payment-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(91, 154, 139, 0.2);
  border-top-color: #5B9A8B;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 20px auto;
}

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

@media (max-width: 480px) {
  .payment-content {
    padding: 24px 20px;
  }
  .payment-content h2 {
    font-size: 26px;
  }
  .payment-btn {
    padding: 14px 20px;
    font-size: 14px;
  }
}