/* Use dynamic viewport on iOS so the address bar doesn't chop the app */
@supports (height: 100dvh) {
    /* Replace the Tailwind 100vh utility with 100dvh wherever it's used */
    [class*="h-[calc(100vh-2.25rem-2rem)]"] {
      height: calc(100dvh - 2.25rem - 2rem) !important;
    }
  }
  
  /* Respect iPhone safe areas (bottom home indicator) */
  .status-bar {
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
  
  /* Reduce blue tap highlights and improve touch feel */
  * { -webkit-tap-highlight-color: transparent; }
  #bigClick { touch-action: manipulation; } /* faster taps, no 300ms delay */
  
  /* Mobile layout: stack sidebar on top, main underneath */
  @media (max-width: 480px) {
    /* Stack the two main columns */
    [class*="h-[calc(100vh-2.25rem-2rem)]"] {
      flex-direction: column !important;
    }
  
    /* Sidebar becomes full-width bar */
    aside.w-52 {
      width: 100% !important;
      border-right: 0 !important;
      border-bottom: 1px solid #27272a !important;
      padding: 0.5rem 0.75rem !important;
    }
  
    /* Hide the bookmark tabs on tiny screens; users can toggle later */
    .tabs-bar { display: none !important; }
  
    /* Make the main click target comfortable on small screens */
    #bigClick { padding: 1.5rem !important; }
    #bigClick img { width: 120px; height: 120px; }
  
    /* Slightly smaller float labels so they don't crowd */
    .float-label { font-size: 12px; }
  }
  

/* ===== Effects & Animations ===== */

.fx-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }
  
  /* Floating labels (B) */
  .float-label {
    position: absolute;
    transform: translate(-50%, -50%);
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
    animation: float-up var(--dur, 900ms) ease-out forwards;
    text-shadow: 0 1px 0 rgba(0,0,0,.25);
  }
  .float-money { color: #10B981; }  /* emerald-500 */
  .float-xp    { color: #6366F1; }  /* indigo-500 */
  
  /* Particles (C) */
  .particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    opacity: 0.9;
    pointer-events: none;
    will-change: transform, opacity;
    animation: particle-burst var(--p-dur, 700ms) ease-out forwards;
    box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset;
  }
  
  /* Combo label (D) */
  #comboLabel {
    transition: opacity .15s ease, transform .15s ease;
  }
  .combo-hidden {
    opacity: 0;
    transform: translateY(-2px) scale(.98);
  }
  .combo-pop {
    animation: combo-pop .25s ease;
  }

  /* Balance: orange + allow transform */
#moneyDisplay {
    color: #f59e0b;          /* Tailwind amber-500-ish */
    display: inline-block;   /* so scale doesn't reflow siblings */
  }
  
  /* Reusable pop animation */
  .pop-once {
    animation: pop .22s ease-out;
    will-change: transform;
  }
  
  @keyframes pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.08); }
    100% { transform: scale(1); }
  }
  
  /* (optional) smoother on the bag image too */
  #bigClick, #bigClick img {
    will-change: transform;
  }
  
  
  /* ===== Keyframes ===== */
  
  @keyframes float-up {
    0% {
      opacity: 0;
      transform: translate(calc(-50% + var(--jitter-x, 0px)), calc(-50% + 6px)) rotate(var(--rot, 0deg));
    }
    15% { opacity: 1; }
    100% {
      opacity: 0;
      transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% - var(--rise, 60px))) rotate(var(--rot, 0deg));
    }
  }
  
  @keyframes particle-burst {
    0% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
    100% {
      opacity: 0;
      transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) scale(.8);
    }
  }
  
  @keyframes combo-pop {
    0%   { transform: translateY(0) scale(1); }
    50%  { transform: translateY(-2px) scale(1.08); }
    100% { transform: translateY(0) scale(1); }
  }
  
  /* ====== Modal / Panel ====== */
  .modal { position: absolute; inset: 0; display: grid; place-items: center; z-index: 30; }
  .modal.hidden { display: none; }
  .modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
  .modal-box {
    position: relative;
    background: #0b0b0e;
    border: 1px solid #27272a;
    border-radius: 0.75rem;
    padding: 1rem;
    width: 100%;
    max-width: 36rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.4);
  }
  .modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
  .modal-title { font-weight: 700; font-size: 1.125rem; }
  .modal-x {
    color: #a3a3a3; border: 1px solid #27272a; border-radius: .375rem; padding: .25rem .5rem;
  }
  .modal-x:hover { background: #1f2937; }
  
  .card { border: 1px solid #27272a; border-radius: .75rem; padding: .75rem; background: #0e0e12; }
  .card-title { font-weight: 700; margin-bottom: .5rem; }
  
  .btn-primary {
    background: #3b82f6; color: white; border-radius: .5rem; padding: .5rem .75rem; font-weight: 700;
  }
  .btn-primary:disabled { opacity: .5; cursor: not-allowed; }
  .btn-secondary {
    background: #111827; color: #e5e7eb; border: 1px solid #374151; border-radius: .5rem; padding: .4rem .6rem;
  }
  .btn-secondary:hover { background: #1f2937; }
  .btn-danger {
    background: #b91c1c; color: white; border-radius: .5rem; padding: .4rem .6rem;
  }
  .input {
    background: #111827; border: 1px solid #374151; color: #e5e7eb; border-radius: .5rem; padding: .35rem .5rem; width: 8rem;
  }
  .toggle { width: 1rem; height: 1rem; }
  
  /* ====== Wheel ====== */
  .wheel-wrapper {
    position: relative; width: 250px; height: 250px;
  }
  .wheel {
    width: 100%; height: 100%; border-radius: 9999px; border: 6px solid #27272a;
    background:
      conic-gradient(#10B981 0deg 45deg, #1f2937 45deg 90deg,
                     #F59E0B 90deg 135deg, #1f2937 135deg 180deg,
                     #3B82F6 180deg 225deg, #1f2937 225deg 270deg,
                     #FACC15 270deg 315deg, #1f2937 315deg 360deg);
    transition: transform 3s cubic-bezier(.21,.8,.26,.99);
  }
  .wheel-pin {
    position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
    width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent;
    border-bottom: 14px solid #ef4444;
  }
  
  /* ===== Utility ===== */
  .hidden-vis { visibility: hidden; height: 0; }