:root {
      --cream: #FFF8F0;
      --taupe: #D4A574;
      --pink: #F2B5B5;
      --brown: #5C3D2E;
      --matcha: #7DB87D;
      --taro: #9B7DB8;
      --sky: #87CEEB;
      --coral: #E8736A;
      --gold: #F5C542;
      --white: #FEFEFE;
      --wood: #C4A882;
      --wall: #F0E6D6;
      --wood-dark: #8B6914;
      --wood-mid: #B8860B;
      --wood-light: #D4A54A;
      --vip-gold: #FFD700;
      --vip-dark: #2A1F3D;
      --vip-accent: #C9A84C;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: var(--cream, #E8D5C0);
      color: var(--brown);
      min-height: 100dvh;
      min-height: -webkit-fill-available;
      overflow: hidden;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      -webkit-user-select: none;
      user-select: none;
      overscroll-behavior: none;
    }

    /* game-header.js provides .gh header styles */

    .day-badge {
      background: linear-gradient(135deg, rgba(245,197,66,0.25), rgba(245,197,66,0.1));
      color: var(--gold);
      padding: 0.25rem 0.6rem;
      border-radius: 12px;
      font-size: 0.75rem;
      font-weight: 700;
      border: 1px solid rgba(245,197,66,0.2);
      text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }

    .icon-btn {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.1);
      color: var(--cream);
      font-size: 1.1rem;
      cursor: pointer;
      padding: 0.3rem;
      border-radius: 10px;
      min-width: 44px;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, transform 0.15s;
    }
    .icon-btn:hover { background: rgba(255,255,255,0.18); }
    .icon-btn:active { transform: scale(0.93); }
    .icon-btn.muted { opacity: 0.4; }

    /* HUD */
    .hud {
      position: fixed;
      top: calc(63px + env(safe-area-inset-top, 0px));
      left: 50%; transform: translateX(-50%);
      width: 100%; max-width: 480px;
      height: 36px;
      background: rgba(92, 61, 46, 0.92);
      backdrop-filter: blur(4px);
      display: flex;
      justify-content: space-around;
      align-items: center;
      z-index: 400;
      padding: 0 1rem;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }

    .hud-item {
      display: flex;
      align-items: center;
      gap: 0.3rem;
      color: #fff;
      font-size: 0.85rem;
      font-weight: 600;
    }

    .hud-timer {
      font-family: 'Courier New', monospace;
      font-size: 0.95rem;
      color: var(--sky);
    }

    .hud-combo {
      color: var(--gold);
      transition: transform 0.15s, font-size 0.3s, color 0.3s;
    }
    .hud-combo.pulse {
      transform: scale(1.3);
    }
    .hud-combo.combo-warm {
      color: #FFA500;
      font-size: 0.95rem;
      animation: comboGentlePulse 1s ease-in-out infinite;
    }
    .hud-combo.combo-hot {
      color: #FF6B35;
      font-size: 1.05rem;
      text-shadow: 0 0 8px rgba(255,107,53,0.5);
      animation: comboStrongPulse 0.7s ease-in-out infinite;
    }
    .hud-combo.combo-fire {
      color: #FF2D2D;
      font-size: 1.15rem;
      text-shadow: 0 0 12px rgba(255,45,45,0.7), 0 0 24px rgba(255,100,0,0.4);
      animation: comboFirePulse 0.4s ease-in-out infinite;
    }

    /* Game container */
    .game-wrap {
      max-width: 480px;
      margin: 0 auto;
      position: relative;
      height: calc(100dvh - 48px);
      overflow: hidden;
      padding-top: 36px;
    }

    .game-area {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    /* ===== TOP HALF: MAIN SHOP (0-50%) ===== */
    .shop-bg {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    /* Back wall - compressed into top half */
    .shop-wall {
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 22%;
      background:
        linear-gradient(180deg, var(--wall-top, #E8D5C0) 0%, var(--wall-bottom, #F5EDE2) 100%);
    }
    .shop-wall::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 18%;
      background: linear-gradient(180deg, var(--wall-bottom, #D4C4A8) 0%, var(--taupe, #C9B896) 100%);
      border-top: 2px solid var(--taupe, #BBA87A);
    }

    /* Shop floor - top half only */
    .shop-floor {
      position: absolute;
      top: 22%; left: 0; right: 0;
      height: 28%;
      background: var(--floor, #C9A87C);
    }
    .shop-floor::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.02) 50%, rgba(255,255,255,0.05) 100%);
      pointer-events: none;
    }
    .shop-floor::after {
      content: '';
      position: absolute;
      top: 30%; left: 20%; right: 20%;
      height: 3px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
      border-radius: 50%;
      filter: blur(4px);
    }

    /* Ceiling lights */
    .ceiling-light {
      position: absolute;
      top: 0;
      width: 40px;
      height: 50px;
      z-index: 5;
    }
    .ceiling-light::before {
      content: '';
      position: absolute;
      top: 0; left: 50%;
      transform: translateX(-50%);
      width: 4px;
      height: 14px;
      background: #888;
      border-radius: 2px;
    }
    .ceiling-light::after {
      content: '';
      position: absolute;
      top: 14px; left: 50%;
      transform: translateX(-50%);
      width: 20px;
      height: 10px;
      background: linear-gradient(180deg, #4A4A4A, #666);
      border-radius: 0 0 10px 10px;
      box-shadow: 0 0 20px 10px rgba(255, 220, 150, 0.15);
    }
    .ceiling-glow {
      position: absolute;
      top: 24px; left: 50%;
      transform: translateX(-50%);
      width: 80px;
      height: 120px;
      background: radial-gradient(ellipse at top, rgba(255,220,150,0.12) 0%, transparent 70%);
      pointer-events: none;
    }

    /* Shelves */
    .shelf {
      position: absolute;
      height: 8px;
      background: linear-gradient(180deg, #A0845C, #8B7040);
      border-radius: 2px;
      box-shadow: 0 3px 6px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.15);
      z-index: 6;
    }
    .shelf::after {
      content: '';
      position: absolute;
      bottom: -4px; left: 2px; right: 2px;
      height: 4px;
      background: linear-gradient(180deg, rgba(0,0,0,0.15), transparent);
      border-radius: 0 0 2px 2px;
    }
    .shelf-1 { top: 3%; left: 8%; width: 28%; }
    .shelf-2 { top: 10%; right: 8%; width: 28%; }
    .shelf-3 { top: 12%; left: 12%; width: 32%; }

    .shelf-item {
      position: absolute;
      bottom: 6px;
      font-size: 14px;
      filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15));
    }

    /* Menu board */
    .menu-board {
      position: absolute;
      top: 2%;
      left: 50%;
      transform: translateX(-50%);
      width: 70px;
      height: 42px;
      background: linear-gradient(135deg, #3E2723, #4E342E);
      border-radius: 4px;
      border: 2px solid #6D4C41;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      color: var(--cream);
      box-shadow: 0 3px 10px rgba(0,0,0,0.3);
      z-index: 6;
    }
    .menu-board::before {
      content: 'MENU';
      font-size: 8px;
      font-weight: 800;
      letter-spacing: 2px;
      color: rgba(255,255,255,0.9);
    }
    .menu-board::after {
      content: '🧋 ☕ 🍵';
      font-size: 10px;
      margin-top: 2px;
    }

    /* Wall clock */
    .wall-clock {
      position: absolute;
      top: 3%;
      right: 14%;
      width: 28px;
      height: 28px;
      background: radial-gradient(circle, #FFF 0%, #F5F0E8 70%, #E0D5C5 100%);
      border: 2px solid #8B7355;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 7px;
      font-weight: 700;
      color: var(--brown);
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
      z-index: 6;
    }
    .wall-clock::after {
      content: '';
      position: absolute;
      top: -5px; left: 50%;
      transform: translateX(-50%);
      width: 6px;
      height: 4px;
      background: #8B7355;
      border-radius: 2px 2px 0 0;
    }
    .clock-hand {
      position: absolute;
      bottom: 50%;
      left: 50%;
      width: 2px;
      height: 9px;
      background: var(--brown);
      transform-origin: bottom center;
      transform: rotate(0deg);
      border-radius: 1px;
      z-index: 1;
    }

    /* Equipment area behind counter */
    .equipment-area {
      position: absolute;
      top: 15%;
      right: 10%;
      display: flex;
      gap: 10px;
      z-index: 7;
    }

    /* Boba machine */
    .boba-machine {
      width: 28px;
      height: 38px;
      background: linear-gradient(180deg, #E0E0E0, #BDBDBD);
      border-radius: 4px 4px 2px 2px;
      position: relative;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }
    .boba-machine::before {
      content: '';
      position: absolute;
      top: 4px; left: 4px; right: 4px;
      height: 14px;
      background: linear-gradient(180deg, #A1887F, #8D6E63);
      border-radius: 2px;
    }
    .boba-machine::after {
      content: '';
      position: absolute;
      bottom: 4px; left: 50%;
      transform: translateX(-50%);
      width: 6px;
      height: 8px;
      background: #666;
      border-radius: 0 0 3px 3px;
    }

    /* Blender */
    .blender {
      width: 20px;
      height: 34px;
      position: relative;
    }
    .blender::before {
      content: '';
      position: absolute;
      top: 0; left: 2px;
      width: 16px;
      height: 20px;
      background: linear-gradient(180deg, rgba(200,230,200,0.6), rgba(180,210,180,0.4));
      border: 1px solid rgba(0,0,0,0.1);
      border-radius: 2px 2px 4px 4px;
      clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
    }
    .blender::after {
      content: '';
      position: absolute;
      bottom: 0; left: 1px;
      width: 18px;
      height: 12px;
      background: linear-gradient(180deg, #757575, #616161);
      border-radius: 2px;
    }

    /* Steam particles */
    .steam-container {
      position: absolute;
      top: 11%;
      right: 12%;
      width: 40px;
      height: 30px;
      z-index: 8;
      pointer-events: none;
    }
    .steam {
      position: absolute;
      bottom: 0;
      width: 6px;
      height: 6px;
      background: rgba(255,255,255,0.4);
      border-radius: 50%;
      filter: blur(2px);
      animation: steamRise 2s ease-out infinite;
      will-change: transform, opacity;
    }
    .steam:nth-child(1) { left: 8px; animation-delay: 0s; opacity: 0.4; }
    .steam:nth-child(2) { left: 16px; animation-delay: 0.5s; opacity: 0.35; }
    .steam:nth-child(3) { left: 24px; animation-delay: 1s; opacity: 0.45; }
    .steam:nth-child(4) { left: 12px; animation-delay: 1.5s; width: 4px; height: 4px; opacity: 0.3; }
    .steam:nth-child(5) { left: 20px; animation-delay: 0.8s; width: 5px; height: 5px; opacity: 0.5; }

    /* D. Ceiling light flicker */
    .ceiling-glow {
      animation: lightFlicker 4s ease-in-out infinite;
    }
    .ceiling-light:nth-child(2) .ceiling-glow {
      animation-delay: 1.3s;
      animation-duration: 3.7s;
    }
    .ceiling-light:nth-child(3) .ceiling-glow {
      animation-delay: 2.1s;
      animation-duration: 4.3s;
    }

    /* Counter - positioned higher in compressed top half */
    .counter {
      position: absolute;
      top: 26%;
      left: 0%;
      right: 0%;
      height: 16px;
      background: linear-gradient(180deg, var(--gold, #D4A54A) 0%, var(--taupe, #C99A3E) 40%, var(--brown, #B8860B) 100%);
      box-shadow:
        0 4px 0 0 var(--brown, #8B6914),
        0 6px 12px rgba(0,0,0,0.3);
      z-index: 10;
    }
    .counter::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(180deg, rgba(255,255,255,0.3), transparent);
    }
    .counter::after {
      content: '';
      position: absolute;
      bottom: -8px; left: 0; right: 0;
      height: 8px;
      background: linear-gradient(180deg, #8B6914, #7A5C10);
      border-radius: 0 0 2px 2px;
    }

    /* ===== BARISTA CHARACTER ===== */
    .barista {
      position: absolute;
      z-index: 9;
      width: 28px;
      height: 52px;
    }
    .barista .barista-head {
      position: absolute;
      top: 0; left: 50%;
      transform: translateX(-50%);
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #FFDAB9;
      box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    }
    /* Hair */
    .barista .barista-head::before {
      content: '';
      position: absolute;
      top: -2px; left: 1px; right: 1px;
      height: 8px;
      background: #3E2723;
      border-radius: 8px 8px 0 0;
    }
    .barista .barista-body {
      position: absolute;
      top: 16px; left: 50%;
      transform: translateX(-50%);
      width: 20px;
      height: 24px;
      border-radius: 4px;
      background: #4CAF50;
      box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    }
    /* Apron detail */
    .barista .barista-body::after {
      content: '';
      position: absolute;
      top: 4px; left: 3px; right: 3px;
      bottom: 2px;
      background: rgba(255,255,255,0.2);
      border-radius: 2px;
    }
    .barista .barista-arm {
      position: absolute;
      top: 18px;
      width: 8px;
      height: 14px;
      background: #FFDAB9;
      border-radius: 3px;
      transition: transform 0.3s ease;
    }
    .barista .barista-arm.left { left: -3px; }
    .barista .barista-arm.right { right: -3px; }
    /* Serving animation: arms extend forward */
    .barista.serving .barista-arm.left {
      transform: translateY(-4px) rotate(-30deg);
    }
    .barista.serving .barista-arm.right {
      transform: translateY(-4px) rotate(30deg);
    }

    /* Main barista behind counter */
    .main-barista {
      top: 16%;
      left: 50%;
      transform: translateX(-50%);
    }

    /* Auto-serve barista workers */
    .auto-stations {
      position: absolute;
      top: 15%;
      left: 4%;
      display: flex;
      gap: 12px;
      z-index: 15;
    }

    .auto-barista-station {
      position: relative;
      width: 36px;
      height: 56px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .auto-barista-station .drink-label {
      position: absolute;
      top: -18px;
      font-size: 12px;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s;
    }
    .auto-barista-station.active .drink-label {
      opacity: 1;
    }
    /* Blue apron barista */
    .auto-barista-station.station-0 .barista .barista-body { background: #2196F3; }
    /* Orange apron barista */
    .auto-barista-station.station-1 .barista .barista-body { background: #FF9800; }
    /* Purple apron barista */
    .auto-barista-station.station-2 .barista .barista-body { background: #9C27B0; }
    /* Express Lane (4th auto-serve from Tier 2) */
    .auto-barista-station.station-3 .barista .barista-body { background: #FFD700; }

    .auto-barista-station .barista {
      position: relative;
      width: 28px;
      height: 44px;
    }
    .auto-barista-station .barista .barista-head {
      width: 14px; height: 14px;
    }
    .auto-barista-station .barista .barista-head::before {
      height: 7px;
    }
    .auto-barista-station .barista .barista-body {
      top: 14px;
      width: 18px;
      height: 20px;
    }
    .auto-barista-station .barista .barista-arm {
      top: 16px; width: 7px; height: 12px;
    }
    .auto-barista-station.idle .barista {
      animation: baristaIdle 2s ease-in-out infinite;
    }
    .auto-barista-station.active .barista {
      animation: baristaWorking 0.5s ease-in-out infinite;
    }
    .auto-barista-station.active .barista .barista-arm.left {
      transform: translateY(-3px) rotate(-25deg);
    }
    .auto-barista-station.active .barista .barista-arm.right {
      transform: translateY(-3px) rotate(25deg);
    }

    /* ===== GOLD ROPE DIVIDER ===== */
    .rope-divider {
      position: absolute;
      top: 50%;
      left: 0; right: 0;
      height: 8px;
      z-index: 30;
      pointer-events: none;
    }
    .rope-divider::before {
      content: '';
      position: absolute;
      top: 2px; left: 5%; right: 5%;
      height: 4px;
      background: repeating-linear-gradient(90deg,
        var(--vip-gold) 0px, #DAA520 4px,
        var(--vip-accent) 4px, var(--vip-gold) 8px
      );
      border-radius: 2px;
      box-shadow: 0 1px 4px rgba(218,165,32,0.4), 0 0 8px rgba(255,215,0,0.2);
    }
    /* Rope posts */
    .rope-divider::after {
      content: '';
      position: absolute;
      top: -4px; left: 5%;
      width: 8px; height: 16px;
      background: linear-gradient(180deg, #DAA520, #B8860B);
      border-radius: 3px;
      box-shadow: calc(90vw * 0.9) 0 0 0 #B8860B;
    }

    /* ===== BOTTOM HALF: VIP LOUNGE (50-100%) ===== */
    .vip-lounge {
      position: absolute;
      top: 50%; left: 0; right: 0;
      bottom: 0;
      z-index: 3;
      transition: filter 0.6s ease-out, opacity 0.6s ease-out;
      overflow: hidden;
    }
    .vip-lounge-floor {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, #3D2A5C 0%, #4E3872 30%, #5C4680 80%, #4E3872 100%);
    }
    /* Subtle carpet pattern */
    .vip-lounge-floor::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        repeating-linear-gradient(
          45deg,
          rgba(255,215,0,0.03) 0px,
          rgba(255,215,0,0.03) 2px,
          transparent 2px,
          transparent 10px
        );
    }
    .vip-lounge.locked .vip-lounge-floor {
      filter: grayscale(0.6) brightness(0.6);
    }
    .vip-lounge.unlocked .vip-lounge-floor::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at center, rgba(255,215,0,0.06) 0%, transparent 70%);
      animation: vipAmbientGlow 3s ease-in-out infinite;
    }

    .vip-label {
      position: absolute;
      top: 8px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 3px;
      color: var(--vip-accent);
      text-shadow: 0 0 8px rgba(255,215,0,0.3);
      z-index: 32;
    }
    .vip-lounge.locked .vip-label { color: #666; text-shadow: none; }

    .vip-lock {
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 32px;
      opacity: 0.7;
      transition: opacity 0.4s;
      z-index: 32;
    }
    .vip-lounge.unlocked .vip-lock { opacity: 0; display: none; }

    /* VIP Tables */
    .vip-table {
      position: absolute;
      width: 36px;
      height: 36px;
      z-index: 31;
    }
    .vip-table-top {
      position: absolute;
      top: 4px; left: 50%;
      transform: translateX(-50%);
      width: 32px;
      height: 24px;
      background: linear-gradient(135deg, #6D4C41, #5D4037);
      border-radius: 50%;
      box-shadow: 0 2px 6px rgba(0,0,0,0.3);
      border: 1px solid #8D6E63;
    }
    .vip-table-leg {
      position: absolute;
      bottom: 0; left: 50%;
      transform: translateX(-50%);
      width: 6px;
      height: 12px;
      background: linear-gradient(180deg, #5D4037, #4E342E);
      border-radius: 0 0 2px 2px;
    }
    /* Chair indicators */
    .vip-chair {
      position: absolute;
      width: 10px;
      height: 10px;
      background: radial-gradient(circle, #8D6E63, #6D4C41);
      border-radius: 50%;
      box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }
    .vip-table .vip-chair.chair-left { top: 10px; left: -8px; }
    .vip-table .vip-chair.chair-right { top: 10px; right: -8px; }

    /* Gold accent on tables when level 3 */
    .vip-lounge.vip-level-3 .vip-table-top {
      border-color: var(--vip-gold);
      box-shadow: 0 2px 6px rgba(0,0,0,0.3), 0 0 8px rgba(255,215,0,0.2);
    }
    .vip-lounge.vip-level-2 .vip-table-top,
    .vip-lounge.vip-level-3 .vip-table-top {
      background: linear-gradient(135deg, #795548, #6D4C41);
    }

    /* Faded hint tables when locked */
    .vip-table.faded {
      opacity: 0.15;
      filter: grayscale(1);
    }

    /* VIP customer area (inside lounge) */
    .vip-customer-area {
      position: absolute;
      top: 50%; left: 0; right: 0;
      bottom: 0;
      z-index: 35;
      pointer-events: none;
    }
    .vip-customer-area .customer {
      pointer-events: none;
    }

    /* Waiter character */
    .waiter {
      position: absolute;
      z-index: 36;
      width: 28px;
      height: 52px;
      transition: left 0.8s ease-in-out, top 0.8s ease-in-out;
      pointer-events: none;
    }
    .waiter .barista-head {
      position: absolute;
      top: 0; left: 50%;
      transform: translateX(-50%);
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #FFDAB9;
      box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    }
    .waiter .barista-head::before {
      content: '';
      position: absolute;
      top: -2px; left: 1px; right: 1px;
      height: 7px;
      background: #4A2E1A;
      border-radius: 7px 7px 0 0;
    }
    .waiter .barista-body {
      position: absolute;
      top: 14px; left: 50%;
      transform: translateX(-50%);
      width: 18px;
      height: 20px;
      border-radius: 4px;
      background: #1A1A1A;
      box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    }
    /* Waiter vest detail */
    .waiter .barista-body::after {
      content: '';
      position: absolute;
      top: 2px; left: 50%; transform: translateX(-50%);
      width: 6px;
      height: 10px;
      background: #B71C1C;
      border-radius: 1px;
    }
    .waiter .barista-arm {
      position: absolute;
      top: 16px;
      width: 7px;
      height: 12px;
      background: #FFDAB9;
      border-radius: 3px;
      transition: transform 0.3s ease;
    }
    .waiter .barista-arm.left { left: -2px; }
    .waiter .barista-arm.right { right: -2px; }
    /* Tray */
    .waiter .waiter-tray {
      position: absolute;
      top: 12px; right: -8px;
      width: 14px;
      height: 3px;
      background: linear-gradient(90deg, #888, #AAA);
      border-radius: 1px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }
    .waiter.serving .barista-arm.right {
      transform: translateY(-6px) rotate(20deg);
    }

    /* Queue area — customers stand in front of counter (compressed) */
    .queue-area {
      position: absolute;
      top: 20%;
      left: 0;
      right: 0;
      height: 30%;
      z-index: 20;
    }

    /* Customer */
    .customer {
      position: absolute;
      width: 48px;
      height: 76px;
      cursor: pointer;
      will-change: transform;
      /* Expanded tap hitbox via padding — visual size unchanged */
      padding: 6px;
      margin: -6px;
      transition: opacity 0.3s;
      z-index: 25;
    }

    .customer-shadow {
      position: absolute;
      bottom: -2px;
      left: 50%;
      transform: translateX(-50%);
      width: 30px;
      height: 8px;
      background: radial-gradient(ellipse, rgba(0,0,0,0.2) 0%, transparent 70%);
      border-radius: 50%;
    }

    .customer-body {
      position: absolute;
      bottom: 8px;
      left: 50%;
      transform: translateX(-50%);
      width: 24px;
      height: 32px;
      border-radius: 6px;
      transition: background-color 0.2s;
    }

    .customer-head {
      position: absolute;
      bottom: 38px;
      left: 50%;
      transform: translateX(-50%);
      width: 20px;
      height: 20px;
      border-radius: 50%;
      transition: background-color 0.2s;
    }

    .customer-legs {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 4px;
    }
    .customer-leg {
      width: 6px;
      height: 10px;
      border-radius: 0 0 3px 3px;
    }

    /* Customer type accessories */
    .customer-accessory {
      position: absolute;
      pointer-events: none;
      font-size: 8px;
    }
    .customer.type-business .customer-body::after {
      content: '';
      position: absolute;
      top: 2px; left: 50%;
      transform: translateX(-50%);
      width: 4px;
      height: 14px;
      background: #2C3E50;
      clip-path: polygon(30% 0%, 70% 0%, 80% 30%, 55% 100%, 45% 100%, 20% 30%);
    }
    .customer.type-student .customer-body::after {
      content: '';
      position: absolute;
      top: 4px; right: -5px;
      width: 8px;
      height: 14px;
      background: #E67E22;
      border-radius: 2px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }
    .customer.type-influencer .customer-head {
      box-shadow: 0 0 8px rgba(255,105,180,0.5);
    }
    .customer.type-influencer .customer-body {
      box-shadow: 0 0 6px rgba(255,105,180,0.3);
    }
    .customer.type-foodie .customer-head::after {
      content: '';
      position: absolute;
      top: -4px; left: 50%;
      transform: translateX(-50%);
      width: 18px;
      height: 6px;
      background: #DDA0DD;
      border-radius: 4px 4px 0 0;
    }

    .customer.walking {
      animation: walkBob 0.5s ease-in-out infinite;
    }

    .customer.entering {
      animation: customerEnter 0.3s ease-out forwards, walkBob 0.5s ease-in-out 0.3s infinite;
    }

    @keyframes customerEnter {
      0% { opacity: 0; transform: translateX(var(--tx, 0)) scale(0.7); }
      100% { opacity: 1; transform: translateX(var(--tx, 0)) scale(1); }
    }

    .customer.leaving-happy {
      animation: walkBob 0.4s ease-in-out infinite;
      opacity: 1;
      transition: opacity 0.3s ease-out;
    }

    .customer.leaving-angry {
      animation: angryLeave 0.3s ease-in forwards;
    }

    @keyframes angryLeave {
      0% { transform: translateX(var(--tx, 0)) scale(1); }
      30% { transform: translateX(var(--tx, 0)) scale(1.1); }
      100% { transform: translateX(var(--tx, 0)) scale(1); }
    }

    .customer-order {
      position: absolute;
      bottom: 62px;
      right: 0;
      font-size: 16px;
      pointer-events: none;
      animation: floatOrder 2s ease-in-out infinite;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
    }

    .customer-crown {
      position: absolute;
      bottom: 64px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 12px;
      pointer-events: none;
      filter: drop-shadow(0 0 4px rgba(255,215,0,0.5));
    }

    .patience-bar-bg {
      position: absolute;
      bottom: 60px;
      left: 50%;
      transform: translateX(-50%);
      width: 30px;
      height: 4px;
      background: rgba(0,0,0,0.15);
      border-radius: 2px;
      overflow: hidden;
    }

    .patience-bar {
      height: 100%;
      border-radius: 2px;
      transition: width 0.1s linear;
    }

    .patience-icon {
      position: absolute;
      bottom: 65px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 8px;
      line-height: 1;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.2s;
    }
    .patience-icon.warn { opacity: 1; }
    .patience-icon.urgent { opacity: 1; }

    .serve-ring {
      position: absolute;
      bottom: 4px;
      left: 50%;
      transform: translateX(-50%);
      width: 40px;
      height: 40px;
      border-radius: 50%;
      pointer-events: none;
      opacity: 0;
      -webkit-mask: radial-gradient(circle, transparent 55%, black 57%);
      mask: radial-gradient(circle, transparent 55%, black 57%);
    }
    .serve-ring.active {
      opacity: 0.8;
    }

    /* VIP customer glow */
    /* Celebrity customer — pink glow + sparkle */
    .customer.celebrity .customer-head,
    .customer.celebrity .customer-body {
      box-shadow: 0 0 8px #FF1493, 0 0 16px rgba(255,20,147,0.3);
    }
    .customer.celebrity::after {
      content: '✨';
      position: absolute;
      top: -6px;
      right: -4px;
      font-size: 0.5rem;
      animation: fairyTwinkle 1s ease-in-out infinite;
      z-index: 4;
    }
    .celebrity-flash {
      position: absolute;
      inset: 0;
      background: rgba(255,255,255,0.8);
      z-index: 50;
      animation: cameraFlash 0.6s ease-out forwards;
      pointer-events: none;
    }
    @keyframes cameraFlash {
      0% { opacity: 1; }
      100% { opacity: 0; }
    }

    /* Critic customer — dark sophisticated look */
    .customer.critic .customer-head,
    .customer.critic .customer-body {
      box-shadow: 0 0 6px rgba(69,90,100,0.4);
    }
    .customer.critic::after {
      content: '📝';
      position: absolute;
      bottom: 2px;
      right: -6px;
      font-size: 0.4rem;
      z-index: 4;
    }

    .customer.vip .customer-body,
    .customer.vip .customer-head {
      box-shadow: 0 0 10px var(--gold), 0 0 20px rgba(255,215,0,0.2);
      animation: vipGlow 1.5s ease-in-out infinite;
    }
    .customer.vip .customer-body::before {
      content: '';
      position: absolute;
      inset: -3px;
      border-radius: 8px;
      background: linear-gradient(135deg, transparent, rgba(255,215,0,0.15), transparent);
    }

    .customer.angry .customer-body { background-color: var(--coral) !important; }
    .customer.angry .customer-head { background-color: var(--coral) !important; }
    .customer.angry {
      animation: angryShake 0.15s ease-in-out infinite;
      filter: brightness(0.9) saturate(1.3);
    }

    .customer.impatient .customer-body {
      animation: impatientPulse 0.5s ease-in-out infinite;
    }

    .customer.happy-bounce {
      animation: happyBounce 0.5s ease-out;
    }

    /* B. Sparkle particles from serve celebration */
    .sparkle-particle {
      position: absolute;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: radial-gradient(circle, #FFD700, #DAA520);
      pointer-events: none;
      z-index: 110;
      animation: sparkle 0.5s ease-out forwards;
      will-change: transform, opacity;
    }

    /* C. Coin collection particles */
    .coin-particle {
      position: absolute;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: radial-gradient(circle, var(--gold) 0%, #DAA520 100%);
      pointer-events: none;
      z-index: 100;
      animation: coinParticleFloat 0.6s ease-out forwards;
      will-change: transform, opacity;
    }

    /* F. Combo lost flash */
    .combo-lost-flash {
      position: absolute;
      top: -4px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 0.75rem;
      font-weight: 800;
      color: #FF2D2D;
      white-space: nowrap;
      pointer-events: none;
      z-index: 500;
      animation: comboLostFade 1s ease-out forwards;
      text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }

    /* H. Tip indicator */
    .tip-float {
      position: absolute;
      font-size: 11px;
      font-weight: 700;
      color: #00CED1;
      pointer-events: none;
      z-index: 100;
      animation: textFloat 0.9s ease-out forwards;
      text-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 0 6px rgba(0,206,209,0.3);
      will-change: transform, opacity;
    }

    /* E. Tutorial overlay */
    .tutorial-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.55);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 650;
      animation: tutorialFadeIn 0.3s ease-out;
      cursor: pointer;
    }
    .tutorial-overlay .tutorial-finger {
      font-size: 3rem;
      margin-bottom: 0.5rem;
      animation: tutorialBob 1s ease-in-out infinite;
    }
    .tutorial-overlay .tutorial-text {
      color: white;
      font-size: 1.1rem;
      font-weight: 700;
      text-align: center;
      text-shadow: 0 2px 8px rgba(0,0,0,0.5);
      padding: 0 1rem;
    }

    /* I. Shop visual evolution classes */
    .shop-bg.shop-level-2 .shop-wall {
      background: linear-gradient(180deg, #E8D5C0 0%, #F2EADC 40%, #FAF5EE 100%) !important;
    }
    .shop-bg.shop-level-2 .shop-plant {
      display: block !important;
    }
    .shop-bg.shop-level-3 .shop-wall {
      background: linear-gradient(180deg, #D4B896 0%, #E8D5C0 30%, #F5EDE2 100%) !important;
      box-shadow: inset 0 0 40px rgba(245,197,66,0.08);
    }
    .shop-bg.shop-level-3 .shop-plant {
      display: block !important;
    }
    .shop-bg.shop-level-3 .shop-picture {
      display: block !important;
    }
    .shop-bg.shop-level-4 .shop-wall {
      background: linear-gradient(180deg, var(--taupe, #C9A87C) 0%, var(--wall-bottom, #D4B896) 20%, var(--wall-top, #E8D5C0) 50%, var(--cream, #F0E6D6) 100%) !important;
      box-shadow: inset 0 0 60px rgba(245,197,66,0.1);
    }
    .shop-bg.shop-level-4 .shop-plant {
      display: block !important;
    }
    .shop-bg.shop-level-4 .shop-picture {
      display: block !important;
    }
    .shop-bg.shop-level-4 .shop-wall::before {
      content: '';
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        45deg,
        transparent 0px, transparent 8px,
        rgba(245,197,66,0.04) 8px, rgba(245,197,66,0.04) 10px
      );
      z-index: 1;
      pointer-events: none;
    }
    .shop-bg.shop-level-4 ~ .counter {
      border-top: 2px solid var(--vip-gold);
      box-shadow: 0 4px 0 0 #8B6914, 0 6px 12px rgba(0,0,0,0.3), 0 -1px 4px rgba(255,215,0,0.2);
    }
    .shop-plant {
      display: none;
      position: absolute;
      bottom: 2px;
      left: 8%;
      font-size: 16px;
      z-index: 8;
      pointer-events: none;
    }
    .shop-picture {
      display: none;
      position: absolute;
      top: 5%;
      left: 42%;
      width: 22px;
      height: 18px;
      background: linear-gradient(135deg, #8B6914, #D4A54A);
      border: 2px solid #B8860B;
      border-radius: 2px;
      z-index: 6;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    /* J. Confetti */
    .confetti-piece {
      position: absolute;
      width: 4px;
      height: 8px;
      pointer-events: none;
      z-index: 200;
      animation: confettiFall 2s ease-in forwards;
      will-change: transform, opacity;
    }
    .golden-flash {
      position: fixed;
      inset: 0;
      background: rgba(255, 215, 0, 0.3);
      pointer-events: none;
      z-index: 199;
      animation: goldenFlash 0.3s ease-out forwards;
    }

    /* K. Locked upgrade teaser (deprecated — use .locked) */

    .customer-face {
      position: absolute;
      bottom: 42px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 10px;
      pointer-events: none;
    }

    /* Coin pop animation */
    .coin-pop {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: radial-gradient(circle, var(--gold) 0%, #DAA520 60%, #B8860B 100%);
      box-shadow: 0 0 4px rgba(245,197,66,0.5);
      pointer-events: none;
      z-index: 100;
      animation: coinFloat 0.7s ease-out forwards;
      will-change: transform, opacity;
    }

    .coin-to-wallet {
      position: fixed;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: radial-gradient(circle, var(--gold) 0%, #DAA520 60%, #B8860B 100%);
      box-shadow: 0 0 6px rgba(245,197,66,0.6);
      pointer-events: none;
      z-index: 3000;
      will-change: transform, opacity;
    }

    .floating-text {
      position: absolute;
      font-size: 16px;
      font-weight: 800;
      color: var(--gold);
      pointer-events: none;
      z-index: 100;
      animation: textFloat 0.9s ease-out forwards;
      text-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 0 8px rgba(245,197,66,0.3);
      will-change: transform, opacity;
    }

    /* Rush hour banner */
    .rush-banner {
      position: fixed;
      top: calc(104px + env(safe-area-inset-top, 0px));
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(135deg, var(--coral), #ff8a65);
      color: white;
      padding: 0.4rem 1.2rem;
      border-radius: 20px;
      font-weight: 800;
      font-size: 0.85rem;
      white-space: nowrap;
      z-index: 300;
      animation: rushPulse 0.5s ease-in-out infinite alternate;
      box-shadow: 0 2px 10px rgba(232,115,106,0.5);
      display: none;
    }
    .rush-banner.visible { display: block; }

    /* Screen shake */
    .game-wrap.screen-shake {
      animation: screenShake 0.4s ease-out;
    }

    /* Overlays */
    .overlay {
      position: fixed;
      inset: 0;
      background: rgba(92, 61, 46, 0.85);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 600;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s;
      padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
    }
    .overlay.visible {
      opacity: 1;
      pointer-events: auto;
    }

    .modal {
      background: var(--white);
      color: #5C3D2E;
      border-radius: 16px;
      padding: 1.5rem;
      width: 90%;
      max-width: 380px;
      max-height: 85vh;
      overflow-y: auto;
      box-shadow: 0 10px 40px rgba(0,0,0,0.3);
      text-align: center;
    }

    .modal h2 {
      font-size: 1.3rem;
      margin-bottom: 1rem;
      color: var(--brown);
    }

    .modal-row {
      display: flex;
      justify-content: space-between;
      padding: 0.5rem 0;
      border-bottom: 1px solid #eee;
      font-size: 0.95rem;
    }
    .modal-row:last-of-type { border-bottom: none; }

    .new-best {
      color: var(--gold);
      font-weight: 800;
      font-size: 1.1rem;
      margin: 0.8rem 0;
      animation: bestPulse 0.8s ease-in-out infinite alternate;
    }

    .btn {
      background: var(--matcha);
      color: white;
      border: none;
      padding: 0.75rem 2rem;
      border-radius: 25px;
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      margin: 0.5rem 0.3rem;
      min-height: 44px;
      min-width: 44px;
      transition: transform 0.1s, background 0.2s;
    }
    .btn:hover { transform: scale(1.03); }
    .btn:active { transform: scale(0.97); }

    .btn-secondary {
      background: var(--taupe);
    }

    .btn-small {
      padding: 0.4rem 1rem;
      font-size: 0.85rem;
    }

    .btn-danger {
      background: var(--coral);
    }

    /* Title screen */
    .title-logo {
      font-size: 2.5rem;
      margin-bottom: 0.3rem;
    }

    .title-name {
      font-size: 1.8rem;
      font-weight: 800;
      color: var(--brown);
      margin-bottom: 0.5rem;
    }

    .title-tagline {
      font-size: 0.9rem;
      color: #6d5a4a;
      margin-bottom: 1.5rem;
    }

    .title-best {
      font-size: 0.85rem;
      color: var(--taupe);
      margin-bottom: 1rem;
    }

    /* Upgrade shop */
    .shop-modal {
      text-align: left;
      max-height: 90vh;
    }

    .shop-preview {
      width: 100%;
      height: 80px;
      border-radius: 10px;
      margin-bottom: 0.8rem;
      background: linear-gradient(180deg, #E8D5C0 0%, #F0E6D6 20%, #C4A276 40%, #3D2A5C 55%, #4E3872 100%);
      position: relative;
      overflow: hidden;
      border: 2px solid #D4A574;
    }
    .shop-preview-counter {
      position: absolute;
      top: 30%; left: 0; right: 0;
      height: 4px;
      background: linear-gradient(180deg, #D4A54A, #B8860B);
      box-shadow: 0 2px 0 #8B6914;
    }
    .shop-preview-label {
      position: absolute;
      bottom: 4px; right: 6px;
      font-size: 8px;
      color: rgba(255,255,255,0.6);
      font-weight: 600;
    }
    .shop-preview-machines {
      position: absolute;
      top: 14%; left: 5%;
      display: flex;
      gap: 4px;
    }
    .shop-preview-machine {
      width: 10px;
      height: 14px;
      background: #FFDAB9;
      border-radius: 50% 50% 2px 2px;
      border: 1px solid #ccc;
    }
    .shop-preview-vip {
      position: absolute;
      top: 52%; left: 10%;
      width: 12px;
      height: 12px;
      background: #6D4C41;
      border-radius: 50%;
      opacity: 0.3;
    }
    .shop-preview-vip.active {
      opacity: 1;
      box-shadow: 0 0 4px rgba(255,215,0,0.4);
    }
    .shop-preview-rope {
      position: absolute;
      top: 50%; left: 5%; right: 5%;
      height: 2px;
      background: var(--vip-gold);
    }

    /* Tabbed shop header */
    .shop-header {
      position: sticky;
      top: -1.5rem;
      background: var(--white, #FEFEFE);
      z-index: 3;
      padding: 1rem 0 0;
      margin: -1.5rem -1.5rem 0.5rem;
      padding-left: 1rem;
      padding-right: 1rem;
      border-radius: 16px 16px 0 0;
    }
    .shop-wallet {
      text-align: center;
      font-size: 0.95rem;
      font-weight: 700;
      color: #5C3D2E;
      margin-bottom: 0.4rem;
    }
    .shop-tab-bar {
      display: flex;
      gap: 0;
      border-bottom: 2px solid #eee;
      position: relative;
    }
    .shop-tab {
      flex: 1;
      background: none;
      border: none;
      padding: 0.5rem 0.25rem;
      font-size: 0.75rem;
      font-weight: 600;
      color: #999;
      cursor: pointer;
      border-bottom: 2px solid transparent;
      margin-bottom: -2px;
      min-height: 44px;
      transition: color 0.2s, border-color 0.2s;
    }
    .shop-tab.active {
      color: #5C3D2E;
      border-bottom-color: var(--gold, #F5C542);
    }
    .shop-tab:active { transform: scale(0.97); }
    .shop-content {
      min-height: 200px;
      animation: tabSlideIn 0.2s ease-out;
    }
    @keyframes tabSlideIn {
      from { opacity: 0.5; transform: translateX(8px); }
      to { opacity: 1; transform: translateX(0); }
    }
    /* Swipe hint indicator on tab bar */
    .shop-tab-bar::after {
      content: none;
      padding: 2px 4px;
    }
    /* Chips/Tags */
    .chip {
      display: inline-block;
      font-size: 0.5rem;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: 8px;
      vertical-align: middle;
      margin-left: 4px;
      letter-spacing: 0.3px;
    }
    .chip-recommended {
      background: var(--matcha, #7FB069);
      color: #fff;
    }
    .chip-maxed {
      background: var(--gold, #F5C542);
      color: #fff;
    }
    .chip-new {
      background: var(--coral, #E8836B);
      color: #fff;
    }
    .chip-locked {
      background: #ccc;
      color: #666;
    }
    .shop-maxed-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0.4rem 0.75rem;
      margin-bottom: 0.5rem;
      background: linear-gradient(135deg, rgba(245,197,66,0.08), rgba(245,197,66,0.04));
      border: 1px solid rgba(245,197,66,0.2);
      border-radius: 8px;
    }
    .shop-maxed-icons {
      font-size: 0.85rem;
      letter-spacing: 2px;
      line-height: 1;
    }
    /* Decoration grid in shop */
    .shop-decor-progress {
      text-align: center;
      font-size: 0.7rem;
      color: var(--taupe, #999);
      margin-bottom: 0.5rem;
    }
    .shop-decor-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.5rem;
    }
    .decor-card {
      background: rgba(0,0,0,0.04);
      border: 2px solid transparent;
      border-radius: 10px;
      padding: 0.5rem;
      text-align: center;
      transition: border-color 0.2s;
    }
    .decor-card.owned { border-color: var(--matcha); background: rgba(127,176,105,0.05); }
    .decor-card.affordable { border-color: var(--gold); }
    .decor-preview { font-size: 1.5rem; margin-bottom: 2px; }
    .decor-preview-art {
      width: 100%;
      height: 50px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      margin-bottom: 4px;
      border-radius: 6px;
      background: rgba(0,0,0,0.02);
    }
    .decor-preview-art .shop-decor {
      position: relative !important;
      transform: scale(1.3);
      left: auto !important;
      right: auto !important;
      top: auto !important;
      bottom: auto !important;
      margin: 0 auto;
    }
    /* Full-width overlays need explicit sizing in preview */
    .decor-preview-art .decor-floor {
      width: 90% !important;
      height: 30px !important;
      border-radius: 4px;
      opacity: 1 !important;
    }
    .decor-preview-art .decor-gold-counter {
      width: 90% !important;
      height: 10px !important;
      border-radius: 4px;
    }
    .decor-preview-art .decor-bamboo,
    .decor-preview-art .decor-sand,
    .decor-preview-art .decor-gingerbread,
    .decor-preview-art .decor-diamond-bar {
      width: 90% !important;
      height: 20px !important;
      border-radius: 4px;
    }
    .decor-name { font-size: 0.7rem; font-weight: 700; color: #5C3D2E; }
    .decor-price { display: none; }
    .decor-owned {
      font-size: 0.65rem;
      color: var(--matcha);
      font-weight: 700;
      margin-top: 4px;
      padding: 4px 8px;
      background: rgba(127,176,105,0.1);
      border-radius: 6px;
    }
    .decor-buy {
      width: 100%;
      margin-top: 6px;
      min-height: 36px;
      font-size: 0.7rem;
      font-weight: 700;
      border: none;
      border-radius: 8px;
      background: var(--gold, #F5C542);
      color: #5C3D2E;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: transform 0.1s, opacity 0.1s;
    }
    .decor-buy:active { transform: scale(0.95); }
    .decor-buy:disabled {
      background: #e8e8e8;
      color: #aaa;
      cursor: default;
    }

    .upgrade-card {
      background: var(--cream);
      border: 2px solid #eee;
      border-radius: 12px;
      padding: 0.75rem;
      margin-bottom: 0.6rem;
      display: flex;
      align-items: center;
      gap: 0.6rem;
      transition: border-color 0.2s, opacity 0.2s;
    }
    .upgrade-card.affordable { border-color: var(--matcha); background: rgba(125,184,125,0.05); }
    .upgrade-card.recommended { border-color: var(--matcha); box-shadow: 0 0 8px rgba(127,176,105,0.3); position: relative; }
    .upgrade-card.maxed {
      border-color: rgba(245,197,66,0.3);
      background: linear-gradient(135deg, rgba(245,197,66,0.06), rgba(245,197,66,0.02));
      opacity: 0.75;
      padding: 0.5rem 0.75rem;
    }
    .upgrade-card.locked {
      opacity: 0.6;
      border-color: #e0e0e0;
      border-style: solid;
      background: rgba(0,0,0,0.02);
    }
    .upgrade-card.too-expensive { border-color: #ddd; opacity: 0.7; }

    .upgrade-icon {
      font-size: 1.5rem;
      min-width: 36px;
      text-align: center;
    }

    .upgrade-info {
      flex: 1;
      min-width: 0;
    }

    .upgrade-name {
      font-weight: 700;
      font-size: 0.85rem;
      color: var(--brown);
    }

    .upgrade-desc {
      font-size: 0.7rem;
      color: #6d5a4a;
      margin: 0.15rem 0;
    }

    .upgrade-level {
      font-size: 0.7rem;
      color: var(--taro);
      font-weight: 600;
    }

    .upgrade-visible-tag {
      font-size: 0.6rem;
      color: var(--matcha);
      font-weight: 600;
      opacity: 0.8;
    }

    .upgrade-buy-btn {
      background: var(--matcha);
      color: white;
      border: none;
      padding: 0.35rem 0;
      border-radius: 8px;
      font-size: 0.75rem;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
      min-height: 44px;
      width: 80px;
      flex-shrink: 0;
      text-align: center;
    }
    .upgrade-buy-btn:disabled {
      background: #ccc;
      cursor: default;
    }
    .upgrade-buy-btn.affordable:hover { background: #6aa86a; }
    .upgrade-buy-btn:active { transform: scale(0.95); }
    .upgrade-buy-btn:disabled:active { transform: none; opacity: 0.5; }

    .shop-actions {
      display: flex;
      flex-direction: column;
      gap: 0;
      position: sticky;
      bottom: -1.5rem;
      background: var(--white, #FEFEFE);
      padding: 0.75rem 1.5rem;
      margin: 1rem -1.5rem -1.5rem;
      box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
      border-top: 1px solid rgba(0,0,0,0.06);
      border-radius: 0 0 16px 16px;
      z-index: 2;
      width: calc(100% + 3rem);
    }
    /* flex:1 now on .shop-actions-row .btn:first-child */
    .shop-actions-row {
      display: flex;
      gap: 0.5rem;
      width: 100%;
    }
    .shop-actions-row .btn:first-child {
      flex: 1;
    }

    /* Achievement toast */
    .achievement-toast {
      position: fixed;
      top: calc(90px + env(safe-area-inset-top, 0px));
      left: 50%;
      transform: translateX(-50%) translateY(-200px);
      background: linear-gradient(135deg, var(--taro), #b09dd4);
      color: white;
      padding: 0.6rem 1.2rem;
      border-radius: 12px;
      font-size: 0.8rem;
      font-weight: 700;
      z-index: 700;
      transition: transform 0.4s ease-out, opacity 0.4s ease-out;
      box-shadow: 0 4px 15px rgba(155, 125, 184, 0.4);
      text-align: center;
      max-width: 300px;
      opacity: 0;
      pointer-events: none;
    }
    .achievement-toast.show {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
    }

    /* Pause overlay */
    .pause-content {
      text-align: center;
    }

    /* ===== ANIMATIONS ===== */
    @keyframes floatOrder {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-3px); }
    }

    @keyframes coinFloat {
      0% { opacity: 1; transform: translateY(0) scale(1); }
      50% { opacity: 0.8; }
      100% { opacity: 0; transform: translateY(-50px) scale(0.3); }
    }

    @keyframes textFloat {
      0% { opacity: 1; transform: translateY(0) scale(1); }
      40% { opacity: 1; transform: translateY(-15px) scale(1.15); }
      100% { opacity: 0; transform: translateY(-35px) scale(1.2); }
    }

    @keyframes vipGlow {
      0%, 100% { box-shadow: 0 0 6px var(--gold), 0 0 12px rgba(255,215,0,0.15); }
      50% { box-shadow: 0 0 14px var(--gold), 0 0 24px rgba(255,215,0,0.25); }
    }

    @keyframes vipAmbientGlow {
      0%, 100% { opacity: 0.6; }
      50% { opacity: 1; }
    }

    @keyframes impatientPulse {
      0%, 100% { transform: translateX(-50%) scale(1); }
      50% { transform: translateX(-50%) scale(1.04); }
    }

    @keyframes rushPulse {
      0% { transform: translateX(-50%) scale(1); }
      100% { transform: translateX(-50%) scale(1.05); }
    }

    @keyframes bestPulse {
      0% { transform: scale(1); }
      100% { transform: scale(1.05); }
    }

    .personal-best-banner {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      z-index: 3000;
      pointer-events: none;
      animation: bestBannerFade 2.5s ease-out forwards;
    }
    .personal-best-banner .pb-label {
      font-size: 1.6rem;
      font-weight: 900;
      color: var(--gold);
      text-shadow: 0 2px 12px rgba(245,197,66,0.6), 0 0 40px rgba(245,197,66,0.3);
      animation: bestBannerScale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }
    .personal-best-banner .pb-score {
      font-size: 2.2rem;
      font-weight: 900;
      color: #fff;
      text-shadow: 0 2px 12px rgba(0,0,0,0.5);
      margin-top: 0.3rem;
      animation: bestBannerScale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
    }
    @keyframes bestBannerScale {
      0% { transform: scale(0); opacity: 0; }
      100% { transform: scale(1); opacity: 1; }
    }
    @keyframes bestBannerFade {
      0%, 60% { opacity: 1; }
      100% { opacity: 0; }
    }

    @keyframes baristaIdle {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-1px); }
    }

    @keyframes baristaWorking {
      0%, 100% { transform: translateY(0); }
      25% { transform: translateY(-2px) rotate(2deg); }
      75% { transform: translateY(-2px) rotate(-2deg); }
    }

    @keyframes servingGlow {
      0%, 100% { box-shadow: 0 0 8px rgba(125, 184, 125, 0.4); }
      50% { box-shadow: 0 0 16px rgba(125, 184, 125, 0.8); }
    }

    @keyframes steamRise {
      0% { opacity: 0.5; transform: translateY(0) scale(1); }
      50% { opacity: 0.3; transform: translateY(-12px) scale(1.3); }
      100% { opacity: 0; transform: translateY(-25px) scale(0.6); }
    }

    @keyframes walkBob {
      0%, 100% { transform: translateX(var(--tx, 0)) translateY(0) rotate(0deg); }
      25% { transform: translateX(var(--tx, 0)) translateY(-1px) rotate(-1deg); }
      50% { transform: translateX(var(--tx, 0)) translateY(-1.5px) rotate(0deg); }
      75% { transform: translateX(var(--tx, 0)) translateY(-1px) rotate(1deg); }
    }

    @keyframes happyBounce {
      0% { transform: translateX(var(--tx, 0)) translateY(0); }
      30% { transform: translateX(var(--tx, 0)) translateY(-12px); }
      50% { transform: translateX(var(--tx, 0)) translateY(-10px) scale(1.05); }
      70% { transform: translateX(var(--tx, 0)) translateY(-2px); }
      100% { transform: translateX(var(--tx, 0)) translateY(0); }
    }

    @keyframes angryShake {
      0%, 100% { transform: translateX(var(--tx, 0)); }
      25% { transform: translateX(calc(var(--tx, 0px) + 3px)); }
      75% { transform: translateX(calc(var(--tx, 0px) - 3px)); }
    }

    @keyframes screenShake {
      0%, 100% { transform: translateX(0); }
      10% { transform: translateX(-4px) rotate(-0.5deg); }
      30% { transform: translateX(3px) rotate(0.3deg); }
      50% { transform: translateX(-2px) rotate(-0.2deg); }
      70% { transform: translateX(2px); }
      90% { transform: translateX(-1px); }
    }

    @keyframes comboGentlePulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.05); }
    }

    @keyframes comboStrongPulse {
      0%, 100% { transform: scale(1); text-shadow: 0 0 8px rgba(255,107,53,0.5); }
      50% { transform: scale(1.1); text-shadow: 0 0 14px rgba(255,107,53,0.7); }
    }

    @keyframes comboFirePulse {
      0%, 100% { transform: scale(1); text-shadow: 0 0 12px rgba(255,45,45,0.7), 0 0 24px rgba(255,100,0,0.4); }
      50% { transform: scale(1.15); text-shadow: 0 0 18px rgba(255,45,45,0.9), 0 0 36px rgba(255,100,0,0.6); }
    }

    @keyframes sparkle {
      0% { opacity: 1; transform: translate(var(--sx, 0), var(--sy, 0)) scale(1); }
      100% { opacity: 0; transform: translate(calc(var(--sx, 0) * 3), calc(var(--sy, 0) * 3)) scale(0); }
    }

    @keyframes coinParticleFloat {
      0% { opacity: 1; transform: translate(var(--dx, 0), 0) scale(1); }
      100% { opacity: 0; transform: translate(var(--dx, 0), -40px) scale(0.5); }
    }

    @keyframes comboLostFade {
      0% { opacity: 0; transform: translateX(-50%) translateY(0); }
      20% { opacity: 1; transform: translateX(-50%) translateY(-4px); }
      80% { opacity: 1; transform: translateX(-50%) translateY(-8px); }
      100% { opacity: 0; transform: translateX(-50%) translateY(-14px); }
    }

    @keyframes lightFlicker {
      0%, 40%, 60%, 100% { opacity: 1; }
      45% { opacity: 0.95; }
      55% { opacity: 0.97; }
    }

    @keyframes tutorialFadeIn {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }

    @keyframes tutorialBob {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    @keyframes confettiFall {
      0% { opacity: 1; transform: translate(var(--cx, 0), 0) rotate(0deg); }
      100% { opacity: 0; transform: translate(calc(var(--cx, 0) + var(--cdx, 0)), var(--cfall, 400px)) rotate(var(--crot, 720deg)); }
    }

    @keyframes goldenFlash {
      0% { opacity: 1; }
      100% { opacity: 0; }
    }

    /* Prestige button */
    .prestige-btn {
      background: linear-gradient(135deg, var(--gold), #DAA520) !important;
      color: var(--brown) !important;
      font-weight: 800 !important;
      box-shadow: 0 2px 12px rgba(255,215,0,0.4);
      animation: prestigeGlow 2s ease-in-out infinite;
    }
    @keyframes prestigeGlow {
      0%, 100% { box-shadow: 0 2px 12px rgba(255,215,0,0.3); }
      50% { box-shadow: 0 2px 20px rgba(255,215,0,0.6), 0 0 30px rgba(255,215,0,0.2); }
    }

    /* Achievements gallery */
    .ach-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.5rem;
      margin: 0.75rem 0;
    }
    .ach-card {
      background: rgba(0,0,0,0.04);
      border: 1px solid rgba(0,0,0,0.08);
      border-radius: 10px;
      padding: 0.5rem;
      text-align: center;
      transition: transform 0.15s;
    }
    .ach-card.locked {
      opacity: 0.4;
      filter: grayscale(0.6);
    }
    .ach-card.unlocked {
      background: linear-gradient(135deg, rgba(155,125,184,0.12), rgba(245,197,66,0.08));
      border-color: rgba(155,125,184,0.3);
    }
    .ach-card .ach-icon {
      font-size: 1.5rem;
      margin-bottom: 0.2rem;
    }
    .ach-card .ach-name {
      font-size: 0.7rem;
      font-weight: 700;
      color: var(--brown);
      line-height: 1.2;
    }
    .ach-card .ach-desc {
      font-size: 0.6rem;
      color: #888;
      margin-top: 0.15rem;
      line-height: 1.2;
    }
    .ach-card .ach-xp {
      font-size: 0.6rem;
      font-weight: 700;
      color: var(--taro);
      margin-top: 0.2rem;
    }
    .ach-summary {
      text-align: center;
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--brown);
      margin-bottom: 0.5rem;
    }
    .ach-summary span { color: var(--taro); }

    .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;
    }

    :focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 2px;
    }

    /* ===== DECORATION CSS ART ===== */

    /* ---------- SHARED ANIMATIONS ---------- */
    @keyframes neonPulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.6; }
    }
    @keyframes neonFlicker {
      0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; text-shadow: 0 0 6px #FF69B4, 0 0 12px #FF1493, 0 0 20px #FF69B4; }
      20%, 24%, 55% { opacity: 0.4; text-shadow: none; }
    }
    @keyframes fairyTwinkle {
      0%, 100% { opacity: 0.5; }
      50% { opacity: 1; }
    }
    @keyframes jukeboxBob {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-3px); }
    }
    @keyframes fishSwim {
      0%, 100% { transform: translateX(0); }
      50% { transform: translateX(8px); }
    }
    @keyframes decoSway {
      0%, 100% { transform: rotate(-2deg); }
      50% { transform: rotate(2deg); }
    }
    @keyframes decoGlow {
      0%, 100% { filter: brightness(1); }
      50% { filter: brightness(1.3); }
    }
    @keyframes decoSpin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    @keyframes decoPulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.06); }
    }
    @keyframes shimmerSweep {
      0% { left: -40%; }
      100% { left: 140%; }
    }
    @keyframes steamRise {
      0% { opacity: 0.7; transform: translateY(0) scale(1); }
      100% { opacity: 0; transform: translateY(-10px) scale(1.5); }
    }
    @keyframes flameFlicker {
      0%, 100% { transform: scaleY(1) scaleX(1); }
      25% { transform: scaleY(1.1) scaleX(0.9); }
      50% { transform: scaleY(0.9) scaleX(1.1); }
      75% { transform: scaleY(1.05) scaleX(0.95); }
    }
    @keyframes clockTick {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    @keyframes noteFloat {
      0% { opacity: 1; transform: translateY(0) rotate(0deg); }
      100% { opacity: 0; transform: translateY(-12px) rotate(20deg); }
    }
    @keyframes waterfallFlow {
      0% { background-position: 0 0; }
      100% { background-position: 0 20px; }
    }
    @keyframes sparkle {
      0%, 100% { opacity: 0; transform: scale(0); }
      50% { opacity: 1; transform: scale(1); }
    }
    @keyframes dustFloat {
      0% { transform: translateY(0) translateX(0); opacity: 0; }
      20% { opacity: 0.4; }
      80% { opacity: 0.3; }
      100% { transform: translateY(-40px) translateX(15px); opacity: 0; }
    }
    @keyframes champagneDrip {
      0% { top: 0; opacity: 1; }
      100% { top: 10px; opacity: 0; }
    }
    @keyframes twinkleStar {
      0%, 100% { opacity: 0.2; }
      50% { opacity: 1; }
    }
    @keyframes diamondCatch {
      0%, 80%, 100% { opacity: 0.3; }
      40% { opacity: 1; }
    }

    /* ---------- BOBA BLISS ---------- */

    /* Neon sign — tube-style lettering with flicker */
    .decor-neon { z-index: 7; }
    .decor-neon .neon-tube {
      display: block; padding: 3px 8px; border: 2px solid #FF69B4; border-radius: 6px;
      background: rgba(255,105,180,0.08); font-size: 0.55rem; font-weight: 900;
      color: #FF69B4; letter-spacing: 3px;
      text-shadow: 0 0 6px #FF69B4, 0 0 12px #FF1493, 0 0 20px #FF69B4;
      animation: neonFlicker 4s ease-in-out infinite;
    }
    .decor-neon .neon-tube::before {
      content: ''; position: absolute; inset: -1px; border: 1px solid rgba(255,105,180,0.3);
      border-radius: 7px; pointer-events: none;
    }

    /* Plants (kept from original) */
    .pot-plant { display: flex; flex-direction: column; align-items: center; }
    .pot-leaves { width: 14px; height: 10px; background: radial-gradient(ellipse at center, #4CAF50, #2E7D32); border-radius: 50% 50% 30% 30%; position: relative; animation: decoSway 3s ease-in-out infinite; }
    .pot-leaves::before, .pot-leaves::after { content: ''; position: absolute; width: 8px; height: 7px; background: #66BB6A; border-radius: 50%; top: -3px; }
    .pot-leaves::before { left: -3px; transform: rotate(-20deg); }
    .pot-leaves::after { right: -3px; transform: rotate(20deg); }
    .pot-leaves.small { width: 10px; height: 7px; }
    .pot-base { width: 10px; height: 8px; background: linear-gradient(180deg, #8D6E63, #6D4C41); border-radius: 0 0 3px 3px; clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%); }
    .pot-base.small { width: 8px; height: 6px; }

    /* Fairy lights (kept from original) */
    .fairy-bulb {
      display: inline-block; width: 5px; height: 7px;
      background: var(--c, #FFD93D); border-radius: 50% 50% 40% 40%;
      box-shadow: 0 0 4px var(--c, #FFD93D), 0 0 8px var(--c, #FFD93D);
      animation: fairyTwinkle 2.5s ease-in-out infinite;
      animation-delay: var(--d, 0s); position: relative;
    }
    .fairy-bulb::before {
      content: ''; position: absolute; top: -3px; left: 50%; transform: translateX(-50%);
      width: 3px; height: 3px; background: #555; border-radius: 1px;
    }
    .decor-fairy::before {
      content: ''; position: absolute; top: 3px; left: 0; right: 0;
      height: 1px; background: #444; z-index: -1;
    }

    /* Flooring — wood planks */
    .decor-floor {
      z-index: 3;
      background:
        repeating-linear-gradient(90deg,
          #8B6F47 0px, #8B6F47 18px,
          #7A5E3A 18px, #7A5E3A 19px,
          #A0845C 19px, #A0845C 38px,
          #8B7045 38px, #8B7045 39px);
      opacity: 0.7;
    }
    .decor-floor::before {
      content: ''; position: absolute; inset: 0;
      background: repeating-linear-gradient(0deg, transparent 0px, transparent 14px, rgba(0,0,0,0.06) 14px, rgba(0,0,0,0.06) 15px);
    }

    /* Jukebox */
    .decor-jukebox { z-index: 11; }
    .jukebox-body {
      width: 20px; height: 28px; background: linear-gradient(180deg, #5C3D2E, #8B5E3C, #5C3D2E);
      border-radius: 6px 6px 2px 2px; position: relative; overflow: visible;
    }
    .jukebox-body::before {
      content: ''; position: absolute; top: 3px; left: 3px; right: 3px; height: 6px;
      background: linear-gradient(180deg, #FF6B35, #FFD700); border-radius: 3px;
      animation: decoGlow 2s ease-in-out infinite;
    }
    .jukebox-body::after {
      content: ''; position: absolute; top: 12px; left: 4px; right: 4px; height: 10px;
      background: repeating-radial-gradient(circle, #3E2723 0px, #3E2723 1px, transparent 1px, transparent 3px);
      border-radius: 2px;
    }
    .jukebox-note {
      position: absolute; top: -4px; right: -2px; width: 5px; height: 5px;
      font-size: 7px; line-height: 1; color: #FFD700;
      animation: noteFloat 2s ease-out infinite;
    }

    /* Aquarium (kept + improved) */
    .aq-tank { width: 36px; height: 22px; background: rgba(100,200,255,0.15); border: 2px solid rgba(100,200,255,0.3); border-radius: 3px; position: relative; overflow: hidden; }
    .aq-water { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(100,200,255,0.1), rgba(50,150,220,0.25)); }
    .aq-fish { position: absolute; width: 6px; height: 4px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; animation: fishSwim 3s ease-in-out infinite; }
    .aq-fish.f1 { background: #FF6B35; top: 6px; left: 5px; }
    .aq-fish.f2 { background: #FFD700; top: 12px; left: 18px; animation-delay: -1.5s; animation-direction: reverse; }
    .aq-fish::after { content: ''; position: absolute; right: -3px; top: 1px; border-left: 4px solid currentColor; border-top: 2px solid transparent; border-bottom: 2px solid transparent; }
    .aq-fish.f1::after { border-left-color: #FF6B35; }
    .aq-fish.f2::after { border-left-color: #FFD700; }
    .aq-plant { position: absolute; bottom: 0; left: 50%; width: 3px; height: 10px; background: linear-gradient(180deg, #66BB6A, #388E3C); border-radius: 2px 2px 0 0; transform: translateX(-50%); animation: decoSway 4s ease-in-out infinite; }

    /* Chandelier (kept from original) */
    .ch-chain { width: 2px; height: 6px; background: #888; margin: 0 auto; }
    .ch-body { width: 24px; height: 8px; background: linear-gradient(180deg, #C9B037, #FFD700, #C9B037); border-radius: 0 0 50% 50%; position: relative; margin: 0 auto; box-shadow: 0 2px 8px rgba(255,215,0,0.3); }
    .ch-arm { position: absolute; top: -2px; width: 8px; height: 2px; background: #C9B037; }
    .ch-arm.left { left: -4px; transform: rotate(-15deg); }
    .ch-arm.right { right: -4px; transform: rotate(15deg); }
    .ch-crystal { position: absolute; bottom: -6px; width: 3px; height: 5px; background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(200,200,255,0.6)); border-radius: 0 0 50% 50%; animation: fairyTwinkle 2s ease-in-out infinite; }
    .ch-crystal.c1 { left: 4px; animation-delay: 0s; }
    .ch-crystal.c2 { left: 50%; transform: translateX(-50%); animation-delay: 0.6s; }
    .ch-crystal.c3 { right: 4px; animation-delay: 1.2s; }

    /* Gold counter — metallic with sweeping shine */
    .decor-gold-counter {
      z-index: 12; overflow: hidden;
      background: linear-gradient(90deg, #FFD700 0%, #FFF8DC 30%, #FFD700 50%, #FFF8DC 70%, #FFD700 100%);
      box-shadow: 0 2px 8px rgba(255,215,0,0.5), 0 -1px 4px rgba(255,215,0,0.3);
      border-top: 1px solid rgba(255,255,255,0.5);
      border-bottom: 1px solid rgba(184,134,11,0.5);
    }
    .decor-gold-counter::after {
      content: ''; position: absolute; top: -2px; width: 30%; height: 8px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
      animation: shimmerSweep 3s ease-in-out infinite;
    }

    /* ---------- BEAN & BREW ---------- */

    /* Chalkboard */
    .decor-chalk { z-index: 7; }
    .chalk-board {
      width: 44px; height: 52px; background: #1a1a1a; border: 2px solid #DEB887;
      border-radius: 2px; position: relative; overflow: hidden;
      padding: 2px 3px;
      box-shadow: 1px 2px 4px rgba(0,0,0,0.3);
    }
    .chalk-title {
      font-size: 0.25rem;
      color: rgba(255,255,255,0.7);
      text-align: center;
      font-weight: 700;
      letter-spacing: 1px;
      border-bottom: 1px solid rgba(255,255,255,0.15);
      padding-bottom: 1px;
      margin-bottom: 1px;
    }
    .chalk-item {
      font-size: 0.2rem;
      color: rgba(255,255,255,0.55);
      line-height: 1.6;
      display: flex;
      justify-content: space-between;
    }
    .chalk-board::after {
      content: ''; position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%);
      width: 12px; height: 2px; background: #F5F5DC; border-radius: 1px;
    }

    /* Vintage Clock decoration (replaces default wall clock) */
    .decor-clock { z-index: 7; }
    .decor-clock .clock-face {
      width: 28px; height: 28px;
      background: radial-gradient(circle, #FFF 0%, #F5F0E8 70%, #E0D5C5 100%);
      border: 2px solid #8B7355;
      border-radius: 50%; position: relative;
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }
    .decor-clock .clock-face::before {
      content: ''; position: absolute; top: -5px; left: 50%;
      transform: translateX(-50%);
      width: 6px; height: 4px;
      background: #8B7355; border-radius: 2px 2px 0 0;
    }
    .decor-clock .clock-face::after { content: none; }
    .decor-clock .clock-hand {
      position: absolute;
      bottom: 50%; left: 50%;
      width: 2px; height: 9px;
      background: var(--brown, #5C3D2E);
      transform-origin: bottom center;
      transform: rotate(0deg);
      border-radius: 1px;
      z-index: 1;
    }
    .decor-clock .clock-dot {
      position: absolute; top: 50%; left: 50%; width: 2px; height: 2px;
      background: #333; border-radius: 50%; transform: translate(-50%, -50%); z-index: 2;
    }

    /* Edison bulbs */
    .decor-edison { z-index: 5; }
    .edison-row { display: flex; justify-content: space-around; width: 100%; }
    .edison-bulb {
      width: 8px; height: 12px; position: relative; display: flex; flex-direction: column; align-items: center;
    }
    .edison-bulb .eb-wire { width: 1px; height: 5px; background: #444; }
    .edison-bulb .eb-glass {
      width: 7px; height: 9px; background: radial-gradient(ellipse at center, #FFE0A0, #FFB347);
      border-radius: 40% 40% 50% 50%; box-shadow: 0 0 6px rgba(255,179,71,0.5), 0 0 12px rgba(255,179,71,0.2);
      animation: fairyTwinkle 3s ease-in-out infinite;
    }
    .edison-bulb:nth-child(2) .eb-glass { animation-delay: 1s; }
    .edison-bulb:nth-child(3) .eb-glass { animation-delay: 2s; }

    /* Leather sofas (seating area) */
    .decor-leather { z-index: 11; }
    .leather-sofa {
      position: absolute;
      background: linear-gradient(180deg, #8B4513, #6B3410);
      border-radius: 4px 4px 2px 2px;
      box-shadow: inset 0 2px 4px rgba(255,255,255,0.1), 0 1px 3px rgba(0,0,0,0.2);
    }
    .leather-sofa::after {
      content: ''; position: absolute; top: -7px; left: 0; right: 0; height: 7px;
      background: linear-gradient(180deg, #7B3B10, #8B4513); border-radius: 3px 3px 0 0;
    }
    .leather-sofa::before {
      content: ''; position: absolute; top: 3px; left: 5px;
      width: 3px; height: 3px; background: rgba(255,255,255,0.12); border-radius: 50%;
      box-shadow: 7px 0 0 rgba(255,255,255,0.12), 14px 0 0 rgba(255,255,255,0.12),
                  21px 0 0 rgba(255,255,255,0.12);
    }
    /* Sofa 1 — left side, near queue */
    .leather-sofa.ls-1 {
      width: 34px; height: 14px; top: 35%; left: 8px;
    }
    /* Sofa 2 — right side */
    .leather-sofa.ls-2 {
      width: 30px; height: 13px; top: 38%; right: 8px; left: auto;
    }
    /* Sofa 3 — center-left, further back */
    .leather-sofa.ls-3 {
      width: 28px; height: 12px; top: 28%; left: 45%;
    }

    /* Customer sitting on sofa */
    .customer.on-sofa .customer-legs {
      height: 2px;
      overflow: hidden;
    }
    .customer.on-sofa {
      transform-origin: bottom center;
      scale: 0.9;
    }

    /* Coffee brewing art (framed wall picture) */
    .decor-art { z-index: 5; }
    .art-frame {
      width: 24px; height: 20px; border: 2px solid #8B6914; position: relative;
      background: #FDF6EC; overflow: hidden; border-radius: 1px;
    }
    .art-frame::after {
      content: ''; position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
      width: 6px; height: 2px; background: #8B6914; border-radius: 1px;
    }
    .brew-scene {
      position: absolute; inset: 1px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    }
    .brew-pourover {
      width: 8px; height: 5px; background: #D4A87C;
      border-radius: 0 0 4px 4px; position: absolute; top: 2px;
      border-bottom: 1px solid #B8956A;
    }
    .brew-pourover::before {
      content: ''; position: absolute; top: -2px; left: -1px; right: -1px; height: 2px;
      background: #8B6F47; border-radius: 1px;
    }
    .brew-stream {
      width: 1px; height: 5px; background: linear-gradient(180deg, #8B6F47, #C4955A);
      position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
      animation: brewDrip 1.5s ease-in-out infinite;
    }
    .brew-mug {
      width: 9px; height: 6px; background: #FFF;
      border: 1px solid #B87333; border-top: none;
      border-radius: 0 0 3px 3px; position: absolute; bottom: 2px;
    }
    .brew-mug::before {
      content: ''; position: absolute; top: 0; left: -3px; width: 2px; height: 4px;
      border: 1px solid #B87333; border-right: none; border-radius: 3px 0 0 3px;
    }
    .brew-mug::after {
      content: ''; position: absolute; top: 1px; left: 1px; right: 1px; height: 2px;
      background: #6F4E37; border-radius: 0 0 2px 2px;
    }
    .brew-steam {
      position: absolute; width: 2px; height: 3px; background: rgba(255,255,255,0.6);
      border-radius: 50%; bottom: 8px; animation: brewSteam 2s ease-out infinite;
    }
    .brew-steam.s1 { left: 8px; animation-delay: 0s; }
    .brew-steam.s2 { left: 12px; animation-delay: 0.8s; }
    @keyframes brewDrip {
      0%, 100% { opacity: 0.4; height: 4px; }
      50% { opacity: 1; height: 6px; }
    }
    @keyframes brewSteam {
      0% { transform: translateY(0) scale(1); opacity: 0.5; }
      100% { transform: translateY(-5px) scale(1.5); opacity: 0; }
    }

    /* Espresso machine */
    .decor-espresso { z-index: 11; }
    .espresso-body {
      width: 20px; height: 18px; background: linear-gradient(180deg, #C0C0C0, #A0A0A0, #C0C0C0);
      border-radius: 2px; position: relative;
    }
    .espresso-body::before {
      content: ''; position: absolute; top: 3px; left: 3px; right: 3px; height: 4px;
      background: #333; border-radius: 1px;
    }
    .espresso-body::after {
      content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
      width: 2px; height: 5px; background: #666;
    }
    .espresso-steam {
      position: absolute; top: -4px; left: 50%; width: 3px; height: 4px;
      background: rgba(255,255,255,0.4); border-radius: 50%;
      animation: steamRise 1.5s ease-out infinite;
    }
    .espresso-steam:nth-child(2) { left: calc(50% + 4px); animation-delay: 0.5s; }

    /* Record */
    .decor-record { z-index: 11; }
    .record-disc {
      width: 18px; height: 18px; background: radial-gradient(circle, #FFD700 3px, #222 3px, #222 4px, #111 4px);
      border-radius: 50%; border: 1px solid #333;
      animation: decoSpin 3s linear infinite;
    }
    .record-disc::before {
      content: ''; position: absolute; inset: 2px;
      border-radius: 50%; background: transparent;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), inset 0 0 0 3px rgba(255,255,255,0.03);
    }

    /* Copper pipe */
    .decor-copper { z-index: 2; }
    .copper-pipe {
      width: 6px; height: 100%; position: relative;
      background: linear-gradient(90deg, #B87333, #CD853F, #B87333);
    }
    .copper-pipe::before {
      content: ''; position: absolute; top: 20%; left: -2px; width: 10px; height: 4px;
      background: linear-gradient(90deg, #A0622A, #CD853F, #A0622A); border-radius: 1px;
    }
    .copper-pipe::after {
      content: ''; position: absolute; top: 60%; left: -2px; width: 10px; height: 4px;
      background: linear-gradient(90deg, #A0622A, #CD853F, #A0622A); border-radius: 1px;
    }

    /* ---------- JUICE JUNCTION ---------- */

    /* Surfboard */
    .decor-surfboard { z-index: 5; }
    .surfboard-shape {
      width: 10px; height: 36px; border-radius: 50% / 20%;
      background: linear-gradient(180deg, #FF6B6B 0%, #FFF 25%, #4ECDC4 50%, #FFF 75%, #FFE66D 100%);
      transform: rotate(-15deg); position: relative;
      animation: decoSway 4s ease-in-out infinite;
    }
    .surfboard-shape::before {
      content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      width: 2px; height: 70%; background: rgba(255,255,255,0.4);
    }

    /* Palm trees */
    .decor-palms { z-index: 11; }
    .palm-tree { display: inline-flex; flex-direction: column; align-items: center; }
    .palm-trunk {
      width: 5px; height: 20px; position: relative;
      background: repeating-linear-gradient(180deg, #8B6914 0px, #8B6914 3px, #6B4F10 3px, #6B4F10 4px);
    }
    .palm-fronds {
      width: 20px; height: 10px; position: relative;
    }
    .palm-fronds::before, .palm-fronds::after {
      content: ''; position: absolute; bottom: 0; width: 12px; height: 6px;
      background: #2E7D32; border-radius: 0 80% 0 80%;
    }
    .palm-fronds::before { left: -2px; transform: rotate(-30deg); }
    .palm-fronds::after { right: -2px; transform: rotate(30deg) scaleX(-1); }
    .palm-frond-mid {
      position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
      width: 14px; height: 5px; background: #388E3C; border-radius: 50% 50% 0 0;
    }

    /* Tiki torches (spread across top like lights) */
    .decor-tiki { z-index: 7; }
    .tiki-torch { display: flex; flex-direction: column; align-items: center; }
    .tiki-flame {
      width: 6px; height: 8px; background: radial-gradient(ellipse at bottom, #FF6B00 30%, #FF0000 60%, transparent 100%);
      border-radius: 50% 50% 30% 30%; position: relative;
      animation: flameFlicker 0.5s ease-in-out infinite;
    }
    .tiki-torch:nth-child(2) .tiki-flame { animation-delay: 0.15s; }
    .tiki-torch:nth-child(3) .tiki-flame { animation-delay: 0.3s; }
    .tiki-torch:nth-child(4) .tiki-flame { animation-delay: 0.1s; }
    .tiki-torch:nth-child(5) .tiki-flame { animation-delay: 0.25s; }
    .tiki-flame::after {
      content: ''; position: absolute; inset: 2px; background: radial-gradient(ellipse at bottom, #FFD700 20%, transparent 70%);
      border-radius: 50%;
    }
    .tiki-post {
      width: 4px; height: 10px;
      background: repeating-linear-gradient(180deg, #6B4F10 0px, #6B4F10 3px, #8B6914 3px, #8B6914 5px);
    }

    /* Bamboo counter */
    .decor-bamboo { z-index: 4; }
    .bamboo-bar {
      height: 6px; background: #6B8E23; position: relative; border-radius: 3px;
    }
    .bamboo-bar::before {
      content: ''; position: absolute; inset: 0;
      background: repeating-linear-gradient(90deg, transparent 0px, transparent 14px, #556B2F 14px, #556B2F 16px);
      border-radius: 3px;
    }
    .bamboo-bar::after {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(180deg, rgba(255,255,255,0.15), transparent);
      border-radius: 3px 3px 0 0;
    }

    /* Fruit wall */
    .decor-fruit-wall { z-index: 5; }
    .fruit-row { display: flex; gap: 4px; align-items: center; }
    .css-fruit {
      width: 10px; height: 10px; border-radius: 50%; position: relative;
      animation: decoPulse 3s ease-in-out infinite;
    }
    .css-fruit.orange { background: radial-gradient(circle at 35% 35%, #FFA500, #E67E00); }
    .css-fruit.lemon { background: radial-gradient(circle at 35% 35%, #FFE44D, #F5C800); border-radius: 50% 50% 50% 45%; }
    .css-fruit.grape { background: radial-gradient(circle at 35% 35%, #8E44AD, #6B2D8B); }
    .css-fruit.lime { background: radial-gradient(circle at 35% 35%, #7EC850, #4CAF50); }
    .css-fruit::after {
      content: ''; position: absolute; top: -2px; left: 50%; transform: translateX(-50%);
      width: 3px; height: 2px; background: #4A7C1F; border-radius: 50%;
    }
    .css-fruit:nth-child(2) { animation-delay: 0.5s; }
    .css-fruit:nth-child(3) { animation-delay: 1s; }
    .css-fruit:nth-child(4) { animation-delay: 1.5s; }

    /* Waterfall */
    .decor-waterfall { z-index: 5; }
    .waterfall-stream {
      width: 14px; height: 30px; position: relative; overflow: hidden; border-radius: 4px;
      background: repeating-linear-gradient(180deg,
        rgba(100,180,255,0.4) 0px, rgba(100,180,255,0.2) 4px,
        rgba(150,210,255,0.5) 4px, rgba(150,210,255,0.3) 8px);
      background-size: 14px 20px;
      animation: waterfallFlow 0.8s linear infinite;
    }
    .waterfall-stream::after {
      content: ''; position: absolute; bottom: 0; left: -2px; right: -2px; height: 4px;
      background: rgba(255,255,255,0.5); border-radius: 50%;
    }

    /* Parrot */
    .decor-parrot { z-index: 6; }
    .parrot-body {
      width: 10px; height: 14px; position: relative;
      background: linear-gradient(180deg, #FF0000 0%, #FF6600 30%, #00AA00 60%, #0066FF 100%);
      border-radius: 50% 50% 30% 30%;
      animation: jukeboxBob 2.5s ease-in-out infinite;
    }
    .parrot-body::before {
      content: ''; position: absolute; top: -3px; left: 50%; transform: translateX(-50%);
      width: 8px; height: 7px; background: #FF0000; border-radius: 50%;
    }
    .parrot-body::after {
      content: ''; position: absolute; top: -2px; left: 50%; transform: translateX(-30%);
      width: 4px; height: 3px; background: #FFD700;
      clip-path: polygon(0 50%, 100% 0, 100% 100%);
    }
    .parrot-perch {
      width: 16px; height: 2px; background: #8B6914; border-radius: 1px;
      margin-top: -1px; margin-left: -3px;
    }

    /* Sand floor */
    .decor-sand { z-index: 1; }
    .sand-floor {
      position: absolute; inset: 0;
      background: linear-gradient(180deg, #F5DEB3, #DEB887); opacity: 0.4;
    }
    .sand-floor::before {
      content: ''; position: absolute; bottom: 4px; left: 15%;
      width: 5px; height: 4px; background: #D2B48C; border-radius: 50% 50% 50% 20%;
      box-shadow: 20px 2px 0 3px #C4A882, 40px -1px 0 2px #D2B48C;
    }

    /* ---------- SWEET TOOTH ---------- */

    /* Candy jars */
    .decor-candy-jars { z-index: 5; }
    .candy-jar-row { display: flex; gap: 3px; }
    .candy-jar {
      width: 10px; height: 14px; background: rgba(255,255,255,0.2);
      border: 1px solid rgba(255,255,255,0.4); border-radius: 3px 3px 2px 2px;
      position: relative; overflow: hidden;
    }
    .candy-jar::before {
      content: ''; position: absolute; top: -1px; left: 1px; right: 1px; height: 3px;
      background: rgba(200,200,200,0.5); border-radius: 1px;
    }
    .candy-jar .candy-dots {
      position: absolute; bottom: 2px; left: 2px;
      width: 3px; height: 3px; border-radius: 50%;
      box-shadow: 3px 0 0 0 var(--candy-c2, #FFB6C1), 0 -3px 0 0 var(--candy-c1, #FF69B4), 3px -3px 0 0 var(--candy-c2, #FFB6C1);
    }
    .candy-jar:nth-child(1) .candy-dots { background: #FF69B4; --candy-c1: #FF1493; --candy-c2: #FFB6C1; }
    .candy-jar:nth-child(2) .candy-dots { background: #87CEEB; --candy-c1: #4FC3F7; --candy-c2: #B3E5FC; }
    .candy-jar:nth-child(3) .candy-dots { background: #98FB98; --candy-c1: #66BB6A; --candy-c2: #C8E6C9; }

    /* Macaron tower */
    .decor-macaron { z-index: 5; }
    .macaron-stack { display: flex; flex-direction: column; align-items: center; gap: 1px; animation: decoPulse 4s ease-in-out infinite; }
    .macaron-piece {
      width: 14px; height: 5px; border-radius: 50%; position: relative;
    }
    .macaron-piece::after {
      content: ''; position: absolute; bottom: -1px; left: 2px; right: 2px; height: 2px;
      background: rgba(255,255,255,0.5); border-radius: 1px;
    }
    .macaron-piece.pink { background: #FFB6C1; }
    .macaron-piece.mint { background: #98FF98; }
    .macaron-piece.lavender { background: #D8B4FE; }

    /* Donut wall */
    .decor-donut-wall { z-index: 5; }
    .donut-row { display: flex; gap: 3px; align-items: center; }
    .css-donut {
      width: 12px; height: 12px; border-radius: 50%; position: relative;
      animation: decoPulse 3.5s ease-in-out infinite;
    }
    .css-donut::before {
      content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      width: 4px; height: 4px; background: var(--shop-wall-top, #F5EDE2); border-radius: 50%;
    }
    .css-donut.d-pink { background: #FF69B4; }
    .css-donut.d-choc { background: #8B4513; }
    .css-donut.d-blue { background: #87CEEB; }
    .css-donut::after {
      content: ''; position: absolute; top: 1px; left: 3px;
      width: 2px; height: 2px; border-radius: 50%; background: #FFD700;
      box-shadow: 3px 2px 0 #FF69B4, -1px 3px 0 #87CEEB;
    }
    .css-donut:nth-child(2) { animation-delay: 0.8s; }
    .css-donut:nth-child(3) { animation-delay: 1.6s; }

    /* Pink oven */
    .decor-pink-oven { z-index: 11; }
    .oven-body {
      width: 22px; height: 20px; background: linear-gradient(180deg, #FF69B4, #FF85C2);
      border-radius: 4px; position: relative;
    }
    .oven-body::before {
      content: ''; position: absolute; top: 4px; left: 3px; right: 3px; height: 10px;
      background: rgba(0,0,0,0.15); border-radius: 2px; border: 1px solid rgba(255,255,255,0.2);
    }
    .oven-window {
      position: absolute; top: 5px; left: 4px; right: 4px; height: 8px;
      background: radial-gradient(ellipse at center, #FF8C00, #CC5500); border-radius: 1px;
      animation: decoGlow 2s ease-in-out infinite; opacity: 0.7;
    }
    .oven-body::after {
      content: ''; position: absolute; top: 2px; right: 2px; width: 4px; height: 2px;
      background: #FFF; border-radius: 1px;
    }

    /* Candy cane */
    .decor-candy-cane { z-index: 11; }
    .cane-shape {
      width: 6px; height: 24px; position: relative;
      background: repeating-linear-gradient(180deg, #FF0000 0px, #FF0000 3px, #FFF 3px, #FFF 6px);
      border-radius: 0 0 2px 2px;
    }
    .cane-shape::before {
      content: ''; position: absolute; top: -6px; left: 0; width: 12px; height: 12px;
      border: 3px solid transparent; border-top: 3px solid #FF0000; border-right: 3px solid #FFF;
      border-radius: 50%; clip-path: inset(0 0 50% 0);
    }

    /* Gingerbread trim */
    .decor-gingerbread { z-index: 3; }
    .gingerbread-trim {
      height: 6px; position: relative;
      background: #8B4513;
    }
    .gingerbread-trim::before {
      content: ''; position: absolute; top: -3px; left: 0; right: 0; height: 6px;
      background: repeating-linear-gradient(90deg,
        transparent 0px, transparent 6px,
        #D2691E 6px, #D2691E 7px,
        transparent 7px, transparent 12px);
    }
    .gingerbread-trim::after {
      content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
      background: repeating-linear-gradient(90deg,
        #FFF 0px, #FFF 4px,
        transparent 4px, transparent 8px);
      opacity: 0.5;
    }

    /* Cotton candy */
    .decor-cotton-candy { z-index: 11; }
    .cotton-candy-shape {
      display: flex; flex-direction: column; align-items: center;
      animation: jukeboxBob 3s ease-in-out infinite;
    }
    .cotton-candy-fluff {
      width: 18px; height: 16px; position: relative;
      background: radial-gradient(ellipse at 40% 40%, #FFB6C1, #FF69B4);
      border-radius: 50%;
      box-shadow: -3px 2px 0 #FF85C2, 3px -2px 0 #FFC1CC, 0 3px 0 #FF69B4;
    }
    .cotton-candy-stick {
      width: 2px; height: 10px; background: #DEB887;
    }

    /* Crystal cake stand */
    .decor-crystal-cake { z-index: 5; }
    .cake-stand {
      display: flex; flex-direction: column; align-items: center;
    }
    .cake-tier {
      height: 4px; background: linear-gradient(180deg, #E8E8E8, #C0C0C0);
      border-radius: 1px; margin-bottom: 1px;
    }
    .cake-tier.t1 { width: 10px; }
    .cake-tier.t2 { width: 16px; }
    .cake-tier.t3 { width: 22px; }
    .cake-stand-base {
      width: 14px; height: 3px; background: linear-gradient(180deg, #C0C0C0, #A0A0A0);
      border-radius: 0 0 2px 2px;
    }
    .cake-sparkle {
      position: absolute; top: -3px; left: 50%; transform: translateX(-50%);
      width: 4px; height: 4px;
      background: radial-gradient(circle, #FFD700, transparent 70%);
      animation: sparkle 2s ease-in-out infinite;
    }

    /* ---------- GOLDEN LOUNGE ---------- */

    /* Velvet rope */
    .decor-velvet-rope { z-index: 11; }
    .velvet-rope-set {
      display: flex; align-items: flex-end; gap: 16px; position: relative;
    }
    .rope-post {
      width: 4px; height: 18px;
      background: linear-gradient(180deg, #FFD700, #DAA520, #FFD700);
      border-radius: 2px;
    }
    .rope-post::before {
      content: ''; position: absolute; top: -3px; left: 50%; transform: translateX(-50%);
      width: 6px; height: 3px; background: #FFD700; border-radius: 50%;
    }
    .rope-line {
      position: absolute; top: 6px; left: 4px; right: 4px; height: 3px;
      background: #8B0000; border-radius: 1px;
      border-bottom: 1px solid #A00000;
    }

    /* Mirror */
    .decor-mirror { z-index: 5; }
    .mirror-frame {
      width: 22px; height: 28px; border: 3px solid #DAA520; border-radius: 2px;
      position: relative; background: linear-gradient(135deg, #E8E8E8, #F5F5F5, #D0D0D0);
      box-shadow: inset 0 0 8px rgba(0,0,0,0.05);
    }
    .mirror-frame::before {
      content: ''; position: absolute; inset: -1px; border: 1px solid #B8860B;
      border-radius: 3px; pointer-events: none;
    }
    .mirror-frame::after {
      content: ''; position: absolute; top: 2px; left: 2px; width: 8px; height: 12px;
      background: linear-gradient(135deg, rgba(255,255,255,0.5), transparent);
      border-radius: 1px;
    }
    .mirror-corner {
      position: absolute; width: 4px; height: 4px; background: #FFD700; border-radius: 1px;
    }
    .mirror-corner.tl { top: -1px; left: -1px; }
    .mirror-corner.tr { top: -1px; right: -1px; }
    .mirror-corner.bl { bottom: -1px; left: -1px; }
    .mirror-corner.br { bottom: -1px; right: -1px; }

    /* Crystal chandelier (enhanced) */
    .decor-crystal-chand { z-index: 6; }
    .cc-chain { width: 2px; height: 6px; background: #AAA; margin: 0 auto; }
    .cc-body {
      width: 30px; height: 10px; margin: 0 auto; position: relative;
      background: linear-gradient(180deg, #E8E8E8, #FFD700, #E8E8E8);
      border-radius: 0 0 50% 50%;
      box-shadow: 0 2px 12px rgba(255,215,0,0.4);
    }
    .cc-crystal {
      position: absolute; bottom: -8px; width: 3px; height: 7px;
      background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(200,200,255,0.6));
      border-radius: 0 0 50% 50%;
      animation: fairyTwinkle 2s ease-in-out infinite;
    }
    .cc-crystal::after {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, transparent, rgba(255,100,100,0.3), rgba(100,255,100,0.3), rgba(100,100,255,0.3), transparent);
      animation: sparkle 3s ease-in-out infinite;
    }
    .cc-crystal:nth-child(1) { left: 2px; animation-delay: 0s; }
    .cc-crystal:nth-child(2) { left: 7px; animation-delay: 0.4s; height: 9px; }
    .cc-crystal:nth-child(3) { left: 50%; transform: translateX(-50%); animation-delay: 0.8s; height: 10px; }
    .cc-crystal:nth-child(4) { right: 7px; animation-delay: 1.2s; height: 9px; }
    .cc-crystal:nth-child(5) { right: 2px; animation-delay: 1.6s; }
    .cc-arm { position: absolute; top: -2px; width: 10px; height: 2px; background: #DAA520; }
    .cc-arm.left { left: -6px; transform: rotate(-15deg); }
    .cc-arm.right { right: -6px; transform: rotate(15deg); }

    /* Pillars */
    .decor-pillars { z-index: 11; }
    .pillar-col {
      width: 10px; display: flex; flex-direction: column; align-items: center;
    }
    .pillar-capital {
      width: 14px; height: 4px; background: linear-gradient(180deg, #DAA520, #B8860B);
      border-radius: 1px;
    }
    .pillar-shaft {
      width: 8px; height: 22px;
      background: repeating-linear-gradient(90deg, #E8D5A0 0px, #E8D5A0 2px, #D4C48A 2px, #D4C48A 3px);
    }
    .pillar-base {
      width: 14px; height: 3px; background: linear-gradient(180deg, #B8860B, #8B6914);
      border-radius: 0 0 1px 1px;
    }

    /* Piano */
    .decor-piano { z-index: 11; }
    .piano-body {
      width: 28px; height: 16px; position: relative;
      background: #111; border-radius: 0 12px 2px 2px;
    }
    .piano-keys {
      position: absolute; bottom: 0; left: 2px; right: 8px; height: 5px;
      background: repeating-linear-gradient(90deg,
        #FFF 0px, #FFF 3px, #111 3px, #111 4px);
      border-radius: 0 0 1px 1px;
    }
    .piano-body::after {
      content: ''; position: absolute; top: 2px; right: 4px; width: 1px; height: 8px;
      background: #333;
    }

    /* Champagne fountain */
    .decor-champagne { z-index: 5; }
    .champagne-tower { position: relative; display: flex; flex-direction: column; align-items: center; }
    .champagne-tier {
      height: 5px; background: linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0.1));
      border: 1px solid rgba(255,215,0,0.3); border-radius: 1px 1px 0 0; margin-bottom: 1px;
    }
    .champagne-tier.ct1 { width: 8px; }
    .champagne-tier.ct2 { width: 14px; }
    .champagne-tier.ct3 { width: 20px; }
    .champagne-drop {
      position: absolute; width: 2px; height: 2px; background: #FFD700;
      border-radius: 50%; animation: champagneDrip 1.5s ease-in infinite;
    }
    .champagne-drop:nth-child(4) { left: 30%; animation-delay: 0s; top: 4px; }
    .champagne-drop:nth-child(5) { left: 60%; animation-delay: 0.5s; top: 8px; }
    .champagne-drop:nth-child(6) { left: 45%; animation-delay: 1s; top: 2px; }

    /* Star ceiling */
    .decor-star-ceiling { z-index: 5; }
    .star-field { position: relative; width: 100%; height: 100%; }
    .mini-star {
      position: absolute; width: 2px; height: 2px; background: #FFD700;
      border-radius: 50%; animation: twinkleStar 2s ease-in-out infinite;
    }

    /* Diamond bar */
    .decor-diamond-bar { z-index: 4; }
    .diamond-surface {
      height: 6px; position: relative;
      background: linear-gradient(90deg, #FFD700, #FFF8DC, #FFD700, #FFF8DC, #FFD700);
    }
    .diamond-gem {
      position: absolute; top: 1px; width: 4px; height: 4px;
      background: linear-gradient(135deg, #FFF, #87CEEB, #FFF); border-radius: 1px;
      transform: rotate(45deg);
      animation: diamondCatch 3s ease-in-out infinite;
    }
    .diamond-gem:nth-child(1) { left: 15%; animation-delay: 0s; }
    .diamond-gem:nth-child(2) { left: 40%; animation-delay: 1s; }
    .diamond-gem:nth-child(3) { left: 65%; animation-delay: 2s; }
    .diamond-gem:nth-child(4) { left: 85%; animation-delay: 0.5s; }

    /* ---------- VIBE / ATMOSPHERE SYSTEM ---------- */

    .shop-bg.vibe-bare { /* no extra effect */ }

    .shop-bg.vibe-cozy {
      box-shadow: inset 0 0 30px rgba(255,200,100,0.03);
    }
    .shop-bg.vibe-cozy::after {
      content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 20;
      background: radial-gradient(circle at 30% 80%, rgba(255,200,100,0.03), transparent 60%);
    }

    .shop-bg.vibe-premium {
      box-shadow: inset 0 0 40px rgba(255,200,100,0.06);
    }
    .shop-bg.vibe-premium::after {
      content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 20;
      background:
        radial-gradient(ellipse at 50% 0%, rgba(255,215,0,0.06), transparent 50%),
        radial-gradient(circle at 30% 80%, rgba(255,200,100,0.04), transparent 60%);
    }

    .shop-bg.vibe-luxurious {
      box-shadow: inset 0 0 50px rgba(255,200,100,0.08);
    }
    .shop-bg.vibe-luxurious::after {
      content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 20;
      background:
        radial-gradient(ellipse at 50% 0%, rgba(255,215,0,0.09), transparent 50%),
        radial-gradient(circle at 50% 50%, transparent 60%, rgba(0,0,0,0.06) 100%);
    }

    /* Dust motes for vibe */
    .vibe-mote {
      position: absolute; width: 2px; height: 2px; background: rgba(255,215,0,0.4);
      border-radius: 50%; pointer-events: none; z-index: 21;
      animation: dustFloat 6s ease-in-out infinite;
    }
    .vibe-sparkle {
      position: absolute; width: 3px; height: 3px;
      background: radial-gradient(circle, #FFD700, transparent 70%);
      border-radius: 50%; pointer-events: none; z-index: 21;
      animation: sparkle 2.5s ease-in-out infinite;
    }

    /* ── Opening Sequence Animations ── */
    @keyframes setupPopIn {
      0%   { transform: scale(0); opacity: 0; }
      70%  { transform: scale(1.15); opacity: 1; }
      100% { transform: scale(1); opacity: 1; }
    }
    @keyframes setupSlideUp {
      0%   { transform: translateY(30px); opacity: 0; }
      100% { transform: translateY(0); opacity: 1; }
    }
    @keyframes setupFadeIn {
      0%   { opacity: 0; }
      100% { opacity: 1; }
    }
    @keyframes lightsOn {
      0%   { filter: brightness(0.3); }
      50%  { filter: brightness(1.4); }
      100% { filter: brightness(1); }
    }
    @keyframes openFlash {
      0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
      40%  { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
      70%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
      100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
    }

    .setup-pop-in { animation: setupPopIn 0.25s ease-out forwards; }
    .setup-slide-up { animation: setupSlideUp 0.3s ease-out forwards; }
    .setup-fade-in { animation: setupFadeIn 0.3s ease-out forwards; }
    .shop-lights-on { animation: lightsOn 0.4s ease-out forwards; }

    .open-flash-text {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      font-size: 2rem; font-weight: 900;
      color: #FFD700;
      text-shadow: 0 0 20px rgba(255,215,0,0.8), 0 2px 4px rgba(0,0,0,0.5);
      z-index: 500; pointer-events: none;
      animation: openFlash 0.6s ease-out forwards;
    }

    .skip-hint {
      position: absolute;
      bottom: 8px; left: 50%;
      transform: translateX(-50%);
      font-size: 0.6rem;
      color: rgba(255,255,255,0.5);
      z-index: 500; pointer-events: none;
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }