/* Core Layout & Typography */
#bb-gacha-container { max-width: 650px; margin: 0 auto 30px auto; background: #0b0f19; border-radius: 8px; padding: 25px; color: #e2e8f0; font-family: 'Inter', 'Segoe UI', sans-serif; border: 1px solid #1e293b; box-shadow: 0 20px 50px rgba(0,0,0,0.9); }

/* Dev Terminal */
#bb-dev-terminal { background: rgba(220, 38, 38, 0.1); border: 1px solid #ef4444; border-radius: 6px; padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.dev-badge { color: #fca5a5; font-size: 0.8em; font-weight: 800; letter-spacing: 1px; }
.dev-btn { background: #dc2626; color: white; border: none; padding: 6px 12px; font-weight: bold; border-radius: 4px; cursor: pointer; text-transform: uppercase; font-size: 0.8em; }

/* Banners & Status */
.bb-lore-banner { background: linear-gradient(90deg, #1e293b 0%, #0f172a 100%); border-left: 4px solid #8b5cf6; padding: 15px 20px; margin-bottom: 20px; border-radius: 4px; }
.bb-lore-banner h2 { color: #f8fafc; margin: 0; font-size: 1.1em; letter-spacing: 2px; text-transform: uppercase; }
.gacha-status-bar { display: flex; justify-content: space-between; background: #0f172a; padding: 12px 20px; border-radius: 6px; margin-bottom: 15px; font-weight: 700; border: 1px solid #334155; }
#gacha-tickets { color: #06b6d4; text-shadow: 0 0 10px rgba(6,182,212,0.5); font-size: 1.1em; }
#gacha-credits { font-size: 1.1em; text-shadow: 0 0 10px rgba(234, 179, 8, 0.5); }

/* The Viewport */
#gacha-viewport { width: 100%; height: 500px; background: #020617; border: 2px solid #334155; border-radius: 8px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 20px; transition: 0.3s; perspective: 1200px; }

/* --- THE SUMMONING PORTAL --- */
#summon-portal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 5; background: radial-gradient(circle, rgba(15,23,42,0) 0%, rgba(2,6,23,0.9) 100%); }
.portal-ring { position: absolute; border-radius: 50%; border: 2px solid transparent; box-sizing: border-box; }
.ring-outer { width: 280px; height: 280px; border-top: 4px solid #06b6d4; border-bottom: 4px solid #a855f7; animation: spinPortal 4s linear infinite; box-shadow: inset 0 0 20px rgba(6,182,212,0.2); }
.ring-inner { width: 190px; height: 190px; border-left: 4px solid #eab308; border-right: 4px solid #38b2ac; animation: spinPortal 2.5s linear infinite reverse; box-shadow: 0 0 15px rgba(234,179,8,0.4); }
.portal-core { width: 30px; height: 30px; background: white; border-radius: 50%; box-shadow: 0 0 30px white, 0 0 60px #06b6d4; animation: pulseCore 1s infinite alternate; }

@keyframes spinPortal { 100% { transform: rotate(360deg); } }
@keyframes pulseCore { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.5); opacity: 1; } }

.portal-critical .ring-outer { animation-duration: 0.4s; border-width: 8px; filter: brightness(1.5); box-shadow: 0 0 30px #06b6d4; }
.portal-critical .ring-inner { animation-duration: 0.2s; border-width: 6px; filter: brightness(1.5); box-shadow: 0 0 30px #eab308; }
.portal-critical .portal-core { animation: expandCore 0.8s cubic-bezier(0.895, 0.03, 0.685, 0.22) forwards; }
@keyframes expandCore { 0% { transform: scale(1.5); } 100% { transform: scale(40); opacity: 1; background: white; } } 

/* Idle States & Charging UI */
#gacha-idle-state { text-align: center; color: #334155; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: absolute; pointer-events: none; }
#gacha-idle-state h3 { letter-spacing: 5px; font-size: 1.2em; z-index: 2; font-weight: 800; transition: color 0.3s; }
.text-charging { color: #06b6d4 !important; text-shadow: 0 0 15px #06b6d4; }
.scanner-line { position: absolute; width: 100%; height: 2px; background: rgba(6, 182, 212, 0.5); box-shadow: 0 0 15px #06b6d4; top: 0; animation: scan 3s linear infinite; z-index: 1; }
.scanner-charging { animation: scan 0.4s linear infinite !important; height: 4px; background: white; }
@keyframes scan { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

/* Particle & Flash Engine */
#gacha-fx-layer { position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s; z-index: 6; pointer-events: none; mix-blend-mode: screen; }
.fx-flash { animation: cinematicFlash 1.5s cubic-bezier(0.19, 1, 0.22, 1) forwards; }
@keyframes cinematicFlash { 0% { background: white; opacity: 1; } 100% { background: var(--burst-color); opacity: 0; } }
#gacha-particle-container { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.gacha-particle { position: absolute; width: 6px; height: 6px; background: white; border-radius: 50%; opacity: 0; top: 50%; left: 50%; mix-blend-mode: screen; box-shadow: 0 0 10px white; }

/* THE MATERIALIZE ANIMATION & CARD PHYSICS */
.physics-card { position: relative; z-index: 10; cursor: crosshair; margin: 0 auto; width: 80%; max-width: 340px; }
.card-aspect-ratio { display: flex; flex-direction: column; width: 100%; aspect-ratio: 3.2 / 4.5; border-radius: 8px; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); border: 3px solid transparent; background: #0f172a; transform-style: preserve-3d; }
.card-materialize { animation: materializeAnim 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
@keyframes materializeAnim { 
    0% { transform: scale(0) translateY(50px); opacity: 0; filter: brightness(2) blur(10px); } 
    100% { transform: scale(1) translateY(0); opacity: 1; filter: brightness(1) blur(0); } 
}

/* Holographics & Tiers */
.holographic-glare { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.4), transparent 60%); opacity: 0; mix-blend-mode: overlay; pointer-events: none; z-index: 15; transition: opacity 0.3s; }
.holographic-foil { position: absolute; inset: 0; background: linear-gradient(125deg, transparent 20%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.3) 60%, transparent 80%); background-size: 200% 200%; mix-blend-mode: color-dodge; opacity: 0; pointer-events: none; z-index: 14; }
.foil-active { animation: foilShine 4s linear infinite; opacity: 1; }
@keyframes foilShine { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.card-rarity-badge { position: absolute; top: 15px; right: 15px; background: rgba(0,0,0,0.85); padding: 6px 14px; border-radius: 4px; font-weight: 900; letter-spacing: 2px; z-index: 20; border: 1px solid; backdrop-filter: blur(5px); }
.card-stars-badge { position: absolute; top: 15px; left: 15px; background: rgba(0,0,0,0.85); padding: 6px 10px; border-radius: 4px; font-weight: 900; letter-spacing: 2px; z-index: 20; color: #fbbf24; border: 1px solid #fbbf24; box-shadow: 0 0 10px rgba(251, 191, 36, 0.3); }

.tier-silver { border-color: #cbd5e1 !important; box-shadow: 0 0 15px rgba(203, 213, 225, 0.8) !important; }
.tier-silver .card-aspect-ratio { border-color: #cbd5e1 !important; box-shadow: inset 0 0 20px rgba(203, 213, 225, 0.5); }
.tier-gold { border-color: #fbbf24 !important; box-shadow: 0 0 25px rgba(251, 191, 36, 1) !important; }
.tier-gold .card-aspect-ratio { border-color: #fbbf24 !important; box-shadow: inset 0 0 30px rgba(251, 191, 36, 0.6); }

.unit-image-src { flex-grow: 1; width: 100%; object-fit: cover; display: block; position: relative; z-index: 5; }
.bb-lore-box { min-height: 100px; background: rgba(15, 23, 42, 0.98); padding: 15px 20px; border-top: 2px solid transparent; display: flex; flex-direction: column; justify-content: center; text-align: left; position: relative; z-index: 5; }
.bb-lore-box h4 { margin: 0 0 6px 0; font-size: 1.1em; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; }
.bb-lore-box p { margin: 0; font-size: 0.85em; font-style: italic; color: #cbd5e1; line-height: 1.4; }

/* Buttons & Timers */
.gacha-btn { width: 100%; padding: 20px; background: linear-gradient(135deg, #2563eb, #1d4ed8); color: white; border: none; border-radius: 6px; font-size: 1.1em; font-weight: 800; cursor: pointer; transition: all 0.2s; text-transform: uppercase; letter-spacing: 1px; border-bottom: 4px solid #1e3a8a; }
.gacha-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(37, 99, 235, 0.6); border-bottom-width: 6px; margin-bottom: -2px; }
.gacha-btn:disabled { background: #1e293b; color: #94a3b8; border-bottom: 4px solid #0f172a; cursor: not-allowed; }
.timer-active { color: #f59e0b !important; font-family: monospace; font-size: 1.3em; letter-spacing: 2px; }

/* --- ABSOLUTE MODAL FIX (Overrides Theme Layouts) --- */
.bb-global-modal { display: none; position: fixed !important; z-index: 2147483647 !important; left: 0 !important; top: 0 !important; width: 100vw !important; height: 100vh !important; background-color: rgba(2, 6, 23, 0.95) !important; backdrop-filter: blur(8px) !important; overflow-y: auto !important; padding: 5vh 0 !important; cursor: pointer; }
.bb-modal-content { position: relative; margin: 0 auto; width: 90%; max-width: 420px; display: flex; flex-direction: column; align-items: center; cursor: default; }

/* Shop UI */
.shop-content { background: #0b1120 !important; padding: 30px !important; border-radius: 12px !important; border: 2px solid #eab308 !important; box-shadow: 0 25px 50px rgba(0,0,0,0.9) !important; max-width: 700px !important; }
.shop-header { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 15px; border-bottom: 1px solid #334155; padding-bottom: 15px; }
.bb-close-modal-btn { background: transparent; border: none; color: #94a3b8; font-size: 35px; cursor: pointer; line-height: 1; transition: 0.2s; font-weight: bold; padding: 0; }
.bb-close-modal-btn:hover { color: white; transform: scale(1.1); }
.shop-items-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; width: 100%; }
.shop-item { background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; gap: 15px; transition: 0.2s; text-align: center; }
.shop-item:hover { border-color: #38b2ac; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.5); }
.shop-item-info h4 { margin: 0 0 10px 0; color: white; font-size: 1.1em; }
.shop-item-info p { margin: 0; font-size: 0.85em; color: #94a3b8; line-height: 1.5; }
.shop-buy-btn { background: linear-gradient(135deg, #eab308, #ca8a04); border-bottom-color: #854d0e; padding: 12px; font-size: 1em; width: 100%; }

/* Roster Archive */
.bb-roster-container { max-width: 800px; margin: 40px auto; background: #0f172a; padding: 25px; border-radius: 12px; color: white; border: 1px solid #1e293b; box-shadow: 0 10px 25px rgba(0,0,0,0.6); }
.bb-roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 15px; }
.roster-card { position: relative; border-radius: 6px; overflow: hidden; border: 2px solid #1e293b; background: #0b1120; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.roster-card img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.roster-card.unlocked { border-color: var(--rarity-color); cursor: pointer; }
.roster-card.unlocked:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 12px 25px rgba(0,0,0,0.8); z-index: 2; border-color: white; }
.roster-count { position: absolute; top: 5px; right: 5px; background: rgba(15,23,42,0.9); padding: 2px 8px; border-radius: 4px; font-weight: 900; font-size: 0.85em; z-index: 10; border: 1px solid var(--rarity-color); }
.roster-stars { position: absolute; bottom: 5px; left: 5px; color: #fbbf24; font-size: 1.2em; text-shadow: 0 0 5px black; z-index: 10; letter-spacing: -2px; }
.roster-card.locked img { filter: grayscale(100%) brightness(0.15); }
.roster-card.locked .roster-lock-icon { position: absolute; font-size: 2.5em; color: #334155; font-weight: 800; z-index: 10; }

.modal-button-group { margin-top: 25px; width: 100%; display: flex; gap: 10px; flex-direction: column; }
.share-btn { background: linear-gradient(135deg, #10b981, #059669); border-bottom-color: #047857; padding: 15px; font-size: 1em; }
.trade-btn { background: linear-gradient(135deg, #eab308, #ca8a04); border-bottom-color: #854d0e; padding: 15px; font-size: 1em; }

/* Trade Grid Selection UI */
.bb-trade-selection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 12px; margin-top: 15px; max-height: 300px; overflow-y: auto; padding: 10px; background: #0f172a; border-radius: 8px; border: 1px solid #1e293b; }
.trade-card-option { position: relative; border-radius: 4px; overflow: hidden; border: 2px solid #1e293b; aspect-ratio: 1/1; cursor: pointer; transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.trade-card-option img { width: 100%; height: 100%; object-fit: cover; }
.trade-card-option:hover { transform: scale(1.05); border-color: #94a3b8; }
.trade-card-option.selected { transform: scale(1.1); z-index: 2; border-color: var(--selected-color) !important; box-shadow: 0 0 20px var(--selected-color); }

/* Toasts */
#bb-toast-container { position: fixed; top: 20px; right: 20px; z-index: 2147483647; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.bb-toast { background: rgba(15, 23, 42, 0.95); border-left: 4px solid #10b981; color: white; padding: 15px 20px; border-radius: 4px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); backdrop-filter: blur(5px); animation: slideIn 0.4s ease-out forwards; max-width: 350px; font-size: 0.9em; line-height: 1.4; pointer-events: auto; }
@keyframes slideIn { 0% { transform: translateX(100%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }