/* ==========================================================================
   FERN -- The Seed Cellar
   Full-scene immersive shop with card-fan carousel for seed packs
   ========================================================================== */

/* --- Full-viewport scene --- */
.shop-scene {
    position: relative;
    margin: 0 -12px;
    height: calc(100vh - var(--top-bar-height) - var(--safe-top) - var(--bottom-nav-height) - var(--safe-bottom));
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   INTRO SEQUENCE — merchant appears big, says quip, recedes to background
   ========================================================================== */

/* During intro: merchant is centered and large */
.shop-intro .shop-merchant-area {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    z-index: 20;
    flex-direction: column;
    align-items: center;
    animation: merchant-intro-enter 0.6s ease-out both;
}
.shop-intro .shop-merchant {
    transform: scale(1.4);
}
.shop-intro .shop-speech {
    font-size: 14px;
    max-width: 320px;
    padding: 16px 24px;
    margin: 8px 0 0;
    opacity: 1;
    transform: scale(1);
    animation: speech-intro-enter 0.5s ease-out 0.4s both;
}
.shop-intro .shop-speech::before {
    display: block;
}

/* During intro: hide tabs and display content */
.shop-intro .shop-tabs {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}
.shop-intro .shop-display-content {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
}

@keyframes merchant-intro-enter {
    0% { opacity: 0; transform: translate(-50%, -40%) scale(0.7); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes speech-intro-enter {
    0% { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* After intro: merchant recedes to small corner position */
.shop-intro-done .shop-merchant-area {
    top: 50px;
    left: 6px;
    transform: translate(0, 0) scale(0.35);
    transform-origin: top left;
    opacity: 0.7;
    z-index: 6;
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.shop-intro-done .shop-speech {
    opacity: 1;
    transform: scale(2.6);
    transform-origin: top left;
    margin: 10px 0 0 -20px;
    width: max-content;
    max-width: 240px;
    font-size: 8px;
    padding: 5px 10px;
    text-align: left;
    transition: opacity 0.6s ease-out 0.4s, transform 0.6s ease-out 0.4s, margin 0.6s ease-out 0.4s;
    pointer-events: none;
}
.shop-intro-done .shop-speech::before {
    display: none;
}

/* After intro: tabs and display fade in */
.shop-intro-done .shop-tabs {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease-out 0.3s, transform 0.5s ease-out 0.3s;
}
.shop-intro-done .shop-display-content {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.6s ease-out 0.2s, transform 0.6s ease-out 0.2s;
}

/* ==========================================================================
   CELLAR BACKDROP
   ========================================================================== */
.shop-cellar {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.shop-cellar-wall {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 32px, rgba(60,48,36,0.06) 32px, rgba(60,48,36,0.06) 34px),
        repeating-linear-gradient(90deg, transparent, transparent 48px, rgba(60,48,36,0.04) 48px, rgba(60,48,36,0.04) 50px),
        radial-gradient(ellipse at 50% 20%, #221c16 0%, #161210 40%, #0c0a08 100%);
}
.shop-cellar-arch {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50px;
    background:
        radial-gradient(ellipse at 50% 140%, transparent 55%, #1a1410 56%, #28201a 58%, #1a1410 60%, transparent 61%),
        linear-gradient(180deg, #0e0c0a 0%, transparent 100%);
    z-index: 2;
}
.shop-cellar-arch::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 5%, rgba(104,88,64,0.15) 20%, rgba(104,88,64,0.25) 50%, rgba(104,88,64,0.15) 80%, transparent 95%);
}
.shop-lantern-light {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 80%; height: 50%;
    background: radial-gradient(ellipse at 50% 0%, rgba(220,160,60,0.1) 0%, rgba(200,140,40,0.06) 20%, rgba(180,120,30,0.02) 40%, transparent 65%);
    animation: lantern-flicker 4s ease-in-out infinite;
    z-index: 1;
}
@keyframes lantern-flicker {
    0%, 100% { opacity: 1; }
    25% { opacity: 0.85; }
    50% { opacity: 0.95; }
    75% { opacity: 0.8; }
}
.shop-torch {
    position: absolute;
    width: 120px; height: 200px;
    border-radius: 50%;
    filter: blur(30px);
    z-index: 1;
}
.shop-torch-l {
    left: -20px; top: 8%;
    background: radial-gradient(circle, rgba(220,140,40,0.14) 0%, rgba(180,100,20,0.06) 40%, transparent 70%);
    animation: torch-breathe 3s ease-in-out infinite alternate;
}
.shop-torch-r {
    right: -20px; top: 12%;
    background: radial-gradient(circle, rgba(220,140,40,0.1) 0%, rgba(180,100,20,0.04) 40%, transparent 70%);
    animation: torch-breathe 3.5s ease-in-out infinite alternate-reverse;
}
@keyframes torch-breathe {
    0% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.06); }
    100% { opacity: 0.7; transform: scale(0.97); }
}
.shop-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 35%, transparent 20%, rgba(0,0,0,0.6) 100%);
    z-index: 2;
}
.shop-herbs {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 70px;
    z-index: 3;
    opacity: 0.4;
}
.shop-herb-strand {
    position: absolute;
    top: 0;
    width: 2px;
    background: linear-gradient(180deg, rgba(60,48,36,0.5), var(--green-dark));
    border-radius: 0 0 2px 2px;
}
.shop-herb-strand::after {
    content: '';
    position: absolute;
    bottom: -4px; left: 50%;
    transform: translateX(-50%);
    width: 8px; height: 8px;
    border-radius: 50% 50% 50% 0;
    background: var(--green-dark);
    opacity: 0.5;
}
.shop-herb-strand:nth-child(1) { left: 12%; height: 30px; animation: herb-sway 6s ease-in-out infinite; }
.shop-herb-strand:nth-child(2) { left: 20%; height: 44px; animation: herb-sway 7s ease-in-out infinite 0.5s; }
.shop-herb-strand:nth-child(3) { right: 14%; height: 36px; animation: herb-sway 5.5s ease-in-out infinite 1s; }
.shop-herb-strand:nth-child(4) { right: 24%; height: 48px; animation: herb-sway 6.5s ease-in-out infinite 0.3s; }
.shop-herb-strand:nth-child(5) { left: 38%; height: 24px; animation: herb-sway 7s ease-in-out infinite 0.8s; }
.shop-herb-strand:nth-child(6) { right: 40%; height: 28px; animation: herb-sway 5s ease-in-out infinite 1.2s; }
@keyframes herb-sway {
    0%, 100% { transform: rotate(0deg); transform-origin: top center; }
    30% { transform: rotate(2deg); transform-origin: top center; }
    70% { transform: rotate(-1.5deg); transform-origin: top center; }
}
.shop-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    animation: shop-particle-drift var(--dur) linear infinite;
    animation-delay: var(--delay);
}
@keyframes shop-particle-drift {
    0% { transform: translate(0, 0) scale(var(--s0, 1)); opacity: 0; }
    8% { opacity: var(--peak, 0.4); }
    85% { opacity: var(--peak, 0.4); }
    100% { transform: translate(var(--dx), var(--dy)) scale(var(--s1, 0.3)); opacity: 0; }
}

/* ==========================================================================
   MERCHANT — absolute positioned, tucked into corner
   ========================================================================== */
.shop-merchant-area {
    position: absolute;
    top: 50px;
    left: 6px;
    z-index: 6;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
    pointer-events: none;
    transform: scale(0.35);
    transform-origin: top left;
    opacity: 0.7;
}
.shop-merchant {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: merchant-sway 8s ease-in-out infinite;
    flex-shrink: 0;
}
.shop-merchant-sprite {
    image-rendering: pixelated;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6));
}
.shop-merchant-sprite canvas {
    image-rendering: pixelated;
}
@keyframes merchant-sway {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(0.5deg); }
    75% { transform: rotate(-0.5deg); }
}
.merchant-shadow {
    width: 40px; height: 3px;
    margin-top: 1px;
    background: radial-gradient(ellipse, rgba(0,0,0,0.4) 0%, transparent 70%);
}
.shop-speech {
    font-family: var(--font-pixel);
    font-size: 8px;
    line-height: 1.6;
    color: var(--text-dim);
    background: rgba(0,0,0,0.7);
    border: 1px solid rgba(104,88,64,0.25);
    border-radius: 4px;
    position: relative;
    backdrop-filter: blur(6px);
    text-align: left;
    padding: 5px 10px;
    margin: 10px 0 0 -20px;
    width: max-content;
    max-width: 240px;
    transform: scale(2.6);
    transform-origin: top left;
    opacity: 1;
    pointer-events: none;
}
.shop-speech::before {
    content: '';
    position: absolute;
    top: -5px; left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 6px; height: 6px;
    background: rgba(0,0,0,0.6);
    border-top: 1px solid rgba(104,88,64,0.2);
    border-left: 1px solid rgba(104,88,64,0.2);
}
@keyframes speech-enter {
    0% { opacity: 0; transform: translateY(4px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==========================================================================
   TABS — Seed Packs vs Supplies toggle, top-center overlay
   ========================================================================== */
.shop-tabs {
    display: flex;
    justify-content: stretch;
    gap: 0;
    position: relative;
    z-index: 8;
    flex-shrink: 0;
}
.shop-tab {
    flex: 1;
    font-family: var(--font-pixel);
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    padding: 14px 8px;
    background: rgba(0,0,0,0.6);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}
.shop-tab:not(:last-child) { border-right: 1px solid rgba(104,88,64,0.1); }
.shop-tab:hover { color: var(--text-bright); background: rgba(104,88,64,0.1); }
.shop-tab.active {
    color: var(--gold-light);
    background: rgba(208,160,48,0.06);
    border-bottom-color: var(--gold-light);
}
.shop-tab-icon { display: flex; opacity: 0.6; }
.shop-tab.active .shop-tab-icon { opacity: 1; }
.shop-tab-icon svg { width: 14px; height: 14px; }
.shop-speech-timer {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-pixel);
    font-size: 7px;
    color: var(--gold-light);
    margin-top: 3px;
    white-space: nowrap;
    opacity: 0.8;
}
.shop-speech-timer svg { width: 8px; height: 8px; opacity: 0.7; }

/* --- Panel mode: hide merchant on Supplies / Equipment tabs --- */
.shop-scene.shop-panel-mode .shop-merchant-area { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s, visibility 0.3s; }
.shop-scene.shop-panel-mode .shop-display-content::before { display: none; }
.shop-scene.shop-panel-mode .shop-display-content { z-index: 7; }

/* ==========================================================================
   DISPLAY AREA — fills the entire scene
   ========================================================================== */
.shop-display-content {
    position: relative;
    flex: 1;
    z-index: 5;
    transition: opacity 0.2s, transform 0.2s;
}
.shop-display-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 220px;
    height: 140px;
    background: radial-gradient(ellipse at top left, rgba(18,14,10,0.85) 0%, rgba(18,14,10,0.4) 50%, transparent 100%);
    z-index: 10;
    pointer-events: none;
}
.shop-display-exit {
    opacity: 0;
    transform: translateY(6px);
}

/* ==========================================================================
   CARD FAN CAROUSEL — Seed packs fanned, filling the screen
   ========================================================================== */
.shop-fan {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* The 3D fan stage */
.shop-fan-stage {
    position: relative;
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
    overflow: hidden;
}

/* Individual pack card in the fan — BIG touch target */
.shop-pack-card {
    position: absolute;
    width: clamp(240px, 55vw, 520px);
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s, filter 0.3s;
    transform-origin: 50% 100%;
    will-change: transform;
}
.shop-pack-card:active { transform: scale(0.96) !important; }

/* Pixel art sprite wrapper */
.shop-pack-sprite {
    image-rendering: pixelated;
    width: 100% !important;
    height: 100% !important;
}
.shop-pack-sprite canvas {
    image-rendering: pixelated;
}

/* --- Tier glow effects (applied to the card container) --- */
.shop-pack-card.tier-basic {
    filter: drop-shadow(0 0 8px rgba(104,168,88,0.3)) drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}
.shop-pack-card.tier-premium {
    filter: drop-shadow(0 0 12px rgba(112,80,160,0.35)) drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}
.shop-pack-card.tier-legendary {
    filter: drop-shadow(0 0 16px rgba(208,160,48,0.4)) drop-shadow(0 4px 12px rgba(0,0,0,0.5));
    animation: legendary-card-glow 2s ease-in-out infinite alternate;
}
@keyframes legendary-card-glow {
    0% { filter: drop-shadow(0 0 12px rgba(208,160,48,0.3)) drop-shadow(0 4px 12px rgba(0,0,0,0.5)); }
    100% { filter: drop-shadow(0 0 24px rgba(208,160,48,0.55)) drop-shadow(0 4px 12px rgba(0,0,0,0.5)); }
}

/* Pixelated floating motes (per-pack particle effects) */
.shop-pack-mote {
    position: absolute;
    width: 4px; height: 4px;
    border-radius: 0;
    image-rendering: pixelated;
    background: #68a858;
    opacity: 0;
    pointer-events: none;
    z-index: 6;
    animation: shop-mote-rise var(--dur, 2.5s) ease-out infinite;
    animation-delay: var(--delay, 0s);
}
@keyframes shop-mote-rise {
    0% { opacity: 0; transform: translateY(0); }
    15% { opacity: 0.7; }
    85% { opacity: 0.5; }
    100% { opacity: 0; transform: translateY(-35px); }
}

/* Leaf motes — green, gentle drift */
.mote-leaf {
    background: #80c868;
    width: 4px; height: 3px;
    animation-name: mote-leaf-drift;
}
.mote-leaf:nth-child(odd) { background: #58a048; }
@keyframes mote-leaf-drift {
    0% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
    15% { opacity: 0.6; }
    50% { transform: translate(6px, -15px) rotate(45deg); }
    100% { opacity: 0; transform: translate(-4px, -30px) rotate(90deg); }
}

/* Sparkle motes — purple, twinkle */
.mote-sparkle {
    background: #b898e0;
    width: 3px; height: 3px;
    box-shadow: 0 0 4px rgba(152,104,200,0.5);
    animation-name: mote-sparkle-twinkle;
}
.mote-sparkle:nth-child(odd) { background: #9068c8; }
.mote-sparkle:nth-child(3n) { background: #d0b8f0; width: 2px; height: 2px; }
@keyframes mote-sparkle-twinkle {
    0% { opacity: 0; transform: scale(0); }
    20% { opacity: 0.8; transform: scale(1.2); }
    40% { opacity: 0.3; transform: scale(0.6); }
    60% { opacity: 0.9; transform: scale(1); }
    80% { opacity: 0.2; transform: scale(0.5); }
    100% { opacity: 0; transform: translateY(-25px) scale(0); }
}

/* Gold motes — legendary, float up with glow */
.mote-gold {
    background: #f0c840;
    width: 4px; height: 4px;
    box-shadow: 0 0 6px rgba(240,200,64,0.6);
    animation-name: mote-gold-rise;
}
.mote-gold:nth-child(odd) { background: #f8e068; width: 3px; height: 3px; }
.mote-gold:nth-child(3n) { background: #d8a830; width: 5px; height: 5px; }
@keyframes mote-gold-rise {
    0% { opacity: 0; transform: translateY(0) scale(0.5); }
    20% { opacity: 0.8; transform: scale(1); }
    80% { opacity: 0.6; }
    100% { opacity: 0; transform: translateY(-40px) scale(0.3); }
}

/* Firefly motes — teal/orange, random float */
.mote-firefly {
    background: #48b898;
    width: 3px; height: 3px;
    box-shadow: 0 0 4px rgba(72,184,152,0.4);
    animation-name: mote-firefly-float;
}
.mote-firefly:nth-child(odd) { background: #e89848; box-shadow: 0 0 4px rgba(232,152,72,0.4); }
@keyframes mote-firefly-float {
    0% { opacity: 0; transform: translate(0, 0); }
    20% { opacity: 0.7; }
    50% { transform: translate(8px, -18px); opacity: 0.4; }
    70% { opacity: 0.8; transform: translate(-3px, -25px); }
    100% { opacity: 0; transform: translate(5px, -35px); }
}

/* Petal motes — red/pink, gentle fall-up */
.mote-petal {
    background: #d05060;
    width: 4px; height: 3px;
    animation-name: mote-petal-drift;
}
.mote-petal:nth-child(odd) { background: #e88090; }
.mote-petal:nth-child(3n) { background: #a03040; width: 3px; height: 4px; }
@keyframes mote-petal-drift {
    0% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
    20% { opacity: 0.6; }
    50% { transform: translate(-8px, -12px) rotate(-30deg); }
    75% { opacity: 0.5; transform: translate(4px, -22px) rotate(15deg); }
    100% { opacity: 0; transform: translate(-6px, -32px) rotate(-45deg); }
}

/* Droplet motes — blue, slow rise */
.mote-droplet {
    background: #88c0d0;
    width: 3px; height: 4px;
    animation-name: mote-droplet-rise;
}
.mote-droplet:nth-child(odd) { background: #5898a8; }
@keyframes mote-droplet-rise {
    0% { opacity: 0; transform: translateY(0); }
    30% { opacity: 0.5; }
    100% { opacity: 0; transform: translateY(-30px); }
}

/* Unavailable packs */
.shop-pack-card.unavailable { opacity: 0.25; pointer-events: none; filter: grayscale(0.5); }

/* --- Fan navigation arrows — large touch targets --- */
.shop-fan-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 52px; height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    border: 2px solid rgba(104,88,64,0.25);
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-dim);
    transition: all 0.2s;
    backdrop-filter: blur(4px);
}
.shop-fan-nav:hover {
    color: var(--text-bright);
    border-color: rgba(208,160,48,0.4);
    background: rgba(0,0,0,0.6);
}
.shop-fan-nav:disabled { opacity: 0.2; pointer-events: none; }
.shop-fan-nav svg { width: 24px; height: 24px; }
.shop-fan-prev { left: 2px; }
.shop-fan-next { right: 2px; }

/* --- Focused pack detail HUD (below carousel) --- */
.shop-pack-hud {
    flex-shrink: 0;
    padding: 0 20px 12px;
    text-align: center;
    position: relative;
    z-index: 5;
}
.shop-pack-hud-name {
    font-family: var(--font-pixel);
    font-size: 14px;
    color: var(--text-bright);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 4px;
}
.shop-pack-hud-desc {
    font-family: var(--font-pixel);
    font-size: 8px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 10px;
}
.shop-pack-hud-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    padding: 16px 32px;
    font-family: var(--font-pixel);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #fff;
    background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 100%);
    border: 2px solid var(--gold-light);
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(208,160,48,0.3), inset 0 1px 0 rgba(255,255,255,0.15);
    transition: all 0.2s;
    min-height: 52px;
}
.shop-pack-hud-btn:hover {
    box-shadow: 0 0 30px rgba(208,160,48,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
    transform: translateY(-1px);
}
.shop-pack-hud-btn:active { transform: translateY(1px); }
.shop-pack-hud-btn:disabled {
    opacity: 0.3;
    pointer-events: none;
    filter: grayscale(0.5);
}
.shop-pack-hud-btn svg { width: 18px; height: 18px; }

/* Pack flip mechanic */
.shop-pack-card { perspective: 800px; }
.pack-flipper {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}
.pack-flipper.flipped { transform: rotateY(180deg); }
.pack-face {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.pack-front { position: relative; }
.pack-back {
    position: absolute;
    inset: 0;
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.pack-flipper.flipped .pack-back { pointer-events: auto; }

/* ── Pack back surface ── */
.pack-back-surface {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--pb-base);
    overflow: hidden;
    image-rendering: pixelated;
    display: flex;
    flex-direction: column;
    box-shadow:
        inset 0 0 0 4px var(--pb-shadow),
        inset 0 0 0 6px var(--pb-outline);
}

/* Paper texture — subtle crosshatch */
.pb-texture {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.045;
    background-image:
        repeating-linear-gradient(0deg, var(--pb-outline) 0px, transparent 1px, transparent 5px),
        repeating-linear-gradient(90deg, var(--pb-outline) 0px, transparent 1px, transparent 5px);
}

/* Top brand strip */
.pb-band-top {
    flex-shrink: 0;
    background: var(--pb-accent-dim);
    border-bottom: 3px solid var(--pb-outline);
    padding: 5px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.1),
        inset 0 -2px 0 rgba(0,0,0,0.15);
}
.pb-brand {
    font-family: var(--font-pixel);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 5px;
    color: var(--pb-hi);
    opacity: 0.75;
}

/* Main body */
.pb-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 8px 12px 4px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    gap: 1px;
}

/* Hero — big bold seed count */
.pb-hero {
    font-family: var(--font-pixel);
    font-size: 20px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--pb-outline);
    padding: 0;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.08);
}

/* Tagline */
.pb-tagline {
    font-family: var(--font-pixel);
    font-size: 7px;
    text-align: center;
    color: var(--pb-shadow);
    letter-spacing: 1px;
    font-style: italic;
    padding-bottom: 2px;
    border-bottom: 2px solid var(--pb-shadow);
    margin: 0 8px;
    opacity: 0.5;
}

/* Rarity block — bold readable rows with dot leaders */
.pb-rarity-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 2px;
}
.pb-rarity-row {
    display: flex;
    align-items: center;
    gap: 5px;
}
.pb-rarity-pip {
    width: 10px; height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.25);
}
.rarity-common .pb-rarity-pip    { background: #808080; }
.rarity-uncommon .pb-rarity-pip  { background: #48a038; }
.rarity-rare .pb-rarity-pip      { background: #3878c8; }
.rarity-epic .pb-rarity-pip      { background: #8848c0; }
.rarity-legendary .pb-rarity-pip { background: #c89820; }
.pb-rarity-name {
    font-family: var(--font-pixel);
    font-size: 10px;
    color: var(--pb-outline);
    flex-shrink: 0;
}
.pb-rarity-dots {
    flex: 1;
    border-bottom: 2px dotted var(--pb-shadow);
    opacity: 0.35;
    min-width: 8px;
    margin-bottom: 2px;
}
.pb-rarity-pct {
    font-family: var(--font-pixel);
    font-size: 12px;
    color: var(--pb-outline);
    flex-shrink: 0;
    min-width: 30px;
    text-align: right;
}

/* Section label */
.pb-section-label {
    font-family: var(--font-pixel);
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--pb-accent);
    margin-bottom: 4px;
    padding-top: 3px;
    border-top: 2px solid var(--pb-shadow);
    opacity: 0.8;
}

/* Varieties */
.pb-varieties { display: flex; flex-direction: column; }
.pb-type-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.pb-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--font-pixel);
    font-size: 9px;
    color: var(--pb-outline);
    background: var(--pb-hi);
    padding: 3px 7px;
    border: 2px solid var(--pb-shadow);
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1);
}
.pb-type-icon { display: flex; align-items: center; }
.pb-type-icon svg { width: 12px; height: 12px; color: var(--pb-shadow); }

/* Stat rows — readable horizontal layout matching rarity rows */
.pb-stat-block {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.pb-stat-row {
    display: flex;
    align-items: center;
    gap: 5px;
}
.pb-stat-icon { display: flex; flex-shrink: 0; }
.pb-stat-icon svg { width: 12px; height: 12px; color: var(--pb-accent); }
.pb-stat-lbl {
    font-family: var(--font-pixel);
    font-size: 10px;
    color: var(--pb-outline);
    flex-shrink: 0;
    opacity: 0.8;
}
.pb-stat-dots {
    flex: 1;
    border-bottom: 2px dotted var(--pb-shadow);
    opacity: 0.35;
    min-width: 8px;
    margin-bottom: 2px;
}
.pb-stat-val {
    font-family: var(--font-pixel);
    font-size: 12px;
    color: var(--pb-outline);
    flex-shrink: 0;
    text-align: right;
}

/* Bottom barcode strip */
.pb-bottom-strip {
    flex-shrink: 0;
    background: var(--pb-accent-dim);
    border-top: 3px solid var(--pb-outline);
    padding: 6px 14px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.06),
        inset 0 -2px 0 rgba(0,0,0,0.12);
}
.pb-barcode {
    display: flex;
    align-items: stretch;
    height: 30px;
    gap: 0;
}
.pb-bar {
    height: 100%;
    background: var(--pb-outline);
    opacity: 0.45;
}
.pb-bar-gap {
    width: 2px;
    height: 100%;
}
.pb-lot {
    font-family: var(--font-pixel);
    font-size: 8px;
    letter-spacing: 4px;
    color: var(--pb-hi);
    opacity: 0.45;
}

/* HUD actions row */
.shop-pack-hud-actions {
    display: flex;
    gap: 8px;
    max-width: 320px;
    margin: 0 auto;
}
.shop-pack-hud-actions .shop-pack-hud-btn { flex: 1; }

/* Dot indicators for carousel position */
.shop-fan-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    padding: 2px 0 6px;
}
.shop-fan-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(104,88,64,0.3);
    border: 1px solid rgba(104,88,64,0.15);
    transition: all 0.3s;
    cursor: pointer;
}
.shop-fan-dot.active {
    background: var(--gold);
    border-color: var(--gold-light);
    box-shadow: 0 0 8px rgba(208,160,48,0.5);
}

/* ==========================================================================
   ITEMS — Supplies grid (same as before, shown when Items tab is active)
   ========================================================================== */
.shop-item-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 12px 10px;
    overflow-y: auto;
    height: 100%;
}
.shop-item-obj {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px 8px;
    background: rgba(28,22,16,0.8);
    border: 1px solid var(--border-dark);
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), border-color 0.25s, box-shadow 0.25s;
    position: relative;
}
.shop-item-obj:hover {
    transform: translateY(-5px);
    border-color: var(--border-light);
    box-shadow: 0 0 12px rgba(104,88,64,0.12), 0 8px 18px rgba(0,0,0,0.4);
}
.shop-item-obj:active { transform: scale(0.95); }
.shop-item-icon {
    width: 44px; height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 40% 30%, rgba(255,255,255,0.04) 0%, transparent 60%), rgba(0,0,0,0.3);
    border: 1px solid var(--border-mid);
    border-radius: 4px;
}
.shop-item-icon svg { width: 24px; height: 24px; color: var(--text-dim); }
.shop-item-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
    width: 100%;
}
.shop-item-name {
    font-family: var(--font-pixel);
    font-size: 7px;
    color: var(--text-bright);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.6;
}
.shop-item-desc {
    font-family: var(--font-pixel);
    font-size: 5.5px;
    color: var(--text-muted);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.shop-item-cost {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 2px;
    font-family: var(--font-pixel);
    font-size: 9px;
    color: var(--gold-light);
}
.shop-item-obj.unavailable { opacity: 0.3; pointer-events: none; filter: grayscale(0.5); }

/* ==========================================================================
   SUPPLIES TAB
   ========================================================================== */
.shop-supplies {
    overflow-y: auto;
    height: 100%;
    padding: 12px 16px 24px;
}
.shop-supply-section { margin-bottom: 24px; }
.shop-supply-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(104,88,64,0.2);
}
.shop-supply-header-icon {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px;
    flex-shrink: 0;
}
.shop-supply-header-icon.cat-speedup { background: rgba(80,160,72,0.15); color: #78c060; }
.shop-supply-header-icon.cat-hybridization { background: rgba(128,80,180,0.15); color: #a078d0; }
.shop-supply-title {
    font-family: var(--font-pixel); font-size: 10px;
    color: var(--text-bright); text-transform: uppercase; letter-spacing: 1px;
}
.shop-supply-desc {
    font-family: var(--font-pixel); font-size: 7px;
    color: var(--text-muted); line-height: 1.5;
}
.shop-supply-cards {
    display: flex; flex-direction: column;
    gap: 8px;
}
.shop-supply-card {
    display: flex; align-items: center;
    gap: 14px; padding: 14px 16px;
    background: rgba(28,22,16,0.85);
    border: 1px solid var(--border-dark);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: transform 0.15s ease, border-color 0.2s, box-shadow 0.2s;
    min-height: 64px;
}
.shop-supply-card:hover {
    border-color: var(--border-light);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.shop-supply-card:active { transform: scale(0.98); }
.shop-supply-card.unavailable { opacity: 0.3; pointer-events: none; filter: grayscale(0.5); }
.shop-supply-badge {
    position: absolute; top: -5px; right: -5px;
    background: var(--gold-base, #c8a030);
    color: #1a1408;
    font-family: var(--font-pixel); font-size: 8px; font-weight: bold;
    padding: 3px 7px; border-radius: 8px;
    line-height: 1.2; z-index: 1;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.shop-supply-icon {
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    image-rendering: pixelated;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border-dark);
    border-radius: 4px;
}
.shop-supply-icon.cat-speedup { border-color: rgba(80,160,72,0.25); }
.shop-supply-icon.cat-hybridization { border-color: rgba(128,80,180,0.25); }
.shop-sprite-img {
    image-rendering: pixelated;
    width: 48px; height: 48px;
}
.shop-sprite-img.lg { width: 64px; height: 64px; }
.shop-supply-info { flex: 1; min-width: 0; }
.shop-supply-name {
    font-family: var(--font-pixel); font-size: 9px;
    color: var(--text-bright); text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.3; margin-bottom: 3px;
}
.shop-supply-effect {
    font-family: var(--font-pixel); font-size: 8px;
    color: var(--gold-light); letter-spacing: 0.5px;
}
.shop-supply-buy {
    display: inline-flex; align-items: center; gap: 4px;
    font-family: var(--font-pixel); font-size: 10px;
    color: var(--gold-light); margin-left: auto; flex-shrink: 0;
    background: rgba(208,160,48,0.08);
    border: 1px solid rgba(208,160,48,0.2);
    border-radius: 4px;
    padding: 6px 12px;
}
.shop-supply-buy svg { width: 10px; height: 10px; }

/* ==========================================================================
   EQUIPMENT TAB
   ========================================================================== */
.shop-equipment {
    overflow-y: auto; height: 100%;
    padding: 12px 16px 24px;
}

/* Shared section label — no box, just a label */
.shop-section-label {
    font-family: var(--font-pixel); font-size: 11px;
    color: var(--text-bright); text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 0 0 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(104,88,64,0.2);
}

/* Tool upgrade — current + next side by side */
.shop-tool-row {
    display: flex; align-items: center;
    gap: 8px; margin-bottom: 28px;
}
.shop-tool-current, .shop-tool-next {
    flex: 1;
    display: flex; flex-direction: column; align-items: center;
    gap: 6px; padding: 14px 10px;
    border-radius: 6px;
    text-align: center;
}
.shop-tool-current {
    background: rgba(208,160,48,0.06);
    border: 1px solid rgba(208,160,48,0.2);
}
.shop-tool-next {
    background: rgba(0,0,0,0.3);
    border: 1px dashed rgba(208,160,48,0.25);
    cursor: pointer;
    transition: all 0.2s;
}
.shop-tool-next:hover {
    border-color: var(--gold-light);
    background: rgba(208,160,48,0.08);
}
.shop-tool-next.unavailable { opacity: 0.4; pointer-events: none; }
.shop-tool-img {
    width: 64px; height: 64px;
    image-rendering: pixelated;
}
.shop-tool-img.next { opacity: 0.7; }
.shop-tool-info { display: flex; flex-direction: column; gap: 2px; }
.shop-tool-name {
    font-family: var(--font-pixel); font-size: 9px;
    color: var(--text-bright); text-transform: uppercase;
}
.shop-tool-xp {
    font-family: var(--font-pixel); font-size: 8px;
    color: var(--gold-light);
}
.shop-tool-cost {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    font-family: var(--font-pixel); font-size: 10px;
    color: #1a1408; margin-top: 4px;
    background: linear-gradient(180deg, var(--gold-light, #e8c848) 0%, var(--gold-base, #c8a030) 100%);
    border: 1px solid var(--gold-light, #e8c848);
    border-radius: 4px; padding: 8px 16px;
}
.shop-tool-cost svg { width: 12px; height: 12px; }
.shop-tool-arrow-icon {
    display: flex; color: var(--text-dim); flex-shrink: 0;
}
.shop-tool-arrow-icon svg { width: 20px; height: 20px; }
.shop-tool-maxed {
    flex: 1; text-align: center;
    font-family: var(--font-pixel); font-size: 9px;
    color: rgba(80,160,72,0.7); text-transform: uppercase;
    letter-spacing: 1px; padding: 20px;
}

/* Slot equipment cards — flat rows, no sub-containers */
.shop-equip-card {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    background: rgba(28,22,16,0.7);
    border: 1px solid var(--border-dark);
    border-radius: 4px;
    margin-bottom: 8px;
    transition: border-color 0.2s;
}
.shop-equip-card:hover { border-color: var(--border-light); }
.shop-equip-card.unavailable { opacity: 0.35; }
.shop-equip-card-icon {
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    image-rendering: pixelated;
}
.shop-equip-card-icon .shop-sprite-img { width: 48px; height: 48px; }
.shop-equip-card-body { flex: 1; min-width: 0; }
.shop-equip-card-name {
    font-family: var(--font-pixel); font-size: 10px;
    color: var(--text-bright); text-transform: uppercase;
    letter-spacing: 0.5px; margin-bottom: 2px;
}
.shop-equip-card-stat {
    font-family: var(--font-pixel); font-size: 9px;
    color: var(--gold-light);
}
.shop-equip-card-btn {
    align-self: center; flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 4px;
    font-family: var(--font-pixel); font-size: 10px;
    color: #1a1408; padding: 10px 16px;
    background: linear-gradient(180deg, var(--gold-light, #e8c848) 0%, var(--gold-base, #c8a030) 100%);
    border: 1px solid var(--gold-light, #e8c848);
    border-radius: 4px; cursor: pointer;
    transition: all 0.2s; white-space: nowrap;
}
.shop-equip-card-btn svg { width: 12px; height: 12px; }
.shop-equip-card-btn:hover { box-shadow: 0 0 10px rgba(208,160,48,0.3); }
.shop-equip-card-btn.disabled { opacity: 0.3; pointer-events: none; filter: grayscale(0.5); }

/* ==========================================================================
   DETAIL / PURCHASE OVERLAY
   ========================================================================== */
.shop-detail-overlay {
    position: fixed; inset: 0; z-index: 40;
    background: rgba(0,0,0,0.7);
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(3px);
    animation: detail-fade-in 0.2s ease;
}
@keyframes detail-fade-in { from { opacity: 0; } to { opacity: 1; } }
.shop-detail-panel {
    background: rgba(28,22,16,0.95);
    border: 1px solid var(--border-mid);
    border-radius: 8px; padding: 24px 20px;
    max-width: 320px; width: 90%;
    display: flex; flex-direction: column; align-items: center;
    gap: 10px; text-align: center;
    animation: detail-slide-up 0.25s cubic-bezier(0.34,1.56,0.64,1);
    box-shadow: 0 8px 30px rgba(0,0,0,0.6), 0 0 1px rgba(104,88,64,0.3);
}
@keyframes detail-slide-up {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.shop-detail-icon {
    width: 80px; height: 80px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 4px;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border-dark);
    image-rendering: pixelated;
}
.shop-detail-icon .shop-sprite-img { width: 64px; height: 64px; }
.shop-detail-icon.cat-speedup { border-color: rgba(80,160,72,0.3); }
.shop-detail-icon.cat-hybridization { border-color: rgba(128,80,180,0.3); }
.shop-detail-name {
    font-family: var(--font-pixel); font-size: 12px;
    color: var(--text-bright); text-transform: uppercase;
    letter-spacing: 1px;
}
.shop-detail-desc {
    font-family: var(--font-pixel); font-size: 8px;
    color: var(--text-muted); line-height: 1.6; max-width: 280px;
}
.shop-detail-owned {
    font-family: var(--font-pixel); font-size: 8px;
    color: var(--gold-light);
    background: rgba(208,160,48,0.08);
    padding: 4px 12px; border-radius: 10px;
    border: 1px solid rgba(208,160,48,0.15);
}
.shop-detail-buy {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--font-pixel); font-size: 10px;
    color: #1a1408; padding: 12px 28px;
    background: linear-gradient(180deg, var(--gold-light, #e8c848) 0%, var(--gold-base, #c8a030) 100%);
    border: 1px solid var(--gold-light, #e8c848);
    border-radius: 4px; cursor: pointer;
    box-shadow: 0 0 12px rgba(208,160,48,0.25), 0 2px 6px rgba(0,0,0,0.3);
    transition: all 0.2s; margin-top: 4px; width: 100%;
    justify-content: center;
}
.shop-detail-buy svg { width: 14px; height: 14px; }
.shop-detail-buy:hover { box-shadow: 0 0 20px rgba(208,160,48,0.4); }
.shop-detail-buy.disabled { opacity: 0.3; pointer-events: none; filter: grayscale(0.5); }
.shop-detail-close {
    font-family: var(--font-pixel); font-size: 9px;
    color: var(--text-muted); background: none; border: none;
    cursor: pointer; padding: 8px 20px;
    transition: color 0.2s;
}
.shop-detail-close:hover { color: var(--text-bright); }

/* Slot picker */
.shop-slot-list {
    display: flex; flex-direction: column; gap: 6px;
    width: 100%; max-height: 280px; overflow-y: auto;
    margin-top: 6px;
}
.shop-slot-option {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border-dark);
    border-radius: 4px; cursor: pointer;
    transition: all 0.2s;
}
.shop-slot-option:hover {
    border-color: var(--gold-light);
    background: rgba(208,160,48,0.06);
}
.shop-slot-option.installed {
    opacity: 0.4; pointer-events: none;
    border-style: dashed;
}
.shop-slot-label {
    font-family: var(--font-pixel); font-size: 10px;
    color: var(--text-bright); font-weight: bold;
    min-width: 52px;
}
.shop-slot-plant {
    font-family: var(--font-pixel); font-size: 8px;
    color: var(--text-muted); flex: 1;
}
.shop-slot-equip {
    font-family: var(--font-pixel); font-size: 7px;
    color: var(--gold-light); text-transform: capitalize;
}
.shop-slot-installed {
    font-family: var(--font-pixel); font-size: 7px;
    color: rgba(80,160,72,0.7); text-transform: uppercase;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width: 500px) {
    .shop-pack-card { width: clamp(300px, 50vw, 520px); }
}

/* ==========================================================================
   PACK OPENING — Full-screen immersive reveal experience
   ========================================================================== */

/* Stage: full-screen overlay */
.pack-stage {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 50;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.pack-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 40%, rgba(30,28,24,0.95) 0%, rgba(8,6,4,1) 80%);
    z-index: 0;
}

/* --- Light rays (hidden until fired) --- */
.pack-rays {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    opacity: 0;
    z-index: 1;
    transition: opacity 0.6s;
    pointer-events: none;
}
.pack-rays::before {
    content: '';
    position: absolute;
    width: 300vmax;
    height: 300vmax;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255,240,180,0.06) 0%, transparent 55%),
        repeating-conic-gradient(
            from 0deg,
            rgba(255,240,180,0.04) 0deg 8deg,
            transparent 8deg 20deg
        );
    mask-image: radial-gradient(circle, white 15%, transparent 50%);
    -webkit-mask-image: radial-gradient(circle, white 15%, transparent 50%);
}
.pack-rays-fire {
    opacity: 1;
}
.pack-rays-fire::before {
    animation: rays-spin 8s linear infinite;
}
@keyframes rays-spin {
    to { transform: rotate(360deg); }
}

/* --- Flash burst --- */
.pack-flash {
    position: absolute;
    inset: 0;
    z-index: 8;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
}
.pack-flash-fire {
    opacity: 1;
    animation: flash-burst 0.5s ease-out forwards;
}
.pack-flash-fire { background: radial-gradient(circle at 50% 45%, rgba(255,255,255,0.7) 0%, transparent 60%); }
.pack-flash-epic { background: radial-gradient(circle at 50% 45%, rgba(180,140,240,0.6) 0%, transparent 60%); }
.pack-flash-legendary { background: radial-gradient(circle at 50% 45%, rgba(255,220,80,0.7) 0%, transparent 55%); }
@keyframes flash-burst {
    0% { opacity: 1; transform: scale(0.5); }
    40% { opacity: 0.8; transform: scale(1.2); }
    100% { opacity: 0; transform: scale(2); }
}

/* --- Burst particles --- */
.pack-particles {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pack-particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: particle-burst 0.8s ease-out forwards;
}
@keyframes particle-burst {
    0% { opacity: 1; transform: translate(0, 0) scale(1); }
    70% { opacity: 0.6; }
    100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0.2); }
}

/* --- Pack icon (pre-open state) --- */
.pack-icon {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    animation: pack-enter 0.6s ease-out forwards;
}
@keyframes pack-enter {
    0% { opacity: 0; transform: scale(0.6) translateY(20px); }
    60% { opacity: 1; transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}

.pack-icon-inner {
    position: relative;
    width: 120px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.3) 100%), var(--bg-surface);
    border: 2px solid var(--border-mid);
    border-radius: 4px;
    overflow: hidden;
}
.pack-icon-inner svg { position: relative; z-index: 2; color: var(--text-dim); width: 48px; height: 48px; }

.pack-icon-glow {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    opacity: 0.4;
    z-index: 0;
}

/* Pack tier colors */
.pack-icon-common .pack-icon-inner { border-color: var(--rarity-common); }
.pack-icon-common .pack-icon-glow { background: radial-gradient(circle, rgba(138,120,96,0.3) 0%, transparent 70%); }

.pack-icon-uncommon .pack-icon-inner { border-color: var(--rarity-uncommon); box-shadow: 0 0 20px rgba(104,168,88,0.2); }
.pack-icon-uncommon .pack-icon-glow { background: radial-gradient(circle, rgba(104,168,88,0.4) 0%, transparent 70%); }
.pack-icon-uncommon .pack-icon-inner svg { color: var(--green-light); }

.pack-icon-rare .pack-icon-inner { border-color: var(--rarity-rare); box-shadow: 0 0 24px rgba(64,112,160,0.25); }
.pack-icon-rare .pack-icon-glow { background: radial-gradient(circle, rgba(64,112,160,0.4) 0%, transparent 70%); }
.pack-icon-rare .pack-icon-inner svg { color: #80b8e0; }

.pack-icon-epic .pack-icon-inner { border-color: var(--rarity-epic); box-shadow: 0 0 28px rgba(112,80,160,0.3); }
.pack-icon-epic .pack-icon-glow { background: radial-gradient(circle, rgba(112,80,160,0.5) 0%, transparent 65%); }
.pack-icon-epic .pack-icon-inner svg { color: #c0a0e8; }

.pack-icon-legendary .pack-icon-inner { border-color: var(--rarity-legendary); box-shadow: 0 0 36px rgba(208,160,48,0.35); }
.pack-icon-legendary .pack-icon-glow { background: radial-gradient(circle, rgba(208,160,48,0.5) 0%, transparent 60%); animation: pack-glow-pulse 2s ease-in-out infinite alternate; }
.pack-icon-legendary .pack-icon-inner svg { color: var(--gold-light); }

@keyframes pack-glow-pulse {
    0% { opacity: 0.4; transform: scale(1); }
    100% { opacity: 0.7; transform: scale(1.15); }
}

/* Ready: gentle wobble inviting tap */
.pack-icon-ready {
    opacity: 1;
    animation: pack-wobble 1.2s ease-in-out infinite;
}
@keyframes pack-wobble {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(-2deg); }
    40% { transform: rotate(2deg); }
    60% { transform: rotate(-1.5deg); }
    80% { transform: rotate(1deg); }
}

/* Opening: violent shake */
.pack-icon-opening {
    opacity: 1;
    animation: pack-shake 0.4s ease-in-out;
}
@keyframes pack-shake {
    0%, 100% { transform: translate(0) rotate(0); }
    10% { transform: translate(-4px, 2px) rotate(-3deg); }
    20% { transform: translate(4px, -2px) rotate(3deg); }
    30% { transform: translate(-6px, 0) rotate(-4deg); }
    40% { transform: translate(6px, 2px) rotate(4deg); }
    50% { transform: translate(-3px, -3px) rotate(-2deg); }
    60% { transform: translate(5px, 1px) rotate(3deg); }
    70% { transform: translate(-4px, 2px) rotate(-3deg); }
    80% { transform: translate(3px, -1px) rotate(2deg); }
    90% { transform: translate(-2px, 1px) rotate(-1deg); }
}

/* Burst: scale out and fade */
.pack-icon-burst {
    animation: pack-burst 0.35s ease-in forwards !important;
}
@keyframes pack-burst {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.3); }
    100% { opacity: 0; transform: scale(2); filter: blur(8px); }
}

.pack-label {
    font-family: var(--font-pixel);
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
    animation: pack-label-pulse 2s ease-in-out infinite alternate;
}
@keyframes pack-label-pulse {
    0% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* --- Card reveal area --- */
.pack-card-area {
    position: relative;
    z-index: 6;
    display: none;
    width: 100%;
    max-width: 420px;
    padding: 12px;
    gap: 10px;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    max-height: calc(100vh - 160px);
}
.pack-card-area.active { display: flex; }

/* --- Individual card --- */
.pack-card {
    width: 100%;
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.2) 100%), var(--bg-surface);
    border: 2px solid var(--border-dark);
    border-radius: 4px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px) scale(0.85);
    transition: opacity 0.4s ease-out, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pack-card.revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.pack-card-glow {
    position: absolute;
    inset: -2px;
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.4s 0.1s;
    pointer-events: none;
    z-index: 0;
}
.pack-card.revealed .pack-card-glow { opacity: 1; }

/* Rarity card borders + glows */
.pack-card-common { border-color: rgba(138,120,96,0.4); }

.pack-card-uncommon { border-color: var(--rarity-uncommon); }
.pack-card-uncommon .pack-card-glow { box-shadow: 0 0 16px rgba(104,168,88,0.3), inset 0 0 16px rgba(104,168,88,0.08); }

.pack-card-rare { border-color: var(--rarity-rare); }
.pack-card-rare .pack-card-glow { box-shadow: 0 0 20px rgba(64,112,160,0.35), inset 0 0 20px rgba(64,112,160,0.1); }

.pack-card-epic { border-color: var(--rarity-epic); }
.pack-card-epic .pack-card-glow { box-shadow: 0 0 28px rgba(112,80,160,0.4), inset 0 0 24px rgba(112,80,160,0.12); }

.pack-card-legendary { border-color: var(--rarity-legendary); }
.pack-card-legendary .pack-card-glow {
    box-shadow: 0 0 36px rgba(208,160,48,0.5), inset 0 0 28px rgba(208,160,48,0.15);
    animation: card-legendary-pulse 2s ease-in-out infinite alternate;
}
@keyframes card-legendary-pulse {
    0% { box-shadow: 0 0 30px rgba(208,160,48,0.4), inset 0 0 24px rgba(208,160,48,0.1); }
    100% { box-shadow: 0 0 44px rgba(208,160,48,0.6), inset 0 0 32px rgba(208,160,48,0.18); }
}

/* Legendary shimmer sweep */
.pack-card-legendary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(232,192,64,0.06) 45%, rgba(232,192,64,0.12) 50%, rgba(232,192,64,0.06) 55%, transparent 70%);
    background-size: 200% 100%;
    animation: legendary-shimmer 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* Card content layout */
.pack-card-content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 64px 1fr;
    grid-template-rows: auto auto auto;
    gap: 4px 12px;
    padding: 12px 14px;
    align-items: center;
}

.pack-card-sprite {
    grid-row: 1 / -1;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Top row: name + rarity pill */
.pack-card-name {
    font-family: var(--font-pixel);
    font-size: 12px;
    color: var(--text-bright);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pack-card-rarity {
    display: inline-block;
    font-family: var(--font-pixel);
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 2px 8px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Middle row: stats inline */
.pack-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.pack-card-stat {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.pack-card-stat-label {
    font-family: var(--font-pixel);
    font-size: 7px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pack-card-stat-val {
    font-family: var(--font-pixel);
    font-size: 10px;
    color: var(--text-bright);
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.pack-card-stat-val svg { width: 10px; height: 10px; flex-shrink: 0; }

/* Bottom row: effect pills */
.pack-card-effects {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pack-card-fx {
    font-family: var(--font-pixel);
    font-size: 7px;
    letter-spacing: 0.3px;
    padding: 2px 7px;
    border-radius: 3px;
    color: #b8e8a0;
    background: rgba(104,168,88,0.15);
    border: 1px solid rgba(104,168,88,0.3);
}
.pack-card-fx-empty {
    color: var(--text-muted);
    background: transparent;
    border: 1px dashed rgba(255,255,255,0.1);
}

/* --- Action buttons --- */
.pack-actions {
    position: relative;
    z-index: 7;
    display: none;
    gap: 8px;
    width: 100%;
    max-width: 420px;
    padding: 12px;
}
.pack-actions.active {
    display: flex;
    animation: actions-enter 0.4s ease-out;
}
@keyframes actions-enter {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

.pack-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    font-family: var(--font-pixel);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.pack-btn-primary {
    color: #fff;
    background: linear-gradient(180deg, var(--green) 0%, var(--green-dark) 100%);
    border: 1px solid var(--green-light);
    box-shadow: 0 0 12px rgba(104,168,88,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
}
.pack-btn-primary:hover {
    box-shadow: 0 0 20px rgba(104,168,88,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
    transform: translateY(-1px);
}
.pack-btn-primary:active { transform: translateY(1px); }
.pack-btn-primary svg { width: 16px; height: 16px; }

.pack-btn-ghost {
    color: var(--text-dim);
    background: transparent;
    border: 1px dashed rgba(255,255,255,0.15);
}
.pack-btn-ghost:hover {
    color: var(--text-bright);
    border-color: rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.04);
}

/* --- Shop Balance (HUD element with double border, inner glow) --- */
.shop-balance {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-family: var(--font-pixel);
    font-size: 11px;
    color: var(--gold-light);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-xs) var(--spacing-sm);
    background:
        linear-gradient(180deg, rgba(208,160,48,0.12) 0%, rgba(208,160,48,0.04) 100%),
        var(--bg-dark);
    border: 2px solid var(--gold-dark);
    box-shadow:
        inset 0 0 16px rgba(208,160,48,0.08),
        0 0 6px rgba(208,160,48,0.1),
        0 2px 6px rgba(0,0,0,0.3);
    position: relative;
}

/* Inner border for balance HUD */
.shop-balance::before {
    content: '';
    position: absolute;
    inset: 2px;
    border: 1px solid rgba(208,160,48,0.1);
    pointer-events: none;
}

/* ==========================================================================
   POTS TAB -- full-screen collectible showcase
   ========================================================================== */

.shop-pots {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #0a0908;
}

/* ==== SCENE: the theatrical hero area ==== */

.spot-scene {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

/* -- Ambient mood (shifts for owned vs locked) -- */
.spot-ambient {
    position: absolute;
    inset: 0;
    z-index: 0;
    transition: background 0.8s ease;
}
.spot-mood-owned {
    background:
        radial-gradient(ellipse 55% 50% at 50% 42%, rgba(208,160,48,0.14) 0%, transparent 70%),
        radial-gradient(ellipse 90% 35% at 50% 95%, rgba(208,160,48,0.05) 0%, transparent 55%),
        radial-gradient(ellipse at 25% 15%, rgba(200,160,60,0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 20%, rgba(200,160,60,0.03) 0%, transparent 45%);
}
.spot-mood-locked {
    background:
        radial-gradient(ellipse 50% 45% at 50% 42%, rgba(90,70,120,0.16) 0%, transparent 65%),
        radial-gradient(ellipse 80% 30% at 50% 95%, rgba(50,35,70,0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 60%, rgba(70,55,100,0.05) 0%, transparent 40%),
        radial-gradient(ellipse at 70% 25%, rgba(80,60,110,0.04) 0%, transparent 40%);
}

/* -- Vignette -- */
.spot-vignette {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse 65% 55% at 50% 40%, transparent 25%, rgba(0,0,0,0.55) 100%);
}

/* -- Spotlight beams (V-cones from top) -- */
.spot-beam {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}
.spot-beam-main {
    top: -10%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 115%;
    background: linear-gradient(180deg,
        rgba(255,240,200,0.07) 0%,
        rgba(255,240,200,0.03) 35%,
        transparent 65%
    );
    clip-path: polygon(38% 0%, 62% 0%, 88% 100%, 12% 100%);
    animation: spot-beam-pulse 5s ease-in-out infinite alternate;
}
.spot-beam-left {
    top: -5%;
    left: 0;
    width: 45%;
    height: 110%;
    background: linear-gradient(180deg, rgba(200,180,140,0.03) 0%, transparent 60%);
    clip-path: polygon(50% 0%, 70% 0%, 100% 100%, 0% 100%);
    animation: spot-beam-pulse 7s ease-in-out 1s infinite alternate;
    opacity: 0.5;
}
.spot-beam-right {
    top: -5%;
    right: 0;
    width: 45%;
    height: 110%;
    background: linear-gradient(180deg, rgba(180,160,220,0.025) 0%, transparent 55%);
    clip-path: polygon(30% 0%, 50% 0%, 100% 100%, 0% 100%);
    animation: spot-beam-pulse 8s ease-in-out 2s infinite alternate;
    opacity: 0.4;
}
@keyframes spot-beam-pulse {
    0%   { opacity: 0.5; }
    100% { opacity: 1; }
}

/* -- Shelf / pedestal surface -- */
.spot-shelf {
    position: absolute;
    bottom: 18%;
    left: 50%;
    transform: translateX(-50%);
    width: min(340px, 75%);
    height: 4px;
    z-index: 2;
    background: linear-gradient(180deg, rgba(232,224,212,0.22) 0%, rgba(232,224,212,0.03) 100%);
    border-radius: 50%;
    box-shadow:
        0 0 50px 12px rgba(208,160,48,0.05),
        0 0 100px 30px rgba(208,160,48,0.025);
}
.spot-ground-shadow {
    position: absolute;
    bottom: 16.5%;
    left: 50%;
    transform: translateX(-50%);
    width: min(200px, 50%);
    height: 10px;
    z-index: 2;
    background: radial-gradient(ellipse, rgba(0,0,0,0.35) 0%, transparent 70%);
    animation: spot-shadow-pulse 5s ease-in-out infinite;
}
@keyframes spot-shadow-pulse {
    0%, 100% { transform: translateX(-50%) scaleX(1); opacity: 1; }
    50% { transform: translateX(-50%) scaleX(0.85); opacity: 0.7; }
}

/* -- Floating particles -- */
.spot-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.spot-mote {
    position: absolute;
    width: var(--size, 3px);
    height: var(--size, 3px);
    background: rgba(208,180,120,0.3);
    image-rendering: pixelated;
    opacity: 0;
    animation: spot-mote-float var(--dur, 7s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}
.spot-mote:nth-child(odd) { background: rgba(180,140,60,0.25); }
.spot-mote:nth-child(3n)  { background: rgba(180,160,220,0.18); }
.spot-mote-glow {
    box-shadow: 0 0 4px rgba(208,160,48,0.3);
    background: rgba(232,200,80,0.35);
}
@keyframes spot-mote-float {
    0%   { opacity: 0; transform: translate(0, 0); }
    15%  { opacity: 0.55; }
    50%  { transform: translate(var(--dx, 10px), calc(var(--dy, -15px) * 0.5)); opacity: 0.3; }
    80%  { opacity: 0.45; }
    100% { opacity: 0; transform: translate(calc(var(--dx, 10px) * -0.4), var(--dy, -15px)); }
}

/* ==== THE POT -- centered, dominant ==== */

.spot-pot-wrap {
    position: absolute;
    inset: 8% 0 22% 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}
.spot-canvas {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* -- Lock overlay: huge "?" centered over the pot -- */
.spot-lock {
    position: absolute;
    inset: 8% 0 22% 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s;
}
.spot-lock.visible { opacity: 1; }

.spot-lock-q {
    font-family: var(--font-pixel);
    font-size: clamp(56px, 18vw, 100px);
    color: rgba(180,160,200,0.18);
    text-shadow:
        0 0 40px rgba(140,110,180,0.12),
        0 0 80px rgba(120,90,160,0.06);
    animation: spot-q-breathe 3s ease-in-out infinite alternate;
    position: relative;
    z-index: 2;
}
.spot-lock-glow {
    position: absolute;
    width: clamp(100px, 30vw, 180px);
    height: clamp(100px, 30vw, 180px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(120,90,170,0.08) 0%, transparent 70%);
    animation: spot-glow-pulse 4s ease-in-out infinite alternate;
}
@keyframes spot-q-breathe {
    0%   { opacity: 0.5; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.06); }
}
@keyframes spot-glow-pulse {
    0%   { transform: scale(0.9); opacity: 0.4; }
    100% { transform: scale(1.15); opacity: 0.8; }
}

/* -- Collection badge (top-right) -- */
.spot-coll-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 6;
    font-family: var(--font-pixel);
    font-size: 9px;
    color: var(--text-muted, #807868);
    letter-spacing: 1px;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    padding: 6px 12px;
    border: 1px solid rgba(255,255,255,0.06);
}

/* -- Navigation arrows (tall edge buttons) -- */
.spot-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    width: 48px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.3);
    border: none;
    color: var(--text-muted, #807868);
    cursor: pointer;
    transition: all 0.2s;
}
.spot-nav-prev { left: 0; border-right: 1px solid rgba(255,255,255,0.06); }
.spot-nav-next { right: 0; border-left: 1px solid rgba(255,255,255,0.06); }
.spot-nav:hover:not(:disabled) { background: rgba(0,0,0,0.55); color: var(--text-bright); }
.spot-nav:active:not(:disabled) { background: rgba(0,0,0,0.65); }
.spot-nav:disabled { opacity: 0.12; cursor: default; }
.spot-nav svg { width: 28px; height: 28px; }

/* ==== INFO PANEL: below the scene ==== */

.spot-panel {
    flex-shrink: 0;
    padding: 14px 20px 10px;
    text-align: center;
    background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.75) 100%);
    border-top: 1px solid rgba(255,255,255,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.spot-name {
    font-family: var(--font-pixel);
    font-size: clamp(14px, 4vw, 20px);
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.4;
}
.spot-name-owned {
    color: var(--text-bright, #e8e0d4);
    text-shadow: 0 0 16px rgba(208,160,48,0.2);
}
.spot-name-locked {
    color: rgba(160,145,180,0.45);
    letter-spacing: 8px;
    text-shadow: 0 0 20px rgba(120,100,160,0.15);
}

.spot-tagline {
    font-family: var(--font-pixel);
    font-size: clamp(7px, 2vw, 9px);
    color: var(--text-dim, #807868);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    line-height: 1.6;
}
.spot-tagline-dim { opacity: 0.6; }

.spot-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 22px;
    width: 100%;
}
.spot-status-owned {
    font-family: var(--font-pixel);
    font-size: 8px;
    color: var(--green, #68a858);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(104,168,88,0.3);
}
.spot-price-tag {
    font-family: var(--font-pixel);
    font-size: clamp(9px, 2.5vw, 12px);
    color: var(--gold, #c8a84e);
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.spot-price-icon { font-size: 110%; }
.spot-event-tag {
    font-family: var(--font-pixel);
    font-size: 8px;
    color: var(--rarity-epic, #9070c0);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.7;
    text-shadow: 0 0 12px rgba(140,110,190,0.2);
}

/* -- Achievement progress bar -- */
.spot-progress-wrap {
    width: 100%;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.spot-progress-label {
    font-family: var(--font-pixel);
    font-size: 7px;
    color: var(--rarity-rare, #4070a0);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.spot-progress-track {
    width: 100%;
    height: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(64,112,160,0.25);
    border-radius: 2px;
    overflow: hidden;
}
.spot-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(64,112,160,0.35) 0%, rgba(80,140,200,0.55) 100%);
    box-shadow: 0 0 8px rgba(64,112,160,0.3);
    transition: width 0.4s ease;
}

/* -- Action area / Buy button -- */
.spot-action {
    width: 100%;
    max-width: 360px;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0 2px;
}

.spot-buy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    padding: 16px 24px;
    font-family: var(--font-pixel);
    font-size: clamp(11px, 3vw, 14px);
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #1a1408;
    background: linear-gradient(180deg, #e8c848 0%, #c8a030 100%);
    border: 2px solid #ebd060;
    border-radius: 6px;
    cursor: pointer;
    box-shadow:
        0 0 28px rgba(208,160,48,0.4),
        inset 0 1px 0 rgba(255,255,255,0.25),
        0 4px 16px rgba(0,0,0,0.45);
    transition: all 0.2s;
    min-height: 52px;
}
.spot-buy:hover {
    box-shadow:
        0 0 40px rgba(208,160,48,0.6),
        inset 0 1px 0 rgba(255,255,255,0.3),
        0 4px 16px rgba(0,0,0,0.45);
    transform: translateY(-2px);
}
.spot-buy:active { transform: translateY(1px); }
.spot-buy-cant {
    opacity: 0.3;
    pointer-events: none;
    filter: grayscale(0.5);
}
.spot-buy-text { flex: 1; text-align: center; }
.spot-buy-divider {
    width: 1px;
    height: 20px;
    background: rgba(26,20,8,0.2);
    margin: 0 12px;
}
.spot-buy-cost {
    font-size: clamp(10px, 2.5vw, 12px);
    white-space: nowrap;
}

/* ==== FILMSTRIP: scrollable thumbnail bar ==== */

.spot-strip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px 12px;
    background: rgba(20,18,14,0.95);
    border-top: 1px solid rgba(255,255,255,0.08);
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
}
.spot-strip::-webkit-scrollbar { display: none; }

.spot-thumb {
    position: relative;
    flex-shrink: 0;
    width: 72px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s;
    overflow: hidden;
}
.spot-thumb:hover { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.07); }

.spot-thumb.owned { opacity: 0.85; }
.spot-thumb.owned:hover { opacity: 1; }

.spot-thumb.locked { opacity: 0.4; }
.spot-thumb.locked:hover { opacity: 0.6; }

.spot-thumb.active {
    opacity: 1;
    border-color: var(--gold, #c8a84e);
    box-shadow: 0 0 12px rgba(208,160,48,0.4);
    background: rgba(208,160,48,0.1);
}
.spot-thumb.active.locked {
    border-color: rgba(160,140,190,0.45);
    box-shadow: 0 0 10px rgba(130,110,170,0.25);
    opacity: 0.75;
}

.spot-thumb-q {
    font-family: var(--font-pixel);
    font-size: 11px;
    color: var(--text-muted, #605848);
}

/* Owned checkmark badge */
.spot-thumb-check {
    position: absolute;
    bottom: 1px;
    right: 2px;
    font-size: 8px;
    color: var(--green, #68a858);
    text-shadow: 0 0 3px rgba(0,0,0,0.8);
    line-height: 1;
}